/* =====================================================================
   MEMBERSHIP — the rules only this page uses, on top of
   alvara-editorial.css. Same `.alv-ed` scope, loaded second.

   Built from docs/college/new-page-design/Alvara_Membership_locked aug
   11tml.html, whose sheet is called `alvara-v20` and, unusually for these
   mockups, is a rewrite rather than another layer: its own header says
   "this is the page's stylesheet — not a layer over an older one". It is
   the newest of the three editorial designs, and the one the Fellows and
   College pages were then brought into line with — it already set every
   heading in Cormorant, which alvara-editorial.css now does for the estate.

   Three sets of its rules are dropped rather than carried:

   - the mockup's own nav and footer, as everywhere: the estate has
     `_college_nav.html` and `.alv-foot`;
   - its **hero**. v20 restyles it larger and not uppercase, and that is
     precisely the drift the one-hero rule exists to stop. The shared hero
     stands, exactly as it does on the College page;
   - anything it says that the shared sheet already says identically.

   Everything else it does say — a shorter measure, a smaller reading size,
   the ivory "paper" passages, the tier cards, the comparison accordion, the
   fourteen cards of Within the Membership — is this page's own and is here.
   Where it sets a property the shared sheet also sets, this file wins by
   source order, which is why it is loaded second.

   This file replaces the holding copy of the same name that carried the
   previous design's sheet while the page waited to be rebuilt.
   ===================================================================== */

.alv-ed {
   /* cream ("paper") passages — carried straight from the fellows volume */
   --ivory: #e5dcc6;
   --ink: #25321d;
   --ink-soft: rgba(37, 50, 29, .78);
   --ink-faint: rgba(37, 50, 29, .52);
   --paper-rule: rgba(60, 52, 24, .26);
   --dgold: #8a6a1a;
   --dgold2: #a9852a;
}

.alv-ed {
   scroll-behavior: smooth
}

.alv-ed {
   font-family: var(--body);
   color: var(--cream);
   -webkit-font-smoothing: antialiased;
   font-size: var(--fs-body-sm);
   line-height: calc(1.72 * var(--lh-scale));
   overflow-x: clip;
   position: relative;
   background-color: #14331f;
   background-image: radial-gradient(120% 20% at 50% 0%, rgba(46, 94, 62, .5), transparent 60%),
      radial-gradient(90% 12% at 84% 5%, rgba(58, 104, 72, .24), transparent 60%),
      linear-gradient(180deg, #1E4531 0%, #193C27 10%, #163720 24%, #14331f 44%, #122c1c 66%, #0f281a 84%, #0c2115 100%);
   background-repeat: no-repeat;
   background-attachment: scroll
}

.alv-ed .wrap {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 clamp(24px, 5vw, 80px);
   position: relative
}

.alv-ed .sec {
   padding: clamp(58px, 7vw, 104px) 0;
   position: relative
}

.alv-ed .sec>.wrap {
   z-index: 1
}

/* the old green vignettes are gone — v18 lets the passage read flat */
.alv-ed .sec.tone::before,
.alv-ed .sec.lift::before {
   content: none;
   display: none
}

/* subtle photographic wash kept where the page carried one (green passages only) */
.alv-ed .bgwash {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
   z-index: 0
}

.alv-ed .bgwash img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: .16
}

.alv-ed .bgwash .v {
   position: absolute;
   inset: 0;
   background: radial-gradient(120% 100% at 50% 50%, transparent 30%, rgba(14, 40, 26, .9) 84%), linear-gradient(180deg, #173521 0%, rgba(20, 50, 32, .5) 24%, rgba(18, 44, 28, .55) 76%, #0f281a 100%)
}

.alv-ed .bgwash.dark img {
   opacity: .12
}

.alv-ed .bgwash.dark .v {
   background: radial-gradient(120% 100% at 50% 50%, rgba(10, 26, 17, .5) 10%, rgba(11, 30, 19, .92) 84%), linear-gradient(180deg, #122f1e, rgba(14, 36, 23, .72) 28%, rgba(13, 33, 21, .74) 74%, #0d2417)
}

/* ============================================================
   CREAM ("paper") PASSAGES  —  Founding Fellows · the Memberships · Within
   Full-bleed cream spreads, exactly as the Fellows volume reads.
   ============================================================ */
.alv-ed #fellows,
.alv-ed #memberships,
.alv-ed .cmp-b {
   background-color: var(--ivory);
   color: var(--ink);
   background-image: radial-gradient(rgba(60, 52, 24, .035) 1px, transparent 1px);
   background-size: 3px 3px
}

/* the carried photographic wash becomes a faint paper mottle (image kept, never removed) */
.alv-ed #memberships .bgwash img,
.alv-ed .cmp-b .bgwash img {
   opacity: .05;
   filter: grayscale(1) sepia(.35) brightness(1.28)
}

.alv-ed #memberships .bgwash .v,
.alv-ed .cmp-b .bgwash .v {
   background: radial-gradient(120% 100% at 50% 40%, transparent 34%, rgba(229, 220, 198, .9) 86%), linear-gradient(180deg, rgba(233, 225, 205, .72), rgba(229, 220, 198, .5) 40%, rgba(229, 220, 198, .86))
}

/* seam: soften the join between a green passage and a cream one, top & bottom */
.alv-ed #fellows::before,
.alv-ed #memberships::before,
.alv-ed .cmp-b::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -1px;
   height: clamp(40px, 5vw, 76px);
   /* background: linear-gradient(180deg, #12281a, var(--ivory)); */
   z-index: 0
}

.alv-ed #fellows::after,
.alv-ed #memberships::after,
.alv-ed .cmp-b::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
   height: clamp(40px, 5vw, 76px);
   /* background: linear-gradient(180deg, var(--ivory), #12281a); */
   z-index: 0
}

/* ===== TYPOGRAPHY — one system, the Fellows v18 scale ============ */
/* Eyebrows — Cormorant 600, one size everywhere */
.alv-ed .kick,
.alv-ed .role,
.alv-ed .cr,
.alv-ed .fk,
.alv-ed .tnum,
.alv-ed .wl-t,
.alv-ed .pt,
.alv-ed .a-num,
.alv-ed .st-l,
.alv-ed .acc-legend span,
.alv-ed .reach-k {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow);
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--gold)
}

/* Section titles — Cormorant 500 (Cormorant ships no 400: 500 is the display cut) */
.alv-ed h1,
.alv-ed h2,
.alv-ed h3,
.alv-ed .h2,
.alv-ed .h3 {
   font-family: var(--word);
   font-weight: 500;
   color: var(--cream);
   line-height: 1.05
}
/*
.alv-ed .h2 {
   font-size: calc(clamp(31px, 3.5vw, 46px) * var(--fs-scale));
   letter-spacing: .01em
}

/* pin every section heading to the Cormorant display cut so none can fall back */
/* .alv-ed .head .h2,
.alv-ed .h2 {
   font-family: var(--word) !important;
   font-weight: 500 !important;
   font-style: normal !important
} */

.alv-ed .gp {
   color: var(--gold-soft)
}

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

/* Body — EB Garamond 16 / 1.72, one size everywhere */
.alv-ed .body p,
.alv-ed .lead,
.alv-ed .sub,
.alv-ed .intro,
.alv-ed .teaser,
.alv-ed .a-body p,
.alv-ed .a-body .note {
   font-family: var(--body)
}





.alv-ed .lead,
.alv-ed .sub {
   font-family: var(--body);
   font-size: var(--fs-body-sm);
   line-height: calc(1.62 * var(--lh-scale));
   color: var(--c62)
}

.alv-ed .gold {
   color: var(--gold-soft)
}

/* section header — standalone, never in a box */
.alv-ed .head {
   position: relative;
   z-index: 1
}

.alv-ed .head .kick {
   margin-bottom: 12px
}

.alv-ed .head .sub {
   margin-top: 14px;
   max-width: 60ch
}

.alv-ed .head.center {
   text-align: center
}

.alv-ed .head.center .h2,
.alv-ed .head.center .sub {
   margin-left: auto;
   margin-right: auto
}

.alv-ed .head.across {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: clamp(28px, 4vw, 64px);
   align-items: end;
   padding-bottom: clamp(20px, 2.4vw, 32px);
   /* border-bottom: 1px solid var(--gold-line) */
}

.alv-ed .head.across .sub {
   margin-top: 0;
   padding-left: 22px;
   border-left: 1px solid var(--gold-line)
}

/* ---- cream scope: flip the ink, darken the gold ---- */
.alv-ed #fellows .h2,
.alv-ed #memberships .h2,
.alv-ed #fellows .h3,
.alv-ed #memberships .h3,
.alv-ed .cmp-b .h2,
.alv-ed .cmp-b .h3 {
   color: var(--ink)
}

.alv-ed #fellows .kick,
.alv-ed #memberships .kick,
.alv-ed #fellows .role,
.alv-ed #fellows .tnum,
.alv-ed #memberships .fk,
.alv-ed .cmp-b .kick {
   color: var(--dgold)
}

.alv-ed #fellows .body p,
.alv-ed #memberships .body p,
.alv-ed #memberships .intro,
.alv-ed .cmp-b .body p {
   color: var(--ink-soft)
}

.alv-ed #fellows .head .sub,
.alv-ed #memberships .head .sub {
   color: var(--ink-soft)
}

.alv-ed #fellows .head.across,
.alv-ed #memberships .head.across {
   border-bottom-color: var(--paper-rule)
}

.alv-ed #fellows .head.across .sub,
.alv-ed #memberships .head.across .sub {
   border-left-color: var(--paper-rule)
}

.alv-ed #fellows .gp,
.alv-ed #memberships .gp,
.alv-ed .cmp-b .gp {
   color: var(--dgold2)
}

/* #memberships header: drop the rule beneath the title; set the standfirst level with it */
.alv-ed #memberships .head.across {
   align-items: center;
   /* border-bottom: 1px solid var(--paper-rule) */
}

/* a faint Alvará seal set behind the heading of the Memberships */
.alv-ed #memberships .jseal {
   position: absolute;
   top: clamp(-10px, 1vw, 20px);
   right: 2%;
   width: min(26vw, 300px);
   opacity: .06;
   z-index: 0;
   pointer-events: none;
   filter: grayscale(1) sepia(.4) brightness(1.1)
}

/* a second seal fills the dead space at lower-left, beneath the Core column */
.alv-ed #memberships .jseal2 {
   position: absolute;
   left: -3%;
   bottom: clamp(24px, 4vw, 70px);
   width: min(24vw, 300px);
   opacity: .06;
   z-index: 0;
   pointer-events: none;
   filter: grayscale(1) sepia(.4) brightness(1.1)
}

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

.alv-ed #memberships .ghost {
   opacity: .05;
   filter: grayscale(1) sepia(.4) brightness(1.15);
   display: none
}

.alv-ed .feature-dir .bgwash img {
   opacity: .05;
   filter: grayscale(1) sepia(.35) brightness(1.28)
}

.alv-ed .feature-dir .bgwash .v {
   background: radial-gradient(120% 100% at 50% 40%, transparent 34%, rgba(229, 220, 198, .9) 86%), linear-gradient(180deg, rgba(233, 225, 205, .72), rgba(229, 220, 198, .5) 40%, rgba(229, 220, 198, .86))
}

.alv-ed .feature-dir .fd-head .h2,
.alv-ed .feature-dir .fd-head .h3 {
   color: var(--ink)
}

.alv-ed .feature-dir .fd-head p,
.alv-ed .feature-dir .fd-head .sub,
.alv-ed .feature-dir .fd-head .lead {
   color: var(--ink-soft)
}

.alv-ed .feature-dir .gp {
   color: var(--dgold2)
}

.alv-ed .feature-dir::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -1px;
   height: clamp(40px, 5vw, 76px);
   /* background: linear-gradient(180deg, #12281a, var(--ivory)); */
   z-index: 0
}

.alv-ed .feature-dir::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
   height: clamp(40px, 5vw, 76px);
   /* background: linear-gradient(180deg, var(--ivory), #12281a); */
   z-index: 0
}

/* ===== BUTTONS & LINKS (v18) ===== */
.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: 14px 30px;
   border: 1px solid var(--gold);
   color: var(--cream);
   transition: .3s;
   cursor: pointer;
   border-radius: 2px
}

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

.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(--gold-soft);
   font-weight: 600;
   transition: .3s
}

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

.alv-ed #memberships .tlink {
   color: var(--dgold)
}

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

.alv-ed .two {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(28px, 4vw, 64px)
}

/* =====================================================================
   FOUNDING FELLOWS  (cream) — editorial portraits + a printed record.
   The old gold-filled Gilberto card and bracketed frames are gone.
   ===================================================================== */
.alv-ed .fellows {
   display: grid;
   grid-template-columns: 1.62fr 1fr 1fr 1fr;
   grid-template-rows: auto auto;
   gap: clamp(20px, 2.4vw, 34px);
   margin-top: clamp(30px, 3.6vw, 50px);
   position: relative;
   z-index: 1;
   align-items: start
}

/* portrait frame — thin gold rule + discreet corner ticks, no offset double-border */
.alv-ed .frame {
   position: relative;
   display: block
}

.alv-ed .frame img {
   width: 100%;
   display: block;
   border: 1px solid var(--gold-line)
}

.alv-ed .frame::after {
   content: none
}






.alv-ed .cap {
   font-family: var(--word);
   font-size: var(--fs-eyebrow);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--gold);
   margin-top: 12px;
   padding-left: 8px
}

.alv-ed .fcard {
   position: relative
}

/* the three Fellows: taller photos that fill the column, the description dropping
   to meet the bottom line level with Gilberto's record */
.alv-ed .fcard.plain {
   padding-bottom: 0;
   border-bottom: 0;
   grid-row: 1;
   padding-top: clamp(18px, 1.7vw, 28px);
   display: flex;
   flex-direction: column;
   height: 100%;
   align-self: stretch
}

.alv-ed .fcard.plain .frame {
   flex: 1 1 auto;
   min-height: clamp(320px, 28vw, 480px)
}

.alv-ed .fcard.plain .frame img {
   height: 100%;
   aspect-ratio: auto;
   object-fit: cover;
   object-position: center 14%
}

.alv-ed .fcard .frame img {
   aspect-ratio: 3/4;
   object-fit: cover;
   object-position: center 14%
}

.alv-ed .fcard .role {
   font-family: var(--word);
   font-size: var(--fs-eyebrow);
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--dgold);
   font-weight: 600;
   margin-top: 16px
}

.alv-ed .fcard .nm {
   font-family: var(--word);
   font-weight: 500;
   font-size: clamp(21px, 1.8vw, 26px);
   line-height: 1.02;
   margin-top: 7px;
   letter-spacing: .01em;
   color: var(--ink)
}

.alv-ed .fcard .body {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--paper-rule)
}

.alv-ed .fcard .body p {
   color: var(--ink-soft);
   font-size: var(--fs-note);
   line-height: 1.55
}

.alv-ed .facwe {
   font-family: var(--word);
   font-weight: 600;
   color: var(--dgold);
   letter-spacing: .04em
}

/* portraits sit as fixed plates — quieter corner ticks so they read as printed, not movable */
.alv-ed .fcard.plain .frame .cn {
   width: 12px;
   height: 12px;
   opacity: .55
}

.alv-ed .fcard .cr {
   font-family: var(--word);
   font-size: var(--fs-eyebrow);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--dgold2);
   font-weight: 600;
   margin-top: 9px;
   padding-bottom: 2px
}

/* Gilberto — the lead: a large, dominant portrait spanning two rows. He reads
   first and largest; the distinction label + rule sit above, level with the top
   of the three Fellows' portraits. No gilt box, no secondary snapshot. */
.alv-ed .fcard.lead {
   grid-column: 1;
   grid-row: 1/3;
   align-self: stretch
}

/* Gilberto — a single, quietly gilded panel: one soft gold edge, a warm light
   from the top, a gentle halo. Prestigious, not gaudy. Wider so his name sets
   on one line and both titles read across it. */
