/* ==========================================================================
   THE RECORD — "THE RULED BAND"   (.rcd, index.html § 2b)

   History, all unlinked and all on disk: a struck ledger
   (css/editorial.css:2494, inert), a four-up card band
   (css/sections-2.css), the account (css/account.css), the tally
   (css/tally.css), the ruled plate (css/record-plate.css), the register
   plate (css/record-band.css) and the four separate tiles this replaces
   (css/record-tiles.css).

   BUILT TO A REFERENCE IMAGE THE CLIENT SUPPLIED, and the instruction was
   exact: "I want the UI in the ruler form, not the card form." The pass
   before this one made four detached tiles with their own borders and
   shadows; the reference is ONE PLATE with three vertical rules dividing
   it into four bays. Read off the image rather than approximated:

     - one bordered, faintly tinted plate, softly rounded
     - three plain vertical hairlines running the full height between the
       bays; no side borders on the bays themselves, nothing rounded
       inside the plate
     - every bay CENTRE-RANGED, in this order: a round badge with a
       hairline pictogram, the figure, an uppercase label, a sentence
     - THE LAST TWO FIGURES ARE GOLD AND THE FIRST TWO ARE NOT. 3 and
       100% in gold, 38,000+ and $3.5M+ in ink. It reads as the two
       counted quantities in ink and the two bounded ones in gold, and it
       is what the reference does. An earlier build removed this on the
       argument that it looked like two arbitrary highlights; the client
       has now put it in front of me twice, so it stays.

   THE RULES ARE BACK BECAUSE THIS SECTION ASKED FOR THEM, and the
   distinction is worth keeping straight rather than applying "no lines"
   as a rule of the site. "Remove the lines" was said about the standard
   and the triptych, where five and four FULL-WIDTH rules were the entire
   structure of the section. Three short dividers inside one plate are a
   different object: they are what makes four bays read as four
   compartments of ONE record rather than four cards that happen to be
   adjacent.

   WHAT THIS BUILD ADDS TO THE REFERENCE, which is the "improve the UI"
   half of the instruction:

     1. ONE LIGHT ACROSS THE PLATE. The border is a gradient, not a flat
        colour — bright gold at the top left, neutral by the bottom right
        — so the plate is lit from a direction instead of outlined. The
        dividers are lit from the same place, stepping down 0.16 to 0.10
        left to right, and they FADE OUT at both ends rather than butting
        into the border, so the plate reads as ruled and not as a table.
     2. THE BADGES ARE RINGS, NOT DISCS. 1px gold ring, an 8% gold fill,
        and the same non-scaling 1.4px hairline the rest of the site
        draws with, so a glyph never renders heavier than the rules
        around it.
     3. IT IS ALIVE AT REST. Two ground orbs, a glow under the plate, and
        a slow sheen on the two gold figures — four long clocks, all out
        of phase.
     5. AND THE LIGHT ON IT IS THE READER'S. --rcds swings the raking
        angle 40 degrees, walks a soft specular across the plate's face
        and lifts each of the three rules in turn as it reaches them. It
        is the section's own claim — lit from a direction, not outlined —
        handed to the scroll. See the property for why this is a rake and
        not the travelling highlight the page keeps rejecting.
     4. THE FOUR BAYS SHARE THEIR ROWS. Badge, figure, label and sentence
        each sit on a subgrid row, so the four line up exactly however a
        sentence wraps. In the reference image bays 3 and 4 take two lines
        and bays 1 and 2 take one, which is precisely the case that knocks
        a figures band out of register.

   THE COUNTER IS BACK, ON INSTRUCTION, 2026-08-23 — AND IT WAS REMOVED
   TWICE BEFORE THAT. Anyone reading this file later is going to find the
   two objections in the history and wonder whether they were forgotten.
   They were not. They are written out here with what answers each, so the
   next person can judge it rather than rediscover it.

     1. "IT READS AS A SLOT MACHINE." A figure that whirs to its answer
        undercuts the one thing this section is for — a buyer deciding
        whether $3.5M is a real number. ANSWERED BY THE CLOCK: the count
        is scrubbed, not timed. It moves only while the reader moves, it
        cannot spin on its own, and it decelerates into the value instead
        of landing on it. Park the scroll and the number parks.

     2. "IT PUTS A WRONG NUMBER ON SCREEN FOR MOST OF THE SCROLL." This
        one is arithmetic and cannot be argued away — a count from zero
        does display numbers that are not the published figure, and
        knowledge-base.md § 3 forbids inventing, rounding or estimating
        any others. ANSWERED BY MAKING IT LATE AND BOUNDED: each figure
        finishes on its own stop between 0.68 and 0.94 of the entrance,
        so the four settle left to right and the last is true before the
        entrance is over. Measured at 1280x720 the whole count runs with
        the plate on screen, and the published figures stand for every
        frame after it. The old odometers ran on a timer and were wrong
        for most of the scroll whether anyone was looking or not.

   WHAT IS STILL NOT ALLOWED HERE. The figures may not be invented,
   rounded or estimated; the count must always terminate exactly on the
   published string, including its comma, its $, its M and its +; and the
   truth must be in the DOM for assistive technology at every instant. If
   a future pass wants the counter gone again, deleting countFigures in
   js/motion.js is the whole change — the markup never held any of it.

   NOTHING SWEEPS, FILLS OR RUNS OUT. No rule scales from zero — the three
   dividers and the plate's border are drawn at full length at all times,
   and --rcdp may only fade and lift. Three times on this page a scrubbed
   element that travelled toward a full state has been read as a loading
   bar.

   TWO NUMBERS, AND THEY ARE DIFFERENT KINDS. --rcdp is the ENTRANCE and
   it arrives: the plate rises 14px and is LIT — its edge comes up from a
   quarter-strength neutral rim to full gold — the three rules fade in
   left to right, the four bays come up in turn, each badge seats itself
   and each figure is pressed down from 3% over size to true. --rcds is
   the PASSAGE and it never arrives: it is only the light, and the ground
   under it.

   REST IS THE FINISHED BAND. --rcdp initial-value 1 and --rcds 0, so with
   no JS, a dead CDN or reduced motion the plate is ruled, lit from its
   original 138deg, and all four figures are plain text at full size.
   ========================================================================== */

