/* Steadfast Research Group — warm/editorial brand theme (live 2026-08-17).
   Layers on assets/styles.css and targets the site's real classes with higher
   specificity, so it never edits the base stylesheet. Gated on body.warm-preview,
   which every page carries; removing that class + this <link> reverts a page.
   The pre-rebrand site is tagged pre-rebrand-2026-08-17. */

body.warm-preview{
  --wcream:#ffffff; --wcream-deep:#e2d5bc; --wink:#221d16; --wforest:#333f27;
  --wolive:#6b7a4e; --wstone:#8d8271; --wline:rgba(34,29,22,.14);
  background:var(--wcream); color:var(--wink);
}

/* ---- header / nav ---- */
body.warm-preview header.site{
  background:rgba(255,255,255,.86); backdrop-filter:blur(12px); border-bottom-color:var(--wline);
}
/* Flag mark, recolored to forest green — pitched in chat 2026-08-15. `filter` can't hit an
   exact hex from a white source, so the real <img> is swapped for a masked span: the same
   PNG's alpha channel used as a mask over a solid background-color. */
body.warm-preview .logo-flag-img{ display:none; }
body.warm-preview .logo-flag-mask{
  display:inline-block !important; width:34px; height:34px; flex:0 0 auto;
  background-color:var(--wforest);
  -webkit-mask:url('/assets/logo-mark-dark.png') center/contain no-repeat;
  mask:url('/assets/logo-mark-dark.png') center/contain no-repeat;
}
/* Bigger, more generously spaced lockup — pitched in chat 2026-08-14 to match the rest of
   the redesign's breathing room, not a new mark. */
body.warm-preview .brand{ gap:11px; }
body.warm-preview .brand .name b{
  color:var(--wink); font-size:29px; letter-spacing:normal; font-weight:400;
  font-family:'Instrument Serif',serif; text-transform:none;
}
/* margin-top is negative because "Steadfast" reserves a full descender's worth of space below
   its baseline that no letter in the word actually uses, which read as a gap between the two
   lines. Pulling back through it closes the lockup without touching the type sizes. */
body.warm-preview .brand .name span{ color:var(--wstone); font-size:10px; letter-spacing:.435em; margin-top:-3px; display:block; }
/* The subline is set as individual letters so flex can justify it flush to the width of
   "Steadfast" above it, instead of tracking being hand-tuned per breakpoint. letter-spacing
   must be 0 here: trailing spacing after the last letter would push the line past flush. */
body.warm-preview .brand .name span.wm-sub{ display:flex; justify-content:space-between; letter-spacing:0; }
body.warm-preview .brand .name span.wm-sub i{ font-style:normal; }
body.warm-preview .brand .name span.wm-sub .wm-sp{ flex:0 0 .34em; }
body.warm-preview .nav a{ color:var(--wink); opacity:.75; }
body.warm-preview .nav a:hover, body.warm-preview .nav a.active{ color:var(--wforest); opacity:1; }
/* Shop pill, made to read as a plain nav link like Products/Affiliate rather than a CTA
   button — pitched in chat 2026-08-15. */
body.warm-preview header.site .pill{
  background:none; color:var(--wink); opacity:.75; border:none; padding:0; border-radius:0;
  font-family:'Archivo',Arial,sans-serif; text-transform:none; letter-spacing:normal;
  font-weight:500; font-size:14.5px;
}
body.warm-preview header.site .pill:hover{ background:none; color:var(--wforest); opacity:1; }
body.warm-preview .ico, body.warm-preview .acct-btn, body.warm-preview .cart-btn{ color:var(--wink); }
body.warm-preview .hamburger span{ background:var(--wink); }
@media (max-width:880px){
  body.warm-preview .mobile-nav{ background:var(--wcream); }
  body.warm-preview .mobile-nav a{ color:var(--wink); }
  /* The wordmark's tracking is tuned to match "Steadfast" at desktop size; at phone
     widths the header also carries account/cart/hamburger, so scale it down to keep
     "RESEARCH GROUP" on one line. */
  body.warm-preview .brand{ gap:9px; }
  body.warm-preview .brand .name b{ font-size:23px; }
  body.warm-preview .brand .name span{ font-size:8px; letter-spacing:.4em; margin-top:-2px; }
  body.warm-preview .logo-flag-mask{ width:27px; height:27px; }
}

