@font-face{
  font-family:"Oswald"; src:url("assets/oswald.ttf") format("truetype");
  font-weight:400 700; font-display:swap;
}
@font-face{
  font-family:"Work Sans"; src:url("assets/work-sans.ttf") format("truetype");
  font-weight:400 700; font-display:swap;
}
@font-face{
  font-family:"DM Serif"; src:url("assets/dm-serif.ttf") format("truetype");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Plex Mono"; src:url("assets/ibm-plex-mono.ttf") format("truetype");
  font-weight:400 600; font-display:swap;
}

:root{
  --bg:#FFF8E7;
  --surface:#FFFDF4;
  --ink:#141414;
  --muted:#5c5647;
  --accent:#FF4911;
  --accent-ink:#141414;
  --blue:#2436FF;
  --paper-line:#141414;
  --ok:#0a7b4e;
  --radius:14px;
  --shadow:7px 7px 0 #141414;
  --shadow-sm:4px 4px 0 #141414;
  --font-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --font-body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"DM Serif",Georgia,serif;
  --font-mono:"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.6;
  background-image:radial-gradient(#14141414 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
.mono{font-family:var(--font-mono)}
.container{max-width:1180px; margin-inline:auto; padding-inline:clamp(20px,4vw,44px)}
a{color:inherit}
:focus{outline:3px solid var(--blue); outline-offset:2px}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px}

.skip{position:absolute; left:12px; top:-60px; z-index:99; background:var(--ink); color:#fff; padding:12px 18px; border-radius:8px; font-weight:700; transition:transform .18s cubic-bezier(.22,1,.36,1)}
.skip:focus{top:12px}

/* ---------- masthead / hero ---------- */
.masthead{border-bottom:3px solid var(--ink); background:var(--bg)}
.edition{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding-block:12px; border-bottom:3px solid var(--ink)}
.edition__right{display:flex; align-items:center; gap:8px}
.dot{width:10px; height:10px; border-radius:50%; background:#1f9d55; border:2px solid var(--ink); display:inline-block; animation:blink 2.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,64px); padding-block:clamp(36px,5vw,72px) clamp(28px,4vw,52px); align-items:start}
.kicker{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px}
.kicker__tag{display:inline-block; background:var(--ink); color:var(--bg); padding:4px 10px; margin-right:10px; transform:rotate(-2deg); font-weight:600}
.hero__title{font-family:var(--font-display); font-weight:700; text-transform:uppercase; line-height:.92; letter-spacing:-.01em;
  font-size:clamp(64px,9.5vw,148px); margin:0 0 18px}
.hero__title--stroke{color:transparent; -webkit-text-stroke:3px var(--ink)}
.hero__lede{font-family:var(--font-serif); font-size:clamp(18px,2vw,22px); line-height:1.5; max-width:44ch; margin:0 0 24px}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 22px;
  font-weight:800; font-size:16px; text-decoration:none; cursor:pointer; border:3px solid var(--ink); border-radius:999px;
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s cubic-bezier(.22,1,.36,1), background-color .16s}
.btn--primary{background:var(--accent); color:#141414; box-shadow:var(--shadow-sm)}
.btn--ghost{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.btn--small{min-height:44px; padding:10px 18px; font-size:15px}
.btn:active{transform:scale(.97)}
.btn-open:active{transform:scale(.97)}
.count:active{transform:scale(.96)}
.sheet__close:active{transform:scale(.96)}
.footer__top:active{transform:scale(.97)}
.hero__stats{display:grid; grid-template-columns:repeat(3,1fr); border:3px solid var(--ink); background:var(--surface); box-shadow:var(--shadow-sm); border-radius:var(--radius); overflow:hidden; margin:0}
.stat{padding:14px 16px; text-align:left}
.stat + .stat{border-left:3px solid var(--ink)}
.stat dt{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.stat dd{margin:2px 0 0; font-family:var(--font-display); font-size:38px; line-height:1}

/* wallplate */
.hero__side{position:relative; display:flex; gap:14px; align-items:stretch}
.vertical{writing-mode:vertical-rl; font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; margin:0; padding-top:6px}
.wallplate{flex:1; background:var(--ink); color:var(--bg); border:3px solid var(--ink); border-radius:18px; padding:18px; box-shadow:8px 8px 0 var(--accent); position:relative; overflow:clip; animation:drop .5s cubic-bezier(.22,1,.36,1) both}
@keyframes drop{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.wallplate__head{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; border-bottom:2px dashed #ffffff55; padding-bottom:10px; margin-bottom:12px}
.wallplate__slots{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px}
.slot{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; border:2px solid var(--bg); border-radius:10px; padding:10px 12px; font-weight:700}
.slot__code{display:grid; place-items:center; width:30px; height:30px; border:2px solid currentColor; border-radius:50%; font-family:var(--font-mono); font-size:14px}
.slot__count{font-family:var(--font-display); font-size:26px}
.slot--todo{background:#FFF8E7; color:#141414}
.slot--prog{background:var(--blue); color:#fff}
.slot--block{background:var(--accent); color:#141414}
.slot--done{background:#1f9d55; color:#fff}
.wallplate__foot{font-family:var(--font-mono); font-size:12px; color:#e9e2cf; margin:10px 0 0}
.stamp{position:absolute; top:64px; right:-8px; width:112px; height:112px; transform:rotate(12deg); transition:transform .2s cubic-bezier(.22,1,.36,1)}
.stamp__ring{width:100%; height:100%; animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stamp__text{font-family:var(--font-mono); font-size:12.5px; letter-spacing:2px; fill:#FFF8E7}
.stamp__core{position:absolute; inset:0; display:grid; place-content:center; text-align:center; font-family:var(--font-display); font-size:19px; line-height:1; color:#FFF8E7}

/* ticker */
.ticker{border-top:3px solid var(--ink); background:var(--ink); color:var(--bg); overflow:clip; white-space:nowrap}
.ticker__track{display:inline-flex; padding:10px 0; font-family:var(--font-display); font-size:18px; letter-spacing:.04em; text-transform:uppercase; animation:tick 30s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
main{display:block}
.inbox{padding-block:64px 32px}
.section-head{max-width:760px; margin-bottom:28px}
.folio{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; background:var(--blue); color:#fff; display:inline-block; padding:5px 12px; border:2px solid var(--ink); border-radius:999px; margin:0 0 12px; box-shadow:3px 3px 0 var(--ink)}
.section-head h2{font-family:var(--font-display); font-size:clamp(34px,4.6vw,58px); text-transform:uppercase; line-height:1; margin:0 0 10px; letter-spacing:-.01em}
.section-sub{margin:0; color:#3d3a30; font-size:17px; max-width:62ch}

.workgrid{display:grid; grid-template-columns:310px 1fr; gap:24px; align-items:start}
.rail{display:grid; gap:16px; position:sticky; top:16px}
.rail__card{background:var(--surface); border:3px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.field{display:grid; gap:8px; margin-bottom:14px}
.field label{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600}
.field input,.field select{font-size:16px; font-family:var(--font-body); color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:10px; padding:12px 14px; min-height:48px; width:100%}
.field input:focus,.field select:focus{outline:3px solid var(--blue); outline-offset:2px}
.rail__counts{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px}
.count{font-family:var(--font-mono); font-size:12.5px; border:2px solid var(--ink); background:#fff; border-radius:999px; padding:8px 12px; min-height:44px; cursor:pointer; transition:transform .15s cubic-bezier(.22,1,.36,1), background-color .15s}
.count b{background:var(--ink); color:#fff; border-radius:999px; padding:1px 8px; margin-left:6px}
.count.is-active{background:var(--ink); color:#fff}
.count.is-active b{background:var(--accent); color:#141414}
.rail__note{font-size:14px; color:var(--muted); margin:0 0 12px}
.rail__team h3{font-family:var(--font-display); text-transform:uppercase; font-size:22px; margin:0 0 10px}
.team{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:15px; font-weight:600}
.team li{display:flex; align-items:center; gap:10px}
.team__n{margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--muted); font-weight:400}
.ava{width:34px; height:34px; border-radius:50%; display:inline-grid; place-items:center; font-family:var(--font-mono); font-size:12px; font-weight:600; border:2px solid var(--ink); flex:none}
.ava--1{background:#FFD166}.ava--2{background:#2EC4B6}.ava--3{background:#FF8FAB}.ava--4{background:#B8FF2E}.ava--5{background:#CBB9F6}.ava--6{background:#FFB000}

/* tray list */
.listmeta{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px; background:var(--ink); color:var(--bg); display:inline-block; padding:7px 14px; border-radius:999px}
.tray{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.slip{background:var(--surface); border:3px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:0; overflow:clip; transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1)}
.slip__top{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:3px solid var(--ink); font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.slip__id{color:var(--muted)}
.slip__prio{margin-left:auto; border:2px solid var(--ink); border-radius:999px; padding:2px 10px; font-weight:600}
.slip__prio--high{background:var(--accent)}
.slip__prio--medium{background:#FFD166}
.slip__prio--low{background:#fff}
.slip__main{padding:16px 16px 14px}
.slip__title{font-family:var(--font-display); font-size:clamp(21px,2.4vw,27px); line-height:1.08; text-transform:uppercase; margin:0 0 8px; letter-spacing:.005em}
.slip__sum{margin:0 0 12px; color:#33302a; font-size:15.5px}
.slip__tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.tag{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; border:2px solid var(--ink); padding:3px 10px; border-radius:999px; background:#fff}
.tag--status-todo{background:#fff}
.tag--status-in-progress{background:var(--blue); color:#fff}
.tag--status-blocked{background:var(--accent)}
.tag--status-done{background:#1f9d55; color:#fff}
.slip__foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; font-size:14px; color:#3d3a30}
.slip__who{display:flex; align-items:center; gap:8px; font-weight:700}
.slip__open{margin-left:auto}
.btn-open{font-weight:800; font-size:15px; min-height:44px; padding:10px 18px; border:3px solid var(--ink); border-radius:999px; background:var(--ink); color:#fff; cursor:pointer; box-shadow:3px 3px 0 var(--accent); transition:transform .15s cubic-bezier(.22,1,.36,1), box-shadow .15s}
.slip--done{opacity:.92}
.slip--done .slip__title{text-decoration:line-through; text-decoration-thickness:3px; text-decoration-color:var(--accent)}

/* empty */
.empty{border:3px dashed var(--ink); border-radius:18px; background:#fff; padding:48px 28px; text-align:center; box-shadow:var(--shadow-sm)}
.empty__big{font-family:var(--font-display); font-size:clamp(34px,5vw,54px); text-transform:uppercase; margin:0 0 8px; line-height:1}
.empty__sub{margin:0 0 20px; color:var(--muted)}

/* guide */
.guide{padding-block:40px 72px}
.ledger{list-style:none; margin:0; padding:0; border:3px solid var(--ink); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
.ledger__row{display:grid; grid-template-columns:80px 1fr 60px; gap:18px; align-items:center; padding:22px 24px}
.ledger__row + .ledger__row{border-top:3px solid var(--ink)}
.ledger__row:nth-child(2){background:var(--ink); color:var(--bg)}
.ledger__row:nth-child(2) p{color:#d9d3bf}
.ledger__no{font-family:var(--font-display); font-size:40px; line-height:1}
.ledger__row h3{font-family:var(--font-display); text-transform:uppercase; margin:0 0 4px; font-size:22px}
.ledger__row p{margin:0; font-size:15.5px}
.ledger__mark{font-size:30px; text-align:right}

/* footer */
.footer{border-top:3px solid var(--ink); background:var(--ink); color:var(--bg); padding-block:28px}
.footer__in{display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center}
.footer__brand{font-family:var(--font-display); font-size:24px; text-transform:uppercase; margin:0}
.footer__brand span{font-family:var(--font-body); font-size:14px; text-transform:none; color:#cfc8b2}
.footer__fine{margin:0; font-size:13.5px; color:#cfc8b2; max-width:52ch}
.footer__top{margin-left:auto; color:var(--ink); background:var(--bg); border-radius:999px; padding:10px 18px; min-height:44px; display:inline-flex; align-items:center; font-weight:800; text-decoration:none; border:3px solid var(--bg)}

/* dialog sheet */
.sheet{border:none; padding:0; background:transparent; width:min(640px, calc(100vw - 32px))}
.sheet::backdrop{background:rgba(20,20,20,.62)}
.sheet__paper{background:var(--surface); border:3px solid var(--ink); border-radius:20px; box-shadow:10px 10px 0 var(--accent); padding:22px clamp(18px,4vw,32px) 26px; background-image:linear-gradient(#14141422 1px, transparent 1px); background-size:100% 30px}
.sheet__top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.sheet__id{margin:0; font-size:12px; letter-spacing:.12em}
.sticker{font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; border:2px solid var(--ink); border-radius:999px; padding:4px 12px; background:#FFD166; transform:rotate(-3deg); font-weight:600}
.sticker[data-s="in-progress"]{background:var(--blue); color:#fff}
.sticker[data-s="blocked"]{background:var(--accent)}
.sticker[data-s="done"]{background:#1f9d55; color:#fff}
.sheet__close{margin-left:auto; min-height:44px; border:3px solid var(--ink); background:#fff; border-radius:999px; padding:8px 16px; font-weight:800; cursor:pointer; box-shadow:3px 3px 0 var(--ink)}
.sheet__title{font-family:var(--font-display); font-size:clamp(28px,4.6vw,44px); line-height:1.02; text-transform:uppercase; margin:0 0 12px}
.sheet__meta{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px; margin:0 0 14px; padding:14px 16px; border:3px solid var(--ink); border-radius:12px; background:#fff; font-size:14.5px}
.sheet__meta div{display:grid; gap:2px}
.sheet__meta dt{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.sheet__meta dd{margin:0; font-weight:700}
.sheet__body{font-size:16px; background:#fff; border:3px solid var(--ink); border-radius:12px; padding:16px 18px; margin-bottom:16px; white-space:pre-line}
.sheet__stampbox{display:flex; flex-wrap:wrap; gap:12px; align-items:end; border:3px solid var(--ink); border-radius:12px; padding:14px 16px; background:var(--ink); color:var(--bg)}
.field--inline{margin:0; flex:1 1 220px}
.field--inline label{color:var(--bg)}
.sheet__saved{margin:0; font-size:13px; color:#B8FF2E; min-height:20px}
.sheet__foot{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}

/* toast */
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) rotate(-1deg); background:var(--ink); color:#fff; border:3px solid #fff; outline:3px solid var(--ink); padding:12px 20px; border-radius:999px; font-weight:700; z-index:60; box-shadow:5px 5px 0 var(--accent); max-width:min(92vw,560px); text-align:center}

/* hover / active / focus per-context */
.slip__open:focus-visible, .btn:focus-visible, .count:focus-visible, .sheet__close:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.footer__top:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.slip:active{transform:scale(.995)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__side{max-width:520px}
  .stamp{top:54px}
  .workgrid{grid-template-columns:1fr}
  .rail{position:static}
  .ledger__row{grid-template-columns:56px 1fr 40px; padding:18px}
}
@media (max-width:480px){
  body{font-size:16px}
  .hero__title{font-size:clamp(56px,17vw,84px)}
  .sheet__meta{grid-template-columns:1fr}
  .slip__open{margin-left:0; width:100%}
  .btn-open{width:100%}
  .vertical{display:none}
  .hero__stats{grid-template-columns:repeat(3,1fr)}
  .stat dd{font-size:30px}
}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)}
  .btn--ghost:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--accent)}
  .btn-open:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--accent)}
  .count:hover{background:#FFE9C7; transform:translateY(-2px)}
  .count.is-active:hover{background:var(--ink)}
  .slip:hover{transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink)}
  .ledger__row:hover{background:#FFEFD2}
  .ledger__row:nth-child(2):hover{background:#000}
  .stamp:hover{transform:rotate(4deg) scale(1.04)}
  .slot:hover{transform:translateY(-2px)}
  .sheet__close:hover{background:var(--accent); transform:translateY(-2px)}
  .footer__top:hover{background:var(--accent); border-color:var(--accent)}
  .tag:hover{transform:translateY(-1px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}