/* the section's scrub clock. 1 = every bay at full key. */
@property --rcdp { syntax: "<number>"; inherits: true; initial-value: 1; }

/* THE PASSAGE, AND IN THIS SECTION IT IS THE LIGHT. -1 with the plate's
   top still at the foot of the window, 0 as it crosses the middle, +1 as
   it leaves. It never arrives anywhere; it is only ever passing through.

   WHAT IT MOVES IS WHERE THE PLATE IS LIT FROM. The header below already
   makes one claim about this object — that it is LIT FROM A DIRECTION
   rather than outlined, which is why the border is a gradient and why the
   three rules step 0.16 down to 0.10 across it. That direction was fixed.
   Now it belongs to the reader: the raking angle swings 40 degrees across
   the passage, a soft specular travels the plate's face, and each rule
   brightens as the light reaches it and goes quiet again once it is past.

   AND THAT IS NOT THE TRAVELLING HIGHLIGHT THIS PAGE KEEPS BANNING. The
   distinction is the clock. What has been thrown out three times is an
   element moving toward a full state ON ITS OWN TIME — a rule running out
   from zero, a gradient sliding its own background-position, a figure
   spinning up — because a thing that advances while the reader sits still
   is a progress bar, and it puts a WRONG state on screen until it
   finishes. Nothing here advances on its own: park the scroll and the
   light parks with it. There is no full state to reach, no rule changes
   length, and every figure is its final self at every frame. This is a
   sheet of metal catching the light differently as you walk past it,
   which is the one thing a record SHOULD do and the reason the reference
   image was a ruled plate rather than four cards. */
@property --rcds { syntax: "<number>"; inherits: true; initial-value: 0; }

