/* ═══════════════════════════════════════════════════════════
   sammatuba site — mono design system
   Inherits the lieflat grammar: paper/charcoal poles, luminance
   = hierarchy, hairline furniture, Inter throughout. No hue on
   the site itself; color arrives only through embedded charts.
   Tokens and page specs: site/DESIGN.md
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#F0EFEB;--ink:#1C1C1A;--muted:#8F8E88;--faint:#C6C5BF;--grid:#DEDDD6;
  --measure:720px;--wide:980px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;
  padding:44px 24px 72px;line-height:1.65}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);
  text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}

/* ── masthead ── */
.mast{max-width:var(--wide);margin:0 auto 8px;display:flex;justify-content:space-between;
  align-items:baseline;gap:20px;border-bottom:1px solid var(--ink);padding-bottom:14px}
.mast .name{font-size:15px;font-weight:800;letter-spacing:-.01em;text-decoration:none}
.mast .name:hover{text-decoration:none}
.mast nav{display:flex;gap:18px}
.mast nav a{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--muted);
  text-decoration:none}
.mast nav a:hover{color:var(--ink)}
.mast .tagline{font-size:10px;color:var(--faint);letter-spacing:.12em;display:block;margin-top:8px}

/* ── page scaffolding ── */
.wrap{max-width:var(--wide);margin:0 auto}
.measure{max-width:var(--measure);margin:0 auto}
.kicker{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--muted);
  margin:52px 0 10px}
.kicker .draft{border:1px dashed var(--faint);border-radius:99px;padding:2px 9px;
  margin-left:8px;color:var(--muted);font-weight:600}
h1{font-size:clamp(30px,5vw,44px);line-height:1.12;letter-spacing:-.02em;
  font-weight:800;margin:0 0 12px}
h2{font-size:21px;font-weight:700;letter-spacing:-.015em;margin:44px 0 10px;
  line-height:1.3}
h3{font-size:14px;font-weight:700;margin:26px 0 6px}
p{margin:0 0 16px}
.lede{font-size:17px;line-height:1.7;color:var(--ink)}
.lede.intro{max-width:var(--measure);margin:52px 0 10px}
.meta{font-size:10px;color:var(--faint);letter-spacing:.08em;font-weight:500;
  text-transform:uppercase;margin:0 0 28px}
.meta.flush{margin-bottom:0}
.meta b{color:var(--muted);font-weight:600}
.rule{border:0;border-top:1px solid var(--grid);margin:44px 0}
.bignote{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
  margin:56px 0 18px;font-weight:700}
.bignote::after{content:"";display:block;width:44px;border-top:1px solid var(--ink);
  margin-top:10px}

/* ── lists (writing index, home latest) ── */
.entry{display:block;text-decoration:none;padding:20px 0;border-bottom:1px solid var(--grid)}
.entry:hover{text-decoration:none}
.entry .date{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--faint);
  text-transform:uppercase}
.entry .title{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:4px 0 5px}
.entry:hover .title{text-decoration:underline;text-decoration-color:var(--faint);
  text-underline-offset:3px}
.entry .meta{margin:0}
.soon{font-size:11px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;
  padding:18px 0}

/* ── project cards (Glance speed) ── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0}
.card{background:var(--bg);border-radius:24px;padding:26px 26px 22px;
  border:1px solid var(--grid);display:flex;flex-direction:column;text-decoration:none}
.card:hover{border-color:var(--muted)}
.card .no{font-size:9px;font-weight:800;letter-spacing:.1em;background:var(--ink);
  color:var(--bg);padding:3px 8px;border-radius:6px;align-self:flex-start}
.card h3{font-size:17px;margin:12px 0 6px}
.card p{font-size:12.5px;color:var(--muted);flex:1}
.card .meta{margin:14px 0 0}

/* ── essay body furniture ── */
.body p{max-width:var(--measure);margin-left:auto;margin-right:auto}
.body h2{max-width:var(--measure);margin-left:auto;margin-right:auto}
.body ul,.body ol{max-width:var(--measure);margin:0 auto 16px;padding-left:22px}
.body li{margin-bottom:6px}
.body blockquote{max-width:var(--measure);margin:0 auto 16px;padding:2px 0 2px 18px;
  border-left:2px solid var(--ink);font-size:15px;color:var(--muted)}
.chartframe{display:block;width:100%;max-width:var(--measure);height:430px;
  margin:26px auto;border:0}
.chartframe.wide{max-width:var(--wide)}

/* ── tables (project pipeline) ── */
.tbl{width:100%;max-width:var(--measure);margin:8px auto 24px;border-collapse:collapse;
  font-size:12.5px}
.tbl td{border-bottom:1px dotted var(--grid);padding:9px 10px 9px 0;vertical-align:top}
.tbl td:first-child{font-weight:700;white-space:nowrap}
.tbl td:last-child{color:var(--muted)}

/* ── footer ── */
.foot{max-width:var(--wide);margin:72px auto 0;border-top:1px solid var(--ink);
  padding-top:12px;display:flex;justify-content:space-between;gap:20px;
  font-size:9px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}

@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  body{padding:28px 18px 56px}
  .chartframe.wide{max-width:var(--measure)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}