@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:"Plex Mono"; src:url("assets/ibm-plex-mono.ttf") format("truetype");
  font-weight:400 600; font-display:swap;
}
:root{
  --night:#161E29; --night2:#223044; --night3:#2C3E55;
  --wood:#6E4525; --wood2:#8A5A33; --woodlight:#C89A5E;
  --parch:#F5E7C9; --parch2:#EFDDB4; --ink:#241A10;
  --seed:#EFC65C; --berry:#D9483B; --teal:#2E9E8B; --moss:#7A9E43; --sky:#9DB8D2;
  --hole:#0F151F;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--night); color:var(--parch);
  font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.55; font-size:16px;
}
/* wood plank backdrop */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 3px, transparent 3px 118px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 26px),
    linear-gradient(180deg,#1B2534 0%, #161E29 34%, #141A25 100%);
}
::selection{background:var(--seed); color:#241A10}
:focus-visible{outline:3px solid var(--seed); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:12px; top:-60px; background:var(--seed); color:#241A10; padding:.6rem 1rem; border-radius:10px; z-index:99; font-weight:700; text-decoration:none; transition:top .15s}
.skip:focus{top:12px}

/* ---------- masthead ---------- */
.masthead{position:relative; overflow:hidden; border-bottom:4px solid var(--wood2);
  background:linear-gradient(180deg,#1D2A3E 0%, #16202F 70%);}
.sky{position:absolute; inset:0; pointer-events:none; color:#5E728C}
.star{position:absolute; width:4px; height:4px; border-radius:50%; background:#E8D9B8; opacity:.5}
.s1{left:8%; top:22%}.s2{left:22%; top:12%}.s3{left:47%; top:18%}.s4{left:66%; top:10%}.s5{left:82%; top:26%}.s6{left:93%; top:12%}
.flyer{position:absolute; color:var(--seed); opacity:.7; font-size:14px}
.f1{left:30%; top:30%}.f2{left:74%; top:44%}
.sky-bird{position:absolute; width:56px; opacity:.5}
.b1{left:56%; top:20px}.b2{left:12%; top:52px; width:38px; opacity:.35}
body.chorus-on .sky-bird{animation:drift 9s ease-in-out infinite alternate}
body.chorus-on .b2{animation-delay:-4s}
body.chorus-on .star{animation:twinkle 2.6s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(26px)}}
@keyframes twinkle{from{opacity:.25}to{opacity:.85}}
.mast-inner{position:relative; max-width:1120px; margin:0 auto; padding:2.6rem 1.25rem 1.4rem;
  display:flex; gap:2rem; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
.brand{display:flex; gap:1.1rem; align-items:flex-start; max-width:640px}
.brand-mark{flex:none; filter:drop-shadow(0 6px 0 rgba(0,0,0,.35)); transform:rotate(-4deg)}
.brand-kicker{margin:.2rem 0 .3rem; font-family:"Plex Mono",monospace; font-size:.8rem; color:var(--sky)}
.brand-name{font-family:"Oswald",sans-serif; font-size:clamp(3rem,7vw,4.6rem); line-height:.95; margin:0; letter-spacing:.01em; color:var(--parch); text-transform:none}
.brand-sub{margin:.6rem 0 0; max-width:44ch; color:#D8C9A8; font-size:1rem}
.loft-tally{display:flex; gap:0; margin:0; background:var(--parch); color:var(--ink); border-radius:12px; overflow:hidden; border:3px solid #0C1119; box-shadow:0 8px 0 rgba(0,0,0,.35)}
.loft-tally div{padding:.7rem 1.1rem; text-align:center; min-width:86px}
.loft-tally div+div{border-left:2px dashed #8A5A33}
.loft-tally dt{font-size:.78rem; color:#6B5636}
.loft-tally dd{margin:0; font-family:"Oswald",sans-serif; font-size:1.7rem; line-height:1}
.mast-nav{position:relative; max-width:1120px; margin:0 auto; padding:0 1.25rem 1.2rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.mast-nav a{color:var(--parch); text-decoration:none; border:2px solid var(--woodlight); padding:.4rem .9rem; border-radius:999px; font-size:.92rem}
.mast-nav a:hover{background:var(--woodlight); color:#1c130a}
#chorusBtn{background:transparent; color:var(--seed); border:2px dashed var(--seed); border-radius:999px; padding:.4rem .9rem; font:inherit; font-size:.92rem; cursor:pointer}
#chorusBtn[aria-pressed="true"]{background:var(--seed); color:#241A10; border-style:solid}

/* ---------- perch rail ---------- */
.perch-rail{position:sticky; top:0; z-index:20; background:rgba(20,26,37,.92); backdrop-filter:blur(6px); border-bottom:3px solid var(--wood2)}
.rail-inner{max-width:1120px; margin:0 auto; padding:.85rem 1.25rem; display:grid; gap:.7rem; grid-template-columns:1.2fr .9fr auto; align-items:end}
.field label{display:block; font-family:"Plex Mono",monospace; font-size:.8rem; color:var(--seed); margin-bottom:.3rem}
.field input,.field select{width:100%; font:inherit; padding:.65rem .8rem; border-radius:10px; border:3px solid #0C1119; background:var(--parch); color:var(--ink)}
.field input::placeholder{color:#8a7550}
.ledger{display:flex; gap:.45rem; margin:0}
.ledger button{font:inherit; cursor:pointer; background:var(--night3); color:var(--parch); border:2px solid var(--woodlight); border-radius:12px; padding:.35rem .7rem; display:flex; flex-direction:column; align-items:center; min-width:74px; line-height:1.2}
.ledger button b{font-family:"Oswald",sans-serif; font-size:1.35rem}
.ledger button span{font-size:.74rem; color:var(--sky)}
.ledger button[aria-current="true"]{background:var(--seed); color:#241A10; border-color:var(--seed)}
.ledger button[aria-current="true"] span{color:#4a3a18}

/* ---------- coop wall ---------- */
.coop-wrap{max-width:1120px; margin:0 auto; padding:1.4rem 1.25rem 2rem}
.coop-note{font-family:"Plex Mono",monospace; color:var(--sky); font-size:.86rem; margin:.2rem 0 1rem}
.cubby-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.cubby{
  position:relative; border-radius:var(--radius); padding:.9rem .9rem 1rem;
  background:linear-gradient(180deg,var(--wood2),var(--wood));
  border:3px solid #3D2712; box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 10px 0 rgba(0,0,0,.35);
}
.cubby:nth-child(3n+1){transform:rotate(-.5deg)}
.cubby:nth-child(3n+2){transform:rotate(.4deg)}
.cubby-hole{background:var(--hole); border-radius:10px; border:3px solid #2A1B0C; box-shadow:inset 0 10px 22px rgba(0,0,0,.8); padding:.8rem .8rem .7rem; position:relative}
.capsule{display:flex; align-items:center; gap:.55rem; margin-bottom:.55rem}
.capsule-art{flex:none; width:64px; height:30px; border-radius:999px; position:relative;
  background:linear-gradient(180deg,#E9D9B4,#C9B384); border:2px solid #0C1119; box-shadow:0 3px 0 rgba(0,0,0,.5)}
.capsule-art::before{content:""; position:absolute; left:8px; top:4px; bottom:4px; width:10px; border-radius:6px; background:var(--cap,var(--seed)); border:2px solid rgba(0,0,0,.55)}
.capsule-art::after{content:""; position:absolute; right:7px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#0F151F}
.cubby[data-status="todo"]{--cap:var(--seed)}
.cubby[data-status="in-progress"]{--cap:var(--teal)}
.cubby[data-status="blocked"]{--cap:var(--berry)}
.cubby[data-status="done"]{--cap:var(--moss)}
.serial{font-family:"Plex Mono",monospace; font-size:.72rem; color:#C9B384}
.cubby h3{margin:.1rem 0 .35rem; font-size:1.06rem; line-height:1.3; color:#F7EDD6; font-weight:700; max-width:32ch}
.cubby .meta{margin:0 0 .5rem; font-size:.84rem; color:#B9C4CE; display:flex; flex-wrap:wrap; gap:.3rem .7rem}
.band{display:inline-block; font-family:"Plex Mono",monospace; font-size:.72rem; padding:.15rem .55rem; border-radius:999px; border:2px solid #0C1119; color:#1c130a; background:var(--cap,var(--seed))}
.sum{margin:.2rem 0 .8rem; font-size:.9rem; color:#D8C9A8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.open-btn{font:inherit; font-weight:700; cursor:pointer; width:100%; padding:.6rem .8rem; border-radius:10px; border:3px solid #0C1119; background:var(--parch); color:var(--ink)}
.open-btn:hover{background:var(--seed)}
body.chorus-on .capsule-art{animation:bob 2.4s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateX(0)}to{transform:translateX(7px)}}

/* empty */
.empty{background:var(--parch); color:var(--ink); border-radius:16px; border:3px solid #0C1119; padding:2rem 1.5rem; text-align:center; box-shadow:0 10px 0 rgba(0,0,0,.35)}
.empty-title{font-family:"Oswald",sans-serif; font-size:1.6rem; margin:0 0 .4rem}
.empty-sub{margin:0 0 1rem; color:#5c4a2e}
.empty button{font:inherit; font-weight:700; cursor:pointer; background:#241A10; color:var(--parch); border:none; border-radius:999px; padding:.65rem 1.2rem}
.empty button:hover{background:#3a2c18}

/* ---------- detail scroll ---------- */
.veil{position:fixed; inset:0; background:rgba(8,12,18,.66); z-index:40}
.veil[hidden]{display:none}
.scroll-sheet{
  position:fixed; z-index:50; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(640px, calc(100vw - 2rem)); max-height:min(88vh, 900px); overflow:auto;
  background:linear-gradient(180deg,var(--parch),var(--parch2));
  color:var(--ink); border-radius:6px 6px 18px 18px; border:3px solid #0C1119;
  box-shadow:0 24px 60px rgba(0,0,0,.6); padding:0 0 1.4rem;
}
.scroll-sheet[hidden]{display:none}
.perf{height:22px; background-image:radial-gradient(circle at 10px 11px, var(--night) 7px, var(--parch) 7.5px); background-size:28px 22px; border-bottom:2px dashed #8A5A33}
.seal-close{position:sticky; top:0; float:right; margin:.7rem .7rem 0 0; font:inherit; font-weight:700; cursor:pointer; background:var(--berry); color:#fff; border:3px solid #0C1119; border-radius:999px; padding:.45rem .9rem; box-shadow:2px 3px 0 #0C1119}
.seal-close:hover{filter:brightness(1.08)}
.capsule-line{clear:both; font-family:"Plex Mono",monospace; font-size:.78rem; color:#6B5636; padding:1rem 1.4rem 0; margin:0; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.scroll-title{font-family:"Oswald",sans-serif; font-size:clamp(1.6rem,4vw,2.2rem); line-height:1.08; margin:.4rem 0 .6rem; padding:0 1.4rem; max-width:24ch}
.scroll-meta{margin:0; padding:.6rem 1.4rem; display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem; background:rgba(138,90,51,.12); border-top:2px dashed #8A5A33; border-bottom:2px dashed #8A5A33}
.scroll-meta div{display:grid; gap:.1rem}
.scroll-meta dt{font-size:.76rem; color:#6B5636}
.scroll-meta dd{margin:0; font-weight:700; font-size:.94rem}
.scroll-body{padding:1rem 1.4rem; white-space:pre-line; font-size:1rem; max-width:68ch}
.scroll-body p{margin:0 0 .8rem}
.move-form{margin:0 1.4rem; background:#241A10; color:var(--parch); border-radius:12px; padding:.9rem 1rem; border:3px solid #0C1119}
.move-form label{display:block; font-family:"Plex Mono",monospace; font-size:.8rem; color:var(--seed); margin-bottom:.35rem}
.move-form select{width:100%; font:inherit; font-weight:700; padding:.6rem .7rem; border-radius:10px; border:none; background:var(--parch); color:var(--ink)}
.move-hint{margin:.5rem 0 0; font-size:.84rem; color:#C9B384}

/* toast = pigeon coo */
.toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:60;
  background:#241A10; color:var(--parch); border:2px solid var(--seed); border-radius:999px;
  padding:.65rem 1.1rem; font-size:.94rem; box-shadow:0 10px 30px rgba(0,0,0,.5); max-width:min(92vw,560px)}
.toast[hidden]{display:none}
.toast b{color:var(--seed)}

/* manual */
.manual{max-width:1120px; margin:0 auto; padding:0 1.25rem 3rem; color:#D8C9A8}
.manual h2{font-family:"Oswald",sans-serif; font-size:1.8rem; color:var(--parch); margin:1rem 0 .5rem}
.manual ol{margin:0 0 1rem; padding-left:1.3rem}
.manual li{margin-bottom:.4rem; max-width:70ch}
.manual .fine{font-size:.88rem; color:#9DB8D2}
kbd{background:#0C1119; border:1px solid var(--woodlight); border-radius:6px; padding:.05rem .4rem; font-family:"Plex Mono",monospace; font-size:.82rem}

@media (max-width:900px){
  .rail-inner{grid-template-columns:1fr 1fr}
  .ledger{grid-column:1/-1}
  .cubby-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .mast-inner{padding-top:2rem}
  .rail-inner{grid-template-columns:1fr}
  .cubby-grid{grid-template-columns:1fr}
  .cubby{transform:none !important}
  .scroll-meta{grid-template-columns:1fr}
  .scroll-sheet{top:auto; bottom:0; left:0; right:0; transform:none; width:100%; max-height:92vh; border-radius:18px 18px 0 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}