.alv-ed .fcard.lead .inner {
   position: relative;
   height: 100%;
   min-height: 100%;
   display: flex;
   flex-direction: column;
   border: 1px solid rgba(184, 150, 46, .55);
   padding: clamp(18px, 1.7vw, 28px);
   background: linear-gradient(180deg, rgba(201, 169, 74, .09), rgba(242, 237, 224, .16) 46%, rgba(236, 227, 204, .32));
   box-shadow: 0 26px 62px -36px rgba(201, 169, 74, .42), inset 0 1px 0 rgba(255, 252, 240, .5)
}

.alv-ed .fcard.lead .inner::before {
   content: none
}

.alv-ed .fcard.lead .frame {
   flex: 1 1 auto;
   display: block;
   min-height: clamp(340px, 38vw, 580px)
}

.alv-ed .fcard.lead .frame img {
   width: 100%;
   height: 100%;
   aspect-ratio: auto;
   object-fit: cover;
   object-position: center 26%;
   border: 1px solid rgba(184, 150, 46, .4)
}

.alv-ed .fcard.lead .frame .cn {
   display: none
}

.alv-ed .fcard.lead .nm {
   font-size: clamp(22px, 1.9vw, 30px);
   margin-top: 17px;
   color: var(--ink);
   text-align: center;
   line-height: 1.05;
   white-space: nowrap;
   letter-spacing: 0
}

.alv-ed .fcard.lead .cr {
   color: var(--dgold2);
   text-align: center;
   font-size: var(--fs-micro);
   letter-spacing: .12em;
   white-space: nowrap;
   margin-top: 8px
}

.alv-ed .fcard.lead .cr2 {
   text-align: center;
   margin-top: 6px;
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow);
   letter-spacing: .2em;
   text-transform: uppercase
}

.alv-ed .fcard.lead .cr2 .facwe {
   color: var(--dgold)
}

.alv-ed .fcard.lead .accolades {
   margin-top: 15px
}

.alv-ed .fcard.lead .accolades li {
   border-bottom-color: rgba(184, 150, 46, .2)
}

/* Both of these are held on one line so the lead card sets as a title page,
   and both are `white-space: nowrap` -- which is a MINIMUM WIDTH, not a
   preference. "Founding Fellow · Academic Guardian" wants 328px of it, so on a
   375px screen the grid track it sits in was sized to the line rather than to
   the page, and the whole card ran 15px past the right-hand edge, where
   `.alv-ed`'s `overflow-x: clip` quietly cut it off: no scrollbar, nothing to
   see, just a portrait missing its right-hand sliver. They wrap from here
   down, which costs nothing at any width where they still fit. */
@media(max-width:1040px) {

   .alv-ed .fcard.lead .nm,
   .alv-ed .fcard.lead .cr {
      white-space: normal
   }
}

.alv-ed .accolades {
   list-style: none;
   margin: 16px 0 0
}

.alv-ed .accolades li {
   font-family: var(--body);
   font-size: var(--fs-note);
   color: var(--ink);
   line-height: 1.4;
   padding: 8px 0 8px 18px;
   position: relative;
   border-bottom: 1px solid var(--paper-rule)
}

.alv-ed .accolades li:last-child {
   border-bottom: 0
}

.alv-ed .accolades li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 11px;
   width: 5px;
   height: 5px;
   background: var(--gold);
   border-radius: 50%
}

.alv-ed .accolades li b {
   color: var(--ink);
   font-weight: 600
}

/* the Guardians note in the nook — plain editorial, no box */
.alv-ed .ff-textbox {
   grid-column: 2/5;
   grid-row: 2;
   padding: clamp(22px, 2.6vw, 34px) 0 0;
   position: relative;
   z-index: 1;
   align-self: start;
   border-top: 1px solid var(--paper-rule)
}

.alv-ed .ff-textbox .fk {
   margin-bottom: 14px;
   color: var(--dgold)
}

.alv-ed .ff-textbox .two {
   gap: clamp(28px, 4vw, 60px);
   align-items: start
}

.alv-ed .ff-textbox .body p {
   color: var(--ink-soft);
   font-size: var(--fs-ui);
   line-height: calc(1.6 * var(--lh-scale))
}

/* eyebrow first, then a restrained cursive line, then the reading — a proper
   hierarchy; the quote is never larger than the passage that carries it */
/* the eyebrow leads, then the reading, then the discipline's principle as a
   cursive quote underneath — the passage carries the line, not the reverse */
/* the reading leads; the principle sits off to the side as a special quote —
   eyebrow, a short gold rule, then the cursive line, left-anchored */
/* the statement sits to the RIGHT, in the open space the horse looks toward,
   clear of the rider; the cursive line runs long — never more than two lines */
/* the flag photograph gives a soft colour ground; a strong scrim keeps the reading clean */
.alv-ed #principle .bgwash img {
   opacity: .5;
   filter: none;
   object-position: 22% 42%
}

.alv-ed #principle .bgwash .v {
   background: linear-gradient(180deg, rgba(9, 22, 14, .62), rgba(9, 20, 13, .52) 42%, rgba(9, 20, 13, .74)), radial-gradient(120% 100% at 50% 48%, rgba(9, 20, 13, .2) 32%, rgba(8, 18, 12, .8))
}

/* =====================================================================
   THE SPIRAL (dark) — the magazine setting, the plate floated into the prose
   ===================================================================== */
/* The block is the estate's `.figblock.around` (alvara-editorial.css), the
   same setting the Fellows and the Residencies use: the plate floats INTO the
   measure rather than standing in a column beside it, so six paragraphs read
   as one passage. It replaced a two-column grid whose left column carried the
   prose in two halves separated by a rule -- the rule went with the columns,
   a divider drawn across a measure that is wrapping around a float being a
   line that stops in the middle of the page.

   This sheet says only what the shared setting cannot know: that the figure is
   a framed PLATE rather than a photograph. Nothing here dresses `.htx .body`,
   and nothing should: the Fellowship block below is a `.figblock` too, so a
   rule written for this one would land on that one as well. */
.alv-ed .spiral-wrap {
   position: relative;
   z-index: 1
}

/* NO PROSE RULE HERE EITHER. The grid's columns carried their own -- 16.5px,
   a 1.74 leading and `--c80` -- because at the time nothing on this page
   dressed a `.body`. main.css settles all four now (`.body p`: `--fs-body`,
   `--ground-ink-soft`, the leading on `--lh-scale`, and the 1.05em between
   paragraphs), and a page sheet loads after it, so restating any of them here
   wins on source order and quietly switches the settled rule off. There is a
   test in apps/pages/tests.py that says so, and it is the reason this block is
   a comment rather than three declarations. */

/* NO DROP CAP HERE. The grid's first column carried its own -- 3.4em in
   `--gold-soft` -- and the lede is the estate's `lede-main lede-sml` now, the
   same capital the Fellows' blocks open on. main.css says why it has to be
   INSTEAD and not beside: that sheet loads first and its selector carries one
   class, so a page-local `::first-letter` wins on both counts and the two
   would simply disagree about the letter.

   Nothing here dresses the head either. It is the Memberships panel's
   `.head.across` -- the heading in the first column, the standfirst in the
   second behind a gold rule -- and its own spacing carries the gap to the
   block, so the shared `.figblock.around` top margin is right as it stands. */

/* WIDER THAN THE ESTATE'S 45%, and for the reason the Fellows' landscape
   photograph is: the shared float is a measure for a PICTURE, which crops to
   whatever width it is given. This is a drawing, and its labels are SVG user
   units over an 840-wide viewBox -- so what they render at is `units x width /
   840` and the width is the type size. Its body labels are 13 and 17 units:
   581px puts them at 9 and 11.8px, and the shared clamp's 45% (about 468px at
   this measure) at 7.2 and 9.4 -- a caption's type, in a figure whose whole
   subject is the four Bands it names. Raising the sizes inside the drawing is
   the other lever and is the one the estate has ruled out: the labels are
   positioned to fit each other. See the note on `.stage { max-width: none }`
   in scripts/figures/figures-overrides.css.

   55% is the Fellows' landscape number, and it leaves the same measure beside
   it -- about 410px, which is the width that note settled on as the least the
   prose can be asked to take.

   Guarded above the shared collapse rather than left to source order: the
   collapse at 820px carries one class more than this and would win anyway,
   but a width that only works because of where it sits in the file is a width
   the next edit moves. */
@media(min-width:821px) {

   .alv-ed .spiral-fig .hph {
      width: 55%
   }
}

/* THE SPIRAL'S CAPTION IS A DESKTOP LINE. Beside the prose it labels a drawing
   the reader is looking at while reading about it; below the collapse the
   figure unfloats and stacks straight above the section's own head, so the
   caption lands between the drawing and the heading that introduces it -- a
   grey italic line pushing the h2 down and saying, in shorthand, what the two
   paragraphs beneath it then say in full. It goes, rather than being restyled,
   because there is no place for it in the stacked order that is not between
   two things that belong together. Nothing is lost: the same three Branches
   are named in the lede, and the plate's own iframe `title` carries the
   drawing's description for a reader who cannot see it.

   `display: none` and not `visibility` -- a hidden caption still holding its
   own height is the gap this is removing. */
@media(max-width:820px) {

   .alv-ed .spiral-fig .cap {
      display: none
   }
}

.alv-ed .spiral-quote {
   max-width: 820px;
   margin: clamp(26px, 3vw, 42px) auto 0;
   text-align: center;
   padding: clamp(22px, 2.6vw, 32px) 0;
   border-top: 1px solid var(--gold-line);
   border-bottom: 1px solid var(--gold-line)
}

.alv-ed .spiral-quote p {
   font-family: var(--word);
   font-weight: 500;
   font-style: italic;
   font-size: calc(clamp(17px, 1.7vw, 22px) * var(--fs-scale));
   line-height: 1.42;
   color: var(--cream)
}

/* The plates themselves are in alvara-editorial.css: `/the-college/` frames the
   Spiral plate too, so `.plate-box` and its three ratios were MOVED there
   rather than copied. `.plate-hero` stayed -- only this page draws the corner
   marks around a plate -- and so did `.feature-dir .plate-box.direction`
   below, which is this page's override of a shared ratio. */

.alv-ed .plate-hero {
   position: relative;
   /* border: 1px solid var(--gold-line) */
}

.alv-ed .plate-hero::after {
   content: none
}

.alv-ed .plate-hero .cn {
   position: absolute;
   width: 18px;
   height: 18px;
   border: 1px solid var(--gold-soft);
   opacity: .85;
   z-index: 3
}

.alv-ed .plate-hero .cn.tl {
   top: -1px;
   left: -1px;
   border-right: 0;
   border-bottom: 0
}

.alv-ed .plate-hero .cn.tr {
   top: -1px;
   right: -1px;
   border-left: 0;
   border-bottom: 0
}

.alv-ed .plate-hero .cn.bl {
   bottom: -1px;
   left: -1px;
   border-right: 0;
   border-top: 0
}

.alv-ed .plate-hero .cn.br {
   bottom: -1px;
   right: -1px;
   border-left: 0;
   border-top: 0
}

/* A full-measure hairline, against `.rule`'s 56px gold accent -- this one
   divides rather than decorates, so it runs the width of the cards it stands
   over. It is `aria-hidden` and empty because it is exactly that: a rule, not
   a separator anything can be said about; the heading below it already tells a
   screen reader where the standfirst ends. `.divl` is the same idea inside a
   card, and the two are kept apart because their colours can reasonably
   differ -- `.divl` sits on Mentored's gilded ground and takes a gold of its
   own there.

   The gap beneath is `.tiers`' own top margin, not a bottom margin here: two
   margins meeting is two places to edit the one distance. */
.alv-ed .divw {
   height: 1px;
   background: var(--paper-rule);
   margin-top: clamp(28px, 3.2vw, 44px)
}

/* =====================================================================
   THE MEMBERSHIPS (cream) — three framed cards, stepping up to Mentored.

   Built from docs/college/Alvara_Membership_2026-08-27.readable.html (the
   decoded design; the file as delivered is a Claude Design canvas export
   holding the document as a JSON-escaped string, so the readable copy is
   what to read). The design's own frames are carried across rather than
   the hairline columns this section used to be: three bordered panels
   with an 18px gutter, each carrying a coloured top rule that is the
   whole of how the three degrees of standing are told apart.

   REPAINTED, NOT COPIED. The design is cream-on-green (#0B1F19 ground,
   #F2EDE0 lettering, #C9A63C gold); `#memberships` is a *paper* passage, so every
   one of its colours is restated in the page's own tokens — `--ink` on
   `--ivory`, `--paper-rule` for a hairline, `--gold`/`--dgold` for the
   gilding. Nothing here carries a literal from the design file.

   THE STAGGER IS THE DESIGN'S, AT THIS SHEET'S BREAKPOINT. The mockup
   drops Core by 184px and Guided by 92px through
   `clamp(0px,(100vw - 1000px)*18,184px)`, whose multiplier makes it a step
   rather than a ramp — full depth about ten pixels above the floor. Ours
   ramps over the band between the fold (1041px) and 1193px so a reader
   dragging a window edge sees the three tops separate rather than jump,
   and both land together at the top of it. The proportion is the design's,
   2:1, and the floor is 0 below the fold, which is where `.tiers` becomes
   one column and a stagger would be three cards hanging off their margins.

   THE CARDS BOTTOM OUT TOGETHER, which is what the stagger is for. `.tiers`
   stretches its items, `.tcta` takes `margin-top:auto`, and the three calls
   to action stand on one line however much prose is above them. That needs
   the whole chain to stretch — the tier, the fold, and `::details-content`
   — and it is written *only* above the fold: below it `::details-content`
   is animated from `block-size: 0`, and a `flex: 1` there would grow the
   box the collapse depends on being able to shut.
   ===================================================================== */
.alv-ed .tiers {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 18px;
   margin-top: clamp(20px, 2.4vw, 34px);
   align-items: stretch;
   position: relative;
   z-index: 1
}

.alv-ed .tier {
   position: relative;
   padding: clamp(24px, 2.2vw, 30px) clamp(20px, 2vw, 28px);
   display: flex;
   flex-direction: column;
   background: rgba(60, 52, 24, .028);
   border: 1px solid var(--paper-rule);
   border-top: 4px solid var(--ink-faint)
}

.alv-ed .tier::before {
   content: none
}

/* three explicit degrees of standing, told by the top rule and the ground
   beneath it: Core plain paper · Guided a sage rule over a warmer ground ·
   Mentored fully gilded. The design's #7EA88E sage is a light on dark and
   goes invisible on cream, so Guided takes the deep College green instead —
   the same interval between the three, read the other way up. */
.alv-ed .tier.t2 {
   background: rgba(60, 50, 22, .06);
   border-color: rgba(60, 52, 24, .34);
   border-top: 4px solid #3f6b4e;
   margin-top: clamp(0px, (100vw - 1040px) * .6, 92px)
}

.alv-ed .tier.t3 {
   background: linear-gradient(180deg, rgba(201, 169, 74, .2) 0%, rgba(60, 52, 24, .04) 100%);
   border-color: rgba(160, 128, 44, .62);
   border-top: 4px solid var(--gold);
   box-shadow: inset 0 30px 72px -40px rgba(201, 169, 74, .7)
}

.alv-ed .tier.t1 {
   margin-top: clamp(0px, (100vw - 1040px) * 1.2, 184px)
}

/* Mentored alone is spoken for before it is named */
.alv-ed .tier .tby {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--dgold);
   margin-bottom: 14px
}

/* the name and its step share one baseline over a hairline */
.alv-ed .tier .thead {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
   padding-bottom: 13px;
   border-bottom: 1px solid var(--paper-rule)
}

.alv-ed .tier.t3 .thead {
   border-bottom-color: rgba(160, 128, 44, .5)
}

.alv-ed .tier .tnum {
   font-family: var(--word);
   font-weight: 600;
   color: var(--ink-faint);
   font-size: var(--fs-eyebrow);
   letter-spacing: .24em;
   text-transform: uppercase;
   white-space: nowrap
}

