/* ============================================================================
   INTELTHERAPY — SECTIONS
   The eight compositions, at their resting state, with animation disabled.

   Rule for this file: every position here is where the element LIVES. Motion
   may bring an element to this position and take it away again, but the
   position itself is owned by CSS, never by a tween's end state.
   ============================================================================ */


/* ============================================================================
   THE ASK WHY GROUNDS

   A ground is a repeating tile, generated deterministically by
   scripts/grounds.js and documented there. Two things matter here:

   1. PHASE. A surface anchored `bottom` and the surface directly below it
      anchored `top` are lattice-aligned at the instant they meet, with no
      arithmetic and no dependence on either element's height. That is why the
      lead is .aw-bottom and the stage is .aw-top.

   2. DRIFT WITHOUT REPAINT. The prototype animated background-position on
      these surfaces every frame. On an element hundreds of vh tall that is a
      full repaint of a very large box, every frame, and it was a major part of
      why the page fought the scroll.

      Here the tile lives on a ::before that overhangs its parent by exactly two
      tiles in each direction, and the drift is a CSS transform on that layer.
      A transform on a composited layer costs the compositor, not the painter,
      and the overhang means a 9px translate can never expose an edge. Because
      the overhang is a whole number of tiles, the lattice is identical to one
      painted on the parent directly, so the phase rule above still holds.

      Every surface in a group runs the same keyframes with the same duration,
      so they translate together and cannot tear apart at a join.

      This is the only place in the project that declares will-change.
   ============================================================================ */

/* A .aw is absolute and fills its host, so ITS HOST MUST BE A CONTAINING BLOCK.
   Every host below is relative, absolute or sticky for that reason. If you ever
   set one to `position:static`, the ground silently resolves against an
   ancestor and paints over the whole section — which is exactly what happened
   to the mobile .art on 5 Aug. */
.aw{position:absolute;inset:0;overflow:hidden}
.aw::before{
  content:'';
  position:absolute;
  /* ONE tile of overhang, not two.

     The overhang exists so a ±9px drift can never expose an edge, and it must
     be a WHOLE number of tiles so the lattice on this pseudo-element is
     identical to one painted on the parent — that is what keeps the
     bottom/top phase rule working with no arithmetic. One tile satisfies both.

     MEASURED 5 Aug: at two tiles the six drift layers totalled 50.6 megapixels
     of CSS area, because the overhang more than doubled both dimensions of
     already very tall boxes and so quadrupled the area. The campaign's lead
     alone was 2945x3786. One tile halves each dimension's addition and cuts
     the total to roughly a quarter of that. Nine pixels of travel does not
     need four hundred pixels of margin. */
  inset:calc(-1 * var(--aw-h)) calc(-1 * var(--aw-w));
  background-image:var(--aw-tile);
  background-repeat:repeat;
  background-size:var(--aw-w) var(--aw-h);
  background-position:left var(--aw-x,0px) top var(--aw-y,0px);
  will-change:transform;
}
.aw-bottom::before{background-position:left var(--aw-x,0px) bottom var(--aw-y,0px)}

