/* =====================================================================
   ALVARÁ EDITORIAL — the design system the College's editorial pages share,
   rebuilt from the August 2026 mockups in docs/college/new-page-design/.

   Those files are layers on layers: each revision appended a <style> block and
   pruned nothing beneath it, so the four blocks the Fellows and College files
   carry byte-identically hold 1,142 rules of which 421 reach no element on any
   page. What survives here is the set two or more pages actually use; a rule
   only one page uses is in that page's own sheet, and rules for the mockups'
   own nav and footer are gone entirely — the estate has `_college_nav.html`
   and `.alv-foot`, and a second copy would only fight them.

   Every rule is scoped under `.alv-ed`, which is the wrapper the page content
   sits inside. That wrapper is deliberately NOT <body>: the sheet opens with
   `* { margin:0; padding:0 }` and a colour reset, and on <body> that would
   strip the site nav's padding and repaint the footer. The site's own chrome
   sits outside `.alv-ed` and is untouched.

   Selectors here are the mockups' own (`.wrap`, `.wrap`, `.sec`, `.btn`)
   and are generic on purpose: they only ever resolve inside `.alv-ed`. Editing
   this file changes every editorial page; a rule for one page alone belongs in
   fellows.css, college.css or membership.css.

   Two departures from the mockups, both asked for and both made here rather
   than patched per page:

   - h1 through h4 are Cormorant Garamond at weight 500. See the TYPE note.
   - `.scrollcue` is gone. The mockups put a "Scroll" label under three heroes;
     it is not rendered and not styled.

   The layered `!important` declarations below are the mockups' own. They are
   kept as authored rather than unwound: each one settled a conflict between
   revisions, and untangling them by eye is how a page quietly changes size.
   Where a selector was set several times over, the declarations are folded
   into its last appearance — two occurrences of one selector have equal
   specificity, so the later already won every property it named.
   ===================================================================== */

.alv-ed * {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.alv-ed {
  scroll-behavior: smooth
}

.alv-ed img {
  display: block;
  max-width: 100%
}

.alv-ed a {
  color: inherit;
  text-decoration: none
}

.alv-ed ::selection {
  background: rgba(184, 150, 46, .26)
}

/* The measure. One width for the estate at 1200px -- this rule said 1300 and
   membership.css said 1200, and since that sheet loads later Membership has
   been rendering 1200 while every other editorial page rendered 1300. The
   volume's own measure (`.leaf`, 1120px) folded in here when it became
   `.wrap`, so this is now the only one.

   No vertical padding: a section's rhythm belongs to its ground, which is
   where its colour is set too. See `.alv-ed .sec`. */
.alv-ed .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
  position: relative
}

/* ===== TYPE =====
   Every heading is Cormorant Garamond, and at weight 500: Cormorant ships no
   400 cut, so `font-weight:400` -- which is what the mockups' base rule said --
   silently fell through to Georgia. The mockups noticed on their own titles and
   pinned those to 500 with !important further down; this says it once, for
   h1 through h4, and those pins become belt and braces rather than the fix.
   EB Garamond stays the reading face: it is `--body`, and prose asks for it. */
.alv-ed h1,
/* Headings read the ground, like the kicker beside them. This was a flat
   `var(--cream)` -- correct on a dark panel and white-on-beige on a light
   one, which every page then patched back with a `.sec.cream h2` of its own.
   The College had one; the Fellows did not, so its cream sections rendered
   white headings the moment `.kdark` stopped propping them up.

   `--ground-ink` is #F2EDE0 at the root, so a heading outside any section --
   a hero, a coda -- is unchanged. */
.alv-ed h2,
.alv-ed h3,
.alv-ed h4 {
  font-family: var(--word);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ground-ink)
}

/* The section heading, once. `.pg-t` and `.gih` were page-local names for
   this and are gone from the markup; what those rules still carry is colour
   and margin for the panel each sits in, never size. */
.alv-ed h2 {
  font-size: var(--fs-h2);
  line-height: 1.08
}

/* The kicker reads the ground, like every other ink on the estate. It was a
   flat `var(--gold)` -- #B8962E on a dark panel where the ground contract
   says #C9A94A, and the same dark gold on a light one where it says #8a6d1e.
   Both were then patched back per page, which is where `#8a6a1a` and
   `#a9852a` came from. */
.alv-ed .kick {
  display: inline-block;
  font-family: var(--word);
  font-size: var(--fs-eyebrow);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ground-kick);
  font-weight: 600
}

/* Inside a `.head` the kicker is a BLOCK, which is what main.css's own
   `.head .kick` says and what the front page therefore gets. It never
   reached these pages: `.head .kick` and `.alv-ed .kick` above are both two
   classes, so the tie went to load order and this sheet is loaded second.

   What that cost is a gap nobody wrote. The kicker carries `margin-bottom:
   6px` and the heading `margin-top: 6px`; between two blocks those collapse
   into one 6px, but an inline-level box's margin does not collapse with the
   block after it, so every head on the editorial pages ran 12px where the
   front page runs 6 -- the same head, the same two rules, twice the gap.
   `.alv-ed .head .kick` is three classes and settles it by weight rather
   than by which sheet happens to be linked last.

   Scoped to `.head` rather than fixed on the base rule, because the base is
   also what a hero, a band and a caption's kicker read, and shrink-to-fit is
   the right box for a label that is not heading anything. */
.alv-ed .head .kick {
  display: block
}



.alv-ed .it {
  font-style: italic
}

.alv-ed .headrule {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 15px 0
}

.alv-ed .rule {
  width: 52px;
  height: 1px;
  background: var(--gold);
  opacity: .75
}

/* layering */
.alv-ed .ghost {
  position: absolute;
  pointer-events: none;
  opacity: .05;
  width: min(44vw, 400px);
  filter: grayscale(1) brightness(1.4);
  z-index: 0
}