.alv-ed .tier.t2 .tnum {
   color: var(--ink-soft)
}

.alv-ed .tier.t3 .tnum {
   color: var(--dgold)
}

.alv-ed .tier .tn {
   font-family: var(--word);
   font-weight: 500;
   line-height: 1;
   letter-spacing: .01em;
   color: var(--ink)
}

.alv-ed .tier.t1 .tn {
   font-size: clamp(26px, 2.4vw, 34px)
}

.alv-ed .tier.t2 .tn {
   font-size: clamp(27px, 2.5vw, 36px)
}

.alv-ed .tier.t3 .tn {
   font-size: clamp(28px, 2.7vw, 39px);
   color: #7a5a12
}

.alv-ed .tier .tg {
   font-family: var(--body);
   font-style: italic;
   font-size: var(--fs-body-sm);
   color: var(--ink-soft);
   margin-top: 16px;
   line-height: 1.5
}

.alv-ed .tier .pr {
   font-family: var(--word);
   font-weight: 500;
   line-height: 1;
   margin: 20px 0 8px;
   color: var(--ink)
}

.alv-ed .tier.t1 .pr {
   font-size: clamp(28px, 2.5vw, 34px)
}

.alv-ed .tier.t2 .pr {
   font-size: clamp(30px, 2.8vw, 38px)
}

.alv-ed .tier.t3 .pr {
   font-size: clamp(32px, 3.1vw, 43px);
   color: #7a5a12
}

.alv-ed .tier .pm {
   font-family: var(--body);
   font-style: italic;
   font-size: var(--fs-meta-alt);
   color: var(--ink-faint)
}

.alv-ed .tier .intro {
   font-family: var(--body);
   font-size: var(--fs-note-alt);
   color: var(--ink-soft);
   margin: 0 0 14px;
   line-height: 1.7;
   text-wrap: pretty
}

.alv-ed .tier .divl {
   height: 1px;
   background: var(--paper-rule);
   margin: 24px 0 20px
}

.alv-ed .tier.t3 .divl {
   background: rgba(160, 128, 44, .45)
}

/* =====================================================================
   WHAT EACH MEMBERSHIP HOLDS — the design's own second fold, inside the
   card's. It is `.thold`, never `.tfold`: the script beside the markup
   collects `#memberships .tfold` to shut the cards below the breakpoint, and an
   inner details sharing that class would be shut and reopened by it as
   though it were a card. This one is closed at every width and is a plain
   `<details>` with no script behind it at all.

   The list is the design's two markers, and the distinction is worth more
   than the glyphs: a tick is what the Membership holds from the day it
   starts, a lozenge is what opens later against a Band. Told apart in the
   marker rather than in the wording, a reader can see which is which down
   the whole column without reading a line of it.
   ===================================================================== */
.alv-ed .tier .thold {
   width: 100%
}

.alv-ed .tier .tholds {
   list-style: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   width: 100%;
   padding: 14px 13px;
   text-align: left;
   background: rgba(60, 52, 24, .04);
   border: 1px solid var(--paper-rule);
   transition: background .3s, border-color .3s;
   /* ONE HEIGHT FOR THE THREE. The label is one line in each, but the count
      beneath it is not -- "· Four parts" sets in one and "· An additional
      eighteen parts" in two, so the boxes come out 73px and 92px and levelling
      their bottoms leaves their tops a line apart. The floor is the taller of
      the two and the content centres in it. It is raised again in the narrow
      band below, where the label wraps as well and the tallest runs to four
      lines. */
   min-height: 92px
}

.alv-ed .tier .tholds::-webkit-details-marker {
   display: none
}

.alv-ed .tier.t3 .tholds {
   background: rgba(201, 169, 74, .12);
   border-color: rgba(160, 128, 44, .55)
}

.alv-ed .tier .tholds:hover {
   background: rgba(201, 169, 74, .14);
   border-color: var(--dgold2)
}

.alv-ed .tier .tholds:focus-visible {
   outline: 1px solid var(--dgold);
   outline-offset: 3px
}

.alv-ed .tier .tholdt {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-micro);
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--ink-soft);
   line-height: 1.5
}

.alv-ed .tier .tholdc {
   display: block;
   color: var(--dgold);
   letter-spacing: .1em;
   margin-top: 3px
}

/* the same +/- the cards and the comparison draw, so the estate has one
   control for "there is more of this" wherever it is met */
.alv-ed .tier .tholdm {
   position: relative;
   display: block;
   width: 26px;
   height: 26px;
   flex: 0 0 auto;
   border: 1px solid rgba(160, 128, 44, .55);
   border-radius: 2px
}

.alv-ed .tier .tholdm::before,
.alv-ed .tier .tholdm::after {
   content: "";
   position: absolute;
   background: var(--dgold);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%)
}

.alv-ed .tier .tholdm::before {
   width: 12px;
   height: 1px
}

.alv-ed .tier .tholdm::after {
   height: 12px;
   width: 1px;
   transition: transform .3s
}

.alv-ed .tier .thold[open] .tholdm::after {
   transform: translate(-50%, -50%) scaleY(0)
}

.alv-ed .tier .tholdi {
   font-family: var(--body);
   font-size: var(--fs-meta-alt);
   line-height: 1.7;
   color: var(--ink-faint);
   margin: 20px 0 18px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--paper-rule)
}

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

.alv-ed .tier ul li {
   font-family: var(--body);
   font-size: var(--fs-note);
   line-height: 1.65;
   color: var(--ink-soft);
   padding: 0 0 13px 26px;
   position: relative
}

.alv-ed .tier ul li:last-child {
   padding-bottom: 0
}

.alv-ed .tier ul li::before {
   position: absolute;
   left: 0;
   top: 0;
   color: var(--dgold);
   font-size: .82em;
   line-height: 1.9
}

/* held from the first day */
.alv-ed .tier ul li.held::before {
   content: "✓"
}

/* OPENS LATER, AGAINST A BAND -- and the lozenge is drawn, not set. U+25C7 is
   a hairline outline in EB Garamond and comes out barely visible beside a tick
   at the same size, which matters most in the comparison table below, where
   the mark is the whole of what the cell says. Drawn it is a square on its
   corner at a stated weight, the same at every size and in every font. One
   shape for "opens later" wherever the page says it. */
.alv-ed .tier ul li.opens::before,
.alv-ed .cmp-b .cmp-m.opens::before {
   content: "";
   width: 9px;
   height: 9px;
   border: 1.5px solid var(--dgold2);
   background: none;
   border-radius: 0;
   transform: rotate(45deg)
}

.alv-ed .tier ul li.opens::before {
   top: 8px;
   left: 1px
}

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

/* =====================================================================
   THE CALLS TO ACTION. Three different sentences and two destinations:
   Core and Guided are bought, Mentored is asked about, so its button is
   the only one leaving for `/contact-us/`. They stand on one line at the
   foot of the three cards — `margin-top:auto` against the stretch chain
   above — which is the whole reason the cards are staggered rather than
   levelled: the eye reads the step in the tops and the invitation in one
   place.

   `.btn.fill` is the estate's gold button and is what these carry. The
   design draws Core and Guided hollow and Mentored filled; on cream a
   hollow gold button loses against the paper, and three degrees of
   standing are already told three times in the same card — the rule, the
   ground and the size of the name. A fourth telling in the one element
   that is a *control* would be the tier deciding how loudly the reader may
   act on it.
   ===================================================================== */
.alv-ed .tier .tcta {
   margin-top: clamp(16px, 1.8vw, 22px);
   justify-content: center;
   width: 100%;
   padding: 14px 16px;
   font-size: var(--fs-micro);
   letter-spacing: .08em;
   text-align: center
}

.alv-ed .tier .tcta .ar {
   transition: transform .3s
}

.alv-ed .tier .tcta:hover .ar {
   transform: translateX(4px)
}

@media(min-width:1041px) {

   .alv-ed .tier .tfold,
   .alv-ed .tier .tfold::details-content {
      flex: 1
   }

   /* THE ROW OF CALLS TO ACTION LASTS ONLY AS LONG AS THE ROW DOES. Pinned to
      the foot of a stretched card, they stand on one line while the three
      cards are a comparison -- which is what the stagger is for. Open one
      fold and the tallest card sets a height the other two have no content
      for, and Core's button floats seven hundred pixels below its own last
      line, pointing at nothing. So the moment any fold is open the cards stop
      stretching and each button follows its own card again: the three are no
      longer being read across, they are being read one at a time, which is
      what opening a fold says. */
   /* THE FOLD IS WHAT TAKES THE SLACK NOW, not the button beneath it. With
      the auto margin on the call to action the buttons stood on one line and
      the three folds landed wherever their own prose left them -- as much as
      250px apart, since Core's two paragraphs are half the length of
      Mentored's. Moved up one element, the same margin puts the folds on one
      line and the buttons follow at a fixed gap, so both rows are level. */
   .alv-ed .tier .thold {
      margin-top: auto
   }

   .alv-ed .tiers:has(.thold[open]) {
      align-items: start
   }

   .alv-ed .tiers:has(.thold[open]) .thold {
      margin-top: 24px
   }
}

/* The last stretch before the cards stack is where they are narrowest, and
   "Enquire about Mentored" is the longest of the three calls to action -- so
   for about eighty pixels above the fold it was the one button of three on a
   second line. The three read as one row or they read as three, so the band
   gets its own setting rather than the whole page being set for its worst
   moment. */
@media(min-width:1041px) and (max-width:1140px) {

   .alv-ed .tier .tcta {
      padding-inline: 8px;
      letter-spacing: .04em
   }

   .alv-ed .tier .tholds {
      min-height: 112px
   }
}

/* the frames come off where the cards stack: below the fold each is a page
   of its own with its own +/-, and a border around a shut head reads as a
   button that is not one. The top rule stays — it is the only thing left
   telling the three apart once they are in a column. */
@media(max-width:1040px) {

   /* THE RULE HAS TO SIT NEARER THE CARD IT BELONGS TO THAN THE ONE ABOVE IT.
      Stacked at gap 0 the coloured top rules land directly under the previous
      card's last line, and a green rule between Core and Guided reads as
      Core's underline rather than as Guided's standing. The gutter is what
      says which way it faces; it is not needed side by side, where each rule
      sits over its own column. */
   .alv-ed .tiers {
      gap: clamp(30px, 5vw, 44px)
   }

   .alv-ed .tier {
      background: none;
      border: 0;
      border-top: 2px solid var(--ink-faint);
      margin-top: 0
   }

   .alv-ed .tier.t2 {
      background: none;
      border: 0;
      border-top: 2px solid #3f6b4e
   }

   /* MENTORED KEEPS THE DROP THE OTHER TWO KEEP. This said `box-shadow: none`,
      which was written to put out the inset gilding `.tier.t3` carries on a
      wide screen -- and took the shared drop out with it, `box-shadow` being
      one property and not a list one shadow can be removed from. So the three
      cards stacked in a column and the third was the only one not standing off
      the page, on the card the whole section is built to end on. The token is
      declared beside the drop itself, on `.alv-ed .tier` in
      alvara-editorial.css, so the value is written once. */
   .alv-ed .tier.t3 {
      background: none;
      border: 0;
      border-top: 2px solid var(--gold);
      box-shadow: var(--tier-shadow)
   }

   .alv-ed .tier .tholds {
      min-height: 0
   }

   .alv-ed .tier .tcta {
      width: auto;
      align-self: flex-start;
      margin-top: 18px
   }
}

/* =====================================================================
   MOVING BETWEEN THE STEPS — the panel that closes the Memberships.

   The design's `repeat(auto-fit, minmax(300px, 1fr))` with a border-right on
   the first cell, repainted for paper. Two departures, both forced by the one
   thing the design does not have to care about:

   - IT IS TWO EXPLICIT COLUMNS, NOT `auto-fit`. The divider is a border on the
     first cell, and `auto-fit` decides at layout time whether the second cell
     is beside the first or beneath it -- which no selector can ask, so the
     rule would go on standing at the right-hand edge of a cell that had become
     the top one. Written out, the breakpoint and the divider are settled in
     the same place and cannot disagree. 680px is where the design's own rule
     puts it: `.wrap` gives the panel `100vw - 2 * clamp(24px,5vw,80px)`, so a
     column falls under the design's 300px minimum just below there.

   - THE CELLS ARE TINTED, NOT PAINTED. `#memberships` carries a 3px paper mottle in
     its own background image; an opaque cell would cover it and read as a flat
     rectangle laid on textured paper. The design's ground is a 2.4% wash and
     it stays a wash here.

   The two halves are deliberately unequal and the design makes them so: the
   left is a note about what a Member may do, set at reading size in
   `--ink-soft`; the right is what the College is asserting, set larger and in
   full `--ink`. Levelling them would make the panel two footnotes.
   ===================================================================== */
.alv-ed .tmove {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: clamp(40px, 4.4vw, 64px);
   border: 1px solid var(--paper-rule);
   background: rgba(60, 52, 24, .024);
   position: relative;
   z-index: 1
}

.alv-ed .tmove-cell {
   padding: clamp(26px, 2.6vw, 32px) clamp(24px, 2.8vw, 34px)
}

.alv-ed .tmove-cell+.tmove-cell {
   border-left: 1px solid var(--paper-rule)
}

.alv-ed .tmove-k {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-micro);
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--dgold)
}

.alv-ed .tmove-cell p {
   font-family: var(--body);
   font-size: var(--fs-note-alt);
   line-height: 1.85;
   color: var(--ink-soft);
   margin: 16px 0 0;
   text-wrap: pretty
}

.alv-ed .tmove-cell.lead p {
   font-size: var(--fs-body-sm);
   line-height: 1.7;
   color: var(--ink)
}

@media(max-width:680px) {

   .alv-ed .tmove {
      grid-template-columns: 1fr
   }

   .alv-ed .tmove-cell+.tmove-cell {
      border-left: 0;
      border-top: 1px solid var(--paper-rule)
   }
}

/* =====================================================================
   THE CARDS FOLD WHERE THEY STACK.

   Side by side the three tiers are a comparison and the reader's eye crosses
   them; below 1040px `.tiers` becomes one column, and the same three cards are
   a single 4,000-word scroll with Mentored's twelve bullets at the bottom of
   it. So each card is a `<details>` there -- head, price and a +/- to open --
   and the sequence a reader is asked to take in goes from three screens to
   one. The breakpoint is deliberately the one `.tiers` collapses at: a card
   stops being a column of a comparison at exactly the width it becomes a page
   of its own.

   WHAT THE WRAPPERS MAY NOT DO IS MOVE ANYTHING. `.tier` is a flex column and
   its children were its flex items -- which is what stretches the gold call to
   action to the card's full width, and what keeps `.pr`'s 22px and `.divl`'s
   18px from collapsing into each other. So all three new boxes are flex
   columns too: the `<details>`, the `<summary>`, and `::details-content`. That
   last one matters in both directions -- an engine that implements the pseudo-
   element puts the whole tail in one box beneath the summary, and one that
   does not leaves the tail as direct children of the `<details>`. Made a flex
   column in both places, the two arrangements lay out identically; left alone,
   the button is full width in one engine and shrink-to-fit in the other.

   ABOVE THE FOLD THE CONTROL IS NOT THERE: the marker is hidden, and
   `content-visibility: visible` shows the tail whatever the `open` attribute
   currently says. That is what a reader who folds a card on a telephone and
   then turns the tablet sideways gets back, and it is why the summary's click
   is refused at that width in the template's script rather than left to close
   a card nobody can reopen. The estate already leans on `::details-content`
   for the comparison accordion below.

   The cards are `open` in the markup and `window.alvFold` shuts all three
   below the fold -- see the note beside it in membership.html, which is also
   what shuts the comparison accordion below this section, Core included. A
   page whose script never arrives is the page as it was: three cards showing,
   and Core's comparison open beneath them.
   ===================================================================== */
