/* =====================================================================
   THE RESIDENCIES — the rules only this page uses, on top of
   alvara-editorial.css. Same `.alv-ed` scope, loaded second, so where the
   two set the same property at the same specificity this file wins.

   Rebuilt August 2026 from docs/college/The Residencies.html, a bundled
   Claude Design canvas artboard whose whole look is inline styles on a
   `data-root` div: Jost for every tracked micro-cap, Spectral for every
   paragraph, and #EFEAE0 / #263A31 / #9C7C3F written out as literals about
   two hundred times. None of the three is the estate's, so none of them is
   carried across. What the design contributes is its FURNITURE, and that is
   what the `.rz-` block at the foot of this sheet is: the label bar, the
   hairline card grid, the ruled rows, the chapter opener, the numbered
   steps and the Spiral. Every one of them reads a `--ground-*` token and
   names no colour, so a section can be repainted without touching them.

   What survives from the page it replaced is what the design also needs:
   the plate geometry, the two picture shapes, the numbered Residency leaf
   (`.rsec`) and the film mount (`.v-video-*`). What went with the old page
   is about nine hundred lines — the stage explorer (`.rw-*`), the two
   directions pathway (`.rpath`), the four branches sequence
   (`.branchseq`), the Applied Residency's video-and-prose layout (`.v-top`,
   `.v-mid`, `.v-lower`), the two long article sections (`#nextgen`,
   `#paths`), `#guardians` and the `.cband` overrides. A stylesheet still
   dressing a component nobody renders reads as though the component is one
   refresh away.

   The bound-volume vocabulary this page shares with the Fellows — `.vol`,
   `.sec`, `.wrap`, `.cband`, `.leaf`, `.figblock` — is next door in
   alvara-editorial.css, where it was moved when this page turned out to
   need every rule of it. `.figblock.beside` is the only setting the page
   writes now: the magazine float went when the three Residencies became
   column blocks, and about a hundred lines of geometry that existed to size,
   gutter and unfloat it went with it.

   Three of the design's own rules are deliberately not here:

   - `.hero .imgwrap .veil` and `.hero .stand`. The hero is the estate's,
     shared with the Fellows, the College and Membership, and the veil is
     the one the College settled on rather than a page's private copy.
   - anything setting a heading in the body face. h1 through h4 are Cormorant
     across the estate, and a rule saying otherwise in a sheet loaded AFTER
     the shared one wins silently.
   - the design's `<header>` and `<footer>` rules. The estate has
     `_college_nav.html` and `.alv-foot`.
   ===================================================================== */

/* =====================================================================
   A FILM SITS IN THE PHOTOGRAPH'S COLUMN, and `--rz-film` is what puts it
   there. It is the last of the page's plate geometry: the float widths, the
   gutters and the drop went with the magazine setting when every block on
   this page became a `.figblock.beside` column, and a token nothing reads is
   a token that comes to disagree with the page.

   THE FILMS CANNOT TAKE THE PHOTOGRAPHS' SHAPE. All five are shot upright —
   340x582, 360x616 twice, 380x630 and 400x684, so 0.584 to 0.603 — near
   enough one ratio between them and nowhere near 4:5. Two were being cropped
   into a 3/4 box by `object-fit: cover`, which on a 0.584 film throws away a
   fifth of the frame; the other two took their own height and so stood at
   their own size beside everything else.

   So a film keeps its own shape — 7/12, within 0.2% of four of the five and
   a 3% crop on the fifth — and the COLUMN IT SITS IN is the photograph's,
   which the shared `.figblock.beside` sets at 45% of the measure. The film is
   drawn inside that column at the width that makes it the SAME HEIGHT as a
   4:5 photograph in the same column, and what is left either side is the
   buffer:

       film = column x 5/4 (the photograph's height) x 7/12 = 72.92%

   At the page's 1040px measure that is a 475px column carrying a 346x594
   film, against a 4:5 photograph at 475x594 in the same column. So every
   plate down the page starts the prose at the same place and stands to the
   same height, picture or film — and no film is upscaled to reach it, 346px
   being about their own pixel width.

   `--rz-film` is a percentage of its column, not of the measure. A percentage
   in a custom property resolves where it is USED rather than where it is
   declared, which is what lets one token serve every film on the page.
   ===================================================================== */
.alv-ed {
  --rz-film: calc(100% * 5 / 4 * 7 / 12)
}

.alv-ed .tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--word);
  font-size: var(--fs-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ground-kick);
  font-weight: 600;
  transition: .3s
}

.alv-ed .tlink:hover {
  color: var(--ground-ink)
}

.alv-ed .sec.green {
  color: var(--ground-ink)
}

.alv-ed .sec.green .wrap {
  position: relative;
  z-index: 1
}

/* ===== TWO SHAPES, AND ONLY TWO =====
   Restated from fellows.css, where the reasoning is written out in full: every
   photograph on that page is PORTRAIT 4:5 or LANDSCAPE 3:2 on `.hph.land`, held
   to the same width rather than the same height, because a page that lets each
   picture keep its own ratio reads as a page nobody set. This page was doing
   exactly that — 0.75, 1.50, 1.25 and 0.75 across its four figblock plates,
   and the opening spread cropped to a fixed pixel height on top of it.

   A SECOND COPY RATHER THAN A PROMOTION, deliberately. The estate's habit is to
   move a rule into alvara-editorial.css when a second page needs all of it —
   that is how `.leaf` and `.cband` got there — but `.figblock` is written by the
   College page too, and promoting these two would reshape three photographs on
   a page nobody asked to change. Same reason `.spread.dark .leaf` stayed in
   fellows.css. If the College ever wants the discipline as well, the move is to
   promote the pair and delete both copies, not to write a third.

   `land` is the orientation and is fellows.css's name for it; this page's own
   `.wide` is a WIDTH and the Extended Residency's plate carries both. */
.alv-ed .figblock .hph img {
  aspect-ratio: 4/5
}

.alv-ed .figblock .hph.land img {
  aspect-ratio: 3/2
}

/* A CAPTION READS THE GROUND, like everything else on the estate. The shared
   sheet's `.hcap` is a flat #8a6a1a, which is the gold that reads on cream —
   and this is the first page to caption a figure standing on green, where
   that colour is very nearly the panel. `.plate figcaption` was given the
   same treatment upstream for the same reason; this is the figblock's. */
.alv-ed .sec.green .figblock .hcap {
  color: var(--gold-soft)
}

/* ===== THE THREE RESIDENCIES — one continuous leaf =====
   The padding and the head rhythm are the snug pair.

   THE MEASURE IS DELIBERATELY UNSET. `.htx` was capped at 60ch and uncapped
   again eighty lines below, a self-cancelling pair that only looked harmless
   while both halves matched. Both are gone: `.htx` is a column of a
   `.figblock.beside` grid now, and its width is the grid's business.

   They key on `.rsec`, which is this section and only this section:
   residency.css is loaded by this page alone and nothing else on it is an
   `.rsec`. The selectors used to name `.rsec.cream` — the GROUND rather than
   the section — so when the leaf was repainted green the whole block stopped
   matching in one edit and took the layout with it. A ground can be
   repainted now without taking the page's measure with it. */
.alv-ed .rsec {
  position: relative;
  padding-top: clamp(14px, 1.8vw, 22px);
  padding-bottom: clamp(30px, 3.6vw, 52px)
}

.alv-ed .rsec .r-head {
  margin-bottom: 0
}

