/* =====================================================================
   THE COLLEGE — 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_The_College_finalaug 11.html,
   which carried eleven <style> blocks. Four of them are the base the Fellows
   file carries byte-identically and are now alvara-editorial.css; two more are
   gone entirely and are worth naming, because both were working around
   something the shared sheet now settles:

   - `members-scoped` was 57 KB and 559 rules: a whole copy of the older
     editorial sheet, prefixed `.msec`, carried solely so the page could draw
     its hero. The hero is the estate's now, so the copy and its wrapper go.
     The visible consequence is intended — the College hero was set in its own
     much larger, non-uppercase cut, and it now reads at the same scale as the
     Fellows page, which is the point of having one hero.
   - `heading-standard` pinned three heading selectors to Cormorant with
     `!important`, patching the base rule's `font-weight:400` fallback to
     Georgia. The base rule is fixed at the source, so the patch has nothing
     left to do.

   What remains is this page's own furniture: the lettered sections (`.sec`),
   the photographic dividers' page-level notes, the figure gallery and its lightbox
   (`.figgrid` / `.figmodal`), the framed demonstrations (`.instrframe`,
   `.coda`) and the Bands ladder (`.bd*`).

   The ivory opening spread (`#gf`) was a third of that furniture and is gone:
   it is the Fellows page's `.figblock.beside` now, on the shared cream ground.
   See the two notes below.
   ===================================================================== */

/* ===== THE COLUMN BLOCK =====
   `#gf` is the Fellows page's `.figblock.beside`, said exactly as that page
   says it: the figure on one side, the head INSIDE the `.htx` so
   `.head.tight + .body` sets the gap under it from `--head-gap`, and the
   photograph at the estate's portrait 4:5.

   It was two. `#discipline-full` was the second and is a full-width intro now,
   standing the Structural Training Scale under its prose -- so this page holds
   one photograph in a column block rather than two, and the note below about
   the ratio governs that one.

   What stood here was eight overrides doing the opposite -- a tighter section
   padding, a `.head` margin, an `h2` line-height and top margin, a narrower
   `.figblock` gap, a `max-height` on the photograph and a closer `.hcap` --
   every one of them `!important`, so the shared rhythm could not reach either
   block and the two sections read as a third setting of their own. Six of the
   eight also named `#maintaining`, a section no template has written since the
   Discipline page was retired.

   The `max-height:52vh` is the one worth naming: with an `aspect-ratio` on the
   image it does not crop, it RESHAPES -- width stays 100% of the column and the
   height is capped, so the picture comes out at whatever ratio the viewport
   happens to make. It is why the page's photographs could not be the same
   shape while it stood.

   The ratio is restated here rather than moved to the shared sheet, which is
   normally the rule: `.alv-ed .figblock .hph img` reaches The Residencies too,
   whose four magazine blocks set their own float widths against pictures shot
   at their own shapes. Two sheets saying 4:5 is the smaller fault. Editing it
   means editing fellows.css beside this. */
.alv-ed .figblock .hph img { aspect-ratio:4/5 }

/* `#gf` carried its own ivory ground, its own 1140px wrap, its own two-column
   grid, its own `figure`/`.plate`/`figcaption`, its own `.txt` prose size and
   its own `.head`/`.kick`/`h2`/`.rule` -- twenty rules and a media query,
   restating what `.sec.cream.grain`, `.wrap`, `.figblock.beside` and `.head`
   already say, at values a few pixels either side of theirs. `--sec-ground` on
   a cream section IS `--ivory`, the same #ece4d1, so the ground did not change
   when the section took the shared class; what changed is that the panel now
   keeps step with the rest of the estate when any of those is edited.

   The id is left on the section as an anchor. Nothing links to it, and nothing
   styles it either -- the moment a rule wants to be written here again, ask
   first whether the Fellows page would want it too. */
/* The three `.qlay` overrides that stood here — a tighter margin, the panel's
   padding, and a green wash inside it — went with the panel: the pull quote is
   the corner mark now (alvara-editorial.css), whose padding is 9px and whose
   only fill is a gold breath off the open corner. Two of them carried
   `!important` and would have quietly out-weighed the component. */
.alv-ed #discipline-full .qlay,
.alv-ed #maintaining .qlay { margin-top:clamp(12px,1.5vw,20px)!important }