.alv-ed .tier .tfold,
.alv-ed .tier .tsum,
.alv-ed .tier .tfold::details-content {
   display: flex;
   flex-direction: column
}

.alv-ed .tier .tsum {
   list-style: none;
   position: relative
}

.alv-ed .tier .tsum::-webkit-details-marker {
   display: none
}

@media(min-width:1041px) {

   .alv-ed .tier .tmk {
      display: none
   }

   .alv-ed .tier .tfold::details-content {
      content-visibility: visible
   }
}

@media(max-width:1040px) {

   .alv-ed .tier .tsum {
      cursor: pointer;
      padding-right: 44px
   }

   .alv-ed .tier .tsum:focus-visible {
      outline: 1px solid var(--dgold);
      outline-offset: 8px
   }

   /* the same +/- the comparison accordion draws, in the paper palette: a bar
      and a bar, the upright scaled away when the card is open, so the two
      states are one control changing rather than two glyphs swapping. */
   .alv-ed .tier .tmk {
      position: absolute;
      top: 0;
      right: 0;
      width: 26px;
      height: 26px;
      border: 1px solid var(--paper-rule);
      border-radius: 2px
   }

   .alv-ed .tier .tmk::before,
   .alv-ed .tier .tmk::after {
      content: "";
      position: absolute;
      background: var(--dgold);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
   }

   .alv-ed .tier .tmk::before {
      width: 12px;
      height: 1px
   }

   .alv-ed .tier .tmk::after {
      height: 12px;
      width: 1px;
      transition: transform .3s
   }

   .alv-ed .tier .tfold[open] .tmk::after {
      transform: translate(-50%, -50%) scaleY(0)
   }
}

/* The panel grows rather than appears -- the accordion's own arrangement, and
   the long note above it says why each line is needed. Held inside the fold's
   own width because `block-size: 0` above it would clip a card that is closed
   and shown, which is exactly what the desktop rule makes of one. */
@media (max-width:1040px) and (prefers-reduced-motion: no-preference) {

   .alv-ed .tier .tfold {
      interpolate-size: allow-keywords
   }

   .alv-ed .tier .tfold::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .34s cubic-bezier(.22, .61, .36, 1),
         content-visibility .34s allow-discrete,
         overflow .34s allow-discrete
   }

   .alv-ed .tier .tfold[open]::details-content {
      block-size: auto;
      overflow: visible
   }
}

/* =====================================================================
   COMPARISON accordion (dark) — hairline rows, no heavy panels
   ===================================================================== */
.alv-ed .acc {
   margin-top: clamp(20px, 2.4vw, 34px);
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 0
}

.alv-ed .acc details {
   position: relative;
   border: 0;
   border-top: 1px solid var(--gold-line);
   background: none;
   box-shadow: none;
   transition: none
}

.alv-ed .acc details:last-child {
   border-bottom: 1px solid var(--gold-line)
}

.alv-ed .acc details:hover {
   border-color: var(--gold-line);
   box-shadow: none
}

.alv-ed .acc details[open] {
   border-color: var(--gold-line)
}

.alv-ed .acc summary {
   list-style: none;
   cursor: pointer;
   display: grid;
   grid-template-columns: auto 1fr auto auto;
   align-items: center;
   gap: clamp(14px, 2vw, 30px);
   padding: clamp(22px, 2.4vw, 32px) 4px;
   transition: opacity .3s
}

.alv-ed .acc summary:hover {
   opacity: .82;
   background: none
}

.alv-ed .acc summary::-webkit-details-marker {
   display: none
}

.alv-ed .acc .a-num {
   font-family: var(--word);
   font-weight: 500;
   font-size: clamp(22px, 2vw, 30px);
   color: var(--gold-soft);
   letter-spacing: 0
}

.alv-ed .acc .a-name {
   font-family: var(--word);
   font-weight: 500;
   font-size: clamp(24px, 2.4vw, 34px);
   color: var(--cream);
   line-height: 1;
   letter-spacing: .01em
}

.alv-ed .acc .a-name span {
   display: block;
   font-family: var(--body);
   font-style: italic;
   font-size: var(--fs-note);
   color: var(--c62);
   text-transform: none;
   margin-top: 8px;
   font-weight: 400
}

.alv-ed .acc .a-price {
   font-family: var(--body);
   font-size: var(--fs-meta);
   color: var(--c62);
   text-align: right;
   line-height: 1.4
}

.alv-ed .acc .a-price b {
   display: block;
   font-family: var(--word);
   font-weight: 500;
   font-size: 22px;
   color: var(--cream)
}

.alv-ed .acc .a-plus {
   width: 22px;
   height: 22px;
   position: relative;
   flex-shrink: 0
}

.alv-ed .acc .a-plus::before,
.alv-ed .acc .a-plus::after {
   content: "";
   position: absolute;
   background: var(--gold);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%)
}

.alv-ed .acc .a-plus::before {
   width: 14px;
   height: 1px
}

.alv-ed .acc .a-plus::after {
   height: 14px;
   width: 1px;
   transition: transform .3s
}

.alv-ed .acc details[open] .a-plus::after {
   transform: translate(-50%, -50%) scaleY(0)
}

/* =====================================================================
   THE PANEL OPENS RATHER THAN APPEARS.

   A `<details>` toggles instantly: the row is a hairline one frame and a
   half-screen panel the next. That is tolerable when a reader clicked it --
   they know what they did -- and it is not tolerable three times in a row on
   a 1.5s cadence, which is what the set now does to itself as it scrolls into
   view (see editorial.js). The demonstration is meant to show that the rows
   open; a page that jumps every second and a half shows something else.

   `::details-content` is the box everything after the `<summary>` sits in,
   and animating its `block-size` from 0 to `auto` is what makes the panel
   grow. Three things have to be said with it, and each is load-bearing:

   - `interpolate-size: allow-keywords` is what lets `auto` be interpolated at
     all; it is inherited, so it is declared on the `details` and read by the
     pseudo-element. Written on `.alv-ed .acc details` rather than on
     `.alv-ed`, because it changes how EVERY auto-size animation in its
     subtree behaves and nothing else on the estate has asked for that.
   - `content-visibility` has to be in the transition list with
     `allow-discrete`, or the content is not rendered while the box is growing
     and the panel animates open around nothing.
   - `overflow` likewise. Clipping is what makes the growth read as a reveal
     rather than as a curtain sliding over finished content -- but the rows
     carry `.pop` hover cards that sit ABOVE their row, and the first row's
     stands clear of `.a-body`'s top edge, so a permanent `overflow: hidden`
     would slice the top off every one of them. Discrete, it flips at the
     halfway point: clipped while the panel is visibly growing, honest by the
     time anyone could have hovered anything.

   `display: flow-root` is declared in BOTH states and does not change. It
   makes the pseudo-element a block formatting context whatever `overflow`
   currently is, so `.a-body`'s own margins stay contained rather than
   collapsing out of it the instant `overflow` goes visible -- which would put
   a 24px hop in the middle of the animation.

   A browser without `::details-content` or without `interpolate-size` ignores
   all of it and toggles as it does today. This is decoration on a control
   that already works.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

   .alv-ed .acc details {
      interpolate-size: allow-keywords
   }

   .alv-ed .acc details::details-content {
      display: flow-root;
      block-size: 0;
      overflow: hidden;
      transition: block-size .38s cubic-bezier(.22, .61, .36, 1),
         content-visibility .38s allow-discrete,
         overflow .38s allow-discrete
   }

   .alv-ed .acc details[open]::details-content {
      block-size: auto;
      overflow: visible
   }
}

.alv-ed .acc .a-body {
   padding: 0 4px clamp(26px, 2.8vw, 38px)
}

.alv-ed .acc .a-body .note {
   font-family: var(--body);
   font-style: italic;
   font-size: var(--fs-ui);
   color: var(--c62);
   padding: 16px 0 20px;
   max-width: 72ch
}

.alv-ed .acc .a-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 clamp(30px, 4vw, 64px)
}

.alv-ed .acc .a-list .row {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 12px;
   padding: 11px 8px 11px 0;
   border-bottom: 1px solid var(--gold-line);
   align-items: baseline;
   position: relative;
   transition: padding-left .25s, background .25s
}

.alv-ed .acc .a-list .row.has:hover {
   padding-left: 10px;
   background: linear-gradient(90deg, rgba(184, 150, 46, .08), transparent);
   z-index: 5
}

.alv-ed .acc .a-list .mk {
   font-size: var(--fs-note);
   line-height: 1.4;
   margin-top: 3px;
   color: var(--gold);
   width: 16px;
   text-align: center
}

.alv-ed .acc .a-list .rt {
   font-family: var(--body);
   font-size: var(--fs-body-sm);
   color: var(--cream);
   line-height: 1.28
}

.alv-ed .acc .a-list .rd {
   display: block;
   font-family: var(--body);
   font-size: var(--fs-meta);
   color: var(--c62);
   line-height: 1.5;
   margin-top: 4px;
   text-transform: none
}

.alv-ed .acc .a-list .rt .op {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow-sm);
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--gold-soft);
   background: none;
   padding: 0 0 0 10px;
   border-radius: 0;
   margin-left: 6px;
   vertical-align: 1px
}

.alv-ed .acc .a-list .row.has .rt::after {
   content: "\203A";
   margin-left: 8px;
   color: var(--gold);
   opacity: .55
}

.alv-ed .acc-legend {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: clamp(16px, 2vw, 24px);
   font-family: var(--body);
   font-size: var(--fs-label-alt);
   color: var(--c62)
}

.alv-ed .acc-legend span {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   border: 0;
   padding: 0;
   white-space: nowrap;
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--c62)
}

.alv-ed .acc-legend b {
   color: var(--cream);
   font-weight: 600
}

.alv-ed .acc-legend .mk {
   color: var(--gold);
   font-size: var(--fs-ui);
   line-height: 1
}

/* THE LEGEND IS THE PANEL'S OWN HEADER, not a line standing above it. It
   names the two marks every row is drawn with, and it used to be a `.reveal`
   of its own between the head and the accordion -- so the marks and the key
   to them arrived as two separate motions, the key first and then, some
   scroll later, the thing it was a key to.

   Inside `.acc` it is the first flex child and the rule beneath it is the
   first `details`' own `border-top`, which `#compare .acc details:first-child`
   had been switching off while a `details` was still the first child. That is
   also why the free-standing `.acc-line` went with it rather than moving in:
   two hairlines a pixel apart is what moving it would have drawn. All this
   rule adds is the room above that border. */
.alv-ed #compare .acc>.acc-legend {
   margin-bottom: clamp(16px, 2vw, 24px)
}



/* #compare stays green, with a quiet backing around the set; each opened
   dropdown reveals a cream leaf — the reading turns to paper as it opens */
.alv-ed #compare .acc {
   background: linear-gradient(180deg, rgba(242, 237, 224, .04), rgba(9, 20, 13, .18));
   border: 1px solid var(--gold-line);
   padding: 0 clamp(16px, 2.4vw, 32px)
}

.alv-ed #compare .acc details {
   border-top: 1px solid var(--gold-line)
}

.alv-ed #compare .acc details:first-child {
   border-top: 0
}

.alv-ed #compare .acc details:last-child {
   border-bottom: 0
}

.alv-ed #compare .acc details[open] {
   border-color: var(--gold-line)
}

.alv-ed #compare .acc details[open] .a-body {
   background: var(--ivory);
   color: var(--ink);
   border: 1px solid var(--paper-rule);
   margin: 2px 0 clamp(16px, 2vw, 24px);
   padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 34px) clamp(20px, 2.4vw, 30px)
}

.alv-ed #compare .a-body .note {
   color: var(--ink-soft);
   border: 0
}

.alv-ed #compare .a-body .a-list .row {
   border-bottom-color: var(--paper-rule)
}

.alv-ed #compare .a-body .a-list .mk {
   color: var(--dgold)
}

.alv-ed #compare .a-body .a-list .rt {
   color: var(--ink)
}

.alv-ed #compare .a-body .a-list .rd {
   color: var(--ink-soft)
}

.alv-ed #compare .a-body .a-list .rt .op {
   color: var(--dgold)
}

.alv-ed #compare .a-body .a-list .row.has:hover {
   background: linear-gradient(90deg, rgba(184, 150, 46, .13), transparent)
}

.alv-ed #compare .a-body .a-list .row.has .rt::after {
   color: var(--dgold)
}

/* the call to action sits in the last (right) column, low — in line with the
   columns, not floated to the outer edge of the panel */
.alv-ed #compare .a-body .a-list .a-cta {
   grid-column: 2;
   justify-self: start;
   align-self: end;
   display: flex;
   padding: clamp(16px, 2vw, 26px) 0 0
}

.alv-ed #compare .a-body .a-list .a-cta .btn.fill {
   width: 100%;
   justify-content: center;
   background: var(--gold);
   border-color: var(--gold);
   color: #12251a
}

.alv-ed #compare .a-body .a-list .a-cta .btn.fill:hover {
   background: var(--gold-soft);
   border-color: var(--gold-soft)
}

@media(max-width:940px) {
   .alv-ed #compare .a-body .a-list .a-cta {
      grid-column: 1
   }
}

.alv-ed .imglb {
   position: fixed;
   inset: 0;
   z-index: 200;
   background: rgba(6, 14, 9, .92);
   display: none;
   align-items: center;
   justify-content: center;
   padding: clamp(20px, 5vw, 80px);
   cursor: zoom-out;
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px)
}

.alv-ed .imglb.on {
   display: flex
}

.alv-ed .imglb img {
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   border: 1px solid var(--gold-line);
   box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .85);
   background: #0f2417
}

.alv-ed .imglb .lb-close {
   position: absolute;
   top: clamp(16px, 2.4vw, 30px);
   right: clamp(18px, 2.8vw, 36px);
   font-family: var(--word);
   font-size: var(--fs-eyebrow);
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--gold-soft)
}

/* hover popover — a discreet dark note (kept, de-boxed to a single card) */
.alv-ed .pop {
   position: absolute;
   left: 0;
   right: 0;
   bottom: calc(100% + 12px);
   z-index: 60;
   border: 1px solid var(--gold-line);
   border-left: 2px solid var(--gold);
   padding: 20px 24px;
   background: linear-gradient(168deg, #1c4029, #0e2518 82%);
   box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .92);
   opacity: 0;
   transform: translateY(8px);
   pointer-events: none;
   transition: opacity .28s, transform .28s
}

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

.alv-ed .pop .pt {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow);
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--gold-soft);
   margin-bottom: 12px;
   padding-bottom: 11px;
   display: flex;
   align-items: center;
   gap: 8px;
   border-bottom: 1px solid var(--gold-line)
}

.alv-ed .pop .pt::before {
   content: "";
   width: 14px;
   height: 1px;
   background: var(--gold);
   flex: 0 0 auto
}

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

.alv-ed .pop .pk {
   display: block;
   font-family: var(--body);
   font-size: var(--fs-meta);
   color: var(--gold-soft);
   font-style: italic;
   margin-top: 11px;
   padding-top: 9px;
   border-top: 1px solid var(--gold-line)
}

.alv-ed .row:hover>.pop,
.alv-ed .std:hover>.pop {
   opacity: 1;
   transform: none
}

.alv-ed .std>.pop {
   top: calc(100% + 12px);
   bottom: auto;
   transform: translateY(-8px)
}

/* =====================================================================
   DIRECTION FEATURE (dark) — heading + framed plate
   ===================================================================== */
.alv-ed .feature-dir {
   background-color: var(--ivory);
   color: var(--ink);
   background-image: radial-gradient(rgba(60, 52, 24, .035) 1px, transparent 1px);
   background-size: 3px 3px;
   position: relative;
   padding: clamp(52px, 6vw, 96px) 0;
   overflow: hidden
}

.alv-ed .feature-dir .fd-head {
   text-align: center;
   max-width: 62ch;
   margin: 0 auto clamp(28px, 3.4vw, 42px);
   position: relative;
   z-index: 1
}

