/* ==========================================================================
   RECOGNIZED FOR RESULTS — "THE LIT WALL"   (.ins, index.html § 01)

   History, all on disk and all unlinked: the card (css/inscription-card.css)
   and the three-plate rank this replaces (css/inscription-plates.css).

   WHY THE RANK CAME OUT. It was three equal portrait cards in a row with
   equal gaps, and three equal cards in a row is the one shape this project
   has rejected more often than any other — a feature grid. Every part of it
   was defensible and the composition was still a template, which is exactly
   the verdict it got: "it looks ugly, I want premium." Restyling the cards
   could not answer that, because the problem was the relationship between
   them: THREE OBJECTS SIDE BY SIDE WITH AIR BETWEEN THEM ARE THREE OBJECTS,
   however each one is finished.

   ONE IDEA, AND EVERYTHING IS BUILT FROM IT: RECOGNITION IS ONE WALL, AND A
   LIGHT WALKS ALONG IT. There is now a single object here — one continuous
   band, one radius, one gradient hairline, one drop — folded into three
   leaves with NO gap between them. A wide warm key light travels the wall on
   its own clock; whichever leaf holds the light opens to twice the width of
   the other two, lifts out of shadow, and its sentence comes up to full
   contrast. The other two never leave the screen. That was the whole
   objection to the card the rank replaced ("a section whose job is proof
   cannot hide two thirds of the proof"), and it still holds: every subject,
   every name and every sentence is on screen in every state.

   THE AUTOMATION IS THE POINT, NOT A DECORATION. The client asked for "some
   automation mechanism" and this is it: the light moves on its own every
   5.2s while the section is on screen, so a visitor who does nothing is
   shown all three beats. The hand takes the light away from the clock
   instantly and gives it back on leave; the clock never fights the pointer.

   THE PICTURES DO NOT ZOOM, AND THAT IS A MEASURED CONSTRAINT, NOT A
   PREFERENCE. Standing instruction from 2026-08-22: "not image zoom in or
   out, I want image come horizontally." A photograph sized to its own pane
   is rescaled by object-fit every frame the pane is animating, which is a
   zoom nobody asked for and the default nobody notices. Every frame here is
   sized to the OPEN width — calc(50cqw + 64px), off container-type on the
   band — so it is at final size in every state and the leaf's edge simply
   uncovers more of it. The overscan (32px each side, 28px top) is what makes
   that legal: a frame exactly the size of its window uncovers the window's
   own ground at the trailing edge.

   NOTHING SWEEPS, FILLS, COUNTS OR RUNS OUT. Standing constraint on this
   page: four times now a scrubbed element travelling toward a full state has
   been read as a loading bar. The key light is not a measure — it does not
   start at nothing, it does not end at everything, and it carries no
   progress line. That is also the one thing NOT taken from the client's own
   reference (credenceinnovations.org's recognition band, which has a 240x2
   progress line and an 01/06 counter).

   THE REGISTER IS THE CLIENT'S TWO REFERENCES, measured off the live pages
   rather than eyeballed, and translated to gold on stone:

     credenceinnovations.org, "The wins worth framing" — the one dark band in
     a cream site, one big radial amber glow, portrait photography at 18px
     radius with a 1px light border, and a small translucent pill carrying a
     number ON the photograph. Everything there except the progress line.

     flowstatecreative.org — radial accent orbs at 6-14% behind everything, a
     wide soft drop (0 30px 80px), gradient-clipped display type, pill CTAs
     with a gradient-filled circular arrow, and gradient hairline borders
     rather than a flat 1px at 14%, which is what every generated card on the
     web has.

   RADIUS IS THE ONE TOKEN THAT HAS TO CHANGE. --radius-md is 3px, which is
   the site's editorial scale and reads as nothing at this size. --insr is
   local, declared once on the section, and shares its value with --asyr
   (css/assay.css) and --trpr (css/triptych.css) so the three sections built
   in this register agree.

   THE SECTION IS ALIVE AT REST. Six clocks, all long, all out of phase, not
   one of them travelling toward a full state:

     orb A      28s   drifts and swells behind the head
     orb B      36s   the same, out of phase, under the wall
     key light  13s   the wall's light breathes where it stands
     glow x3    15s   each leaf's own corner light, staggered 5s by --insi
     sheen       8s   the metallic word in the heading, on brightness
     motes x5  23-35s dust in the beam, three depths, all negative-delayed

   ONE VARIABLE OWNS THE WHOLE OPEN/SHUT MOVE. --insk (0 shut, 1 lit) is a
   registered property, so it TRANSITIONS, and the leaf's width, its
   photograph's key, its scrim, its tag, its name's size and its sentence's
   contrast are all arithmetic on it. Six properties cannot drift apart when
   there is only one clock, and there is no per-frame JavaScript anywhere in
   this section — the script sets one attribute every 5.2 seconds.

   AND FOUR SCRUBBED VARIABLES, WHICH IS THE WHOLE OF THE SCROLL WORK. Every
   one of them is a single number written by GSAP; every displacement in this
   file is arithmetic on one of them, in the stylesheet, next to the element
   it moves. There is no per-frame JavaScript here and nothing measures a box.

     --insp   the wall arrives. Each leaf cuts its own window out of it by
              index (--lp), which is what staggers the three: the frame's 6%
              settle, its opacity, the fold, the caption's 26px rise and the
              tag's 10px fall are all the same one number, three beats apart.
     --inst   the head is written, line by line. Its own trigger on its own
              element, because the head is read a screen before the wall is.
              Five children cut five overlapping windows out of it (--insw).
     --insy   the section's travel, -1 to +1, signed so that 0 is the
              composition as laid out. Six elements read it at six distances
              — orbs -68/+44, motes -34/-14, band -12, head columns -9/+6 —
              and --insq damps all six from one line at each breakpoint.
     --insh   the hand on a leaf, transitioned ON THE LEAF so the ring, the
              frame's scale, the corner light and the caption's lift are one
              clock. It is what lets `scale` hold a scrubbed arrival and a
              hovered lift in one calc: transitioning `scale` itself would
              make the arrival lag the scroll by the hover's duration.

   REST IS THE FINISHED SECTION, AND IT IS THE REDUCED-MOTION BUILD. data-lit
   ="1" is in the markup; --insp and --inst have initial-value 1 and --insy
   has 0. initCitation returns before it writes any of them, so with no JS, a
   dead CDN or reduced motion this section renders the exact composition it is
   laid out for — head landed, wall arrived, first leaf lit, nothing
   displaced. There is no second static stylesheet to fall out of step.

   NAME CHECK: .ins__band, .ins__wall, .ins__leaf, .ins__ray, .ins__seam,
   .ins__hold, --insk, --insl and data-insclock were grepped across css/, js/
   and every *.html before a line was written. Zero hits. The scroll pass
   added .ins__mote, --inst, --insy, --insh, --insq, --insw, --insv and
   data-inshead on the same rule, also zero hits; --insm, --insd, --insz and
   --insb were checked and REJECTED — they are live in css/inscription-card.css,
   css/inscription-plates.css and initInscription. .ins__pane, --insa
   and --insu looked free and are NOT used: they live in the unlinked
   css/inscription-card.css and in initInscription, which is still in
   js/motion.js guarded on markup that no longer exists.
   ========================================================================== */