/* THE NUMERAL AND THE TITLE ARE THE STAGE'S, NOT THE LEAF'S. They keyed on
   `.rsec` while all three Residencies were spreads on one continuous page;
   Stage Three is a band now and sits outside it, and a stage whose title
   silently fell back to the base heading rule because of where it happens to
   stand is exactly the fault the `.rsec.cream` note below describes.

   Page-scoped rather than section-scoped is safe here for the reason given
   there: residency.css is loaded by this page and nothing else. And it names
   neither a ground nor a container, which is the property that mattered — a
   ground can still be repainted, and a stage moved, without taking its own
   type with it. */
.alv-ed .r-roman {
  display: block;
  font-family: var(--word);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ground-kick);
  margin-bottom: 9px
}

.alv-ed .r-title {
  font-family: var(--word);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--ground-ink);
  margin: 0
}

/* The label bar sits above the numeral inside the head, so it carries the
   space between itself and the numeral rather than the head carrying it. */
.alv-ed .rsec .r-head .rz-label {
  margin-bottom: clamp(14px, 1.6vw, 20px)
}

/* Scattered Alvará seals — the estate's 44 KB plate, not a page's own
   re-export of it. */
.alv-ed .rseal {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .05;
  filter: saturate(.2);
  width: min(30vw, 360px)
}

.alv-ed .rseal-a {
  width: min(26vw, 320px)
}

.alv-ed .rseal-b {
  width: min(22vw, 270px)
}

@media(max-width:820px) {
  .alv-ed .rseal {
    width: min(50vw, 260px)
  }
}

.alv-ed .rsec .wrap {
  position: relative;
  z-index: 1
}

.alv-ed .rsec .body>p {
  text-align: left
}

/* tidy vertical rhythm now the layout is image + running text, not a grid */
.alv-ed .rsec .figblock {
  margin-top: clamp(20px, 2.6vw, 34px)
}

/* Stages One and Two are ONE section, not two — a single leaf, single top and
   bottom padding, with a quiet internal rule marking the move from one stage
   to the next instead of a full page break. It was all three; Stage Three is
   a `.rz-plate` band now, and a band bleeds to the edge and cannot live
   inside the leaf's `.wrap`, so the leaf closes before it. */
.alv-ed .rsec-divider {
  height: 0;
  background: none;
  margin: clamp(20px, 2.6vw, 30px) 0 clamp(14px, 1.8vw, 20px)
}

/* a little more air so the block under the divider doesn't feel cramped */
.alv-ed .rsec-divider~.r-head {
  margin-bottom: 2px
}

/* ===== ONE MOUNT FOR A FILM, AND IT IS THE PHOTOGRAPH'S =====
   A film is framed the way a picture is: the same `--gold-line` hairline, and
   the corner marks written into the markup beside it, so the films and the
   photographs read as one set of plates rather than as two kinds of thing.

   Scoped to the page, NOT to a ground. These three were written
   `.rsec.cream …`, and that selector named a GROUND: when the leaf was
   repainted green, the Applied Residency's film silently lost its border,
   its background and the `width: 100%` that makes it fill the box, while two
   others never matched it in the first place and grew their own overrides to
   say so. A frame is a frame whatever colour is behind it; only the caption
   has to know, and it asks `.sec.green` the same way `.plate figcaption`
   does upstream.

   `aspect-ratio: 7/12` is EVERY film's shape, and it is close to the shape
   they were shot in: 360x640, 360x616 twice, 380x630 and 400x684 are 0.5625,
   0.5844, 0.5844, 0.6032 and 0.5848, against 7/12's 0.5833. Three of the five
   are inside 0.3% of it and lose nothing to `object-fit: cover`; the other
   two are the arena film, 3.7% narrower, which loses that off its height, and
   the paths film, 3.4% wider, which loses it off its width. Neither is enough
   to take anything out of the frame, and one shape for all five is what the
   buffer below is arithmetic about.

   It was 3/4, which none of them is: a 0.584 film cropped into a 0.75 box
   loses a fifth of its frame off the sides. Two answered that by setting
   `aspect-ratio: auto` and taking their own height, which fixed the crop and
   left them standing at a different size from the other three. One shape,
   declared once, is what makes the buffer below arithmetic. */
.alv-ed .v-video-frame {
  position: relative;
  border: 1px solid var(--gold-line);
  box-shadow: 0 24px 54px -30px rgba(0, 0, 0, .4);
  overflow: hidden;
  background: #0c1c12;
  aspect-ratio: 7/12
}

/* THE BUFFER. Every film on the page sits in a column the width of a
   portrait photograph and is drawn inside it at `--rz-film`, so the column
   is the photograph's and the film stands to the photograph's height — see
   the derivation at the top of this sheet.

   The design carried the films at four different widths and none of them at
   the photographs' column, which is what made the page read as two sets of
   plates rather than one. Written on `.v-video`, which is every film's own
   wrapper, rather than on the four sections that happen to hold one. */
.alv-ed .figblock .v-video {
  width: var(--rz-film);
  margin-inline: auto
}

/* AND WHICH SIDE THE BUFFER FALLS ON, which is the whole of what a reader
   sees of it. Two lines run down a page set like this: the outer margin,
   which every photograph hangs off, and the inner edge of the column, which
   the prose is set against. A film narrower than its column has to give one
   of them up, and it gives up the inner one.

   Centred, it broke BOTH — 64px in from the margin at a desktop measure, so
   a film stood inset while a photograph in the block below sat flush, and
   the run read as plates nobody had lined up. Flush to the margin, the films
   align with the photographs above and below them and with the section
   headings, and what is left is a wider band of air between the film and the
   prose, which reads as air.

   GUARDED ABOVE `.figblock.beside`'s OWN COLLAPSE, which is 900px in the
   shared sheet and not the 820 the magazine float used: below it there is no
   margin to be flush with — the column is the whole measure — and the base
   rule's centring is what is wanted. The two were the same number while these
   blocks were floats, and between 821 and 900 the film hugged the left edge
   of a full-width measure. */
@media (min-width:901px) {

  .alv-ed .figblock .fig-left .v-video {
    margin-inline: 0 auto
  }

  .alv-ed .figblock .fig-right .v-video {
    margin-inline: auto 0
  }
}

.alv-ed .v-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.alv-ed .v-video-cap {
  margin-top: 9px;
  text-align: center;
  font-family: var(--word);
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ground-kick)
}

/* The one thing about a film that IS the ground's business. `--ground-kick`
   is the gold that reads on cream; on green it is nearly the panel. */
.alv-ed .sec.green .v-video-cap {
  color: var(--gold-soft)
}

/* =====================================================================
   THE DESIGN'S FURNITURE — `.rz-`

   Six components carry the whole of the August 2026 design between them,
   and every one of them was two hundred characters of inline style repeated
   at each use. What they have in common is why they are worth naming: none
   of them declares a colour. Every ink, hairline and ground comes from the
   `--ground-*` contract in main.css, so the same markup stands on cream or
   on green and a section can be repainted without any of this being edited.

   THE HAIRLINE GRID (`.rz-cards`, `.rz-chips`, `.rz-numbers`) is the design's
   one genuinely new idea, and it is drawn by a RING ON EACH CELL — a 1px
   `box-shadow` spread, no gap, no border and nothing painted on the
   container. Adjacent cells' rings land on the same pixel and read as one
   hairline; the outermost ones draw the frame. So a grid of any width draws
   its own dividers, in one colour, with no cell having to know whether it is
   the last in its row, and `auto-fit` reflows it to two-up and one-up with
   the rules following.

   THE OBVIOUS WAY ROUND — paint the CONTAINER the rule colour and open a 1px
   gap — is what these three carried, and it is wrong for one reason that
   only shows at some widths: what fills the gap is the container, so
   wherever a row is not full the container shows through the missing cell
   as a solid block of rule colour the size of a card. Three cards at two-up
   is a grey panel where the fourth would be. It was live on `.rz-cards`
   between about 460 and 690px and on `.rz-numbers` at every telephone width.
   A ring is painted by the cell, so a cell that does not exist paints
   nothing.
   ===================================================================== */

