@import "/css/scrollcraft.css";

/* The documents. Paper, one column, nothing pinned. These are read, not
   watched, so the only motion is a reveal on arrival. */

.doc { padding: clamp(7rem, 16vh, 10rem) var(--gut) 0; }
.doc__head, .doc__body, .jump { width: min(100%, var(--wrap)); margin-inline: auto; }

.doc__head { display: grid; gap: .9rem; padding-bottom: clamp(2rem, 5vh, 3.5rem);
  border-bottom: 1px solid var(--line); }
.doc__back a {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  color: var(--gold-deep); text-decoration: none;
}
.doc__back a::before { content: "\2190"; }
.doc__back a:hover { text-decoration: underline; text-underline-offset: .3em; }
.doc__eyebrow {
  font-size: .74rem; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-deep);
}
.doc__head h1 { max-width: 22ch; }
.doc__lede { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
  line-height: 1.42; color: var(--ink-soft); max-width: 46rem; }
.doc__when { font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }

.doc__body { padding-block: clamp(2.2rem, 6vh, 4rem) clamp(4rem, 12vh, 7rem); display: grid; gap: 1.35rem; }
.doc__body > :is(p, .list, .callout, .doc__links, .spans, .stat) { max-width: var(--read); }
.doc__body h2 {
  font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
  font-weight: 300; line-height: 1.16; margin-top: clamp(1.6rem, 4vh, 2.8rem); max-width: 24ch;
}
.doc__body h3 { font-family: var(--serif); font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); font-weight: 400; }
.doc__body .lede { font-size: 1.14em; color: var(--ink-soft); }
.doc__body em { font-style: italic; }
.doc__body a:not(.btn):not(.go):not(.card__go) {
  color: var(--gold-deep); text-decoration: underline;
  text-underline-offset: .22em; text-decoration-thickness: 1px;
}
.doc__anchor { display: block; scroll-margin-top: 6rem; }
.rule { border: 0; border-top: 1px solid var(--line); margin-block: 1.5rem; width: 100%; }

.list { display: grid; gap: .55rem; padding-left: 1.15rem; }
.list li { padding-left: .2rem; }
.list li::marker { color: var(--gold-deep); }

.callout {
  border-left: 2px solid var(--gold-deep); padding: .9rem 0 .9rem 1.2rem;
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.44;
}
.stat {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.24; color: var(--ink); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding-block: 1.4rem; margin-block: 1rem;
}
.doc__links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .6rem; }
.withheld { font-size: .92rem; color: var(--ink-soft); font-style: italic; max-width: var(--read); }

.jump { margin-bottom: 1.5rem; }
.jump ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.jump a {
  display: inline-block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .5em 1.1em; background: var(--paper-2);
}
.jump a:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* the seven spans */
.spans { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; max-width: none; }
.spans li {
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--gold-deep); padding-bottom: .35em;
}

/* ------------------------------------------------------------ clusters */

.progs, .themes, .tracks, .deadlines, .awards, .tiers, .vm {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: .5rem; overflow: hidden;
  margin-block: 1rem;
}
.prog, .theme, .track, .dl, .award, .tier, .vm > section {
  background: var(--paper); padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: .6rem; align-content: start;
}
.prog__lede { font-family: var(--serif); font-size: 1.18rem; color: var(--ink); }
.prog__go { margin-top: .3rem; }
.themes { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.theme__n { color: var(--gold-deep); font-family: var(--serif); font-size: 1.4rem; padding-right: .35rem; }
.track__struct { font-size: .92rem; color: var(--ink-soft); }
.track__struct span { display: block; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); margin-bottom: .2rem; }
.track__note { font-style: italic; color: var(--ink-soft); font-size: .95rem; }
.deadlines { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.dl dl { display: grid; gap: .45rem; }
.dl dt { font-size: .95rem; }
.dl dd { margin: 0 0 .4rem; font-family: var(--serif); font-size: 1.12rem; color: var(--gold-deep); }
.dl__note { font-style: italic; font-size: .9rem; color: var(--ink-soft); }
.awards { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.award dl { display: grid; gap: .3rem; }
.award dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); }
.award dd { margin: 0 0 .6rem; }
.vm { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.vm h2 { margin-top: 0; }

.approach { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; }
.approach li { background: var(--paper); padding: clamp(1.1rem, 2.6vw, 1.7rem); display: grid; gap: .4rem; }
.approach h3 { font-family: var(--sans); font-size: .82rem; letter-spacing: .2em; font-weight: 600; color: var(--gold-deep); }

.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; margin-block: 1rem; }
.glance > div { background: var(--paper); padding: 1.1rem 1.3rem; display: grid; gap: .25rem; }
.glance dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
.glance dd { margin: 0; font-family: var(--serif); font-size: 1.2rem; }