/* the section's scrub clock. 1 = the wall is fully arrived. */
@property --insp { syntax: "<number>"; inherits: true; initial-value: 1; }
/* the leaf's own state. 1 = this leaf holds the light. Registered because
   the entire open/shut move is arithmetic on it and it has to interpolate. */
@property --insk { syntax: "<number>"; inherits: true; initial-value: 0; }
/* THE HEAD'S OWN CLOCK, separate from the wall's. 1 = every line has landed.
   It is written on .ins__head and not on the section because the head enters
   the window a screen before the wall does and must not wait for it. */
@property --inst { syntax: "<number>"; inherits: true; initial-value: 1; }
/* THE SECTION'S TRAVEL, -1 as the top edge crosses the bottom of the window
   through +1 as the bottom edge crosses the top. This is the parallax axis
   and it is signed rather than 0..1 so 0 is the section at rest in the middle
   of the window — the position everything is laid out for. Initial-value 0
   means no script, a dead CDN or reduced motion all render the laid-out
   composition with nothing displaced. */
@property --insy { syntax: "<number>"; inherits: true; initial-value: 0; }
/* THE HAND ON ONE LEAF. 0 or 1, and TRANSITIONED ON THE LEAF rather than on
   each property it drives — the lift, the frame's scale and the ring all read
   it, and a single interpolating variable keeps them in step where three
   separate transitions would drift apart. It also leaves `scale` free to
   carry the scrubbed arrival AND the hover in one untransitioned calc, which
   a transition on `scale` itself would make lag the scroll by 0.6s. */
@property --insh { syntax: "<number>"; inherits: true; initial-value: 0; }

.ins {
  position: relative;
  padding-block: clamp(2.6rem, 1.8rem + 3.4vw, 5rem);
  /* the orbs hang off both edges; nothing may push the document sideways.
     Vertical is left alone so the wall's shadow can fall into the section's
     own padding. */
  overflow-x: clip;

  --insr: clamp(1rem, 0.7rem + 1.05vw, 1.65rem);
  /* ONE DIAL FOR EVERY PARALLAX DISTANCE IN THE SECTION, so the narrow
     breakpoints can damp the whole system with one line instead of
     restating six offsets. A phone scrolls a section past in a third of the
     travel a desktop does; the same offsets there read as things sliding
     rather than as depth. */
  --insq: 1;
}

/* --------------------------------------------------------------------------
   THE GROUND
   -------------------------------------------------------------------------- */
.ins__orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.ins__orb--a {
  width: clamp(20rem, 34vw, 38rem);
  aspect-ratio: 1;
  top: -10%;
  left: -13%;
  background: radial-gradient(circle, rgb(184 145 88 / 0.13) 0%, rgb(184 145 88 / 0) 68%);
  animation: ins-drift-a 28s ease-in-out infinite alternate;
  /* `translate` AND NOT `transform`, which the drift keyframe owns. Two
     independent CSS properties on one element is what lets a 28s ambient
     loop and a scroll-scrubbed parallax share this orb without a wrapper —
     the same trick .ins__ray already uses to hold its position and its
     breath apart. Up against the scroll, and further than orb b travels. */
  translate: 0 calc(var(--insy) * -68px * var(--insq));
}