.rcd {
  position: relative;
  padding-block: clamp(2.4rem, 1.7rem + 2.8vw, 4.2rem);
  /* the orbs hang off both edges; nothing may push the document sideways.
     Vertical is left alone so the plate's shadow can fall into the
     section's own padding. */
  overflow-x: clip;

  /* the local rounding, equal in value to --asyr, --trpr, --insr and
     --b2r so every section in this register agrees. --radius-md is 3px
     and is the site's editorial scale; not used here. */
  --rcdr: clamp(0.9rem, 0.6rem + 0.9vw, 1.4rem);

  /* how far the light and the ground travel. Cut at the folds, where four
     bays across become two and then one: the rake is a statement about a
     WIDE plate, and on a stacked column there is no width to rake. */
  --rcdd: 1;
}

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

.rcd__orb--a {
  width: clamp(18rem, 30vw, 34rem);
  aspect-ratio: 1;
  top: -22%;
  left: -10%;
  background: radial-gradient(circle, rgb(184 145 88 / 0.13) 0%, rgb(184 145 88 / 0) 68%);
  animation: rcd-drift-a 26s ease-in-out infinite alternate;
  /* on `translate`, because the drift clock owns `transform` and the
     individual transform properties compose with it rather than
     overwriting it */
  translate: 0 calc(var(--rcds) * var(--rcdd) * -2.2rem);
}

.rcd__orb--b {
  width: clamp(15rem, 25vw, 28rem);
  aspect-ratio: 1;
  right: -9%;
  bottom: -24%;
  background: radial-gradient(circle, rgb(143 109 56 / 0.12) 0%, rgb(143 109 56 / 0) 70%);
  animation: rcd-drift-b 34s ease-in-out infinite alternate;
  /* the far orb goes the other way: two grounds separating is the depth */
  translate: 0 calc(var(--rcds) * var(--rcdd) * 2.8rem);
}

@keyframes rcd-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.72; }
  to   { transform: translate3d(4%, 6%, 0) scale(1.12); opacity: 1; }
}
@keyframes rcd-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); opacity: 1; }
  to   { transform: translate3d(-4%, -5%, 0) scale(1); opacity: 0.66; }
}

/* --------------------------------------------------------------------------
   THE HEAD. Two pills and the air between them.
   -------------------------------------------------------------------------- */
.rcd__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(0.7rem, 0.55rem + 0.6vw, 1.1rem);
  margin-bottom: clamp(1.1rem, 0.85rem + 1vw, 1.75rem);
}

/* THE LABEL PILL IS THE SECTION'S OWN <h2>, not a <p> wrapping one: an
   <h2> inside a <p> is not nestable and the parser closes the paragraph
   before it, which leaves the heading outside the pill. It is at label
   size because the figures lead this section and the head only names it. */
.rcd__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgb(30 27 21 / 0.86), rgb(23 21 15 / 0.86)) padding-box,
    linear-gradient(110deg, rgb(184 145 88 / 0.5), rgb(184 145 88 / 0.12) 70%, rgb(214 206 196 / 0.08)) border-box;
  backdrop-filter: blur(8px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--gold-light);
  white-space: nowrap;
  opacity: clamp(0, calc(var(--rcdp) * 2.4), 1);
}

.rcd__tag::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold-shadow));
}

.rcd__tag--stamp {
  color: var(--vein);
  background:
    linear-gradient(rgb(28 26 21 / 0.7), rgb(23 21 15 / 0.7)) padding-box,
    linear-gradient(110deg, rgb(214 206 196 / 0.14), rgb(214 206 196 / 0.05)) border-box;
  opacity: clamp(0, calc((var(--rcdp) - 0.06) * 3), 1);
}
.rcd__tag--stamp::before {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px -1px rgb(184 145 88 / 0.9);
}

/* --------------------------------------------------------------------------
   THE PLATE. One object, four bays, three rules.
   -------------------------------------------------------------------------- */
.rcd__stage { position: relative; z-index: 1; }