/* ----------------------------------------------------------------------------
   EVERY ASK WHY LATTICE USES ONE STICKY, GENTLY DRIFTING MECHANISM.

   Three attempts got here, and the first two are recorded because both were
   reasonable and both are worth not repeating.

   1. THREE PHASE-MATCHED GROUNDS per section — lead, stage, trail — each
      aligned to its neighbour at their shared edge. Measured against Matthew's
      grid overlay: before the dock the lead's ground scrolls with the document
      (host top -496 -> -1036 -> -1532); at the dock the stage's sticky ground
      takes over, frozen (0, 0, 0). The lattice jumped from full scroll rate to
      a dead stop in one frame. The jolt at each end of the frame was a PHASE
      JUMP BETWEEN TWO ELEMENTS, not the drift.

   2. `background-attachment: fixed`. Removed the phase question, but Chrome
      degrades fixed backgrounds to `scroll` inside a position:sticky ancestor —
      which every stage is — so the surfaces disagreed again AND it painted
      horizontal bands of bare colour where the image failed to tile. Reverted.

   3. THIS. One sticky ground per surface, exactly one viewport tall, with a
      negative margin so it takes no flow space. The tile is painted on one
      overhanging pseudo-element so its atmosphere can move on the compositor
      without repainting the sticky host:

        arriving   not yet stuck, so it rises with the incoming ground — the
                   section genuinely arrives, which R6 requires
        docked     stuck at top 0; only the very slow atmospheric layer moves
        leaving    unsticks at its container's bottom and departs with it

      Because every one of them sticks to `top: 0` and paints from `0 0`, they
      all share the viewport as their origin — so there is nothing to phase-
      match and no handover to get wrong, in any section.

   The static version was approved 6 Aug. On 12 Aug Matthew requested a very
   subtle drift on the grey and orange Ask Why treatments. The first pass was
   too directional and too restrained, so the current path wanders gently in
   several directions and returns to its origin without a visible reset.

   VERIFIED on the grey across the whole 8.8-viewport section, 448 samples at
   20px steps: 393 frames completely still, largest frame-to-frame move 20px
   which is exactly the scroll step, zero jumps over 25px. It moves 1:1 with
   the section only while arriving and leaving.
   ---------------------------------------------------------------------------- */
.awfix{
  position:sticky; top:0;
  height:100svh; margin-bottom:-100svh;   /* sticks without taking flow space */
  width:100%; z-index:0; overflow:clip;
}
.awfix::before{
  content:''; position:absolute;
  /* Whole-tile overhang preserves the viewport-origin phase and guarantees
     coverage throughout the small wandering path. `clip`, not `hidden`,
     preserves sticky. */
  inset:calc(-1 * var(--aw-h)) calc(-1 * var(--aw-w));
  background-image:var(--aw-tile);
  background-repeat:repeat;
  background-size:var(--aw-w) var(--aw-h);
  background-position:0 0;
  will-change:transform;
  animation:aw-ground-drift 48s ease-in-out infinite;
}
.awfix[data-aw="art"]::before{
  animation-name:aw-art-ground-drift;
  animation-duration:28s;
  transform-origin:50% 50%;
}

@keyframes aw-ground-drift{
    0%{transform:translate3d(  0px,  0px,0) scale(1)}
   18%{transform:translate3d( 10px, -7px,0) scale(1.002)}
   42%{transform:translate3d( -6px,-11px,0) scale(1.006)}
   68%{transform:translate3d(-11px,  6px,0) scale(1.002)}
   86%{transform:translate3d(  7px, 10px,0) scale(1.004)}
  100%{transform:translate3d(  0px,  0px,0) scale(1)}
}

/* The orange treatment carries the same quiet wander with a barely visible
   breathe. The whole-tile overhang keeps the 0.6% scale change covered. */
@keyframes aw-art-ground-drift{
    0%{transform:translate3d( 0px, 0px,0) scale(1)}
   20%{transform:translate3d( 7px,-5px,0) scale(1.002)}
   44%{transform:translate3d(-5px,-8px,0) scale(1.006)}
   69%{transform:translate3d(-8px, 4px,0) scale(1.002)}
   86%{transform:translate3d( 5px, 7px,0) scale(1.004)}
  100%{transform:translate3d( 0px, 0px,0) scale(1)}
}

/* the section's own children paint above the ground: they come later in the
   DOM and are positioned, so no z-index arms race is needed */
#campaign .lead,#campaign .frame,#campaign .trail{position:relative;z-index:1}

/* The orange surfaces are SHAPED — a pillar, a clipped carry column — so the
   shape stays on the host and only the lattice sits in the sticky child. The
   dissolves moved to the host too, so they still fade along the shape's own
   length rather than along one viewport. */