.ins__orb--b {
  width: clamp(17rem, 27vw, 30rem);
  aspect-ratio: 1;
  right: -10%;
  bottom: -15%;
  background: radial-gradient(circle, rgb(143 109 56 / 0.13) 0%, rgb(143 109 56 / 0) 70%);
  animation: ins-drift-b 36s ease-in-out infinite alternate;
  /* DOWN, and at two thirds the distance. Two grounds moving the same way at
     the same rate are one ground; the opposition is the depth. */
  translate: 0 calc(var(--insy) * 44px * var(--insq));
}

@keyframes ins-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.72; }
  to   { transform: translate3d(4%, 5%, 0) scale(1.11); opacity: 1; }
}
@keyframes ins-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.09); opacity: 1; }
  to   { transform: translate3d(-4%, -4.5%, 0) scale(1); opacity: 0.68; }
}

/* --------------------------------------------------------------------------
   THE HEAD. Claim left, lede and call to action right. Section-level copy
   does not belong on a photograph — that was the finding that took it off the
   card, and it stands. The headline is now sized to FILL its column rather
   than set to a comfortable measure: at 13ch and 56px it left a 190px dead
   channel down the middle of the head, and a dead channel in the centre is
   this page's most-repeated complaint.
   -------------------------------------------------------------------------- */
.ins__head {
  position: relative;
  z-index: 1;
  display: grid;
  /* 0.82fr, MEASURED. At 1.02fr the headline set 440px into a 596px column
     and the lede started at 670, which left a 334px channel of nothing down
     the middle of the head — the single most-repeated complaint on this
     page. Narrowing the claim's column to what the headline actually
     occupies brings the lede in to 553 and closes it to about 110. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  column-gap: clamp(1.6rem, 1rem + 2.6vw, 3.6rem);
  align-items: end;
  margin-bottom: clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
}

.ins__claim {
  min-width: 0;
  /* the claim rides slightly against the scroll and the aside rides slightly
     with it, so the two columns of the head separate by about 15px over the
     pass. Small on purpose: this is type, and type that visibly travels is
     type nobody finishes reading. */
  translate: 0 calc(var(--insy) * -9px * var(--insq));
}

/* --------------------------------------------------------------------------
   THE HEAD, WRITTEN ONE LINE AT A TIME. Five children across two columns,
   each reading its own window out of the one scrubbed --inst by index: it
   opens at --insv * 0.11 and takes about 0.38 of the pass to finish, so
   consecutive lines overlap by two thirds and the head lands as one sentence
   being written rather than as five objects arriving.

   THE HEADLINE IS NOT IN THIS SYSTEM and that is the point of building it.
   Everything else fades and rises; the headline is UNCOVERED, top edge down,
   by a clip that leaves it at full contrast the whole way. A 76px word that
   fades from zero is a word that is illegible for the first 400ms of its own
   entrance, and the one line in this section that has to be readable on
   arrival is the one that carries the claim.

   NOTHING HERE TOUCHES A LAYOUT PROPERTY. opacity, transform, scale and
   clip-path only, so the head cannot shift a single line of the page while
   it plays.
   -------------------------------------------------------------------------- */
.ins__claim > *,
.ins__aside > * {
  /* the default matters: an unindexed child — a sixth line added to the head
     later — would otherwise resolve --insv to nothing, take --insw down with
     it and be invisible rather than merely unstaggered. 0 makes a new line
     land with the eyebrow until somebody gives it its own beat. */
  --insv: 0;
  --insw: clamp(0, calc((var(--inst) - var(--insv) * 0.11) * 2.6), 1);
  opacity: var(--insw);
  transform: translate3d(0, calc((1 - var(--insw)) * 18px), 0);
}
.ins__claim > :nth-child(1) { --insv: 0; }
.ins__claim > :nth-child(2) { --insv: 1; }
.ins__aside > :nth-child(1) { --insv: 2; }
.ins__aside > :nth-child(2) { --insv: 3; }
.ins__aside > :nth-child(3) { --insv: 4; }

