/* ============================================================================
   denza.css — the shared DENZA design layer (monochrome canon, per DESIGN.md)
   ----------------------------------------------------------------------------
   ONE studio, ONE surface. Tokens + chrome only: the reset, the palette (light
   + dark), the sticky nav, the single-column measure, the type primitives, the
   footer. Page-specific components stay in each page's own <style>, but they
   MUST reference these tokens — never redeclare a palette, never introduce a
   second accent or a serif body.

   Signature (from DESIGN.md): Tufte data-ink. Every number is mono + tabular.
   No cards, no shadows, no gradients, no border-radius. One accent (terracotta),
   never on a number. Rules are hairlines. The data is the ornament.
   ============================================================================ */

:root{
  /* --- neutrals: warm-biased paper, near-black ink --- */
  --bg:#FAFAF8;          /* page ground */
  --wash:#F1F1EC;        /* faint panel / inset fill */
  --hairline:#DDDDD8;    /* every rule is this weight */
  --ink:#111111;         /* primary text + all numbers */
  --body:#3D3D3A;        /* running prose */
  --muted:#6B6B6B;       /* secondary / labels */
  --faint:#9A9A96;       /* captions, footnotes, disabled */

  /* --- the one accent + the one semantic positive --- */
  --accent:#B4472B;      /* terracotta — links, emphasis, caution. NEVER on a number. */
  --accent-wash:rgba(180,71,43,.10);
  --positive:#1F7A4D;    /* gains / safe / value */

  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --nav-h:52px;
  --measure:920px;       /* single-column max width */
  --pad:24px;            /* page gutter */
}

:root[data-theme=dark]{
  --bg:#101010;
  --wash:#1C1C1A;
  --hairline:#2C2C29;
  --ink:#F0F0EC;
  --body:#B8B8B1;
  --muted:#8B8B84;
  --faint:#63635C;
  --accent:#D0603F;
  --accent-wash:rgba(208,96,63,.14);
  --positive:#3FA36F;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#101010;
    --wash:#1C1C1A;
    --hairline:#2C2C29;
    --ink:#F0F0EC;
    --body:#B8B8B1;
    --muted:#8B8B84;
    --faint:#63635C;
    --accent:#D0603F;
    --accent-wash:rgba(208,96,63,.14);
    --positive:#3FA36F;
  }
}

/* --- reset --- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--sans);line-height:1.58;
  -webkit-font-smoothing:antialiased;font-feature-settings:"kern";
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{max-width:100%}
/* every number is mono + tabular — the signature */
.num,.n,code,kbd,samp{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}

/* ============================ nav ============================ */
.denza-nav{
  position:sticky;top:0;z-index:300;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--pad);background:var(--bg);
  border-bottom:1px solid var(--hairline);
}
.denza-nav .dn-brand{
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.denza-nav .dn-brand:hover{text-decoration:none}
.denza-nav .dn-links{display:flex;align-items:center;gap:2px}
.denza-nav .dn-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:lowercase;
  color:var(--muted);text-decoration:none;padding:7px 10px;
  transition:color .15s;white-space:nowrap;
}
.denza-nav .dn-links a:hover{color:var(--ink);text-decoration:none}
.denza-nav .dn-links a.on{color:var(--ink)}
.denza-nav .dn-drop{position:relative}
.denza-nav .dn-drop > a::after{
  content:'';display:inline-block;margin-left:6px;
  border:3px solid transparent;border-top-color:currentColor;transform:translateY(2px);
}
.denza-nav .dn-menu{
  position:absolute;top:calc(100% + 4px);left:0;min-width:170px;
  background:var(--bg);border:1px solid var(--hairline);padding:5px;
  display:none;flex-direction:column;gap:1px;
}
.denza-nav .dn-drop:hover .dn-menu,.denza-nav .dn-drop:focus-within .dn-menu{display:flex}
.denza-nav .dn-menu a{display:block;padding:8px 10px;text-transform:none;letter-spacing:0}
.denza-nav .dn-menu a:hover{background:var(--wash)}
.denza-nav .dn-toggle{
  display:none;background:none;border:0;color:var(--ink);
  font-size:20px;line-height:1;cursor:pointer;padding:6px 8px;
}
/* theme toggle — a plain mono glyph, no chrome */
.denza-nav .dn-theme{
  background:none;border:0;cursor:pointer;padding:6px 8px;
  font-family:var(--mono);font-size:13px;color:var(--muted);line-height:1;
}
.denza-nav .dn-theme:hover{color:var(--ink)}
@media (max-width:720px){
  .denza-nav .dn-toggle{display:block}
  .denza-nav .dn-links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:1px;padding:8px;
    background:var(--bg);border-bottom:1px solid var(--hairline);display:none;
  }
  .denza-nav.open .dn-links{display:flex}
  .denza-nav .dn-links a{padding:11px 12px}
  .denza-nav .dn-drop > a::after{display:none}
  .denza-nav .dn-menu{
    position:static;display:flex;border:0;padding:0 0 0 12px;
    background:transparent;min-width:0;
  }
}

/* ============================ layout ============================ */
.wrap{max-width:var(--measure);margin:0 auto;padding:40px var(--pad) 0}

/* ============================ type primitives ============================ */
/* eyebrow / kicker — mono, lowercase, tracked-out section signal */
.eyebrow,.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
h1{
  font-size:32px;line-height:1.12;margin:0 0 10px;letter-spacing:-.02em;
  text-wrap:balance;font-weight:600;color:var(--ink);
}
h2{font-size:20px;line-height:1.2;margin:0 0 8px;letter-spacing:-.01em;font-weight:600;color:var(--ink)}
h3{font-size:16px;line-height:1.25;margin:0 0 6px;font-weight:600;color:var(--ink)}
/* section label — the lowercase mono divider heading */
.sec{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:lowercase;
  color:var(--muted);font-weight:400;margin:32px 0 12px;
}
.lede,.sub{color:var(--body);font-size:16px;line-height:1.6;margin:0 0 10px;max-width:66ch}
.disclaim{color:var(--faint);font-size:12.5px;margin:12px 0 0;font-family:var(--mono)}

hr.div,hr.rule{border:0;border-top:1px solid var(--hairline);margin:28px 0}

/* inline code / token chips */
code{
  font-family:var(--mono);font-size:.9em;background:var(--wash);
  padding:1px 5px;color:var(--ink);
}

/* ============================ footer ============================ */
footer{
  border-top:1px solid var(--hairline);margin-top:48px;padding:24px 0 72px;
  font-family:var(--mono);font-size:11.5px;color:var(--faint);line-height:1.75;
}
footer a{color:var(--muted)}

/* ============================ utilities ============================ */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pos{color:var(--positive)}
.acc{color:var(--accent)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}