/* ============================================================
   STORY PAGE STYLES (on-brand AFTERSMOKE advertorial/landing page)
   Split out from css/styles.css so the shared, sitewide stylesheet
   doesn't carry rules for this one long-form landing page. story.html
   links both this file and css/styles.css — tokens, .photo-slot, .btn,
   and the scroll-reveal system all still come from styles.css; this
   file is only the .advert-* component rules specific to this page.
   Forked from advertorial/advertorial.css (the Exhale Daily disguised
   version): same component system, but this page speaks as AFTERSMOKE
   itself, so the outlet's separate teal accent is gone — var(--color-accent)
   (ember) carries every accent role a second voice used to own.
   ============================================================ */

  /* ---------- Story (long-form landing page) ----------
     Own light palette against the storefront's near-black shell — same
     token set throughout, just drawn from the light/near-black side of the
     scale instead of the dark side, so the page reads as a standalone
     long-form piece rather than another storefront screen.

     Single voice throughout now (unlike the Exhale Daily fork's two-voice
     split): --font-editorial is still the reading face for headline,
     subhead, article body and pull quote; --font-display is still
     reserved for the sponsored tag, byline meta, CTA, trust checklist —
     it's just all AFTERSMOKE's own voice now, ember instead of teal. */
  .advert-topbar{
    background:var(--color-charcoal-500);
    color:var(--text-on-dark-60);
    text-align:center;
    font-family:var(--font-display);
    font-size:0.68rem;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    padding:var(--space-2_5) var(--space-4);
  }
  .advertorial{
    background:var(--color-bg-surface);
    color:var(--text-on-light-75);
    font-family:var(--font-body);
  }
  /* Compact article-page header: name left, disclosure right, one
     full-bleed hairline under it. The first version was a centered
     newspaper masthead (big nameplate, rule, a "Health & Wellness"
     category tag) — a homepage pattern on a page with no homepage and no
     sections, implying a site that doesn't exist. This only claims what's
     actually here. (<div>, not <header>: styles.css has global rules for
     the storefront's <header> that would bleed in.) */
  .advert-masthead{
    border-bottom:1px solid var(--border-on-light-10);
  }
  .advert-masthead-inner{
    max-width:640px;
    margin:0 auto;
    padding:var(--space-4) var(--space-container);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space-1) var(--space-4);
  }
  /* The real logo (assets/exhale-logo.png, transparent PNG). Sized by
     height so it stays crisp and the header height doesn't depend on the
     file's pixel dimensions; the 640px source covers up to ~4x density. */
  /* Sized by width, not height: the black wordmark is ~12:1, so a fixed
     height either overflows a phone or reads tiny. A plain length, not
     min(…, 100%): a percentage inside the shrink-wrapping <a> sized the
     link from the file's 1910px width and pushed "Sponsored Content" onto
     its own line. 7.5rem leaves room for that link beside it at 320px. */
  .advert-masthead-logo{
    display:block;
    width:7.5rem;
    height:auto;
  }
  /* Ink, underlined — not tiny ember caps. Ember on this ground is ~3:1,
     too faint for the one link that has to be easy to read. */
  .advert-masthead-link{
    font-family:var(--font-display);
    font-size:0.68rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    white-space:nowrap;
    color:var(--text-on-light-65);
    text-decoration:underline;
    text-underline-offset:0.3em;
    text-decoration-color:var(--border-on-light-20);
    transition:color var(--dur-micro) ease, text-decoration-color var(--dur-micro) ease;
  }
  .advert-masthead-link:hover{color:var(--color-accent); text-decoration-color:var(--color-accent);}
  .advert-container{
    max-width:640px;
    margin:0 auto;
    padding-inline:var(--space-container);
  }
  .advert-hero{margin-top:var(--space-6);}
  .advert-hero .photo-slot{--slot-ratio:3/4; border-radius:var(--radius-xl);}
  .advert-caption{
    margin-top:var(--space-2);
    font-family:var(--font-body);
    font-size:0.78rem;
    line-height:1.5;
    color:var(--text-on-light-50);
  }
  .advert-title{
    margin-top:var(--space-8);
    font-family:var(--font-editorial);
    font-weight:600;
    font-size:clamp(1.75rem, 6.6vw, 2.75rem);
    line-height:1.16;
    letter-spacing:-0.01em;
    color:var(--color-text-inverse);
    text-wrap:balance;
  }
  .advert-subhead{
    margin-top:var(--space-4);
    font-family:var(--font-editorial);
    font-weight:400;
    font-size:1.15rem;
    font-style:italic;
    line-height:1.55;
    color:var(--text-on-light-65);
  }
  /* One rating component, used twice (under the headline and above the
     reviews). SVG stars rather than the "★" character: none of the page's
     webfonts carry that glyph, so it fell back to a system font whose
     metrics sat it visibly off the text beside it. One row, centred on
     the cross axis; the text is short enough to fit beside the stars at
     the 320px floor (~240px of 280px), flex-wrap only as a fallback. */
  .advert-rating{
    margin-top:var(--space-4);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-2);
    font-family:var(--font-display);
    font-size:0.8rem;
    line-height:1;
    color:var(--text-on-light-65);
  }
  /* 2px between stars: sub-scale on purpose, the 4px floor reads as gaps. */
  .advert-stars{display:inline-flex; gap:2px; color:var(--color-star);}
  .advert-stars svg{display:block; width:15px; height:15px; fill:currentColor;}
  .advert-rating-text strong{color:var(--color-text-inverse); font-weight:700;}
  .advert-byline{
    margin-top:var(--space-5);
    padding-top:var(--space-5);
    border-top:1px solid var(--border-on-light-10);
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:var(--space-1_5);
    font-family:var(--font-display);
    font-size:0.66rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--text-on-light-50);
  }
  .advert-byline-label{font-weight:400;}
  .advert-byline strong{color:var(--color-text-inverse); font-weight:700;}
  .advert-body{padding-top:var(--space-10);}
  .advert-body h2{
    font-family:var(--font-editorial);
    font-weight:600;
    font-size:1.5rem;
    letter-spacing:-0.005em;
    color:var(--color-text-inverse);
    margin-top:var(--space-16);
    margin-bottom:var(--space-4);
  }
  /* When an article opens straight on a heading (lung-detox.html), its
     top margin would stack on .advert-body's own padding-top and leave a
     ~6.5rem hole under the byline. The padding already spaces it. */
  .advert-body > section:first-child > h2:first-child{margin-top:0;}
  .advert-body p{
    font-family:var(--font-editorial);
    font-size:1.08rem;
    line-height:1.75;
    color:var(--text-on-light-75);
  }
  .advert-body p + p{margin-top:var(--space-5);}
  /* One drop cap, on the article's opening paragraph only — a single
     considered touch, not a treatment repeated on every section. In the
     outlet's teal: the article body is the outlet's voice, not the
     advertiser's. */
  .advert-body section:first-of-type p:first-of-type::first-letter{
    font-family:var(--font-editorial);
    font-weight:600;
    font-size:3.2em;
    line-height:0.72;
    float:left;
    padding-right:var(--space-2);
    padding-top:0.06em;
    color:var(--color-accent);
  }
  /* The drop cap is an editorial flourish; on policy/contact pages it just
     looks odd, so these opt out. Must sit after the rule it cancels. */
  .advert-body--plain section:first-of-type p:first-of-type::first-letter{
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
    float:none;
    padding:0;
    color:inherit;
  }
  .advert-image{margin:var(--space-8) 0;}
  .advert-image .photo-slot{--slot-ratio:3/4; border-radius:var(--radius-xl);}
  .advert-pull{
    margin:var(--space-10) 0;
    padding:var(--space-5) 0;
    border-top:1px solid var(--border-on-light-20);
    border-bottom:1px solid var(--border-on-light-20);
    font-family:var(--font-editorial);
    font-weight:500;
    font-style:italic;
    font-size:1.4rem;
    line-height:1.45;
    text-align:center;
    color:var(--color-text-inverse);
    text-wrap:balance;
  }
  .advert-softcta{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin-top:var(--space-3);
    font-family:var(--font-display);
    font-weight:600;
    font-size:0.85rem;
    letter-spacing:0.03em;
    color:var(--color-accent);
    transition:color var(--dur-micro) ease;
  }
  .advert-softcta:hover{color:var(--color-accent-hover);}
  /* FAQ — native <details>, so it works with no JS, keyboard-toggles for
     free, and is readable when printed. Editorial serif for questions,
     hairlines instead of boxes, teal +/- as the only ornament. */
  .advert-faq{margin-top:var(--space-16);}
  .advert-faq h2{
    font-family:var(--font-editorial);
    font-weight:600;
    font-size:1.5rem;
    letter-spacing:-0.005em;
    color:var(--color-text-inverse);
    margin-bottom:var(--space-5);
  }
  .advert-faq details{border-top:1px solid var(--border-on-light-10);}
  .advert-faq details:last-of-type{border-bottom:1px solid var(--border-on-light-10);}
  .advert-faq summary{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--space-4);
    padding:var(--space-4) 0;
    cursor:pointer;
    list-style:none;
    font-family:var(--font-editorial);
    font-weight:600;
    font-size:1.05rem;
    line-height:1.4;
    color:var(--color-text-inverse);
  }
  .advert-faq summary::-webkit-details-marker{display:none;}
  .advert-faq summary::after{
    content:"+";
    flex:none;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.25rem;
    line-height:1;
    color:var(--color-accent);
  }
  .advert-faq details[open] summary::after{content:"\2212";}
  .advert-faq summary:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:2px;
    border-radius:var(--radius-sm);
  }
  .advert-faq-body{padding:0 0 var(--space-5);}
  .advert-faq-body p{
    font-family:var(--font-editorial);
    font-size:1rem;
    line-height:1.7;
    color:var(--text-on-light-75);
  }
  .advert-faq-body p + p{margin-top:var(--space-3);}
  /* Links inside running text: ink + teal underline. Ember (the
     advertiser's color) is ~3:1 on this ground, too faint for body-size
     text, and .advertorial links otherwise inherit with no underline. */
  .advert-faq-body a,
  .advert-body a:not(.advert-softcta):not(.btn){
    color:var(--color-text-inverse);
    text-decoration:underline;
    text-decoration-color:var(--color-accent);
    text-underline-offset:0.2em;
  }
  /* Lists in the policy/contact pages. */
  .advert-body ul{
    margin:var(--space-3) 0 0;
    padding-left:var(--space-5);
    font-family:var(--font-editorial);
    font-size:1.08rem;
    line-height:1.75;
    color:var(--text-on-light-75);
  }
  .advert-body li + li{margin-top:var(--space-2);}
  /* Verification checklist, not DTC pill badges — a plain mark-plus-label
     row reads closer to a real credentials strip than a row of colored
     chips would. */
  /* A grid, not flex-wrap: the four labels don't divide evenly, so an
     uncontrolled wrap produces a lopsided 3-then-1 line (and "3rd-Party
     Tested" was the one running past the edge). Two even columns on
     mobile, one row of four from 561px where they all fit. */
  /* Full-width tiles, icon over label: 2-up on mobile, 4-up from 561px.
     1fr tracks divide the container exactly, so a long label like
     "No Artificial Colors" wraps inside its own tile instead of pushing
     the row past the viewport. Same 4% ink tint as .advert-next below. */
  .advert-trust{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-3);
    margin:var(--space-10) 0 var(--space-8);
    padding-bottom:var(--space-8);
    border-bottom:1px solid var(--border-on-light-10);
  }
  @media(min-width:561px){
    .advert-trust{grid-template-columns:repeat(4, 1fr);}
  }
  .advert-trust span{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-3);
    padding:var(--space-5) var(--space-3);
    background:color-mix(in srgb, var(--color-text-inverse) 4%, transparent);
    border-radius:var(--radius-xl);
    text-align:center;
    font-family:var(--font-display);
    font-size:0.75rem;
    font-weight:600;
    line-height:1.35;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--text-on-light-75);
  }
  .advert-trust svg{width:28px; height:28px; stroke:var(--color-accent); flex-shrink:0;}
  .advert-cta{text-align:center; padding-bottom:var(--space-6);}
  .advert-cta .btn{width:100%; justify-content:center;}
  /* A button inside the article body (e.g. under "There's no risk in trying it"). Full width on a
     phone like the main CTA, natural width from 561px. */
  .advert-inline-cta{margin-top:var(--space-6); text-align:center;}
  .advert-inline-cta .btn{width:100%; justify-content:center;}
  .advert-disclaimer{
    margin-top:var(--space-5);
    font-family:var(--font-body);
    font-size:0.72rem;
    line-height:1.6;
    color:var(--text-on-light-50);
    text-align:center;
  }
  .advert-footer{
    margin-top:var(--space-16);
    padding:var(--space-8) var(--space-container) var(--space-12);
    border-top:1px solid var(--border-on-light-10);
    text-align:center;
    font-family:var(--font-body);
    font-size:0.72rem;
    line-height:1.7;
    color:var(--text-on-light-50);
  }
  /* Footer lockup (icon + wordmark + tagline). The tagline is small by
     design at this width — it's part of the mark, not copy to be read. */
  .advert-footer-logo{
    display:block;
    width:min(14rem, 100%);
    height:auto;
    margin:0 auto var(--space-6);
  }
  .advert-footer a{color:var(--text-on-light-65); transition:color var(--dur-micro) ease;}
  .advert-footer a:hover{color:var(--color-accent);}
  .advert-footer p + p{margin-top:var(--space-2);}
  /* "Explore" — this fork has no sibling article to cross-link, so this
     card points back to the full product line instead of orphaning the
     reader at the end of the piece. */
  /* A tinted card, not just a hairline + floating text — the page reads
     flat otherwise, and this is the one spot that should say "there's
     more here" rather than "the article is over." */
  .advert-next{
    margin-top:var(--space-8);
    padding:var(--space-6) var(--space-6);
    background:color-mix(in srgb, var(--color-text-inverse) 4%, transparent);
    border-radius:var(--radius-lg);
    text-align:center;
  }
  /* Ink, not ember: small-caps labels sit under AA's 4.5:1 text threshold
     at this size, and ember on this paper is ~3:1 (see the drop cap/FAQ
     glyph comments below for where ember is safe to use instead). */
  .advert-next-label{
    display:block;
    font-family:var(--font-display);
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--text-on-light-65);
    margin-bottom:var(--space-2);
  }
  .advert-next-link{
    font-family:var(--font-editorial);
    font-weight:600;
    font-style:italic;
    font-size:1.1rem;
    color:var(--color-text-inverse);
    transition:color var(--dur-micro) ease;
  }
  .advert-next-link:hover{color:var(--color-accent);}

  /* ---------- Reviews (real entries, lifted from js/reviews-data.js —
     per the strategy doc's own rule, nothing here is invented) ---------- */
  .advert-reviews{margin-top:var(--space-16);}
  .advert-reviews h2{
    font-family:var(--font-editorial);
    font-weight:600;
    font-size:1.5rem;
    letter-spacing:-0.005em;
    color:var(--color-text-inverse);
    margin-bottom:var(--space-1);
  }
  .advert-reviews-summary{margin-top:var(--space-3); margin-bottom:var(--space-6);}
  .advert-review-grid{
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
  }
  .advert-review-card{
    display:flex;
    gap:var(--space-4);
    padding:var(--space-5);
    border:1px solid var(--border-on-light-10);
    border-radius:var(--radius-xl);
  }
  .advert-review-photo{
    flex:0 0 auto;
    width:72px;
    height:72px;
    border-radius:var(--radius-lg);
    overflow:hidden;
  }
  .advert-review-photo img{display:block; width:100%; height:100%; object-fit:cover;}
  .advert-review-body{min-width:0;}
  .advert-review-stars{color:var(--color-star); font-size:0.78rem; letter-spacing:0.08em; line-height:1;}
  .advert-review-title{
    font-family:var(--font-editorial);
    font-weight:600;
    font-size:1rem;
    color:var(--color-text-inverse);
    margin-top:var(--space-2);
  }
  .advert-review-text{
    font-family:var(--font-editorial);
    font-size:0.92rem;
    line-height:1.6;
    color:var(--text-on-light-75);
    margin-top:var(--space-1);
  }
  /* Reviewer line, the same arrangement as the home page cards: name with Verified Buyer beside it,
     then the flag, United States and the date under them, every card on one left edge. In a row,
     Verified Buyer started wherever the name ended and drifted from card to card. The cards stay
     narrow at every width (one column, then 2-up), so this holds on desktop too. */
  .advert-review-foot{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-1);
    margin-top:var(--space-2);
    font-family:var(--font-display);
    font-size:0.7rem;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--text-on-light-50);
  }
  .advert-review-line{display:flex; align-items:center; flex-wrap:wrap; gap:0 var(--space-2);}
  .advert-review-foot strong{color:var(--text-on-light-65); font-weight:600;}
  .advert-review-verified{display:inline-flex; align-items:center; gap:var(--space-1); color:var(--color-accent);}
  /* Solid badge: the badge shape filled, the check drawn in the site white (--color-text) on top (same Lucide icon,
     filled by CSS, so the markup is unchanged). */
  .advert-review-verified svg{width:14px; height:14px; flex:none;}
  .advert-review-verified svg path:first-child{fill:currentColor; stroke:none;}
  .advert-review-verified svg path:last-child{stroke:var(--color-text); stroke-width:2.5;}
  .advert-review-loc{display:inline-flex; align-items:center; gap:var(--space-1_5); text-transform:none; letter-spacing:0; font-family:var(--font-body); font-size:0.72rem;}
  .advert-review-loc svg{width:15px; height:8px; flex:none; border-radius:1px;}
  .advert-review-date::before{content:'·'; margin-inline-end:var(--space-2);}
  @media(min-width:561px){
    .advert-cta .btn{width:auto;}
    .advert-inline-cta .btn{width:auto;}
    .advert-review-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);}
  }