.ins__h {
  margin: 0;
  /* SIZED TO FILL THE COLUMN, NOT TO A COMFORTABLE MEASURE. At 68px the
     longer line set 296px into a 490px column and the channel reopened from
     the other side. 76px at 1280 puts "for Results." at about 468 of the
     490 available, which is what closes it. 13ch is a guard, not a measure:
     it is wider than the column and only exists so a very wide viewport
     cannot run the line past the lede. */
  font-size: clamp(2.2rem, 1.05rem + 4.6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.044em;
  line-height: 1.01;
  text-wrap: balance;
  max-width: 13ch;
  /* the override of the head's generic reveal, at equal specificity and
     after it, so source order decides. The negative insets are clearance for
     the italic's overhang and the descenders — a flat inset(0) clip shaves
     the tail of the `g` in "Recognized" for ever, not just during the pass. */
  opacity: 1;
  transform: none;
  clip-path: inset(-0.16em -0.18em calc((1 - var(--insw)) * 106%) -0.08em);
}

/* the metallic word. Static gradient, breath on brightness — a gradient that
   slides its own background-position is a highlight travelling across a word,
   and travelling highlights are what this page has repeatedly been told to
   stop doing. */
.ins__h em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(104deg,
    var(--gold-light) 0%,
    var(--gold) 46%,
    var(--gold-shadow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ins-sheen 8s ease-in-out infinite alternate;
}

@keyframes ins-sheen {
  from { filter: brightness(0.94); }
  to   { filter: brightness(1.12); }
}

.ins__aside {
  min-width: 0;
  display: grid;
  justify-items: start;
  padding-bottom: 0.3rem;
  translate: 0 calc(var(--insy) * 6px * var(--insq));
}

.ins__caption {
  margin: 0;
  font-size: clamp(1.02rem, 0.92rem + 0.42vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.ins__lede {
  margin: clamp(0.6rem, 0.48rem + 0.4vw, 0.9rem) 0 0;
  max-width: 52ch;
  font-size: clamp(0.95rem, 0.9rem + 0.24vw, 1.0625rem);
  line-height: 1.6;
  color: var(--vein);
  text-wrap: pretty;
}

/* THE PILL. The references' CTA: a rounded outline with a gradient-filled
   circular arrow on the end. It points at #record, the figures one screen
   below, so its label is navigational and not a claim. */
.ins__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  border-radius: 50px;
  border: 1px solid rgb(184 145 88 / 0.28);
  background: rgb(184 145 88 / 0.07);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.45s var(--ease-out), background-color 0.45s var(--ease-out),
              color 0.45s var(--ease-out);
  /* the one element in the head that is an OBJECT and not a line of type, so
     it is the one that gets a scale. `scale` and not `transform`, which the
     head's reveal owns. */
  scale: calc(0.962 + var(--insw) * 0.038);
}

.ins__arrow {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-shadow));
  color: var(--obsidian);
  transition: transform 0.45s var(--ease-out);
}

/* --------------------------------------------------------------------------
   THE WALL. One object. The gradient hairline is the reference's border and
   not this site's flat 1px at 14%: the gold is strongest at the top left,
   where both the orb and the leaves' own corner lights are, and falls to a
   neutral at the far corner. A border that is the same all the way round is a
   box; a border that changes with the light is an edge.
   -------------------------------------------------------------------------- */
.ins__band {
  position: relative;
  z-index: 1;
  /* every frame inside is sized in cqw off THIS box, which is what keeps the
     photographs at one size while their leaves change width */
  container-type: inline-size;
  height: clamp(21rem, 34vw, 29rem);
  border-radius: var(--insr);
  border: 1px solid transparent;
  overflow: hidden;
  background:
    linear-gradient(var(--obsidian), var(--obsidian)) padding-box,
    linear-gradient(148deg,
      rgb(184 145 88 / 0.55) 0%,
      rgb(184 145 88 / 0.14) 30%,
      rgb(214 206 196 / 0.07) 62%,
      rgb(184 145 88 / 0.34) 100%) border-box;
  box-shadow:
    0 42px 92px -36px rgb(0 0 0 / 0.74),
    0 0 78px -34px rgb(184 145 88 / 0.34);
  /* the arrival: the wall rises a few pixels into place. Opacity is on the
     leaves, staggered, so it lights up leaf by leaf rather than as a slab. */
  transform: translate3d(0, calc(
    (1 - var(--insp)) * 26px
    + var(--insy) * -12px * var(--insq)
  ), 0);
}

/* THE KEY LIGHT. One wide warm source that stands over whichever leaf holds
   the light and MOVES when the light moves. `screen` because a light falls ON
   a photograph — a gold disc composited normally is a gel over the picture,
   and that difference is the whole reason this reads as light rather than as
   an overlay. Position is `translate` and the breath is `scale`, on purpose:
   two separate CSS properties, so a 13s keyframe and a 0.9s transition can
   share one element without a wrapper. */
.ins__ray {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: -7cqw;
  width: 64cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgb(204 166 104 / 0.15) 0%,
    rgb(184 145 88 / 0.055) 40%,
    rgb(184 145 88 / 0) 68%);
  translate: calc(var(--insl, 0) * 25cqw) -50%;
  transition: translate 0.9s var(--ease-out);
  animation: ins-ray 13s ease-in-out infinite alternate;
}

@keyframes ins-ray {
  from { scale: 0.94; opacity: 0.8; }
  to   { scale: 1.07; opacity: 1; }
}

/* --------------------------------------------------------------------------
   DUST STANDING IN THE BEAM. The only decoration added to this wall, and the
   test it had to pass is the one every element in this section has had to
   pass: does it introduce a second idea. It does not — the section's whole
   concept is a light on a photograph, and dust is what a light makes visible.

   `screen` for the same reason the ray uses it: a gold disc composited
   normally is a speck of paint ON the picture. Screened, a mote only exists
   where there is already light to catch, so the field appears over the lit
   leaf and all but vanishes over the shut ones without a single rule saying
   so. THAT is what makes it read as dust rather than as particles.

   THREE DEPTHS, not five: a, c and e take the near parallax, b and d the far
   one, and each carries its own drift distance, duration and negative delay
   so no two are ever in step. --insp is inside the keyframes so the field
   fades up with the wall it belongs to instead of hanging in an empty frame;
   the entrance fade cannot live on the element, because these keyframes
   animate opacity and an animation outranks a declaration.

   They are aria-hidden, pointer-events:none, clipped by the band, and held
   in the top two thirds of it, which is the half of the wall no caption ever
   reaches.
   -------------------------------------------------------------------------- */