/* same dot texture as the cream sections, layered on the green */
.alv-ed #discipline-full { background-color:var(--g3)!important; background-image:radial-gradient(rgba(242,237,224,.05) 1px,transparent 1px),radial-gradient(120% 120% at 50% 0%,#1a3a26,var(--g3) 70%)!important; background-size:3px 3px,100% 100%!important; background-repeat:repeat,no-repeat!important }
/* RULE: section headings are Title Case */
.alv-ed .h2,
.alv-ed #college-intro .h,
.alv-ed .fc-title,
.alv-ed .bc-title,
.alv-ed .ph-title { text-transform:capitalize }
/* The shared `.alv-ed .sec` carries position and the vertical rhythm. This
   page only adds the clip, which its full-bleed watermarks need. */
.alv-ed .sec { overflow:hidden }
.alv-ed .sec.green {
  color:var(--ground-ink)
}
.alv-ed .sec.cream {
  color:var(--ground-ink)
}
/* Measure, margin and padding are the shared `.alv-ed .wrap`'s. The stacking
   context is this page's: the lettered sections sit over a watermark. */
.alv-ed .wrap { z-index:1 }
/* The base rule is `.alv-ed .kick` in alvara-editorial.css. Only the colour
   contexts are this page's; `.kick` was a second name for the same label. */
.alv-ed .sec.green .kick,
.alv-ed .lband .kick { color:var(--ground-kick) }
.alv-ed .sec.cream .kick { color:var(--ground-kick) }
.alv-ed .sec.green h2 { color:var(--ground-ink) }
.alv-ed .sec.cream h2 { color:var(--ground-ink) }


/* ===== THE PHOTOGRAPHIC PLATE =====
   `.curband` was this page's own copy of `.cband`: the same photograph, the
   same veil over it and the same quotation set bottom-right, written a second
   time under a second name. Fifteen rules and a media query, gone -- the three
   plates are `.cband` now and take the component in alvara-editorial.css,
   which the Fellows' two and the Residencies' one already take.

   Two things about them changed with the name, and both were the point of
   having one component:

   - The plate is `min-height: 54vh` rather than `clamp(440px, 54vw, 700px)`,
     so it is the same depth as the Fellows' plates instead of up to 200px
     deeper. A page that wants the taller plate wants a modifier on `.cband`,
     not a second component.
   - The copy is the component's three parts -- `.cbq`, `.cbr`, `.kick`, in
     that order -- rather than `.cq` with a `::after` for its rule and `.ch`
     for a heading beside it. `.ch`/`.cht` set a display heading at up to 86px
     on the left of the plate; the English page had commented every one of
     them out long before this, and the Portuguese page still carried three.
     They are not in the `.cband` grammar and have gone rather than being
     ported: what the plate says now is the quotation and the eyebrow that
     signs it. The two Portuguese section numbers (`Secção Dois`, `Secção
     Três`) went with them.

   `.curband .bg { object-position: 50% 15% }` is on the first plate's `<img>`
   as an inline style, where the other two already carried theirs. */