/* `clip`, NOT `hidden`. MEASURED 6 Aug: with `hidden` the orange grounds never
   froze at all — 0 frozen frames on the pillar out of 313. `overflow:hidden`
   creates a scroll container, so the sticky child resolved against THAT rather
   than the viewport and had nothing to stick to. `clip` clips without creating
   one, which is also why #campaign has used it all along. */
#later .lead .col{overflow:clip}

/* ----------------------------------------------------------------------------
   A2 — THE ASK WHY WATERMARK
   The second and last entry on the atmospheric whitelist (DESIGN_RULES.md).

   `translate`, not `transform`. The mark already carries
   `transform: rotate(-18deg)`, and `translate` is an independent property that
   composes with it — so the drift cannot overwrite the rotation and there is
   no second owner of a single property.

   Time-based, not scroll-linked. The prototype gave these a ±14 yPercent
   scroll parallax on top of a per-frame JS wobble. That is generic parallax,
   which R4 forbids, and it did transform work on every scroll event. Drift
   that is not attached to the wheel cannot make the wheel feel heavy.

   The 19s period is long enough that the drift remains atmospheric.
   ---------------------------------------------------------------------------- */
#top .mark{
  will-change:translate;
  animation:mark-drift 19s ease-in-out infinite alternate;
}

@keyframes mark-drift{
  from{translate:-10px -7px}
  to  {translate: 10px  7px}
}

/* The dissolves are CSS layers on the parent rather than part of the tile,
   because a tile repeats and a dissolve must not. */
.aw-fade-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(158deg, rgba(231,232,234,0) 46%, rgba(231,232,234,.95) 100%);
}
/* The top dissolve is now FULL silver rather than 86%, and reaches a third of
   the way down instead of a quarter.

   Why: frame 7's column and frame 8's carry are separate elements in separate
   sections, and they are only both on screen for about 0.4 of a viewport at the
   handover. During that window one is stuck to the viewport and the other is
   still entering, so their lattices are offset — measured 360px, then 135px,
   against a 420px tile. Two grounds cannot agree there unless they are the same
   element, and the shapes differ too much for that (a straight column against a
   widening diagonal).

   The dissolve was designed to cover this join in the first place. Taking it to
   full opacity at the top edge absorbs the offset rather than papering over it
   with a tween, and costs nothing. */
.aw-fade-carry::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(231,232,234,1) 0%, rgba(231,232,234,0) 34%),
             linear-gradient(to bottom, rgba(242,106,0,0) 46%, rgba(242,106,0,1) 90%);
}


/* ============================================================================
   01  COVER — "Tools load slowly."
   ============================================================================ */
#top{background:var(--paper)}
#top .stage{display:flex;flex-direction:column;align-items:center;justify-content:center}
#top .ring{width:44px;height:44px;margin-bottom:34px}
#top .ring circle{fill:none;stroke:var(--orange);stroke-width:2.2}
#top .kicker{
  font-size:clamp(10px,.95vw,13px);font-weight:700;letter-spacing:.42em;
  text-transform:uppercase;margin-bottom:26px;
}
#top h1{
  font-family:var(--anton);line-height:.9;letter-spacing:0;
  color:var(--orange);text-transform:uppercase;text-align:center;
}
#top .mark{
  position:absolute;right:-3%;bottom:11%;
  font-family:var(--anton);font-size:clamp(34px,4.6vw,70px);line-height:1;
  color:rgba(0,0,0,.07);text-transform:uppercase;
  transform:rotate(-18deg);transform-origin:100% 50%;
}


/* ============================================================================
   02  BE THE FOOL

   THE BLACK COLUMN IS NOT ANIMATED AND IT IS NOT A CONNECTOR.
   .panes appears twice, once filling the lead and once filling the stage, with
   identical geometry. At the instant the frame docks the two are edge to edge
   and read as one continuous form. The black is simply THERE for the whole
   lead-in. Only the grey pane travels, and that is Phase 2's business.
   ============================================================================ */
