/* ═══════════════════════════════════════════════════════════════════════════
   blainomd.com — The Surgical Monograph, the whole site's one stylesheet.
   2026-10-05. Grew out of the home redesign (Stitch project 2919235558418139036,
   shipped 584bbbf); this file makes every page speak it. DESIGN.md explains the
   language; scripts/design-check.mjs proves a page follows it.

   Two surfaces, one language:
     Theatre (default)  deep graphite, the stage: the front door, the field log, the writing index.
     Paper  <html data-surface="paper">  warm paper, the reading room: essays, briefs, investor reads.
   Same type (Playfair display, Inter text, JetBrains Mono labels), same hairline grid,
   same brass accent used for exactly two things: the one action, the one number.
   Square corners everywhere. Numbers are set in serif. Labels are mono, uppercase, tracked.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  --surface:#101319; --s-lowest:#0b0e13; --s-low:#191c21; --s-mid:#1d2025; --s-high:#272a30;
  --on:#e1e2ea; --on-var:#d1c5b4; --outline:#9a8f80; --outline-var:#4e4639;
  --brass:#e9c176; --brass-c:#c5a059; --on-brass:#412d00;
  --line:rgba(247,245,240,.09); --line-brass:rgba(197,160,89,.38);
  --chrome:rgba(16,19,25,.9); --chrome-solid:rgba(11,14,19,.98); --hover:rgba(39,42,48,.4);
  --serif:'Playfair Display',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(20px,4.5vw,64px);
  /* corners: square. --r-circle only for a true circle (an avatar). */
  --r:0;--r-circle:50%;
  /* spacing scale: every literal padding, gap and margin >= 4px sits on it; rhythm uses clamp(); the gutter is --pad */
  --sp-4:4px;--sp-8:8px;--sp-12:12px;--sp-16:16px;--sp-20:20px;--sp-24:24px;--sp-32:32px;--sp-40:40px;--sp-48:48px;--sp-64:64px;--sp-80:80px;--sp-96:96px;
  --head:64px;
  --measure:66ch;
  color-scheme:dark;
}
:root[data-surface="paper"]{
  --surface:#f6f2ea; --s-lowest:#eee8dc; --s-low:#fbf8f3; --s-mid:#ffffff; --s-high:#e6dfd1;
  --on:#15181e; --on-var:#474a55; --outline:#736a5c; --outline-var:#cbc2b1;
  --brass:#8a6a22; --brass-c:#a98433; --on-brass:#ffffff;
  --line:rgba(21,24,30,.1); --line-brass:rgba(138,106,34,.35);
  --chrome:rgba(246,242,234,.9); --chrome-solid:rgba(246,242,234,.98); --hover:rgba(21,24,30,.04);
  color-scheme:light;
}

/* Names earlier page generations used. They resolve to the system so a migrated page
   keeps its own component CSS and still speaks the language. New pages use the names above. */
:root{
  --ink-0:var(--surface); --ink-1:var(--s-low); --ink-2:var(--s-mid);
  --bone:var(--on); --body:var(--on-var); --mute:var(--outline);
  --copper:var(--brass-c); --copper-hi:var(--brass); --hair:var(--line-brass); --hair-soft:var(--line);
  --primary:var(--s-low); --secondary:var(--s-mid); --accent:var(--brass-c); --accent-light:var(--brass);
  --text-primary:var(--on); --text-secondary:var(--on-var); --text:var(--on); --muted:var(--on-var);
  --border:var(--line); --bg:var(--surface); --bg-light:var(--surface);
  --navy:var(--surface); --teal:var(--brass-c); --teal2:var(--brass); --ice:var(--on-var); --mut:var(--outline);
  --paper:var(--surface); --ink:var(--on);
  /* a theatre section inside a paper page keeps theatre's brass, so --teal-bright is literal */
  --teal-bright:#e9c176; --dark:#101319; --dark-headline:#e1e2ea; --dark-body:rgba(225,226,234,.82);
  --transition:.15s ease;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--surface);color:var(--on-var);
  line-height:1.65;font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