/* ----- the label bar: a kicker with a rule running off it.

   `nowrap` IS GUARDED ABOVE THE COLLAPSE, and that guard is the whole of what
   this rule has to get right. Several of these labels are long — "Stage Two ·
   Mentored after Branch One, or Guided after Branch Two" is about sixty
   characters at .28em of tracking — so held on one line at 390px the label is
   wider than the telephone, and a flex item that cannot shrink takes its row,
   its `.wrap` and the whole page with it. `overflow-x: clip` on `.alv-ed`
   then HIDES the result rather than reporting it: no scrollbar, no error,
   nothing in a status code, just every line of prose on the page running off
   the right-hand edge mid-word. It is the same fault the figure widths at the
   foot of this sheet were written to repair, arriving through a different
   property.

   Below the collapse the kicker wraps to as many lines as it needs and the
   rule takes what is left of the last one, or drops to a line of its own. ----- */
.alv-ed .rz-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(14px, 1.7vw, 22px)
}

.alv-ed .rz-line {
  flex: 1 1 40px;
  height: 1px;
  background: var(--ground-hair)
}

@media (min-width:821px) {
  .alv-ed .rz-label .kick {
    white-space: nowrap
  }
}

/* A kicker in a frame, for the one at the far end of a label bar: it is the
   band's credential rather than its name, and boxed it reads as a stamp
   beside the rule instead of as a second heading competing with the first. */
.alv-ed .kick.framed {
  padding: 7px 13px;
  border: 1px solid var(--gold-line);
  background: color-mix(in srgb, var(--gold) 8%, transparent)
}

/* ----- THE THREE PANELS. Not `.rz-cards`, and the difference is the shape
   rather than the page: a card is a cell of a hairline table and reads as one
   of a set of columns; a panel stands on its own, numbered, with air between
   it and the next. The estate's habit is to reuse a name when the shape is
   the same, and these are not — one is a table, the other is three plates.

   The bracket is `.rz-note`'s, a hairline along the top and one down the left
   each starting 26px in so the two never meet at the corner. It is the third
   thing on the page to wear it, which is what makes it the page's mark for
   "this is a closed statement" rather than one section's ornament. ----- */
.alv-ed .rz-panels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 32px)
}

.alv-ed .rz-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 1.8vw, 26px) clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
  border: 1px solid var(--gold-line);
  background: radial-gradient(120% 150% at 12% 0%,
      color-mix(in srgb, var(--gold) 11%, transparent) 0%,
      color-mix(in srgb, var(--gold) 4%, transparent) 46%,
      color-mix(in srgb, var(--gold) 2%, transparent) 100%)
}

.alv-ed .rz-panel::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0 26px, var(--gold-dim) 26px 100%)
}

.alv-ed .rz-panel::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0 26px, var(--gold-dim) 26px 100%)
}

.alv-ed .rz-panel-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px
}

/* THE SMALLER OF THE TWO EYEBROW RUNGS, because this one shares a line with
   the numeral rather than heading a block. At `--fs-eyebrow` — 12px at .28em,
   which is the estate's label size — "The Depth of Reference" is wider than
   the panel less its numeral, and all three titles fold to two lines and take
   the row with them. `--fs-eyebrow-sm` is the same rung `.rz-plate-cap` and
   the record below take, and the tracking comes down with it. */
.alv-ed .rz-panel-h .kick {
  text-align: right;
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: .2em
}

.alv-ed .rz-panel-n {
  font-family: var(--word);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: .8;
  color: var(--ground-kick)
}

.alv-ed .rz-panel-r {
  width: 34px;
  height: 1px;
  background: var(--gold-dim)
}

.alv-ed .rz-panel p {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-body-sm);
  line-height: 1.66;
  color: var(--ground-ink-soft)
}

/* ----- the hairline card grid ----- */
.alv-ed .rz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  margin-top: clamp(22px, 2.8vw, 36px)
}

.alv-ed .rz-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: clamp(18px, 2vw, 28px) clamp(16px, 1.8vw, 24px);
  background: var(--sec-ground);
  border-top: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--ground-hair)
}

.alv-ed .rz-card-t {
  font-family: var(--word);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.16;
  color: var(--ground-ink)
}

.alv-ed .rz-card-b {
  font-family: var(--body);
  font-size: var(--fs-body-sm);
  line-height: 1.2;
  color: var(--ground-ink-soft)
}

/* ----- the two chips: the same grid, two-up, and the cell lifted off the
   panel rather than painted a second green. A translucent lift works on
   either ground; the design wrote #22352C, which is a third green on a page
   that already has two. ----- */
.alv-ed .rz-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 0;
  margin-top: clamp(18px, 2.2vw, 26px)
}

.alv-ed .rz-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 15px;
  background: var(--sec-ground);
  box-shadow: inset 0 0 0 999px rgba(242, 237, 224, .035), 0 0 0 1px var(--ground-hair)
}

.alv-ed .rz-chip-t {
  font-family: var(--word);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.1;
  color: var(--ground-ink)
}

/* ----- the ruled rows.

   One component in three shapes, because they are the same list: a marker, a
   title and a value, of which any row may carry two or three. The design
   wrote three separate blocks of inline style for them — the Applied
   Residency's i/ii/iii, the Fellow's championship years and the horse's
   ledger — which is how a list comes to be set at three different leadings
   on one page. Which slots a row fills is the markup's business; the
   spacing, the rules and the type are this rule's. ----- */
.alv-ed .rz-rows {
  list-style: none;
  margin: clamp(16px, 2vw, 24px) 0 0;
  padding: 0;
  border-top: 1px solid var(--ground-hair)
}

.alv-ed .rz-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ground-hair)
}

.alv-ed .rz-m {
  flex: 0 0 auto;
  min-width: 26px;
  font-family: var(--word);
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--ground-kick)
}

.alv-ed .rz-t {
  font-family: var(--word);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.2;
  color: var(--ground-ink)
}

.alv-ed .rz-v {
  margin-left: auto;
  text-align: right;
  font-family: var(--word);
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ground-kick)
}

/* Title and value at opposite walls, with nothing between them. */
.alv-ed .rz-rows-split .rz-row {
  justify-content: space-between
}

/* A run that is a sequence rather than a list opens on the gold rule, and
   its value is the quiet half of the row rather than the loud one — the
   title is what is being said and the value is where it happens. */
.alv-ed .rz-rows-lit {
  border-top: 2px solid var(--gold)
}

.alv-ed .rz-rows-lit .rz-t {
  flex: 1
}

.alv-ed .rz-rows-lit .rz-v {
  color: var(--ground-mute)
}

/* What follows a run of rows stands off it. `.body p` carries a bottom
   margin and no top one — every other block on the estate is followed by a
   heading, which brings its own — so a paragraph after a bordered list sat
   hard against the list's last rule. */