.alv-ed .cap {
  font-family: var(--body);
  font-style: italic;
  font-size: var(--fs-meta-alt);
  color: var(--c45);
  margin-top: 13px
}

.alv-ed .btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--word);
  font-size: var(--fs-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 15px 32px;
  border: 1px solid var(--gold);
  color: var(--cream);
  transition: .3s;
  cursor: pointer
}

.alv-ed .btn:hover {
  background: var(--gold);
  color: var(--g3)
}

.alv-ed .tlink .ar,
.alv-ed .btn .ar {
  transition: transform .3s
}

.alv-ed .tlink:hover .ar,
.alv-ed .btn:hover .ar {
  transform: translateX(4px)
}

/* ===== HERO =====
   `--hero-ground` is the hero's own colour, and it is declared here rather
   than on either of the two things that use it, because both have to be the
   same colour and there is no arrangement in which they are not: the text
   panel is painted with it, and it is what the photograph's veil fades to at
   its left edge — the fade's whole job is to arrive at the panel beside it.
   Said twice they drift, and four points of green between the two shows as a
   band down the seam rather than as a fade. Every editorial hero is on it.

   It is a variable and not a literal so that a page wanting its own ground
   sets one value and both halves follow. Nothing sets one today: Membership
   did, at #14331f, matching the gradient wash its own sheet paints the page
   with — and the four heroes then read as four, which is not what a shared
   hero is for. The Library's hero is a different component (`.alv-lib .hero`,
   a centred banner with no photograph) and carries the colour literally. */
.alv-ed .hero {
  --hero-ground: #0b1a11;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr .96fr;
  align-items: stretch;
  position: relative;
  background: var(--hero-ground)
}

.alv-ed .hero .txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px clamp(24px, 5vw, 80px) 70px;
  position: relative;
  z-index: 2;
  max-width: 640px
}

.alv-ed .hero .kick {
  margin-bottom: 16px
}

.alv-ed .hero h1 {
  font-family: var(--word);
  font-weight: 600;
  font-size: var(--fs-display);
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase
}

.alv-ed .hero .headrule {
  margin: 18px 0 16px
}

.alv-ed .hero .stand {
  font-family: var(--body);
  /* font-style: italic; */
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 23px);
  color: var(--gold-soft);
  margin-bottom: 20px
}

.alv-ed .hero .body {
  max-width: 48ch;
  margin-bottom: 28px
}

.alv-ed .hero .body p {
  color: var(--c80);
  font-size: var(--fs-body);
  line-height: calc(1.62 * var(--lh-scale))
}

.alv-ed .hero .imgwrap {
  position: relative;
  overflow: hidden
}

.alv-ed .hero .imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 24%
}

/* The fade between the text panel and the photograph, and the shade under the
   fixed nav. This is the College page's treatment, which carried it as an
   inline style on its own `.veil` — five stops rather than three, so the ramp
   into the panel is smooth instead of arriving in one step, and a shade across
   the top of the photograph rather than the bottom.

   It was inline, which meant it beat this rule and the College's hero faded
   differently from the other two that share the hero. Moved here, all three
   agree; the inline attribute is gone from the template so nothing overrides
   it again.

   The fade resolves to `--hero-ground` at both ends it has one, which is the
   colour the panel beside it is painted — see the hero's own rule. The
   intermediate stops are that colour again at decreasing alpha, written out
   because a `var()` cannot carry an alpha of its own without `color-mix`;
   they are the ramp rather than the endpoint, so they follow the token by
   hand and only the arrival has to be exact. */
.alv-ed .hero .imgwrap .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--hero-ground) 0%, rgba(11, 26, 17, .78) 5%, rgba(11, 26, 17, .34) 17%, rgba(11, 26, 17, .08) 30%, transparent 42%), linear-gradient(180deg, var(--hero-ground) 0%, rgba(11, 26, 17, .5) 5%, rgba(11, 26, 17, .12) 12%, transparent 20%)
}

.alv-ed .facwe {
  font-family: var(--word);
  font-weight: 600;
  color: var(--gold)
}

/* `--tier-shadow` is the drop every card is lifted by, and it is a token for
   the same reason `--hero-ground` above is one: two rules have to carry the
   identical value and there is no arrangement in which they do not. Mentored
   adds an inset gilding of its own on a wide screen, and `box-shadow` is one
   property rather than a list that can be added to -- so the sheet that turns
   that gilding off has to restate this drop in the same breath or lose it,
   which is exactly what happened. See `.tier.t3` in membership.css. */
.alv-ed .tier {
  --tier-shadow: 0 30px 80px -55px rgba(0, 0, 0, .9);
  position: relative;
  border: 1px solid var(--gold-line);
  padding: clamp(24px, 2.2vw, 38px) clamp(20px, 1.9vw, 30px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(242, 237, 224, .04), rgba(9, 20, 13, .16));
  box-shadow: var(--tier-shadow)
}

.alv-ed .tier::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  right: -9px;
  bottom: -9px;
  border: 1px solid var(--gold-faint);
  z-index: -1
}

.alv-ed .tier ul {
  list-style: none;
  margin: 10px 0 22px;
  flex: 1
}

.alv-ed .tier ul li {
  font-family: var(--body);
  font-size: var(--fs-meta-alt);
  line-height: 1.5;
  color: var(--c62);
  padding: 6px 0 6px 17px;
  position: relative
}

.alv-ed .tier ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--gold);
  border-radius: 50%
}

.alv-ed .tier ul li b {
  color: var(--cream);
  font-weight: 500
}

/* hover popover */
.alv-ed .pop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 13px);
  z-index: 60;
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  padding: 20px 24px 20px;
  background: linear-gradient(168deg, #22492f, #0e2518 82%);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .95);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .28s, transform .28s
}