.ins__mote {
  position: absolute;
  z-index: 3;
  width: var(--mw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgb(236 214 174 / 0.95) 0%,
    rgb(197 158 98 / 0.34) 40%,
    rgb(184 145 88 / 0) 72%);
  translate: 0 calc(var(--insy) * var(--mp) * var(--insq));
  animation: ins-mote 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes ins-mote {
  from {
    transform: translate3d(0, 0, 0) scale(0.72);
    opacity: calc(var(--insp) * 0.2);
  }
  to {
    transform: translate3d(var(--mx), var(--my), 0) scale(1.18);
    opacity: calc(var(--insp) * 0.9);
  }
}

.ins__mote--a { --mw: 4px; --mp: -34px; --mx: 14px;  --my: -22px; top: 21%; left: 11%;
                animation-duration: 23s; animation-delay: -4s; }
.ins__mote--b { --mw: 3px; --mp: -14px; --mx: -18px; --my: -13px; top: 44%; left: 27%;
                animation-duration: 31s; animation-delay: -13s; }
.ins__mote--c { --mw: 5px; --mp: -34px; --mx: 9px;   --my: 19px;  top: 15%; left: 48%;
                animation-duration: 27s; animation-delay: -9s; }
.ins__mote--d { --mw: 3px; --mp: -14px; --mx: 16px;  --my: -17px; top: 55%; left: 66%;
                animation-duration: 35s; animation-delay: -21s; }
.ins__mote--e { --mw: 4px; --mp: -34px; --mx: -12px; --my: -24px; top: 28%; left: 84%;
                animation-duration: 29s; animation-delay: -16s; }

.ins__band[data-lit="1"] .ins__ray { --insl: 0; }
.ins__band[data-lit="2"] .ins__ray { --insl: 1; }
.ins__band[data-lit="3"] .ins__ray { --insl: 2; }

.ins__wall {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   THE LEAVES. No gap, no border, no radius of their own: the wall carries all
   three. 25cqw shut and 50cqw lit, so the three always total exactly 100cqw
   and the sum holds mid-transition — one leaf closes at the same rate the
   next one opens.
   -------------------------------------------------------------------------- */
.ins__leaf {
  --insk: 0;
  --insh: 0;
  --s: calc(0.05 + var(--insi) * 0.12);
  --lp: clamp(0, calc((var(--insp) - var(--s)) * 3.2), 1);
  position: relative;
  z-index: 0;
  flex: 0 0 calc((25 + var(--insk) * 25) * 1cqw);
  min-width: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  cursor: pointer;
  /* TWO VARIABLES, ONE TRANSITION EACH, and everything below is arithmetic on
     them. --insk is the light; --insh is the hand. They are transitioned HERE
     so that the frame's scale, the caption's lift and the ring can each be a
     single untransitioned calc — which is the only way the same `scale` can
     hold a scrubbed arrival and a hovered lift without the arrival lagging
     the scroll by the hover's duration. --insh is faster than --insk: a hand
     wants an answer, a light does not. */
  transition: --insk 0.85s var(--ease-out), --insh 0.55s var(--ease-out);
}

/* THE DEPTH ON HOVER, and it is an inner edge rather than a drop. A leaf
   cannot lift off this wall — it has no gap to lift out of, and translating
   one would tear the fold open and show the section's ground through it. So
   the lift is BUILT INWARD: a gold hairline picks out the leaf's own edges, a
   warm bloom comes up off its floor and a cooler one off its ceiling, and the
   frame behind them scales 2%. The eye reads an object that came forward; the
   wall stays one object, which is the whole design.

   z-index 3 puts it over the fold and the scrim and under the tag and the
   caption: the ring is depth, not a veil over the type. */
.ins__leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--insh);
  box-shadow:
    inset 0 0 0 1px rgb(214 180 120 / 0.32),
    inset 0 -130px 96px -96px rgb(184 145 88 / 0.5),
    inset 0 96px 76px -84px rgb(236 214 174 / 0.2);
}
.ins__leaf:nth-child(1) { --insi: 0; }
.ins__leaf:nth-child(2) { --insi: 1; }
.ins__leaf:nth-child(3) { --insi: 2; }

/* the resting state with no script at all, and the state the markup ships in.
   [data-lit] shuts everything first so the lit rule below is the only thing
   that opens anything. */
.ins__leaf:first-child { --insk: 1; }
.ins__band[data-lit] .ins__leaf { --insk: 0; }
.ins__band[data-lit="1"] .ins__leaf:nth-child(1),
.ins__band[data-lit="2"] .ins__leaf:nth-child(2),
.ins__band[data-lit="3"] .ins__leaf:nth-child(3) { --insk: 1; }

/* THE FRAME. Sized to the OPEN leaf and never resized — see the header. The
   leaf clips it, so opening uncovers the picture horizontally at one constant
   size, which is the move the reference actually makes. */