.alv-ed .rz-rows+.body,
.alv-ed .rz-fellow+.body,
.alv-ed .rz-cards+.body {
  margin-top: clamp(16px, 2vw, 24px)
}

/* ----- the numbered steps ----- */
.alv-ed .rz-steps {
  list-style: none;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding: 0;
  max-width: 74ch
}

.alv-ed .rz-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: baseline;
  gap: 0 6px;
  margin-bottom: clamp(12px, 1.4vw, 18px)
}

.alv-ed .rz-step-n {
  font-family: var(--word);
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--ground-kick)
}

.alv-ed .rz-step p {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: calc(1.45 * var(--lh-scale));
  color: var(--ground-ink-soft)
}

/* ----- THE EDITORIAL LEDE VOICE, DECLARED ONCE.

   The design writes one line in Cormorant at 500 above or below a block of
   prose in three places — the plate's standfirst, the closing note under a
   stage and the Spiral's turn line — and it sets them at three sizes,
   clamp(21px,2.1vw,33px), clamp(18px,1.7vw,25px) and clamp(20px,1.9vw,30px).
   Three sizes for one voice is the fault the plate geometry at the head of
   this sheet was written to end, arriving in the type instead. Settled at the
   middle of the three, which is where the weight of use sits; nothing moves
   by more than 3px.

   What each of them adds to the voice is its own — the note's bracket, the
   turn line's margin — and only that is declared separately below. ----- */
.alv-ed .rz-lede,
.alv-ed .rz-note,
.alv-ed .rz-turn-line {
  font-family: var(--word);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.26;
  letter-spacing: .014em;
  color: var(--ground-ink);
  text-wrap: pretty
}

.alv-ed .rz-lede {
  margin: 0
}

/* The closing note under a stage: a bracket rather than a box, a hairline
   along the top and one down the left, each starting 26px in so the two
   never meet at the corner. It marks the paragraph as the one the section
   closes on without drawing a panel around three lines of type. */
.alv-ed .rz-note {
  position: relative;
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  padding: clamp(16px, 1.8vw, 22px) 0 0 clamp(18px, 2vw, 26px)
}

.alv-ed .rz-note::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0 26px, var(--gold-line) 26px 100%)
}

.alv-ed .rz-note::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0 26px, var(--gold-line) 26px 100%)
}

/* ----- THE FILM PLATE — the band a film runs across.

   A film on this page is one of two things and they are not the same
   component. Inside a `.figblock` it is a PLATE in the float set: 7/12, the
   photograph's column, corner marks, a caption beneath — see the geometry at
   the head of this sheet, which exists so that a film and a photograph stand
   to the same height. This is the other one: a BAND, edge to edge, with the
   film cropped into a squat panel at one end and the prose running the rest
   of the measure. It is the design's own arrangement for the school plate.

   THREE THINGS ARE DELIBERATELY DIFFERENT FROM THE PLATE SET, and each is a
   consequence of the band rather than a second opinion about films:

   - IT IS NOT 7/12, and does not want to be. The one-shape rule is about a
     film standing beside a photograph at the same height; nothing stands
     beside this one. Here the film is cropped by `object-fit: cover` into a
     panel the band's own height, which is what makes the band squat — a 7/12
     film across a third of the measure would be about 600px tall and the
     three paragraphs beside it would float in the middle of it.
   - IT BLEEDS LEFT and carries no `.wrap`. That is the point of a band.
   - ITS CAPTION IS OVER THE FILM, not under it, which is the design's.

   THE PROSE STILL ENDS WHERE THE PAGE ENDS. The design has no 1200px measure
   — every one of its sections runs to 62px from the viewport — so its prose
   ending there is consistent with the rest of it. Transplanted, consistency
   means the wrap: a paragraph finishing 62px from the edge on a page whose
   every other paragraph finishes 200px from it reads as a mistake rather than
   as a band. So the right-hand padding resolves to the wrap's own inner edge
   and falls back to the wrap's padding below 1200px, where there is no
   difference between the two. A percentage in `padding` resolves against the
   containing block's inline size, and the section's containing block is
   `<main>` — which is exactly the width the wrap is centred in. ----- */
.alv-ed .rz-plate {
  --rz-plate-pad: clamp(24px, 5vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, clamp(240px, 30vw, 360px)) minmax(280px, 1fr);
  align-items: stretch;
  padding: 0 max(var(--rz-plate-pad), calc((100% - 1200px) / 2 + var(--rz-plate-pad))) 0 0
}

/* THE CROP IS THE FILM'S, SO THE TEMPLATE SETS IT, which is the same
   arrangement every photograph on the estate is framed by: `object-position`
   goes inline beside the picture, where the picture is, rather than in a
   sheet that has to name each band to say something about one film. Two
   tokens rather than one, because the answer changes when the box turns over
   -- see the note in the collapse below. The defaults here are what suits
   both of the page's films at the desktop panel. */
.alv-ed .rz-plate-film {
  --rz-crop: 50% 82%;
  --rz-crop-narrow: var(--rz-crop);
  position: relative;
  overflow: hidden;
  min-height: clamp(330px, 38vw, 440px);
  background: #0c1c12
}

.alv-ed .rz-plate-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rz-crop);
  display: block
}

/* A BAND MAY CARRY A HEAD ABOVE THE FILM, and it keeps the prose's column
   rather than spanning the band: the label is what introduces the stage, and
   the stage's words are in the right-hand cell. So the head takes the same
   measure and the same two edges the prose beneath it takes, and the film's
   column simply starts a row lower.

   `:has()` rather than a modifier class on the section. Whether a band has a
   head is a fact about its markup, not a second thing to remember to write —
   and it is how the shared sheet already decides which way round to build a
   `.figblock.beside`.

   ON THE FLIPPED HAND the head takes column 1 and its padding falls the other
   way, which is the same two changes `.rz-plate-txt` makes and for the same
   reason: the prose's column has moved, and the head is set to the prose. */
.alv-ed .rz-plate-head,
.alv-ed .rz-plate-brow {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: end;
  /* THE HEAD IS THE PAGE'S MEASURE, so its rule runs the same length as every
     other label bar on the page rather than starting at the film's edge.

     It spans every column and is then sized and pushed to the band's own
     outer edge, which is a `.wrap`'s width without being a `.wrap`: the band
     cannot hold one, because a `.wrap` centres itself in the section and the
     film has to reach the section's edge.

     `1200px - 2 * pad` IS THE MEASURE — the same two numbers `.alv-ed .wrap`
     is built from, so the head lines up with the section above and below it
     by construction rather than by a number typed twice. The `min()` is what
     keeps it honest below 1200px, where the band has no spare width to inset
     into and the measure is simply the band less one gutter.

     A percentage resolves against the grid AREA, which is why this is a width
     on an item spanning all the columns rather than a padding: a padding on
     an item in column 2 would measure itself against that column. */
  width: min(calc(100% - var(--rz-plate-pad)), calc(1200px - 2 * var(--rz-plate-pad)));
  margin-bottom: 0;
  padding: clamp(30px, 3.4vw, 58px) 0 0
}

/* Flipped, the band's spare width is on the LEFT — the section pads that hand
   and the film bleeds off the right — so the head is pushed the other way. */
.alv-ed .rz-plate.flip .rz-plate-head,
.alv-ed .rz-plate.flip .rz-plate-brow {
  justify-self: start
}

