/* 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-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/excuse/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}}