/* the glow the plate sits in, on its own clock */
.rcd__aura {
  position: absolute;
  z-index: 0;
  inset: -22% -6%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(46% 58% at 22% 34%, rgb(184 145 88 / 0.22), rgb(184 145 88 / 0) 70%),
    radial-gradient(44% 56% at 80% 70%, rgb(143 109 56 / 0.18), rgb(143 109 56 / 0) 72%);
  animation: rcd-glow 19s ease-in-out infinite alternate;
  /* the glow comes up under the plate as it lands, and lags it on the
     passage — a light source not stuck to the thing it lights */
  scale: calc(0.9 + var(--rcdp) * 0.1);
  translate: 0 calc(var(--rcds) * var(--rcdd) * 1.3rem);
}

@keyframes rcd-glow {
  from { opacity: 0.5; transform: scale(0.96); }
  to   { opacity: 1;   transform: scale(1.04); }
}

.rcd__plate {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* four shared rows — badge, figure, label, sentence — so the four bays
     line up exactly however a sentence wraps. */
  grid-template-rows: auto auto auto auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--rcdr);
  overflow: hidden;

  /* WHERE THE LIGHT IS, 0 at the plate's left edge and 1 at its right,
     read straight off the passage. Everything below is a function of it:
     the specular's place on the face, the two gradients' rake, and each
     rule's share of it. One number, so the plate can only ever be lit
     from ONE direction — which was the point of the object. */
  --rcdw: calc((var(--rcds) * var(--rcdd) + 1) / 2);

  /* HOW MUCH GOLD IS IN THE EDGE. The plate arrives unlit — a neutral
     rim at a quarter strength — and the light comes up in it as it
     settles. It is the plate's own vocabulary used for its entrance:
     rather than sliding in from somewhere, the object is simply lit. */
  --rcdg: calc(0.28 + var(--rcdp) * 0.72);

  border: 1px solid transparent;
  background:
    /* THE SPECULAR. A wide, very soft gold bloom on the plate's face,
       standing where the light is. 0.075 at its centre and gone by 66% —
       it has no edge anywhere, which is what keeps it a sheen on metal
       and not a band crossing a surface. */
    radial-gradient(62% 150% at calc(var(--rcdw) * 100%) 6%,
      rgb(214 180 120 / 0.075) 0%,
      rgb(184 145 88 / 0.028) 34%,
      rgb(184 145 88 / 0) 66%) padding-box,
    /* the face's own tint, raking with the light */
    linear-gradient(calc(166deg + var(--rcds) * var(--rcdd) * 12deg),
      rgb(234 230 223 / 0.05) 0%,
      rgb(234 230 223 / 0.012) 54%,
      rgb(234 230 223 / 0) 100%) padding-box,
    /* ONE LIGHT: the border is a gradient, not a flat colour, so the
       plate is lit from a direction rather than outlined. The direction
       is now the reader's — 40 degrees of swing across the passage. */
    linear-gradient(calc(138deg + var(--rcds) * var(--rcdd) * 20deg),
      rgb(184 145 88 / calc(0.5 * var(--rcdg))) 0%,
      rgb(184 145 88 / calc(0.14 * var(--rcdg))) 46%,
      rgb(214 206 196 / 0.07) 100%) border-box;
  box-shadow: 0 26px 60px -32px rgb(0 0 0 / 0.66);
  /* the plate arrives as ONE object and the bays resolve inside it. 14px,
     under the bays' own 12px, so the two readings do not fight. */
  transform: translate3d(0, calc((1 - var(--rcdp)) * 14px), 0);
}