/* ---- shared CTA button look: sharp corners, tracked mono caps, solid forest fill ---- */
body.warm-preview .whero-btn,
body.warm-preview .mobile-nav .pill,
body.warm-preview .chip.active,
body.warm-preview .pcard .add,
body.warm-preview .pdp-info .pill,
body.warm-preview .modal .pill,
body.warm-preview .page-hero .pill,
body.warm-preview main .pill:not(.pill-ghost){
  background:var(--wforest); color:var(--wcream); border-color:var(--wforest);
  font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.09em;
  font-weight:700; font-size:12.5px; border-radius:3px;
}
body.warm-preview .whero-btn:hover,
body.warm-preview .mobile-nav .pill:hover,
body.warm-preview .pcard .add:hover,
body.warm-preview .pdp-info .pill:hover,
body.warm-preview .modal .pill:hover,
body.warm-preview main .pill:not(.pill-ghost):hover{ background:var(--wink); }
body.warm-preview .pill-ghost{ color:var(--wink); border-color:var(--wline); }
body.warm-preview .pill-ghost:hover{ border-color:var(--wforest); color:var(--wforest); }
body.warm-preview .pcard .add.added{ background:var(--wolive); color:var(--wink); }

/* ---- product cards: Primally Pure reference, pitched in chat 2026-08-14 — no boxed card,
   image floats straight on the page, price stacks above a full-width sharp-cornered button
   instead of sitting beside a pill. ---- */
body.warm-preview .pcard{
  border:none; border-radius:0; background:none; box-shadow:none;
}
body.warm-preview .pcard:hover{ border:none; transform:none; }
body.warm-preview .pcard .shot{ border-radius:0; border:1px solid var(--wline); }
body.warm-preview .pcard .body{ padding:16px 2px 0; }
body.warm-preview .pcard .cat{ color:var(--wstone); }
body.warm-preview .pcard h3{ font-family:'Archivo',Arial,sans-serif; color:var(--wink); font-size:16px; font-weight:600; }
body.warm-preview .pcard .mg{ color:var(--wstone); }
body.warm-preview .pcard .prow{
  flex-direction:column; align-items:stretch; gap:12px; margin-top:10px;
}
body.warm-preview .pcard .price{ color:var(--wink); font-family:'Instrument Serif',serif; font-size:20px; }
body.warm-preview .pcard .add{ width:100%; justify-content:center; padding:12px 16px; }
body.warm-preview .pcard .b{ border-radius:999px; }
body.warm-preview .pcard .b.stock{ background:rgba(255,255,255,.9); }
body.warm-preview .pcard .b.best{ background:var(--wforest); color:var(--wcream); border-color:var(--wforest); }
body.warm-preview .pcard .b.hot{ background:var(--wforest); color:var(--wcream); border-color:var(--wforest); }
body.warm-preview .pdp-size{ border-radius:999px; }
body.warm-preview main .pdp-size.active{ background:var(--wforest); color:var(--wcream); border-color:var(--wforest); }
body.warm-preview .verify-table thead th{ color:var(--wforest); }
body.warm-preview .verify-table td.yes{ color:var(--wforest); }
body.warm-preview .pdp-benefits .a .ico{ color:var(--wolive); }

/* ---- typography ---- */
body.warm-preview .mono{ color:var(--wstone); }
body.warm-preview h1, body.warm-preview h2, body.warm-preview h3{
  color:var(--wforest); text-shadow:none;
  font-family:'Instrument Serif', serif; font-weight:400;
}
body.warm-preview h1 i, body.warm-preview h2 i, body.warm-preview h3 i{ color:var(--wolive); font-style:italic; }
body.warm-preview .sec-head p,
body.warm-preview .page-hero p.sub,
body.warm-preview .pdp-info .sub{ color:var(--wink); opacity:.75; }
body.warm-preview p, body.warm-preview li{ color:var(--wink); }
body.warm-preview .prose a{ color:var(--wforest); }
body.warm-preview .page-hero{ border-bottom-color:var(--wline); }
/* seal-dark.png is already the ink mark, which is what a light page wants. It was
   being inverted to white-on-white and disappearing (/account, /checkout). Only the
   white logo-mark in the header needs an invert. */