.prep { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; }
.prep li { background: var(--paper); padding: .85rem 1.2rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.prep__name { font-family: var(--serif); font-size: 1.15rem; }
.prep__tag { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); }

/* ---------------------------------------------------------------- tiers */

.tiers { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tier__tier { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); }
.tier__name { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.tier__lede { font-size: .98rem; }
.tier__term { font-size: .88rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: .6rem; margin-top: auto; }
.tier--platinum { background: linear-gradient(180deg, var(--platinum-hi), var(--paper)); }

.tbl-wrap { overflow-x: auto; margin-block: 1rem; border: 1px solid var(--line); border-radius: .5rem; }
.tbl { border-collapse: collapse; width: 100%; min-width: 46rem; font-size: .95rem; }
.tbl th, .tbl td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; background: var(--paper-2); }
.tbl tbody th { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); width: 12rem; }
.tbl tbody tr:last-child :is(th, td) { border-bottom: 0; }


.steps { list-style: none; margin: 1rem 0; padding: 0; counter-reset: s;
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; }
.steps li { background: var(--paper); padding: 1.1rem 1.3rem; display: grid; gap: .25rem; counter-increment: s; }
.steps h3::before { content: counter(s) " · "; color: var(--gold-deep); }

/* ------------------------------------------------------------- contact

   Nothing here invents a card. The mailboxes ride `pillars--plate` and the
   routes ride `pillars--rail`, which the Institute strands and the four parts
   of the Intelligence Platform already use, so `/contact/` reads as part of
   the same site rather than a page somebody styled separately. What follows
   is only the two things a strand card has no equivalent of: an address, and
   a row that is a link.

   Two plates rather than four means the default `--n` would stretch them the
   full measure. Capped, so a two-card row does not become two enormous cards. */

.reach { max-width: 60rem; }

/* Serif, gold, above the explanation, and allowed to break inside itself: a
   long mailbox on a narrow phone must wrap rather than widen the card. */
.reach__at { margin: 0; font-family: var(--serif); line-height: 1.3;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); overflow-wrap: anywhere; }
.reach__at a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* The rail rows are links. The anchor stays the words, so the accessible name
   is the sentence a reader sees, and `::after` grows the hit area to the card.
   `position: relative` on the row is what that covering box is measured from,
   and `isolation` keeps it from escaping the row on a stacking context. */
.route { position: relative; isolation: isolate; }
.doc__body .routes .pillar__name a { color: var(--ink); text-decoration: none; }
/* ::before, not ::after, and that is not a detail. An element has exactly ONE
   ::after, and the arrow below wants it. Put both on ::after and they merge
   into a single absolutely positioned box covering the card with the arrow
   sitting in its top left corner, which is what happened the first time. */
.route__go::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.route:hover { background: var(--paper-2); }
.doc__body .route:hover .pillar__name a { color: var(--gold-deep); }
.route:focus-within { background: var(--paper-2); }
/* The focus ring belongs on the card, not on the invisible covering box. */
.route__go:focus-visible { outline: none; }
.route:focus-within { outline: 2px solid var(--gold-deep); outline-offset: -2px; }

/* The arrow is the affordance that says "this is a link" without an
   underline, and it sits inline after the last word rather than floated to
   the corner: these names run to two lines at rail width, and a floated
   arrow ends up beside the FIRST line, pointing at nothing.

   Generated content, so it is not in the accessible name, and the
   non-breaking space keeps it from being orphaned onto a line of its own. */
