/* Axiom Command, the cinematic case study. Loaded only on /work/axiom-command/ and /work/.
   Scenes are drawn in WebGL by story.js; everything readable here is real DOM and works without it.
   Without script, WebGL or with reduced motion the page falls back to a plain, stacked reading layout. */

.story-page main{position:relative;z-index:1;background:var(--night);color:var(--paper)}
.story-page .site-footer{position:relative;z-index:2}

/* ---------- The stage ---------- */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s cubic-bezier(.16,.84,.24,1)}
.story-live.story-ready .stage{opacity:1}
.story-static .stage{display:none}
.stage canvas{display:block;width:100%;height:100%}
.tags{position:absolute;inset:0;overflow:hidden}
.tag{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;padding:6px 10px;background:var(--night);border:1px solid var(--paper);font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;transition:opacity .35s ease;will-change:transform}

/* ---------- Chapters ---------- */
.chapter{position:relative;padding:calc(var(--header-h) + 48px) var(--m) 72px}
/* Each chapter overlaps the next by one screen, so its text stays pinned until the next chapter's text takes over. */
.story-live .chapter{height:270vh;margin-bottom:-100vh;padding:0}
.story-live #c0{height:250vh}
.story-live #c7{height:150vh;margin-bottom:0}
.panel{display:block}
.story-live .panel{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:calc(var(--header-h) + 8px) var(--m) 56px}
.panel-inner{width:min(36em,100%);padding:clamp(22px,2.4vw,40px);background:rgba(10,10,10,.9);border-top:1px solid var(--paper);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.story-live .panel-inner{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,.84,.24,1),transform 1s cubic-bezier(.16,.84,.24,1)}
.story-live .chapter.is-active .panel-inner{opacity:1;transform:none}
.panel-label{display:flex;gap:14px;align-items:baseline;margin-bottom:clamp(14px,1.6vw,22px);color:var(--night-2)}
.panel-label b{color:var(--paper);font-weight:500}
.panel h1,.panel h2{font-size:clamp(34px,4.6vw,76px);line-height:.96;letter-spacing:-.045em;font-weight:500;max-width:11em}
.panel-lede{margin-top:clamp(16px,1.8vw,26px);color:var(--night-2);font-size:clamp(16px,1.3vw,20px);line-height:1.5}
.panel-lede+.panel-lede{margin-top:14px}
.panel-lede strong{color:var(--paper);font-weight:500}
.panel-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(18px,2vw,30px);font-size:clamp(15px,1.15vw,18px)}
.panel-links .u-link{color:var(--paper)}
.scroll-cue{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(22px,2.4vw,36px);color:var(--night-2)}
.scroll-cue::before{content:"";display:block;width:1px;height:34px;background:var(--paper);transform-origin:top;animation:cue 2.4s cubic-bezier(.16,.84,.24,1) infinite}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.story-static .scroll-cue{display:none}

/* Evidence and rules inside panels */
.readout{margin-top:clamp(16px,1.8vw,26px);border-top:1px solid var(--night-rule)}
.readout div{display:grid;grid-template-columns:7.5em 1fr;gap:4px 16px;padding:11px 0;border-bottom:1px solid var(--night-rule);font-size:clamp(14px,1.05vw,16px);line-height:1.4}
.readout dt{color:var(--paper);font-weight:500}
.readout dd{margin:0;color:var(--night-2)}
.readout dd span{display:block;margin-top:2px;font-size:12px;letter-spacing:.06em;color:var(--night-2)}
.rules{margin:clamp(16px,1.8vw,26px) 0 0;padding:0;list-style:none;border-top:1px solid var(--night-rule)}
.rules li{padding:12px 0;border-bottom:1px solid var(--night-rule);color:var(--night-2);font-size:clamp(14px,1.1vw,17px);line-height:1.45}
.rules strong{display:block;color:var(--paper);font-weight:500;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.02em;margin-bottom:2px}
.source-note{margin-top:14px;color:var(--night-2);font-size:13px;line-height:1.45}

