/* public/chrome.css
   Author: DrBee.cloud | Date: 2026-08-12
   SINGLE STYLING SOURCE for the site chrome (fixed navy header + footer +
   brand marks + mobile hamburger). Loaded by ALL 17 pages — the 13
   "Practice" theme pages (which also load practice.css) AND the 4 legacy
   theme pages (which load styles.css). practice.css depends on this file
   being loaded FIRST for its @font-face faces and custom-property tokens;
   it no longer declares them itself (extracted 2026-08-12).

   Scope is deliberately chrome-only. The global resets and body styling that
   still live in practice.css (margin/padding/box-sizing, body background/
   color/font, img, a, ::selection) are NOT duplicated here — loading them on
   the legacy theme pages would restyle their bodies, which is out of scope.
   Custom-property names do not collide with the legacy theme's --color-*.

   Editing the header or footer markup lives in src/components/nav-links.js
   (consumed by chromePlugin in vite.config.ts); editing the chrome's
   appearance lives here. One file each. */

/* ---------- fonts (self-hosted, no CDN) ---------- */
/* Only the faces the CHROME itself uses: Fraunces (--disp, the .mark), Space
   Grotesk (--ui, nav links), JetBrains Mono (--mono, .ft .letterhead).
   Literata (--text) is deliberately NOT here — see the note in practice.css.
   It is the body face, and src/fonts.css already declares it at 400 600 for
   the 4 legacy pages; a second 200 900 declaration on those pages would change
   how their article text renders above weight 600. */
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-italic-var.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-latin-var.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  --navy:#081120; --navy-2:#0c1830;
  --ink:#20242e; --ink-soft:#4a5060;
  --gold:#d4a24e; --gold-deep:#a8792f; --gold-pale:#e8c98f;
  --paper:#faf4e9; --paper-2:#f3ead9;
  --line:#e2d5bc; --line-gold:rgba(212,162,78,.35);
  --disp:'Fraunces',Georgia,serif;
  --text:'Literata',Georgia,serif;
  --ui:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --w:min(1100px,92vw);
  --wn:min(760px,92vw);
}

/* The chrome sizes itself. It must NOT depend on a page-level reset: the
   Practice pages get box-sizing from practice.css and the legacy pages used to
   get it from Tailwind's preflight, so once the articles dropped styles.css the
   same dropdown measured 213x56 there and 176x44 everywhere else (min-height
   excluded the padding under content-box). Scoped to the chrome only — it does
   not touch page content. */
.hd,.hd *,.ft,.ft *{box-sizing:border-box;}
/* Same reason, for spacing: the footer's <p> elements (.mark, .letterhead)
   pick up the browser's default 1em margins wherever no page reset zeroes
   them, which made the footer 298px tall on the articles and 249px on the
   Practice pages. The chrome owns its own box. */
.hd p,.hd ul,.hd li,.ft p,.ft ul,.ft li{margin:0;padding:0;}
.ft ul,.ft nav{list-style:none;}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);transition:background .35s ease,box-shadow .35s ease;}
.hd.solid{background:rgba(8,17,32,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(212,162,78,.35);}
.hd .mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--paper);}
.hd .mark b{font-family:var(--disp);font-weight:640;font-size:1.35rem;letter-spacing:.01em;}
.hd .mark .mg{align-self:center;}
.hd .mark small{font-family:var(--ui);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-pale);}
.hd nav{display:flex;gap:clamp(1rem,3vw,2.4rem);}
.hd nav a{font-family:var(--ui);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  color:rgba(250,244,233,.85);padding:.3rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.hd nav a:hover{color:var(--gold);}
.hd nav a.on{color:var(--gold);border-bottom-color:var(--gold);}

/* hamburger button — hidden above the 1024px breakpoint, shown below.
   44x44 minimum hit target; three 2px gold-pale bars, 18px wide, 4px apart. */
.hd .burger{display:none;position:relative;min-width:44px;min-height:44px;margin:0;padding:0;
  background:transparent;border:0;cursor:pointer;align-items:center;justify-content:center;}
.hd .burger span{position:absolute;left:50%;width:18px;height:2px;margin-left:-9px;background:var(--gold-pale);
  border-radius:1px;transition:transform .25s ease,opacity .25s ease,background .2s ease;}
.hd .burger span:nth-child(1){transform:translateY(-4px);}
.hd .burger span:nth-child(3){transform:translateY(4px);}
.hd .burger:hover span,.hd .burger:focus-visible span{background:var(--gold);}
.hd .burger:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* open state rotates the bars into an X (translateY is dropped, so the outer
   bars collapse to center before the rotation completes). */
.hd .burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg);}
.hd .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hd .burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg);}

/* ---------- mobile dropdown (<=1024px) ---------- */
/* A dropdown anchored under the burger, NOT a full-bleed panel across the top
   of the page (operator, 2026-08-12). Right-edge aligned with the burger so it
   reads as belonging to it; width is content-driven with a floor, so it never
   spans the viewport. */
