/* THE HERO · a working instrument, with the source recording in view.
   The opening title and Viewer recede as the measured dial arrives. */
:root{--t-display:clamp(42px,min(5.4vw,11vh),76px);--t-display-2:var(--t-display)}
.sticky{--hero-k:0}
.title{top:clamp(125px,18vh,178px);width:min(780px,calc(100% - var(--gutter)*2))}
.title h1{display:block;margin:0}
.title .hero-beyond,.title h1 em{display:block;margin:0;text-align:left;
  text-shadow:0 0 40px rgba(4,4,4,.96),0 0 100px #040404}
.title h1 em{margin-top:5px}
.hero-deck{margin:28px 0 0;max-width:47ch;font:400 var(--t-body)/1.65 var(--sans);
  color:var(--text-2);text-shadow:0 0 24px #040404,0 0 54px #040404}
.hero-orientation{--orientation-step:calc((100% - var(--gutter) * 2 - var(--col-gap) * 11) / 12 + var(--col-gap));
  position:absolute;top:50%;left:calc(var(--gutter) + var(--orientation-step) * 8);
  width:calc(var(--orientation-step) * 4 - var(--col-gap));
  transform:translateY(-50%);margin:0;text-align:left;font:400 var(--t-body)/1.8 var(--sans);
  color:var(--muted)}
.hero-orientation.act-1{opacity:var(--orient-k1,0)}
.hero-orientation.act-2{opacity:var(--orient-k2,0);color:var(--text-2)}

/* ---- the panel --------------------------------------------------------- */
.hero-shot{position:absolute;inset:0;z-index:1;display:grid;place-items:center end;
  padding:42px var(--gutter) 0 0;
  pointer-events:none;
  opacity:calc(1 - var(--hero-k));
  transform:scale(calc(1 - var(--hero-k) * .05)) translateY(calc(var(--hero-k) * -28px));
  filter:contrast(1.06) blur(calc(var(--hero-k) * 9px));
  will-change:opacity,transform,filter}
.shot{width:min(830px,65vw);border:1px solid #211f1c;background:#080908;
  box-shadow:0 40px 120px -40px #000;line-height:0;
  opacity:.72;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,.48) 32%,#000 60%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,.48) 32%,#000 60%)}
.shot picture,.shot img{display:block;width:100%;height:auto}

/* ---- the dial is inscribed as the panel leaves ------------------------- */
#dial{opacity:var(--hero-k)}

/* ---- the hero's bottom rule -------------------------------------------- */
.hero-bar{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);
  bottom:clamp(30px,5vh,58px);display:flex;align-items:center;
  justify-content:space-between;gap:24px;pointer-events:auto}
.story-nav{position:static;left:auto;right:auto;bottom:auto;transform:none;
  display:flex;justify-content:flex-start;gap:clamp(16px,2vw,28px)}
.hero-actions{margin:0;display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);
  font:400 var(--t-small)/1.4 var(--sans);color:var(--muted)}
/* The panel above draws its own controls as hairline boxes -- KEEP,
   INVESTIGATE, DISCARD, EXPORT EVIDENCE PACKAGE. The call to action takes the
   same form, so it reads as a control of the instrument rather than a link
   with a rule under it. A filled chip was the other option and it is the only
   solid shape anywhere on the dark half of the page; a ghost box borrows a
   vocabulary the page already speaks. */
.hero-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:12px clamp(18px,1.9vw,26px);border:1px solid var(--hair-2);border-radius:0;
  background:transparent;color:var(--text);line-height:1;font-family:var(--sans);
  letter-spacing:0;text-transform:none;text-decoration:none;
  transition:border-color .25s ease,background-color .25s ease}
.hero-cta:hover{border-color:var(--muted);background-color:rgba(230,226,216,.055)}
.hero-cta::after,.hero-cta::before{display:none!important;content:none!important}

@media (max-width:1100px) and (min-width:821px){.shot{width:70vw}}
/* On phones the capture is a full-width layer, not a reduced desktop panel.
   It enters below the title, loses its edges into black, and clears the controls. */