.ins__img {
  position: absolute;
  z-index: 0;
  top: -28px;
  left: -32px;
  width: calc(50cqw + 64px);
  /* main.css:154 puts max-width:100% on every img on the site, which clamps
     this frame to its own leaf and hands back exactly the object-fit rescale
     the whole cqw sizing exists to prevent. Measured: 594px in a 594px leaf
     instead of 658. This is the one line that keeps the picture still. */
  max-width: none;
  height: calc(100% + 56px);
  display: block;
  object-fit: cover;
  /* AND IT TRAVELS SIDEWAYS, WHICH IS THE OTHER HALF OF THE SAME
     INSTRUCTION. A frame left-anchored in its leaf shows its LEFT THIRD
     while shut, and the left third of a photograph is usually the part
     nobody framed it for — door.jpg put a bare tree in the window and left
     the second person outside it. Moving the frame half the difference
     between the two leaf widths, (50cqw - 25cqw) / 2 = 12.5cqw, puts the
     MIDDLE of the picture in the shut window, and opening walks it back to
     zero. The picture is the same size the whole way: it slides, it does
     not scale. "I want image come horizontally", 2026-08-22. */
  translate: calc((1 - var(--insk)) * -12.5cqw) 0;
  /* THE SETTLE, AND THE ONLY SCALE IN THE ENTRANCE. 6% oversize on arrival,
     walked out by this leaf's own staggered --lp, so each picture comes to
     rest a beat after the one before it. It is deliberately in the direction
     that cannot show an edge: the frame is already 64px wider and 56px taller
     than its leaf, so scaling DOWN toward 1 keeps it covered the whole way,
     where an under-scale settling up would flash the ground at the corners.
     The hover's 2.4% rides on the same property and needs no transition of
     its own — --insh is already interpolating on the leaf. */
  scale: calc(1.06 - var(--lp) * 0.06 + var(--insh) * 0.024);
  filter:
    brightness(calc(0.54 + var(--insk) * 0.46))
    saturate(calc(0.82 + var(--insk) * 0.18));
  opacity: calc(0.08 + var(--lp) * 0.92);
  transition: filter 0.85s var(--ease-out), translate 0.85s var(--ease-out);
}
/* each frame's own subject line. door.jpg is the landscape one, cropped from
   both sides, so its subject is held left of centre — a shut leaf shows the
   left half of the frame and the two people have to be in it. */
/* THE X IS ONLY DOING WORK ON THE LANDSCAPE ONE. wd-report and wd-train are
   613x768 and land in a 658-wide frame at 1.07, so there is no horizontal
   crop left for object-position to move and the Y is the whole decision:
   both were reading at the chest in the shut window until the frame was
   raised. door.jpg is 1258x861 and does crop sideways, which is what its 42%
   is for. */
.ins__leaf:nth-child(1) .ins__img { object-position: 42% 46%; }
.ins__leaf:nth-child(2) .ins__img { object-position: 50% 27%; }
.ins__leaf:nth-child(3) .ins__img { object-position: 50% 30%; }

/* each leaf's own corner light, on its own clock, staggered by index so the
   three are never in step — a wall that pulsed as one object would read as a
   mechanism rather than as light. */
.ins__glow {
  position: absolute;
  z-index: 1;
  top: -30%;
  left: -22%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(184 145 88 / 0.2) 0%, rgb(184 145 88 / 0) 68%);
  animation: ins-glow 15s ease-in-out infinite alternate;
  animation-delay: calc(var(--insi) * -5s);
  /* the hand brightens the leaf's own light. `scale` and `filter`, because
     the 15s loop above owns `transform` and `opacity` — the same two-property
     split the orbs and the ray use. */
  scale: calc(1 + var(--insh) * 0.14);
  filter: brightness(calc(1 + var(--insh) * 0.6));
}

@keyframes ins-glow {
  from { transform: scale(0.9); opacity: 0.45; }
  to   { transform: scale(1.15); opacity: 1; }
}

/* THE FOLD. What separates two leaves is not a rule — this section is not
   allowed one — it is the shadow a fold casts on the leaf behind it. 64px of
   gradient, deepest at the seam, gone by the time the eye is inside the next
   picture. It is also what stops three photographs from bleeding into one
   another, which is the real risk of taking the gaps out. */
.ins__seam {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  left: 0;
  width: 64px;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.16) 44%, rgb(0 0 0 / 0) 100%);
  /* the fold is only a fold once there is a leaf behind it to cast on, so it
     arrives on the same stagger the picture does. */
  opacity: var(--lp);
}
.ins__leaf:first-child .ins__seam { display: none; }

/* the scrim, built for the caption that sits on it and nothing else. It
   deepens as the leaf opens, because the sentence that has to be read is the
   lit leaf's sentence. */
.ins__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg,
    rgb(var(--scrim-rgb) / calc(0.7 + var(--insk) * 0.2)) 0%,
    rgb(var(--scrim-rgb) / calc(0.34 + var(--insk) * 0.2)) 30%,
    rgb(var(--scrim-rgb) / 0.04) 62%,
    rgb(var(--scrim-rgb) / 0.2) 100%);
}

/* THE TAG. The reference's move: a small translucent pill carrying the
   number, sitting on the photograph. It is this section's counting device and
   it is deliberately not the device § 03 or § 05 use — three sections that
   count the same way stop being a register and become a template. */
.ins__tag {
  position: absolute;
  z-index: 4;
  top: clamp(0.9rem, 0.7rem + 0.7vw, 1.35rem);
  left: clamp(0.9rem, 0.7rem + 0.7vw, 1.35rem);
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgb(184 145 88 / calc(0.3 + var(--insk) * 0.42 + var(--insh) * 0.18));
  background: rgb(23 21 15 / calc(0.58 + var(--insk) * 0.2));
  backdrop-filter: blur(6px);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gold-light);
  pointer-events: none;
  /* THE LAST THING IN A LEAF TO ARRIVE, and it comes DOWN while everything
     else comes up. It is the only counter-direction in the section and it is
     8px, which is enough to stop the leaf reading as one slab sliding into
     place and not enough to be a second move. */
  opacity: var(--lp);
  translate: 0 calc((1 - var(--lp)) * -10px);
}