body>main,body>.page{flex:1}
::selection{background:rgba(197,160,89,.85);color:#2a1d00}
a{color:var(--brass);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
img,svg,video{max-width:100%}
.skip{position:absolute;left:-9999px;top:8px;background:var(--brass-c);color:var(--on-brass);padding:var(--sp-12) var(--sp-16);z-index:200;font-family:var(--mono);font-size:.75rem}
.skip:focus{left:8px}
[id]{scroll-margin-top:calc(var(--head) + 12px)}

/* ── 3. Chrome: top bar, footer, phone dock ────────────────────────────── */
.top{position:sticky;top:0;z-index:100;height:var(--head);
  background:var(--chrome);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-20);padding:0 var(--pad)}
.logo{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--on);letter-spacing:-.005em;white-space:nowrap;display:flex;align-items:center;gap:var(--sp-12);min-height:44px}
.logo::after{content:"MD";font-family:var(--mono);font-size:.62rem;font-weight:500;color:var(--brass);letter-spacing:.16em;border:1px solid var(--line-brass);padding:3px var(--sp-8) 2px}
.top nav{margin-left:auto}
.top nav ul{display:flex;list-style:none;gap:var(--sp-4)}
.top nav ul a{display:flex;align-items:center;min-height:44px;padding:0 var(--sp-12);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-var);transition:color .15s ease}
.top nav ul a:hover,.top nav ul a[aria-current="page"]{color:var(--brass)}
.top-cta{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
  border:1px solid var(--line-brass);padding:var(--sp-12) var(--sp-20);white-space:nowrap;transition:all .15s ease}
.top-cta:hover{border-color:var(--brass);background:rgba(233,193,118,.08)}
.hamburger{display:none;width:44px;height:44px;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:var(--sp-4)}
.hamburger span{width:22px;height:2px;background:var(--on);transition:all .18s ease}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.site-foot{border-top:1px solid var(--line);background:var(--s-lowest);padding:28px var(--pad);text-align:center}
.site-foot a{font-size:.85rem;color:var(--outline);display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-8)}
.site-foot a:hover{color:var(--brass)}
.site-foot a.hush{color:rgba(154,143,128,.35);margin-left:var(--sp-12)}
.site-foot .foot-line{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--outline);line-height:1.8;max-width:60ch;margin:0 auto var(--sp-8)}
.site-foot .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--sp-8)}
.site-foot .foot-links a{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.dock{display:none}

/* ── 4. Primitives ─────────────────────────────────────────────────────── */
.stage{width:min(1280px,calc(100% - 2*var(--pad)));margin:0 auto}
.stage--read{width:min(720px,calc(100% - 2*var(--pad)))}
.page--center{display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vh,64px) var(--pad)}
.kicker{display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:var(--sp-12)}
.display,.sec-head h2,section>h2{font-family:var(--serif);font-weight:500;color:var(--on);font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.15;letter-spacing:-.015em;margin-bottom:var(--sp-16);text-wrap:balance}
.subtitle{max-width:var(--measure);color:var(--on-var);font-size:1.06rem;line-height:1.7;margin-bottom:var(--sp-40)}
.subtitle strong{color:var(--on);font-weight:500}
.num{font-family:var(--serif);font-weight:500;color:var(--on);letter-spacing:-.02em;line-height:1.05}
.hairline{border:0;border-top:1px solid var(--line);margin:0}
.hairline--brass{border-top-color:var(--line-brass)}
.chip{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);border:1px solid var(--line-brass);padding:var(--sp-4) var(--sp-8) 3px}
.chip--fill{background:var(--brass-c);color:var(--on-brass);border-color:var(--brass-c)}
.plate{background:var(--s-low);border:1px solid var(--line);padding:clamp(22px,2.6vw,34px);transition:border-color .2s ease}
.plate:hover{border-color:var(--line-brass)}
.band{margin-top:var(--sp-24);padding:var(--sp-20) var(--sp-24);background:var(--s-mid);border:1px solid var(--line-brass);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-12) var(--sp-24)}
.band p{font-size:.95rem;color:var(--on-var);max-width:60ch;line-height:1.6}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);min-height:48px;padding:0 var(--sp-32);
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;transition:all .15s ease;text-align:center}
.btn-primary{background:var(--brass-c);color:var(--on-brass);font-weight:600}
.btn-primary:hover{background:var(--brass)}
.btn-secondary{border-color:var(--outline-var);color:var(--on);background:transparent}
.btn-secondary:hover{border-color:var(--brass);color:var(--brass)}
.btn-quiet{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-var);text-decoration:underline;text-decoration-color:var(--line-brass);text-underline-offset:8px}
.btn-quiet:hover{color:var(--brass);text-decoration-color:var(--brass)}