@media(max-width:1024px){
  .hd .burger{display:flex;}
  /* closed = display:none so hidden links are not focusable; open = display:flex. */
  .hd nav{display:none;position:absolute;top:calc(100% - .4rem);left:auto;
    right:clamp(1.2rem,4vw,3rem);width:max-content;min-width:11rem;max-width:min(20rem,calc(100vw - 2.4rem));
    flex-direction:column;align-items:flex-end;
    background:rgba(8,17,32,.97);backdrop-filter:blur(8px);
    border:1px solid var(--line-gold);border-radius:3px;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    padding:.6rem 1.1rem .7rem;gap:0;}
  .hd nav[data-open]{display:flex;}
  /* Tap target: min-height 44px on the box itself, NOT padding. Padding alone
     gave 42px on the Practice pages and 48px on the legacy pages — the two
     themes inherit different line-heights, so a padding-derived height is not
     the same number on both. min-height + flex centering is theme-independent. */
  .hd nav a{font-size:.72rem;letter-spacing:.22em;padding:.35rem 0;width:100%;
    min-height:44px;display:flex;align-items:center;justify-content:flex-end;text-align:right;}
  /* hairline separators between items, none after the last */
  .hd nav a + a{border-top:1px solid rgba(212,162,78,.16);}
  .hd nav a.on{border-bottom-color:transparent;}
}
/* the small "The Digital Practice" tagline drops below 720px, as before. */
@media(max-width:720px){.hd .mark small{display:none;}}

/* ---------- footer ---------- */
.ft{background:var(--navy);color:rgba(250,244,233,.72);border-top:1px solid var(--line-gold);}
.ft .inner{width:var(--w);margin:0 auto;padding:3rem 0 2.4rem;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-end;}
.ft .mark{font-family:var(--disp);font-weight:640;font-size:1.2rem;color:var(--paper);display:flex;align-items:center;gap:.5rem;}
.ft .mark .mg{flex:none;}
.ft .letterhead{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;line-height:2;}
.ft .pplink{color:var(--gold-pale);text-decoration:none;border-bottom:1px solid var(--line-gold);transition:color .2s;}
.ft .pplink:hover{color:var(--gold);}
.ft nav{display:flex;gap:.8rem 1.6rem;flex-wrap:wrap;}
.ft nav a{font-family:var(--ui);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:rgba(250,244,233,.7);}
.ft nav a:hover{color:var(--gold);}

/* ---------- article CTA band (.cta-finale, 2026-08-12) ----------
   The 3 Insights articles' closing CTA, restyled from the legacy
   .atlas-band/glass-btn block to the concept theme (operator, 2026-08-12).

   NAMED .cta-finale, NOT .finale, deliberately. The article pages already
   define their OWN `.finale` in an inline <style>
   (position:relative;min-height:88vh;display:flex) for their full-bleed image
   finale section, and two of the three have an element using it. Reusing the
   name made the CTA lay its children out in a row. Verified via CSSOM rule
   matching, not guessed.

   Values mirror .finale in practice.css so the band reads identically to the
   Practice pages' CTA. Duplicated rather than shared for that reason; if the
   articles are ever cut over to the Practice theme wholesale, collapse the two.
   Buttons are scoped (.cta-finale .btn) so `.btn` stays out of the legacy
   theme's global namespace. */
.cta-finale{background:var(--navy);color:var(--paper);text-align:center;padding:clamp(5rem,12vh,8rem) 0;position:relative;overflow:hidden;}
.cta-finale h2{font-family:var(--disp);font-weight:640;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.1;letter-spacing:-.01em;margin:0;}
.cta-finale .sub{max-width:32em;margin:1.2rem auto 0;font-size:1.05rem;line-height:1.7;color:rgba(250,244,233,.85);}
.cta-finale .cta-row{display:flex;justify-content:center;gap:1rem;margin-top:2.4rem;flex-wrap:wrap;}
.cta-finale .btn{display:inline-block;font-family:var(--ui);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;padding:.95rem 1.7rem;transition:transform .2s,box-shadow .2s,background .2s,color .2s;}
.cta-finale .btn.gold{background:var(--gold);color:var(--navy);font-weight:600;}
.cta-finale .btn.gold:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(212,162,78,.35);}

/* textured brand marks: gold material masked by the DrBee monogram / wordmark shapes */
.mg{display:inline-block;aspect-ratio:474/459;
  background:url('/brand/gold-texture.webp') center/cover;
  -webkit-mask:url('/brand/monogram-gold.svg') no-repeat center/contain;
  mask:url('/brand/monogram-gold.svg') no-repeat center/contain;}
.wm{display:inline-block;aspect-ratio:259.13/50.76;
  background:url('/brand/gold-texture.webp') center/cover;
  -webkit-mask:url('/brand/wordmark-gold.svg') no-repeat center/contain;
  mask:url('/brand/wordmark-gold.svg') no-repeat center/contain;}
.hd .mark .wm{align-self:center;}

/* ---------- fixed-header offset (legacy theme pages) ----------
   .hd is position:fixed. The Practice theme pages absorb it with full-height
   .cover/.chap heroes, and the 3 legacy Insights article pages do the same
   (their .cover is a full-bleed min-height:92vh hero with the text pinned to
   the bottom, so the header overlays the image top by design — exactly like
   the Practice .cover; no offset there, or the full-bleed hero would break
   and §5.7 "only its chrome changes" would be violated). The 404 page has no
   full-bleed hero — its section starts with pt-16/pt-24, which at 390px is
   64px, short of the 79px mobile header — so it needs this offset.

   Header height measured 2026-08-12 via Playwright on the built chrome:
     1440px -> 65px (mark + vertical padding; no burger)
      390px -> 79px (the 44px burger min-height raises the bar)
   padding-top is set just above the measured height so the first content
   strictly clears the fixed header (heading.top > header.height). */
.chrome-offset{padding-top:66px;}
@media(max-width:1024px){.chrome-offset{padding-top:80px;}}

/* reduced motion: drop the burger bar animation */
@media(prefers-reduced-motion:reduce){.hd .burger span{transition:none;}}