.alv-ed .feature-dir .fd-head .kick {
   color: var(--dgold);
   margin-bottom: 12px
}

.alv-ed .feature-dir .fd-plate {
   position: relative;
   z-index: 1;
   max-width: 1060px;
   margin: 0 auto
}

.alv-ed .feature-dir .plate-box.direction {
   padding-top: 22.5%
}

/* The frame is drawn on cream here, and the estate's `--gold-line` is a pale
   gold at .32 — written for the plates on the deep green, where it is the one
   light thing on the panel. Over ivory it is barely a line at all, so the
   Direction plate takes the page's own cream-ground ink: `--ink-faint` for the
   frame, which leaves it a shade under the .6 hairline the figure inside draws
   its two place cards with — the same order the dark plates keep, the card
   marginally stronger than the frame around it — and `--dgold` for the corner
   marks, which stay gold because they are the flourish rather than the frame.
   Scoped to this band: the Spiral and the map plates sit on the green, where
   the shared values are right. */
.alv-ed .feature-dir .plate-hero {
   border-color: var(--ink-faint)
}

.alv-ed .feature-dir .plate-hero .cn {
   border-color: var(--dgold);
   opacity: .9
}

/* =====================================================================
   EXPLORE (dark) — a mosaic: reading + a standing portrait + paths
   ===================================================================== */
.alv-ed .explore {
   position: relative;
   overflow: hidden
}

/* Two rows, four children — not two columns holding two things each.

   `.m-paths` heads itself with a gold rule, and the prose beside it now does
   the same; for one rule to read as one rule it has to be at one height on
   both sides. Two flex columns cannot do that: each stacks its own children
   and where the second of them begins is the column's own business, so the
   two rules landed wherever the map plate and the portrait happened to end —
   here within a dozen pixels of each other, which is worse than plainly
   apart, and a figure swapped for a taller one would move one and not the
   other. As grid rows, the row's height is settled once and both rules start
   from it by construction.

   Row 1 is `align-items: start`, so the map and the portrait top out level and
   the shorter of them leaves its gap ABOVE the rule rather than below its own
   top edge. The row gap is the one `.m-left` used between its two children;
   the column gap is unchanged. */
.alv-ed .mosaic {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1.32fr .68fr;
   column-gap: clamp(26px, 3.4vw, 54px);
   row-gap: clamp(22px, 2.6vw, 36px);
   align-items: start;
   margin-top: clamp(24px, 2.8vw, 38px)
}

/* Placed rather than auto-flowed, so source order can be the order a
   telephone reads them in — map, pathways, portrait, prose — while the grid
   puts the two figures side by side above the two blocks they belong to. */
.alv-ed .m-map {
   grid-area: 1 / 1
}

.alv-ed .m-paths {
   grid-area: 2 / 1
}

.alv-ed .m-fig {
   grid-area: 1 / 2
}

.alv-ed .m-prose {
   grid-area: 2 / 2
}

.alv-ed .m-fig img {
   width: 100%;
   aspect-ratio: 3/4;
   object-fit: cover;
   object-position: center 12%
}

/* The rule and the space under it are the two blocks' shared head, and that
   is the whole of what makes them align — said once so they cannot drift. */
.alv-ed .m-paths,
.alv-ed .m-prose {
   padding-top: clamp(20px, 2.4vw, 30px);
   border-top: 1px solid var(--gold-line)
}

/* The bar down the left edge, in the head rule's own hairline rather than the
   2px gold-to-transparent gradient it was drawn with — a weight and a colour
   between two marks meeting at one corner reads as two that failed to agree.

   It runs the lower half only, so it does NOT meet the rule above it: two
   hairlines closing a corner draw a box, which is the framed panel the
   editorial pages spend their rules avoiding. Held apart, the top rule heads
   the block and the bar marks the passage beside it, and they read as two
   marks of one hand rather than as three sides of something.

   Hence a gradient rather than a `border-left`, a border being all or none of
   an edge. `--m-bar` is where it starts: the background is a 1px column the
   height of the padding box, transparent above that point and the hairline
   below it. It sits on `.m-prose` rather than on the `.lead` inside because
   the padding box is what the bar is measured against — on the paragraph it
   would be half of the prose rather than half of the block. */
.alv-ed .m-prose {
   --m-bar: 25%;

   padding-left: 20px;
   background: linear-gradient(180deg,
         transparent 0 var(--m-bar),
         var(--gold-line) var(--m-bar) 100%) left / 1px 100% no-repeat
}

.alv-ed .m-prose .lead {
   color: var(--c62)
}

.alv-ed .m-paths .pk {
   margin-bottom: 14px;
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow);
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--gold)
}

/* The pathways are two of them, and the column is what says so: the Residency
   pathway on the left, the Instructor's Licence on the right, each a run of
   stages ending in the one page the reader can go and read today. They were a
   single `columns: 2` run of eight items, six of which are `.is-soon` spans
   the estate styles nowhere — so the two links were rows, the six were
   unstyled text running into them, and which stage belonged to which pathway
   was not said at all.

   The stages are the connected sequence the Residencies page draws with
   `.branchseq`. It is restated here rather than shared: residency.css is that
   page's own sheet and is not loaded on this one, and the dot differs of
   necessity — there it is a hole knocked in the line with the ground's flat
   colour, and this page's ground is a gradient, so the dot is drawn.

   The two columns are bottom-aligned so the two links sit on one line. They
   hold the same number of stages, so they would agree of their own accord at
   a wide measure; "Fellow International Training Visits" is what breaks it,
   wrapping in the left column at every width the right column does not. */
.alv-ed .paths {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   column-gap: clamp(28px, 4vw, 56px);
   align-items: end
}

.alv-ed .pcol {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.alv-ed .pathseq {
   position: relative;
   padding-left: 22px
}

.alv-ed .pathseq .bq-line {
   position: absolute;
   left: 4px;
   top: calc(6px + .75em);
   bottom: calc(6px + .75em);
   width: 1px;
   background: var(--gold-line)
}

.alv-ed .pathseq .is-soon {
   position: relative;
   display: block;
   font-family: var(--body);
   font-size: calc(clamp(14px, 1.15vw, 16px) * var(--fs-scale));
   line-height: 1.5;
   color: var(--c62);
   padding: 6px 0
}

/* 7px plus a 1px border is a 9px box; the line sits at 4px, so a bullet
   starting 22px left of the text — the padding — is centred on it. */
.alv-ed .pathseq .is-soon::before {
   content: "";
   position: absolute;
   left: -22px;
   top: calc(6px + .75em - 4px);
   width: 7px;
   height: 7px;
   border: 1px solid var(--gold-line);
   border-radius: 50%;
   background: var(--dgold);
   opacity: .75
}

.alv-ed .paths a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 14px;
   font-family: var(--body);
   font-size: calc(clamp(16px, 1.4vw, 19px) * var(--fs-scale));
   color: var(--c80);
   padding: 12px 8px 12px 0;
   border-bottom: 1px solid var(--gold-line);
   transition: color .3s, padding-left .3s, background .3s
}

/* `.q-cta` — the way through, standing under the quotation that closes the
   band. Centred on the wrap's full measure, as the quote above it is: the two
   are one closing gesture and would read as two if they shared no axis.

   It is a wrapper rather than a class on the link because the centring and the
   link are different jobs — `text-align` needs a box the width of the measure,
   and the link is `inline-block` (from `.kick`) so it hugs its own words and
   the hover's wash and slide stay on the sentence rather than crossing a
   thousand pixels of empty line.

   The hover itself is the same invitation as the two closing the pathways, so
   it is added to their rules below rather than given a set of its own — two
   gestures written twice is how they come to differ after one is tuned. What
   it does NOT take is the row: the flex, the rule beneath and the 12px of
   vertical padding belong to a list of these, and this one stands alone. So
   its base is only what the hover needs to move — something to slide, and a
   transition to slide it. The arrow is the rule's own `::after`, which is why
   there is no `<span class="ar">` in the markup as `.tlink` would carry. */
.alv-ed .q-cta {
   margin-top: clamp(18px, 2vw, 26px);
   text-align: center
}

.alv-ed .q-cta a.kick {
   padding: 2px 0;
   transition: color .3s, padding-left .3s, background .3s
}

/* the flex row spaces the arrow with its `gap`; an inline link has to say so */
.alv-ed .q-cta a.kick::after {
   margin-left: 10px
}

.alv-ed .paths a::after,
.alv-ed .q-cta a.kick::after {
   content: "\2192";
   color: var(--gold);
   font-family: var(--body);
   font-size: var(--fs-ui);
   opacity: 0;
   transition: opacity .3s, transform .3s;
   transform: translateX(-6px)
}

.alv-ed .paths a:hover,
.alv-ed .q-cta a.kick:hover {
   color: var(--gold-soft);
   padding-left: 10px;
   background: linear-gradient(90deg, rgba(184, 150, 46, .08), transparent)
}

.alv-ed .paths a:hover::after,
.alv-ed .q-cta a.kick:hover::after {
   opacity: 1;
   transform: none
}

@media(max-width:940px) {
   .alv-ed .paths {
      grid-template-columns: 1fr;
      align-items: start;
      row-gap: clamp(18px, 2.4vw, 26px)
   }
}

/* =====================================================================
   PATH TO FELLOWSHIP (dark) — the climax: portrait + the six standards
   rendered as the Fellows v18 editorial criteria that complete the seal.
   ===================================================================== */
/* overflow visible so the detail pop-ups are never clipped; only the wash is clipped */
.alv-ed .fellowship {
   position: relative;
   overflow: visible;
   background: radial-gradient(120% 120% at 50% 100%, #17331f, #0f2417 72%);
   /* the band's two terms, and see the note above `.bgwash` below:
      the gap above the picture -- `.sec.tight`'s rhythm (main.css) plus
      `.figblock`'s top margin (alvara-editorial.css) */
   --wash-gap: calc(clamp(30px, 4vw, 58px) + clamp(12px, 1.5vw, 22px));
   /* and the picture -- 4:5 of the 45% column `.figblock.beside` gives it,
      of the `.wrap` measure. Two columns is the only arrangement the band is
      drawn in; see the collapse below */
   --wash-photo: calc(1.25 * .45 * (min(1200px, 100vw) - 2 * clamp(24px, 5vw, 80px)))
}

/* AND BELOW THE COLLAPSE THERE IS NO BAND. The block goes to one column, so
   the picture is followed by its own prose rather than standing beside it,
   and a band ending a gap under the picture ends in the middle of the text --
   at 500px it fell across "The route to Fellowship", which is a join drawn
   through a kicker. Sizing it to the picture AND the prose is not something
   CSS can be told: the height of a text column is the text's. The wash was a
   texture behind the top of the section rather than anything the page says,
   so on one column it goes and the section's own gradient stands alone. */
@media(max-width:900px) {
   .alv-ed .fellowship .bgwash {
      display: none
   }
}

/* THE BAND IS THE PHOTOGRAPH'S, so its height is said in the photograph's own
   terms. It was `min(62%, 660px)`: a proportion of a section whose height is
   set by how long the six standards happen to run, and a fixed number that
   knows nothing about the picture at all. Neither tracks the portrait, so the
   two agreed at no width -- at 1440 the picture's foot came out thirteen
   pixels PAST the band's edge, which put the join across the bottom of the
   photograph, and at 1000 the band stood a hundred pixels below it.

   The picture is centred on the band when the band is the gap above the
   picture, the picture, and that gap again. Each of the three is borrowed:
   the gap is `.sec.tight`'s rhythm (main.css) plus `.figblock`'s top margin,
   and the picture is 4:5 (the rule below) of the 45% column
   `.figblock.beside` gives it (both alvara-editorial.css) of the `.wrap`
   measure. Four numbers restated from two other sheets is the cost of the
   picture being centred at every width rather than at one; each is named
   beside the term that carries it, and any of them drifting shows up as the
   band cutting the photograph again, which is what it looked like before.

   `min(1200px, 100vw)` is the wrap's own cap. `vw` rather than `%` because a
   percentage inside a custom property that ends up in `height` resolves
   against the containing block's HEIGHT; the few pixels a classic scrollbar
   adds are worth less than that trap. */
.alv-ed .fellowship .bgwash {
   bottom: auto;
   height: calc(var(--wash-photo) + 2 * var(--wash-gap));
   overflow: hidden
}

/* the photograph reads in full colour across the top, resolving to green for the criteria */
.alv-ed .fellowship .bgwash img {
   opacity: .5;
   filter: none
}

.alv-ed .fellowship .bgwash .v {
   background: linear-gradient(180deg, rgba(9, 22, 14, .28) 0%, rgba(11, 30, 19, .34) 34%, rgba(14, 38, 24, .7) 72%, #12301e 100%)
}

/* THE BLOCK IS THE ESTATE'S `.figblock.beside`, and what is left here is the
   two things the shared setting cannot know.

   It carried a `.fgrid` of its own -- a .9fr/1.1fr grid, its own gap, its own
   collapse -- which is within a hair of the shared 45%/1fr and was a second
   opinion about it in a sheet only this page loads. Three `.fellowship .fh …`
   rules and four `.fh .plaque` ones went with it: the text column's class had
   already been lost from the markup, so all seven were dressing nothing.

   The photograph stands ABOVE THE WASH, which is what the grid's
   `position/z-index` were for. `.bgwash` is `position:absolute` inside the
   section and comes first, so an untouched block would render behind it. */
.alv-ed .fellowship .figblock {
   position: relative;
   z-index: 1
}

/* The estate's portrait shape, 4:5 -- the home page's plates and every
   photograph in a `.figblock` on the Fellows. That rule is in fellows.css and
   this page does not load it, so the ratio is restated here rather than the
   picture rendering at whatever it was shot. The crop is the picture's own and
   is written inline beside it, as the Fellows' are. */
.alv-ed .fellowship .figblock .hph img {
   aspect-ratio: 4/5
}

.alv-ed .std {
   counter-increment: st;
   position: relative;
   padding: clamp(24px, 2.6vw, 34px) 4px;
   border: 0;
   border-bottom: 1px solid var(--gold-line);
   background: none;
   transition: none
}

.alv-ed .std::after {
   content: none
}

.alv-ed .std:hover {
   border-color: var(--gold-line)
}

/* the numerals read in white; gold is held for the labels and rule */
.alv-ed .std .stn {
   font-family: var(--word);
   font-weight: 500;
   font-size: clamp(34px, 3.4vw, 50px);
   color: var(--cream);
   line-height: .82;
   display: block;
   transition: color .5s, text-shadow .5s
}

.alv-ed .std .st-l {
   display: block;
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow);
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--gold);
   margin: 14px 0 8px
}

.alv-ed .std p {
   font-family: var(--body);
   font-weight: 400;
   font-size: calc(clamp(15.5px, 1.4vw, 17px) * var(--fs-scale));
   color: var(--c80);
   line-height: 1.5
}

.alv-ed .std .more {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow-sm);
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--gold);
   margin-top: 14px;
   display: inline-block;
   opacity: .66
}

.alv-ed .std:hover .stn {
   color: #7fb98a;
   text-shadow: 0 0 18px rgba(90, 160, 110, .45)
}

.alv-ed .standards {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0 clamp(30px, 4vw, 64px);
   margin-top: clamp(36px, 4.2vw, 60px);
   border-top: 1px solid var(--gold-line);
   counter-reset: st
}

/* detail pop-ups sit above everything; the lower row opens upward so nothing is clipped */
.alv-ed .fellowship .std>.pop {
   z-index: 90
}

.alv-ed .fellowship .standards .std:nth-child(n+4)>.pop {
   top: auto;
   bottom: calc(100% + 12px);
   transform: translateY(8px)
}

.alv-ed .fellowship .standards .std:nth-child(n+4):hover>.pop {
   transform: none
}

/* the six standards sit on a cream leaf; each returns to green on hover */
.alv-ed .fellowship .standards {
   background: var(--ivory);
   color: var(--ink);
   border: 1px solid var(--paper-rule);
   padding: clamp(30px, 3.6vw, 52px) clamp(28px, 3.4vw, 52px) clamp(12px, 1.6vw, 24px);
   gap: 0 clamp(34px, 4.4vw, 68px)
}