.rcd__bay {
  --rcdq: clamp(0, calc((var(--rcdp) - 0.04 - var(--rcdi) * 0.09) / 0.3), 1);
  position: relative;
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  justify-items: center;
  min-width: 0;
  padding: clamp(1.35rem, 1rem + 1.5vw, 2.3rem) clamp(0.9rem, 0.65rem + 1vw, 1.6rem);
  text-align: center;
  transform: translate3d(0, calc((1 - var(--rcdq)) * 12px), 0);
  opacity: calc(0.1 + var(--rcdq) * 0.9);
}
.rcd__bay:nth-child(1) { --rcdi: 0; --rcdl: 0.16; }
.rcd__bay:nth-child(2) { --rcdi: 1; --rcdl: 0.14; }
.rcd__bay:nth-child(3) { --rcdi: 2; --rcdl: 0.12; }
.rcd__bay:nth-child(4) { --rcdi: 3; --rcdl: 0.10; }

/* THE RULES. Three plain hairlines running the height of the plate, lit
   from the same place its border is — 0.16 down to 0.10 left to right —
   and faded at both ends so they read as ruling rather than as the
   borders of a table. Drawn at full length at all times: nothing in this
   section scales from zero. */
.rcd__bay + .rcd__bay::before {
  /* WHERE THIS RULE STANDS on the plate: the dividers sit at a quarter,
     a half and three quarters across, and --rcdi is already 1, 2 and 3
     on the bays that carry them. */
  --rcdk: min(
    clamp(0, calc((var(--rcdw) - var(--rcdi) * 0.25 + 0.4) / 0.4), 1),
    clamp(0, calc((var(--rcdi) * 0.25 - var(--rcdw) + 0.4) / 0.4), 1));

  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  /* THE RAKE. Each rule takes its base share of the light — 0.16, 0.14,
     0.12, 0.10 left to right, unchanged — plus a triangular lift that
     peaks as the light reaches it and is back to nothing by the time the
     light is a third of the plate past. The three brighten in turn as the
     reader goes by and NONE of them ends up brighter than it started:
     there is no accumulated state, which is the difference between a rake
     and a fill. */
  background: linear-gradient(
    180deg,
    rgb(214 206 196 / 0) 0%,
    rgb(214 206 196 / calc(var(--rcdl) + var(--rcdk) * 0.17)) 14%,
    rgb(214 206 196 / calc(var(--rcdl) + var(--rcdk) * 0.17)) 86%,
    rgb(214 206 196 / 0) 100%);
  /* AND THE PLATE IS RULED LEFT TO RIGHT. The three arrive one after
     another rather than together — a FADE, never a scale. Nothing in this
     section runs out from zero; the note at the head of the file is
     explicit that a line which wants to arrive may only fade, and this is
     that permission being used. */
  opacity: clamp(0, calc((var(--rcdp) - 0.06 - var(--rcdi) * 0.07) * 3.4), 1);
}

/* the light that falls on a bay under the hand. A wash, not a fill: no
   edge, no shape, nothing that could be mistaken for a bar. */
.rcd__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(112% 74% at 50% 0%, rgb(184 145 88 / 0.13), rgb(184 145 88 / 0) 70%);
  transition: opacity 0.5s var(--ease-out);
}

/* ---- what stands in a bay ------------------------------------------------ */

/* THE BADGE IS A RING, NOT A DISC: 1px gold ring, an 8% gold fill, and
   nothing else. */
.rcd__badge {
  position: relative;
  z-index: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 2.1rem + 1.2vw, 3.3rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(184 145 88 / 0.32);
  background: rgb(184 145 88 / 0.08);
  /* the ring seats itself as its bay comes up. On `scale`, which the hand
     does not touch — the three properties in the transition below all
     take literal values from :hover, and none of them is scrub-fed, so
     the two never contend for the same declaration. */
  scale: calc(0.86 + var(--rcdq) * 0.14);
  transition: border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out),
              box-shadow 0.5s var(--ease-out);
}