/* --------------------------------------------------------------------------
   THE CAPTION. At the foot of its own leaf, on the scrim built for it, and
   nowhere else. Everything here is arithmetic on --insk: the name grows by
   6px and the sentence comes from 60% to full contrast as the light arrives,
   so the leaf that is lit is also the leaf that is easiest to read.
   -------------------------------------------------------------------------- */
.ins__hold {
  position: relative;
  z-index: 5;
  width: 100%;
  min-width: 0;
  padding: clamp(1.05rem, 0.75rem + 1.1vw, 1.7rem);
  /* THREE TERMS, ONE TRANSFORM. The light's 5px, the arrival's 26px on this
     leaf's own stagger, and the hand's 5px lift — all on the two variables
     the leaf is already interpolating, so the caption never needs a
     transition of its own and can therefore never fight the scroll. */
  transform: translate3d(0, calc(
    (1 - var(--insk)) * 5px
    + (1 - var(--lp)) * 26px
    - var(--insh) * 5px
  ), 0);
  opacity: calc(0.1 + var(--lp) * 0.9);
}

.ins__name {
  margin: 0;
  font-size: calc(1.02rem + var(--insk) * 0.4rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.16;
  color: var(--white);
  text-wrap: balance;
}

.ins__note {
  margin: clamp(0.34rem, 0.28rem + 0.24vw, 0.55rem) 0 0;
  max-width: 42ch;
  font-size: calc(0.8rem + var(--insk) * 0.075rem);
  line-height: 1.5;
  color: rgb(234 230 223 / calc(0.6 + var(--insk) * 0.34));
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   THE AWARD SLOT. Not on screen: the markup for it is commented out in
   index.html because knowledge-base.md § 9 forbids inventing awards and no
   real citation exists yet. These rules are here so that whoever puts the
   real one in only has to delete the comment markers.
   -------------------------------------------------------------------------- */
.ins__cite {
  position: relative;
  z-index: 1;
  margin-top: clamp(1rem, 0.75rem + 1vw, 1.6rem);
  padding: clamp(1rem, 0.8rem + 0.9vw, 1.5rem) clamp(1.2rem, 0.95rem + 1.2vw, 2rem);
  border-radius: var(--insr);
  border: 1px solid rgb(184 145 88 / 0.16);
  background: linear-gradient(100deg,
    rgb(184 145 88 / 0.07) 0%,
    rgb(234 230 223 / 0.014) 46%,
    rgb(234 230 223 / 0) 100%);
}

.ins__slot {
  margin: 0;
  font-size: clamp(1.05rem, 0.92rem + 0.55vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.2;
  color: var(--gold-light);
}

.ins__citenote {
  margin: 0.4rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--vein);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   THE HAND. It takes the light off the clock instantly and gives it back on
   leave. The rules sit AFTER the [data-lit] rules and match at the same
   specificity, so source order decides and the pointer always wins — which is
   also true with the script dead.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .ins__band:hover .ins__leaf:not(:hover) { --insk: 0; --insh: 0; }
  .ins__band:hover .ins__leaf:hover { --insk: 1; --insh: 1; }

  .ins__pill:hover {
    border-color: rgb(192 156 96 / 0.6);
    background: rgb(184 145 88 / 0.14);
    color: var(--white);
  }
  .ins__pill:hover .ins__arrow { transform: translateX(3px); }
}

/* keyboard parity: the leaves are focusable, so the ring has to be real. The
   OPENING on focus is the script's job (it moves data-lit), because a CSS
   :focus rule would have to outrank the attribute rules and then the clock
   and the ring would disagree about which leaf is lit. */
.ins__leaf:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: -4px;
  border-radius: calc(var(--insr) - 4px);
  /* the keyboard gets the same depth the pointer gets. The script already
     moves the light here on focus; this is the other half of that parity. */
  --insh: 1;
}

/* --------------------------------------------------------------------------
   NARROW. The head stacks at 900. At 820 the wall turns on its side: the
   leaves become full-width bands and the light travels DOWN instead of
   across, which is the same object and the same mechanism in the axis a phone
   actually has. Nothing about the concept changes.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ins__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ins__h { max-width: 13ch; }
}

@media (max-width: 900px) {
  .ins__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.1rem, 0.9rem + 1vw, 1.7rem);
    align-items: start;
  }
  .ins__h { max-width: 18ch; }
  .ins__lede { max-width: 62ch; }
  .ins__aside { padding-bottom: 0; }

  /* THE COUNTER-DRIFT IS A TWO-COLUMN EFFECT AND THERE IS ONE COLUMN NOW.
     Stacked, the claim pulling up while the aside pulls down does not read as
     depth — it reads as the gap between them breathing, which is the one
     thing a stacked head must not do. Both go to the section's own rate. */
  .ins__claim,
  .ins__aside { translate: 0 calc(var(--insy) * -5px * var(--insq)); }

  /* and the whole parallax system comes down with the viewport: a phone
     scrolls this section past in a third of the travel a desktop does, so the
     same offsets there read as sliding rather than as depth. */
  .ins { --insq: 0.55; }
}

/* 1000, NOT 820. The switch is where a SHUT leaf stops being able to hold
   its own sentence: a quarter of the container is 230px at 1001 and 198px at
   860, and at 198 the three-line note pushed its own name off the foot of the
   picture. Measured at 1440, 1280, 1024 and 860 before the number was
   chosen. */