/* THE LEAF BEGINS BELOW THE BAND, never across its foot. The shared
   `clamp(36px, 4.2vw, 60px)` puts its top edge 60px under the photograph and
   the band's foot 79px under it, so the leaf's own gold rule crossed the join
   between the wash and the green beneath it -- two horizontal lines a
   nineteenth of an inch apart, each of which is the top of something. So the
   gap is the band's `--wash-gap` (the leaf sits at the band's foot, the
   figure being the taller of the block's two columns) and then the leaf's own
   clearance beneath it. The section grows by the difference, which is what
   was wanted: the leaf is a new page, not the foot of this one.

   Above the collapse only, which is where the band is drawn: below it there
   is nothing for the leaf to stand clear of, and the shared rhythm is right
   as it stands. */
@media(min-width:901px) {
   .alv-ed .fellowship .standards {
      margin-top: calc(var(--wash-gap) + clamp(24px, 2.4vw, 40px))
   }
}

.alv-ed .fellowship .std {
   border-bottom: 1px solid var(--paper-rule)
}

.alv-ed .fellowship .std .stn {
   color: #243019
}

.alv-ed .fellowship .std .st-l {
   color: var(--dgold)
}

.alv-ed .fellowship .std p {
   color: var(--ink-soft)
}

.alv-ed .fellowship .std .more {
   color: var(--dgold)
}

.alv-ed .fellowship .std:hover .stn {
   color: #2f6b45;
   text-shadow: none
}

/* the hover note is a dark card — reinstate its cream writing so it reads on green */
.alv-ed .fellowship .std .pop .pt {
   color: var(--gold-soft)
}

.alv-ed .fellowship .std .pop p {
   color: var(--cream)
}

.alv-ed .fellowship .std .pop .pk {
   color: var(--gold-soft)
}

/* =====================================================================
   WITHIN (cream) — the whole study as an editorial grid
   ===================================================================== */
.alv-ed .within-grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: clamp(24px, 2.8vw, 40px) clamp(20px, 2.4vw, 32px);
   margin-top: clamp(30px, 3.4vw, 48px)
}

.alv-ed .wcard {
   position: relative;
   border: 0;
   background: none;
   transition: transform .3s;
   display: flex;
   flex-direction: column
}

.alv-ed .wcard::after {
   content: none
}

.alv-ed .wcard:hover {
   transform: translateY(-3px);
   z-index: 60
}

.alv-ed .wcard .wshot {
   cursor: zoom-in;
   position: relative;
   overflow: hidden;
   border: 1px solid var(--gold-line)
}

.alv-ed .wcard .wshot img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   transition: transform .5s;
   filter: none
}

.alv-ed .wcard:hover .wshot img {
   transform: scale(1.04)
}

/* per-card framing so each screenshot / face reads well */
.alv-ed .within-grid .wcard:nth-child(4) .wshot img {
   object-position: center 88%
}

/* Bands — show the branch grades/completion */
.alv-ed .within-grid .wcard:nth-child(5) .wshot img {
   object-position: center top
}

/* College Record — from the top of the page */
.alv-ed .within-grid .wcard:nth-child(9) .wshot img {
   object-position: center top
}

/* Journal — masthead */
.alv-ed .within-grid .wcard:nth-child(11) .wshot img {
   object-position: center 26%
}

/* Fellow training — the face */
.alv-ed .within-grid .wcard:nth-child(12) .wshot img {
   object-position: center 14%
}

/* Fellowship — the rider's face */
/* photographs in full colour — only the faintest foot to seat them */
.alv-ed .wcard .wshot .vv {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 62%, rgba(12, 24, 16, .24))
}

.alv-ed .wcard .wbody {
   padding: 16px 0 0;
   display: flex;
   flex-direction: column;
   flex: 1
}

.alv-ed .wcard .wt {
   font-family: var(--word);
   font-weight: 500;
   font-size: clamp(22px, 1.6vw, 23px);
   color: var(--ink);
   line-height: 1.1;
   letter-spacing: .01em
}

.alv-ed .wcard .rule {
   margin: 11px 0 12px;
   background: var(--gold);
   opacity: .7
}

.alv-ed .wcard .teaser {
   font-family: var(--body);
   font-size: var(--fs-note);
   color: var(--ink-soft);
   line-height: 1.55;
   flex: 1
}

.alv-ed .wcard .inc {
   color: var(--dgold);
   font-style: italic;
   font-size: var(--fs-label-alt);
   display: block;
   margin-top: 12px
}

.alv-ed .tiers3 {
   display: flex;
   gap: 6px;
   margin-top: 14px;
   flex-wrap: wrap
}

.alv-ed .tiers3 b {
   position: relative;
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow-sm);
   letter-spacing: .1em;
   text-transform: uppercase;
   padding: 3px 8px;
   border: 1px solid rgba(60, 50, 20, .28);
   color: rgba(60, 50, 20, .5);
   border-radius: 2px;
   line-height: 1.3
}

.alv-ed .tiers3 b.c.on {
   color: #faf6ea;
   background: #7c6526;
   border-color: #7c6526
}

.alv-ed .tiers3 b.g.on {
   color: #faf6ea;
   background: #9a7d2f;
   border-color: #9a7d2f
}

.alv-ed .tiers3 b.m.on {
   color: #2a2208;
   background: #c8a94e;
   border-color: #c8a94e
}

.alv-ed .tiers3 b.lite {
   background: transparent;
   text-decoration: line-through;
   text-decoration-thickness: 1px
}

.alv-ed .tiers3 b.c.lite {
   color: #7c6526;
   border-color: rgba(124, 101, 38, .5)
}

.alv-ed .tiers3 b.g.lite {
   color: #9a7d2f;
   border-color: rgba(154, 125, 47, .5)
}

.alv-ed .tiers3 b.m.lite {
   color: #a9852a;
   border-color: rgba(169, 133, 42, .5)
}

.alv-ed .tiers3 b.off {
   color: rgba(60, 50, 20, .4);
   border-color: rgba(60, 50, 20, .2)
}

.alv-ed .tiers3 b.off::after {
   content: "\2715";
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #b0402f;
   font-size: var(--fs-label);
   font-weight: 700
}

.alv-ed .within-legend {
   position: relative;
   z-index: 1;
   margin-top: clamp(8px, 1vw, 14px);
   display: flex;
   flex-wrap: wrap;
   gap: clamp(16px, 2.2vw, 30px);
   align-items: center;
   font-family: var(--body);
   font-size: var(--fs-meta);
   color: var(--ink-soft)
}

.alv-ed .within-legend .wl-t {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow);
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--dgold)
}

.alv-ed .within-legend .li {
   display: inline-flex;
   align-items: center;
   gap: 9px
}

.alv-ed .within-legend .tiers3 {
   margin: 0
}

/* =====================================================================
   WITHIN THE MEMBERSHIP — flipped back to a green passage.

   The section's markup was always the green arrangement (`.sec.tone` over a
   `.bgwash.dark`); what made it cream was membership.css naming it in the
   five background rules and the eight typography groups beside `#fellows`
   and `#memberships`. Those are gone, so the section falls through to the estate's
   green like any other, and what is left is that its own components -- the
   fourteen cards, the legend and the tier chips -- were written cream-native
   rather than merely overridden: `--ink` on a title, `--dgold` on a rule,
   and a set of chip colours spelled out as dark literals.

   THE REPAINT IS SCOPED TO `#within`, NOT WRITTEN ONTO THE COMPONENTS. Every
   class here is used only in this section today, so editing the component
   rules would have worked -- but `.pop`, `.std` and `.st-l` belong to the
   Founding Fellows arrangement that is parked in the template just now, and
   a repaint written onto the class would be waiting for it when it comes
   back. Scoped, this section can be flipped again by deleting one block.

   The chips are the one set that cannot be translated token by token. On
   paper they ran three depths of dark gold on a light ground -- #7c6526,
   #9a7d2f, #c8a94e -- and read as a ladder because each was darker than the
   paper behind it. Inverted, the ladder has to run the other way: the same
   three steps become increasingly light against the green, so Mentored is
   still the brightest of the three and Core still the quietest.
   ===================================================================== */
.alv-ed #within .wcard .wt {
   color: var(--cream)
}

.alv-ed #within .wcard .teaser,
.alv-ed #within .within-legend {
   color: rgba(242, 237, 224, .74)
}

.alv-ed #within .wcard .inc,
.alv-ed #within .within-legend .wl-t {
   color: var(--gold-soft)
}

/* =====================================================================
   MORE — the card's fold, in place of the hover note.

   `.pop` was an absolutely-positioned panel revealed on `:hover`, and three
   things were wrong with it beyond taste. It could not be reached at all on
   a touch screen or by a keyboard, so a quarter of the section's writing was
   simply unavailable to those readers; it had to be *placed*, which is why
   the thirteenth and fourteenth cards carried rules flipping their panel
   below them for want of room above; and the label said "Hover for more",
   which is an instruction that is false on a telephone. A `<details>` has
   the disclosure behaviour built in -- click, Enter, Space, and the right
   announcement -- opens in place, so nothing needs placing, and needs no
   script. All of that CSS went with it.

   IT IS THE SAME CONTROL AS THE MEMBERSHIP CARDS' `.thold`, drawn again
   rather than shared: this one is the design's full-width summary with a
   hairline over it and sits at the foot of a card, that one is a bordered
   box inside one. What they must agree on is the marker, and they do -- a
   bar and a bar with the upright scaled away when open, which is also the
   comparison accordion's. Three folds on the page, one way of saying "there
   is more of this".
   ===================================================================== */
.alv-ed #within .wfold {
   margin-top: auto
}

.alv-ed #within .wsum {
   list-style: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   width: 100%;
   padding: 14px 0;
   margin-top: 13px;
   text-align: left;
   border-top: 1px solid rgba(184, 150, 46, .22);
   transition: border-color .3s
}

.alv-ed #within .wsum::-webkit-details-marker {
   display: none
}

.alv-ed #within .wsum:hover {
   border-top-color: var(--gold-soft)
}

.alv-ed #within .wsum:focus-visible {
   outline: 1px solid var(--gold-soft);
   outline-offset: 3px
}

.alv-ed #within .wsum-t {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-micro);
   letter-spacing: .22em;
   text-transform: uppercase;
   color: rgba(242, 237, 224, .62);
   transition: color .3s
}

.alv-ed #within .wsum:hover .wsum-t {
   color: var(--cream)
}

.alv-ed #within .wsum-m {
   position: relative;
   display: block;
   width: 22px;
   height: 22px;
   flex: 0 0 auto;
   border: 1px solid var(--gold-line);
   border-radius: 2px
}

.alv-ed #within .wsum-m::before,
.alv-ed #within .wsum-m::after {
   content: "";
   position: absolute;
   background: var(--gold-soft);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%)
}

.alv-ed #within .wsum-m::before {
   width: 10px;
   height: 1px
}

.alv-ed #within .wsum-m::after {
   height: 10px;
   width: 1px;
   transition: transform .3s
}

.alv-ed #within .wfold[open] .wsum-m::after {
   transform: translate(-50%, -50%) scaleY(0)
}

/* the note itself keeps the panel it had as a popover -- the gold left rule
   and the dark ground are what set it apart from the card it belongs to,
   and it needs that more now that it stands in the flow rather than over it */
.alv-ed #within .wnote {
   border-left: 2px solid var(--gold);
   /* background: linear-gradient(168deg, #1c4029, #0e2518 82%); */
   padding: 18px 20px;
   margin-bottom: 4px
}

.alv-ed #within .wnote .pt {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-eyebrow);
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--gold-soft);
   margin-bottom: 12px;
   padding-bottom: 11px;
   border-bottom: 1px solid var(--gold-line)
}

.alv-ed #within .wnote p {
   font-family: var(--body);
   font-size: var(--fs-note-alt);
   line-height: calc(1.66 * var(--lh-scale));
   color: var(--cream);
   margin: 0;
   text-wrap: pretty
}

/* the panel grows rather than appears, as the Membership cards' fold and the
   comparison accordion both do */
@media(prefers-reduced-motion: no-preference) {

   .alv-ed #within .wfold {
      interpolate-size: allow-keywords
   }

   .alv-ed #within .wfold::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .34s cubic-bezier(.22, .61, .36, 1),
         content-visibility .34s allow-discrete,
         overflow .34s allow-discrete
   }

   .alv-ed #within .wfold[open]::details-content {
      block-size: auto;
      overflow: visible
   }
}

/* the chip's resting state: an empty outline on green */
.alv-ed #within .tiers3 b {
   border-color: rgba(242, 237, 224, .26);
   color: rgba(242, 237, 224, .5)
}

/* FILLED — INCLUDED AT THAT LEVEL, AND THE THREE ARE TOLD APART BY HUE.

   They ran three depths of gold -- #8f7530, #b3933d, #C9A94A -- which is a
   ladder in lightness alone, and at chip size the first two are one colour.
   Every other place on the page that names the three tiers separates them the
   same way and it is not by lightness: the Membership cards' top rules are
   `--ink-faint`, `#3f6b4e` and `--gold`, and the comparison table's columns
   are a paper tint, `rgba(63,107,78,.09)` and `rgba(201,169,74,.13)` --
   neutral, sage, gold. The chips say it that way too now, so a reader who has
   learnt the ladder once has learnt it everywhere.

   The values are the mockup's own for a dark ground, which is what this
   section is again: `rgba(242,237,224,.55)`, `#7EA88E` and `#C9A63C` are the
   three top rules its tier cards carry. The sage is the one that could not
   come across to the comparison table -- a light on dark, invisible on cream,
   which is why that table carries `#3f6b4e` instead. Here it is at home. */
.alv-ed #within .tiers3 b.c.on {
   color: #12251a;
   background: rgba(242, 237, 224, .55);
   border-color: rgba(242, 237, 224, .55)
}

.alv-ed #within .tiers3 b.g.on {
   color: #12251a;
   background: #7ea88e;
   border-color: #7ea88e
}

.alv-ed #within .tiers3 b.m.on {
   color: #12251a;
   background: var(--gold-soft);
   border-color: var(--gold-soft)
}

/* one line — a lesser version at that level, outlined in its own hue */
.alv-ed #within .tiers3 b.c.lite {
   color: rgba(242, 237, 224, .72);
   border-color: rgba(242, 237, 224, .4)
}

.alv-ed #within .tiers3 b.g.lite {
   color: #7ea88e;
   border-color: rgba(126, 168, 142, .55)
}

.alv-ed #within .tiers3 b.m.lite {
   color: var(--gold-soft);
   border-color: rgba(201, 169, 74, .6)
}

/* not available at that level */
.alv-ed #within .tiers3 b.off {
   color: rgba(242, 237, 224, .34);
   border-color: rgba(242, 237, 224, .18)
}

/* the cross stays the one warm signal on the page that is not gold, and is
   lifted off the paper value -- #b0402f is a red for cream and goes muddy on
   green */
.alv-ed #within .tiers3 b.off::after {
   color: #d4644f
}

/* =====================================================================
   FAQ (dark) — a two-column editorial index
   ===================================================================== */
.alv-ed .faq {
   position: relative;
   z-index: 1;
   columns: 2;
   column-gap: clamp(36px, 5vw, 76px);
   margin-top: clamp(28px, 3.2vw, 44px)
}

.alv-ed .faq details {
   break-inside: avoid;
   border-bottom: 1px solid var(--gold-line)
}

.alv-ed .faq summary {
   cursor: pointer;
   list-style: none;
   padding: 18px 30px 18px 0;
   position: relative;
   font-family: var(--word);
   font-weight: 500;
   font-size: 20px;
   color: var(--cream)
}

.alv-ed .faq summary::-webkit-details-marker {
   display: none
}

