/* ─────────────────────────────────────────────────────────────
   Doctor Reid · "Specimen" design system · v3.0
   Shared stylesheet for every page on doctorreid.com
   Tokens, base, nav, footer, glass surfaces, pills, headings,
   band colors (screeners), print.
   ───────────────────────────────────────────────────────────── */
:root{
  /* ink & surfaces */
  --ink:#231A12; --ink-2:#4C4238; --sub:#6E6157; --sub-2:#9A8E80;
  --paper:#F5F1E4; --paper-2:#F1E7D2; --sky:#EAF0F4;
  /* accents */
  --sienna:#8C4D2E; --sienna-2:#A8613D; --acid:#EAED78; --acid-2:#F0F2A0; --mist:#B3C3D0; --mist-2:#C9D8E4; --green:#3E9B5F; --tan:#E7CDB8;
  /* bands (screener severity) */
  --band-green:#3E9B5F; --band-green-bg:#E4F1E8;
  --band-amber:#B98A2A; --band-amber-bg:#F7EDCF;
  --band-orange:#C9784E; --band-orange-bg:#F6E1D2;
  --band-red:#A83A2E;   --band-red-bg:#F3D6D1;
  --band-blue:#4A6E9B;  --band-blue-bg:#DDE7F2;
  --band-purple:#6E4E9B;--band-purple-bg:#E6DEF2;
  /* glass */
  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.78); --gline:rgba(255,255,255,.85); --hair:rgba(35,26,18,.10); --hair-2:rgba(35,26,18,.18);
  --shadow:0 18px 40px -18px rgba(35,26,18,.30); --shadow-lg:0 30px 60px -25px rgba(35,26,18,.45);
  /* type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* radii */
  --r-sm:12px; --r:20px; --r-lg:26px; --r-xl:28px; --r-pill:999px;
  /* layout */
  --wrap:1220px; --narrow:820px; --gutter:1.4rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--sky) 0%,var(--paper) 40%,var(--paper-2) 100%);background-repeat:no-repeat;min-height:100vh}
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.blobs .b1{width:520px;height:520px;background:var(--mist-2);top:-160px;left:-120px}
.blobs .b2{width:460px;height:460px;background:#F2F4B8;bottom:-140px;right:-100px}
.blobs .b3{width:380px;height:380px;background:var(--tan);top:34%;right:16%}
::selection{background:var(--acid)}
a{color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sienna);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:96px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* wordmark — always the official handwritten mark, tinted via mask. never redraw it. */
.wm{display:inline-block;background-color:var(--ink);-webkit-mask:url("/assets/wm_wide.png") no-repeat center / contain;mask:url("/assets/wm_wide.png") no-repeat center / contain}
.wm.tall{-webkit-mask-image:url("/assets/wm_tall.png");mask-image:url("/assets/wm_tall.png")}

/* type utilities */
.mono{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase}
.kicker{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);display:inline-block}
.serif{font-family:var(--serif)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.2vw,4.8rem);font-variation-settings:"opsz" 144;line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:600}
h4{font-size:1.2rem;font-weight:600}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300}
.lede{font-size:1.1rem;color:var(--ink-2);max-width:60ch}
.muted{color:var(--sub)}
.small{font-size:.86rem}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:var(--narrow)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* ── nav ─────────────────────────────────────────────── */
.nav{display:flex;align-items:center;gap:1rem;padding:1.1rem 0;position:relative;z-index:50}
.nav .left,.nav .right{flex:1;display:flex;gap:.5rem;align-items:center}
.nav .right{justify-content:flex-end}
.nav .wm{width:190px;height:32px;margin:0 auto;flex:none}
.nav .wm:hover{background-color:var(--sienna)}
.nav .pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav .menu{display:none}
@media(max-width:900px){
  .nav .left,.nav .right .pill:not(.dark):not(.menu){display:none}
  .nav .wm{margin:0}
  .nav .menu{display:inline-flex}
  .nav .right{gap:.4rem}
}
.drawer{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% - .4rem);background:var(--glass-2);border:1px solid var(--gline);backdrop-filter:blur(16px);border-radius:var(--r);padding:.8rem;box-shadow:var(--shadow-lg);flex-wrap:wrap;gap:.5rem;z-index:60}
.drawer.open{display:flex}
.drawer .pill{flex:1 1 auto;justify-content:center}