/* embed frame */
.alv-ed .emf { position:relative; border:1px solid rgba(184,150,46,.32); border-radius:3px; padding:6px; background:var(--g3); margin:clamp(24px,3vw,44px) auto 0; max-width:1080px }
.alv-ed .emf .cn { position:absolute; width:20px; height:20px; border:1px solid var(--gold); opacity:.85; z-index:3 }
.alv-ed .emf .cn.tl { top:-1px; left:-1px; border-right:0; border-bottom:0 }
.alv-ed .emf .cn.tr { top:-1px; right:-1px; border-left:0; border-bottom:0 }
.alv-ed .emf .cn.bl { bottom:-1px; left:-1px; border-right:0; border-top:0 }
.alv-ed .emf .cn.br { bottom:-1px; right:-1px; border-left:0; border-top:0 }
.alv-ed .emf iframe { width:100%; border:0; display:block; border-radius:2px; background:#12291c }
.alv-ed .emcap { font-family:var(--word); font-style:italic; font-size:var(--fs-note-alt); letter-spacing:.02em; margin-top:14px; text-align:center }
.alv-ed .sec.green .emcap { color:var(--ground-mute) }
.alv-ed .sec.cream .emcap { color:var(--ground-mute) }
/* structured curriculum: text + training-scale figure */
/* The Spiral spread was `.sc-grid` + `.sc-text` + `.sc-figwrap`, and it was
   the estate's column block written a third time: the same .82/1.18 shares,
   the same gap, the same centring. It became `figblock beside`, and is not a
   column block at all any more -- see the note below.

   One of the five names stays. `.emcap` is an italic centred caption where
   `.hcap` is an uppercase gold eyebrow, and both plates on this page take it.
   `.sc-fig` stayed too for a while -- the frame around an iframe, on the
   ground that a photograph takes its border from the image while a document
   needs a box. That stopped being true when the drawing inside it became
   transparent, and it has gone; see the note where it stood. The framed-figure
   family is `.emf` and `.figframe` now, two sizes of one ornament rather than
   three, and still not settled.

   `.sc-text .kick { color:#8a6d1e }` went with the wrapper: it is the value
   `.sec.cream .kick` already gives it from `--ground-kick`. The 880px
   breakpoint it carried went at the same time and there is nothing to replace
   it with: a section that never puts the drawing beside prose has nothing to
   collapse.

   `.alv-ed .figblock .htx h2 { margin-top:12px }` stood here and has gone the
   same way. It was `.sc-text`'s own gap, promoted to every `.htx` on the page
   when the spread became a `.figblock` -- so once `#gf` and `#discipline-full`
   became blocks too, it was quietly holding all three of the College's heads
   12px where the Fellows page's are at the shared 6. */
/* ===== A DRAWING IS NOT A PHOTOGRAPH =====
   The Structural Training Scale sat in a column block on the Spiral section,
   and a `@media(min-width:901px)` pair stood here handing that block
   `.82fr` / `1.18fr` instead of the component's 45% --
   because the Structural Training Scale is not a picture: it is an SVG whose
   labels are drawn in USER UNITS and scaled to whatever box the frame is
   given, so the frame's width IS the drawing's type size. Every pixel taken
   off the box is taken off the lettering, and unlike a photograph there is no
   second lever -- raising a font-size inside the document moves labels that
   are positioned to fit, which is a collision check per figure.

   The drawing stands under `#discipline-full` now -- One Connected Body of
   Study, an `.introwide` section: the head and the prose at the full measure,
   the frame beneath them. Which is the same argument carried to its end, the
   drawing taking the whole `.wrap` rather than the better of two shares of it.
   So the exemption is gone rather than rewritten, and the rules it named went
   with it. A stylesheet still handing columns to a block that is no longer a
   `.figblock` reads as though the spread is one refresh away from coming back.

   The Spiral keeps the prose and the pull quote it was written with; the
   drawing was never the Spiral's subject. It sets out the order in which the
   horse is made, which is what One Connected Body of Study is about.

   What that pair knew and this does not have to: a `:has()` written on one
   hand would silently do nothing if the figure were moved to the other, and a
   column override needs guarding above 900px or it beats the shared sheet's
   collapse and stays two-column on a telephone. Both are worth having if the
   drawing is ever put back beside prose. */
/* `.sc-fig` was the frame around this page's one embedded drawing -- a gold
   hairline, four corner marks and an opaque `--g1` panel behind the document.
   It has gone with the frame: the Structural Training Scale is a transparent
   plate now, drawn straight onto the section like the Spiral beside it, and a
   sheet still dressing a frame nobody writes reads as though the frame is one
   refresh away. Both plates on this page are `.plate-box` (alvara-editorial.css).

   The document was carrying the other half of the same arrangement -- an
   opaque `#1B3F2A` body painted to match this panel -- so the two had to be
   edited together or the plate would have had a green slab behind it on a
   section that is a different green. */

/* The gap to the prose above. The plate is placement-neutral -- it is the
   component, not the setting -- so the measure the full-width intro leaves
   beneath its paragraphs is asked for here, at `.brxgrid`'s figure. */
.alv-ed .introwide .plate-box { margin-top:clamp(30px,3.4vw,48px) }
.alv-ed .lbtn { display:inline-flex; align-items:center; gap:11px; font-family:var(--word); font-size:var(--fs-eyebrow-lg); letter-spacing:.18em; text-transform:uppercase; color:var(--g3); background:var(--gold); padding:15px 30px; border-radius:2px; text-decoration:none; margin-top:clamp(26px,3vw,40px) }
/* ===== THE FULL-WIDTH INTRO =====
   Four sections stand a head over a paragraph or two and then a component
   that runs the whole measure -- the Branches grid, the figure gallery, the
   examination frame, the Bands ladder. `.introwide` is what lets the prose
   above run the same measure: a 74ch column over a full-width grid reads as
   two blocks that were set separately.

   It named `.lbody`, which is what those intros were written in. They are
   `.body` now, like every other passage on the page, so the head is `.tight`
   and the gap beneath it comes from `--head-gap` rather than from `.head`'s
   own 42px margin -- the three column blocks were already at 22 and these
   four were the page's second answer to the same question. Their opening
   paragraph takes the estate's `lede-main lede-sml` capital with it.

   `.alv-ed .lbody { max-width:64ch }` went at the same time: nothing on the
   page writes `.lbody` any more, and this sheet is loaded by this page alone.
   The class itself is main.css's and is still in use elsewhere. */
.alv-ed .introwide .body { max-width:none }
/* Three Branches — readable boxes on green */
.alv-ed .brxgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); margin-top:clamp(30px,3.4vw,48px) }

