@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
/* Clark's Lab — House Style (canonical). Link with <link rel="stylesheet" href="/house.css">. */
/* Dedicated to Hal Helms (a"h) — teacher, mentor, friend. */

/* ── tokens ──────────────────────────────────────────────────── */
:root{
  --display:"Playfair Display",Georgia,serif;   /* headlines — weight 500 (roman) */
  --text:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
  --frame:1080px; --measure:64ch;
  --ease:cubic-bezier(.2,1,.3,1); --dur:200ms;
}
:root,[data-mode="paper"]{
  color-scheme:light;
  --paper:#FBFAF7; --ink:#16140F; --ink-2:#6B6459; --faint:#A8A091;
  --rule:#E7E3D9; --rule-2:#D7D2C5; --rule-strong:#16140F;
  --signal:#B26A21; --signal-ink:#FBFAF7;
}
[data-mode="carbon"]{
  color-scheme:dark;
  --paper:#0C0D0F; --ink:#ECEAE3; --ink-2:#9A958B; --faint:#5F5A52;
  --rule:#1B1D21; --rule-2:#2A2D33; --rule-strong:#ECEAE3;
  --signal:#D9922F; --signal-ink:#0C0D0F;
}

/* ── base ────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{background:var(--paper);-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:17px;line-height:1.6;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── primitives ──────────────────────────────────────────────── */
.wrap{width:min(100%,var(--frame));margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.15em;font-size:10.5px;font-weight:500}
.tnum{font-feature-settings:"tnum" 1}
.onum{font-feature-settings:"onum" 1}
/* BS"D — the siyata d'shmaya mark; sits top-right on every page, mono voice. */
.bsd{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:10px;font-weight:500;color:var(--ink-2)}

/* ── instrument bar ──────────────────────────────────────────── */
.bar{border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;min-height:48px}
.bar .left,.bar .right{display:flex;align-items:center;gap:18px;color:var(--faint)}
.bar .brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
/* status mark — a small amber dot for LIVE status only. No glow, no pulse. */
.dot{width:7px;height:7px;border-radius:999px;background:var(--signal)}
/* brand mark — the lockup carries a square ink mark, never the amber status dot. */
.brand .dot{border-radius:0;background:var(--ink);box-shadow:none}
.bar .cell{white-space:nowrap}
.bar .sep{color:var(--rule-2)}
.toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);
  padding:7px 11px;color:var(--ink-2);font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.14em;font-size:9.5px;transition:border-color var(--dur),color var(--dur)}
.toggle:hover{border-color:var(--ink-2);color:var(--ink)}
.toggle .sw{width:8px;height:8px;border-radius:999px;background:var(--ink-2)}

/* ── masthead ────────────────────────────────────────────────── */
.mast{padding:78px 0 50px;border-bottom:1px solid var(--rule-strong)}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);margin:0 0 30px}
h1{margin:0;max-width:15ch;font-family:var(--display);font-weight:500;
  font-size:clamp(2.9rem,7vw,5.4rem);line-height:1.06;letter-spacing:-.01em}
h1 em{font-style:italic;font-weight:500}
.lede{max-width:54ch;margin:26px 0 0;color:var(--ink-2);font-size:clamp(1.12rem,.7vw+1rem,1.28rem);line-height:1.5}

.readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:40px}
.readout .r{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:18px;
  padding:13px 0;border-top:1px solid var(--rule)}