#fool{background:var(--paper)}
#fool .panes{position:absolute;inset:0;display:flex;overflow:hidden}
/* The lead's black and the stage's black meet at a fractional pixel (341.15px
   at 1324x853), and two separately painted boxes at a fractional boundary
   leave a hairline seam across the column. One pixel of overlap closes it.
   The black is one continuous form; it must not show its join. */
#fool .lead .panes{height:calc(100% + 1px)}
#fool .pane-a{width:41%;background:var(--ink)}
#fool .pane-b{width:59%;background:var(--steel)}

#fool .type{position:absolute;inset:var(--nav) 0 0 0}
#fool .t1{position:absolute;left:3.6%;top:38%;font-family:var(--anton);line-height:.86;
          text-transform:uppercase;color:var(--silver)}
#fool .t2{position:absolute;left:42.2%;top:38%;font-family:var(--anton);line-height:.86;
          text-transform:uppercase;color:var(--orange)}
#fool .sub{position:absolute;left:42.2%;top:63%;font-size:clamp(20px,3.2vw,46px);
           font-weight:300;letter-spacing:-.02em;color:var(--silver)}
#fool .links{position:absolute;right:0;top:71%;width:min(520px,42%)}
/* D008: this is the element that drifted in the prototype. It is structural.
   It has one home and motion may not move it once the frame has landed. */
#fool .foot{position:absolute;right:var(--gutter);bottom:7%;
            font-size:clamp(12px,1.05vw,15px);color:var(--silver);opacity:.92}


/* ============================================================================
   03  THE TOOL — "Right, what is it?"

   The tool is the hero: it sticks for the length of its frame so you dwell on
   it. THE DOCK LENGTH LIVES ON --tool-h AND NOWHERE ELSE. Without the
   min-height the grid is as tall as whatever the pane happens to measure, so
   the pane's content length silently decides how long the hero holds.

   THE TOOL'S DWELL IS ITS OWN PANE TRAVELLING PAST THE PILLAR. It has no
   separate hold: the black column is pinned and the prompt template scrolls
   behind it, so reading time and pane travel are the same distance.

   MEASURED 5 Aug, twice, and the second measurement corrected the first.

   Pass 1: at the inherited 240svh the pane, a stretched grid item, carried
   668px of empty paper below the result panel. I cut --tool-h to 175svh to
   remove it. That worked, and it also cut the reading window to 0.65
   viewports: the composition with the most content on the page ended up with
   the least dwell on it. Right diagnosis, wrong remedy.

   Pass 2: the fault was never the length. It was 1309px of content piled at
   the top of a taller box. Give the content the room rather than take the room
   away. The card rhythm below is now expressed in vh, so the four options and
   the result panel spread across the full sticky height and each card gets its
   own moment against the pillar as it passes.

   260svh, with the pane's content sized to fill it. Raising this without also
   giving the content somewhere to go recreates pass 1's fault.

   2->3 has no colour connector, deliberately (D-note, 4 Aug): the lead is the
   tool's own paper and the prompt template is the only thing crossing it.
   ============================================================================ */
#tool{background:var(--paper)}
#tool .sticky{
  display:grid;grid-template-columns:30% 1fr;
  padding-top:var(--nav);overflow-x:clip;
  min-height:var(--tool-h,680svh);
}
#tool .band{background:var(--ink);position:relative}
#tool .bandinner{
  position:sticky;top:var(--nav);
  height:calc(100svh - var(--nav));
  overflow:hidden;
}
#tool .rot{
  position:absolute;left:24%;top:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  font-family:var(--anton);line-height:1;color:var(--silver);
  text-transform:uppercase;white-space:nowrap;
}
#tool .askthe{
  position:absolute;left:44%;top:50%;transform:translateY(-50%);
  color:var(--silver);font-family:var(--anton);
  font-size:clamp(20px,2.6vw,44px);line-height:1.02;text-align:left;
}
#tool .askthe .sp{
  display:block;font-family:var(--inter);font-size:clamp(11px,1.2vw,17px);
  font-weight:600;letter-spacing:.38em;margin:6px 0 4px;
}