.doc__body .routes .pillar__name a::after {
  content: "\00a0\2192"; color: var(--gold-deep); display: inline-block;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.route:hover .pillar__name a::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .doc__body .routes .pillar__name a::after { transition: none; }
  .route:hover .pillar__name a::after { transform: none; }
}

/* Marking a field optional beside its label, so the reader does not count
   asterisks to work out which ones they can skip. */
.field-row__opt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft); margin-left: .5em; }

/* ---------------------------------------------------------------- forms */

.status {
  border: 1px solid var(--line); border-radius: .5rem; background: var(--paper-2);
  padding: clamp(1.2rem, 3vw, 1.9rem); display: grid; gap: 1rem; margin-block: 1rem;
  max-width: 44rem;
}
.status__line { font-family: var(--serif); font-size: 1.22rem; line-height: 1.44; }

/* The feature variant. Same block, same sentence, more room: a mark on the
   left, the first clause promoted to a heading, and the field beside the
   words instead of under them. Used where the status panel is the last thing
   on a page rather than a footnote inside one. */
.status--feature {
  max-width: none; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr);
}
.status__emblem { display: grid; place-items: center; color: var(--gold-deep); opacity: .5; }
.status__emblem .rose { width: clamp(5rem, 9vw, 7.5rem); height: auto; }
.status--feature .status__say { display: grid; gap: .45rem; }
.status__h { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); line-height: 1.2; }
.status--feature .status__line { font-family: var(--sans); font-size: .98rem; color: var(--ink-soft); }
.status--feature .status__form { align-self: center; }

@media (max-width: 900px) {
  .status--feature { grid-template-columns: auto minmax(0, 1fr); }
  .status--feature .status__form { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .status--feature { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .status__emblem { display: none; }
}
.doc .reg { max-width: 44rem; border: 1px solid var(--line); border-radius: .5rem;
  background: var(--paper-2); padding: clamp(1.2rem, 3vw, 1.9rem); margin-block: 1rem; }
.doc .reg__grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.field-row--wide { grid-column: 1 / -1; }
.doc__dates { display: grid; gap: .8rem; margin-block: 1rem; }

/* --------------------------------------------------------------- reveal */

[data-sc-in] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-sc-in].sc-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-sc-in] { opacity: 1; transform: none; transition: none; }
}


/* ------------------------------------------------------- the page lead

   A document that opens with a picture. The shot is atmosphere and nothing
   else: it carries an empty alt, it sits behind the type rather than beside
   it, and it is masked away to nothing before it reaches the reading column,
   so no line of text is ever set over picture detail.

   The mask fades to TRANSPARENT, not to a colour. That is what lets the same
   two rules serve the light ground and the dark one: whatever shows through
   is --paper, which the theme flip has already answered. */

.doc--lead { padding-top: clamp(5.5rem, 12vh, 7.5rem); }

/* Pulled out to the window edges and padded back in, so the shot can bleed
   to the right edge of the SCREEN while the type stays on the page's
   measure. Bleeding with a negative offset instead would widen the document
   and hand every page a horizontal scrollbar. */
.lead {
  position: relative;
  margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
  /* The quote's wash has a long tail to the right and the shot sits flush to
     the window edge; neither may widen the document. `clip` on one axis only,
     because the shot also bleeds UP behind the bar and `hidden` here would
     cut that off. */
  overflow-x: clip; overflow-y: visible;
}
/* The type keeps to a column on the left and the picture gets the whole right
   side of the window. An earlier cut put the quote in a second column, over
   the picture's edge, which needed a plate of paper behind the words to stay
   legible: at that point the page was covering the photograph in order to
   show a sentence, and the photograph is the reason the header exists. The
   quote reads perfectly well under the lede, and nothing is laid over
   anything. */
.lead__wrap {
  position: relative; z-index: 1;
  width: min(100%, var(--wrap)); margin-inline: auto;
}
.lead .doc__head { border-bottom: 0; padding-bottom: 0; width: auto; }

