/* public/article.css
   Author: DrBee.cloud | Date: 2026-08-12
   SINGLE STYLING SOURCE for the Insights ARTICLE reading surface.

   Articles are deliberately designed differently from the marketing pages
   (operator, 2026-08-12): word-heavy, so they get a reading-first layout — a
   41rem measure, a dropcap opener, chapter ghost numerals, pull-quote bands,
   a reading-progress bar and a sticky chapter chip. Same concept palette and
   type as the rest of the site (navy / gold / paper, Fraunces + Literata +
   Space Grotesk), applied to a different job.

   Loaded by the 3 Insights articles and by scripts/article-template.html, in
   this order:  /chrome.css  ->  /article.css.  chrome.css supplies the shared
   header/footer, the :root palette and the Fraunces / Space Grotesk / JetBrains
   Mono faces. This file supplies Literata (the body face) and everything below
   the chrome.

   It replaces the ~117-line <style> block that used to be COPIED into every
   article (and into the template) — 4 copies that would have drifted apart.
   Edit here once instead.

   It also replaces src/styles.css on these pages. That stylesheet was the old
   Golden Glow system, and its `main section h2 { ... !important }` rule was
   silently shrinking every chapter heading from clamp(2rem,4.6vw,3.3rem) to
   clamp(1.5rem,3vw,2rem) — the article design never rendered as authored.

   Animation is preserved exactly: cover zoom, staggered rise-up of the cover
   text, .rv -> .rv.in scroll reveals, progress bar and chapter chip, all with
   the prefers-reduced-motion escape intact. enhance.js drives them. */

/* Literata — the article body face. Declared here because these pages no
   longer load src/styles.css (which @imported fonts.css). Weight range 400-600
   matches the fonts.css declaration these pages used before, so text renders
   identically rather than gaining true 700s. */


/* public/article.css
   Author: DrBee.cloud | Date: 2026-08-12
   SINGLE STYLING SOURCE for the Insights ARTICLE reading surface.

   Articles are deliberately designed differently from the marketing pages
   (operator, 2026-08-12): word-heavy, so they get a reading-first layout — a
   41rem measure, a dropcap opener, chapter ghost numerals, pull-quote bands,
   a reading-progress bar and a sticky chapter chip. Same concept palette and
   type as the rest of the site (navy / gold / paper, Fraunces + Literata +
   Space Grotesk), applied to a different job.

   Loaded by the 3 Insights articles and by scripts/article-template.html, in
   this order:  /chrome.css  ->  /article.css.  chrome.css supplies the shared
   header/footer, the :root palette and the Fraunces / Space Grotesk / JetBrains
   Mono faces. This file supplies Literata (the body face) and everything below
   the chrome.

   It replaces the ~117-line <style> block that used to be COPIED into every
   article (and into the template) — 4 copies that would have drifted apart.
   Edit here once instead.

   It also replaces src/styles.css on these pages. That stylesheet was the old
   Golden Glow system, and its `main section h2 { ... !important }
` rule was
   silently shrinking every chapter heading from clamp(2rem,4.6vw,3.3rem) to
   clamp(1.5rem,3vw,2rem) — the article design never rendered as authored.

   Animation is preserved exactly: cover zoom, staggered rise-up of the cover
   text, .rv -> .rv.in scroll reveals, progress bar and chapter chip, all with
   the prefers-reduced-motion escape intact. enhance.js drives them. */

/* Literata — the article body face. Declared here because these pages no
   longer load src/styles.css (which @imported fonts.css). Weight range 400-600
   matches the fonts.css declaration these pages used before, so text renders
   identically rather than gaining true 700s. */