#tool .pane{padding:clamp(40px,12vh,155px) var(--gutter) clamp(70px,26vh,330px) clamp(24px,4vw,60px)}
.field{margin-top:4px}
.field textarea{
  width:100%;height:clamp(200px,44vh,560px);
  border:0;background:transparent;resize:none;outline:none;
  font-family:var(--inter);font-size:clamp(12.5px,1.05vw,15px);
  font-weight:400;line-height:1.6;color:var(--ink);
}
.field textarea::placeholder{color:var(--mute);opacity:.72}
.caveat{margin-top:8px;text-align:right;font-size:11px;color:var(--mute)}

/* vh-based rhythm: the cards spread across the sticky height so each one
   gets its own moment against the pillar as it passes. See the dwell note. */
.opts{margin-top:clamp(40px,23vh,300px)}
.opt{
  display:grid;grid-template-columns:52px 1fr minmax(0,300px);
  align-items:start;gap:22px;
  padding:clamp(30px,25vh,330px) 0;border-top:1px solid rgba(0,0,0,.22);
  cursor:pointer;transition:border-color .3s ease;
}
.opt .ix{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--mute);
         padding-top:9px;transition:color .3s}
.opt .ti{
  display:block;font-family:var(--anton);font-size:clamp(19px,2.4vw,36px);
  line-height:1;text-transform:uppercase;transform-origin:0 50%;
  transition:color .3s, font-size .28s cubic-bezier(.22,1,.36,1);
}
.opt:hover .ti,.opt:focus-visible .ti{font-size:clamp(24px,3.1vw,47px)}
.opt:hover .ix{color:var(--ink)}
.opt .kd{display:block;font-size:clamp(12px,1.05vw,14px);font-weight:600;
         color:var(--mute);margin-top:6px;transition:color .3s}
.opt .ds{font-size:clamp(12.5px,1.08vw,15px);line-height:1.55;color:var(--mute);
         padding-top:4px;transition:color .3s}
.opt[aria-selected="true"]{border-top-color:var(--orange)}
.opt[aria-selected="true"] .ix,
.opt[aria-selected="true"] .ti{color:var(--orange)}
.opt[aria-selected="true"] .kd,
.opt[aria-selected="true"] .ds{color:var(--ink)}

.result{margin-top:clamp(40px,23vh,300px)}
.result .out{
  margin-top:10px;min-height:clamp(300px,68vh,820px);
  border-bottom:1px solid rgba(0,0,0,.35);
  font-size:clamp(12.5px,1.05vw,15px);line-height:1.72;color:var(--ink);
  white-space:pre-wrap;
}


/* ============================================================================
   04  CAMPAIGN

   The ask why ground is painted on the lead, the stage and the trail — one
   field running the full 575vh of the section, phase-matched at both joins.
   The lead and trail scroll, so the ground genuinely arrives and genuinely
   leaves; the stage is sticky, so while the composition is docked the pattern
   is still and only the drift moves it.

   The two verticals live in the stage and travel through that field, which is
   why they read as attached to the campaign rather than as an overlay crossing
   unrelated paper.
   ============================================================================ */
/* THE CAMPAIGN CLIPS ITS OWN CONTENT.

   The two verticals exit downward on a frozen y once their timeline ends,
   while the released stage keeps rising — so they drifted back UP through Come
   to Vent for nearly two viewports after they had already left. Measured 6 Aug
   at 0.3, 0.8 and 1.5 viewports past the ground's ending boundary: on screen,
   opacity 1, travelling upward.

   A tween cannot fix that cleanly, because the frozen offset is correct — what
   is wrong is that campaign content is allowed to paint over the section below
   it. Clipping at the section says so structurally, and it is the same rule the
   page already relies on everywhere else: content belongs to its section.

   Only the SECTION clips. The frame and the stage still do not, so the
   compositions bleed inside their own space exactly as before. */
#campaign{background:var(--steel);overflow:clip}
#campaign .s{position:absolute;font-family:var(--anton);text-transform:uppercase;
             white-space:nowrap;letter-spacing:.005em}
