/* ==========================================================================
   exp33 . structural layer for the intent-graph architecture
   --------------------------------------------------------------------------
   Owned by the SKELETON build. It carries three things and nothing else:

     1. the eight mount points (7 section mounts + the hero film)
     2. the rebuilt hero band
     3. the lower sections this build owns (#how, #delivery, #checker, #start)

   Section builders (REQUIREMENT / INTENT / RADIUS / STALE / AGENTS /
   AGENTUSE / QUEUE / HEROFILM) ship their own stylesheet and never edit this
   file. Colour comes from tokens only, so all seven themes follow.
   ========================================================================== */

/* ==========================================================================
   1. MOUNT POINTS
   Every mount is an EMPTY div. The dashed plate + label render only while the
   div has no ELEMENT children (HTML comments do not count), so dropping real
   markup in removes the placeholder with no CSS change. The reserved heights
   below keep the page composing while all seven mounts are still empty.
   ========================================================================== */
.mount{--mh:360px;}
.mount:not(:has(*)){
  min-height:var(--mh);
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--hair-strong);border-radius:14px;
  background-color:var(--card);
  background-image:radial-gradient(rgba(var(--ink-rgb),.10) 1px,transparent 1.3px);
  background-size:22px 22px;background-position:11px 11px;
}
.mount:not(:has(*))::before{
  content:"mount · " attr(data-mount);
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
}
/* Reserved heights, in page order. Each is sized for the artifact named in the
   mount's contract comment in index.html, so the empty page reads at roughly
   the finished rhythm. */
.mount-requirement{--mh:540px;}   /* head + the requirement artifact card    */
.mount-intent{--mh:640px;}        /* head + CODE GRAPH | PROOF + signature   */
.mount-radius{--mh:640px;}        /* head + interactive fan + readout block  */
.mount-stale{--mh:620px;}         /* head + three-state loop + the set-apart */
.mount-agents{--mh:720px;}        /* head + question fan + agent transcript  */
.mount-agentuse{--mh:560px;}      /* head + four rows + the small loop       */
.mount-queue{--mh:680px;}         /* head + two-column comparison            */

@media (max-width:760px){
  .mount{--mh:420px;}
  .mount-requirement{--mh:560px;}
  .mount-intent{--mh:720px;}
  .mount-radius{--mh:680px;}
  .mount-stale{--mh:700px;}
  .mount-agents{--mh:820px;}
  .mount-agentuse{--mh:660px;}
  .mount-queue{--mh:820px;}
}

/* ==========================================================================
   2. HERO (rebuilt)
   One H1, one subhead, two CTAs, one facts line, one scroll cue. Behind all
   of it, the film container: absolutely positioned across the whole band at
   z-index 0, with every piece of copy on z-index 2 above it.
   ========================================================================== */
.hero33{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:clamp(560px,82vh,900px);
}
.hero33 > .wrap{position:relative;z-index:2;}
/* the copy block takes the free space, so it sits optically centred in the
   band and the cue lands near the fold */
.hero33 > .hero-main{margin-block:auto;}

/* ---- the film slot ------------------------------------------------------
   Spans the hero band and sits UNDER the copy. While the mount is empty it
   renders nothing at all, so the hero simply reads as a clean hero; there is
   no dashed plate here on purpose (a visible placeholder behind the H1 would
   wreck the one screen that has to be perfect).
   HEROFILM contract: put an <svg> (or a <div> wrapping one) directly inside
   .hero-film. Make it fill the box (width:100%;height:100%) and keep every
   stroke and fill at 6-12% against the ground. Nothing inside may take
   pointer events, and nothing may raise its own z-index.
   ------------------------------------------------------------------------- */
.hero-film{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
  contain:paint;
}
.hero-film > *{position:absolute;inset:0;width:100%;height:100%;}
/* Readability guarantee. A soft plate of the page's own ground colour, masked
   to an ellipse behind the copy column, so the film never reduces the copy's
   contrast wherever it happens to be dense. Painted in var(--paper), i.e. the
   exact body ground, so with the mount empty it is invisible in every theme.
   The film builder tunes strength with --film-scrim (0 disables it). */