.alv-ed .pop::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: -8px;
  bottom: -8px;
  border: 1px solid var(--gold-faint);
  z-index: -1
}

.alv-ed .pop p {
  font-family: var(--body);
  font-size: var(--fs-note-alt);
  line-height: calc(1.68 * var(--lh-scale));
  color: var(--cream);
  max-width: 48ch
}

.alv-ed .pop p+p {
  margin-top: .6em
}

/* ===== FELLOWSHIP ===== */
.alv-ed .fellowship {
  position: relative
}

@media(prefers-reduced-motion:reduce) {
  .alv-ed .reveal {
    opacity: 1;
    transform: none
  }
}

@media(max-width:1040px) {
  .alv-ed .pop {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: 12px;
    box-shadow: none
  }

  .alv-ed .pop::before {
    display: none
  }
}

@media(max-width:940px) {
  .alv-ed .hero {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .alv-ed .hero .imgwrap {
    height: 52vh;
    order: -1
  }

  .alv-ed .hero .txt {
    padding: 48px clamp(22px, 5vw, 56px) 56px
  }
}

/* ================= THE COLLEGE · a bound volume =================
   The greens, creams, golds and the two font stacks that stood here are in
   main.css `:root` now, along with the copies the other page sheets carried.
   Every copy agreed on the value, so nothing about this page moved.

   The paper palette below deliberately stayed. Its copies do NOT agree —
   `--ivory` is #ece4d1 here and #e5dcc6 in one other sheet, `--ink-soft` .74
   against .78, `--ink-faint` .5 against .52, `--paper-rule` .28 against .26 —
   and promoting one of two readings would be a colour change wearing a
   tidy-up's clothes. Which reading is right is the College's to settle; until
   it is, each sheet keeps saying what it has always said. */
.alv-ed {
  --ivory: #ece4d1;
  --ivory2: #e5dcc6;
  --ink: #25321d;
  --ink-soft: rgba(37, 50, 29, .74);
  --ink-faint: rgba(37, 50, 29, .5);
  --paper-rule: rgba(60, 52, 24, .28);
  --rail: 256px;
  --ggrn: #132d1e;
  --grn2: #0f2417
}

/* `overflow-x` is `clip`, not `hidden`, and the difference is the whole reason
   the page had two scrollbars. Setting one axis to `hidden` computes the other
   from `visible` to `auto`, which makes this wrapper its own scroll container —
   so the reader got the browser's scrollbar and a second one inside the content.
   The mockup declared it on <body>, where it propagates to the viewport instead
   and the problem cannot arise; on a wrapper it must be `clip`, which trims the
   overflow without creating a scroll container and leaves `overflow-y` visible.
   The clipping itself is still wanted: the seals and ghost letterforms are
   positioned deliberately outside their sections and would otherwise widen the
   page. */
.alv-ed {
  font-family: var(--body);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-body-lg);
  line-height: calc(1.6 * var(--lh-scale));
  overflow-x: clip;
  position: relative;
  background: var(--grn2)
}

/* The ground. Carries the background, the ground-ink tokens and the vertical
   rhythm -- all three of the things that make a section a section. The volume
   pages kept the rhythm one level down on `.leaf`; it is here now, so a
   section is spaced where it is coloured. */

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

.alv-ed .body {
  max-width: 74ch
}


.alv-ed .body h4 {
  font-family: var(--word);
  font-size: var(--fs-eyebrow);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #8a6a1a;
  margin: 2em 0 .7em;
  font-weight: 600
}

/* plates — captioned photographs */
.alv-ed .plate {
  position: relative;
  margin: 0
}

.alv-ed .plate img {
  width: 100%;
  display: block
}

.alv-ed .plate figcaption {
  margin-top: 12px;
  font-family: var(--word);
  text-transform: uppercase;
  color: #8a6a1a
}

.alv-ed .sec.green .plate figcaption {
  color: var(--gold-soft)
}

@media(max-width:1080px) {
  .alv-ed {
    --rail: 0px
  }
}

/* reveal */
.alv-ed .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .6, .2, 1)
}

.alv-ed .reveal.in {
  opacity: 1;
  transform: none
}

/* closing button (on dark) */
.alv-ed .btn.fill {
  background: var(--gold);
  color: #12251a;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--word);
  font-size: var(--fs-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 15px 34px;
  border: 1px solid var(--gold);
  text-decoration: none;
  transition: .3s
}

.alv-ed .btn.fill:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft)
}

.alv-ed .btn.fill .ar {
  transition: transform .3s
}

.alv-ed .btn.fill:hover .ar {
  transform: translateX(4px)
}

/* The colour is the component's, from the ground. What is left here is this
   head's own spacing. */
.alv-ed .head h2 {
  margin: 14px 0 0;
  max-width: none;
  margin-top: 6px
}


/* ================= v3 REVISION ================= */
/* DEFINITIVE FONT FIX — Cormorant Garamond ships only 500/600 (no 400).
   weight:400 was falling back to Georgia. Pin every title to 500 like the hero. */
.alv-ed .head h2,
.alv-ed .carminho-head .cn2,
.alv-ed .cine-hero h1 {
  font-family: var(--word) !important;
  font-weight: 500 !important;
  font-style: normal !important
}

.alv-ed .carminho-head .cn2 {
  font-size: clamp(31px, 3.5vw, 46px);
  line-height: 1.05;
  letter-spacing: .01em
}

.alv-ed .figblock .hph {
  position: relative;
  margin: 0
}




.alv-ed .figblock .hcap {
  font-family: var(--word);
  text-transform: uppercase;
  color: #8a6a1a;
  margin-top: 12px
}

