/* The Excuse (/the-excuse), page CSS: the storm ground, chapter cards, Sim's words, the light era, the foot.
   The Train page's head CSS carries the series base (fonts, body, tooltips, tiles); reel.css carries the reel.
   Classes only. Brief THE-EXCUSE-BUILD-BRIEF-2026-10-30.md section 6.1: storm (#050308 into #0b1420) to C12,
   the Ocean's light era (#f6f1e7 to #efe6d3, ink #16101e, deep gold #b8862f) from ex-13c to the close. */
:root{--x-ink:#e9edf2;--x-ink2:rgba(233,237,242,.72);--x-quiet:rgba(233,237,242,.52);--x-gold:#e6cf9a;--x-line:rgba(255,255,255,.08);
  --x-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;--x-display:'Satoshi','Inter',system-ui,sans-serif;
  --x-ease:cubic-bezier(.2,.6,.2,1)}

/* the storm: the page's ground from the hero to the cliff */
main.x-storm{display:block;background:
  radial-gradient(90% 60% at 50% 0%,rgba(11,20,32,1) 0%,rgba(5,3,8,0) 70%),
  linear-gradient(180deg,#0b1420 0,#050308 900px,#050308 calc(100% - 400px),#0b1420 100%)}

/* hero */
.x-hero{position:relative;padding:clamp(56px,8vw,120px) 24px clamp(40px,5vw,72px);overflow:clip}
.x-hero__inner{position:relative;max-width:980px;margin:0 auto}
.x-h1{position:relative;margin-top:22px;font-family:var(--x-display);font-weight:700;font-size:clamp(3rem,1.2rem + 7vw,7.6rem);
  line-height:.94;letter-spacing:-.04em;color:#fff;text-wrap:balance}
.x-sub{margin-top:22px;font-family:var(--x-display);font-weight:500;font-size:clamp(1.3rem,1rem + 1.2vw,2rem);line-height:1.25;
  letter-spacing:-.015em;color:#fff;max-width:30ch;text-wrap:balance}
.x-lede{margin-top:22px;max-width:62ch;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.65;color:var(--x-ink2);text-wrap:pretty}
.x-ghost{position:absolute;right:-.04em;top:-.12em;font-family:var(--x-display);font-weight:700;font-size:clamp(220px,30vw,460px);
  line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.03);pointer-events:none;user-select:none}
.x-hero-after{max-width:1200px;margin:0 auto;padding:clamp(40px,6vw,88px) 24px clamp(56px,7vw,110px)}

/* a chapter: card, Sim's words, the reel, plain words, the gauge it lights */
section.x-ch{position:relative;border-top:1px solid var(--x-line);padding:clamp(72px,9vw,130px) 0 clamp(48px,6vw,90px);overflow:clip}
.x-card{position:relative;max-width:1200px;margin:0 auto;padding:0 24px;min-height:min(62vh,640px);display:flex;flex-direction:column;justify-content:center}
.x-card .x-ghost{top:50%;transform:translateY(-50%)}
.x-eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--x-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--x-ink2)}
.x-eyebrow__num{color:var(--x-quiet);letter-spacing:.14em;font-size:.82rem}
.x-eyebrow__rule{display:inline-block;width:22px;height:1px;background:#33adff}
.x-h2{position:relative;margin-top:18px;font-family:var(--x-display);font-weight:700;font-size:clamp(2.4rem,1.2rem + 4.6vw,5.4rem);
  line-height:1;letter-spacing:-.035em;color:#fff;text-wrap:balance;max-width:16ch}
.x-arc{margin-top:18px;font-size:clamp(1.05rem,.95rem + .6vw,1.4rem);line-height:1.45;color:var(--x-ink2);max-width:42ch;text-wrap:pretty}
/* the card assembles when it arrives (reel.js toggles .is-on on a step; alive.js reveals on scroll) */
html.o-reel-js .x-card.is-on .x-h2,html.o-reel-js .x-card.is-on .x-arc{animation:x-rise .9s var(--x-ease) both}
html.o-reel-js .x-card.is-on .x-arc{animation-delay:.25s}
@keyframes x-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.x-words{max-width:68ch;margin:clamp(28px,4vw,48px) auto clamp(40px,6vw,80px);padding:0 24px;display:grid;gap:18px}
.x-words p{font-size:1.0625rem;line-height:1.7;color:var(--x-ink);text-wrap:pretty}
.x-words--after{margin-top:clamp(40px,6vw,80px)}
.x-asof{max-width:68ch;margin:-24px auto 40px;padding:0 24px;font-family:var(--x-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--x-quiet)}
.x-teach{max-width:68ch;margin:clamp(40px,6vw,72px) auto 0;padding:22px 26px 22px 30px;position:relative;
  border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035)}
.x-teach::before{content:"";position:absolute;left:14px;top:22px;bottom:22px;width:1px;background:var(--x-gold);opacity:.8}
.x-teach__label{font-family:var(--x-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--x-quiet);margin-bottom:10px}
.x-teach ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.x-teach li{font-size:.98rem;line-height:1.6;color:var(--x-ink2);text-wrap:pretty}
.x-gauge{max-width:68ch;margin:24px auto 0;padding:0 24px;display:flex;align-items:center;gap:10px;font-family:var(--x-mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--x-ink2)}
.x-gauge b{color:#fff;font-weight:600}
.x-gauge__ring{width:14px;height:14px;border-radius:50%;border:2px solid #33adff;box-shadow:0 0 12px rgba(51,173,255,.5);flex:0 0 auto}

/* the reel on this page: the caption keeps Sim's voice, under the stage */
section.o-shot{position:relative}
html:not(.o-reel-js) section.o-shot{max-width:1280px;margin:clamp(28px,5vw,64px) auto;padding:0 16px}
.o-shot__stage{position:relative;aspect-ratio:16/9;margin:0 auto}
.o-shot__stage > [data-composition-id]{position:absolute;inset:0}
.o-shot__pin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.o-shot__caption{color:var(--x-ink)}
.o-shot__beats,.o-shot__what{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:not(.o-reel-js) .o-shot__what{position:static;width:auto;height:auto;clip-path:none;white-space:normal;max-width:68ch;margin:10px auto 0;font-size:.9rem;color:var(--x-quiet)}

/* the light era: the page arrives in morning light at ex-13c and stays there to the close */
[data-era="light"]{--x-ink:#16101e;--x-ink2:#57525f;--x-quiet:rgba(22,16,30,.55);--x-gold:#b8862f;--x-line:rgba(22,16,30,.1);
  --o-reel-ink:#16101e;--o-reel-gold:#b8862f;color:#16101e}
.x-era[data-era="light"],section.x-ch[data-era="light"]{background:linear-gradient(180deg,#f6f1e7 0%,#efe6d3 100%)}
.x-era[data-era="light"]{padding:clamp(48px,7vw,110px) 0 clamp(48px,6vw,90px);margin-bottom:calc(-1 * clamp(48px,6vw,90px));
  box-shadow:0 -120px 120px -40px #efe6d3 inset}
.x-era[data-era="light"]::before{content:"";display:block;height:clamp(80px,12vw,180px);margin-top:calc(-1 * clamp(48px,7vw,110px));
  background:linear-gradient(180deg,#050308,#f6f1e7)}
section.x-ch[data-era="light"]{border-top:0}
[data-era="light"] .x-h2,[data-era="light"] .x-gauge b{color:#16101e}
[data-era="light"] .x-h2 span{background:linear-gradient(108deg,#b8862f 0%,#7a5a1c 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
[data-era="light"] .x-ghost{color:rgba(22,16,30,.045)}
[data-era="light"] .x-teach{border-color:rgba(22,16,30,.12);background:rgba(255,255,255,.55)}
[data-era="light"] .o-shot__caption{color:#16101e;text-shadow:0 0 18px rgba(255,253,248,.85)}
[data-era="light"] dfn[data-tip]{text-decoration-color:rgba(22,16,30,.45)}

/* the foot */
.x-foot{background:#0b1420;padding:clamp(40px,6vw,80px) 24px clamp(48px,6vw,90px)}
.x-foot__inner{max-width:1200px;margin:0 auto}
.x-foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:56px}
@media (max-width:820px){.x-foot-grid{grid-template-columns:minmax(0,1fr)}}
.x-foot-card{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035);padding:22px 24px}
.x-foot-h{font-family:var(--x-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--x-quiet);font-weight:500;margin-bottom:10px}
.x-calls{list-style:none;margin:0;padding:0;display:grid;gap:0}
.x-calls li{padding:9px 0 9px 22px;border-top:1px solid rgba(255,255,255,.08);font-size:.92rem;line-height:1.5;color:var(--x-ink);position:relative}
.x-calls li::before{content:"";position:absolute;left:0;top:1.05em;width:12px;height:2px;background:var(--x-gold);transform:skewX(-30deg)}
.x-faq{margin-top:14px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035);padding:22px 24px 8px}
.x-faq__q{border-top:1px solid rgba(255,255,255,.08)}
.x-faq__q > summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;
  font-family:var(--x-display);font-weight:600;font-size:1.02rem;line-height:1.35;color:#fff}
.x-faq__q > summary::-webkit-details-marker{display:none}
.x-faq__q > summary::after{content:"+";flex:0 0 auto;font-family:var(--x-mono);font-weight:400;color:var(--x-gold);transition:transform .3s var(--x-ease)}
.x-faq__q[open] > summary::after{transform:rotate(45deg)}
.x-faq__q p{padding:0 0 16px;max-width:72ch;font-size:.94rem;line-height:1.65;color:var(--x-ink2);text-wrap:pretty}
details.x-sources{margin-top:14px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035);padding:0 24px}
details.x-sources > summary{cursor:pointer;padding:18px 0;font-family:var(--x-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--x-ink2)}
.x-src{columns:2 320px;column-gap:32px;padding-bottom:20px}
.x-src__group{break-inside:avoid;margin-bottom:16px}
.x-src__ch{font-family:var(--x-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--x-quiet);margin-bottom:6px}
.x-src ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.x-src li{font-size:.86rem;line-height:1.5;color:var(--x-ink2)}
.x-src a{color:#8fcbff}
.x-src__shot{font-weight:500;color:var(--x-ink)}
.x-src__note{display:block;font-family:var(--x-mono);font-size:.72rem;font-variant:small-caps;letter-spacing:.04em;color:var(--x-quiet);margin-top:1px}
.x-about{display:flex;align-items:center;gap:18px;margin-top:14px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.035);padding:24px}
.x-about img{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 auto;border:2px solid rgba(255,255,255,.2)}
.x-about__eyebrow{font-family:var(--x-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--x-quiet)}
.x-about h3{font-family:var(--x-display);font-weight:700;font-size:1.4rem;margin-top:6px;color:#fff}
.x-about p:last-child{font-size:.86rem;color:var(--x-ink2);margin-top:4px;line-height:1.45}

/* the recording of the presentation, at the top: a click-to-load facade over the page's own opening frame */
.x-video{position:relative;z-index:1;max-width:1200px;margin:clamp(32px,4vw,56px) auto clamp(28px,4vw,56px)}
.x-video__frame{position:relative;display:block;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:22px;
  border:1px solid rgba(230,207,154,.22);background:#050308;color:#fff;text-decoration:none;isolation:isolate;
  box-shadow:0 40px 120px -48px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;
  transition:border-color .5s var(--x-ease),box-shadow .5s var(--x-ease)}
.x-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.015);
  transition:transform 1.4s var(--x-ease),filter .8s var(--x-ease);filter:saturate(1.02) brightness(.92)}
.x-video__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,3,8,0) 42%,rgba(5,3,8,.55) 78%,rgba(5,3,8,.86) 100%),
             radial-gradient(60% 60% at 50% 46%,rgba(5,3,8,0) 0%,rgba(5,3,8,.28) 100%)}
.x-video__play{position:relative;flex:0 0 auto;width:clamp(56px,6vw,88px);height:clamp(56px,6vw,88px);border-radius:50%;
  display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#f6e6bd 0%,#e6cf9a 46%,#b8862f 100%);
  box-shadow:0 0 0 1px rgba(255,240,205,.5) inset,0 18px 50px -12px rgba(230,207,154,.55);
  transition:transform .45s var(--x-ease),box-shadow .45s var(--x-ease)}
.x-video__play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(230,207,154,.45);
  animation:x-ring 2.8s var(--x-ease) infinite}
.x-video__play svg{width:42%;height:42%;margin-left:6%;fill:#16101e}
.x-video__meta{position:absolute;z-index:2;left:clamp(16px,3vw,40px);right:clamp(16px,3vw,40px);bottom:clamp(14px,2.6vw,34px);
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);text-align:left}
.x-video__words{display:grid;gap:6px;min-width:0}
.x-video__label{font-family:var(--x-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--x-gold)}
.x-video__title{font-family:var(--x-display);font-weight:700;font-size:clamp(1.1rem,.8rem + 1.3vw,2rem);line-height:1.15;
  letter-spacing:-.015em;color:#fff;text-wrap:balance;max-width:28ch}
.x-video__date{font-family:var(--x-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,237,242,.6)}
.x-video__frame:hover,.x-video__frame:focus-visible{border-color:rgba(230,207,154,.5);box-shadow:0 40px 120px -40px rgba(0,0,0,.9),0 0 60px -20px rgba(230,207,154,.35)}
.x-video__frame:hover .x-video__poster,.x-video__frame:focus-visible .x-video__poster{transform:scale(1.04);filter:saturate(1.08) brightness(1)}
.x-video__frame:hover .x-video__play,.x-video__frame:focus-visible .x-video__play{transform:scale(1.08)}
.x-video__frame:focus-visible{outline:2px solid var(--x-gold);outline-offset:4px}
.x-video__frame--live{border-color:rgba(255,255,255,.12)}
.x-video__frame--live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.x-video__cap{max-width:68ch;margin:14px auto 0;text-align:center;font-size:.9rem;line-height:1.55;color:var(--x-quiet);text-wrap:pretty}
.x-video__cap a{color:var(--x-ink2);text-decoration:underline;text-decoration-color:rgba(230,207,154,.5);text-underline-offset:3px}
.x-video__cap a:hover{color:#fff}
@keyframes x-ring{0%{transform:scale(.92);opacity:.0}35%{opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media (max-width:600px){
  .x-video{margin:26px -8px 22px}
  .x-video__frame{border-radius:16px}
  .x-video__play{width:48px;height:48px}
  .x-video__title{font-size:1rem}
  .x-video__date{display:none}
  .x-video__label{display:none}
}
html.is-present .x-video{display:none}

/* the chrome over the reel (assets/levels/chrome.js sets the classes; present mode is untouched):
   the fixed nav never covers a pinned stage, so the pin starts under it */
html.o-reel-js:not(.is-present){--x-nav-h:64px;--o-pin-top:var(--x-nav-h);--o-pin-h:calc(100svh - var(--x-nav-h))}
@media (max-width:560px){html.o-reel-js:not(.is-present){--x-nav-h:56px}}
/* captions run wider than the reel's default, so a long one takes two lines, not four */
@media (min-width:900px){html.o-reel-js:not(.is-present) .o-shot__caption{max-width:min(100%,48em)}}
/* over the morning light the glass chrome goes solid, so it never turns muddy grey on cream */
html.x-nav-light:not(.is-present) header[data-nav]{background:rgba(11,20,32,.94)!important}
html.x-nav-light button.x-soundpill,html.x-nav-light .o-keychip.o-keychip{background:rgba(11,20,32,.94)}
/* in the foot the key chip steps aside, off the footer's words */
html.x-at-foot .o-keychip.o-keychip{opacity:0;pointer-events:none;transition:opacity .4s var(--x-ease)}
/* scene shots melt into the page at their edges instead of sitting in a box */
html:not(.is-present) .x-storm section.o-shot:is([data-look="parallax"],[data-look="iso"],[data-look="light"]) .o-shot__stage{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-composite:intersect}

/* phones: a shot with a portrait twin (section[data-portrait]) shows it on a 4:5 stage, narrow and upright only;
   landscape phones, desktops and present mode keep the 16:9 composition. The inactive twin is hidden with visibility,
   not display, so its gradients still resolve and GSAP can still measure it while it builds. */
.o-shot__stage > [data-composition-id][data-orient="p"]{visibility:hidden;pointer-events:none}
@media (max-width:600px) and (orientation:portrait){
  html:not(.is-present) section.o-shot[data-portrait] .o-shot__stage{aspect-ratio:4/5}
  html.o-reel-js:not(.is-present) section.o-shot[data-portrait] .o-shot__stage{width:min(100%,calc((var(--o-pin-h) - var(--o-cap-room)) * 4 / 5))}
  html:not(.is-present) section.o-shot[data-portrait] .o-shot__stage > [data-composition-id]:not([data-orient="p"]){visibility:hidden;pointer-events:none}
  html:not(.is-present) section.o-shot[data-portrait] .o-shot__stage > [data-composition-id][data-orient="p"]{visibility:visible;pointer-events:auto}
}

/* present mode: the chrome steps back, the stage is the frame */
html.is-present .x-words,html.is-present .x-teach,html.is-present .x-gauge,html.is-present .x-asof{opacity:.0;pointer-events:none;height:0;margin:0;padding:0;overflow:hidden;border:0}
html.is-present .x-card{min-height:var(--o-stage-h,100vh)}
html.is-present .x-onescreen{min-height:var(--o-stage-h,100vh);display:flex;flex-direction:column;justify-content:center}

/* Scarlet's sound pill: bottom right, out of the stage's way; present mode hides it (M does the same) */
button.x-soundpill{position:fixed;right:16px;bottom:16px;z-index:520;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(11,20,32,.62)}
.x-voice::before{content:"SCARLET"}

@media (prefers-reduced-motion:reduce){html.o-reel-js .x-card.is-on .x-h2,html.o-reel-js .x-card.is-on .x-arc{animation:none}
  .x-video__play::after{animation:none;opacity:0}.x-video__poster,.x-video__play{transition:none}}
@media print{main.x-storm,.x-foot{background:none}}

/* ---- Levels of the Levels: depth in drawers, the legend, the board rows, the "what would make me wrong" card ------- */
.x-words{max-width:56ch;gap:14px}
.x-words p{font-size:clamp(1.12rem,1rem + .4vw,1.3rem);line-height:1.55;color:var(--x-ink)}
details.lv-deeper{max-width:72ch;margin:clamp(28px,4vw,44px) auto 0;padding:0 24px}
details.lv-deeper > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 16px;
  border:1px solid var(--x-line);border-radius:999px;background:rgba(255,255,255,.03);font-family:var(--x-mono);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--x-ink2);transition:border-color .3s var(--x-ease),color .3s var(--x-ease),background .3s var(--x-ease)}
details.lv-deeper > summary::-webkit-details-marker{display:none}
details.lv-deeper > summary::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--x-gold);box-shadow:0 0 12px rgba(230,207,154,.6)}
details.lv-deeper > summary::after{content:"";width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--x-ease);margin-left:4px}
details.lv-deeper[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
details.lv-deeper > summary:hover,details.lv-deeper > summary:focus-visible{border-color:rgba(230,207,154,.45);color:var(--x-ink);background:rgba(230,207,154,.05)}
.lv-deeper__body{margin-top:22px;padding:26px 30px;border:1px solid var(--x-line);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));display:grid;gap:16px}
.lv-deeper__body p{font-size:1.02rem;line-height:1.72;color:var(--x-ink2);text-wrap:pretty}
html.o-reel-js details.lv-deeper[open] .lv-deeper__body{animation:x-rise .6s var(--x-ease) both}
/* the legend: two columns of meaning, the mark in mono */
.lv-legend table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.lv-legend th,.lv-legend td{padding:12px 14px 12px 0;border-top:1px solid var(--x-line);text-align:left;vertical-align:top;color:var(--x-ink2)}
.lv-legend thead th{border-top:0;font-family:var(--x-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--x-quiet);font-weight:500}
.lv-legend tbody th{font-family:var(--x-display);font-weight:700;color:var(--x-ink);width:28%}
.lv-legend td:last-child{color:var(--x-ink)}
.lv-legend__rules{margin-top:20px}
.lv-legend__note{font-size:.9rem !important;color:var(--x-quiet) !important}
/* the board rows an act lights: chips, verdict in gold */
.lv-board-rows{max-width:72ch;margin:clamp(28px,4vw,44px) auto 0;padding:0 24px}
.lv-board-rows ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lv-board-rows li{display:inline-flex;align-items:baseline;gap:10px;padding:9px 16px;border:1px solid var(--x-line);border-radius:999px;background:rgba(255,255,255,.025)}
.lv-board-rows li span{font-family:var(--x-display);font-weight:700;font-size:.95rem;color:var(--x-ink)}
.lv-board-rows li b{font-family:var(--x-mono);font-weight:500;font-size:.66rem;letter-spacing:.16em;color:var(--x-gold)}
/* what would make me wrong */
.lv-wrong{max-width:64ch;margin:clamp(40px,6vw,72px) auto 0;padding:26px 30px;border:1px solid rgba(184,134,47,.35);border-radius:18px;background:rgba(255,253,248,.55)}
.lv-wrong ol{margin:0 0 14px;padding-left:1.2em;display:grid;gap:8px}
.lv-wrong li,.lv-wrong p{font-size:1.02rem;line-height:1.6;color:#16101e}
[data-era="light"] details.lv-deeper > summary{color:#57525f;border-color:rgba(22,16,30,.14);background:rgba(255,255,255,.5)}
[data-era="light"] .lv-deeper__body{border-color:rgba(22,16,30,.12);background:rgba(255,255,255,.5)}
[data-era="light"] .lv-deeper__body p{color:#16101e}

/* ---- The dawn (Sim, 5 Nov 2026: "these pages slowly go from darkness to light over time"). Each act's ground continues
   from the last: deep night, blue hour, violet, dusk rose, then a long sunrise into the close's morning cream. The shots
   are transparent, so their light sits on the sky of their own act. Contrast stays AA for the light ink through c07. */
section.x-ch{border-top-color:rgba(255,255,255,.05)}
section.x-ch#c01{background:linear-gradient(180deg,#070b14 0%,#0a1220 100%)}
section.x-ch#c02{background:linear-gradient(180deg,#0a1220 0%,#0d1626 100%)}
section.x-ch#c03{background:linear-gradient(180deg,#0d1626 0%,#121a2c 100%)}
section.x-ch#c04{background:linear-gradient(180deg,#121a2c 0%,#171c31 100%)}
section.x-ch#c05{background:linear-gradient(180deg,#171c31 0%,#1e1e35 100%)}
section.x-ch#c06{background:linear-gradient(180deg,#1e1e35 0%,#282237 100%)}
section.x-ch#c07{background:linear-gradient(180deg,#282237 0%,#352638 72%,#3d2a39 100%)}
/* the sunrise: a long ramp before the close's card, with the sun's first glow low on the horizon */
section.x-ch#close{position:relative;padding-top:0;background:linear-gradient(180deg,#f6f1e7 0%,#efe6d3 100%)}
section.x-ch#close::before{content:"";display:block;height:clamp(420px,78vh,900px);margin-bottom:clamp(40px,6vw,80px);
  background:
    radial-gradient(120% 60% at 50% 100%,rgba(255,226,170,.55) 0%,rgba(255,226,170,0) 60%),
    linear-gradient(180deg,#3d2a39 0%,#5a3a44 18%,#8a5a52 34%,#c08566 50%,#e2b07f 64%,#f0d3a6 78%,#f5e8cf 90%,#f6f1e7 100%)}
section.x-ch#close .x-era[data-era="light"]::before{display:none}
section.x-ch#close .x-era[data-era="light"]{background:none;padding-top:0;margin-bottom:0}
@media (prefers-reduced-motion:no-preference){
  html.o-reel-js section.x-ch .x-card,html.o-reel-js section.x-ch .x-words,html.o-reel-js details.lv-deeper,html.o-reel-js .lv-board-rows{
    transition:opacity 1.2s cubic-bezier(.2,.6,.2,1),transform 1.2s cubic-bezier(.2,.6,.2,1)}
}

/* ---- the close: the steps, and the dawn ------------------------------------------------------------------------- */
.lv-steps{max-width:880px;margin:clamp(56px,8vw,110px) auto 0;padding:0 24px}
.lv-steps__lead{max-width:60ch;font-size:clamp(1.08rem,1rem + .35vw,1.25rem);line-height:1.6;color:#57525f;margin:0 0 30px;text-wrap:pretty}
.lv-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px}
.lv-steps li{display:flex;gap:18px;padding:24px 26px;border:1px solid rgba(184,134,47,.28);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,253,248,.5));box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -28px rgba(122,90,28,.35)}
.lv-steps__n{flex:none;font-family:var(--x-mono);font-size:.78rem;letter-spacing:.14em;color:#b8862f;padding-top:5px}
.lv-steps h3{margin:0 0 6px;font-family:var(--x-display);font-weight:700;font-size:1.22rem;letter-spacing:-.01em;color:#16101e}
.lv-steps li p{margin:0;font-size:1rem;line-height:1.6;color:#3d3746;text-wrap:pretty}
.lv-dawn{position:relative;max-width:760px;margin:clamp(80px,11vw,150px) auto 0;padding:0 24px clamp(40px,6vw,80px);text-align:center}
.lv-dawn::before{content:"";position:absolute;left:50%;top:-140px;width:min(820px,120vw);height:520px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(240,200,130,.38) 0%,rgba(240,200,130,0) 70%)}
.lv-dawn__h{position:relative}
.lv-dawn__words{position:relative;display:grid;gap:20px;margin-top:30px}
.lv-dawn__words p{margin:0;font-size:clamp(1.1rem,1rem + .45vw,1.32rem);line-height:1.7;color:#2a2433;text-wrap:pretty}
.lv-dawn__words p.lv-dawn__sign{margin-top:14px;font-family:var(--x-display);font-weight:700;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);letter-spacing:-.01em;
  background:linear-gradient(108deg,#b8862f 0%,#7a5a1c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ======================================================================================================================
   V2 SECTIONS (6 Nov 2026, Sim: "I love how the new charts have that greenish background and how that blends into the
   blues ... the gold accents look absolutely beautiful ... apply that style further into the stuff you inherited from V1").
   The shots' family for everything outside the shots: deep forest-green glows pooled into the navy (the universe layer
   still shows through, these are transparent washes), gold hairline rims and accents, glass where a block stands alone
   (glass.css tokens), LUXE easing, reduced-motion safe. Words and elements are untouched; this block only restyles.
   Page-agnostic: it keys on the kit's classes (x-ch, x-card, x-words, x-teach, lv-deeper ...), tokens at the top.
   ====================================================================================================================== */
:root{--mat-marble:ivory;--mat-glass:rgba(10,22,24,.42);--xs-green-1:31,74,58;--xs-green-2:47,107,82;--xs-green-3:20,56,44;--xs-gold:243,217,160;--xs-gold-d:176,138,69;
  --xs-glass:rgba(10,22,24,.42);--xs-glass-solid:rgba(10,22,24,.86);--xs-rim:rgba(var(--xs-gold),.26)}

/* a glass surface (the kit's glass family, for blocks that stand alone), with a gold hairline ring */
.x-lede,.x-faq,details.x-sources,.x-foot-card,.x-about,.lv-board-rows li,details.lv-deeper > summary{
  background:var(--xs-glass-solid);box-shadow:0 0 0 1px var(--xs-rim) inset,0 1px 0 rgba(255,243,214,.1) inset,0 22px 50px -30px rgba(0,0,0,.7);border-color:transparent}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .x-lede,.x-faq,details.x-sources,.x-foot-card,.x-about,.lv-board-rows li,details.lv-deeper > summary{
    background:var(--xs-glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
}
.x-lede{padding:clamp(18px,2.4vw,28px) clamp(20px,2.8vw,32px);border-radius:20px;max-width:58ch;color:var(--x-ink)}
/* teach cards and drawers are kit text surfaces (.ts, glass.css): full column width, no V1 border or gold bar */
.x-teach.ts,.lv-deeper__body.ts{inline-size:auto;max-inline-size:none;border:0;display:grid;gap:.6em}
.x-teach.ts{max-width:68ch}
.x-teach.ts::before{left:0;top:0;bottom:0;width:auto;opacity:1}
.lv-deeper__body.ts{max-width:none}
.lv-deeper__body.ts p{margin:0}
.x-foot-h,.x-src__ch,.x-eyebrow__num{color:rgba(var(--xs-gold),.78)}

/* the ground of each act: forest-green pools blending into the navy, behind the content, above the universe */
section.x-ch,.x-hero{isolation:isolate}
section.x-ch:not(#close)::before,.x-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(62% 46% at 14% 8%,rgba(var(--xs-green-1),.62),rgba(var(--xs-green-1),0) 72%),
    radial-gradient(46% 38% at 88% 38%,rgba(var(--xs-green-2),.2),rgba(var(--xs-green-2),0) 72%),
    radial-gradient(70% 34% at 50% 100%,rgba(var(--xs-green-3),.5),rgba(var(--xs-green-3),0) 74%)}
section.x-ch:nth-of-type(even):not(#close)::before{background:
    radial-gradient(60% 44% at 86% 10%,rgba(var(--xs-green-1),.58),rgba(var(--xs-green-1),0) 72%),
    radial-gradient(48% 40% at 10% 52%,rgba(var(--xs-green-2),.18),rgba(var(--xs-green-2),0) 72%),
    radial-gradient(70% 34% at 50% 100%,rgba(var(--xs-green-3),.5),rgba(var(--xs-green-3),0) 74%)}
.x-hero::before{background:
    radial-gradient(54% 60% at 18% 30%,rgba(var(--xs-green-1),.7),rgba(var(--xs-green-1),0) 72%),
    radial-gradient(40% 50% at 84% 62%,rgba(var(--xs-green-2),.22),rgba(var(--xs-green-2),0) 72%),
    radial-gradient(34% 40% at 70% 12%,rgba(var(--xs-gold),.07),rgba(var(--xs-gold),0) 72%)}
/* a gold hairline between acts, fading at both ends */
section.x-ch{border-top:1px solid transparent;border-image:linear-gradient(90deg,rgba(var(--xs-gold),0),rgba(var(--xs-gold),.34),rgba(var(--xs-gold),0)) 1}
section.x-ch#close,section.x-ch[data-era="light"]{border-image:none;border-top:0}

/* the chapter opening: gold numeral and rule, the accent word in old gold, the arc in softer ink */
.x-eyebrow__rule{height:1px;width:34px;background:linear-gradient(90deg,rgba(var(--xs-gold),.95),rgba(var(--xs-gold),0))}
.x-storm .x-h1 span,.x-storm .x-h2 span,.x-hero .x-h1 span{
  background:linear-gradient(108deg,#fff3d6 0%,#f3d9a0 34%,#d9b46a 68%,#b08a45 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
[data-era="light"] .x-h2 span{background:linear-gradient(108deg,#b08a45 0%,#6e5326 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
.x-ghost{color:rgba(var(--xs-gold),.045)}
.x-sub{color:#fff3d6}
.x-arc{color:rgba(233,237,242,.78)}
.x-gauge__ring{border-color:rgba(var(--xs-gold),.9);box-shadow:0 0 12px rgba(var(--xs-gold),.45)}
.x-gauge b{color:#f3d9a0}
.x-words p{color:rgba(238,242,246,.94)}

/* the "go deeper" pill and the legend / board chips */
details.lv-deeper > summary{border:0}
details.lv-deeper > summary::before{background:linear-gradient(135deg,#fff3d6,#b08a45);box-shadow:0 0 12px rgba(var(--xs-gold),.6)}
details.lv-deeper > summary:hover,details.lv-deeper > summary:focus-visible{background:rgba(var(--xs-green-2),.28);box-shadow:0 0 0 1px rgba(var(--xs-gold),.55) inset,0 0 30px -10px rgba(var(--xs-gold),.35)}
.lv-legend thead th{color:rgba(var(--xs-gold),.78)}
.lv-legend th,.lv-legend td{border-top-color:rgba(var(--xs-gold),.14)}
.lv-board-rows li b{color:#f3d9a0}
.lv-board-rows li{padding:9px 16px}

/* the foot: forest to navy, gold rim on its cards, gold links */
.x-foot{background:radial-gradient(70% 60% at 20% 0%,rgba(var(--xs-green-1),.6),rgba(var(--xs-green-1),0) 70%),linear-gradient(180deg,#0b1420 0%,#0a1b19 100%)}
.x-calls li{border-top-color:rgba(var(--xs-gold),.14)}
.x-calls li::before{background:linear-gradient(90deg,#f3d9a0,#b08a45)}
.x-faq__q{border-top-color:rgba(var(--xs-gold),.14)}
.x-src a,.x-video__cap a{color:#f3d9a0;text-decoration-color:rgba(var(--xs-gold),.45)}
.x-about img{border-color:rgba(var(--xs-gold),.55)}

/* the cream close: ivory marble with sage and emerald washes and gold veins (the universe paints the cream; this adds the stone) */
html section.x-ch#close .x-era[data-era="light"]{position:relative;isolation:isolate}
html section.x-ch#close .x-era[data-era="light"]::before,html.u-on section.x-ch#close .x-era[data-era="light"]::before{
  /* MARBLE (--mat-marble: sage and emerald clouds, soft grey-umber veins, gold-leaf veins that catch a slow light) */
  content:"";display:block;position:absolute;inset:0;height:auto;margin:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 30% at 12% 12%,rgba(143,176,150,.34),rgba(143,176,150,0) 70%),
    radial-gradient(40% 30% at 90% 38%,rgba(63,143,110,.17),rgba(63,143,110,0) 70%),
    radial-gradient(52% 28% at 28% 78%,rgba(143,176,150,.26),rgba(143,176,150,0) 70%),
    radial-gradient(44% 26% at 80% 94%,rgba(63,143,110,.14),rgba(63,143,110,0) 70%),
    linear-gradient(112deg,rgba(150,138,118,0) 24.6%,rgba(150,138,118,.14) 24.9%,rgba(150,138,118,0) 25.6%),
    linear-gradient(109deg,rgba(150,138,118,0) 41.2%,rgba(150,138,118,.1) 41.4%,rgba(150,138,118,0) 42.2%),
    linear-gradient(123deg,rgba(150,138,118,0) 63.2%,rgba(150,138,118,.12) 63.5%,rgba(150,138,118,0) 64.3%),
    linear-gradient(115deg,rgba(150,138,118,0) 88.1%,rgba(150,138,118,.1) 88.4%,rgba(150,138,118,0) 89.2%),
    linear-gradient(112deg,rgba(176,138,69,0) 31.6%,rgba(176,138,69,.3) 31.9%,rgba(176,138,69,0) 32.3%),
    linear-gradient(118deg,rgba(176,138,69,0) 55.2%,rgba(176,138,69,.24) 55.4%,rgba(176,138,69,0) 55.9%),
    linear-gradient(104deg,rgba(176,138,69,0) 76.7%,rgba(176,138,69,.26) 76.9%,rgba(176,138,69,0) 77.4%)}
/* the gold leaf catching light: one soft highlight drifting down the page's veins (a moving glint, so only without reduced motion) */
@media (prefers-reduced-motion:no-preference){
  html section.x-ch#close .x-era[data-era="light"]::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;
    background:linear-gradient(112deg,transparent 40%,rgba(255,244,214,.55) 50%,transparent 60%) 140% 0/260% 100% no-repeat;animation:xs-leaf 18s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes xs-leaf{0%,15%{background-position:140% 0}60%,100%{background-position:-50% 0}}
}
.lv-steps li,.lv-wrong{
  border:0;background:linear-gradient(160deg,rgba(255,252,243,.82),rgba(236,228,212,.56));
  box-shadow:0 0 0 1px rgba(176,138,69,.4) inset,0 1px 0 rgba(255,255,255,.95) inset,0 22px 46px -30px rgba(80,60,20,.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lv-steps li{position:relative;overflow:hidden}
.lv-steps li::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,transparent 62%,rgba(176,138,69,.16) 62.4%,transparent 63%),radial-gradient(60% 80% at 100% 0%,rgba(143,176,150,.22),transparent 70%)}
.lv-steps__n{color:#8a6420}
.lv-dawn::before{background:radial-gradient(50% 50% at 50% 50%,rgba(143,176,150,.28) 0%,rgba(240,200,130,.2) 40%,rgba(240,200,130,0) 70%)}
[data-era="light"] .x-lede,[data-era="light"] .x-faq,[data-era="light"] .x-foot-card{
  background:linear-gradient(160deg,rgba(255,252,243,.78),rgba(236,228,212,.5));box-shadow:0 0 0 1px rgba(176,138,69,.34) inset,0 1px 0 rgba(255,255,255,.9) inset}
[data-era="light"] details.lv-deeper > summary{background:rgba(255,252,243,.66);box-shadow:0 0 0 1px rgba(176,138,69,.36) inset;color:#57525f}

/* graceful entrance: blocks rise as they enter the view (scroll-driven, LUXE easing); unsupported browsers just show them */
@keyframes xs-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .x-words p,.x-teach,.x-lede,details.lv-deeper,.lv-board-rows li,.lv-steps li,.lv-wrong,.x-foot-card,.x-faq,.lv-dawn__words p{
      animation:xs-in cubic-bezier(.2,.6,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@media (max-width:600px){.x-lede{padding:16px 18px}}
@media print{.x-lede,.x-teach,.lv-deeper__body,.x-faq,.x-foot-card{background:none;box-shadow:none}}

/* ---- the sound cluster's room (Sim, 6 Nov 2026: body text ran under the icons beside Scarlet's orb at ~800px) ------------------
   From 701px the page's text columns keep a right gutter equal to the cluster's reach (--lv-s-reach, sound.css), but only as
   much as the viewport demands: a column that already ends left of the cluster does not move. Each rule below gives the block's
   max width (--xs-wmax) and the padding its own rule already carries (--xs-pad); the shift is added to its right padding.
   Everywhere (phones too) the cluster stands on a frosted glass plate, so a line that scrolls beneath it never fights the icons. */
@media (min-width:701px){
  :is(.x-words,.x-asof,.x-gauge,details.lv-deeper,.lv-board-rows,.x-card,.x-hero-after,.lv-steps,.lv-dawn,.x-teach,.lv-wrong,.x-hero__inner,.x-foot__inner){
    --xs-pad:24px;box-sizing:border-box;   /* border-box: the gutter eats the block's own width, never widens it */
    --xs-shift:max(0px,calc(var(--lv-s-reach,340px) + 16px - max(0px,(100vw - var(--xs-wmax)) / 2) - var(--xs-pad)));
  }
  .x-words{--xs-wmax:56ch}.x-asof,.x-gauge{--xs-wmax:68ch}details.lv-deeper,.lv-board-rows{--xs-wmax:72ch}
  .x-card,.x-hero-after{--xs-wmax:1200px}.lv-steps{--xs-wmax:880px}.lv-dawn{--xs-wmax:760px}
  .x-teach{--xs-wmax:68ch;--xs-pad:26px}.lv-wrong{--xs-wmax:64ch;--xs-pad:30px}
  .x-hero__inner{--xs-wmax:980px;--xs-pad:48px}.x-foot__inner{--xs-wmax:1200px;--xs-pad:48px}
  .x-words,.x-asof,.x-gauge,details.lv-deeper,.lv-board-rows,.x-card,.x-hero-after,.lv-steps,.lv-dawn{padding-right:calc(24px + var(--xs-shift))}
  .x-teach{padding-right:calc(26px + var(--xs-shift))}.lv-wrong{padding-right:calc(30px + var(--xs-shift))}
  .x-hero__inner,.x-foot__inner{padding-right:var(--xs-shift)}
  /* and the rail's room on the left (rail.css: column at 12px, 28px wide, labels open on hover only) */
  :is(.x-words,.x-asof,.x-gauge,details.lv-deeper,.lv-board-rows,.x-card,.x-hero-after,.lv-steps,.lv-dawn,.x-teach,.lv-wrong,.x-hero__inner,.x-foot__inner){
    --xs-lshift:max(0px,calc(52px - max(0px,(100vw - var(--xs-wmax)) / 2) - var(--xs-pad)))}
  .x-words,.x-asof,.x-gauge,details.lv-deeper,.lv-board-rows,.x-card,.x-hero-after,.lv-steps,.lv-dawn{padding-left:calc(24px + var(--xs-lshift))}
  .x-teach{padding-left:calc(30px + var(--xs-lshift))}.lv-wrong{padding-left:calc(30px + var(--xs-lshift))}
  .x-hero__inner,.x-foot__inner{padding-left:var(--xs-lshift)}
}
html[data-presence="on"]:not(.is-present)::after{
  content:"";position:fixed;z-index:518;pointer-events:none;
  right:calc(var(--sp-right,16px) - 8px);bottom:calc(var(--sp-bottom,16px) - 8px);
  width:calc(var(--lv-s-reach,338px) - var(--sp-right,16px) + 4px);height:calc(var(--sp-core,84px) + 16px);border-radius:999px;
  background:rgba(8,16,22,.5);box-shadow:0 0 0 1px rgba(243,217,160,.22) inset,0 1px 0 rgba(255,248,225,.3) inset,0 12px 30px -14px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}

/* THE HERO OBJECT (6 Nov 2026; Sim: "one clean 3D graphic at the hero, always ... something to do with levels").
   Desktop: the title block on the left, the object (kit hero-object) in the right cell, never over the words.
   Phones: the object sits above the title, small, drifting down behind the eyebrow so the hero stays one screen of words. */
.x-hero__inner--top{display:block}
.x-hero__inner--top .ho{--ho-size:300px;margin:-8px auto -34px}
@media (min-width:901px){
  .x-hero__inner--top{max-width:1180px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;column-gap:clamp(8px,2vw,32px)}
  .x-hero__inner--top .x-h1{font-size:clamp(3rem,1rem + 4.6vw,6.2rem)}
  .x-hero__inner--top .ho{--ho-size:560px;margin:-40px -3% -40px 0;justify-self:end}
}