#campaign .s1{left:8%; top:26%;transform-origin:0 0;transform:rotate(90deg);
              color:var(--mute);  font-size:clamp(24px,3.6vw,58px)}
#campaign .s3{left:56%;top:28%;transform-origin:0 0;transform:rotate(90deg);
              color:var(--orange);font-size:clamp(26px,3.9vw,62px)}
#campaign .s2{left:13%;top:46%;color:var(--white);font-size:clamp(28px,4.5vw,72px)}
#campaign .s4{position:absolute;right:var(--gutter);bottom:11%;text-align:right}
#campaign .s4 .a{font-family:var(--anton);line-height:.94;color:var(--ink);text-transform:uppercase}
#campaign .s4 .b{font-family:var(--anton);font-size:clamp(22px,3.4vw,54px);line-height:1;
                 color:var(--mute);text-transform:uppercase;margin-top:8px}

/* Desktop Campaign review candidate: one static poster lock-up and one
   sequential ticker. The phone rules below 861px retain the approved stacked
   composition in responsive.css. */
@media (min-width:861px){
  /* Keep the campaign field subordinate to the copy, but retain enough contrast
     for the tiled lettering to read cleanly at a glance. */
  #campaign .awfix::before{opacity:.82}
  #campaign .s4{
    left:5.3%;right:auto;top:15%;bottom:auto;width:89%;text-align:left;
  }
  #campaign .s4 .a{line-height:.86;color:var(--ink)}
  #campaign .s4 .a .ln{display:block;white-space:nowrap}
  #campaign .s4 .a .ln::after{content:'.'}
  #campaign .s4 .b{
    margin-top:clamp(10px,1.7vh,20px);color:var(--orange);
    font-size:clamp(38px,5vw,80px);line-height:.92;
  }
  #campaign .s1,
  #campaign .s2,
  #campaign .s3{
    left:5.3%;right:auto;top:auto;bottom:10%;width:89%;
    transform:none;transform-origin:initial;
    font-size:clamp(28px,3.25vw,52px);line-height:1;
    white-space:normal;
  }
  #campaign .s1{color:var(--silver);opacity:1}
  #campaign .s2{color:var(--ink);opacity:0}
  #campaign .s3{color:var(--orange);opacity:0}
}


/* ============================================================================
   05  COME TO VENT / STAY TO ARGUE

   The signature move needs room to be one: 300vh of frame is 200vh of stick,
   so the titles take ~70vh to enter and the frame then simply HOLDS.
   ============================================================================ */
#vent{background:var(--paper)}
#vent .l1{position:absolute;left:12.2%;top:25%;font-family:var(--anton);line-height:.88;
          color:var(--orange);text-transform:uppercase}
#vent .l2{position:absolute;left:6.1%; top:47%;font-family:var(--anton);line-height:.88;
          color:var(--ink);text-transform:uppercase}
#vent .links{position:absolute;left:6.1%;top:75%;width:min(660px,52%)}
#vent .para{position:absolute;right:5.3%;bottom:11%;width:min(430px,34%);
            font-size:clamp(13px,1.15vw,15px);line-height:1.75;color:var(--mute)}


/* ============================================================================
   06  THE GLOSSARY

   The glossary's ground is a flat colour, so the section background paints its
   own 130vh lead-in for free: the steel arrives, travels and docks before a
   single title animates. No slab required.
   ============================================================================ */
#glossary{background:var(--steel-lt);color:var(--ink)}
#glossary .frame{min-height:100svh}
#glossary .sticky{
  position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;
  padding:calc(var(--nav) + clamp(20px,3.0vh,44px)) var(--gutter) clamp(26px,4.0vh,62px);
  display:flex;flex-direction:column;
}
#glossary .top{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
#glossary .top h2{font-family:var(--anton);line-height:.9;text-transform:uppercase;color:var(--ink)}
#glossary .top .st{font-size:13px;color:var(--mute);text-align:right;white-space:nowrap}
/* Restored spacing and hierarchy, 5 Aug. The list was pinned to one viewport
   with space-between doing all the work, which squeezed the terms together and
   flattened the difference between the resting, near and open states. More
   leading on every row, a wider gap between the head and the list, and a
   definition that is allowed to breathe. */