.alv-ed .figblock .htx .body {
  max-width: none
}

/* ONE MEASURE FOR A PHOTOGRAPH, NOT ONE PER SETTING. A `.beside` figure takes
   45% of the block and an `.around` figure floats at 45%, so the same picture
   is the same width whichever setting it is put in. The class names the side
   the FIGURE takes.

   Two corrections are folded into that one number, and both are worth keeping
   because both are easy to reintroduce:

   - It was 2.15fr to the FIGURE and 1fr to the text, which is what the
     estate's column blocks were actually failing on: at a 1440 measure the
     prose came out 317px wide -- about thirty characters, a caption's measure
     -- so 154 words ran to 39 lines and three of the blocks overhung their own
     photograph by two to four hundred pixels. A grid cannot wrap, so what that
     produces is a ribbon of text running past the picture with empty space
     beside it.
   - It was then 1.18fr / .82fr, which is `sc-grid`'s ratio -- 589px at a 1440
     measure against the float's 475px, so a founder's card came out a fifth
     wider than the photograph three sections above it and read as the larger
     picture rather than as the same picture in a different setting. The
     Fellows page fixed that on its OWN sheet, in a `@media(min-width:901px)`
     block, and the fix was therefore invisible to the College: its two
     photographs rendered 601px against the Fellows' 485 on the same screen,
     which is the whole of what "the College's images look bigger" was. The
     rule is here now and the page override is gone.

   45% and not the 62% that would make a column figure equal in AREA to a
   floated one: what the width is really spending is the prose beside it. The
   text column takes the rest less the gutter, and at 1.18fr the founders'
   paragraphs were setting to about 42 characters. The estate has had this
   argument twice from opposite ends -- see the 317px measure above -- and 45%
   is where it settles.

   A percentage rather than a fraction because the float is a percentage: two
   ways of writing one number is how the two settings drift apart again. */
.alv-ed .figblock.beside:has(.fig-left) {
  grid-template-columns: 45% 1fr
}

.alv-ed .figblock.beside:has(.fig-right) {
  grid-template-columns: 1fr 45%
}

/* The collapse, and it has to out-specify the two rules above rather than
   merely come after them. It was written `.figblock.beside { 1fr }` ABOVE
   them at equal weight, so it lost the cascade and never once applied: at
   890px the Fellows' portraits rendered two-column with a 243px measure, and
   nothing reported it because a dead rule looks exactly like a live one. The
   Spiral spread collapsed only because its own copy happened to sit below its
   own desktop rule. */
@media(max-width:900px) {

  .alv-ed .figblock.beside:has(.fig-left),
  .alv-ed .figblock.beside:has(.fig-right) {
    grid-template-columns: 1fr
  }
}


/* `order` rather than source order, so a column block reads the same however
   its author happened to write it. A FLOAT cannot be reordered this way --
   `order` only moves grid and flex children -- so under `.around` the figure
   must genuinely precede the prose it wraps. */
.alv-ed .figblock.beside .hph.fig-left {
  order: -1
}

.alv-ed .figblock.beside .hph.fig-right {
  order: 1
}

.alv-ed .figblock .hph img {
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--gold-line);
  display: block;
  max-height: none
}

/* =====================================================================
   THE FRAMED PLATE — a box that holds a self-drawing HTML document at a
   fixed shape.

   These plates are whole documents that build their own SVG in JavaScript,
   so they are framed in `sandbox="allow-scripts"` iframes and sized by
   aspect-ratio padding: an iframe has no natural height, and a plate that
   states its shape in the box needs no height reported back. It also means
   the plate is laid out correctly before its script has run, or if the
   script never arrives.

   They were Membership's until `/the-college/` framed the Spiral plate as
   well, and they are MOVED here rather than copied -- two sheets declaring
   `.plate-box` is how the two come to disagree about the ratio after one of
   them is edited. The three ratios come with the component: a variant rule
   cannot reach a page whose markup does not write the class, so there is no
   cost to a page carrying `.map` while only Membership draws a map, and
   there IS a cost to one component's shapes living in two files.

   `.plate-hero` stayed behind. It is the corner-mark surround, and only
   Membership draws one -- promoting it would have been a change to a page
   nobody asked to change. So would `.feature-dir .plate-box.direction`,
   which is that page's override of the ratio below and still wins, this
   sheet being loaded first and carrying one class fewer.

   [editorial.js](../js/editorial.js) `postMessage`s `{alvPlay:1}` into every
   `.plate-box iframe` as it enters the PAGE's view, because an iframe's own
   viewport is its box and a plate three screens down has otherwise already
   played to itself. Any page framing one of these wants that script.
   ===================================================================== */
.alv-ed .plate-box {
  position: relative;
  width: 100%;
  overflow: hidden
}

.alv-ed .plate-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent
}

.alv-ed .plate-box.spiral {
  padding-top: 94.3%
}

/* 846/1200 -- the Structural Training Scale's SVG viewBox, which is computed
   from the six stage boxes and so is exact rather than measured off a
   screenshot. It is the one ratio here that a drawing's own source can be
   asked for; the other three were taken from the plates as drawn. */
.alv-ed .plate-box.scale {
  padding-top: 70.5%
}

.alv-ed .plate-box.map {
  padding-top: 63.1%
}

.alv-ed .plate-box.direction {
  padding-top: 22%
}

/* magazine typography — NO italic leads; editorial body + drop cap */






.alv-ed .sec.green .magbody>p:first-of-type::first-letter {
  color: var(--gold-soft)
}

