/* master-04-consolidated · DESCEND detail pattern · EXPERIMENTS features (exp01/02/03)
   Shared shell for the three WIP feature pages. Inherits the REC.02 blend:
     · one maximized stage; the copper CHAPTERED TIMELINE is the single persistent
       copper element and IS the progress control; custom chrome only; nothing
       plays until the visitor runs it.
     · the beats ARE the DOM: each <section class="beat"> carries its media and its
       caption. STAGE mode (desktop, JS) shows one beat at a time, full-bleed.
       DOC mode (no-JS / <=760px) is the same DOM as a designed scrolling document.
     · beat media types: video · still · wipe (before/after) · splat (live, opt-in)
       · sheet (typeset instrument table).
   No curves (standing law): square nodes, diamond sheet nodes, straight wipe handle.
   Reduced motion: posters instead of playback, no sweeps. Zero external requests. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/inter-var.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jbmono-var.woff2) format('woff2')}
:root{
  --g0:#0F0E0D; --gS:#0B0A09;
  --cu:#BE7A48; --cu-hi:#DA9A66; --cu-dim:#8a5a34;
  --paper:#F5F1EA;
  --dim:rgba(245,241,234,.55);
  --sil:rgba(245,241,234,.42);
  --ln:rgba(245,241,234,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:#0E0D0C;color:var(--paper);
     font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
     overflow:hidden}
.mono{font-family:'JetBrains Mono',monospace}
::selection{background:rgba(190,122,72,.35)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--dim);text-decoration:none}
:focus-visible{outline:1.5px solid rgba(190,122,72,.8);outline-offset:3px}
img,video{display:block}

#app{height:100dvh;display:flex;flex-direction:column}

/* ---------- bar ---------- */
#bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
     height:48px;padding:0 clamp(14px,2.4vw,28px);
     font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;
     text-transform:uppercase;border-bottom:1px solid rgba(245,241,234,.07)}
#bar .back{color:var(--dim);transition:color .25s;white-space:nowrap}
#bar a:hover,#bar a:focus-visible{color:var(--cu-hi)}
#bar .ttl{margin:0;font:inherit;color:rgba(245,241,234,.8);letter-spacing:.3em;white-space:nowrap;
     overflow:hidden;text-overflow:ellipsis}