#glossary .list{margin-top:clamp(18px,3.4vh,50px);flex:1;
                display:flex;flex-direction:column;justify-content:space-between}

.row{display:grid;grid-template-columns:64px 1fr;gap:28px;align-items:baseline;
     padding:clamp(4px,0.6vh,10px) 0;cursor:default}
.row .ix{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--mute);opacity:.8;
         transition:color .26s,opacity .26s}
.row .tm{
  font-family:var(--anton);font-size:clamp(17px,2.15vw,32px);line-height:1;
  letter-spacing:.015em;text-transform:uppercase;
  color:var(--mute);opacity:.55;transform-origin:0 50%;
  transition:font-size .26s cubic-bezier(.22,1,.36,1),color .26s,opacity .26s;
}
.row .df{display:none;grid-column:2;max-width:1000px;margin-top:12px;
         font-size:clamp(12px,1.02vw,16px);line-height:1.75;color:var(--mute)}
.row.on{padding:clamp(8px,1.5vh,24px) 0 clamp(9px,1.9vh,30px)}
.row.on .ix{color:var(--orange);opacity:1}
.row.on .tm{font-size:clamp(30px,4.6vw,70px);color:var(--ink);opacity:1}
.row.on .df{display:block}
.row.near .tm{font-size:clamp(21px,2.8vw,41px);opacity:.78}


/* ============================================================================
   07  WHY THIS EXISTS — THE PROTECTED ORANGE ARRIVAL (D010)

   The orange is not a slab. .lead .pillar fills the section's 260vh lead-in
   and .art fills the same column inside the stage. Same left edge, same width,
   same tile, phase-matched — so the pillar's top edge travels up the screen at
   scroll rate as the real section arrives, and hands over to .art at the dock
   without a seam. Nothing is stretched and no height is animated.

   Both run to top:0 rather than top:var(--nav): the fixed nav is opaque and
   sits above them, and starting at 0 removes the paper seam the old slab left.
   ============================================================================ */
#why-this-exists{background:var(--orange)}
/* ONE COLUMN, ONE GROUND, for the whole of frame 7.
   MEASURED 6 Aug: with the pillar (in the lead) and the art (in the stage) as
   two separate grounds, the lattice jumped 443px at the dock — the pillar had
   unstuck and was riding up while the art was already frozen at 0. Exactly the
   fault the grey had, for exactly the same reason.

   `.orangecol` spans the entire section at the pillar's width and carries the
   only ground. `.art` is now nothing but the silver dissolve, sitting over it
   inside the frame. */
#why-this-exists .orangecol{
  /* Extend the ONE orange ground through the following lead. A second tile
     layer here creates a visible phase seam; the single ground ends exactly
     where the solid Go On Then frame begins. */
  position:absolute;left:0;top:0;bottom:-260vh;width:100%;
  overflow:clip;z-index:0;background-color:var(--orange);
}
/* Desktop editorial split: the calm, solid-orange 46% column carries the
   section title and its explanation. The Ask Why ground remains visible on the
   wider 54% right field for the closing lock-up. */