/* ── 5. Reading: long-form on either surface ───────────────────────────── */
.read{width:min(720px,calc(100% - 2*var(--pad)));margin:0 auto;padding:clamp(44px,7vh,80px) 0 clamp(60px,9vh,96px);font-size:1.0625rem;line-height:1.72}
.read h1{font-family:var(--serif);font-weight:500;color:var(--on);font-size:clamp(2rem,5vw,3rem);line-height:1.08;letter-spacing:-.015em;text-wrap:balance;margin-bottom:var(--sp-16)}
.read .dek{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.4rem);color:var(--brass);line-height:1.4;max-width:34ch;margin-bottom:var(--sp-32);text-wrap:balance}
.read h2{font-family:var(--serif);font-weight:500;color:var(--on);font-size:1.45rem;line-height:1.2;margin:var(--sp-40) 0 var(--sp-16);letter-spacing:-.01em}
.read p{margin-bottom:var(--sp-20);max-width:var(--measure)}
.read p strong,.read em{color:var(--on)}
.read .pull{border-left:2px solid var(--brass-c);padding:var(--sp-8) 0 var(--sp-8) var(--sp-24);margin:var(--sp-32) 0;font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.4;color:var(--on);max-width:34ch}
.read .meta{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap;margin-bottom:var(--sp-20);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--outline)}
.read .endcard{margin-top:var(--sp-48);border:1px solid var(--line);background:var(--s-low);padding:var(--sp-24) var(--sp-32);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-20);flex-wrap:wrap}
.read .endcard p{margin:0;font-size:.96rem;max-width:44ch}

/* ── 6. Phone ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){ .top-cta{display:none} }
@media (max-width:900px){
  :root{--head:56px}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .top nav{margin-left:0}
  .top nav ul{position:fixed;top:var(--head);left:0;right:0;flex-direction:column;gap:0;
    background:var(--chrome-solid);border-bottom:1px solid var(--line-brass);padding:8px var(--pad) 16px;display:none}
  .top nav ul.active{display:flex}
  .top nav ul a{padding:0 var(--sp-4);font-size:.8rem;border-bottom:1px solid var(--line)}
  .hamburger{display:flex}
  .logo{font-size:1.15rem}
  .site-foot{padding-bottom:var(--sp-20)}
  .dock{display:grid;grid-template-columns:1fr 1fr 2.1fr 1fr 1fr;align-items:stretch;gap:2px;
    position:fixed;left:0;right:0;bottom:0;z-index:100;
    background:var(--chrome-solid);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line-brass);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
  .dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;
    font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--outline)}
  .dock a:active,.dock a:hover{color:var(--brass)}
  .dock svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .dock a.go{flex-direction:row;background:var(--brass-c);color:var(--on-brass);font-size:.66rem;font-weight:600;letter-spacing:.08em;gap:var(--sp-8);text-align:center;line-height:1.25;padding:0 var(--sp-8)}
  .dock a.go:active{background:var(--brass)}
}
@media (max-width:520px){ .btn{width:100%} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}