/* ===========================
   hacker zazen — quiet restraint
   minimal surface, infinite depth
   =========================== */

/* --- tokens --- */
:root{
  /* neutral palette */
  --bg: #fcfcfc;
  --fg: #0f0f0f;
  --muted: #6b6b6b;
  --line: #e6e6e6;

  /* rhythm & measure */
  --wrap: 72ch;
  --lh: 1.6;
  --step--1: clamp(13px, 0.85vw + 9px, 15px);
  --step-0: clamp(16px, 1.0vw + 11px, 18px);
  --step-1: clamp(21px, 1.3vw + 12px, 24px);
  --step-2: clamp(28px, 2.2vw + 12px, 36px);

  /* typography */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Georgia", serif; /* optional for longform */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* quiet dark variant, still restrained */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0d0d0d;
    --fg: #e8e8e8;
    --muted: #a0a0a0;
    --line: #2a2a2a;
  }
}

/* --- base --- */
*{ box-sizing: border-box; }
html{
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--step-0)/var(--lh) var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body{ margin:0; }

/* --- layout --- */
.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.25rem;
}
header.wrap, footer.wrap{
  border-block-end: 1px solid var(--line);
}
footer.wrap{
  border-block-start: 1px solid var(--line);
  border-block-end: none;
  color: var(--muted);
}

/* --- header / nav --- */
header .brand{
  font-weight: 600;
  letter-spacing: .01em;
}
header .brand a{
  color: inherit;
  text-decoration: none;
}
nav[aria-label="primary"]{
  display: inline-flex;
  gap: 1rem;
}
nav a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
nav a:hover{ border-color: var(--line); }

/* --- type --- */
h1,h2,h3,h4{
  line-height: 1.25;
  margin: 2rem 0 0.75rem 0;
  font-weight: 600;
}
h1{ font-size: var(--step-2); }
h2{ font-size: var(--step-1); }
p, ul, ol, blockquote, figure{
  margin: 1rem 0;
}
.lede{
  color: var(--muted);
  font-style: italic;
}

/* longform option: apply to article container if desired */
/* .prose{ font-family: var(--serif); } */

/* --- links --- */
a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .18em;
}
a:hover{
  text-decoration-thickness: .10em;
}

/* --- lists / index --- */
.list{
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
}
.list li{
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.list time{
  font: 400 var(--step--1)/1 var(--mono);
  color: var(--muted);
}

/* --- figure / hero --- */
figure{ margin: 1.5rem 0; }
.hero{
  margin: 1rem 0 1.25rem;
}
figure img{
  width: 100%;
  height: auto;
  display: bloc