.rcd__ico {
  display: block;
  width: 44%;
  height: auto;
  color: var(--gold);
  transition: color 0.5s var(--ease-out);
}
.rcd__ico path {
  fill: none;
  stroke: currentColor;
  /* NON-SCALING, so the mark always renders at the same 1.4px however the
     glyph is sized. In user units a 1.5 stroke inside a 24 box drawn at
     22px comes out 1.6px — heavier than every rule in the section it sits
     in, which is what made an earlier set of these read as solid blocks. */
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* THE FIGURE. Tabular, so the four share a digit rhythm. */
.rcd__fig {
  position: relative;
  z-index: 1;
  grid-row: 2;
  margin: clamp(0.9rem, 0.7rem + 0.8vw, 1.45rem) 0 0;
  font-size: clamp(1.95rem, 1.3rem + 2vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.034em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);

  /* THE FIGURE IS PRESSED IN. It comes down from 3% over size and settles
     to true as its bay arrives — the motion of a stamp being struck into
     a plate, which is what this section is.

     READ THE NEXT SENTENCE BEFORE CHANGING THIS. It is a settle, not a
     count: the number is its final self, at full legibility, in every
     frame of it. Two earlier builds rolled these figures up from zero on
     digit reels and both were thrown out, because a figure that visibly
     travels to its answer reads as a slot machine on the one page where a
     buyer is deciding whether $3.5M is a real number — and because it
     puts a WRONG number on screen for most of the scroll. Scale may
     settle. Value may not move. */
  scale: calc(1.03 - var(--rcdq) * 0.03);
  transition: color 0.5s var(--ease-out);
}

/* --------------------------------------------------------------------------
   THE COUNT. Reinstated 2026-08-23 on instruction, after two builds had
   removed it. READ THE NOTE AT THE HEAD OF THIS FILE FIRST: the two
   objections it was pulled for are real, they have not gone away, and
   everything here is shaped around them.

   THREE SPANS, ALL BUILT BY js/motion.js, NONE OF THEM IN THE MARKUP. The
   section's resting state is still a plain text figure, so a dead CDN, a
   thrown script or reduced motion renders exactly what it rendered
   before: the published number, at rest, in the first frame.

     .rcd__figs   THE SIZER. The final string at visibility: hidden. It
                  holds the box at its finished width so the plate cannot
                  reflow while the number runs — "0" and "38,000+" are not
                  the same width, and without this all four bays twitch on
                  every frame of the count and the three dividers with
                  them.
     .rcd__figv   the value, laid over the sizer in the same grid cell.
     .sr-only     THE TRUTH. Assistive technology is never handed a number
                  that is mid-count; it reads the published figure and
                  nothing else.

   THE GRID IS SWITCHED ON BY A CLASS THE SCRIPT ADDS, so a figure that
   was never wrapped keeps the exact box it has always had.
   -------------------------------------------------------------------------- */
.rcd__fig.is-counting {
  display: grid;
  justify-items: center;
}

.rcd__fig.is-counting .rcd__figs,
.rcd__fig.is-counting .rcd__figv { grid-area: 1 / 1; }

.rcd__fig.is-counting .rcd__figs { visibility: hidden; }

/* THE TWO BOUNDED FIGURES ARE GOLD AND THE TWO COUNTED ONES ARE INK, set
   by position because the distinction belongs to the composition and not
   to the content: bays 3 and 4 are gold wherever this band is used. Gold
   here is a gradient rather than a flat fill. The darkest stop is
   --gold-shadow at the very foot of the letterform; --gold carries the
   body of it at 6.4:1 on this ground, well clear of the 3:1 large-text
   floor. */
.rcd__bay:nth-child(3) .rcd__fig,
.rcd__bay:nth-child(4) .rcd__fig {
  background: linear-gradient(150deg, var(--gold-light) 0%, var(--gold) 62%, var(--gold-shadow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* static gradient, breath on brightness. A gradient that slides its own
     background-position is a highlight travelling across the number, and
     a travelling highlight on a figure is the slot machine this section
     spent two revisions getting away from. */
  animation: rcd-sheen 11s ease-in-out infinite alternate;
}
.rcd__bay:nth-child(4) .rcd__fig { animation-delay: -4.4s; }

/* ONCE WRAPPED, THE PARAGRAPH MUST STOP PAINTING ITS OWN GRADIENT, and
   this is not a tidy-up — it is the fix for a visible fault.

   `background-clip: text` clips the paragraph's gradient to EVERY glyph
   in the element, and `visibility: hidden` does not take the sizer's
   glyphs out of that clip. It stops the sizer painting ITSELF; it does
   not stop an ancestor painting through its shape. So on the two gold
   bays the sizer's finished string — "100%" — was drawn in gold on top of
   whatever the value currently read, and any frame where the two differed
   showed both numbers superimposed. The ink bays never showed it, because
   they have no gradient to clip and a hidden span really is hidden; and
   it disappeared the moment the count landed, because then the two
   strings matched exactly. A fault that is invisible at rest and only
   appears mid-count is worth this many lines.

   The value span carries the gradient from here instead. The sheen stays
   on the paragraph, because `filter` applies to the whole subtree. */
.rcd__bay:nth-child(3) .rcd__fig.is-counting,
.rcd__bay:nth-child(4) .rcd__fig.is-counting {
  background: none;
}

.rcd__bay:nth-child(3) .rcd__figv,
.rcd__bay:nth-child(4) .rcd__figv {
  background: linear-gradient(150deg, var(--gold-light) 0%, var(--gold) 62%, var(--gold-shadow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes rcd-sheen {
  from { filter: brightness(0.95); }
  to   { filter: brightness(1.12); }
}

.rcd__name {
  position: relative;
  z-index: 1;
  grid-row: 3;
  margin: clamp(0.6rem, 0.5rem + 0.42vw, 0.9rem) 0 0;
  font-size: clamp(0.75rem, 0.72rem + 0.14vw, 0.83rem);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.5s var(--ease-out);
}

.rcd__note {
  position: relative;
  z-index: 1;
  grid-row: 4;
  margin: clamp(0.42rem, 0.35rem + 0.24vw, 0.6rem) 0 0;
  /* 34ch resolves to 317px, wider than the bay's own 251px measure, so it
     constrains nothing at four across and each sentence breaks on the bay
     rather than on an arbitrary character count — measured natural widths
     220 / 246 / 324 / 348px, so bays 01 and 02 set on one line and 03 and
     04 on two, which is what the reference does. (24ch would have cut
     bay 02 to two lines for no reason.) It earns its place at the 2-up
     and stacked folds, where a bay is wide enough to run a sentence too
     far.

     NOTE FOR ANYONE MEASURING THIS: the paragraph BOX is two lines tall
     in all four bays whatever the text does, because row 4 is a shared
     subgrid row sized to the tallest sentence and the short ones stretch
     into it. That is the point — all four sentences start on one line
     (527px, measured) and the plate's foot stays straight. Counting
     rendered height and calling it line count reads the row, not the
     text. */
  max-width: 34ch;
  font-size: clamp(0.85rem, 0.82rem + 0.14vw, 0.925rem);
  line-height: 1.5;
  color: var(--vein);
  text-wrap: pretty;
  transition: color 0.5s var(--ease-out);
}

/* --------------------------------------------------------------------------
   THE HAND
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .rcd__bay:hover .rcd__wash { opacity: 1; }
  .rcd__bay:hover .rcd__badge {
    border-color: rgb(192 156 96 / 0.72);
    background: rgb(184 145 88 / 0.16);
    box-shadow: 0 0 22px -6px rgb(184 145 88 / 0.6);
  }
  .rcd__bay:hover .rcd__ico { color: var(--gold-light); }
  .rcd__bay:hover .rcd__name { color: var(--white); }
  .rcd__bay:hover .rcd__note { color: var(--ink); }
  .rcd__bay:nth-child(1):hover .rcd__fig,
  .rcd__bay:nth-child(2):hover .rcd__fig { color: var(--white); }
}

/* --------------------------------------------------------------------------
   NARROW. The plate folds twice — four across, then two by two, then
   stacked — and at each fold the ruling is re-cut so a bay never carries a
   divider on a side that has no neighbour.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  /* HALF THE RAKE AT TWO ACROSS. The dividers are re-cut below at a flat
     0.14 and no longer stand at quarters of the plate, so the per-rule
     lift has nothing to key to; what is left is the specular and the
     edge's swing, which still read on a plate this wide. */
  .rcd { --rcdd: 0.5; }

  .rcd__plate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* eight rows written out. Two columns of bays that each span four
       rows need eight; leaving the template at four lets the second pair
       land in implicit auto rows, which renders correctly today and is
       exactly the kind of dependency that breaks two browser versions
       from now. */
    grid-template-rows: repeat(8, auto);
  }
  /* two across: the vertical rule belongs to the right-hand bay of each
     pair, and the second row takes a horizontal one */
  .rcd__bay + .rcd__bay::before { content: none; }
  .rcd__bay:nth-child(2n)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgb(214 206 196 / 0) 0%,
      rgb(214 206 196 / 0.14) 14%,
      rgb(214 206 196 / 0.14) 86%,
      rgb(214 206 196 / 0) 100%);
  }
  .rcd__bay:nth-child(n + 3)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgb(214 206 196 / 0) 0%,
      rgb(214 206 196 / 0.13) 12%,
      rgb(214 206 196 / 0.13) 88%,
      rgb(214 206 196 / 0) 100%);
  }

  /* the re-cut rules take the same entrance fade the four-across ones do.
     They never had it: the ramp was written only on the
     `.rcd__bay + .rcd__bay::before` selector, which this fold sets to
     `content: none`, so below 1040 the ruling arrived at full strength in
     one frame while the bays it divides were still coming up. */
  .rcd__bay:nth-child(2n)::before,
  .rcd__bay:nth-child(n + 3)::after {
    opacity: clamp(0, calc((var(--rcdp) - 0.06) * 3.4), 1);
  }
}