.hero-film::after{
  content:"";position:absolute;inset:0;
  background:var(--paper);
  opacity:var(--film-scrim,.55);
  /* A wide plateau over the whole copy column, then a long feather, so the
     plate protects H1 through the facts line and still never shows an edge of
     its own in any theme. Verified with a dummy film at 4x the contracted
     contrast budget. */
  -webkit-mask-image:radial-gradient(66% 60% at 50% 44%,#000 0%,#000 34%,rgba(0,0,0,.62) 58%,transparent 94%);
          mask-image:radial-gradient(66% 60% at 50% 44%,#000 0%,#000 34%,rgba(0,0,0,.62) 58%,transparent 94%);
}

/* ---- the copy -----------------------------------------------------------
   No kicker. The H1 is a short line now, so it gets more air above and below
   and it stays the largest type on the page by a clear margin. Themes that
   already tune their own display face (riso, brutal, terminal) keep it.
   ------------------------------------------------------------------------- */
.hero33 .hero-copy h1{max-width:17ch;}
html[data-theme="paper"] .hero33 .hero-copy h1,
html[data-theme="acid"] .hero33 .hero-copy h1,
html[data-theme="olo"] .hero33 .hero-copy h1,
html[data-theme="night"] .hero33 .hero-copy h1{
  font-size:clamp(2.9rem,6.6vw,5.2rem);line-height:1.0;letter-spacing:-.035em;
}
.hero33 .hero-sub{
  margin-top:clamp(1.6rem,2.6vw,2.2rem);
  font-size:clamp(1.14rem,1.5vw,1.34rem);max-width:56ch;
}
.hero33 .cta-row{margin-top:clamp(2rem,3.4vw,2.9rem);}
.hero33 .facts{margin-top:clamp(1.7rem,2.6vw,2.1rem);}

/* the primary CTA is the video trigger in exp33, so the play glyph has to sit
   inside a real button rather than the quiet .btn-video text link */
.btn-play{gap:.62rem;}
.btn-play svg{display:block;flex:0 0 auto;}

/* ---- the scroll cue ---------------------------------------------------- */
.hero-cue{
  position:relative;z-index:2;display:block;
  margin:clamp(2.2rem,4vw,3.4rem) 0 0;
  text-align:center;text-decoration:none;
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
}
.hero-cue i{
  display:block;width:1px;height:28px;margin:.6rem auto 0;
  background:linear-gradient(var(--hair-strong),transparent);
}
.hero-cue:hover{color:var(--ink);}
.hero-cue:hover i{background:linear-gradient(var(--signal),transparent);}

/* per-theme hero exceptions: the tube keeps its left prompt column */
html[data-theme="terminal"] .hero-cue{text-align:left;}
html[data-theme="terminal"] .hero-cue i{margin-left:0;}
html[data-theme="terminal"] .hero33{min-height:clamp(520px,76vh,860px);}
/* brutal has hard geometry: no soft mask plate, it would read as a smudge */
html[data-theme="brutal"] .hero-film::after{
  -webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);
  opacity:calc(var(--film-scrim,.58) * .5);
}

@media (max-width:760px){
  .hero33{min-height:clamp(480px,72vh,720px);}
  .hero33 .hero-sub{font-size:1.12rem;}
}

/* ==========================================================================
   3. LOWER SECTIONS OWNED BY THIS BUILD
   ========================================================================== */

/* ---- shared quiet paragraph (kept from exp32) --------------------------- */
.lp-quiet{margin:1.6rem 0 0;font-size:1.05rem;line-height:1.6;color:var(--muted);}
.lp-rule{border-top:1px solid var(--hair);}

/* ---- #evidence: the label above the three numbers ---------------------- */
.ev-band-lab{
  margin:1.7rem 0 .5rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40);
}
.ev-band-lab + .ev-subject{margin-top:0;}

/* ---- #how: the condensed machinery ------------------------------------- */
.lp-how{grid-template-columns:repeat(4,minmax(0,1fr));}
.lp-how .tile{position:relative;}
.lp-how .tile h3{font-size:1.04rem;letter-spacing:.01em;}
.lp-how .tile p{max-width:none;}
/* on one row the four tiles are a sequence, so each points on to the next */
@media (min-width:1081px){
  .lp-how .tile:not(:last-child) .tile-n::after{
    content:"→";position:absolute;right:1.4rem;top:1.5rem;   /* = .tile padding-top */
    color:var(--ink-40);font-weight:400;letter-spacing:0;line-height:1.4;
  }
}
@media (max-width:1080px){.lp-how{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.lp-how{grid-template-columns:1fr;}}

/* ---- #checker: rows + the two coverage bars (moved from exp32) --------- */
.lp-check{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 3rem;align-items:start;}
.lp-check .fig{margin:0;}
.lp-check .fig-scroll svg{min-width:0;}
.lp-check .plate{fill:var(--card);}
.lp-receipt{font-family:var(--mono);font-size:.78rem;color:var(--muted);}
.lp-receipt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-strong);}
.lp-receipt a:hover{color:var(--signal);border-bottom-color:var(--signal);}

/* ---- #delivery: how teams start --------------------------------------- */
.lp-deliver{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.6rem 3.2rem;align-items:start;}
.lp-deliver .col-h{
  margin:0 0 1rem;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
}
.lp-deliver .row{grid-template-columns:1fr;gap:.42rem;}
.lp-deliver .row p{max-width:54ch;}
.lp-offer{
  margin:clamp(2rem,3.4vw,2.8rem) 0 0;max-width:74ch;
  font-family:var(--mono);font-size:.74rem;line-height:1.75;color:var(--muted);
}
.lp-offer b{color:var(--ink);font-weight:500;}
@media (max-width:900px){.lp-deliver{grid-template-columns:1fr;gap:2.2rem;}}

/* ---- #start: the mission line ----------------------------------------
   The founder's original headline closes the page. It is set at heading scale
   and appears exactly once in the document. The question exp32 used as the
   closing H2 becomes the lead directly under it. */
#start .cl-ask{max-width:28ch;text-wrap:balance;}
#start .cl-lead{
  margin:clamp(1rem,1.8vw,1.4rem) 0 0;max-width:44ch;
  font-family:var(--prose);font-size:clamp(1.1rem,1.5vw,1.3rem);
  line-height:1.5;color:var(--ink-60);
}

/* ---- responsive carry-overs from exp32 -------------------------------- */
.fig svg.lp-mob{display:none;}
@media (max-width:900px){
  .lp-check{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .fig svg.lp-desk{display:none;}
  .fig svg.lp-mob{display:block;min-width:0;}
}

/* reduced motion: nothing in this layer animates, but the film builder's
   timeline must land on its final frame. Declared here so the contract is
   visible in one place. */
@media (prefers-reduced-motion: reduce){
  .hero-film *{animation:none !important;transition:none !important;}
}