/* ================= v7 · EDITORIAL POLISH ================= */
/* ---- one consistent type scale ---- */
.alv-ed .head .kick,
.alv-ed .carminho-head .ck2,
.alv-ed .reach .reach-k,
.alv-ed .nations-lay .nl-h,
.alv-ed .figblock .hcap,
.alv-ed .plate figcaption,
.alv-ed .imgbreak .cap,
.alv-ed .cband .kick,
.alv-ed .facwe-anim .fa-k,
.alv-ed .foundation-cta .fk,
.alv-ed .reclist .rl-h,
.alv-ed .reclist-ink .rl-h {
  font-size: var(--fs-label) !important;
  letter-spacing: .24em !important;
  font-weight: 600
}

.alv-ed .founders-sec .fp-txt .bd,
.alv-ed .reach p,
.alv-ed .facwe-body p {
  font-size: var(--fs-body);
  line-height: calc(1.7 * var(--lh-scale));
}

/* ---- faint seal watermark in cream areas ---- */
.alv-ed .paper-seal {
  position: absolute;
  pointer-events: none;
  opacity: .05;
  width: min(46vw, 560px);
  z-index: 0;
  filter: saturate(.2)
}

/* ================= v8 · PROPORTIONS & SPACING ================= */
/* cut space between sections ~50% */
.alv-ed .figblock {
  display: grid;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(12px, 1.5vw, 22px) !important
}

/* ===== THE PULL QUOTE — THE CORNER MARK =====
   Built to docs/college/alvara-pullquote-560.html.

   It was a framed panel: a gold rule on all four sides, a gold wash inside
   it, a 96px inverted comma laid ACROSS the top-left corner and a second
   2px rule down the left edge of the words. Four gold marks around one
   sentence, and the box the loudest of them — which is what §9's ban on
   framed boxes and §4's "text never sits on a panel" are about.

   What stands there now is one comma sitting ON the top-left corner, with
   the top and left rules stopping short of it so that corner reads as open,
   and one weighted tick at the corner opposite. Nothing else: no closing
   mark, no attribution, no motion of its own. `.reveal` on the element is
   the page's arrival and is untouched.

   The words are `.pull`, and their ink, size and face are the estate's one
   quote rule in main.css. This block is the frame only.

   WIDTH. The design file is titled for its 560px setting and calls it the
   confirmed one, and that is the one thing here not taken from it: these
   four quotes close a passage that runs the full measure of the block above
   them, and a 560px frame under a 1120px column reads as a card that has
   come loose rather than as the passage's last line. So the frame takes the
   measure it is given — but only as far as its own words go: `fit-content`
   is min(max-content, available) in one word, so a quote too long to hold
   one line fills the column and wraps exactly as before, while a short one
   stops where its sentence does. Full width for both left the tick at the
   bottom-right corner standing a hand's width past the full stop, closing
   nothing. A frame narrower than its column is then CENTRED in it — the
   auto margins do nothing at all while the quote fills the measure, so the
   two settings are one rule rather than a width test. Left-aligned, a short
   quote reads as a column that has fallen short; centred, it reads as the
   passage's last line. The words inside keep their own left edge: the frame
   is what moves. The mark, the corner opening and the tick are fixed sizes
   and do not move with it — which is the design's own claim about the
   component, made at a width it was not drawn at.

   GROUND. The mark, the hairline and the tick are the ground's OWN gold, so
   a quote wears the deep gold on paper and the bright one on green without
   this sheet naming either ground: `--ground-kick` is #8a6d1e on cream and
   #C9A94A on green, which is within three points of the two golds the design
   file drew by hand for its cream and its `.on-dark` settings. The words
   follow `--ground-ink` the same way already. That is the whole reason a
   quote can stand on either ground — three of the four on the estate are on
   green and one is on paper — and it is why there is no `.on-dark` here:
   restating the list of dark grounds is the second vocabulary the ground
   contract in main.css exists to end.

   `color-mix` is what lets a token carry an alpha of its own. It is the
   first use on the estate; the alternative is that ground list.

   The wash is one strength rather than the design's two (.085 on cream and
   .13 on green) for the same reason — four thousandths of an alpha on a
   wash this faint does not earn a ground list, and the gold it is mixed
   from already changes with the ground.

   Four pseudo-elements are wanted and an element has two, so the frame's
   two rules are the quote's own and the mark and the tick are the words'.
   Which means `.pull` must NOT be positioned: both resolve against `.qlay`.
   And `overflow` must stay unset. The panel carried `hidden` to clip the
   96px comma laid over its corner; the mark now SITS on that corner and
   hangs half outside it, so `hidden` would shear the left of it off. */
.alv-ed .qlay {
  /* the opening left at the corner for the mark to sit in */
  --pq-gap: 26px;
  --pq-hair: color-mix(in srgb, var(--ground-kick) 45%, transparent);

  position: relative;
  /* to the text, then to the column, and centred short of it — see WIDTH */
  width: fit-content;
  margin: clamp(26px, 3vw, 40px) auto 0;
  padding: 9px 11px;
  border: 1px solid var(--pq-hair);
  border-top-color: transparent;
  border-left-color: transparent;
  background: radial-gradient(120% 150% at 12% 0%,
      color-mix(in srgb, var(--ground-kick) 11%, transparent) 0%,
      color-mix(in srgb, var(--ground-kick) 4%, transparent) 46%,
      color-mix(in srgb, var(--ground-kick) 1.5%, transparent) 100%)
}

/* the top rule — starts after the corner opening */
.alv-ed .qlay::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0 var(--pq-gap), var(--pq-hair) var(--pq-gap) 100%)
}

/* the left rule — starts below it */
.alv-ed .qlay::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0 var(--pq-gap), var(--pq-hair) var(--pq-gap) 100%)
}