/* ----- A BROW is a head with more in it: the label bar and, beneath it, the
   three panels that say what a Fellow brings. It takes the head's placement —
   the page's measure, at the band's outer edge — so its closing rule lines up
   with every other rule on the page rather than running the bleed.

   It exists because those panels used to be a SECTION of their own beneath
   the band, which meant two sections and two lots of padding to say one
   thing. Folded in above the film they cost the band about 40px and save the
   page a section. ----- */
.alv-ed .rz-plate-brow {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.7vw, 24px);
  padding: clamp(26px, 3vw, 46px) 0 clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid var(--ground-hair)
}

.alv-ed .rz-plate-brow .rz-label {
  margin-bottom: 0
}

.alv-ed .rz-plate:has(.rz-plate-head) .rz-plate-film,
.alv-ed .rz-plate:has(.rz-plate-head) .rz-plate-txt,
.alv-ed .rz-plate:has(.rz-plate-brow) .rz-plate-film,
.alv-ed .rz-plate:has(.rz-plate-brow) .rz-plate-txt {
  grid-row: 2
}

/* The head has taken the band's top padding; the prose takes the gap that
   would sit between them inside the cell instead. */
.alv-ed .rz-plate:has(.rz-plate-head) .rz-plate-txt,
.alv-ed .rz-plate:has(.rz-plate-brow) .rz-plate-txt {
  padding-top: clamp(26px, 2.8vw, 46px)
}

/* ----- A BAND WHOSE FILM IS INSET RATHER THAN FLUSH, which is one rule
   doing two jobs depending on which side of the band is the taller.

   WHERE THE FILM IS THE TALLER — the Applied Residency, whose prose is short
   — the margin and the deeper shape GROW the band: a stretched grid item
   contributes its aspect height PLUS its margins to the track, so the track
   comes out as the film's shape and the buffer, and the film is stretched
   back to exactly the shape it asked for. That is what stands Stage Three to
   the same height as Stage Two in the leaf above it, about 684px at the
   page's measure. Left flush it was sized by its prose at 514px and read as
   the lesser of the two.

   WHERE THE PROSE IS THE TALLER — the Fellows, which carries a head, a lede,
   the Fellow's panel, two paragraphs and a call — the track is already the
   prose's, the aspect ratio never binds, and all the margin does is take the
   film off the band's top and bottom edges. Same declaration, opposite
   effect, and both are what was asked for.

   `aspect-ratio` rather than a height, so the film follows its own column and
   a band stays right at every width without a second number to keep in step
   with the first. ----- */
.alv-ed .rz-plate.inset .rz-plate-film {
  aspect-ratio: 33 / 50;
  margin-block: clamp(20px, 2.4vw, 34px)
}

/* Stacked, there is no stage beside it to match and the film is the band's
   own width, so it takes the flush treatment back.

   It has to SAY the flush shape rather than release its own, and that is the
   whole of this note. This read `aspect-ratio: auto`, which was right while a
   flush film was sized by a `min-height` further down the sheet: releasing
   the ratio let the min-height do the work. The flush film is a ratio now, so
   `auto` left these two bands with no height from any rule at all -- and
   because `.rz-plate.inset .rz-plate-film` carries one class more than
   `.rz-plate-film`, it won, and the Applied and Fellows films collapsed to
   nothing on a telephone. Not a subtle failure and not a visible one either:
   a box of zero height renders as no box.

   `--rz-film-narrow` is declared on the flush rule beside the shape it sets,
   so the two cannot come to disagree about what "the flush treatment" is. */
@media(max-width:820px) {
  .alv-ed .rz-plate.inset .rz-plate-film {
    aspect-ratio: var(--rz-film-narrow);
    margin-block: 0
  }
}

/* THE CAPTION IS FLUSH TO THE BOTTOM-LEFT CORNER, which is the design's, and
   the College has asked for it there having been shown what it costs.

   What it costs is that the film keeps `controls` — a film that starts itself
   must be one a reader can stop — and a native control bar owns that same
   edge, full width. So whenever the controls are showing, which is any time
   the film is paused or the pointer is over it, the bar is drawn across the
   caption. It is legible while the film runs and the pointer is elsewhere,
   which is the state a reader scrolling the page is actually in.

   It was briefly top-left for exactly that reason, and the note is kept
   because the fix if it is ever wanted back is one property: `top: 0` here.
   Lifting it ~46px clear of the bar is the third answer, and reads as a
   caption floating in the picture rather than as a mark on its corner. */
.alv-ed .rz-plate-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 7px 11px;
  background: rgba(7, 17, 11, .78);
  /* THE ONE INK ON THIS PAGE THAT MUST NOT READ THE GROUND. Everything else
     asks `--ground-*` so it works on paper or on green; this label lies on a
     scrim of its own, and the scrim is a literal dark whatever the section
     beneath it is painted. It was `--ground-ink`, which is the cream on a
     green section and #20301a on a cream one — so the caption was correct on
     the three green bands and dark green on a near-black scrim on the
     Fellows, which is the first band to stand on paper. Invisible, and
     nothing reports an invisible caption. */
  color: var(--cream);
  pointer-events: none;
  /* The design sets this caption at 10px against the 12px of every other
     tracked micro-cap on the page, and it is right to: a label lying over a
     picture is a mark on the plate rather than a heading of the section, and
     at `.kick`'s size it reads as the latter. `--fs-eyebrow-sm` IS 10px, so
     the design's figure is a rung of the estate's scale rather than a fourth
     opinion about eyebrows -- it is what `.v-video-cap` takes as well. The
     tracking comes down with it, .28em being set for the larger cut. */
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: .22em
}

.alv-ed .rz-plate-txt {
  --rz-txt-gap: clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--rz-txt-gap);
  padding: clamp(30px, 3.4vw, 58px) 0 clamp(30px, 3.4vw, 58px) clamp(24px, 3.6vw, 62px)
}

/* The prose is the band's whole width, so the shared 74ch cap would leave it
   ending in the middle of the measure it was widened to fill. */
.alv-ed .rz-plate-txt .body {
  max-width: none
}

.alv-ed .rz-plate-txt .body p:last-child {
  margin-bottom: 0
}

/* THE GAP OWNS THE SPACING, and nothing the cell holds is allowed a second
   opinion about it. `.rz-label` carries a bottom margin and `.rz-chips` a top
   one -- both correct where they stand in a `.wrap`, and both ADDED to the
   flex gap here, so the band ran at about twice the design's rhythm between
   its label and its standfirst. A block that is laid out by `gap` cannot also
   be laid out by margins. Paragraph margins inside `.body` are untouched:
   those are the leading between paragraphs, not the spacing between the
   cell's parts. */
.alv-ed .rz-plate-txt>* {
  margin-block: 0
}

/* THE MIRRORED BAND, which is one word on the section. The markup does not
   change with it: the film stays FIRST in the source, where it introduces the
   block to a reader who is not looking at it, and `order` moves it to the
   right-hand column. Which is also why the collapse below has to put `order`
   back — stacked, the film belongs above the prose again, and a reversed
   source order would leave it beneath.

   The page carries three bands and they alternate — the school bleeds left,
   the Residency Experience right, the Applied Residency left again — which is
   the estate's habit with pictures down a page: two bleeding off the same
   edge with one section between them read as the same plate printed twice. */
.alv-ed .rz-plate.flip {
  grid-template-columns: minmax(280px, 1fr) minmax(0, clamp(240px, 30vw, 360px));
  padding: 0 0 0 max(var(--rz-plate-pad), calc((100% - 1200px) / 2 + var(--rz-plate-pad)))
}