/* ── pills / buttons ──────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:.5em;background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(10px);border-radius:var(--r-pill);padding:.6em 1.2em;font-weight:500;font-size:.88rem;text-decoration:none;box-shadow:0 8px 24px -12px rgba(35,26,18,.25);transition:.15s;cursor:pointer;font-family:var(--sans);line-height:1.2;white-space:nowrap;color:var(--ink)}
.pill:hover{transform:translateY(-1px)}
.pill.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill.dark:hover{background:var(--sienna)}
.pill.acid{background:var(--acid);color:var(--ink);border-color:var(--acid);font-weight:600}
.pill.acid:hover{box-shadow:0 0 0 8px rgba(234,237,120,.18)}
.pill.sienna{background:var(--sienna);color:var(--paper);border-color:var(--sienna)}
.pill.sienna:hover{background:var(--ink)}
.pill.ghost{background:transparent;box-shadow:none;border-color:var(--hair-2)}
.pill.sm{padding:.45em .9em;font-size:.8rem}
.pill.lg{padding:.8em 1.5em;font-size:1rem}
.pill[disabled],.pill.disabled{opacity:.45;pointer-events:none}
.chip{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);border:1px solid var(--hair-2);border-radius:var(--r-pill);padding:.3em .7em;background:rgba(255,255,255,.5);text-decoration:none;line-height:1.4}
.chip.on,.chip:hover{color:var(--ink);border-color:var(--ink)}
.plink{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--sub);border:1px solid var(--hair-2);border-radius:var(--r-pill);padding:.3em .7em;background:rgba(255,255,255,.5);transition:.12s;position:relative}
.plink:hover{color:var(--ink);border-color:var(--ink)}
.plink.ok::after{content:"copied!";position:absolute;left:50%;top:-1.7em;transform:translateX(-50%);background:var(--ink);color:var(--paper);border-radius:6px;padding:.2em .6em;font-size:.55rem;white-space:nowrap}
.ulink{font-weight:600;text-decoration:none;border-bottom:2px solid var(--acid);color:var(--ink)}
.ulink:hover{border-color:var(--sienna)}

/* ── glass surfaces ───────────────────────────────────── */
.glass{background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(12px);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card{background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(12px);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow)}
.card.link{text-decoration:none;display:flex;flex-direction:column;gap:.6rem;transition:transform .2s,box-shadow .2s}
.card.link:hover{transform:translateY(-4px);box-shadow:0 26px 50px -20px rgba(35,26,18,.4)}
.card .k{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.card .go{margin-top:auto;font-weight:600;font-size:.86rem;color:var(--sienna)}
.ink{background:var(--ink);color:var(--paper);border-radius:var(--r-xl);padding:2.2rem;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.ink::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(234,237,120,.28),transparent 70%);top:-120px;right:-60px;pointer-events:none}
.ink p{color:#CFC5B4}
.ink .mono{color:#9A8E80}
.ink em{color:var(--acid);font-style:italic}
.ink>*{position:relative;z-index:1}

/* ── page header / section head ───────────────────────── */
.phead{padding:2.2rem 0 1.4rem}
.phead .kicker{margin-bottom:.9rem}
.phead h1{margin-bottom:.9rem}
.shead{text-align:center;padding:3.6rem 0 1.6rem}
.shead p{color:var(--sub);max-width:52ch;margin:.6rem auto 0}
.crumbs{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);display:flex;gap:.6em;flex-wrap:wrap;align-items:center}
.crumbs a{text-decoration:none;color:var(--sub)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}

/* ── lists inside wings/cards ────────────────────────── */
.rows{list-style:none}
.rows li a,.rows li .row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--hair);text-decoration:none;font-weight:500;font-size:.97rem;transition:.12s;color:var(--ink)}
.rows li:last-child a,.rows li:last-child .row{border:0}
.rows li a .k{color:var(--sub);font-weight:400;font-size:.84rem;text-align:right;font-family:var(--sans);letter-spacing:0;text-transform:none}
.rows li a:hover{color:var(--sienna);padding-left:.35rem}
.rows .soon{opacity:.55}
.rows .soon .k::after{content:" · soon";color:var(--sienna)}

/* ── bands (screener severity) ───────────────────────── */
.band{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill);padding:.4em .9em;font-weight:500;border:1px solid transparent}
.band::before{content:"";width:.55em;height:.55em;border-radius:50%;background:currentColor}
.band-green{color:var(--band-green);background:var(--band-green-bg)}
.band-amber{color:var(--band-amber);background:var(--band-amber-bg)}
.band-orange{color:var(--band-orange);background:var(--band-orange-bg)}
.band-red{color:var(--band-red);background:var(--band-red-bg)}
.band-blue{color:var(--band-blue);background:var(--band-blue-bg)}
.band-purple{color:var(--band-purple);background:var(--band-purple-bg)}
.bg-green{background:var(--band-green)}.bg-amber{background:var(--band-amber)}.bg-orange{background:var(--band-orange)}.bg-red{background:var(--band-red)}.bg-blue{background:var(--band-blue)}.bg-purple{background:var(--band-purple)}

/* ── forms ───────────────────────────────────────────── */
.field{width:100%;background:rgba(255,255,255,.7);border:1px solid var(--hair-2);border-radius:var(--r-sm);padding:.7em .9em;font-size:.95rem;outline:none;transition:.15s}
.field:focus{border-color:var(--sienna);background:#fff}
.field::placeholder{color:var(--sub-2)}

/* ── notice / callouts ───────────────────────────────── */
.note-box{border-radius:var(--r);padding:1.1rem 1.3rem;border:1px solid var(--hair);background:rgba(255,255,255,.55)}
.note-box.warn{background:var(--band-red-bg);border-color:rgba(168,58,46,.25)}
.note-box.info{background:var(--band-blue-bg);border-color:rgba(74,110,155,.25)}
.note-box.acid{background:rgba(234,237,120,.35);border-color:rgba(35,26,18,.12)}
.note-box h4{margin-bottom:.4rem}

/* ── footer ──────────────────────────────────────────── */
footer.site{border-top:1px solid rgba(35,26,18,.14);padding:2rem 0;font-size:.82rem;color:var(--sub);margin-top:3.6rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
footer.site .wm{width:140px;height:24px;background-color:var(--sub)}
footer.site a{text-decoration:none}footer.site a:hover{color:var(--ink)}
footer.site nav{display:flex;flex-wrap:wrap;gap:.9rem}
.disc{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);text-align:center;padding:1.2rem var(--gutter) 0}

/* ── toast ───────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);border-radius:var(--r-pill);padding:.7em 1.3em;font-size:.86rem;opacity:0;transition:.25s;z-index:200;pointer-events:none;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── print ───────────────────────────────────────────── */
@media print{
  body{background:#fff;color:#000;font-size:12pt}
  .blobs,.nav,footer.site,.noprint,.drawer{display:none!important}
  .card,.glass,.wing{box-shadow:none;backdrop-filter:none;background:#fff;border:1px solid #ccc}
  a{text-decoration:none;color:#000}
}