/* ================= v12 · TYPOGRAPHIC SYSTEM ================= */
/* (1) one eyebrow size everywhere */
.alv-ed .head .kick,
.alv-ed .carminho-head .ck2,
.alv-ed .reach-inline .reach-k,
.alv-ed .nations-lay .nl-h,
.alv-ed .figblock .hcap,
.alv-ed .plate figcaption,
.alv-ed .imgbreak .cap,
.alv-ed .cband .kick,
.alv-ed .foundation-cta .fk,
.alv-ed .reclist .rl-h,
.alv-ed .reclist-ink .rl-h,
.alv-ed .bc-head .bc-k,
.alv-ed .fc-sign .kick,
.alv-ed .facwe-credential .fc2-s,
.alv-ed .founder2 .cr,
.alv-ed .cta-inline .fk {
  font-size: var(--fs-label) !important;
  letter-spacing: .24em !important;
  font-weight: 600 !important
}

/* (2) one body size everywhere */
.alv-ed .reach-inline p,
.alv-ed .bc-writing p,
.alv-ed .fc-sign .fc-lead,
.alv-ed .sec.cream .founders-intro p {
  font-size: var(--fs-body);
  line-height: calc(1.7 * var(--lh-scale));
}

/* (10) consistent heading→text rhythm; drop-cap sized to line */

.alv-ed .magbody>p:first-of-type::first-letter {
  font-family: var(--word);
  font-weight: 500;
  float: left;
  font-size: 3.3em !important;
  line-height: .68 !important;
  padding: 7px 12px 0 0 !important;
  color: var(--gold)
}

/* ================= v16 · true Cormorant italic for the cursive lines + refined seal ================= */
/* the "cursive" display lines were in EB Garamond's plain italic — give them Cormorant's elegant italic */
.alv-ed .fc-sign .fc-q,
.alv-ed .bc-pull,
.alv-ed .qlay .pull,
.alv-ed .cband .cbq,
.alv-ed .pathhero .ph-sub {
  font-family: var(--word) !important;
  font-weight: 500 !important;
  /* font-style: italic !important */
}

.alv-ed .qlay .pull {
  margin: 0;
  letter-spacing: .016em
}

/* the mark — ON the corner, in the opening the two rules leave for it.
   Upright: it is a mark rather than a word, and the words around it are the
   only italic here. Its size is a raw clamp and not a rung of `--fs-scale`,
   because what it has to fit is `--pq-gap`, which is a fixed opening in a
   fixed frame; it is furniture, not reading matter. */
.alv-ed .qlay .pull::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -30%);
  font-family: var(--word);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(34px, 3.6vw, 44px);
  line-height: 1;
  color: var(--ground-kick);
  -webkit-user-select: none;
  user-select: none
}

/* the tick — the corner opposite, and the only weighted stroke in the frame */
.alv-ed .qlay .pull::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border: 0 solid var(--ground-kick);
  border-right-width: 2px;
  border-bottom-width: 2px
}

@media (max-width: 640px) {
  .alv-ed .qlay {
    --pq-gap: 20px;
    padding: 8px 10px
  }

  .alv-ed .qlay .pull::before {
    font-size: 32px
  }
}

/* =====================================================================
   THE BOUND VOLUME — the furniture every editorial page of the estate
   now shares.

   These forty-three rules were written in the Fellows mockup and lived in
   fellows.css until the Applied Residency was built to the same design
   language and needed all of them. They are moved here verbatim rather
   than copied: two sheets declaring `.cband` is how the two come to
   disagree about it after one of them is edited.

   `.vol` is the volume, `.sec` a passage across it, `.cband` a plate
   with the quotation over it and `.coda` the signed page that ends the
   piece. `.figblock.around` is the magazine setting — the photograph
   floated into the measure rather than set beside it, which is what makes
   a long run of prose read as an article instead of a slideshow.

   Every one is byte-identical to the rule it replaces, and each was
   checked against the College, Membership and Home markup before it was
   moved: none of them can reach a page that was not already getting them.
   `.sec.green .wrap` stayed behind for exactly that reason — the
   College carries a dark spread, so promoting it would have been a change
   to a page nobody asked to change.
   ===================================================================== */

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

.alv-ed .cband>img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.alv-ed .cband {
  padding-top: clamp(30px, 6vw, 72px);
  padding-bottom: clamp(26px, 4vh, 52px)
}

.alv-ed .cband .wrap {
  width: 100%
}

.alv-ed .coda>img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.alv-ed .coda .fc-q {
  font-family: var(--body);
  font-style: italic;
  font-size: calc(clamp(16px, 1.5vw, 20px) * var(--fs-scale));
  color: var(--gold-soft);
  text-align: center;
  max-width: 52ch;
  margin: clamp(16px, 1.9vw, 24px) auto 0
}

.alv-ed .coda .fc-cta {
  text-align: center;
  margin-top: clamp(18px, 2.1vw, 26px)
}

.alv-ed .cband .cb-in {
  position: relative;
  z-index: 2;
  color: var(--cream);
  max-width: 640px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important
}

.alv-ed .cband .cb-in::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--gold-faint);
  pointer-events: none;
  display: none !important
}

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

.alv-ed .cband {
  position: relative;
  min-height: 54vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden
}

.alv-ed .cband .kick {
  font-family: var(--word);
  letter-spacing: .28em !important;
  text-transform: uppercase;
  color: var(--gold-soft) !important;
  display: block;
  margin-bottom: 11px !important;
  margin: 0 0 10px
}

.alv-ed .cband .cbr {
  display: block;
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  margin-top: 16px
}

.alv-ed .head.kdark .kick {
  color: #4f3f16 !important
}

.alv-ed .cband .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 11, .5) 0, rgba(7, 17, 11, .08) 22%, rgba(7, 17, 11, .5) 62%, rgba(7, 17, 11, .96)) !important
}

.alv-ed .cta-inline {
  margin-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--paper-rule);
  padding-top: clamp(16px, 1.9vw, 24px)
}