@font-face{font-family:'Literata';src:url('/fonts/literata-latin-var.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;}
:root{
      --navy:#081120; --navy-2:#0c1a30;
      --gold:#d4a24e; --gold-soft:#e8c98a; --paper:#faf4e9; --paper-2:#f3e9d7;
      --a-ink:#2a2119; --a-ink-muted:#5c5244; --a-ink-soft:#8a7d68; --a-line:#e2d5bc;
      --f-display:"Fraunces",Georgia,serif;
      --f-body:"Literata",Georgia,serif;
      --f-label:"Space Grotesk",ui-monospace,monospace;
    }
body{background:var(--navy)}
.article-75{font-family:var(--f-body);color:var(--a-ink);line-height:1.68}
.article-75 img{max-width:100%;display:block}
.article-75 ::selection{background:var(--gold);color:var(--navy)}
#progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));width:0;z-index:99}
/* Sits BELOW the fixed site header, not inside it. At top:1rem the chip landed in the header band and covered the DrBee wordmark on desktop and the wordmark + burger on mobile (measured 2026-08-12). Header is 61px desktop / 79px mobile, so the offsets clear both. Long chapter titles truncate rather than wrap to a second line. */
#chapter{position:fixed;top:4.6rem;left:1.2rem;z-index:48;font-family:var(--f-label);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .4s;pointer-events:none;background:rgba(8,17,32,.72);padding:.4rem .7rem;border-radius:99px;backdrop-filter:blur(6px);max-width:min(34rem,calc(100vw - 2.4rem));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:1024px){#chapter{top:5.6rem;max-width:calc(100vw - 2.4rem);}}
#chapter.on{opacity:1}
.cover{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,32,.45) 0%,rgba(8,17,32,.25) 35%,rgba(8,17,32,.65) 72%,rgba(8,17,32,.95) 100%)}
.cover-text{position:relative;z-index:2;padding:0 clamp(1.5rem,6vw,7rem) clamp(3rem,7vh,5rem);max-width:1200px}
.kicker{font-family:var(--f-label);font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold-soft)}
.cover h1{color:#f6ecd9;font-weight:500;line-height:.9;margin-top:1rem}
.cover h1 .small{display:block;font-family:var(--f-display);font-style:italic;font-size:clamp(1.8rem,4vw,3.4rem);color:#e8dcc2;font-weight:400}
.cover h1 .big{display:block;font-family:var(--f-display);font-size:clamp(5.5rem,17vw,15rem);letter-spacing:-.01em;background:linear-gradient(175deg,#f2d9a4 20%,var(--gold) 60%,#9a7127);-webkit-background-clip:text;background-clip:text;color:transparent}
.cover .stand{max-width:44rem;margin-top:1.4rem;font-size:clamp(1rem,1.4vw,1.2rem);color:#e6dbc4}
.cover .meta{margin-top:1.6rem;font-family:var(--f-label);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#b8a888;border-top:1px solid rgba(212,162,78,.35);padding-top:.9rem;display:inline-block}
.cover .meta a{color:var(--gold-soft);text-decoration:none}
.cover h1 .big,.lesson h2,.stat b,.lesson .ghost{font-optical-sizing:auto;font-variation-settings:"opsz" 144}
.pull p,.finale .q p.question,.cover h1 .small{font-optical-sizing:auto;font-variation-settings:"opsz" 60}
@keyframes coverzoom{from{transform:scale(1.07)}to{transform:scale(1)}}
.cover>img{animation:coverzoom 9s ease-out forwards}
@keyframes riseup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.cover-text>*{animation:riseup .9s ease-out backwards}
.cover-text>*:nth-child(2){animation-delay:.15s}
.cover-text>*:nth-child(3){animation-delay:.35s}
.cover-text>*:nth-child(4){animation-delay:.5s}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.cover>img,.cover-text>*{animation:none}}
.paper{background:var(--paper)}
.measure{max-width:41rem;margin:0 auto;padding:0 1.5rem;position:relative}
.lead-act{padding:clamp(3.5rem,8vh,6rem) 0 3rem}
.article-75 .dropcap::first-letter{float:left;font-family:var(--f-display);font-size:3.5em;line-height:.82;padding:.05em .12em 0 0;color:var(--gold)}
.article-75 p+p{margin-top:1.15rem}
.body-text{font-size:1.06rem;color:var(--a-ink-muted)}
.body-text strong{color:var(--a-ink)}
.opener{font-size:1.3rem;color:var(--a-ink)}
.article-75 sup{font-family:var(--f-label);font-size:.6em}
.article-75 sup a{color:var(--a-ink-soft);text-decoration:none}
.dkband{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#e8dcc2;padding:clamp(3rem,8vh,5.5rem) 0;position:relative}
.dkband::before,.dkband::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,162,78,.5),transparent)}
.dkband::before{top:0}
.dkband::after{bottom:0}
.pull{max-width:56rem;margin:0 auto;padding:0 2rem;text-align:center}
.pull p{font-family:var(--f-display);font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.22;font-style:italic;font-weight:500;color:#f0e2c4}
.pull p em{color:var(--gold-soft)}
.pull .rule{width:5rem;height:2px;background:var(--gold);margin:0 auto 1.6rem}
.dkband .kick{margin-top:1.6rem;font-family:var(--f-label);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:66rem;margin:0 auto;padding:0 2rem;text-align:center}
.stat b{display:block;white-space:nowrap;font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1;background:linear-gradient(180deg,#f2d9a4,#c8963f);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:.8rem;font-family:var(--f-label);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:#a99a7d;line-height:1.7}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats{grid-template-columns:1fr}}
.lesson{position:relative;padding:clamp(4rem,9vh,6.5rem) 0 2.5rem;overflow:hidden}
.lesson .ghost{position:absolute;top:-.1em;right:-.04em;font-family:var(--f-display);font-size:clamp(9rem,24vw,20rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--a-line);z-index:0;user-select:none}
.lesson .label{font-family:var(--f-label);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.article-75 .lesson h2{font-family:var(--f-display);font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.06;font-weight:400;color:var(--a-ink);margin-top:.8rem;max-width:26ch;position:relative;z-index:1}
.article-75 .lesson h3{font-size:1.25rem;color:var(--a-ink);margin:2.4rem 0 .4rem;font-weight:600}
.chain{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1rem;max-width:60rem;margin:0 auto;padding:0 2rem;align-items:center}
.chain .node{font-family:var(--f-label);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#f0e2c4;border:1px solid rgba(212,162,78,.55);border-radius:99px;padding:.65rem 1.1rem;background:rgba(212,162,78,.08)}
.chain .arrow{color:var(--gold);font-size:1.1rem}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:62rem;margin:2rem auto 0;padding:0 1.5rem}
.ctl-card{background:var(--paper-2);border:1px solid var(--gold);border-radius:1rem;padding:1.4rem 1.5rem}
.ctl-card .tier{font-family:var(--f-label);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#a8792f;border-bottom:1px solid var(--a-line);padding-bottom:.7rem}
.ctl-card .eg{margin-top:.8rem;color:var(--a-ink);font-weight:600;font-size:.98rem}
.ctl-card .ctrl{margin-top:.5rem;color:var(--a-ink-muted);font-size:.93rem}
@media(max-width:820px){.controls{grid-template-columns:1fr}}
.systems{max-width:41rem;margin:1.6rem auto 0;padding:0 1.5rem}
.systems .sys{display:flex;gap:1.2rem;padding:1.2rem 0;border-top:1px solid var(--a-line)}
.systems .sys:last-child{border-bottom:1px solid var(--a-line)}
.systems .n{font-family:var(--f-label);color:var(--gold);font-size:.8rem;padding-top:.35rem}
.systems b{color:var(--a-ink)}
.systems p{color:var(--a-ink-muted);font-size:.98rem;margin-top:.15rem}
.finale{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
.finale>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.finale::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,32,.7) 0%,rgba(8,17,32,.15) 40%,rgba(8,17,32,.88) 100%)}
.finale .q{position:relative;z-index:2;max-width:52rem;margin:0 auto;padding:0 2rem clamp(3rem,8vh,5rem);text-align:center}
.finale .q p.question{font-family:var(--f-display);font-size:clamp(1.5rem,3.2vw,2.4rem);font-style:italic;font-weight:500;line-height:1.28;color:#f2e6ca}
.finale .q p.kick{margin-top:1.6rem;font-family:var(--f-label);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.closing{background:var(--paper);padding:3.5rem 0 4.5rem}
.closing .label{font-family:var(--f-label);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.closing .kickline{font-size:1.15rem;color:var(--a-ink);font-weight:600;max-width:41rem;margin:1.4rem auto 0;padding:0 1.5rem}
.src75{background:var(--paper);padding:0 0 4rem}
.src75 h4{font-family:var(--f-label);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--a-ink-soft);border-top:1px solid var(--a-line);padding-top:1rem}
.src75 ol{margin-top:.8rem;padding-left:1.2rem;font-family:var(--f-label);font-size:.72rem;line-height:2;color:var(--a-ink-soft);list-style:decimal}
.src75 a{color:var(--a-ink-soft);text-decoration:underline;text-underline-offset:2px}
.margin-note{display:none}
@media(min-width:1360px){
      .margin-note{display:block;position:absolute;right:-15rem;width:11.5rem;font-family:var(--f-label);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--a-ink-soft);line-height:1.8;border-left:2px solid var(--gold);padding-left:.9rem}
      .margin-note b{display:block;font-family:var(--f-display);font-size:2.1rem;font-weight:500;color:var(--gold);letter-spacing:0;text-transform:none;line-height:1.1;font-variation-settings:"opsz" 100}
    }
.article-75 .lead-act h2{font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;color:var(--a-ink);line-height:1.1;margin-bottom:1.4rem}
.article-75 .measure a:not(sup a){color:var(--a-ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.article-75 .measure ul,.article-75 .measure ol{margin:1rem 0 0;padding-left:1.5rem}
.article-75 .measure ul{list-style:disc}
.article-75 .measure ol{list-style:decimal}
.article-75 .measure li{margin-top:.5rem;color:var(--a-ink-muted);font-size:1.06rem;line-height:1.6}
.article-75 .measure li+li{margin-top:.5rem}
.article-75 .measure li strong{color:var(--a-ink)}
.article-75 .lesson h3+p{margin-top:.5rem}
.ipull{max-width:38rem;margin:0 auto;text-align:center;font-family:var(--f-display);font-style:italic;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.3;color:var(--a-ink);padding:1rem 0;position:relative}
.ipull::before{content:"";display:block;width:3rem;height:2px;background:var(--gold);margin:0 auto 1.2rem}
.ipull p{font-optical-sizing:auto;font-variation-settings:"opsz" 60}
.decision-guide{margin-top:1.5rem}
.decision-guide__caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.decision-guide__table{width:100%;border-collapse:collapse;font-size:1rem}
.decision-guide__table thead th{
      text-align:left;font-family:var(--font-mono);font-size:.75rem;
      letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-soft);
      border-bottom:1px solid oklch(0.4 0.015 80);padding:.75rem .625rem;vertical-align:bottom;
    }
.decision-guide__table tbody td{
      padding:.85rem .625rem;border-bottom:1px solid oklch(0.4 0.015 80);
      color:var(--color-ink-muted);vertical-align:top;
    }
.decision-guide__table tbody tr:last-child td{border-bottom:0}
.decision-guide__no{width:3.25rem}
.decision-guide__table tbody td:first-child{
      font-family:var(--font-mono);color:var(--color-ink-accent);font-weight:600;
    }
.decision-guide__table tbody td:nth-child(2){color:var(--color-ink);font-weight:500}
@media (max-width:767px){
      .decision-guide__table thead{
        position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
        clip:rect(0,0,0,0);white-space:nowrap;border:0;
      }
      .decision-guide__table,.decision-guide__table tbody,.decision-guide__table tr,.decision-guide__table td{display:block;width:100%}
      .decision-guide__table tr{
        border:1px solid oklch(0.4 0.015 80);border-radius:.75rem;padding:1rem 1.25rem;
        margin-bottom:.75rem;background:var(--color-surface);
      }
      .decision-guide__table td{padding:.35rem 0;border-bottom:0}
      .decision-guide__table td:first-child{
        font-size:.875rem;letter-spacing:.08em;margin-bottom:.5rem;
      }
      .decision-guide__table td:not(:first-child)::before{
        content:attr(data-label);display:block;
        font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;
        text-transform:uppercase;color:var(--color-ink-soft);margin-bottom:.15rem;
      }
      .decision-guide__table td:nth-child(2){color:var(--color-ink);font-weight:500}
      .decision-guide__table td:nth-child(3),.decision-guide__table td:nth-child(4){color:var(--color-ink-muted)}
    }