@media (max-width: 620px) {
  /* STACKED, THERE IS NO PLATE TO RAKE. Four bays in a column is a tall
     narrow object; a light crossing it left to right has 300px to cross
     and reads as a flicker rather than as a rake. The ground keeps a
     little of the passage; the plate keeps none of it. */
  .rcd { --rcdd: 0; }
  .rcd__orb--a { translate: 0 calc(var(--rcds) * -1rem); }
  .rcd__orb--b { translate: 0 calc(var(--rcds) * 1.3rem); }

  .rcd__plate {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  /* one column has nothing beside it to line up with, so the shared rows
     go too */
  .rcd__bay {
    grid-row: auto;
    grid-template-rows: auto auto auto auto;
  }
  .rcd__bay:nth-child(2n)::before { content: none; }
  .rcd__bay:nth-child(n + 3)::after { content: none; }
  .rcd__bay + .rcd__bay::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgb(214 206 196 / 0) 0%,
      rgb(214 206 196 / 0.13) 12%,
      rgb(214 206 196 / 0.13) 88%,
      rgb(214 206 196 / 0) 100%);
    /* stacked, the rules arrive DOWN the column with the bays they
       separate — --rcdi is 1, 2, 3 on the bays that carry one */
    opacity: clamp(0, calc((var(--rcdp) - 0.06 - var(--rcdi) * 0.07) * 3.4), 1);
  }
  .rcd__note { max-width: 32ch; }
  .rcd__head { gap: 0.6rem; }
  .rcd__tag { letter-spacing: 0.16em; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION. Every clock stops. The band is already ruled at rest;
   only the hand's ramps are stilled.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* --rcdp rests at 1 and --rcds at 0, so the plate is ruled, lit from
     its original 138deg, and every figure is at true size already.
     Nothing needs unwinding — only the clocks and the passage stop. */
  .rcd { --rcdd: 0; }
  .rcd__orb,
  .rcd__aura { translate: none; }
  .rcd__orb,
  .rcd__aura,
  .rcd__fig { animation: none; }
  .rcd__wash,
  .rcd__badge,
  .rcd__ico,
  .rcd__fig,
  .rcd__name,
  .rcd__note { transition: none; }
}