@media(max-width:820px) {
  .alv-ed .brxgrid { grid-template-columns:1fr; gap:18px }
}
.alv-ed .brxbox { border:1px solid rgba(184,150,46,.34); border-radius:4px; background:rgba(242,237,224,.045); padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,28px) }
.alv-ed .brxbox .n { font-family:var(--word); font-size:34px; color:var(--gold-soft); line-height:1 }
.alv-ed .brxbox .t { font-family:var(--word); text-transform:uppercase; letter-spacing:.15em; font-size:var(--fs-eyebrow-lg); color:var(--gold); margin:12px 0 12px }
.alv-ed .brxbox p { font-family:var(--body); font-size:var(--fs-ui); line-height:calc(1.66 * var(--lh-scale)); color:rgba(242,237,224,.84); margin:0 }
/* Begin Your Study — lady as hero, writing consolidated beneath */
/* Only the height differs from the shared `.alv-ed .coda`. */
.alv-ed .coda { min-height:clamp(560px,88vh,920px) }
.alv-ed .coda .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28% }
.alv-ed .coda .veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,17,11,.18) 16%,rgba(7,17,11,.5) 46%,rgba(7,17,11,.82) 68%,rgba(7,17,11,.97)) }
.alv-ed .coda-in { position:relative; z-index:2; width:100%; max-width:1000px; margin:0 auto; padding:0 clamp(24px,5vw,70px) clamp(34px,5vh,66px); text-align:center }
.alv-ed .coda .kick { font-family:var(--word); text-transform:uppercase; letter-spacing:.3em; font-size:var(--fs-eyebrow); color:var(--gold-soft) }
.alv-ed .coda h2 { font-family:var(--word); font-weight:500; color:var(--cream); margin:12px 0 0; text-transform:capitalize }
.alv-ed .coda .brule { width:70px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-soft),transparent); margin:clamp(16px,2vw,22px) auto }
.alv-ed .coda .bnote { font-family:var(--body); font-size:var(--fs-ui); line-height:calc(1.72 * var(--lh-scale)); color:rgba(242,237,224,.82); max-width:64ch; margin:0 auto }
.alv-ed .coda .bnote b { color:var(--gold-soft); font-weight:500 }
.alv-ed .coda .bgov { font-family:var(--word); font-style:italic; font-size:calc(clamp(16px,1.5vw,20px) * var(--fs-scale)); color:var(--gold-soft); margin:clamp(14px,1.8vw,20px) auto 0 }
.alv-ed .coda .lbtn { margin-top:clamp(16px,2vw,24px) }
/* The tiles sit on a common baseline, not a common ceiling. Every frame is the
   same 344px, so the only thing that differs between two tiles is how many
   lines their description runs to — bottom-aligning evens the foot of the row
   and lets the frames above sit a line apart where the writing is uneven. */
.alv-ed .figgrid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,2.6vw,40px); margin-top:clamp(26px,3vw,44px); align-items:end }

@media(max-width:820px) {
  .alv-ed .figgrid { grid-template-columns:1fr }
}
.alv-ed .figtile { cursor:pointer; outline:none }
.alv-ed .figtile:focus-visible .figframe { border-color:var(--gold); box-shadow:0 0 0 2px rgba(184,150,46,.5) }
/* The strip at the foot is where the Open badge lives, and it is reserved
   rather than floated over the drawing. The badge sits bottom-right, and
   whether that lands on empty ground or on the figure depends entirely on the
   figure's own proportions: three of the four are tall enough that it clears
   them, while the Five Collective Marks is 1210x236 — wide and short — so its
   last card sits exactly where the badge does and disappeared under it.

   Reserving the strip means no figure can be covered, including ones not drawn
   yet. It costs a band of the frame's own green under every preview, which is
   what the taller three already had beneath their drawings anyway. */