/* The measure the picture is tuned against. Nothing in the header may cross
   it, because the feather below is at zero only up to here. */
.doc--lead .doc__head > *, .doc--lead .lead__quote { max-width: 42rem; }

/* A floor under the picture, and only where there IS one. A page whose header
   is three lines shorter than another's should not get a hero a third of the
   depth; without this the shot on /insights/ came out 116px shallower than
   the one on /institute/ for no reason a reader could see. */
@media (min-width: 1081px) { .lead__wrap { min-height: 20rem; } }
/* Shorter measure than a document lede, so the last line of it stops well
   before the picture's feather begins rather than ending a few pixels inside
   it. Structural: it holds whatever photograph the page is given, which
   tuning a gradient stop against one image does not. */
.lead .doc__lede { max-width: 34rem; }

/* Right of the reading column, bleeding off the top and the right of the
   window. `left` is what keeps it out of the text: the picture never begins
   before 52% of the viewport, and the mask has it at zero until 64%. */
.lead__shot {
  position: absolute; z-index: 0; top: calc(-1 * clamp(5.5rem, 12vh, 7.5rem)); right: 0;
  height: calc(100% + clamp(5.5rem, 12vh, 7.5rem)); width: 46%; max-width: none;
  object-fit: cover; object-position: 62% 50%;
  /* The feather runs the full height of the panel and is still at zero where
     the quote sits, so the words stand on the page's own ground rather than on
     a plate laid over the photograph. Fading to TRANSPARENT rather than to a
     colour is what makes that ground correct in both themes without a second
     rule. Tuned against _pw/lead-contrast.mjs, which grades every run in this
     header against the worst pixel inside its own box. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, transparent 11%, rgba(0,0,0,.45) 33%, #000 62%),
    linear-gradient(to bottom, #000 66%, transparent 98%);
          mask-image:
    linear-gradient(to right, transparent 0, transparent 11%, rgba(0,0,0,.45) 33%, #000 62%),
    linear-gradient(to bottom, #000 66%, transparent 98%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  pointer-events: none;
}

.lead__shot--dim { opacity: var(--shot-dim, 1); }

/* The gold rule under the h1. A span, not an hr: it is a mark in the header's
   rhythm, not a division between two things. */
.doc__rule { display: block; width: 3.6rem; height: 1px; background: var(--gold-deep); opacity: .8; margin-block: .35rem; }

.lead__quote {
  position: relative; z-index: 1;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.08rem, .98rem + .5vw, 1.35rem); line-height: 1.5;
  color: var(--ink); border-left: 2px solid var(--gold-deep);
  padding: .2rem 0 .2rem 1.15rem; margin-top: clamp(1.5rem, 4vh, 2.4rem);
  text-wrap: pretty;
}


/* Under 1080 the bar has already collapsed to a drawer. The picture goes at
   the same breakpoint: below it there is no column for the quote to sit in,
   so the quote drops under the lede and the shot has nowhere left to be that
   is not behind a line of text. */
@media (max-width: 1080px) {
  .lead__wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lead__shot { display: none; }
  .lead__quote { margin-top: clamp(1.4rem, 4vh, 2.2rem); max-width: var(--read); }
  /* nothing behind it to wash out, and its right inset was widening the page */
  .lead__quote::before { display: none; }
}

/* -------------------------------------------------- the Institute strands */

.pillars {
  list-style: none; margin: .5rem 0 clamp(1.6rem, 4vh, 2.6rem); padding: 0;
  display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  max-width: none;
}
.pillar { display: grid; gap: .55rem; align-content: start; background: var(--paper); }
.pillar__ico { color: var(--gold-deep); }
.pillar__ico .ico { width: 1.6rem; height: 1.6rem; }
.pillar__say { font-size: .92rem; line-height: 1.5; color: var(--ink-soft); max-width: none; }

/* rail · one panel, hairline dividers, the names set as small capitals.
   The 1px grid gap IS the divider: the panel's background shows through it. */