#bar .src{color:rgba(245,241,234,.34);white-space:nowrap;display:flex;gap:18px}
#bar .src b{font-weight:500;color:rgba(245,241,234,.55)}
#bar .src a{color:rgba(245,241,234,.5)}
@media (max-width:1000px){ #bar .src .st{display:none} }
@media (max-width:560px){ #bar{font-size:9.5px;letter-spacing:.16em} #bar .ttl{letter-spacing:.18em} }

/* ---------- stage ---------- */
#stage{flex:1 1 auto;min-height:0;position:relative;background:#0B0A09;overflow:hidden}
.beat{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .38s ease,visibility .38s}
.beat.cur{opacity:1;visibility:visible}
.media{position:absolute;inset:0;margin:0}
.media>video,.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.media[data-fit="cover"]>video,.media[data-fit="cover"]>img{object-fit:cover}
.media .rmstill{display:none}
body.rm .media>video{display:none}
body.rm .media .rmstill{display:block}

/* lower-third caption */
.beat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
     background:linear-gradient(180deg,rgba(11,10,9,0),rgba(11,10,9,.86))}
.cap{position:absolute;left:clamp(16px,3vw,42px);bottom:clamp(14px,2.6vh,30px);z-index:6;
     max-width:min(62ch,84%);pointer-events:none}
.cap .k{margin:0 0 8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;
     text-transform:uppercase;color:var(--sil)}
.cap .k b{color:var(--paper);font-weight:600}
.cap .k i{font-style:normal;color:rgba(245,241,234,.34)}
.cap h2{margin:0 0 8px;font:500 clamp(20px,2.3vw,30px)/1.18 Inter,system-ui,sans-serif;letter-spacing:-.012em;
     text-shadow:0 1px 14px rgba(0,0,0,.75)}
.cap .l{margin:0;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.75;letter-spacing:.03em;
     color:rgba(245,241,234,.86);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.cap .l+.l{margin-top:6px}
.cap .note{color:rgba(245,241,234,.5)}

/* source links + placeholder copy (Record drafts) */
.cap a{pointer-events:auto;color:rgba(245,241,234,.78);border-bottom:1px solid rgba(245,241,234,.3);padding-bottom:1px}
.cap a:hover,.cap a:focus-visible{color:var(--cu-hi);border-color:var(--cu-hi)}
.cap .srcs{margin-top:12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:6px 18px}
.cap .cred{margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);display:flex;flex-wrap:wrap;gap:4px 22px}
.cap .cred b{font-weight:500;color:rgba(245,241,234,.5);margin-right:6px}
.cap .cred+.srcs{margin-top:8px}
.cap .fpo{color:rgba(245,241,234,.5);border-left:2px solid rgba(245,241,234,.3);padding-left:10px}
table.inst a{color:inherit;border-bottom:1px solid rgba(245,241,234,.3)}
table.inst a:hover,table.inst a:focus-visible{color:var(--cu-hi);border-color:var(--cu-hi)}

/* ---------- sheet beats: caption left, instrument table right ---------- */
.beat.sheet::after{display:none}
.beat.sheet{display:grid;grid-template-columns:minmax(260px,31%) 1fr;gap:clamp(22px,4vw,64px);
     padding:clamp(22px,5vh,56px) clamp(18px,4vw,60px);align-items:center;background:#0C0B0A}
.beat.sheet .cap{position:static;max-width:none;pointer-events:auto;order:1}
.beat.sheet .media{position:static;order:2;min-height:0;max-height:100%;overflow:auto}
table.inst{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;
     font-size:clamp(11px,.92vw,13px);line-height:1.5;letter-spacing:.02em}
table.inst caption{caption-side:top;text-align:left;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
     color:var(--sil);padding:0 0 12px}
table.inst th{font-weight:500;text-align:left;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
     color:rgba(245,241,234,.4);padding:0 14px 9px 0;border-bottom:1px solid rgba(245,241,234,.2);white-space:nowrap}
table.inst td{padding:9px 14px 9px 0;border-bottom:1px solid var(--ln);vertical-align:top;color:rgba(245,241,234,.82)}
table.inst td:first-child{color:rgba(245,241,234,.5);white-space:nowrap}
table.inst td.n,table.inst th.n{text-align:right;white-space:nowrap;padding-right:0}
table.inst td b{font-weight:500;color:var(--paper)}
table.inst tr.open td{color:rgba(245,241,234,.62)}
table.inst .ok,table.inst .op,table.inst .no{font-size:10px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
table.inst .ok{color:rgba(245,241,234,.86)}
table.inst .op{color:rgba(245,241,234,.5)}
table.inst .no{color:rgba(245,241,234,.34);text-decoration:line-through}
.figrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:22px;margin:0 0 26px;padding:0;list-style:none}
.figrow li{padding-top:12px;border-top:1px solid rgba(245,241,234,.2)}
.figrow b{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:clamp(20px,2vw,28px);letter-spacing:-.01em}
.figrow span{display:block;font-size:12px;line-height:1.5;color:rgba(245,241,234,.56);margin-top:6px}

/* ---------- side beats: informational plates the caption must not cover ---------- */
.beat.side::after{display:none}
.beat.side{display:grid;grid-template-columns:minmax(260px,29%) 1fr;gap:clamp(20px,3vw,48px);
     padding:clamp(18px,4vh,44px) clamp(18px,3vw,44px);align-items:center;background:#0B0A09}
.beat.side .cap{position:static;max-width:none;pointer-events:auto;order:1}
.beat.side .media{position:relative;inset:auto;order:2;height:100%;min-height:0}
body.nojs .beat.side .media,body.doc .beat.side .media{height:auto}

/* light-ground instrument plots, flipped to the dark stage */
.media.inv>img{filter:invert(1) hue-rotate(180deg) brightness(.92)}

/* ---------- embed beats: a self-contained animated chart on the stage ---------- */
.beat.embedb::after{display:none}
.beat.embedb .cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* the chart carries its own headline */
.media.embed{background:#0B0A09}
.media.embed .e-link{position:absolute;inset:0;display:block}
.media.embed .e-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.media.embed .e-open{display:none}
.media.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none;pointer-events:none;background:#0B0A09}
.media.embed.live iframe{display:block}
.media.embed.live .e-link{visibility:hidden}
body.rm .media.embed iframe{display:none}
body.rm .media.embed .e-link{visibility:visible}
body.nojs .beat.embedb .cap,body.doc .beat.embedb .cap{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
body.nojs .media.embed .e-open,body.doc .media.embed .e-open{display:block;position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.2em;
     text-transform:uppercase;color:#F5F1EA;background:rgba(11,10,9,.78);padding:6px 10px}

/* ---------- wipe beats (before / after) ---------- */
.wipe{--x:50%}
.wipe .w-b{clip-path:inset(0 0 0 var(--x))}
.wipe .w-h{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:rgba(245,241,234,.8);z-index:3;pointer-events:none}
.wipe .w-h::after{content:"";position:absolute;top:50%;left:-6px;width:13px;height:34px;margin-top:-17px;
     border:1px solid rgba(245,241,234,.8);background:rgba(11,10,9,.7)}
.wipe .w-la,.wipe .w-lb{position:absolute;top:16px;z-index:3;font-family:'JetBrains Mono',monospace;font-size:10px;
     letter-spacing:.26em;text-transform:uppercase;color:rgba(245,241,234,.72);background:rgba(11,10,9,.62);padding:5px 9px;pointer-events:none}
.wipe .w-la{left:16px}.wipe .w-lb{right:16px}
.wipe .w-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y}

/* ---------- splat beats (live viewer is opt-in) ---------- */
.splat .s-host{position:absolute;inset:0;z-index:2}
.splat .s-host canvas{display:block}
.splat.live>img{visibility:hidden}
.s-load,#runbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
     font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.34em;
     text-transform:uppercase;color:var(--paper);padding:16px 26px 16px 30px;
     border:1px solid rgba(245,241,234,.28);background:rgba(10,9,8,.6);
     transition:border-color .25s,color .25s,background .25s;z-index:7;white-space:nowrap}
.s-load::before,.s-load::after,#runbtn::before,#runbtn::after{content:"";position:absolute;width:9px;height:9px;border:0 solid var(--cu)}
.s-load::before,#runbtn::before{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
.s-load::after,#runbtn::after{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}
.s-load:hover,.s-load:focus-visible,#runbtn:hover,#runbtn:focus-visible{color:var(--cu-hi);border-color:rgba(190,122,72,.6);background:rgba(10,9,8,.78)}
.s-load small{display:block;margin-top:7px;font-size:9.5px;letter-spacing:.24em;color:rgba(245,241,234,.5)}
.splat.live .s-load,.splat.busy .s-load{display:none}
.s-stat{position:absolute;right:16px;top:16px;z-index:3;font-family:'JetBrains Mono',monospace;font-size:10px;
     letter-spacing:.24em;text-transform:uppercase;color:rgba(245,241,234,.6);background:rgba(11,10,9,.62);padding:5px 9px}
.s-stat:empty{display:none}
#runbtn.hide,body.rm #runbtn,body.nojs #runbtn,body.doc #runbtn{display:none}

/* ---------- console (timeline + controls) ---------- */
#console{flex:none;padding:20px clamp(14px,2.4vw,28px) 12px;background:#0E0D0C;border-top:1px solid rgba(245,241,234,.07)}
#tl{position:relative;height:36px;cursor:pointer;touch-action:none;outline-offset:6px;margin:0 clamp(20px,3vw,44px)}
#tl .rail{position:absolute;left:0;right:0;top:9px;height:1px;background:rgba(245,241,234,.18)}
/* copper finish = metal (site standard, Michael 2026-11-10): a sheen along the run + a lit top / shaded bottom edge */
#tl .fill{position:absolute;left:0;top:8px;height:3px;width:0;
     background:linear-gradient(180deg,rgba(255,214,170,.6),rgba(255,214,170,0) 42%,rgba(0,0,0,.42)),linear-gradient(90deg,#85522D,#BE7A48 30%,#E9B27C 52%,#C98452 66%,#7A4A29);background-size:100% 100%,1100px 100%;box-shadow:0 0 8px rgba(190,122,72,.35)}
#tl .head{position:absolute;top:3px;width:2px;height:13px;background:linear-gradient(180deg,#F3CDA2,#DA9A66 45%,#9A6238);transform:translateX(-1px);
     box-shadow:0 0 6px rgba(218,154,102,.6)}
#tl .node{position:absolute;top:0;width:44px;margin-left:-22px;height:36px;padding:0;justify-content:flex-start;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
#tl .node i{display:block;width:9px;height:9px;margin-top:5px;border:1.5px solid rgba(245,241,234,.38);background:#0E0D0C;
     transition:border-color .2s,box-shadow .2s}
#tl .node.sheet i,#tl .node.splat i{transform:rotate(45deg)}
#tl .node span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;color:rgba(245,241,234,.42);
     text-transform:uppercase;white-space:nowrap;transition:color .2s}
#tl .node.done i{border-color:var(--cu)}
#tl .node.cur i{border-color:var(--cu-hi);box-shadow:0 0 7px rgba(218,154,102,.55)}
#tl .node.cur span{color:var(--cu-hi)}
#tl .node:hover i{border-color:var(--cu-hi)}
@media (max-width:980px){ #tl .node span{display:none} }
/* chapters (body.chap): one bracket per chapter above its nodes. The label is paper; only the current chapter is copper. */
#chs{position:relative;height:20px;margin:0 clamp(20px,3vw,44px) 4px}
#chs .chm{position:absolute;top:0;height:20px;min-width:8px;padding:0 0 0 7px;margin-left:-5px;text-align:left;white-space:nowrap;overflow:visible;
     font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:rgba(245,241,234,.5);
     border-left:1px solid rgba(245,241,234,.3);border-bottom:1px solid rgba(245,241,234,.16);box-sizing:content-box;transition:color .2s,border-color .2s}
#chs .chm b{font-weight:500;color:rgba(245,241,234,.34);margin-right:5px}
#chs .chm:hover,#chs .chm:focus-visible{color:var(--paper)}
#chs .chm.cur{color:var(--cu-hi);border-left-color:var(--cu-hi)}
#chs .chm.cur b{color:var(--cu-hi)}
body.chap #console{padding-top:12px}
@media (max-width:1320px){ body.chap #tl .node span,#chs .chm span{display:none} }
@media (max-width:1100px){ #chs{display:none} }
.chh{display:none}
body.nojs .chh,body.doc .chh{display:block;margin:26px 16px 14px;padding-top:12px;border-top:1px solid rgba(190,122,72,.55);
     font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,241,234,.8)}
body.nojs .chh b,body.doc .chh b{font-weight:600;color:var(--cu-hi)}
#ctl{display:flex;align-items:center;gap:18px;margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
     letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
#play,#fs,#ctl .stp{display:flex;align-items:center;gap:9px;padding:5px 12px;border:1px solid rgba(245,241,234,.22);
     letter-spacing:.26em;font-size:10.5px;transition:border-color .2s,color .2s}
#play:hover,#play:focus-visible,#fs:hover,#fs:focus-visible,#ctl .stp:hover,#ctl .stp:focus-visible{color:var(--cu-hi);border-color:rgba(190,122,72,.55)}
#ctl .stp[disabled]{opacity:.3;cursor:default}
#dot{width:7px;height:7px;border:1.5px solid rgba(245,241,234,.4);flex:none;transition:background .15s,border-color .15s,box-shadow .15s}
#dot.on{background:var(--cu-hi);border-color:var(--cu-hi);box-shadow:0 0 7px rgba(218,154,102,.7)}
#tc{color:rgba(245,241,234,.7);white-space:nowrap}
#tc b{font-weight:500;color:var(--paper)}
#ctl .sp{flex:1}
#bno{color:rgba(245,241,234,.7);white-space:nowrap}
#keys{color:rgba(245,241,234,.28);white-space:nowrap}
@media (max-width:1180px){ #keys{display:none} }
#wip{margin:9px 0 0;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
     color:rgba(245,241,234,.3);display:flex;justify-content:space-between;gap:16px}
#wip a{color:rgba(245,241,234,.5)}
#wip a:hover,#wip a:focus-visible{color:var(--cu-hi)}
body.rm #play{display:none}

/* ---------- DOC mode: no-JS and <=760px — the same DOM as a scrolling document ---------- */
body.nojs,body.doc{overflow:auto;height:auto}
body.nojs #app,body.doc #app{height:auto;min-height:100dvh}
body.nojs #console,body.doc #console{display:none}
body.nojs #stage,body.doc #stage{flex:none;overflow:visible;background:none;padding:6px 0 30px}
body.nojs .beat,body.doc .beat{position:static;opacity:1;visibility:visible;display:block;padding:0;
     margin:0 0 34px;background:none;transition:none}
body.nojs .beat::after,body.doc .beat::after{display:none}
body.nojs .media,body.doc .media{position:relative;inset:auto;aspect-ratio:16/9;background:#0B0A09}
body.nojs .media.sheetm,body.doc .media.sheetm{aspect-ratio:auto;background:none;padding:0 16px;overflow-x:auto;max-height:none}
body.nojs .cap,body.doc .cap{position:static;max-width:none;padding:14px 16px 0;pointer-events:auto}
body.nojs .beat.sheet .cap,body.doc .beat.sheet .cap{padding:0 16px 16px}
body.nojs .cap h2,body.doc .cap h2{font-size:21px;text-shadow:none}
body.nojs .cap .l,body.doc .cap .l{text-shadow:none;font-size:12px;color:rgba(245,241,234,.8)}
body.nojs .s-load{display:none}
body.doc .s-load{font-size:11px;letter-spacing:.24em;padding:13px 18px}
body.nojs .beat.sheet,body.doc .beat.sheet,body.nojs .beat.side,body.doc .beat.side{display:flex;flex-direction:column}
body.nojs .beat.side .cap,body.doc .beat.side .cap{order:2}
body.nojs .beat.side .media,body.doc .beat.side .media{order:1}
body.doc table.inst{font-size:11px}
body.doc table.inst td,body.doc table.inst th{padding-right:10px}
body.doc table.inst td:first-child,body.doc table.inst td.n,body.doc table.inst .ok,body.doc table.inst .op,body.doc table.inst .no{white-space:normal}
body.doc table.inst .ok,body.doc table.inst .op,body.doc table.inst .no{letter-spacing:.12em}
body.doc .figrow{grid-template-columns:repeat(2,1fr);gap:16px}
#docfoot{display:none}
body.nojs #docfoot,body.doc #docfoot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
     padding:18px 16px 40px;border-top:1px solid rgba(245,241,234,.08);
     font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,234,.4)}
#docfoot a{color:rgba(245,241,234,.62)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}