/* Business picker */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,1.8vw,26px)}
.chip{min-height:44px;padding:8px 16px;border:1px solid var(--night-rule);color:var(--night-2);font-size:15px;font-weight:500;transition:border-color .25s ease,color .25s ease,background-color .25s ease}
.chip:hover{border-color:var(--paper);color:var(--paper)}
.chip[aria-checked="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.biz-text{min-height:7.5em}

/* ---------- Finale ---------- */
.panel-cta .email-link{font-size:clamp(22px,3.2vw,52px);margin-top:clamp(18px,2vw,28px)}
.panel-cta .email-link span{display:block}

/* ---------- HUD ---------- */
.story-static .rail,.story-static .hud{display:none}
.panel-mobile{display:none}
@media(max-width:900px){.story-live .panel-mobile{display:block}}
.rail{position:fixed;z-index:60;right:var(--m);top:50%;transform:translateY(-50%);opacity:0;transition:opacity 1s ease}
.story-live.story-ready .rail{opacity:1}
.rail ol{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:44px;min-height:28px;color:var(--night-2)}
.rail .name{position:absolute;right:calc(100% + 14px);padding:4px 8px;background:var(--night);border:1px solid var(--night-rule);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s ease}
.rail a{position:relative}
.rail a::after{content:"";display:block;width:14px;height:2px;background:currentColor;transition:width .3s cubic-bezier(.16,.84,.24,1),background-color .3s ease}
.rail a:hover::after,.rail a:focus-visible::after,.rail a[aria-current="step"]::after{width:30px;background:var(--paper)}
.rail a:hover .name,.rail a:focus-visible .name{opacity:1}
.rail .num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hud{position:fixed;z-index:60;left:var(--m);bottom:18px;display:flex;gap:12px;align-items:baseline;color:var(--night-2);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:opacity 1s ease;pointer-events:none}
.story-live.story-ready .hud{opacity:1}
.hud-n{color:var(--paper)}

/* ---------- Select screen (/work/) ---------- */
.pick{position:relative;min-height:max(660px,100svh);display:flex;align-items:center;padding:calc(var(--header-h) + 3svh) var(--m) clamp(72px,9svh,110px);background:var(--night);color:var(--paper);overflow:hidden}
.pick-view{position:absolute;inset:0;z-index:0;pointer-events:none}
.pick-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s cubic-bezier(.16,.84,.24,1)}
.pick-ready .pick-view canvas{opacity:1}
.pick-view .mark{position:absolute;right:12%;top:50%;height:58%;width:auto;transform:translateY(-50%)}
.pick-live .pick-view .mark{display:none}
.pick-copy{position:relative;z-index:1;width:min(100%,42em);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.8vw,24px)}
.pick-copy .label{color:var(--night-2)}
.pick-title{font-size:clamp(64px,11vw,200px);line-height:.86;letter-spacing:-.055em;font-weight:500}
.pick-list{width:100%;margin:clamp(8px,1.4vw,20px) 0 0;padding:0;list-style:none;border-top:1px solid var(--paper);border-bottom:1px solid var(--night-rule)}
.pick-item{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2vw,32px);padding:clamp(20px,2.4vw,34px) 0}
.pick-item::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,.84,.24,1)}
.pick-item:hover::after,.pick-item:focus-visible::after{transform:scaleX(1)}
.pick-n{align-self:start;padding-top:.5em;color:var(--night-2);font-size:12px;font-weight:500;letter-spacing:.18em}
.pick-body{display:flex;flex-direction:column;gap:8px}
.pick-name{font-size:clamp(28px,3.1vw,58px);line-height:.95;letter-spacing:-.045em;font-weight:500}
.pick-meta{color:var(--night-2);font-size:clamp(14px,1.1vw,17px)}
.pick-go{display:inline-flex;align-items:baseline;gap:.4em;font-size:0;font-weight:500}
.pick-go .ico{font-size:clamp(20px,1.7vw,30px)}
.pick-item{transition:opacity .4s ease}
.pick-live .pick-item:not(.is-current){opacity:.5}
.pick-item:hover .pick-go .ico,.pick-item:focus-visible .pick-go .ico{transform:translateX(.25em)}
.pick-desc{max-width:30em;color:var(--night-2);font-size:clamp(16px,1.3vw,20px);line-height:1.5}
.pick-alt{font-size:clamp(15px,1.15vw,18px)}
.pick-alt .u-link{color:var(--night-2)}
.pick-alt .u-link:hover{color:var(--paper)}
.pick-foot{position:absolute;z-index:1;left:var(--m);right:var(--m);bottom:clamp(18px,3svh,32px);max-width:44em;color:var(--night-2);font-size:13px;line-height:1.45}
.warp-veil{position:absolute;inset:0;z-index:2;background:var(--night);opacity:0;pointer-events:none;transition:opacity .55s ease .35s}
.is-warping .warp-veil{opacity:1}
.is-warping .pick-copy{opacity:0;transition:opacity .45s ease}
@media (scripting:enabled){
  .pick-copy>*{animation:pick-rise 1.1s cubic-bezier(.16,.84,.24,1) both}
  .pick-copy>*:nth-child(2){animation-delay:.08s}
  .pick-copy>*:nth-child(3){animation-delay:.2s}
  .pick-copy>*:nth-child(4){animation-delay:.32s}
  .pick-copy>*:nth-child(5){animation-delay:.42s}
  .pick-list{position:relative}
  .pick-foot{animation:fade-in 1.4s ease .9s both}
}
@keyframes pick-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .story-live .panel{align-items:flex-end;padding:calc(var(--header-h) + 8px) 16px 52px}
  .panel-inner{width:100%;padding:20px}
  .panel h1,.panel h2{font-size:clamp(30px,8.4vw,52px)}
  .panel-lede{font-size:16px}
  .readout div{grid-template-columns:6.5em 1fr}
  .biz-text{min-height:0}
  .rail{display:none}
  .tag{padding:4px 7px;letter-spacing:.08em}
  .story-live .panel-extra{display:none}
  .hud{bottom:12px;left:16px}
  .pick{align-items:flex-start;padding-top:calc(var(--header-h) + 42svh);padding-bottom:clamp(96px,14svh,140px)}
  .pick-view{bottom:auto;height:calc(var(--header-h) + 42svh)}
  .pick-view .mark{right:50%;transform:translate(50%,-50%);top:58%;height:50%}
}
@media(max-width:900px) and (max-height:620px){
  .story-live .panel{align-items:center}
  .panel-inner{max-height:calc(100svh - var(--header-h) - 60px);overflow:auto}
}
@media(prefers-reduced-motion:reduce){
  .stage,.panel-inner,.rail,.hud,.pick-view canvas,.pick-item::after{transition:none}
  .pick-copy>*,.pick-foot{animation:none}
  .scroll-cue::before{animation:none;transform:none}
}
@media print{
  .stage,.rail,.hud{display:none}
  .story-live .chapter{height:auto;padding:24px 0}
  .story-live .panel{position:static;height:auto;padding:0}
  .story-live .panel-inner{opacity:1;transform:none}
}

/* The readout follows the beat the scene is showing */
.story-live .readout div{opacity:.42;transition:opacity .4s ease}
.story-live .readout div.is-on{opacity:1}
.story-live .readout div.is-on dt::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--paper)}