/* ============================================================
   ADVERTORIAL PAGE STYLES
   Split out from css/styles.css so the shared, sitewide stylesheet
   doesn't carry rules for a page that isn't part of the deployed
   storefront right now. advertorial.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 one page.
   ============================================================ */

  :root{
    /* The outlet's own accent — the median solid teal of the Exhale Daily
       logo icon. Deliberately unrelated to AfterSmoke's ember: ember now
       appears only where the advertiser is talking (buy button, product
       links, product-facts checkmarks). Teal on this paper is ~5.8:1, so
       it also clears AA for small text, which ember (~3:1) never did.
       Moves with this folder — it isn't in the storefront's styles.css. */
    --color-outlet-teal:#26696A;
  }

  /* ---------- Advertorial (long-form editorial 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 independent
     editorial content rather than another storefront screen.

     Two-voice type split, deliberately: --font-editorial (the outlet's
     reading face) carries the headline, subhead, article body and pull
     quote; --font-display (the brand's own face, used everywhere else on
     the site) is reserved for anything that's explicitly the advertiser —
     the sponsored tag, byline meta, CTA, trust checklist, disclosure link.
     A reader should be able to feel which voice is talking without reading
     the labels. */
  .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. */
  .advert-masthead-logo{
    display:block;
    height:1.85rem;
    width: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-outlet-teal); text-decoration-color:var(--color-outlet-teal);}
  .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);
  }
  /* Product rating under the headline. The stars use the storefront's own
     star token (--color-star) so they read as the same rating; the
     subject ("of AFTERSMOKE") is spelled out because this page is the
     outlet's, and an unattributed rating would imply Exhale Daily itself
     is rated. */
  .advert-rating{
    margin-top:var(--space-4);
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:var(--space-2);
    font-family:var(--font-display);
    font-size:0.78rem;
    color:var(--text-on-light-65);
  }
  .advert-stars{
    color:var(--color-star);
    font-size:1rem;
    letter-spacing:0.08em;
    line-height:1;
  }
  .advert-rating-text strong{color:var(--color-text-inverse); font-weight:700;}
  /* The review summary (copied from the store's advertorials) draws its stars as SVGs; size them
     the way the store's story.css does. The headline rating above still uses text stars. */
  .advert-stars:has(svg){display:inline-flex; gap:2px;}
  .advert-stars svg{display:block; width:15px; height:15px; fill:currentColor;}
  .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-outlet-teal);
  }
  /* 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-outlet-teal);
  }
  .advert-faq details[open] summary::after{content:"\2212";}
  .advert-faq summary:focus-visible{
    outline:2px solid var(--color-outlet-teal);
    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-outlet-teal);
    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. */
  /* 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;}
  .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-ps{
    margin-top:var(--space-10);
    padding-top:var(--space-6);
    border-top:1px dashed var(--border-on-light-20);
    font-family:var(--font-editorial);
    font-size:0.95rem;
    font-style:italic;
    line-height:1.7;
    color:var(--text-on-light-65);
  }
  .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(21rem, 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);}
  /* "Read Next" — cross-links the two Exhale Daily pieces to each other,
     so neither is an orphan and there's a reason to stay on-site. */
  /* 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;
  }
  .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(--color-outlet-teal);
    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-outlet-teal);}
  /* 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;}

  /* ---------- 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);}
  }