/* THE MOULD LOFT — one sheet. Light and dark are both first-class: every
   colour is a token defined on :root, and dark redefines the tokens only. */
:root{
  --paper:#f5f2ea; --panel:#fffdf8; --sunk:#ece7db;
  --ink:#151f25; --soft:#54666e; --faint:#7d8d94;
  --rule:#d6cec0; --rule2:#bfb5a3;
  --brass:#8a5c12; --brass-ink:#fff8e9; --chalk:#1d5f78; --warn:#9a3412; --good:#1e6b45;
  --shadow:0 1px 2px rgba(21,31,37,.05),0 8px 26px rgba(21,31,37,.07);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"IBM Plex Sans",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1140px;
}
/* Explicit choice wins in both directions; with no choice the system decides. */
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){
  --paper:#0c1418; --panel:#131e24; --sunk:#0a1013;
  --ink:#eef4f5; --soft:#9fb2b9; --faint:#7b8f97;
  --rule:#23333b; --rule2:#31454f;
  --brass:#e0a94e; --brass-ink:#1a1206; --chalk:#7cc0d6; --warn:#f0876a; --good:#6fcb9c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 34px rgba(0,0,0,.44);
}}
html[data-theme="dark"]{
  --paper:#0c1418; --panel:#131e24; --sunk:#0a1013;
  --ink:#eef4f5; --soft:#9fb2b9; --faint:#7b8f97;
  --rule:#23333b; --rule2:#31454f;
  --brass:#e0a94e; --brass-ink:#1a1206; --chalk:#7cc0d6; --warn:#f0876a; --good:#6fcb9c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 34px rgba(0,0,0,.44);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;overflow-x:hidden;
  font-feature-settings:"kern" 1;text-rendering:optimizeLegibility}
img,video,svg{max-width:100%}
a{color:inherit;text-decoration:none}
main a:not(.btn):not(.card):not(.tile){text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--brass) 55%,transparent);text-underline-offset:3px}
main a:not(.btn):not(.card):not(.tile):hover{text-decoration-color:var(--brass)}

/* ── masthead ───────────────────────────────────────────────────────────── */
.mast{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--rule)}
.mast .in{max-width:var(--wrap);margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;letter-spacing:-.01em;flex:0 0 auto}
.brand svg{width:26px;height:26px;display:block}
.brand b{font-weight:600}
.mast nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.mast nav a{font-size:13.5px;padding:5px 9px;border-radius:5px;color:var(--soft);white-space:nowrap}
.mast nav a:hover{background:var(--sunk);color:var(--ink)}
.mast nav a[aria-current]{color:var(--ink);background:var(--sunk);font-weight:600}
.themebtn{border:1px solid var(--rule);background:transparent;color:var(--soft);border-radius:5px;
  font:inherit;font-size:12px;padding:5px 9px;cursor:pointer}
.themebtn:hover{border-color:var(--rule2);color:var(--ink)}