@media (max-width: 1000px) {
  /* --insoh is the height a LIT leaf adds to a shut one, and it is declared
     here rather than written twice because the leaf's height and the frame's
     height and travel are all derived from it. Nothing below may hard-code
     it. */
  .ins__band {
    height: auto;
    --insoh: clamp(12.6rem, 26vw, 19rem);
  }
  .ins__wall { flex-direction: column; }

  /* the open leaf is a band, not a portrait: 26vw keeps it cinematic on a
     tablet and the 12.6rem floor keeps it tall enough to read on a phone. */
  .ins__leaf {
    flex: 0 0 calc(6.4rem + var(--insk) * var(--insoh));
    align-items: flex-end;
  }

  /* THE SAME RULE AS THE HORIZONTAL WALL, TURNED THROUGH 90 DEGREES, and it
     matters for the same reason. `height: 100% + 56px` looks harmless and is
     the vertical twin of the mistake the desktop sizing exists to avoid: the
     leaf's height is what animates, so a frame measured off it is rescaled
     every frame — a zoom, in the axis nobody was watching. The frame is
     sized to the OPEN leaf and travels half the difference, so a shut leaf
     shows the MIDDLE of its picture rather than the top of somebody's head. */
  .ins__img {
    left: -32px;
    top: -28px;
    width: calc(100% + 64px);
    height: calc(6.4rem + var(--insoh) + 56px);
    translate: 0 calc((1 - var(--insk)) * var(--insoh) * -0.5);
  }
  /* the Y is re-decided here because the crop is: the horizontal wall shows a
     tall window of each frame and the column shows a wide one. All three are
     set so the faces land in the MIDDLE band, which is what a shut leaf
     shows. */
  .ins__leaf:nth-child(1) .ins__img { object-position: 50% 28%; }
  .ins__leaf:nth-child(2) .ins__img { object-position: 50% 24%; }
  .ins__leaf:nth-child(3) .ins__img { object-position: 50% 30%; }

  /* the fold now lies across the leaf, not down its side */
  .ins__seam {
    inset-block: 0 auto;
    inset-inline: 0;
    width: auto;
    height: 56px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.16) 44%, rgb(0 0 0 / 0) 100%);
  }

  /* and the key light travels down the wall instead of across it */
  .ins__ray {
    top: 0;
    left: 50%;
    width: 120%;
    translate: -50% calc(var(--insl, 0) * 33.4% + 8%);
  }

  /* a shut leaf is 6.4rem of picture with its number and its name on it; the
     sentence belongs to the lit one and comes with the light. */
  /* THE FIELD THINS WHEN THE WALL TURNS. Vertical, a leaf is full-width and
     its caption reaches across the whole band, so the two motes that sat over
     the middle of the horizontal wall are now over type. They go. The three
     that remain hold the near, far and near depths, which is the least the
     effect needs to still be three-dimensional. */
  .ins__mote--b,
  .ins__mote--d { display: none; }
  .ins__mote--a { top: 9%;  left: 14%; }
  .ins__mote--c { top: 38%; left: 72%; }
  .ins__mote--e { top: 68%; left: 33%; }

  .ins__note {
    max-height: calc(var(--insk) * 5rem);
    opacity: var(--insk);
    overflow: hidden;
  }
  .ins__name { font-size: calc(1.02rem + var(--insk) * 0.26rem); }
  .ins__glow { top: -80%; width: 46%; }
}

@media (max-width: 560px) {
  .ins { --insq: 0.34; }
  .ins__leaf { flex: 0 0 calc(5.6rem + var(--insk) * 11.4rem); }
  .ins__hold { padding: 1rem 1.05rem; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION. Every clock stops and the transitions go with them; the
   script checks the same query and never starts the light moving. The wall is
   a finished composition with its first leaf lit and nothing running.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   REDUCED MOTION. Most of this contract is already kept by the registered
   properties: initCitation returns before it writes anything, so --insp and
   --inst stay at their initial-value of 1 and --insy stays at 0, and the
   section renders EXACTLY the composition it is laid out for — head landed,
   wall arrived, nothing displaced. There is no separate static stylesheet to
   drift out of sync with this one.

   What is left for this block is the part no initial-value can cover: the
   five infinite loops, the transitions, and the arithmetic that would still
   answer a hover. The hand keeps its effect — it just takes it instantly,
   which is what the setting asks for and not less than it asks for.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ins__orb,
  .ins__glow,
  .ins__ray,
  .ins__mote,
  .ins__h em { animation: none; }
  .ins__leaf,
  .ins__img,
  .ins__ray,
  .ins__pill,
  .ins__arrow { transition: none; }

  /* belt and braces on the displacements, so a stalled scrub or a stale
     inline value written before the setting was read cannot leave anything
     off its mark. */
  .ins__orb,
  .ins__mote,
  .ins__claim,
  .ins__aside { translate: none; }
  .ins__band { transform: none; }
  .ins__claim > *,
  .ins__aside > * { opacity: 1; transform: none; }
  .ins__h { clip-path: none; }
  .ins__pill { scale: 1; }
  .ins__mote { opacity: 0.4; }

  /* the motes stop being dust in a moving beam and become what they are with
     the beam still: five specks. Held, dimmed, and out of the way. */
}