.alv-ed .rz-plate.flip .rz-plate-film {
  order: 2
}

.alv-ed .rz-plate.flip .rz-plate-txt {
  order: 1;
  padding-left: 0;
  padding-right: clamp(24px, 3.6vw, 62px)
}

/* Stacked, at the same 820px every other figure on this page collapses at.
   The film keeps its crop and takes a shallower height; the prose takes the
   wrap's padding on both hands, which is what puts it back in line with the
   sections above and below it. */
@media(max-width:820px) {

  .alv-ed .rz-plate,
  .alv-ed .rz-plate.flip {
    grid-template-columns: 1fr;
    padding: 0
  }

  /* Stacked, the head is simply the first thing in the band — it is written
     first in the source for exactly this, so that "above the video" holds at
     every width and not only where the grid places it — so its placement
     comes off and it takes the wrap's padding on both hands. */
  /* Stacked, there is no spare width to inset into: the head is the band, at
     the wrap's padding, like the prose beneath it. */
  .alv-ed .rz-plate-head,
  .alv-ed .rz-plate-brow {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    width: auto;
    padding: clamp(26px, 5vw, 40px) var(--rz-plate-pad) 0
  }

  .alv-ed .rz-plate-brow {
    padding-bottom: clamp(20px, 4vw, 30px)
  }

  .alv-ed .rz-plate:has(.rz-plate-head) .rz-plate-film,
  .alv-ed .rz-plate:has(.rz-plate-head) .rz-plate-txt,
  .alv-ed .rz-plate:has(.rz-plate-brow) .rz-plate-film,
  .alv-ed .rz-plate:has(.rz-plate-brow) .rz-plate-txt {
    grid-row: auto
  }

  /* And the flipped head has to be named again, for the reason `.rz-plate-txt`
     has to be a few lines up: `.rz-plate.flip .rz-plate-head` carries one class
     more than the rule above, so it goes on winning inside the query and the
     head keeps the zeroed left padding it was given to sit against the page's
     measure. Left unsaid, every line of the label starts hard against the edge
     of the telephone. */
  .alv-ed .rz-plate.flip .rz-plate-head,
  .alv-ed .rz-plate.flip .rz-plate-brow {
    grid-column: auto;
    justify-self: stretch
  }

  .alv-ed .rz-plate.flip .rz-plate-film {
    order: 0
  }

  /* `padding-inline`, not `padding-right`. The flip zeroes the LEFT padding
     above so the prose can start at the page's measure with the film against
     the right edge; stacked, there is no film beside it and both hands want
     the wrap's padding back. Restoring one of the two left every line of this
     section starting hard against the edge of the telephone. */
  .alv-ed .rz-plate.flip .rz-plate-txt {
    order: 0;
    padding-inline: var(--rz-plate-pad)
  }

  /* THE CROP HAS TO BE RE-AIMED WHEN THE BOX TURNS OVER, which is why there
     are two tokens and not one, and the arithmetic is worth writing down
     because the answers are nowhere near each other.

     Both films are about 0.585 upright. The desktop panel is about 0.82, so
     `cover` keeps 71% of the film's height and 82% puts the pair comfortably
     inside it whichever film it is — one band shows them near the top over
     the arena floor, the other near the middle. Stacked, the panel is about
     1.86, wider than it is tall, and the same rule keeps 31%: a thin slice,
     and WHERE that slice is taken is now the whole picture. The pair sits
     20–35% down the school film and 55–72% down the paddock one, so at a
     single position one of the two is guaranteed to be sand or sky. Hence
     `--rz-crop-narrow`, set per band in the template. */
  /* ...AND THE ANSWER IN THE END WAS TO STOP AIMING IT. The paragraph above
     is the reasoning that produced `--rz-crop-narrow`, and it is right about
     everything except the premise: a 1.86 box on a 0.585 film keeps 31% of
     it, so wherever the slice is taken, two thirds of the film is thrown
     away and the horse is cut at the frame's own edge. Aiming a slice that
     thin is choosing which two thirds to lose.

     The box takes the film's shape instead -- 7/12, which is the ratio this
     page states for every frame it carries and is within 0.2% of four of the
     five films -- so `cover` has nothing left to take and the whole film is
     shown. It is a tall band on a telephone, about 669px at 390px wide, and
     that is what an upright film at the width of the screen is.

     `--rz-crop-narrow` is left declared and set in the template on all four
     bands: it costs nothing, it is what these come back to if the band is
     ever given a shape of its own again, and the desktop `--rz-crop` beside
     it is still live above this breakpoint. `min-height: 0` releases the
     clamp above so the ratio is the only thing sizing the box. */
  /* `align-self: start` IS WHAT KEEPS THE FILM ON THE PAGE IN SAFARI, and it
     is the only line here that is about a browser rather than about the
     design. Everything this box holds is absolutely positioned — the film and
     its caption both — so above it has `min-height` and here it has the ratio,
     and between them that is the WHOLE of its height. Stacked it is also a
     grid item in a row of its own under `.rz-plate`'s `align-items: stretch`,
     which is the one arrangement WebKit gets wrong: asked to stretch a box
     whose only height is a ratio and whose minimum is nought, it resolves the
     row at 0 and then runs the ratio the other way, so the box comes out 0
     wide as well. Nothing errors, nothing overflows, and all four films are
     simply not there below 821px — a box of zero height renders as no box, the
     same failure the note above this rule records arriving by another road.
     Chrome and WebKit 18 both size it correctly, so it is a regression rather
     than a reading of the spec, and it is live in Safari 26.

     `start` says what is true: the box is alone in its row and is sized by its
     ratio, not by the track. It is DELIBERATELY inside this query — above the
     collapse the film shares its row with the prose, and the `.inset` bands
     depend on being stretched, a stretched item contributing its aspect height
     and its margins to the track, which is what stands Stage Three to the
     height of Stage Two. `min-height: 1px` also clears it and is the wrong fix:
     the same magic-number workaround with nothing in the declaration to say
     which browser it is for. */
  .alv-ed .rz-plate-film {
    --rz-film-narrow: 7 / 12;
    min-height: 0;
    align-self: start;
    aspect-ratio: var(--rz-film-narrow)
  }

  .alv-ed .rz-plate-txt {
    padding: clamp(26px, 5vw, 40px) var(--rz-plate-pad)
  }
}

/* ----- THE FELLOW'S PANEL, and the two blocks that follow it, rebuilt to
   Alicia's mockup. The band was the tallest thing on the page; what shortens
   it is that each of these says the same thing ACROSS rather than DOWN.

   The name and the paragraph about the Founding Fellows sit on one baseline
   with the paragraph pushed right, which is why the mockup shortens that
   paragraph by a clause — at its old length it would wrap past the name and
   the two would stop reading as a pair. It wraps to two rows below its own
   `min()` floor, which is what `flex-wrap` is for here. ----- */
.alv-ed .rz-fellow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(6px, 0.8vw, 10px);
  padding-top: clamp(12px, 1.4vw, 20px);
  border-top: 2px solid var(--gold)
}

.alv-ed .rz-fellow-name {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.alv-ed .rz-fellow .r-title {
  font-family: var(--word);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -.012em;
  color: var(--ground-ink);
  margin: 0
}

.alv-ed .rz-fellow-note {
  flex: 1 1 min(100%, 26ch);
  max-width: 44ch;
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--ground-ink-soft)
}