.alv-ed .figframe { position:relative; border:1px solid rgba(184,150,46,.34); border-radius:3px; overflow:hidden; background:var(--g1); padding-bottom:44px; transition:border-color .25s, box-shadow .25s }
.alv-ed .figtile:hover .figframe { border-color:var(--gold) }

/* THE GOLD RULE UNDER A TILE IS A PROSE UNDERLINE, AND A TILE IS NOT PROSE.
   `.page-the-college main a` in main.css paints every anchor in <main> gold
   with a `border-bottom` -- written for an inline link inside a paragraph,
   which is what nearly every link on this page is. A `.figtile` is the
   exception: it is the whole tile, frame and title and description together,
   wrapped in an <a> so the figure is still reachable with JavaScript off. So
   it took the underline too, and what an underline means under a block the
   height of a card is a gold rule ruled across the page beneath it.

   Side by side the four rules line up with each other and read as the foot of
   a grid. Stacked they are four rules down a column with a paragraph between
   each pair, which is what was reported.

   `border-bottom: 0` and not `border: 0`: the tile's own gold is the
   `.figframe` border and its four corner marks, and those are the design's.
   `.alv-ed .figtile` carries two classes against that rule's one class and two
   elements, so it wins on specificity without an `!important`. */
@media(max-width:900px) {
  .alv-ed .figtile { border-bottom:0 }
}
.alv-ed .figframe .cn { position:absolute; width:18px; height:18px; border:1px solid var(--gold); opacity:.8; z-index:3; pointer-events:none }
.alv-ed .figframe .cn.tl { top:6px; left:6px; border-right:0; border-bottom:0 }
.alv-ed .figframe .cn.tr { top:6px; right:6px; border-left:0; border-bottom:0 }
.alv-ed .figframe .cn.bl { bottom:6px; left:6px; border-right:0; border-top:0 }
.alv-ed .figframe .cn.br { bottom:6px; right:6px; border-left:0; border-top:0 }
/* The preview lays out at a desktop width and is scaled down to the tile,
   rather than being rendered at ~500px and reflowing. These are whole
   documents with headings, cards and a calculator; at tile width the
   calculator stacks into a narrow column and stops looking like the figure a
   reader will open. Same technique as the reader's figure rail — a wide frame
   at a fixed fraction — and `FIGURE_SCALE` in college.js must agree with the
   two numbers here or the box and the drawing inside it come out different
   heights.

   Absolutely positioned so the unscaled iframe contributes no layout height:
   `transform` does not shrink the box, only the paint. college.js sets the
   frame's height to the scaled figure instead. The standing 750px is what a
   reader with no JavaScript keeps — 300px once scaled. */
.alv-ed .figframe .figprev { position:absolute; top:0; left:0; width:250%; height:750px; transform:scale(.4); transform-origin:top left; border:0; display:block; background:var(--g1); pointer-events:none }
.alv-ed .figframe { min-height:344px }
/* Examination — embedded inline and scrollable */
.alv-ed .examembed { position:relative; border:1px solid rgba(184,150,46,.30); border-radius:4px; overflow:hidden; background:var(--g3); margin-top:clamp(18px,2.2vw,28px) }
.alv-ed .examembed iframe { width:100%; height:clamp(560px,72vh,720px); border:0; display:block; background:var(--g3) }
.alv-ed .examnote { font-family:var(--body); font-style:italic; font-size:var(--fs-meta-alt); color:rgba(242,237,224,.6); margin:12px 2px 0 }

/* ON A NARROW SCREEN THE NOTE COMES FIRST, BECAUSE IT IS AN INSTRUCTION FOR
   THE THING BELOW IT. The paper is `clamp(560px, 72vh, 720px)` tall, which on
   a telephone is the whole screen and more -- so set beneath it the sentence
   telling a reader to scroll INSIDE the paper is itself a screen further down,
   and is met only by somebody who has already worked out what to do. Beside
   the paper on a wide screen the two are read together and the order is the
   caption order the design intends, so this turns on where the fault is and
   nowhere else.

   `order` on the EMBED rather than on the note, and that is what keeps this to
   one declaration. Ordering the note would have meant `order: -1`, which puts
   it above the section's heading as well; sending the embed to the end instead
   leaves the head, the body and the note at their default 0 in source order
   and needs to name none of them. So a paragraph added to this section later
   lands where its author wrote it rather than in a list somebody has to
   remember to update.

   `:has()` selects the one `.wrap` that carries a paper, `.wrap` being every
   section's measure on this page and this section having no id of its own.
   Where `:has()` is unsupported the block is dropped whole and the order
   stands as authored -- the same trade `body:has(> .alv-foot)` makes for the
   sticky footer. */