/* ── full-bleed bands ───────────────────────────────────────────────────── */
.band{position:relative;width:100%;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;min-height:var(--bh,clamp(340px,54vh,560px))}
.band>video,.band>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,12,15,.34) 0%,rgba(6,12,15,.52) 44%,rgba(6,12,15,.86) 100%)}
.band .bandin{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;width:100%;
  padding:56px 22px 40px;color:#f4f7f8}
.band h1,.band h2{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.band p{color:#e6edef;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.band.tall{--bh:clamp(440px,74vh,700px)}
.band.short{--bh:clamp(230px,34vh,330px)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin:0 0 12px}
.band .eyebrow{color:#e7c584;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.credit{position:absolute;right:12px;bottom:8px;z-index:3;font-family:var(--mono);font-size:10px;
  color:rgba(255,255,255,.62);letter-spacing:.04em}
.credit a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3)}

/* ── type ───────────────────────────────────────────────────────────────── */
h1{font-family:var(--serif);font-size:clamp(34px,5.6vw,60px);line-height:1.04;letter-spacing:-.026em;margin:0 0 16px;font-weight:600}
h2{font-family:var(--serif);font-size:clamp(25px,3.4vw,36px);line-height:1.14;letter-spacing:-.018em;margin:0 0 14px;font-weight:600}
h3{font-family:var(--serif);font-size:21px;line-height:1.24;margin:0 0 10px;font-weight:600}
h4{font-size:13px;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin:0 0 8px;font-weight:600}
.lede{font-size:clamp(18px,2.1vw,21.5px);line-height:1.55;color:var(--soft)}
.band .lede{color:#dde6e8}
p{margin:0 0 15px}
main{display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sec{padding:60px 0}
.sec.tight{padding:38px 0}
.narrow{max-width:730px}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ── cards & grids ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:9px;padding:20px;box-shadow:var(--shadow)}
a.card:hover,a.tile:hover{border-color:var(--brass)}
.tile{display:block;background:var(--panel);border:1px solid var(--rule);border-radius:9px;
  padding:18px 20px;box-shadow:var(--shadow)}
.tile .n{font-family:var(--serif);font-size:19px;margin-bottom:5px}
.tile .d{font-size:14.5px;color:var(--soft);line-height:1.5}
.tile .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-top:11px}
.pad{padding:20px}
.sunk{background:var(--sunk);border-radius:9px}

/* ── data furniture ─────────────────────────────────────────────────────── */
.mono{font-family:var(--mono)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:9px;background:var(--panel)}
.tbl table{min-width:560px}
th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--soft);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--rule2);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.pill{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;border:1px solid var(--rule2);color:var(--soft);white-space:nowrap}
.pill.b{border-color:var(--brass);color:var(--brass)}
.pill.n{border-color:var(--chalk);color:var(--chalk)}
.pill.w{border-color:var(--warn);color:var(--warn)}
.pill.g{border-color:var(--good);color:var(--good)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:14.5px}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);padding-top:4px}
.kv dd{margin:0}
.stat{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(26px,4vw,38px);
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stat.b{color:var(--brass)}
.statlbl{font-size:12.5px;color:var(--soft);margin-top:7px;line-height:1.4}

/* ── notes ──────────────────────────────────────────────────────────────── */
.note{border-left:3px solid var(--rule2);padding:2px 0 2px 16px;color:var(--soft);font-size:15px;margin:18px 0}
.note.warn{border-color:var(--warn)}
.note.brass{border-color:var(--brass)}
.note.good{border-color:var(--good)}
.note strong{color:var(--ink)}
.flag{background:color-mix(in srgb,var(--warn) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 40%,var(--rule));
  border-radius:9px;padding:17px 19px;margin:20px 0}
.flag h4{color:var(--warn)}
.quote{font-family:var(--serif);font-size:19.5px;line-height:1.48;border-left:2px solid var(--brass);padding-left:18px;color:var(--ink)}
.src{font-family:var(--mono);font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:9px}

/* ── controls ───────────────────────────────────────────────────────────── */
.btn{display:inline-block;font:inherit;font-size:14.5px;font-weight:600;padding:9px 17px;border-radius:7px;
  border:1px solid var(--brass);background:var(--brass);color:var(--brass-ink);cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule2)}
.btn.ghost:hover{border-color:var(--brass);filter:none}
.btn:disabled{opacity:.5;cursor:default}
input[type=text],input[type=number],textarea,select{font:inherit;font-size:15px;width:100%;
  padding:9px 11px;border:1px solid var(--rule2);border-radius:7px;background:var(--panel);color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);margin:0 0 6px}
.field{margin-bottom:15px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.chip{font:inherit;font-size:13px;padding:5px 12px;border-radius:20px;border:1px solid var(--rule2);
  background:transparent;color:var(--soft);cursor:pointer}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--brass)}
.seg{display:inline-flex;border:1px solid var(--rule2);border-radius:7px;overflow:hidden}
.seg button{font:inherit;font-size:13.5px;padding:7px 14px;border:0;background:transparent;color:var(--soft);cursor:pointer}
.seg button.on{background:var(--ink);color:var(--paper)}

/* ── instrument frame ───────────────────────────────────────────────────── */
.inst{background:var(--panel);border:1px solid var(--rule2);border-radius:11px;box-shadow:var(--shadow);overflow:hidden}
.inst>header{padding:15px 20px;border-bottom:1px solid var(--rule);background:var(--sunk);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inst>header .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--soft)}
.inst .body{padding:20px}
.out{border-top:1px solid var(--rule);background:var(--sunk);padding:20px}
.empty{color:var(--faint);font-size:14.5px;font-style:italic}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--rule);margin-top:60px;padding:34px 0 46px;background:var(--sunk)}
footer.site .in{max-width:var(--wrap);margin:0 auto;padding:0 22px;font-size:13.5px;color:var(--soft)}
footer.site a{text-decoration:underline;text-decoration-color:var(--rule2)}
.foothost{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-top:14px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--panel);padding:9px 14px;border-radius:7px;border:1px solid var(--brass)}
@media (max-width:640px){
  body{font-size:16.5px}
  .mast .in{padding:9px 16px;gap:10px}
  .mast nav{gap:0}
  .mast nav a{padding:4px 7px;font-size:12.5px}
  .wrap,.band .bandin{padding-left:16px;padding-right:16px}
  .sec{padding:42px 0}
}
@media (prefers-reduced-motion:reduce){
  .band>video{display:none}
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}