/* ----- THE RECORD, four cells across.

   It was three ruled rows down the column — a year at one end and a title at
   the other, and the taller the band grew the further apart they sat. Across,
   the year and its title are stacked in one cell and the years read as a run.

   Four cells since Jerez 2026, and four go four-up, two-up or one-up, never
   three and one: a plain auto-fit at a 170px floor left 2026 alone on a row
   of its own at every column between 510 and 680px. The clamp is the switch —
   25% of a column at least 680px wide, 50% below it — and the 170px floor
   still drops it to one cell a row on a telephone.

   The hairline is the ring the other grids on this page draw, for the reason
   given at the head of the `.rz-` block: a container painted the rule colour
   shows through wherever a row is not full. ----- */
.alv-ed .rz-record {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit,
      minmax(min(100%, max(170px, clamp(25%, (680px - 100%) * 999, 50%))), 1fr))
}

.alv-ed .rz-record-c {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.6vw, 22px);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  box-shadow: 0 0 0 1px var(--gold-line)
}

/* Same rung, same reason: at the label size "Individual European Champion"
   folds inside a 170px cell. */
.alv-ed .rz-record-c .kick {
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: .16em
}

.alv-ed .rz-record-y {
  font-family: var(--word);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: .9;
  color: var(--ground-ink)
}

/* ----- the closing line and the way on, on one baseline. ----- */
.alv-ed .rz-close {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 24px)
}

/* The note takes a left bar here rather than the corner bracket it carries
   under a stage: it is closing a column beside a link, not opening the last
   word of a section, and a bracket needs a corner to sit in. */
.alv-ed .rz-close .rz-note {
  flex: 1 1 min(100%, 30ch);
  max-width: 58ch;
  margin: 0;
  padding: 0 0 0 clamp(15px, 1.3vw, 20px);
  border-left: 2px solid var(--gold-dim)
}

.alv-ed .rz-close .rz-note::before,
.alv-ed .rz-close .rz-note::after {
  content: none
}

.alv-ed .rz-close .tlink {
  white-space: nowrap;
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 4px
}

/* ----- the world map, and its key.

   The plate is CAPPED AT ITS NATIVE WIDTH. The artwork is 530x276 and it is
   raster, so anything wider than that is an upscale — and the design set it
   `width: 100%` across the measure, where it came out about 1.4x and soft.
   `max-width` on the figure rather than on the image, so the key beside it
   sizes against a column that is actually the picture's width.

   It was briefly run at 760px to make the section half as tall again, and
   that is the trade the cap exists to refuse: the height has to come from
   somewhere, and on a raster this size it comes out of the coastlines. What
   would let the map run wider is a vector re-export — the design shipped a
   924x540 raster of which the globe is 530x276, and there is no larger
   original. Until then the section is as tall as the picture is.

   The key is markup rather than part of the plate: the design baked it into
   the PNG at about seven pixels, which is neither legible nor translatable.
   The swatches are the only two colours on this page named as literals, and
   they have to be: they are quoting the artwork, and a token that moved would
   leave the key describing a map it no longer matches. ----- */
.alv-ed .rz-map {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(22px, 3vw, 44px)
}

.alv-ed .rz-map-plate {
  flex: 1 1 380px;
  max-width: 530px
}

.alv-ed .rz-map-plate img {
  width: 100%;
  height: auto;
  display: block
}

.alv-ed .rz-key {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px)
}

.alv-ed .rz-key-row {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: baseline;
  gap: 4px 12px
}

.alv-ed .rz-key-swatch {
  width: 12px;
  height: 12px;
  align-self: start;
  margin-top: 3px
}

.alv-ed .rz-key-swatch.is-founding {
  background: var(--gold)
}

.alv-ed .rz-key-swatch.is-growing {
  background: #a4aca9
}

.alv-ed .rz-key-b {
  grid-column: 2;
  font-family: var(--body);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--ground-ink-soft)
}

/* ----- the chapter opener.

   It is an ordinary section — `.sec.cream` — and takes the ground contract
   whole, so every `.kick`, `.body`, hairline and numeral inside it resolves
   dark-on-paper without this rule declaring any of it. All the class adds is
   the opener's own air, which is more than `.tight` and less than a full
   section: a chapter opener wants to read as a breath between the two green
   leaves either side of it.

   IT CARRIED A PHOTOGRAPH BEHIND A VEIL until the College asked for paper
   instead, and the four rules that arranged it — the bleed image, the
   gradient, the wrap's z-index and the `overflow: hidden` that clipped the
   image — have gone with it rather than staying to dress a component nobody
   renders. `.rz-numbers` below was written against that dark ground and is
   the one thing the change actually touched. ----- */
.alv-ed .rz-opener {
  padding: clamp(44px, 5.2vw, 78px) 0
}

.alv-ed .rz-opener-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(20px, 3vw, 48px)
}

@media(max-width:820px) {
  .alv-ed .rz-opener-body {
    grid-template-columns: 1fr
  }
}

.alv-ed .rz-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin-top: clamp(26px, 3.2vw, 42px)
}

/* The cell is painted the GROUND, like every other cell in a hairline grid on
   this page — it was `rgba(7, 17, 11, .5)`, a scrim, which is what a cell over
   a photograph has to be and is a dark blot on paper. The numeral reads
   `--ground-kick` for the same reason: `--gold-soft` is the light cut, which
   is the gold that reads on green and is nearly the paper on cream. */
.alv-ed .rz-number {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 1.9vw, 24px);
  background: var(--sec-ground);
  box-shadow: 0 0 0 1px var(--ground-hair);
  transition: background .3s
}

.alv-ed .rz-number:hover {
  background: color-mix(in srgb, var(--gold) 10%, var(--sec-ground))
}

.alv-ed .rz-number-n {
  font-family: var(--word);
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: .9;
  color: var(--ground-kick)
}

/* ----- the Spiral.

   Three turns, one showing. The track is drawn once as it arrives and the
   marker rides along it; residency.js does both, and the reasoning for the
   copy being HERE rather than in the script is at the head of the template.

   `preserveAspectRatio: none` because the drawing is a diagram of a
   sequence, not a picture: what has to survive a narrow screen is the three
   nodes being where the three drops say they are, and stretching the curve
   is a cheaper price than shrinking it until the type beside it is bigger
   than the figure. ----- */
.alv-ed .rz-spiral {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 28px)
}

.alv-ed .rz-spiral-read {
  min-height: 8.5em
}

.alv-ed .rz-turn-line {
  margin: 8px 0 0
}

.alv-ed .rz-turn-body {
  margin: 0;
  max-width: 74ch;
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: calc(1.45 * var(--lh-scale));
  color: var(--ground-ink-soft)
}

.alv-ed .rz-spiral-track {
  width: 100%;
  height: clamp(120px, 15vw, 200px);
  display: block;
  overflow: visible
}

/* EVERY STROKE IN THE DIAGRAM IS NON-SCALING, and this is the other half of
   the `preserveAspectRatio: none` ruling above. Stretching the box stretches
   the pen with it, and it stretches it by DIFFERENT amounts on the two axes:
   at a 390px screen the drawing is fitted 0.38 across and 0.583 down, so a
   2.6-unit arc is drawn 1.0px wide where it runs horizontally and 1.5px where
   it climbs, and the track under it comes out at half a pixel. That is what
   made the figure look unfinished on a telephone rather than merely small --
   the line was there and was too faint to read as a line.

   `vector-effect: non-scaling-stroke` renders each stroke at the width the
   sheet asks for, whatever the fit is doing to the geometry. It is declared
   at every width rather than in the narrow block: above 900px the two scales
   are within a fifth of each other and it changes almost nothing, which is
   the point -- one rule, and no width at which the pen is a different
   thickness from the one written down. */