.pillars--rail {
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: .5rem; overflow: hidden;
}
.pillars--rail .pillar { padding: clamp(1.1rem, 2.2vw, 1.6rem); }
.doc__body .pillars--rail .pillar__name {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.35;
  color: var(--ink); margin-top: .15rem; max-width: none;
}

/* plate · separate cards, each ruled, with the mark in a ring and the name
   in the serif. More air per card, so it wants a wider minimum than rail. */
.pillars--plate { gap: clamp(.7rem, 1.4vw, 1rem); background: none; }
.pillars--plate .pillar {
  border: 1px solid var(--line); border-radius: .5rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem); gap: .5rem;
}
.pillars--plate .pillar__ico {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 999px;
  border: 1px solid var(--gold-deep); margin-bottom: .5rem;
}
.pillars--plate .pillar__ico .ico { width: 1.35rem; height: 1.35rem; }
.doc__body .pillars--plate .pillar__name {
  font-family: var(--serif); font-weight: 400; line-height: 1.2;
  font-size: clamp(1.15rem, 1.05rem + .35vw, 1.4rem);
  color: var(--ink); margin-top: 0; max-width: none;
}

@media (max-width: 1180px) {
  .pillars--plate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* four across does not become three across, it becomes two by two. Three
     leaves one card alone on a row of its own, which reads as a mistake. */
  .pillars--plate[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) { .pillars--rail  { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .pillars--plate { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .pillars--rail  { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .pillars--plate { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px)  { .pillars--rail  { grid-template-columns: minmax(0, 1fr); } }


/* ------------------------------------------- the figure, and what it asks

   One row, two halves: the only statistic on the site on the left, the only
   thing the page wants from a reader on the right, with a rule between them.
   They are paired deliberately. The figure is the argument; the field is the
   answer to it. */

.statrow {
  display: grid; gap: clamp(1.2rem, 3vw, 2.6rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: stretch; margin-block: clamp(1.2rem, 3vh, 2rem);
  max-width: none;
}

.figure {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(1rem, 2.4vw, 1.8rem);
  position: relative; padding-right: clamp(1.2rem, 3vw, 2.6rem);
}
/* the rule between the halves, with the spark sitting on it */
.figure::after {
  content: ""; position: absolute; right: 0; top: 6%; bottom: 6%;
  width: 1px; background: linear-gradient(to bottom, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.figure__mark { display: grid; place-items: center; color: var(--gold-deep); opacity: .75; }
.figure__mark .medallion { width: clamp(4.5rem, 8vw, 6.5rem); height: auto; }

/* .stat is the shared class the gate and the old treatment both know. The
   borders it carries elsewhere are dropped here: the rule above does that job
   and two rules in one row is a table, not a figure. */
.figure__say {
  border: 0; padding-block: 0; margin-block: 0;
  display: grid; gap: .1rem; max-width: none;
}
.figure__n {
  font-family: var(--serif); font-weight: 300; line-height: 1.02;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  letter-spacing: -.012em; color: var(--ink);
}
.figure__sub {
  font-family: var(--serif); line-height: 1.24;
  font-size: clamp(1rem, .9rem + .55vw, 1.4rem); color: var(--ink-soft);
}

/* the status panel as the row's right half: no mark of its own, because the
   medallion opposite is already the one mark in the row */
.statrow .status--bare {
  margin-block: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-content: center;
}
/* Half the width it has when it runs the full page, so the heading comes down
   a step rather than breaking across two lines inside a panel this size. */
.statrow .status--bare .status__h { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.statrow .status--bare .status__line { font-size: .92rem; }

@media (max-width: 1080px) {
  .statrow { grid-template-columns: minmax(0, 1fr); }
  .figure { padding-right: 0; padding-bottom: clamp(1.2rem, 3vh, 2rem); }
  .figure::after { right: auto; left: 0; top: auto; bottom: 0; width: auto; height: 1px;
    background: linear-gradient(to right, var(--line), transparent); }
}
@media (max-width: 560px) {
  .figure { grid-template-columns: minmax(0, 1fr); gap: .9rem; justify-items: start; }
  .figure__mark { display: none; }
}