@media(max-width:900px) {
  .alv-ed .wrap:has(> .examembed) { display:flex; flex-direction:column }
  .alv-ed .wrap:has(> .examembed) > .examembed { order:1; margin-top:clamp(10px,1.4vw,16px) }
  .alv-ed .wrap:has(> .examembed) > .examnote { margin-top:clamp(18px,2.2vw,28px) }
}
/* ===== THE BANDS =====
   Was `.bandsframe`: the retired /the-bands/ page, whole, framed in an iframe
   on a page that is already made of sections. Nothing about it needed to be a
   document — it carried its own copy of the College's greens and golds (drifted
   from them, as every private copy had), its copy could not be translated, no
   crawler could read it, and it sized itself by postMessage against a standing
   1600px. It is markup now, so the ground is the section's: every colour below
   comes from the `--ground-*` contract and the whole block flips if the section
   is told `green` instead of `cream`.

   The threshold panel takes the look the frame's own second <style> block gave
   it — a gold wash between two hairlines — rather than the design's full-bleed
   gold slab underneath, which was written for a page of its own and is far too
   loud a third of the way down a section. */
.alv-ed .bdkey { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); margin:clamp(32px,4vw,54px) 0 0 }
.alv-ed .bdcell { position:relative; padding:20px 6px 18px; text-align:center; border-right:1px solid var(--gold-line) }
.alv-ed .bdcell:last-child { border-right:0 }
.alv-ed .bdcell .g { font-family:var(--word); font-weight:600; font-size:calc(clamp(30px,3.4vw,46px) * var(--fs-scale)); line-height:1; color:var(--gold); display:block }
.alv-ed .bdcell .c { display:block; text-transform:uppercase; letter-spacing:.2em; font-size:var(--fs-eyebrow-sm); color:var(--ground-mute); margin-top:8px }
.alv-ed .bdcell.is-d .g { color:var(--gold-dim) }
/* The gate marks where C sits, which is the one thing the four letters do not
   say by themselves. */
.alv-ed .bdgate { position:absolute; left:0; top:-1px; bottom:-1px; width:2px; background:var(--gold-dim) }
.alv-ed .bdgate::after { content:"Threshold"; position:absolute; left:8px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; text-transform:uppercase; letter-spacing:.24em; font-size:calc(9px * var(--fs-scale)); color:var(--ground-kick); white-space:nowrap }
/* The ladder */
.alv-ed .bdstage { display:flex; align-items:center; gap:16px; font-family:var(--word); text-transform:uppercase; letter-spacing:.28em; font-size:var(--fs-eyebrow); color:var(--ground-kick); margin:clamp(32px,4vw,46px) 0 6px }
.alv-ed .bdstage .n { color:var(--gold) }
.alv-ed .bdstage .ln { flex:1; height:1px; background:var(--gold-line) }
.alv-ed .bdtier { display:grid; grid-template-columns:minmax(110px,190px) 1fr; gap:clamp(20px,4vw,54px); align-items:start; padding:clamp(22px,2.8vw,34px) 0; border-bottom:1px solid var(--gold-line) }
.alv-ed .bdglyph { font-family:var(--word); font-weight:600; font-size:calc(clamp(50px,6vw,82px) * var(--fs-scale)); line-height:.78; color:var(--gold); letter-spacing:-.01em }
/* D is drawn hollow to read as the level the study begins at rather than the
   one it is held to. */