@media (max-width:820px){
  .sticky{min-height:0}
  .title{top:clamp(98px,13vh,124px);left:var(--gutter);right:var(--gutter);width:auto;transform:none!important}
  .title h1 .hero-beyond,.title h1 em{font-size:clamp(38px,10.8vw,54px);line-height:1.02;letter-spacing:-.055em}
  .hero-deck{margin-top:18px;max-width:37ch;font-size:14px;line-height:1.55}
  .hero-shot{inset:0;place-items:stretch;padding:0;overflow:hidden}
  .shot{position:absolute;top:clamp(278px,38vh,330px);bottom:145px;left:0;right:0;
    width:100%;height:auto;min-height:0;max-width:none;border:0;box-shadow:none;opacity:.92;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 14%,#000 34%,#000 76%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 14%,#000 34%,#000 76%,transparent 100%)}
  .shot picture,.shot img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:brightness(1.22) contrast(1.08)}
  .hero-orientation{left:auto;right:var(--gutter);
    width:calc(var(--orientation-step) * 8 - var(--col-gap));font-size:15px;line-height:1.75}
  .hero-bar{bottom:clamp(16px,2.5vh,24px);flex-direction:column;align-items:stretch;gap:12px}
  .story-nav{width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:0;border-top:1px solid var(--hair-2);padding-top:8px}
  .story-nav button{position:relative;min-width:0;min-height:45px;padding:5px 0 0;
    display:flex;justify-content:center;align-items:flex-start;font-size:11px;letter-spacing:.08em}
  .story-nav button span{display:none}
  .story-nav button.on span{display:block;position:absolute;top:25px;left:50%;
    transform:translateX(-50%);font-size:9px;letter-spacing:0;text-transform:none;
    white-space:nowrap;color:var(--text-2)}
  .hero-actions{display:block;width:100%;margin:0}
  .hero-cta{width:100%;min-height:52px;border-color:var(--text);
    background:var(--text);color:var(--ink);font-size:15px}
  .hero-cta:hover{background:var(--silver);border-color:var(--silver);color:var(--ink)}
  .cap,.cap.l,.cap.r{top:auto;left:var(--gutter);right:var(--gutter);
    bottom:clamp(170px,25vh,230px);max-width:none;text-align:left}
  .cap p:not(.cap-h){font-size:15px;line-height:1.55;max-width:none;margin-left:0}
  #dial{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);
    width:min(80vw,360px);height:min(80vw,360px)}
}
@media (max-width:820px) and (max-height:700px){
  .cap .cap-h{font-size:32px}
  .cap p:not(.cap-h){font-size:14px}
}
@media (max-width:820px) and (max-height:640px){
  .title{top:78px}
  .title h1 .hero-beyond,.title h1 em{font-size:clamp(34px,10.2vw,42px)}
  .hero-deck{margin-top:12px;font-size:13px;line-height:1.45}
  .shot{top:230px;bottom:133px}
  .hero-bar{bottom:12px;gap:9px}
  .hero-cta{min-height:46px}
}
@media (prefers-reduced-motion:reduce){
  /* how-it-works.html's inline <style> already carries a complete
     reduced-motion stage: the sentence stacks, the dial sits absolute at
     top:50px/right:0, the captions drop into flow at max-width:40ch, and the
     stage takes padding:120px var(--gutter) 60px. hero.css loads after it, so
     ANYTHING restated here silently replaces that design -- which is how the
     dial ended up in normal flow, 650px tall, above the panel.

     So this block resets exactly one thing: the absolute positioning that the
     max-width:820px block above introduces. A phone with reduce-motion on
     matches both, and hero.css's own mobile rules would otherwise win over the
     inline reduced-motion ones. Nothing here should re-describe the stage. */
  .hero-shot{position:relative;inset:auto;opacity:1;transform:none;filter:none;margin-bottom:56px}
  .shot{position:relative;inset:auto;width:min(100%,1140px);height:auto;aspect-ratio:auto;
    -webkit-mask-image:none;mask-image:none}
  .shot picture,.shot img{height:auto;object-fit:contain}
  .story-nav{display:none}
  /* Back to the inline block's placement, not into the flow. */
  #dial{position:absolute;top:50px;left:auto;right:0;transform:none;opacity:.55;
    width:min(60vw,650px);height:min(60vw,650px)}
  .title{top:auto;left:auto;right:auto}
  .cap,.cap.l,.cap.r{inset:auto}
  .hero-bar{position:relative;left:auto;right:auto;bottom:auto;margin-top:40px}
  .hero-scroll{display:none}
  .hero-orientation{position:static;transform:none;width:auto;max-width:40ch;text-align:left;margin-bottom:18px}
  .hero-orientation.act-1,.hero-orientation.act-2{opacity:1}
  .hero-orientation.act-2{margin-bottom:40px}
  /* .caps and .title were being shrink-wrapped here and drifting to the
     centre of the stage, so the hero sat off the page's left edge while every
     other section held it. Long-standing; it just shows now that the bottom
     rule is part of the hero. */
  .caps,.title,.hero-bar{width:100%}
}