@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;800&family=Syne:wght@600;700;800&display=swap');
:root{
  --ink:#0f1110; --soot:#171a18; --amber:#d4a017; --paper:#f2ebe0;
  --mute:#a7aea8; --line:rgba(212,160,23,.28); --warn:#c45c26;
  --font-d:'Syne',system-ui,sans-serif; --font-b:'Source Sans 3',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-b);background:var(--ink);color:var(--paper);line-height:1.55}
a{color:var(--amber);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#f0d27a}
.wrap{width:min(1100px,92vw);margin-inline:auto}
.top{position:sticky;top:0;z-index:40;background:rgba(15,17,16,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{font-family:var(--font-d);font-weight:800;font-size:1.25rem;color:var(--paper);text-decoration:none;letter-spacing:.02em}
.brand em{font-style:normal;color:var(--amber)}
.nav{display:flex;flex-wrap:wrap;gap:.5rem .95rem;align-items:center;font-size:.86rem}
.nav a{color:var(--mute);text-decoration:none}
.nav a:hover{color:var(--paper)}
.btn,.go,.fab{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  background:linear-gradient(135deg,var(--amber),#b8840f);color:#1a1408;font-weight:800;
  border:0;border-radius:3px;padding:.7rem 1.15rem;text-decoration:none;letter-spacing:.03em}
.btn:hover,.go:hover,.fab:hover{color:#1a1408;filter:brightness(1.06)}
.hero{position:relative;min-height:min(72vh,560px);display:grid;align-items:end;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(1.05)}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(112deg,rgba(15,17,16,.94) 0%,rgba(15,17,16,.74) 48%,rgba(15,17,16,.38) 100%)}
.hero-inner{position:relative;z-index:1;padding:4.4rem 0 2.2rem}
.eyebrow{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--line);padding:.28rem .65rem;margin:0 0 .85rem}
.hero h1{font-family:var(--font-d);font-size:clamp(1.95rem,4.8vw,3.15rem);line-height:1.08;margin:0 0 .75rem;max-width:14ch;color:#fff}
.lead{max-width:38rem;color:#d9ddd8;font-size:1.05rem;margin:0 0 1.2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.ghost{color:var(--paper);border:1px solid var(--line);padding:.65rem 1rem;text-decoration:none;font-weight:700;border-radius:3px}
.ghost:hover{border-color:var(--amber);color:var(--amber)}
/* board rail */
.board{padding:1.1rem 0 .15rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#141714,var(--ink))}
.board-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 0 .75rem}
.slips{display:flex;gap:.55rem;overflow-x:auto;padding-bottom:.9rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.slip{flex:0 0 9.4rem;scroll-snap-align:start;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,#f7f1e6,#ebe2d2);border:1px solid #cbbfa8;border-radius:2px 2px 10px 10px;
  padding:.55rem .55rem .7rem;position:relative;box-shadow:0 6px 0 #2a2418}
.slip::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:0;border-bottom:2px dashed rgba(0,0,0,.18)}
.slip .num{display:block;font-size:.65rem;font-weight:800;color:#7a6230;letter-spacing:.08em}
.slip strong{display:block;font-size:.8rem;line-height:1.2;font-weight:800;margin:.15rem 0 .1rem;color:#1a1408}
.slip span{display:block;font-size:.68rem;color:#5c5346}
.slip.on,.slip:hover{outline:2px solid var(--amber);outline-offset:1px}
.content{padding:2.2rem 0 5.5rem}
.prose{max-width:42rem}
.prose h2,.prose h3{font-family:var(--font-d);color:#fff;line-height:1.2}
.prose h2{font-size:1.45rem;margin:1.75rem 0 .65rem}
.prose h3{font-size:1.1rem;margin:1.2rem 0 .4rem}
.prose p,.prose li{color:#d5dad5}
.prose ul,.prose ol{padding-left:1.15rem}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1rem 0}
.prose th,.prose td{border:1px solid var(--line);padding:.45rem .55rem;text-align:left}
.prose th{background:#171a18;color:var(--amber)}
.prose blockquote{margin:1rem 0;padding:.7rem 1rem;border-left:3px solid var(--warn);background:#171a18;color:#ebe6dc}
.prose details{border:1px solid var(--line);border-radius:6px;padding:.55rem .8rem;margin:.55rem 0;background:#141714}
.prose summary{cursor:pointer;font-weight:800;color:#fff}
.note{border:1px dashed var(--line);border-radius:8px;padding:.85rem 1rem;background:#141714;margin:0 0 1.1rem}
.shot{margin:1.6rem 0 0;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-size:.8rem;color:var(--mute);padding:.45rem .7rem;background:#141714}
.foot{border-top:1px solid var(--line);padding:1.4rem 0 2rem;color:var(--mute);font-size:.86rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-bottom:.7rem}
.foot a{color:var(--mute);text-decoration:none}
.foot a:hover{color:var(--amber)}
.fab{position:fixed;right:1rem;bottom:1rem;z-index:50;box-shadow:0 10px 28px rgba(0,0,0,.4);border-radius:999px}
.fab small{font-size:.65rem;opacity:.85;font-weight:800}