.alv-ed .bdtier.is-d .bdglyph { color:transparent; -webkit-text-stroke:1.6px var(--gold-dim) }
.alv-ed .bdsteps { display:flex; gap:5px; margin-top:16px }
.alv-ed .bdsteps i { width:26px; height:4px; background:var(--gold-line); border-radius:2px }
.alv-ed .bdsteps i.on { background:var(--gold) }
.alv-ed .bdlabel { font-family:var(--word); text-transform:uppercase; letter-spacing:.24em; font-size:var(--fs-eyebrow); color:var(--ground-kick); margin-bottom:4px }
.alv-ed .bdlabel .role { color:var(--ground-mute) }
.alv-ed .bdlead { font-family:var(--word); font-weight:500; font-size:calc(clamp(22px,2.2vw,31px) * var(--fs-scale)); line-height:1.16; color:var(--ground-ink); margin:8px 0 14px; letter-spacing:.004em }
.alv-ed .bdbody { font-family:var(--body); font-size:calc(clamp(15.5px,.5vw+13px,17.5px) * var(--fs-scale)); line-height:calc(1.66 * var(--lh-scale)); color:var(--ground-ink-soft); max-width:62ch; margin:0 }
.alv-ed .bdbody b { color:var(--ground-kick); font-weight:600 }
/* The threshold — C, set apart because it is the one Band that opens something */
.alv-ed .bdthr { background:linear-gradient(100deg,rgba(184,150,46,.10),rgba(201,169,74,.22),rgba(184,150,46,.10)); border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); margin:clamp(26px,3vw,38px) 0 }
.alv-ed .bdthr-in { display:grid; grid-template-columns:minmax(110px,190px) 1fr; gap:clamp(20px,4vw,54px); align-items:center; padding:clamp(24px,3vw,38px) clamp(18px,2.4vw,32px) }
.alv-ed .bdthr-c { font-family:var(--word); font-weight:700; font-size:calc(clamp(50px,6vw,82px) * var(--fs-scale)); line-height:.78; color:var(--gold); letter-spacing:-.01em }
.alv-ed .bdthr-tag { display:inline-block; font-family:var(--word); text-transform:uppercase; letter-spacing:.34em; font-size:var(--fs-eyebrow); color:var(--ground-kick); border-bottom:1px solid var(--gold-line); padding-bottom:6px; margin-bottom:12px }
.alv-ed .bdthr-head { font-family:var(--word); font-weight:600; font-size:calc(clamp(26px,3.2vw,42px) * var(--fs-scale)); line-height:1.04; color:var(--ground-ink); margin:0 0 14px; letter-spacing:.004em }
.alv-ed .bdnote { font-family:var(--word); font-style:italic; font-size:calc(clamp(16px,1vw+12px,19px) * var(--fs-scale)); line-height:calc(1.5 * var(--lh-scale)); color:var(--ground-ink-soft); max-width:52ch; margin:clamp(26px,3.4vw,44px) 0 0 }
.alv-ed .bdnote b { font-style:normal; font-weight:600; color:var(--ground-ink) }

@media(max-width:820px) {
  .alv-ed .bdtier, .alv-ed .bdthr-in { grid-template-columns:1fr; gap:6px }
  .alv-ed .bdglyph, .alv-ed .bdthr-c { font-size:calc(clamp(56px,16vw,84px) * var(--fs-scale)) }
  .alv-ed .bdsteps { margin-top:10px; margin-bottom:6px }
  .alv-ed .bdcell .c { display:none }
}

@media(max-width:480px) {
  .alv-ed .bdgate::after { font-size:calc(8px * var(--fs-scale)); letter-spacing:.14em }
}
.alv-ed .instrframe { background:var(--ivory) }
.alv-ed .instrframe iframe { width:100%; border:0; display:block; background:var(--ivory) }
/* The College Record's own head was `.rechdr` -- a two-column grid whose
   second column had emptied, holding a `.rechead` at up to 45.6px, a `.lrule`
   span no stylesheet had ever dressed, and `<br><br>` for the gap between the
   kicker and the heading. It is the estate's `.head.tight` now, so the type
   is `--fs-h2` like every other section heading, the rule is `.head::after`
   like every other head's, and the gap under it is this component's, below.
   `.kick.ch` went with it: the last `.ch` on the estate, and a no-op, since
   `--ground-kick` on a green section is already `--gold-soft`. */