.alv-ed .faq summary::after {
   content: "+";
   position: absolute;
   right: 2px;
   top: 16px;
   color: var(--gold);
   font-size: 20px
}

.alv-ed .faq details[open] summary::after {
   content: "\2013"
}

.alv-ed .faq .a {
   font-family: var(--body);
   font-size: var(--fs-ui);
   color: var(--c62);
   padding: 0 0 20px;
   line-height: calc(1.6 * var(--lh-scale))
}

/* =====================================================================
   CLOSING (.close) — the Fellows v18 sign-off: seal, no box, over photo
   ===================================================================== */
/* content sits low, close to the footer; no dark panel — the photograph carries it,
   the reading leads, the cursive line follows smaller on two lines */
.alv-ed .close {
   position: relative;
   min-height: 88svh;
   display: flex;
   align-items: flex-end;
   text-align: center;
   overflow: hidden
}

.alv-ed .close .bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: none
}

.alv-ed .close .veil {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(8, 20, 13, .12), rgba(8, 18, 12, .04) 28%, rgba(8, 18, 12, .5) 64%, rgba(6, 14, 9, .93))
}

.alv-ed .close .inner {
   position: relative;
   z-index: 3;
   width: 100%;
   padding: 0 0 clamp(30px, 6vh, 66px);
   display: flex;
   flex-direction: column;
   align-items: center
}

.alv-ed .close .inner::before {
   content: none
}

.alv-ed .close .seal {
   order: 1;
   width: clamp(74px, 6.6vw, 96px);
   margin: 0 auto 22px;
   filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .6))
}

.alv-ed .close .body {
   order: 2;
   max-width: 62ch;
   margin: 0 auto
}

.alv-ed .close .body p {
   color: var(--cream);
   font-size: var(--fs-body-sm);
   line-height: calc(1.72 * var(--lh-scale));
   text-shadow: 0 2px 16px rgba(0, 0, 0, .82), 0 1px 3px rgba(0, 0, 0, .7)
}

.alv-ed .close .q {
   order: 3;
   font-family: var(--word);
   font-weight: 500;
   font-style: italic;
   font-size: calc(clamp(17px, 1.7vw, 22px) * var(--fs-scale));
   line-height: 1.36;
   color: var(--cream);
   max-width: 36ch;
   margin: clamp(16px, 2vw, 24px) auto 0;
   text-shadow: 0 3px 22px rgba(0, 0, 0, .75)
}

.alv-ed .close .btn {
   order: 4;
   margin-top: clamp(22px, 2.6vw, 32px)
}

/* =====================================================================
   THE ALVARÁ SPIRAL — the 2026-08-27 design (`.spiral-b`), standing above
   the section the page already carried so the two can be read against each
   other. Both are live; when one is chosen the other goes, and this whole
   block goes with whichever loses.

   Repainted from the design's literals into the estate's green-passage
   tokens: `#F2EDE0` is `--cream`, `#C9A63C` is `--gold-soft`, and the four
   `rgba(184,150,46,…)` hairlines are written out at their own alphas rather
   than reaching for `--gold-line` (.32), a `var()` carrying no alpha of its
   own without `color-mix`. The one literal kept is the Governing Principle
   cell's ground: it has to be opaque, since the 1px grid gaps are what draw
   the rules between the four, and it sits over the section's photographic
   wash. `--green-deep` is that colour to within a shade.

   THE PLATE IS BLED WIDER THAN ITS COLUMN, and the negative margins are the
   design's own. They are not decoration: the drawing's labels are SVG user
   units over its viewBox, so what they render at follows the frame's width --
   held to the column at 398px the Branch names come out around seven pixels.
   Width is the only lever a figure has, which is why the design reaches past
   its column here and why the same 14% is worth carrying across.

   THE ARTWORK IS THE ESTATE'S PLATE, NOT THE DESIGN'S IMAGE. The mockup
   carries a 2.6 MB PNG in that slot, and it is a screen-grab of
   `alvara-spiral-transparent.html` caught part-drawn -- three turns, no
   Branch labels, on a black ground the design then has to hide. The plate
   itself is a few kilobytes, finishes its own drawing, is transparent over
   whatever is behind it and is already in the estate. There is nothing the
   photograph of it can do that it cannot.

   THE INTRO RUNS THE WRAP, NOT THE MEASURE, and it says so in main.css
   rather than here. The standfirst is `.body p-wide`: the estate's prose,
   the estate's gold opening capital, and the 74ch cap lifted because a
   reading column above a full-width component reads as two things set
   separately. `.p-wide` is the College's `.introwide` named for what it does
   and moved somewhere every page can reach it.
   ===================================================================== */
.alv-ed .spiral-b .sb-main {
   display: grid;
   grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr);
   gap: clamp(32px, 5vw, 60px);
   margin-top: clamp(34px, 4.4vw, 56px);
   align-items: start
}

/* the drawing and the Principles beside it stay with the reader down the
   three Branches, which is the whole of why the column is split this way --
   the Principles are what the Branches are being read against */
.alv-ed .spiral-b .sb-aside {
   position: sticky;
   top: 96px
}

.alv-ed .spiral-b .sb-plate {
   position: relative;
   margin: -4% -6% 0 -8%
}

.alv-ed .spiral-b .sb-plate::before {
   content: "";
   position: absolute;
   inset: 6%;
   background: radial-gradient(closest-side, rgba(201, 169, 74, .13), transparent 70%)
}

.alv-ed .spiral-b .sb-gp {
   margin-top: 26px;
   padding: 24px 26px;
   border: 1px solid rgba(184, 150, 46, .26);
   background: rgba(242, 237, 224, .025)
}

.alv-ed .spiral-b .sb-k {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-micro);
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--gold-soft)
}

/* four names in a two-by-two, ruled by the grid's own gaps -- which is why
   the cells are opaque and the panel behind them is the rule colour */
.alv-ed .spiral-b .sb-gp-grid {
   list-style: none;
   margin: 16px 0 0;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   background: rgba(184, 150, 46, .2);
   border: 1px solid rgba(184, 150, 46, .2)
}

.alv-ed .spiral-b .sb-gp-grid li {
   background: var(--green-deep);
   padding: 15px 16px;
   font-family: var(--word);
   font-size: var(--fs-note-alt);
   color: var(--cream)
}

.alv-ed .spiral-b .sb-gp p {
   font-family: var(--body);
   font-size: var(--fs-note);
   line-height: 1.8;
   color: rgba(242, 237, 224, .66);
   margin: 18px 0 0;
   text-wrap: pretty
}

/* A DEFINITION LIST, BECAUSE THAT IS WHAT IT IS: three named things and what
   each one holds. The design draws it as nested grid divs; the reader's own
   Introduction settled the same question the same way -- anything setting out
   a named thing and its meaning gets a `dl`. The rows are wrapped so each
   `dt`/`dd` pair is one grid, which a bare `dl` cannot express. */
.alv-ed .spiral-b .sb-branches {
   border-top: 1px solid rgba(184, 150, 46, .28);
   margin: 0
}

.alv-ed .spiral-b .sb-row {
   display: grid;
   grid-template-columns: minmax(170px, .5fr) 1fr;
   gap: clamp(18px, 2.2vw, 28px);
   padding: 26px 0;
   border-bottom: 1px solid rgba(184, 150, 46, .22)
}

.alv-ed .spiral-b .sb-row dt {
   font-family: var(--word);
   font-size: var(--fs-body);
   color: var(--cream)
}

.alv-ed .spiral-b .sb-row dt span {
   display: block;
   font-size: var(--fs-label);
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--gold-soft);
   margin-top: 8px
}

.alv-ed .spiral-b .sb-row dd {
   margin: 0;
   font-family: var(--body);
   font-size: var(--fs-note-alt);
   line-height: 1.8;
   color: rgba(242, 237, 224, .74);
   text-wrap: pretty
}

.alv-ed .spiral-b .sb-p {
   font-family: var(--body);
   font-size: var(--fs-note-alt);
   line-height: 1.85;
   color: rgba(242, 237, 224, .74);
   margin: 0 0 18px;
   text-wrap: pretty
}

.alv-ed .spiral-b .sb-p:first-of-type {
   margin-top: 32px
}

.alv-ed .spiral-b .sb-p b {
   font-weight: 600;
   color: var(--cream)
}

.alv-ed .spiral-b .sb-body .tlink {
   margin-top: 12px
}

.alv-ed .spiral-b .sb-record {
   margin-top: clamp(44px, 5.6vw, 72px);
   padding-top: clamp(24px, 2.8vw, 36px);
   border-top: 1px solid rgba(184, 150, 46, .3);
   display: grid;
   grid-template-columns: minmax(280px, .85fr) minmax(320px, 1.15fr);
   gap: clamp(32px, 5vw, 60px);
   align-items: start
}

.alv-ed .spiral-b .sb-rec-lead {
   font-family: var(--word);
   font-size: clamp(23px, 2.3vw, 31px);
   line-height: 1.4;
   color: var(--cream);
   margin: 18px 0 0;
   text-wrap: pretty
}

.alv-ed .spiral-b .sb-rec-body {
   font-family: var(--body);
   font-size: var(--fs-body-sm);
   line-height: 1.9;
   color: rgba(242, 237, 224, .74);
   margin: 0;
   text-wrap: pretty
}

/* THE ASIDE STOPS BEING AN ASIDE WHEN IT STOPS BEING BESIDE ANYTHING. Sticky
   is what keeps the drawing with the Branches in two columns; in one it would
   pin a full-width plate to the top of the viewport and the reader would
   scroll the text out from under it. The estate collapses at 820px, and both
   two-column grids here go at the same width -- a section half collapsed is
   the one arrangement neither design was drawn for. */
@media(max-width:820px) {

   .alv-ed .spiral-b .sb-main,
   .alv-ed .spiral-b .sb-record {
      grid-template-columns: 1fr
   }

   .alv-ed .spiral-b .sb-aside {
      position: static
   }

   /* THE BLEED GOES WITH THE COLUMN IT WAS WIDENING. Reaching 8% past a 380px
      aside buys the drawing its legibility; reaching 8% past the full measure
      puts it 18px off the left edge, where `.alv-ed`'s `overflow-x: clip`
      trims it without a scrollbar, an error or anything in a status code --
      just a plate missing its left edge on a tablet. Full width it needs no
      help. */
   .alv-ed .spiral-b .sb-plate {
      margin: 0
   }

   .alv-ed .spiral-b .sb-row {
      grid-template-columns: 1fr;
      gap: 10px
   }
}

/* =====================================================================
   WHAT EACH MEMBERSHIP HOLDS — the 2026-08-27 design's comparison, as a
   real table, repainted onto paper.

   IT IS A `<table>`, NOT THE DESIGN'S GRID OF DIVS. The mockup writes it as
   `sc-raw-table`/`sc-raw-tr`/`sc-raw-td` -- the canvas editor's escaped
   spelling of the very tags it means -- so the shape was already a table and
   only the names were not. Seventeen rows against three columns is exactly
   what a table is for, and what it buys is not tidiness: a screen reader
   announces "Guided, The Training Residency, opens when its standard is met"
   because the row and column headers are `<th>` with `scope`. Read off a grid
   of divs the same cell is the word "opens", alone.

   THE MARKS ARE DRAWN BY CSS AND NAMED IN THE MARKUP. `.cmp-m` carries no
   text; its glyph is `content` on `::before` and the meaning is a
   `.visually-hidden` span beside it. A bare "✓" is announced as "check mark"
   or, in several readers, as nothing at all -- and "—" as nothing at all in
   all of them, so the column that says *not at this step* would simply be
   silent. Written this way the cell reads "Held" and the glyph stays a glyph.

   REPAINTED, NOT COPIED, as everywhere on this page: `#0B1F19` becomes
   `--ivory`, `#F2EDE0` becomes `--ink`, and the four hairline alphas become
   `--paper-rule`. Two column tints have to be re-chosen rather than
   translated -- the design lifts Guided with `rgba(126,168,142,.18)` and
   Mentored with `rgba(201,166,60,.16)`, both lights on a dark ground, and a
   light laid on cream is invisible. They become a wash of the same two
   colours the tier cards use for their top rules, so the table's columns and
   the cards above it are told apart the same way.

   THE SCROLLER IS FOCUSABLE ON PURPOSE. `overflow-x: auto` on a div makes a
   region only a mouse can reach; `tabindex="0"` with `role="region"` and a
   name is what lets a keyboard scroll it, and is why the caption exists at
   all rather than being folded into the heading above.
   ===================================================================== */
.alv-ed .cmp-b .cmp-key {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   margin: clamp(20px, 2.4vw, 30px) 0 clamp(24px, 3vw, 34px);
   padding: 16px 22px;
   border-top: 1px solid var(--paper-rule);
   border-bottom: 1px solid var(--paper-rule);
   background: rgba(60, 52, 24, .02)
}

.alv-ed .cmp-b .cmp-key li {
   display: flex;
   align-items: baseline;
   gap: 10px;
   font-family: var(--body);
   font-size: var(--fs-meta-alt);
   color: var(--ink-soft)
}

/* one control for "held", "opens later" and "not here", drawn once and used
   in the key and in all fifty-one cells */
.alv-ed .cmp-b .cmp-m::before {
   font-family: var(--body)
}

.alv-ed .cmp-b .cmp-m.held::before {
   content: "\2713";
   color: var(--dgold)
}

.alv-ed .cmp-b .cmp-m.opens::before {
   display: inline-block;
   transform: translateY(2px) rotate(45deg)
}

.alv-ed .cmp-b .cmp-m.no::before {
   content: "\2014";
   color: rgba(37, 50, 29, .34)
}

.alv-ed .cmp-b .cmp-scroll {
   overflow-x: auto;
   border: 1px solid var(--paper-rule);
   background: rgba(60, 52, 24, .02);
   position: relative;
   z-index: 1
}

.alv-ed .cmp-b .cmp-scroll:focus-visible {
   outline: 1px solid var(--dgold);
   outline-offset: 3px
}

.alv-ed .cmp-b .cmp {
   width: 100%;
   min-width: 980px;
   border-collapse: collapse;
   text-align: left
}

.alv-ed .cmp-b .cmp thead tr {
   background: rgba(60, 52, 24, .05)
}

.alv-ed .cmp-b .cmp-lead {
   padding: 20px 24px;
   width: 38%;
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-micro);
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--ink-faint);
   border-bottom: 1px solid var(--paper-rule)
}

.alv-ed .cmp-b .cmp-col {
   padding: 20px;
   width: 20.7%;
   font-family: var(--word);
   font-weight: 500;
   font-size: var(--fs-body-sm);
   color: var(--ink);
   border-bottom: 1px solid var(--paper-rule);
   border-left: 1px solid var(--paper-rule)
}

.alv-ed .cmp-b .cmp-col span {
   display: block;
   font-family: var(--body);
   font-style: italic;
   font-size: var(--fs-meta-alt);
   color: var(--ink-faint);
   margin-top: 4px
}

/* the three columns take the three cards' own colours, so a reader crossing
   from the Memberships to the table meets the same ladder */
.alv-ed .cmp-b .cmp-col.c,
.alv-ed .cmp-b td.c {
   background: rgba(60, 52, 24, .022)
}

.alv-ed .cmp-b .cmp-col.g,
.alv-ed .cmp-b td.g {
   background: rgba(63, 107, 78, .09)
}

.alv-ed .cmp-b .cmp-col.m,
.alv-ed .cmp-b td.m {
   background: rgba(201, 169, 74, .13)
}

.alv-ed .cmp-b .cmp-grp th {
   padding: 30px 24px 13px;
   font-weight: 400;
   text-align: left;
   border-bottom: 1px solid var(--paper-rule);
   background: rgba(60, 52, 24, .055)
}

.alv-ed .cmp-b .cmp-grp th {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-micro);
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--dgold)
}

.alv-ed .cmp-b .cmp-grp span {
   color: var(--ink-faint);
   letter-spacing: .18em;
   margin-left: 14px
}