.readout .r .k{color:var(--ink-2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.15em;font-size:10px}
.readout .r .v{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1}
.readout .r .v.txt{font-size:.95rem;font-weight:400;color:var(--ink-2)}

.search{margin-top:30px}
.search input{width:100%;max-width:520px;min-height:46px;border:1px solid var(--rule-2);background:transparent;
  color:var(--ink);padding:12px 14px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;border-radius:0;outline:0;transition:border-color var(--dur)}
.search input::placeholder{color:var(--faint)}
.search input:focus-visible{border-color:var(--ink)}

/* ── sections + ledger rows ──────────────────────────────────── */
.sec{padding-top:60px}
.sechead{display:flex;justify-content:space-between;align-items:baseline;color:var(--ink-2);padding-bottom:6px}
.sechead .t{color:var(--ink);font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.sechead .c{color:var(--faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:10px}

.row{display:grid;grid-template-columns:78px minmax(0,1fr) 158px;gap:0 32px;align-items:start;
  padding:34px 0;border-top:1px solid var(--rule-strong);position:relative}
.row .marg{padding-top:6px}
.row .num{font-family:var(--display);font-weight:500;
  font-size:1.45rem;line-height:1;color:var(--faint);transition:color var(--dur)}
.row .mdate{margin-top:9px;color:var(--faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:9.5px}
.row:hover .num{color:var(--signal)}
.row .meta{color:var(--ink-2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:10px;margin:0 0 13px}
.row h3{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(1.55rem,2.3vw,2.1rem);line-height:1.08;letter-spacing:-.01em}
.row h3 .ref{font-family:var(--text);font-style:italic;font-weight:400;
  color:var(--ink-2);font-size:1rem;margin-left:13px;letter-spacing:0}
.row .lede2{margin:13px 0 0;color:var(--ink-2);max-width:60ch;font-size:1rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .sig{margin:16px 0 0;color:var(--faint);font-family:var(--mono);letter-spacing:.03em;font-size:11px}
.row .act{justify-self:end;display:grid;gap:10px;width:100%}
.row .open{border:1px solid var(--rule-strong);padding:11px 0;text-align:center;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:10px;
  transition:background var(--dur),color var(--dur)}
.row .open:hover{background:var(--ink);color:var(--paper)}
.row .pdf{text-align:center;color:var(--ink-2);font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.16em;font-size:9.5px;transition:color var(--dur)}
.row .pdf:hover{color:var(--ink)}

/* ── trim — confidentiality, spec colophon ───────────────────── */
.trim{margin:76px 0 0;border:1px solid var(--rule-strong)}
.trim .tbar{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;
  border-bottom:1px solid var(--rule);color:var(--ink-2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.15em;font-size:10px}
.trim .tbar .s{display:inline-flex;align-items:center;gap:9px}
.trim .tbody{padding:32px 24px 28px}
.trim h2{margin:0 0 12px;font-family:var(--display);font-weight:500;font-size:1.9rem;letter-spacing:-.01em}
.trim p{margin:0 0 26px;color:var(--ink-2);max-width:58ch}
.trim .trows{border-top:1px solid var(--rule)}
.trim .tr{display:grid;grid-template-columns:160px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule)}
.trim .tr .k{font-family:var(--mono);text-transform:uppercase;letter-spacing:.15em;font-size:10px;color:var(--faint)}
.trim .tr .v{color:var(--ink)}
.trim .tr .v.dim{color:var(--ink-2);font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.trim .tsig{margin-top:10px;height:46px;border-bottom:1px solid var(--rule-2);position:relative}
.trim .tsig .x{position:absolute;left:0;bottom:7px;color:var(--faint);font-style:italic;font-family:var(--text)}
.trim .accept{margin-top:24px;display:inline-block;padding:13px 26px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:10px}

/* ── colophon ────────────────────────────────────────────────── */
footer{margin-top:54px;border-top:1px solid var(--rule);padding:24px 0 70px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;
  color:var(--faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:9.5px}
footer .brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink-2)}

/* ── restrained motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px);animation:rise .7s var(--ease) forwards}
  .mast .reveal:nth-child(1){animation-delay:.04s}
  .mast .reveal:nth-child(2){animation-delay:.10s}
  .mast .reveal:nth-child(3){animation-delay:.16s}
  .mast .reveal:nth-child(4){animation-delay:.22s}
  .row{opacity:0;transform:translateY(10px);animation:rise .6s var(--ease) forwards;animation-delay:.06s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width:760px){
  .bar .left .cell,.bar .sep{display:none}
  .readout{grid-template-columns:1fr;gap:0}
  .row{grid-template-columns:1fr;gap:14px}
  .row .marg{display:flex;align-items:baseline;gap:14px;padding-top:0}
  .row .mdate{margin-top:0}
  .row .act{justify-self:start;width:auto;grid-auto-flow:column;gap:18px;align-items:center}
  .row .open{padding:11px 22px}
}