.alv-ed .coda .fc-glass::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--gold-faint);
  pointer-events: none;
  display: none !important
}

.alv-ed .bc-head .bc-title,
.alv-ed .fc-sign .fc-title {
  font-family: var(--word) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: .01em !important
}

.alv-ed .coda .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 13, .22), rgba(8, 18, 12, .08) 28%, rgba(8, 18, 12, .72) 62%, rgba(6, 14, 9, .98)) !important
}

.alv-ed .coda-in::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4%;
  bottom: -2%;
  transform: translateX(-50%);
  width: min(940px, 96%);
  z-index: 0;
  pointer-events: none;
  /* background: radial-gradient(115% 78% at 50% 54%, rgba(5, 12, 8, .82) 0%, rgba(5, 12, 8, .55) 40%, rgba(5, 12, 8, .12) 66%, rgba(5, 12, 8, 0) 78%) */
}

.alv-ed .coda .fc-glass {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  text-align: center;
  z-index: 1
}

.alv-ed .cband .cbq {
  font-family: var(--body) !important;
  font-style: italic !important;
  font-size: calc(clamp(13px, 1.75vw, 15px) * var(--fs-scale)) !important;
  line-height: 1.42 !important;
  color: var(--cream) !important;
  margin: 0;
  max-width: 40ch !important;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .85) !important
}

/* The coda: a closing plate that fills the view, its content anchored to the
   foot over a photograph. Three pages had one under three names -- begin,
   beginhero and fclose -- with identical mechanics and different heights.

   It is deliberately NOT a `.sec` variant. A section on this estate is a ground
   holding a `.wrap`, and a coda holds a `.veil` and its own inner instead, so
   calling it one would promise a measure that is not there.

   The height carried `!important` in the mockup and nothing was competing with
   it; without that, a page can set its own by loading its sheet after this one. */
.alv-ed .coda {
  position: relative;
  min-height: min(100vh, 1020px);
  display: flex;
  align-items: flex-end;
  overflow: hidden
}

.alv-ed .coda-in {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(24px, 5vw, 80px) clamp(30px, 5vh, 66px);
  /* Not !important: it was in the mockup and beat nothing, and once three
     pages shared this rule it beat the College's own bottom edge. */
  padding-bottom: clamp(20px, 3.4vh, 44px)
}


.alv-ed .fc-sign .fc-lead,
.alv-ed .fc-sign .fc-q {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important
}

.alv-ed .fc-sign .fc-lead {
  line-height: calc(1.6 * var(--lh-scale)) !important;
  margin: 0 auto;
  margin-top: clamp(10px, 1.3vw, 16px) !important;
  font-style: normal !important
}

.alv-ed .fc-sign .fc-q {
  margin: clamp(18px, 2.2vw, 30px) auto 0;
  margin-top: clamp(16px, 1.9vw, 24px) !important
}

.alv-ed .fc-sign .kick {
  font-family: var(--word) !important;
  font-size: var(--fs-eyebrow-lg) !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  font-weight: 600 !important
}

.alv-ed .fc-sign .fc-title {
  font-family: var(--word) !important;
  font-weight: 500 !important;
  color: #f2ede0 !important;
  margin: 9px 0 0 !important;
  letter-spacing: .01em !important;
  margin-top: 6px !important
}

.alv-ed .fc-sign .fc-seal {
  width: clamp(78px, 6.8vw, 98px) !important;
  margin: 0 auto clamp(10px, 1.2vw, 15px) !important;
  display: block;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .6));
  margin-bottom: clamp(8px, 1vw, 12px) !important
}

.alv-ed .fc-sign .fc-rule {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  margin: clamp(12px, 1.4vw, 18px) auto !important
}

.alv-ed .figblock.around {
  display: block;
  margin-top: clamp(26px, 3.2vw, 48px)
}

.alv-ed .figblock.around>.htx {
  display: block
}

.alv-ed .figblock.around>.htx .body {
  max-width: none
}

.alv-ed .figblock.around .hph {
  width: clamp(340px, 45%, 548px);
  margin-bottom: clamp(14px, 1.6vw, 22px)
}

/* The float is the whole of the magazine setting, and it lived in
   residency.css for the right hand alone -- so the format ran on one page and
   nowhere else. A right-floated figure on any other page came out as a
   full-width block with the prose beneath it: no wrap, no error, and nothing
   in the markup to see, which is the shape of fault that survives a review.
   Both hands are declared here now.

   The gutter is the estate's `clamp(34px, 4vw, 62px)`. The Residencies
   overrides both hands to a tighter one on its own sheet, and whether that
   should win everywhere is an open question -- but a floated figure on a page that
   has not overridden it must not inherit *no* gutter at all, which is what
   promoting the float without it would have done. */
.alv-ed .figblock.around .hph.fig-left {
  float: left;
  margin-right: clamp(34px, 4vw, 62px)
}

.alv-ed .figblock.around .hph.fig-right {
  float: right;
  margin-left: clamp(34px, 4vw, 62px)
}

.alv-ed .figblock.around::after {
  content: "";
  display: block;
  clear: both
}

/* The collapse, and it has to name BOTH HANDS. It was written on `.hph`
   alone, which is one class short of the two rules above it — so `float:left`
   and `float:right` outweighed `float:none` inside the query and every
   magazine figure on the estate went on floating at 390px.

   What that produces is not a wide picture: the figure is 100% of the measure
   with the gutter still on it, so the strip left beside it computes to zero,
   and the paragraph the float sits in is a block box that takes what is left
   — nought — while its words set one per line at x=400 and are swallowed by
   `.alv-ed`'s `overflow-x: clip`. On the Fellows that silently took the whole
   opening paragraph of §Aspire off a telephone and left a hand's depth of
   blank green in its place. The paragraphs after it clear the float and read
   perfectly, which is what makes the fault look like a spacing bug rather
   than missing text.

   It had been found twice and patched twice at the page level — `#lusitano`
   in fellows.css and four figures in residency.css both restate exactly these
   three declarations against their own more specific floats. Those stay: they
   out-specify this rule and would otherwise go on floating. This is what
   covers every figure that never had a patch written for it. */