@media(min-width:861px){
  /* Carry the same single Ask Why ground through the final frame. The final
     composition reveals only its right-hand 38%, so the texture remains a
     continuation rather than becoming a second full patterned section. */
  #why-this-exists .orangecol{bottom:-670vh}
  #why-this-exists .orangecol::after{
    content:'';position:absolute;inset:0 58% 0 0;z-index:1;
    background:var(--orange);pointer-events:none;
  }
  /* The right field keeps its detail and drift, with only a light veil so the
     Ask Why lettering stays crisp beneath the closing lock-up. */
  #why-this-exists .orangecol::before{
    content:'';position:absolute;inset:0 0 0 42%;z-index:1;
    background:rgba(242,106,0,.12);pointer-events:none;
  }
}
#why-this-exists .art{
  display:none;
}
#why-this-exists .lead,#why-this-exists .frame{position:relative;z-index:1}
#why-this-exists h2{
  position:absolute;left:5.3%;top:12%;font-family:var(--anton);line-height:.99;
  text-transform:uppercase;color:var(--ink);
}
#why-this-exists h2 .ln{display:block}
#why-this-exists .copy{
  position:absolute;right:5.3%;top:12%;bottom:11.4%;width:min(500px,36%);
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;text-align:left;font-weight:600;-webkit-hyphens:none;hyphens:none;
}
#why-this-exists .copy p{margin:0;font-size:clamp(20px,1.72vw,27px);line-height:1.38}
#why-this-exists .copy .sp{letter-spacing:.14em}
#why-this-exists .end{position:absolute;left:5.3%;right:var(--gutter);bottom:6%}
#why-this-exists .end .a{font-family:var(--anton);line-height:.94;text-transform:uppercase;color:var(--ink)}
#why-this-exists .end .a em{font-style:normal;color:var(--white)}
#why-this-exists .end .b{font-family:var(--anton);line-height:1;text-transform:uppercase;
                         color:var(--steel);margin-top:6px}
@media(min-width:861px){
  #why-this-exists h2{left:5.3%;top:14%;width:35.4%}
  #why-this-exists .copy{
    left:5.3%;right:auto;top:47%;bottom:auto;width:35.4%;
    justify-content:flex-start;gap:clamp(10px,1.55vh,16px);
    color:var(--silver);font-weight:700
  }
  #why-this-exists .copy p{
    font-size:clamp(15px,1.15vw,18.5px);line-height:1.35
  }
  #why-this-exists .copy p .sp{letter-spacing:normal}
  #why-this-exists .copy p.sp{letter-spacing:.14em}
  #why-this-exists .end{
    left:48%;right:5.3%;top:auto;bottom:9%;transform:none
  }
  #why-this-exists .end .a{
    font-size:clamp(58px,6.35vw,98px)!important;line-height:.92
  }
  #why-this-exists .end .b{
    margin-top:clamp(10px,1.4vh,16px);color:#fff;
    font-size:clamp(22px,2.2vw,34px)!important
  }
}


/* ============================================================================
   08  GO ON THEN

   THE 7->8 CARRY IS A SHAPE, NOT A TWEEN.
   .col is frame 8's own ground occupying frame 8's own lead-in. It starts at
   exactly frame 7's pillar width, carries frame 7's tile at the matching
   phase, and opens out diagonally into the full bleed frame 8 lands on. Its
   height is never animated and nothing owns a transform on it, so there is no
   slab and nothing to jerk when the frame arrives.
   ============================================================================ */
#later{background:transparent}
#later .frame{background:var(--orange)}
@media(min-width:861px){
  #later .frame{background:transparent}
  #later .frame::before{
    content:'';position:absolute;inset:0 38% 0 0;
    background:var(--orange);pointer-events:none
  }
}
#later .lead .col{
  position:absolute;inset:0;background:transparent;
  clip-path:none;overflow:clip;
}
#later .lead .awfix,#later .lead .aw-fade-carry::after{display:none}
#later h2{position:absolute;left:5.3%;top:17%;font-family:var(--anton);line-height:.94;
          text-transform:uppercase;color:var(--steel);will-change:translate;
          animation:later-title-drift 31s ease-in-out infinite}
#later h2 .ln{display:block}
#later .sub{position:absolute;left:30.5%;bottom:6.2%;font-size:clamp(18px,2.12vw,36px);
           font-weight:700;color:var(--silver);opacity:.6}
#later .hair.l{background:var(--silver);opacity:.6}

@keyframes later-title-drift{
    0%{translate: 0px  0px}
   24%{translate: 1px -1px}
   52%{translate:-1px  1px}
   78%{translate: 2px  0px}
  100%{translate: 0px  0px}
}