body.warm-preview .hero-seal{ filter:none; }

/* Customer portal opens on the dark plinth photograph rather than the warm sand, so the page
   is bookended by an image instead of a flat fill. The overlay is not decoration: the wall
   carries a light shaft that peaks around 58% luminance, and centred cream type crosses it at
   roughly 2.6:1 unaided. Darkening the plate first puts every element past 4.5:1. */
body.warm-preview .acct-hero{
  background:
    linear-gradient(rgba(16,13,8,.58), rgba(16,13,8,.72)),
    url('/assets/brand/band-account-dark.jpg') center 62% / cover no-repeat;
  border-bottom:1px solid rgba(244,239,228,.14);
}
/* The heading and sub colours below are the global warm-theme ink values restated for a dark
   plate. .sub ties on specificity with the .page-hero rule above, so this block must stay
   after it in the file. */
body.warm-preview .acct-hero h1{ color:#f4efe4; }
body.warm-preview .acct-hero p.sub{ color:#f4efe4; opacity:.82; }

/* ---- filters / product cards ---- */
body.warm-preview .chip{ border-color:var(--wline); color:var(--wink); }
body.warm-preview .chip:hover{ border-color:var(--wforest); color:var(--wforest); }
body.warm-preview #filterCount{ color:var(--wstone); }
body.warm-preview .assurance{ border-top-color:var(--wline); }
body.warm-preview .assurance .a h4{ color:var(--wink); }
body.warm-preview .assurance .a p{ color:var(--wstone); }
body.warm-preview .assurance .a .ico{ color:var(--wolive); }
body.warm-preview .section{ border-top-color:var(--wline); }
body.warm-preview .lab::after{ display:none; }

/* ---- product detail pages ---- */
body.warm-preview .pdp-price{ color:var(--wforest); font-family:'Instrument Serif',serif; font-weight:400; }
body.warm-preview .pdp-specs{ color:var(--wstone); }
body.warm-preview .pdp-media{ background:#ffffff; border-color:var(--wline); }

/* ---- forms (contact, account, affiliate, newsletter) ---- */
body.warm-preview .form input,
body.warm-preview input[type="text"],
body.warm-preview input[type="email"],
body.warm-preview input[type="password"],
body.warm-preview input[type="tel"],
body.warm-preview textarea,
body.warm-preview select{
  background:#ffffff; border-color:var(--wline); color:var(--wink);
}
body.warm-preview .form input::placeholder,
body.warm-preview input::placeholder,
body.warm-preview textarea::placeholder{ color:var(--wstone); }
body.warm-preview .form input:focus,
body.warm-preview input:focus,
body.warm-preview textarea:focus,
body.warm-preview select:focus{ border-color:var(--wforest); }

/* ---- first-order offer popup: split photo/copy layout ---- */
body.warm-preview .veil{ background:rgba(34,29,22,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
body.warm-preview .modal{
  max-width:900px; width:92vw; background:var(--wcream); border-color:var(--wline);
  border-radius:14px; padding:0; overflow:hidden; display:flex; align-items:stretch; min-height:480px;
}
body.warm-preview .modal::before{
  content:''; width:44%; flex-shrink:0;
  background:url('/assets/brand/offer-popup.jpg') center/cover no-repeat;
}
body.warm-preview .modal .x{ color:var(--wstone); }
body.warm-preview .modal .x:hover{ color:var(--wink); }
body.warm-preview .offer-body,
body.warm-preview .modal .success{ flex:1; padding:48px 44px; }
body.warm-preview .offer-body{ display:flex; flex-direction:column; justify-content:center; }
body.warm-preview .modal .success:not([hidden]){ display:flex; flex-direction:column; justify-content:center; }
body.warm-preview .modal .offer-seal{ filter:invert(1); }
body.warm-preview .modal .badge{ color:var(--wolive); }
body.warm-preview .modal p{ color:var(--wink); opacity:.75; }
body.warm-preview .modal .terms{ color:var(--wstone); }
body.warm-preview .modal .terms a{ color:var(--wink); }
body.warm-preview .modal .code{ color:var(--wink); border-color:var(--wline); }
@media (max-width:720px){
  body.warm-preview .modal{ flex-direction:column; max-width:440px; min-height:0; }
  body.warm-preview .modal::before{ width:100%; height:200px; }
  body.warm-preview .offer-body, body.warm-preview .modal .success{ padding:32px 28px; }
}

body.warm-preview .note{ border-color:var(--wline); border-left-color:var(--wolive); color:var(--wink); opacity:.85; background:rgba(255,255,255,.35); }

/* ---- footer ---- */
body.warm-preview footer.site{ background:var(--wcream-deep); border-top-color:var(--wline); color:var(--wink); }
body.warm-preview footer.site .brand .name b{ color:var(--wink); }
body.warm-preview footer.site .brand .name span{ color:var(--wstone); }
body.warm-preview .foot-brand p{ color:var(--wstone); }
body.warm-preview .foot-addr, body.warm-preview .foot-addr a{ color:var(--wstone); }
body.warm-preview .foot-addr a:hover{ color:var(--wink); }
body.warm-preview .foot-social a{ color:var(--wstone); }
body.warm-preview .foot-social a:hover{ color:var(--wink); }
body.warm-preview .foot-col h4{ color:var(--wstone); }
body.warm-preview .foot-col a{ color:var(--wink); opacity:.75; }
body.warm-preview .foot-col a:hover{ opacity:1; color:var(--wforest); }
body.warm-preview .disclaimer, body.warm-preview .copyright{ color:var(--wstone); border-top-color:var(--wline); }

/* ---- research gate ----
   The gate was the last surface still carrying the pre-rebrand identity, and it is the first
   thing anyone sees. Restyled here rather than in styles.css so the original gate still stands
   on its own if the warm theme is ever pulled. */
/* The base tone shows if the photo is slow or missing, so it carries the warm cast on its
   own rather than degrading to a dark scrim. */
body.warm-preview .sf-gate{ background:#efe7d8; }
/* hero-home.jpg rather than a dedicated asset: the homepage is already fetching it at high
   priority for the hero, so the gate's backdrop costs no extra request there. */
body.warm-preview .sf-gate::before{
  background:url('/assets/brand/hero-home.jpg') center/cover no-repeat;
  filter:blur(26px) saturate(108%) brightness(1.06) contrast(.94);
}
/* Barely a vignette. Enough to seat the card and keep the corners from competing, not enough
   to darken a scene whose whole job is to feel open. */
body.warm-preview .sf-gate::after{
  background:
    radial-gradient(78% 60% at 50% 46%, rgba(255,251,244,.42), rgba(255,251,244,0) 72%),
    radial-gradient(128% 104% at 50% 44%, rgba(120,104,74,0), rgba(120,104,74,.20) 94%);
}
/* On a light backdrop the old white rim and the heavy black drop shadow both stopped working:
   the rim vanished into the cream and the shadow read as a bruise. A warm hairline plus a
   soft, low-opacity shadow separates the card without darkening anything around it. The
   frost's brightness lift is dropped too -- it existed to keep white glass from going grey
   over a near-black photo, and over cream it just blows the surface out. */
body.warm-preview .gate-card{
  background:linear-gradient(157deg, rgba(253,251,246,.97) 0%, rgba(247,242,232,.95) 100%);
  border:1px solid rgba(34,29,22,.10); border-radius:8px;
  backdrop-filter:blur(30px) saturate(140%);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
  box-shadow:0 30px 70px rgba(74,62,40,.18), 0 2px 10px rgba(74,62,40,.08);
}
/* Floating on phones too. styles.css takes the card full-bleed at this width -- square, 100dvh,
   no border or shadow -- which suited four clauses that needed the whole screen. One question
   does not, and edge-to-edge lost the backdrop that tells you the site is behind it. */
@media (max-width:520px){
  body.warm-preview .sf-gate{ padding:18px; align-items:center; }
  body.warm-preview .gate-card{
    border-radius:10px; border:1px solid rgba(250,246,238,.5);
    width:100%; max-width:none;
    /* height:auto so the card takes only what it needs; max-height keeps a long viewport from
       pushing the buttons off, and dvh tracks the collapsing browser chrome. */
    height:auto; max-height:calc(100dvh - 36px);
    background:linear-gradient(157deg, rgba(250,246,238,.985) 0%, rgba(243,238,226,.97) 100%);
    box-shadow:0 26px 70px rgba(0,0,0,.46);
  }
}
body.warm-preview .gate-terms > div{ border-top-color:var(--wline); }
body.warm-preview .gate-terms dt{ color:#55613c; }
/* The age clause is the only thing left in the gate, so it is set at reading size rather than
   the 13.5px it used when it was one of four stacked clauses. */
body.warm-preview .gate-terms dd{
  font-family:'Archivo',Arial,sans-serif; color:var(--wink); font-size:16px; line-height:1.6;
}
body.warm-preview .gate-lead{
  font-family:'Instrument Serif',serif; font-weight:400; font-size:27px;
  line-height:1.2; letter-spacing:-.01em; color:var(--wforest);
}
body.warm-preview .gate-soon-sub,
body.warm-preview .gate-fine{ font-family:'Archivo',Arial,sans-serif; color:var(--wstone); }
body.warm-preview .gate-kicker{ color:#55613c; background:rgba(107,122,78,.12); }
body.warm-preview .gate-actions{ border-top-color:var(--wline); }
/* The shared CTA rule lists specific containers and the gate is appended to <body>, outside
   all of them, so the gate's buttons need the forest fill stated here. */
body.warm-preview .gate-actions .pill{
  background:var(--wforest); color:var(--wcream); border:1px solid var(--wforest);
  font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.09em;
  font-weight:700; font-size:12.5px; border-radius:3px;
}
body.warm-preview .gate-actions .pill-ghost{
  background:transparent; color:var(--wforest); border:1px solid rgba(51,63,39,.34);
}
body.warm-preview .gate-actions .pill-ghost:hover{ border-color:var(--wforest); }
/* One clause instead of four, so the card no longer needs the width four stacked paragraphs
   wanted. Narrowed and centred under the seal, which reads as a single question rather than a
   document with most of it deleted. */
/* Back to 560: the banner carries its own headline, and at 440 that type scaled down far
   enough to stop reading. */
body.warm-preview .gate-card{ max-width:560px; }
/* Full-bleed across the top of the card. The panel's own padding is cancelled with negative
   margins rather than removed, so the copy underneath keeps its inset. */
body.warm-preview .gate-banner{
  display:block; width:calc(100% + 76px); margin:-36px -38px 26px; height:auto;
  border-radius:8px 8px 0 0;
}
@media (max-width:520px){
  body.warm-preview .gate-banner{ width:calc(100% + 44px); margin:-30px -22px 22px; border-radius:10px 10px 0 0; }
}
body.warm-preview .gate-terms{ text-align:center; margin-bottom:6px; }
body.warm-preview .gate-terms dd{ max-width:34ch; margin:0 auto; }
@media (max-width:520px){
  /* The card is full-height on phones, and one clause no longer fills it — the age line sat at
     the top with a screen of empty cream under it. Centring the panel closes that gap.
     `safe` matters: if a panel ever does outrun the viewport, plain centring would push its top
     out of reach above the scroll origin. Browsers without `safe` drop the declaration and fall
     back to top-aligned, which is where this started. */
  body.warm-preview .gate-scroll:not([hidden]){
    display:flex; flex-direction:column; justify-content:safe center;
  }
}