.alv-ed .cmp-b .cmp tbody th[scope=row] {
   padding: 20px 24px;
   font-weight: 400;
   vertical-align: top;
   border-bottom: 1px solid var(--paper-rule)
}

.alv-ed .cmp-b .cmp-n {
   display: block;
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-note);
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--ink)
}

.alv-ed .cmp-b .cmp-d {
   display: block;
   margin-top: 6px;
   font-family: var(--body);
   font-size: var(--fs-note);
   line-height: 1.6;
   color: var(--ink-faint)
}

.alv-ed .cmp-b .cmp tbody td {
   padding: 20px;
   vertical-align: top;
   border-bottom: 1px solid var(--paper-rule);
   border-left: 1px solid var(--paper-rule);
   font-size: var(--fs-note)
}

.alv-ed .cmp-b .cmp-fold {
   display: none
}

.alv-ed .cmp-b .cmp-note {
   display: block;
   margin-top: 6px;
   font-family: var(--body);
   font-size: var(--fs-meta-alt);
   line-height: 1.55;
   color: var(--ink-soft)
}

.alv-ed .cmp-b .cmp td .cmp-note:first-child {
   margin-top: 0;
   font-style: italic
}

/* =====================================================================
   THE PANEL THAT CLOSES THE TABLE — the same three-cell arrangement as
   `.tmove` under the Memberships, and written out rather than shared with
   it: that one is two cells and this is three, and the design gives the
   third a column of links where the others carry prose.
   ===================================================================== */
.alv-ed .cmp-b .cmp-foot {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin-top: clamp(30px, 3.4vw, 44px);
   border: 1px solid var(--paper-rule);
   background: rgba(60, 52, 24, .022);
   position: relative;
   z-index: 1
}

.alv-ed .cmp-b .cmp-cell {
   padding: clamp(26px, 2.6vw, 32px) clamp(24px, 2.8vw, 34px)
}

.alv-ed .cmp-b .cmp-cell+.cmp-cell {
   border-left: 1px solid var(--paper-rule)
}

.alv-ed .cmp-b .cmp-k {
   font-family: var(--word);
   font-weight: 600;
   font-size: var(--fs-micro);
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--dgold)
}

.alv-ed .cmp-b .cmp-p {
   font-family: var(--body);
   font-size: var(--fs-note-alt);
   line-height: 1.8;
   color: var(--ink-soft);
   margin: 16px 0 0;
   text-wrap: pretty
}

.alv-ed .cmp-b .cmp-p.lead {
   font-family: var(--word);
   font-size: var(--fs-body);
   line-height: 1.55;
   color: var(--ink)
}

.alv-ed .cmp-b .cmp-next {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 18px
}

.alv-ed .cmp-b .cmp-next .tlink {
   color: var(--dgold)
}

.alv-ed .cmp-b .cmp-next .tlink:hover {
   color: var(--ink)
}

.alv-ed .cmp-b .cmp-next .tlink .ar {
   transition: transform .3s
}

.alv-ed .cmp-b .cmp-next .tlink:hover .ar {
   transform: translateX(4px)
}

/* =====================================================================
   THE FOLD — the table stops being a table and becomes one block per row,
   the arrangement the home page's `.bx-matrix` uses and for the same reason:
   a cell three swipes to the right of the heading that names it is a cell
   with no meaning. The mechanism is that page's too -- every cell carries a
   repeated copy of its column's name (`.cmp-fold`), hidden while the columns
   are there to say it and shown once they are not.

   IT FOLDS BY ROW, WHERE THE MATRIX FOLDS BY COLUMN, and the difference is
   only the shape of the data. That matrix is three rows by four bands, so a
   block per band is four blocks of three lines. This is seventeen rows by
   three steps: a block per step would be three blocks of seventeen lines,
   and a reader wanting to know whether Guided holds the Journal would have to
   carry the answer past sixteen other rows to compare it with Mentored's. A
   block per row is seventeen blocks of three lines -- the same shape on
   screen as the matrix's, a heading over three labelled lines, and the
   comparison stays inside one block where the eye can do it.

   The scroller stops scrolling here and gives up its frame with it: the
   border and ground belong to a table, and what is below this width is a
   list. `tabindex` stays on it -- harmless on a region that no longer
   scrolls, and removing it would need script.
   ===================================================================== */
@media(max-width:900px) {

   .alv-ed .cmp-b .cmp-foot {
      grid-template-columns: 1fr
   }

   .alv-ed .cmp-b .cmp-cell+.cmp-cell {
      border-left: 0;
      border-top: 1px solid var(--paper-rule)
   }

   .alv-ed .cmp-b .cmp-scroll {
      overflow-x: visible;
      border: 0;
      background: none
   }

   .alv-ed .cmp-b .cmp,
   .alv-ed .cmp-b .cmp tbody,
   .alv-ed .cmp-b .cmp tr,
   .alv-ed .cmp-b .cmp tbody th[scope=row],
   .alv-ed .cmp-b .cmp tbody td {
      display: block;
      width: auto
   }

   .alv-ed .cmp-b .cmp {
      min-width: 0
   }

   /* the column heads have nothing left to head */
   .alv-ed .cmp-b .cmp thead {
      display: none
   }

   .alv-ed .cmp-b .cmp tbody tr:not(.cmp-grp) {
      border: 1px solid var(--paper-rule);
      background: rgba(60, 52, 24, .02);
      margin-bottom: 14px
   }

   .alv-ed .cmp-b .cmp tbody th[scope=row] {
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--paper-rule)
   }

   /* THREE COLUMNS, NOT TWO: the label, the mark, then what it is qualified
      by. Set as label-and-everything-else the tick sits on its own line with
      the note beneath it, which reads as two facts rather than one sentence
      -- and down seventeen blocks the marks no longer line up with each
      other, which is the one thing a reader scanning for them wants. */
   .alv-ed .cmp-b .cmp tbody td {
      display: grid;
      grid-template-columns: clamp(96px, 26vw, 124px) 18px 1fr;
      gap: 0 12px;
      align-items: baseline;
      padding: 13px 20px;
      border-left: 0;
      border-bottom: 1px solid rgba(60, 52, 24, .12)
   }

   .alv-ed .cmp-b .cmp tbody td:last-child {
      border-bottom: 0
   }

   .alv-ed .cmp-b .cmp-fold {
      display: block;
      font-family: var(--word);
      font-weight: 600;
      font-size: var(--fs-micro);
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-faint)
   }

   .alv-ed .cmp-b .cmp tbody td .cmp-m {
      grid-column: 2
   }

   /* the third column whether or not the second is filled -- one cell carries
      prose in place of a mark, and it belongs under the notes beside it
      rather than under the ticks */
   .alv-ed .cmp-b .cmp tbody td .cmp-note {
      grid-column: 3;
      margin-top: 0
   }

   .alv-ed .cmp-b .cmp-grp th {
      padding: 26px 0 12px;
      background: none;
      border-bottom: 0
   }
}

@media(max-width:680px) {

   .alv-ed .cmp-b .cmp-key {
      gap: 12px 24px
   }
}

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

@media(prefers-reduced-motion:reduce) {
   .alv-ed * {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important
   }

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

@media(max-width:1040px) {
   .alv-ed .fellows {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      gap: 30px 24px
   }

   .alv-ed .fcard.lead {
      grid-column: 1/3;
      grid-row: auto
   }

   /* THE THREE FELLOWS ARE PINNED TO ROW 1 in the wide setting, which is how
      they come to stand beside Gilberto's two-row portrait. Unpin them with
      it: left on, three cards pinned to row 1 of a two-column grid draw an
      implicit third column, and the lead -- now `grid-row: auto` -- is placed
      after them, so Gilberto reads second on every screen below 1040px. */
   .alv-ed .fcard.plain {
      grid-row: auto
   }

   .alv-ed .fcard.lead .inner {
      height: auto
   }

   .alv-ed .ff-textbox {
      grid-column: 1/3;
      grid-row: auto
   }

   .alv-ed .tiers {
      grid-template-columns: 1fr;
      max-width: 560px;
      margin-inline: auto
   }

   .alv-ed .standards {
      grid-template-columns: 1fr 1fr
   }

   .alv-ed .mosaic {
      display: block
   }

   .alv-ed .mosaic>* {
      margin: 0 0 22px !important
   }

   .alv-ed .within-grid {
      grid-template-columns: 1fr 1fr
   }

   .alv-ed .head.across {
      grid-template-columns: 1fr
   }

   .alv-ed .head.across .sub {
      padding-left: 0;
      border-left: 0
   }

   /* `display: block` because the note is a `<span>`, and out of absolute
      positioning it goes back to being an inline one. Inside `.row` it is a
      grid item and blockifies anyway, which is why the accordion looked right
      and the six standards and the fourteen cards did not: an inline box
      holding a flex heading and a paragraph splits around them, so all the
      dark ground painted was a thin strip beside the writing -- and the
      writing itself is set in cream for a green card it no longer had. */
   .alv-ed .pop {
      display: block;
      position: static;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      margin-top: 12px;
      padding: 16px 18px;
      box-shadow: none
   }

   /* THE POP IS PUT IN THE FLOW HERE, so every offset written for it while it
      was a floating card has to be taken back -- and three of them are written
      on selectors that out-specify the rule above, so `transform: none` there
      does not reach them. A static box ignores `top`/`left`, but not the
      transform: the six standards' lower row was shifted 8px down over the
      text beneath it, and the last two `.wcard` notes 10px sideways, on the
      one layout where nothing is overlapping anything. */
   .alv-ed .fellowship .standards .std:nth-child(n+4)>.pop,
   /* `.row` is a two-column grid -- the mark, then the reading -- and the note
      is its third child, so in the flow it was auto-placed into the 16px mark
      column and blew that column open. It is the row's own full width. */
   .alv-ed .acc .a-list .row>.pop {
      grid-column: 1/-1
   }

   /* The legend's two entries are each a whole sentence, held on one line by a
      `nowrap` written for a row that had a whole panel's width to sit across.
      In a phone's column they simply ran off the right-hand edge. */
   .alv-ed .acc-legend {
      justify-content: flex-start;
      gap: 10px 16px
   }

   .alv-ed .acc-legend span {
      white-space: normal;
      align-items: baseline
   }

   .alv-ed .std .more,
   .alv-ed .acc .a-list .row.has .rt::after {
      display: none
   }
}

@media(max-width:940px) {
   .alv-ed .two {
      grid-template-columns: 1fr;
      gap: 24px
   }

   .alv-ed .acc summary {
      grid-template-columns: auto 1fr auto
   }

   .alv-ed .acc .a-price {
      display: none
   }

   .alv-ed .acc .a-list {
      grid-template-columns: 1fr
   }

   .alv-ed .faq {
      columns: 1
   }
}

/* ONE COLUMN, AND THE PHOTOGRAPHS AT THEIR OWN SHAPE. Three grids fold here
   -- the Founding Fellows, the six standards and Within the Membership -- and
   820px is the estate's own collapse, the width `.figblock` and the
   Residency's magazine figures already fold at.

   It used to be 600px, which left the three Fellows two-up on every telephone
   held sideways and on every small tablet, and the fourteen `.wcard`s the
   same. The two spans written for the wider grids have to be taken back with
   it: `grid-column: 1/3` in a one-column grid asks for a second column and
   gets an implicit one, so Gilberto and the Guardians' note would each have
   drawn a phantom track beside them.

   The portraits' `min-height` goes because it is a height, and a height on a
   full-width picture is a crop: `.fcard.plain .frame` reserved at least 320px
   and the image filled it with `object-fit: cover`, so a portrait photograph
   in a 342px column came out as a 342x320 letterbox of somebody's face. The
   frames take the 3:4 the design gives every other portrait on the page and
   the column's whole width, and the card's flex column stops stretching them
   -- there is no second card beside them to keep a bottom line level with. */
@media(max-width:820px) {

   .alv-ed .fellows,
   .alv-ed .within-grid,
   .alv-ed .standards {
      grid-template-columns: 1fr
   }

   .alv-ed .fcard.lead,
   .alv-ed .ff-textbox {
      grid-column: 1/-1;
      grid-row: auto
   }

   .alv-ed .fcard.plain {
      grid-row: auto;
      height: auto;
      align-self: auto
   }

   .alv-ed .fcard.plain .frame,
   .alv-ed .fcard.lead .frame {
      flex: 0 0 auto;
      min-height: 0
   }

   .alv-ed .fcard.plain .frame img,
   .alv-ed .fcard.lead .frame img {
      height: auto;
      aspect-ratio: 3/4
   }

   /* IN ONE COLUMN EACH CARD IS BOXED. Across three or two they are separated
      by the grid itself -- a card is read against its neighbours sideways and
      the whitespace is enough. Stacked, each card's photograph sits directly
      under the previous card's chips and its note, and where one ends and the
      next begins has to be worked out from the writing.

      A rule between them was tried first and did not do the work at any
      weight, up to solid gold: the cards are tall, the eye meets the line a
      long way from either card it divides, and a single stroke in a column of
      photographs and dark note panels reads as one more horizontal element
      rather than as a boundary. A box states a card's whole extent at once.

      So the gap closes to 8px -- the border is what separates them now, and
      the old 24px of air beside it would read as a gap between boxes rather
      than as one list -- and the padding is what keeps the photograph and the
      writing off the edge that has just been drawn round them. */
   .alv-ed .within-grid {
      gap: 8px
   }

   .alv-ed .within-grid .wcard {
      border: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
      padding: clamp(12px, 3.2vw, 16px)
   }
}

/* The hero used to set `--hero-veil:#14331f`, this page's own ground, so that
   the fade arrived at the panel beside it. The hero is now painted with the
   shared `--hero-ground` on every editorial page and the veil reads the same
   token, so panel and fade agree without being told to — and the four heroes
   read as one masthead rather than as four pages that happen to share a
   layout. The page's gradient wash still begins immediately beneath it. */

/* THE PHOTOGRAPHER'S MARK IS CROPPED OUT ON A PHONE, WHICH IS THE ONLY WIDTH
   THAT HAS THE PICTURE TO SPARE. `imgband-inspire-one` carries a
   "(C) Cabafoto" mark across its top-right corner, about the rightmost 23% of
   the frame, which lands over the band's own quotation.

   The band is 486px tall at every width, and the photograph is 3:2 -- so
   `cover` fills by height and the displayed picture is 729px wide whatever the
   screen is. Below about 560px the screen is narrower than that and the
   surplus is thrown away at the sides; at 560 and above there is no surplus
   left and the whole width is on show. That is the whole of why this stops at
   520px rather than running to the estate's usual 900: above it there is
   simply not enough picture to move, and a rule that half worked would read as
   a rule that had stopped working.

   `25%` and not `0%`. Hard left clears the mark by the widest margin and it
   over-corrects: the window then runs from the left edge to 53% of the
   picture, which cuts the horse's head off at 55-62% and leaves the band
   showing the arena wall the rider has already passed. A quarter in moves the
   window to 12-65% and puts the horse back in it.

   WHAT THAT COSTS IS THE CEILING, and the arithmetic is why this stops at
   460px rather than at the estate's usual 900. The band is 486px tall at every
   width and the photograph is 3:2, so `cover` fills by height and the
   displayed picture is 729px wide whatever the screen is: the only surplus
   there is to move is 729 minus the screen. The mark begins at 76.6% of the
   frame, so the visible window's right edge has to land under 558px of that
   729 -- which at 25% in resolves to a screen no wider than about 501px, and
   at 501 it clears by a single pixel. 460 is the same sum with room in it:
   the window ends at 72.3% and the mark stays 31px outside it. Every telephone
   in common use is 360-430px wide, so the rule covers the screens it was asked
   about; a 480px window is not one of them and shows the mark.

   ABOVE THAT THE MARK IS STILL THERE, and taking it off the estate means
   taking it off the file. That is a question about the licence the photograph
   was supplied under rather than one about this stylesheet, so nothing here
   touches the image. */
@media(max-width:460px) {
  .alv-ed .cband.wideq > img.bg {
    object-position: 25% 50%
  }
}