/* NICK case notes — shared design system.
   The first published note (two-links-one-email) carries its own inline copy of these
   tokens and is deliberately left alone; new notes use this file. */

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#0b0a08;
  --bg-raise:#161310;
  --ink:#ece5d8;
  --ink-dim:#a89b87;
  --ink-faint:#8a7d6c;
  --gold:#c9a15a;
  --gold-soft:#8a7245;
  --red:#d94a3d;
  --green:#8fae86;
  --line:rgba(236,229,216,0.12);
  --line-soft:rgba(236,229,216,0.06);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Consolas","Liberation Mono",monospace;
}

html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--gold);color:#1a1408}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--ink)}

.wrap{max-width:700px;margin:0 auto;padding:0 24px}

/* masthead */
.brand{display:flex;align-items:center;gap:11px;padding:28px 24px 0;max-width:748px;margin:0 auto}
.brand svg{width:26px;height:26px;display:block}
.brand span{font:600 13px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim)}

/* hero — typographic, no photography */
.hero{position:relative;padding:76px 0 60px;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(201,161,90,.10) 0%, transparent 58%),
    radial-gradient(50% 90% at 92% 22%, rgba(217,74,61,.07) 0%, transparent 62%);
}
.hero-body{position:relative}
.eyebrow{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,161,90,.22)}
.eyebrow.closed{color:var(--green)}
.eyebrow.closed .dot{background:var(--green);box-shadow:0 0 0 3px rgba(143,174,134,.2)}
h1{font:400 clamp(36px,5.6vw,60px)/1.06 var(--serif);letter-spacing:-.012em;margin:0 0 22px;text-wrap:balance;max-width:14ch}
.dek{font:400 clamp(17px,2vw,20px)/1.55 var(--serif);font-style:italic;color:var(--ink-dim);max-width:47ch;margin:0}


.dateline{margin:26px 0 0;font:600 11.5px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.dateline .sep{opacity:.5;padding:0 8px}

/* status strip */
.status{border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(201,161,90,.07), rgba(201,161,90,.02))}
.status-inner{padding:28px 0;display:flex;gap:18px;align-items:flex-start}
.status-inner .mark{color:var(--gold);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;padding-top:4px}
.status-inner p{margin:0;color:var(--ink);font-size:15.5px;line-height:1.6}

/* body */
main{padding:74px 0 40px}
section{margin:0 0 70px}
section:last-of-type{margin-bottom:0}
h2{font:400 clamp(26px,3.2vw,32px)/1.2 var(--serif);color:var(--ink);margin:0 0 22px;letter-spacing:-.005em;text-wrap:balance}
h3{font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin:0 0 16px}
p{margin:0 0 18px;font-size:16px}
section p:last-child{margin-bottom:0}
.lede{font-size:18px;color:var(--ink-dim);line-height:1.7}
strong{color:var(--ink);font-weight:600}
em{color:var(--ink-dim)}

.pull{font:400 22px/1.5 var(--serif);font-style:italic;color:var(--gold);border-left:2px solid var(--gold-soft);padding:2px 0 2px 24px;margin:36px 0;max-width:52ch}

.divider-label{display:flex;align-items:center;gap:14px;margin:44px 0 26px}
.divider-label::after{content:"";flex:1;height:1px;background:var(--line)}
.divider-label span{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}

.box{background:var(--bg-raise);border:1px solid var(--line);border-radius:4px;padding:26px 28px;margin:0 0 28px}
.box p:last-child{margin-bottom:0}
.box.gold{border-color:rgba(201,161,90,.35)}

pre{background:#100e0b;border:1px solid var(--line);border-radius:4px;padding:22px 24px;overflow-x:auto;margin:0 0 20px;font:13.5px/1.7 var(--mono);color:#d9cdb8}
pre .c{color:var(--ink-faint);font-style:italic}
code{font:0.9em var(--mono);color:var(--gold)}
.caption{font-size:13px;color:var(--ink-faint);margin:-10px 0 24px}

/* numbered findings */
.flist{list-style:none;margin:0 0 8px;padding:0;counter-reset:f}
.flist li{counter-increment:f;display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line-soft)}
.flist li:first-child{border-top:none;padding-top:0}
.flist li::before{content:counter(f);font:400 22px/1 var(--serif);color:var(--gold-soft);flex:0 0 auto;width:1.4em}
.flist p{margin:0;font-size:15.5px;line-height:1.6}

/* dashed recommendation list */
.reco{list-style:none;margin:0;padding:0}
.reco li{position:relative;padding:16px 0 16px 30px;border-top:1px solid var(--line-soft);font-size:15.5px;line-height:1.6}
.reco li:first-child{border-top:none;padding-top:0}
.reco li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:1.5px;background:var(--gold-soft)}

/* tables */
.tblwrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:4px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
th{text-align:left;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding:14px 16px;background:var(--bg-raise);border-bottom:1px solid var(--line)}
td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:none}
td.num{font:13px var(--mono);color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
td.dim{color:var(--ink-dim);font-size:13.5px}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 56px;margin-top:70px}
.f-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.f-brand svg{width:20px;height:20px}
.f-brand span{font:600 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
footer p{color:var(--ink-faint);font-size:13px;line-height:1.7;max-width:60ch;margin:0 0 10px}

@media (max-width:640px){
  .hero{padding:52px 0 44px}
  .status-inner{flex-direction:column;gap:8px}
  main{padding:54px 0 8px}
  section{margin-bottom:54px}
}