.alv-ed .rz-spiral-track .rz-base,
.alv-ed .rz-spiral-track .rz-grid,
.alv-ed .rz-spiral-track .rz-drop,
.alv-ed .rz-spiral-track .rz-track,
.alv-ed .rz-spiral-track .rz-arc,
.alv-ed .rz-spiral-track .rz-node {
  vector-effect: non-scaling-stroke
}

.alv-ed .rz-spiral-track .rz-base {
  stroke: var(--ground-hair);
  stroke-width: 1
}

.alv-ed .rz-spiral-track .rz-grid,
.alv-ed .rz-spiral-track .rz-drop {
  stroke: var(--ground-hair);
  stroke-width: 1;
  opacity: .6
}

.alv-ed .rz-spiral-track .rz-track {
  stroke: var(--gold-line);
  stroke-width: 1.4;
  stroke-linecap: round
}

.alv-ed .rz-spiral-track .rz-arc {
  stroke: var(--gold);
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0
}

.alv-ed .rz-spiral-track .rz-rider {
  fill: var(--gold)
}

.alv-ed .rz-spiral-track .rz-node {
  fill: var(--sec-ground);
  stroke: var(--gold);
  stroke-width: 1.6;
  opacity: .45;
  transition: opacity .5s, r .5s
}

.alv-ed .rz-spiral-track .rz-node.is-lit {
  opacity: 1
}

.alv-ed .rz-spiral-track .rz-node.is-passed {
  opacity: .75
}

/* THE MARKER HAS TO BE BIG ENOUGH TO BE SEEN MOVING. A radius is geometry and
   is fitted like the rest of the drawing, so on a 390px screen the rider's 5
   units come out under 4px across -- the same size as the node it is sitting
   on, which is exactly the two things the animation is meant to tell apart.
   The roll runs and completes there; what was missing was anything large
   enough to watch.

   `r` is set here rather than in residency.js, which writes it as a
   presentation attribute (4, and 6 for the lit one) -- a sheet beats an
   attribute, so these win and the script's `is-lit` class is still what
   chooses between them. The transition on `r` is already declared above.

   They render as ovals at this width, taller than they are wide, because the
   fit is not uniform. That is the price the `preserveAspectRatio: none`
   ruling has already accepted for the curve, and a marker that can be seen is
   worth more than a marker that is round. */
@media(max-width:900px) {
  .alv-ed .rz-spiral-track .rz-rider { r: 8 }
  .alv-ed .rz-spiral-track .rz-node { r: 6 }
  .alv-ed .rz-spiral-track .rz-node.is-lit { r: 9 }
}

.alv-ed .rz-turns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(10px, 1.2vw, 16px)
}

.alv-ed .rz-turn-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  padding: 13px 14px 15px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ground-hair);
  cursor: pointer;
  transition: background .3s, border-color .3s
}

.alv-ed .rz-turn-btn:hover {
  background: color-mix(in srgb, var(--gold) 7%, transparent)
}

.alv-ed .rz-turn-btn.is-active {
  border-top-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, transparent)
}

.alv-ed .rz-turn-btn-l {
  font-family: var(--word);
  font-size: var(--fs-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ground-mute);
  transition: color .3s
}

.alv-ed .rz-turn-btn.is-active .rz-turn-btn-l {
  color: var(--ground-kick)
}

.alv-ed .rz-turn-btn-g {
  font-family: var(--body);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  color: var(--ground-ink-soft)
}

.alv-ed .rz-spiral-hint {
  margin: 0;
  text-align: center;
  opacity: .7
}

/* THE HERO PHOTOGRAPH IS SHOWN WHOLE ON A NARROW SCREEN, AND CLEARS THE NAV.

   The shared hero gives the picture a `52vh` box below 940px
   (alvara-editorial.css), which is a box sized by the viewport's HEIGHT for a
   photograph whose shape is its own -- so how much of it survives is a
   coincidence of window shape rather than a decision. It costs nothing on the
   Fellows and Membership heroes, whose photographs are landscape (1.50) and
   are therefore cropped at the SIDES; on this one, which is portrait, the box
   is wider than the picture and the crop falls vertically -- 492px of a 1024px picture at 768px
   wide, biased to the top by `object-position`, which is exactly where the
   rider's head is. The head was simply not in the hero.

   `aspect-ratio` on the wrap rather than anything on the image: given a box
   the picture's own shape, `object-fit: cover` has nothing left to take, so
   the whole photograph is shown at every width and `object-position` stops
   mattering -- which is why the inline one on the <img> is left exactly as it
   is for the desktop hero above this breakpoint. It also means no
   `!important`: the inline style sets `height: 100%`, and 100% of a box that
   is now the right shape is the right answer.

   `margin-top` and NOT padding, and it is what puts the head in the picture
   rather than behind the bar. The nav is fixed and opaque and runs 73-81px
   through this range, and this photograph carries the rider's face 15%%
   down. Padding would have been eaten by `box-sizing: border-box`, shrinking
   the content box and re-cropping the very picture this rule exists to stop
   cropping; a margin moves the box instead. The band it opens takes
   `--hero-ground` from `.hero` itself, so it is the same green the bar is
   painted -- 72px against a bar that is never shorter than 73 means the bar
   always overlaps the top of the photograph by a few pixels of sky, which is
   deliberate: a drop TALLER than the bar would show a hairline of ground
   between two near-identical greens, and a seam is worse than an overlap. */
@media(max-width:940px) {
  .alv-ed .hero .imgwrap {
    height: auto;
    aspect-ratio: 3 / 4;
    margin-top: 72px
  }
}

/* ===== WHAT THE NARROW SCREEN DOES NOT CARRY =====
   Six labels, hidden below 900px. They are eyebrows, and an eyebrow earns its
   line by sitting BESIDE something -- a rule running off to the edge of a wide
   band, or a column of prose it introduces from above. Stacked into one column
   they become another line of gold capitals in a page that already opens every
   section with one, and this page carries more of them than any other on the
   estate: forty-two.

   Named one at a time rather than swept, because which label a section can do
   without is the College's judgement and not a rule anything here can derive.
   `#pathway` keeps "The Residency Pathway" at the head of its bar and loses
   only the "Three stages" at the far end of it and "The Pathway" repeated
   under it -- three labels within an inch of each other, saying the same thing
   in three ways, which is what the wide bar spreads apart and the column does
   not.

   TWO OF THESE LEAVE THEIR RULE STANDING, and that is the instruction rather
   than an oversight: `#extended-residency` and `#applied-residency` each hold
   a `.rz-label` of one hairline and one kicker, so without the kicker the
   hairline reads as a divider between the stages instead of as a label. The
   figure caption is the one place a rule was asked for too -- the caption and
   the hairline under it are read as one thing stacked, so they go together.
   `.sec.tight-top` is the section they are in; it is one of two on the page
   and the only one carrying a figure, which is what makes the pair of
   selectors below exact without an id being invented for it. */
@media(max-width:900px) {

  .alv-ed #pathway .rz-label .rz-line + .kick,
  .alv-ed #pathway .head .kick,
  .alv-ed #extended-residency .kick,
  .alv-ed #applied-residency .rz-plate-head .kick,
  .alv-ed .sec.tight-top .figblock .hcap,
  .alv-ed .sec.tight-top .htx > .rz-label > .rz-line {
    display: none
  }
}