html{scrollbar-gutter:stable;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#F8EEE2;color:#162412;font:400 16px/1.6 'NB International Pro','Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1264px;margin:0 auto;padding:44px 20px 100px;box-sizing:border-box}
.mono{font:400 11px/1.2 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--olive-mid)}
header.top{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding-bottom:28px;border-bottom:1px solid #E5D2B8}
header.top h1{font:400 clamp(36px,5vw,56px)/1.06 var(--display);letter-spacing:-1px;color:var(--olive);margin:12px 0 0;text-wrap:balance}
header.top p.lede{margin:14px 0 0;max-width:62ch;font-size:16px;color:#3F4A3A}
.globals{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.pill-seg{display:inline-flex;border:1px solid #E5D2B8;border-radius:40px;padding:3px;background:#FFFAF5}
.pill-seg .lab{font:400 10px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#A99E92;padding:9px 8px 0 10px}
.pill-seg button,.seg button{border:0;background:none;border-radius:40px;padding:8px 14px 7px;font:400 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--olive);cursor:pointer;transition:background .18s,color .18s}
.pill-seg button.on,.seg button.on{background:var(--pine);color:var(--eggshell)}
.pill-seg button:not(.on):hover,.seg button:not(.on):hover{background:#F1E7DA}
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 10px}
.toc-item{display:inline-flex;gap:7px;align-items:center;padding:6px 11px 5px;border-radius:30px;background:#FFFAF5;border:1px solid #EADFCF;font-size:13px;color:#2C3827;text-decoration:none;transition:background .15s,transform .15s}
.toc-item:hover{background:#fff;transform:translateY(-1px)}
.toc-item .n{font:400 10px/1 var(--mono);color:#A99E92}
.ground-rules{margin:18px 0 0;padding:16px 18px;border-radius:12px;background:#FFFAF5;border:1px solid #EFE4D5;font-size:14px;color:#3F4A3A}
.ground-rules b{font-weight:500;color:#162412}
.ground-rules ul{margin:6px 0 0;padding-left:18px}
.ground-rules li{margin:2px 0}

section.q{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;padding:56px 0 8px;scroll-margin-top:12px}
.q-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:400 11px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--olive-mid)}
.tag{padding:5px 8px 4px;border-radius:4px;border:1px solid #DCCFBE;color:#8B7E70;font-size:10px}
.tag.new{background:#F4E2C0;border-color:#E7CC97;color:#8A5F1B}
.badges{display:inline-flex;gap:6px}
.badge{padding:5px 8px 4px;border-radius:4px;font-size:10px;background:var(--pine);color:var(--eggshell)}
.badge.needs-work{background:#A87434}
.badge.scratched{background:#7A2E1D}
.q-title{font:400 clamp(30px,3.6vw,40px)/1.12 var(--display);letter-spacing:-.6px;color:var(--olive);margin:12px 0 8px;text-wrap:balance}
.q-blurb{margin:0;max-width:66ch;font-size:15px;color:#4B5544}
.q-today{margin:8px 0 0;max-width:66ch;font-size:13.5px;color:#7F776D}
.q-today .k{font:400 10px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:#A99E92;margin-right:8px}
.q-controls{display:flex;align-items:center;gap:12px;margin:18px 0 12px}
.seg{display:inline-flex;border:1px solid #E5D2B8;border-radius:40px;padding:3px;background:#FFFAF5}
.reset{margin-left:auto;border:0;background:none;font:400 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--taupe);cursor:pointer;padding:8px}
.reset:hover{color:var(--olive)}
.stage{position:relative;border-radius:18px;background:#EDE3D5 url(/img/stage-bg.webp) center/cover;padding:40px 24px;min-height:560px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.stage .mount{width:100%;display:flex;justify-content:center}
.stage[data-mode=wes]{background:#F3EADF;padding:16px}
figure.wes{margin:0;width:100%;display:flex;justify-content:center}
.wes-shot{max-width:100%;height:auto;border-radius:10px;box-shadow:0 4px 16px rgba(22,36,18,.12)}
.saves{display:flex;gap:10px;align-items:baseline;margin-top:10px;padding:10px 14px;border-radius:10px;background:#FFFAF5;border:1px dashed #E2D4C1;font-size:13.5px;color:#7F776D}
.saves .k{font:400 10px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:#A99E92;flex:none}
.saves.on{color:#162412;border-style:solid}
.changes{margin-top:14px;font-size:14px;color:#3F4A3A}
.changes summary{cursor:pointer;font:400 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--olive-mid);padding:6px 0;list-style:none}
.changes summary::-webkit-details-marker{display:none}
.changes summary::before{content:"+ ";}
.changes[open] summary::before{content:"\2212  ";}
.changes ul{margin:6px 0 0;padding-left:18px}
.changes li{margin:3px 0;max-width:72ch}
.err{color:#7A2E1D}

.rail{position:relative}
.rail-card{position:sticky;top:16px;background:#FFFAF5;border:1px solid #EADFCF;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px;margin-top:110px}
.rail-h{display:flex;justify-content:space-between;font:400 10.5px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--olive-mid)}
.vrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vrow .who{font:400 10.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;width:38px;color:#4B5544}
.vbtn{border:1px solid #D9C9B4;background:none;border-radius:40px;padding:6px 10px 5px;font:400 10px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:#8B7E70;cursor:pointer}
.vbtn.on.approved{background:var(--pine);border-color:var(--pine);color:var(--eggshell)}
.vbtn.on.needs-work{background:#A87434;border-color:#A87434;color:#fff}
.vbtn.on.scratched{background:#7A2E1D;border-color:#7A2E1D;color:#fff}
.notes{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow:auto}
.note{border-left:2px solid #E5D2B8;padding-left:10px}
.note .nh{display:flex;gap:8px;align-items:baseline;font-size:13px}
.note .nh b{font-weight:500}
.note .nh span{font:400 10px/1 var(--mono);color:#A99E92}
.note p{margin:2px 0 0;font-size:13.5px;line-height:1.45;white-space:pre-wrap}
.f-name,.f-body{width:100%;box-sizing:border-box;border:1px solid #E2D4C1;border-radius:8px;background:#fff;padding:9px 11px;font:400 14px/1.4 var(--body);color:#162412;resize:vertical}
.f-row{display:flex;gap:10px;align-items:center}
.f-post{border:0;border-radius:40px;background:var(--pine);color:var(--eggshell);padding:9px 18px 8px;font:400 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;cursor:pointer}
.f-post[disabled]{opacity:.5}
.f-err{margin:0;font-size:12px;color:#7A2E1D}
footer.foot{margin-top:70px;padding-top:18px;border-top:1px solid #E5D2B8;font-size:13px;color:#7F776D}

@media (max-width:980px){
  section.q{grid-template-columns:1fr}
  .rail-card{position:static;margin-top:0}
}
@media (max-width:720px){
  header.top{grid-template-columns:1fr}
  .globals{align-items:flex-start}
  .wrap{padding:28px 16px 80px}
  .stage{padding:18px 8px;border-radius:14px}
  .q-today{margin:8px 0 0;max-width:66ch;font-size:13.5px;color:#7F776D}
.q-today .k{font:400 10px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:#A99E92;margin-right:8px}
.q-controls{flex-wrap:wrap}
}
.seg button{white-space:nowrap}
@media (max-width:720px){.seg button{padding:8px 10px 7px;font-size:10px;letter-spacing:1px}.reset{margin-left:0}}