/* Postroom — Bento Ledger direction (post-sorting desk premise) */
@font-face{font-family:"Space Grotesk";src:url("assets/space-grotesk.ttf") format("truetype");font-weight:100 700;font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/dm-sans.ttf") format("truetype");font-weight:100 1000;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/ibm-plex-mono.ttf") format("truetype");font-weight:400 600;font-display:swap}

:root{
  --bg:#F4F1E8; --surface:#FBFAF5; --surface-2:#ECE7D8;
  --ink:#1C1A15; --ink-soft:#4A453B; --muted:#7A7364;
  --line:#1C1A15; --hair:#D8D2C0;
  --accent:#0C6B4F; --accent-ink:#FFFFFF;
  --amber:#E9B44C; --signal:#C73E1D; --sky:#23439C;
  --radius:14px;
  --font-display:"Space Grotesk","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.62;
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(28,26,21,.055) 27px 28px);
}
::selection{background:var(--amber);color:var(--ink)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;z-index:200;transition:top 180ms cubic-bezier(.22,1,.36,1)}
.skip:focus{top:12px;color:#fff}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:60;background:var(--ink);color:#F4F1E8}
.masthead__ticker{overflow:hidden;white-space:nowrap;border-bottom:1px solid rgba(244,241,232,.22);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;padding:7px 0}
.masthead__ticker span{display:inline-block;padding-right:12px;animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
.masthead__bar{display:flex;align-items:center;gap:16px;padding:10px 22px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;color:#F4F1E8;text-decoration:none;min-height:48px}
.brand__mark{flex:none;border-radius:6px}
.brand__word{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1;display:grid}
.brand__word small{font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#CFC8B4;margin-top:5px}
.mastnav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:thin;padding-right:8px}
.mastnav a{color:#F4F1E8;text-decoration:none;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 12px;border-radius:8px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.mastnav a:focus,.mastnav a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mastnav a:active{transform:scale(.97)}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border:2px solid var(--ink);border-radius:999px;padding:12px 22px;min-height:48px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform 180ms cubic-bezier(.22,1,.36,1),box-shadow 180ms cubic-bezier(.22,1,.36,1),background 180ms,color 180ms}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn--accent{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.btn--ink{background:#F4F1E8;color:var(--ink);border-color:#F4F1E8;box-shadow:3px 3px 0 rgba(233,180,76,.9)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:none}
.btn--small{min-height:44px;padding:9px 16px;font-size:12px}
.masthead .btn--ink{min-height:44px}

/* ---------- desk hero ---------- */
.desk{max-width:1240px;margin:0 auto;padding:64px 22px 56px;display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:2px solid var(--line);border-top:none;background:var(--surface);position:relative;overflow:clip}
.desk__main{padding:28px 36px 36px 14px}
.kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:0 0 14px}
.kicker--light{color:#CFC8B4}
.desk h1{font-family:var(--font-display);font-weight:700;font-size:clamp(52px,7.2vw,104px);line-height:.98;letter-spacing:-.03em;margin:0 0 18px;animation:settle 600ms cubic-bezier(.22,1,.36,1) both}
.desk h1 em{font-style:normal;color:var(--accent);position:relative}
.desk h1 em::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:10px;background:var(--amber);z-index:-1;transform:rotate(-.6deg)}
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lede{font-size:18px;line-height:1.62;max-width:56ch;margin:0 0 24px;color:var(--ink-soft)}
.desk__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.how{background:var(--surface-2);border:2px dashed var(--ink);border-radius:var(--radius);padding:16px 20px;margin:0 0 22px;max-width:62ch}
.how ol{margin:0;padding-left:22px}
.how li{margin:6px 0}
.how li::marker{font-family:var(--font-mono);font-weight:600}
.desk__meta{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--line);border-radius:12px;overflow:hidden;margin:0;max-width:560px}
.desk__meta div{padding:12px 16px;border-left:2px solid var(--line)}
.desk__meta div:first-child{border-left:none}
.desk__meta dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.desk__meta dd{margin:2px 0 0;font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-.02em}

/* inverted ledger tile — bleeds off top & right of the grid */
.desk__ledger{background:var(--ink);color:#F4F1E8;margin:-64px -22px -56px 0;padding:76px 34px 34px;position:relative;border-left:2px solid var(--line);overflow:clip}
.desk__ledger::before{content:"SORTED";position:absolute;right:-38px;top:120px;transform:rotate(90deg);font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.5em;color:rgba(244,241,232,.4)}
.ledger__rings{position:absolute;top:18px;right:30px;width:120px;height:120px;animation:orbit 24s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.ledger__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 6px}
.ledger__giant{display:flex;align-items:flex-end;gap:14px;margin:0 0 16px;font-family:var(--font-display);font-weight:700;font-size:clamp(84px,7vw,120px);line-height:.9;letter-spacing:-.04em}
.ledger__giant-sub{font-size:15px;line-height:1.3;letter-spacing:0;font-weight:400;color:#CFC8B4;padding-bottom:12px}
.ledger__table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:13px;margin-bottom:14px}
.ledger__table td{padding:9px 4px;border-top:1px solid rgba(244,241,232,.25)}
.ledger__table tr:first-child td{border-top:2px solid #F4F1E8}
.ledger__table td:last-child{text-align:right;font-weight:600}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;vertical-align:baseline}
.dot--todo{background:#CFC8B4}.dot--in-progress{background:var(--amber)}.dot--blocked{background:#E4572E}.dot--done{background:#3ECF8E}
.ledger__spark{width:100%;height:44px;display:block;margin:4px 0 10px}
.ledger__foot{font-size:14px;color:#CFC8B4;margin:0}
.ledger__foot strong{color:#F4F1E8}

/* ---------- rack ---------- */
.rack{max-width:1240px;margin:26px auto 0;padding:0 22px}
.rack__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.rack h2,.ledgerwrap__head h2,.rail h2{font-family:var(--font-display);font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;margin:0}
.rack__head p{margin:0;color:var(--muted);font-size:15px}
.rack__slots{display:grid;grid-template-columns:repeat(5,1fr);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-top:14px}
.slot{font:inherit;background:transparent;border:none;border-left:2px solid var(--line);padding:14px 12px;min-height:76px;cursor:pointer;text-align:left;display:grid;gap:2px;transition:background 180ms cubic-bezier(.22,1,.36,1),transform 180ms}
.slot:first-child{border-left:none}
.slot small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.slot strong{font-family:var(--font-display);font-size:19px;letter-spacing:-.01em}
.slot .n{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.slot:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.slot:active{transform:scale(.97)}
.slot[aria-pressed="true"]{background:var(--ink);color:#F4F1E8}
.slot[aria-pressed="true"] small,.slot[aria-pressed="true"] .n{color:var(--amber)}

/* ---------- workspace ---------- */
.workspace{max-width:1240px;margin:26px auto 0;padding:0 22px 8px;display:grid;grid-template-columns:290px 1fr;gap:26px;align-items:start}
.rail{background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);padding:22px 20px;position:sticky;top:118px;display:grid;gap:20px}
.rail h2{font-size:22px}
.field{display:grid;gap:8px}
.field label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.field input,.field select{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px;width:100%}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:2px}
.hint{margin:0;font-size:13.5px;color:var(--muted)}
.rail__card{border-top:2px solid var(--line);padding-top:16px}
.rail__card h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
.rail__card p{margin:0 0 10px;font-size:15px;color:var(--ink-soft)}
.rail__link{color:var(--accent);font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.rail__link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rail__link:active{transform:scale(.97)}

.ledgerwrap__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.ledgerwrap__sub{margin:0;color:var(--muted);font-size:14.5px}
.ledger{list-style:none;margin:0;padding:0;border:2px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.row{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:16px 18px;border-top:2px solid var(--line);position:relative;transition:background 170ms cubic-bezier(.22,1,.36,1)}
.row:first-child{border-top:none}
.row:nth-child(odd){background:rgba(28,26,21,.022)}
.row__num{font-family:var(--font-mono);font-size:12px;color:var(--muted);font-weight:600}
.row__num b{display:block;font-family:var(--font-display);font-size:22px;color:var(--ink);letter-spacing:-.02em}
.row__title{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0 0 6px}
.row__title a{color:inherit;text-decoration:none}
.row__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--ink-soft)}
.row__meta .mono{font-family:var(--font-mono);font-size:12px}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:4px 11px;min-height:28px;background:#fff}
.pill--todo{background:#EFEAD9}
.pill--in-progress{background:#F6D98B;border-color:#8a6d1c}
.pill--blocked{background:#F6C9B8;border-color:var(--signal);color:#7E2410}
.pill--done{background:#C4EAD6;border-color:var(--accent);color:#0A4A37}
.row__open{justify-self:end}
.btn-open{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#F4F1E8;border:2px solid var(--ink);border-radius:999px;padding:11px 20px;min-height:44px;min-width:96px;cursor:pointer;transition:transform 170ms cubic-bezier(.22,1,.36,1),background 170ms,color 170ms}
.btn-open:active{transform:scale(.97)}
.btn-open:focus-visible,.row__title a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- empty ---------- */
.empty{border:2px dashed var(--ink);border-radius:var(--radius);background:var(--surface);padding:56px 32px;text-align:center;margin-top:14px}
.empty__stamp{display:inline-block;font-family:var(--font-display);font-weight:700;letter-spacing:.18em;border:3px solid var(--signal);color:var(--signal);border-radius:8px;padding:8px 18px;transform:rotate(-4deg);margin:0 0 16px}
.empty h2{font-family:var(--font-display);font-size:30px;margin:0 0 8px;letter-spacing:-.02em}
.empty p{color:var(--ink-soft);max-width:52ch;margin:0 auto 20px}

/* ---------- desk notes ---------- */
.desknotes{max-width:1240px;margin:56px auto 0;padding:48px 22px;display:grid;grid-template-columns:1fr 1fr;gap:26px;background:var(--ink);color:#F4F1E8;border-radius:18px;position:relative;overflow:clip}
.desknotes::after{content:"03";position:absolute;right:6px;bottom:-58px;font-family:var(--font-display);font-weight:700;font-size:220px;line-height:1;color:rgba(244,241,232,.07);pointer-events:none}
.desknotes__card h2{font-family:var(--font-display);font-size:clamp(30px,3.6vw,46px);letter-spacing:-.025em;line-height:1.05;margin:0 0 16px}
.desknotes__card ol{margin:0;padding-left:22px;display:grid;gap:10px;color:#E7E0CD}
.desknotes__card li::marker{color:var(--amber);font-family:var(--font-mono);font-weight:600}
.desknotes__team h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:4px 0 12px}
.desknotes__team ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.desknotes__team li{display:flex;align-items:center;gap:12px;padding:9px 4px;border-top:1px solid rgba(244,241,232,.2);font-weight:600}
.desknotes__team li span:last-child{margin-left:auto;font-weight:400;color:#CFC8B4;font-size:13.5px}
.avatar{width:38px;height:38px;flex:none;border-radius:50%;background:var(--amber);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600}

/* ---------- footer ---------- */
.colophon{max-width:1240px;margin:26px auto 60px;padding:26px 22px 0;display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:2px solid var(--line)}
.colophon p{margin:0;font-size:14px;color:var(--muted);max-width:70ch}

/* ---------- detail sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(28,26,21,.55);z-index:90}
.sheet{position:fixed;inset:0;z-index:100;display:flex;justify-content:flex-end;align-items:stretch;padding:18px}
.sheet[hidden]{display:none}
.sheet__inner{background:var(--surface);border:2px solid var(--line);border-radius:16px;max-width:620px;width:100%;margin-left:auto;overflow-y:auto;padding:30px 30px 24px;position:relative;box-shadow:10px 10px 0 rgba(28,26,21,.85);animation:slidein 260ms cubic-bezier(.22,1,.36,1)}
@keyframes slidein{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.sheet__perf{position:absolute}
.sheet__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.sheet__top .kicker{margin:0}
#detail-title{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);line-height:1.04;letter-spacing:-.025em;margin:6px 0 10px;padding-right:120px}
.sheet__summary{font-size:17px;color:var(--ink-soft);margin:0 0 14px;max-width:60ch}
.sheet__meta{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:15px}
.sheet__meta th,.sheet__meta td{text-align:left;padding:9px 6px;border-top:1px solid var(--hair);vertical-align:top}
.sheet__meta tr:first-child th,.sheet__meta tr:first-child td{border-top:2px solid var(--line)}
.sheet__meta th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:130px;font-weight:600}
.field--status{background:var(--surface-2);border:2px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.sheet__feedback{min-height:28px;margin:0 0 6px;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--accent)}
.sheet__body{border-top:2px solid var(--line);padding-top:14px;font-size:16.5px;color:var(--ink-soft);max-width:64ch}
.sheet__body p{margin:0 0 12px}
.sheet__body strong{color:var(--ink)}
.sheet__foot{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.stamp{position:absolute;top:64px;right:26px;transform:rotate(8deg);border:3px solid var(--accent);color:var(--accent);border-radius:8px;padding:7px 14px;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.14em;pointer-events:none;background:rgba(251,250,245,.7)}
.stamp--slam{animation:slam 320ms cubic-bezier(.34,1.56,.64,1)}
@keyframes slam{0%{transform:rotate(8deg) scale(1.7);opacity:0}60%{transform:rotate(4deg) scale(.94);opacity:1}100%{transform:rotate(8deg) scale(1)}}
.stamp.is-blocked{border-color:var(--signal);color:var(--signal)}
.stamp.is-done{border-color:var(--accent)}
.stamp.is-progress{border-color:#8a6d1c;color:#6d5613}
.stamp.is-todo{border-color:var(--muted);color:var(--muted)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#F4F1E8;font-family:var(--font-mono);font-size:13px;padding:13px 22px;border-radius:999px;z-index:120;border:2px solid var(--amber);box-shadow:4px 4px 0 rgba(28,26,21,.4);max-width:min(92vw,560px);text-align:center}
.toast[hidden]{display:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .desk{grid-template-columns:1fr}
  .desk__ledger{margin:0 -22px -56px;border-left:none;border-top:2px solid var(--line)}
  .workspace{grid-template-columns:1fr}
  .rail{position:static}
  .desknotes{grid-template-columns:1fr}
  .rack__slots{grid-template-columns:repeat(2,1fr)}
  .slot{border-top:2px solid var(--line)}
  .slot:nth-child(odd){border-left:none}
  .slot:nth-child(-n+2){border-top:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .masthead__bar{flex-wrap:wrap;padding:10px 14px}
  .mastnav{order:3;flex-basis:100%;padding-bottom:2px}
  .desk{padding:44px 20px 40px}
  .desk__main{padding:8px 2px 24px}
  .desk__ledger{margin:0 -20px -40px;padding:52px 24px 26px}
  .row{grid-template-columns:1fr;gap:8px}
  .row__num b{display:inline;margin-left:8px}
  .row__open{justify-self:stretch}
  .btn-open{width:100%}
  .sheet{padding:10px}
  #detail-title{padding-right:0}
  .stamp{position:static;display:inline-block;margin:4px 0 8px;transform:rotate(-2deg)}
  .rack,.workspace,.desknotes{padding-left:20px;padding-right:20px}
  .rack__slots{grid-template-columns:1fr 1fr}
}

/* ---------- interaction states ---------- */
@media (hover:hover) and (pointer:fine){
  .btn--accent:hover{transform:translateY(-2px);box-shadow:6px 6px 0 var(--ink)}
  .btn--ink:hover{transform:translateY(-2px)}
  .btn--ghost:hover{background:var(--ink);color:#F4F1E8}
  .mastnav a:hover{background:rgba(244,241,232,.14)}
  .slot:hover{background:#E7E1CE}
  .slot[aria-pressed="true"]:hover{background:var(--ink)}
  .row:hover{background:#EFEAD9}
  .btn-open:hover{background:var(--accent);border-color:var(--accent)}
  .rail__link:hover{text-decoration:underline}
  .row__title a:hover{text-decoration:underline}
  .desknotes__team li:hover{background:rgba(244,241,232,.06)}
  .empty .btn--accent:hover{transform:translateY(-2px)}
  #detail-title:hover{cursor:default}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .masthead__ticker span{animation:none}
}