@media(max-width:820px) {

  .alv-ed .figblock.around .hph,
  .alv-ed .figblock.around .hph.fig-left,
  .alv-ed .figblock.around .hph.fig-right {
    float: none;
    width: 100%;
    margin: 0 0 clamp(18px, 3vw, 26px)
  }
}

/* =====================================================================
   THE PLATE'S COPY SITS BOTTOM-RIGHT, built to
   docs/college/alvara-media-overlay.html.

   Order down the block is the guide's: the quotation in cream, the rule,
   then the eyebrow in gold LAST. Set eyebrow-first it read as a caption
   introducing the photograph; under the rule it reads as the line the
   quotation is signed with, which is what it is.

   Moved here from fellows.css when the College's three plates joined the
   two on the Fellows: five of the estate's six want this arrangement, so it
   is the component rather than one page's dressing of it. The sixth is the
   Residencies' full-length plate, which sets its own everything under
   `section.cband.fulllen` -- and which is why the two declarations it used
   to inherit from the rules below (`.cbr`'s stub width and gradient, and the
   `.kick`'s margins) are written out on its own rule in residency.css. It
   renders byte-identically either way; it just says so itself now.

   These rules sit at the END of this sheet on purpose. Several of them beat
   the component's own `.cband` rules above by source order alone -- the
   `.cbr` gradient and the `.kick` margin are the same selector twice -- which
   is exactly the cascade they had while this sheet was loaded first and
   fellows.css second. Moving the block up would silently reverse three
   declarations.
   ===================================================================== */

.alv-ed .cband .cb-in {
  margin-left: auto;
  text-align: right
}

/* the quote keeps its short measure (40ch, next door) and is pushed to the
   right edge, so the eyebrow beneath runs out in front of it and the two
   registers stagger rather than stacking flush */
.alv-ed .cband .cbq {
  margin-left: auto
}

/* the mirror of the shared sheet's rule: solid across the right, dissolving
   leftwards, and the copy's full width -- a line under the quotation rather
   than a 58px stub beside it */
.alv-ed .cband .cbr {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(90deg,
      rgba(184, 150, 46, 0) 0%, rgba(184, 150, 46, .06) 34%,
      rgba(184, 150, 46, .30) 56%, rgba(184, 150, 46, .62) 66%,
      rgba(184, 150, 46, .62) 100%)
}

/* last in the block now, so its space belongs above it. `!important` because
   the shared rule's own `margin-bottom` carries one and would otherwise
   outlive the shorthand here. */
.alv-ed .cband .kick {
  margin: 9px 0 0 !important
}

@media (max-width:820px) {

  /* the plate is the container's width on a telephone; the quote takes most
     of it rather than sitting in a column at the right-hand edge */
  .alv-ed .cband .cbq {
    max-width: 76% !important
  }
}

/* `.wideq` -- the modifier for a quotation the shared measure cannot set in
   two lines. 40ch holds 99 characters over two lines and every plate on the
   estate is inside that except one: the Membership page's first inspire band
   runs to 128, which at 40ch is three lines against a two-line eyebrow and
   a two-line rule, and reads as a paragraph laid on a photograph rather than
   as a quotation. 58ch is the measure that breaks it after `carried forward,`
   -- at the punctuation rather than through the verb, which is where 54ch,
   the narrowest that fits, puts it.

   It is a modifier rather than a change to the component: the other five
   plates are already set as intended, and 54-55ch is the only window in which
   all six stay at two lines, so raising the shared measure by two more would
   collapse the Fellows' first plate to one.

   Guarded by min-width because the 820px collapse above is the same selector one
   class shorter, and specificity would otherwise hand a telephone the 58ch
   column this exists to avoid. */
@media (min-width:821px) {
  .alv-ed .cband.wideq .cbq {
    max-width: 58ch !important
  }
}

/* `.fullq` -- the second modifier, and the wider one. Where `.wideq` buys a
   quotation two more inches of column, this gives it the whole plate: 76% of
   the 640px inner, which is the measure the telephone rule above already sets
   for every plate on the estate. So it is not a new width so much as that
   width carried up to the desktop, and it is written unguarded for the same
   reason -- the 820px rule declares the same value, so the two cannot disagree
   whichever wins.

   It is on the Membership page's second inspire band, whose 99 characters sit
   exactly on 40ch's two-line boundary and fall off it: `ch` is the width of a
   zero, and this is italic prose, so the measure is a guess rather than a
   count and the line breaks where the guess is wrong. 76% takes the question
   away rather than tuning a second `ch` value that would want re-tuning at the
   next rewording. */
.alv-ed .cband.fullq .cbq {
  max-width: 76% !important
}

/* The approved December-intake wording, in the two places outside the
   registration page that carry it: beneath the Membership hero's explanation,
   and in the closer directly above its actions. Set apart from the prose
   around it because it is locked copy about a dated event rather than part of
   the page's own argument -- and because a reader scanning for "when" should
   find it without reading the paragraph above. */
.alv-ed .hero-intake,
.alv-ed .cl-intake {
  margin: 22px 0 26px;
  padding-left: 18px;
  border-left: 2px solid var(--gold-line);
  font-family: var(--body);
  font-size: calc(17px * var(--fs-scale));
  line-height: 1.55;
  color: var(--ground-ink-soft, var(--cream-85, var(--cream)));
  max-width: 62ch;
}