.alv-ed .recexample { margin-top:clamp(18px,2.2vw,30px) }
.alv-ed .figopen { position:absolute; bottom:12px; right:12px; z-index:4; font-family:var(--word); text-transform:uppercase; letter-spacing:.16em; font-size:var(--fs-eyebrow); color:var(--g3); background:var(--gold-soft); padding:6px 13px; border-radius:2px; pointer-events:none; transition:transform .25s }
.alv-ed .figtile:hover .figopen { transform:translateY(-2px) }
.alv-ed .figmeta { padding:15px 4px 0 }
.alv-ed .figt { font-family:var(--word); font-size:clamp(20px,1.7vw,25px); color:#20301a; letter-spacing:.01em }
.alv-ed .figd { font-family:var(--body); font-size:var(--fs-note-alt); line-height:1.2; color:#4a4c3a; margin:6px 0 0; max-width:54ch }
/* Not scoped, and it cannot be: `figlock` goes on <body>, which is an
   ANCESTOR of .alv-ed rather than a descendant, so `.alv-ed body.figlock`
   matches nothing and the page scrolls behind the open lightbox. */
body.figlock { overflow:hidden }
.alv-ed .figmodal { position:fixed; inset:0; z-index:1000; display:none }
.alv-ed .figmodal.on { display:block }
.alv-ed .figmodal-back { position:absolute; inset:0; background:rgba(9,20,13,.88); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) }
.alv-ed .figmodal-panel { position:absolute; inset:clamp(10px,3vw,44px); background:#0b1a11; border:1px solid rgba(184,150,46,.34); border-radius:4px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 50px 120px -50px rgba(0,0,0,.9) }
.alv-ed .figmodal-head { display:flex; align-items:center; gap:16px; padding:clamp(12px,1.6vw,18px) clamp(16px,2vw,26px); border-bottom:1px solid rgba(184,150,46,.22); background:var(--g3) }
.alv-ed .figmodal-eyebrow { font-family:var(--word); text-transform:uppercase; letter-spacing:.3em; font-size:var(--fs-eyebrow-sm); color:#8a6d1e; white-space:nowrap }
.alv-ed .figmodal-title { flex:1; font-family:var(--word); font-size:clamp(18px,1.8vw,26px); color:var(--cream); letter-spacing:.01em }
.alv-ed .figmodal-close { background:none; border:1px solid rgba(184,150,46,.4); color:var(--gold-soft); font-family:var(--word); text-transform:uppercase; letter-spacing:.16em; font-size:var(--fs-eyebrow); padding:8px 16px; border-radius:2px; cursor:pointer; transition:background .2s,color .2s; white-space:nowrap }
.alv-ed .figmodal-close:hover,
.alv-ed .figmodal-close:focus-visible { background:var(--gold-soft); color:var(--g3); outline:none }
.alv-ed .figmodal-body { flex:1; overflow:hidden; background:#0b1a11 }
.alv-ed .figmodal-frame { width:100%; height:100%; border:0; display:block; background:#0b1a11 }

@media(max-width:640px) {
  .alv-ed .figmodal-eyebrow { display:none }
  .alv-ed .figmodal-panel { inset:0; border-radius:0 }
}

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

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

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

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

/* ===== THE SCROLL CUE =====
   A chevron in a disc, at the foot of a frame that scrolls inside itself. It
   is built by college.js and never by the template -- the reasoning is beside
   the code, and the short of it is that it carries no words and must not be on
   a page whose script has not arrived.

   `pointer-events: none` is load-bearing rather than tidy: the cue sits over
   the bottom edge of a live document, and the examination paper has answer
   controls that reach that edge. A hint that eats a click on the thing it is
   hinting about is worse than no hint.

   The disc is drawn rather than left transparent because these two frames have
   different grounds -- the paper is cream inside and the Record is green -- and
   a bare gold chevron reads on one and disappears on the other.

   THE ANIMATION IS THE CUE, so under `prefers-reduced-motion` there is nothing
   left to say and the mark simply stands still for its four seconds and then
   goes. It is not made permanent there: a reader who has asked for less motion
   has not asked for more furniture.

   IT SITS IN THE MIDDLE OF THE FRAME, AND NOT AT THE FOOT. The foot is where
   a "more below" cue belongs and it is the one place in these two documents
   that is spoken for: the examination paper carries a sticky bar across its
   bottom edge with the answered count at one end and Submit at the other, so
   a cue centred at the foot landed on the Submit button. We cannot see into
   either frame to find out what is at the bottom of it -- they are sandboxed
   without `allow-same-origin` -- so the placement has to be one that is safe
   without looking, and the centre is the safest there is: a document puts its
   controls at its edges and its reading in the middle. It is also where the
   eye already is when the frame arrives, which is what a cue that plays once
   on arrival needs. */
.alv-ed .scrollcue {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  /* Nearly opaque, because the centre of a frame is where the reading is: at
     the edge the disc had nothing behind it and .78 was enough, and over a
     paragraph the words showed through the chevron and both read as a smudge.
     Not fully opaque -- a hint that blanks what is under it is a hole. */
  background: rgba(7, 17, 11, .93);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease
}

.alv-ed .scrollcue svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2
}

.alv-ed .is-cueing .scrollcue {
  opacity: 1
}

.alv-ed .is-cueing .scrollcue svg {
  animation: alvScrollCue 1.15s ease-in-out 3
}

@keyframes alvScrollCue {
  0%, 100% { transform: translateY(-3px) }
  50% { transform: translateY(4px) }
}

@media(prefers-reduced-motion:reduce) {
  .alv-ed .is-cueing .scrollcue svg { animation: none }
}