/*
 * Site sections: the shared library behind every website layout (docs/site-kinds-design-note.md, sections 3 and 6).
 * Built by PR 1 (Simple): S1 header (bar, minimal), S2 footer, S3 hero (text only, split), S4 notice banner,
 * S7 facts strip, S8 text block, S9 form (with segmented radios), S10 gallery. Later layouts add their own sections
 * to this file, each built by the first layout that needs it (note 7.1).
 *
 * Rules this file keeps:
 *  - It reads ONLY tokens from tokens/contract.json (rule 1). No colour, type value, control height, radius or
 *    shadow is written here. A control's height is read from --ross-btn-h / --ross-input-h, never written as 40px
 *    or 44px (note 4.7).
 *  - The only sizes written here are the layout-owned structural constants of note 4.8, kept in the --site- namespace:
 *    --site-max, --site-measure, --site-cols (a width or a count, never a colour, a type value or a control height).
 *  - Focus is ONE line (CONTRACT.md rule 9). A control with a box takes the line on its own border and gives the
 *    pixel back from its padding; text with no box takes the one outline (base.css).
 *  - No script. Anything that needs behaviour is a native element (details, radios, links) or a Core behaviour.
 *
 * Contract 1.1 (converted from Simple's first PR): the label role below reads the three label tokens (case, tracking, size), and the
 * touch size is the contract's own [data-touch="large"] block (tokens/contract.json "touch"), no longer repeated here.
 */

:root {
  --site-max: 72rem;      /* maximum content width */
  --site-measure: 66ch;   /* readable text measure */
  --site-cols: 2;         /* gallery columns: 2 on a phone, 3 from 760px */
}
@media (min-width: 760px) { :root { --site-cols: 3; } }

.site-wrap { width: 100%; max-width: var(--site-max); margin-inline: auto; padding-inline: var(--ross-space-4); }
@media (min-width: 760px) { .site-wrap { padding-inline: var(--ross-space-5); } }

/* Headings on a site: the contract's one scale (h1 page, h2 section, h3 panel, h4 card) in the kit's heading face. */
.site-h1, .site-h2, .site-h3, .site-h4 {
  font-family: var(--ross-font-heading); font-weight: var(--ross-heading-weight);
  letter-spacing: var(--ross-heading-tracking); text-transform: var(--ross-heading-case);
  line-height: 1.2; margin: 0; color: var(--ross-text);
}
.site-h1 { font-size: var(--ross-h1); }
.site-h2 { font-size: var(--ross-h2); }
.site-h3 { font-size: var(--ross-h3); }
.site-h4 { font-size: var(--ross-h4); }

/* The label role (contract 1.1, note 4.3): small spaced capitals set per kit. The kicker above a headline, the key of a fact
   and a footer group title. Body face and weight; the colour is text-muted (gated on the page and on a panel). Never a
   heading, a button or a form field label. */
.site-label, .site-fact dt, .site-footer h2 {
  font-family: var(--ross-font); font-weight: inherit; color: var(--ross-text-muted);
  font-size: var(--ross-label-size); letter-spacing: var(--ross-label-tracking); text-transform: var(--ross-label-case);
}

/* ---------- Links ---------- */
/* A button that is a link: no underline */
a.btn { text-decoration: none; }
/* A link that is a box of its own (the site name, a nav link): a transparent 1px border that focus recolours and
   thickens, the pixel coming back from the padding, exactly like a button. Its hit height is the resolved control
   height plus 2 x --ross-space-1, never a literal (note 4.7). */
.site-link {
  display: inline-flex; align-items: center;
  min-height: calc(var(--ross-btn-h) + 2 * var(--ross-space-1));
  padding: 0 var(--ross-space-2); border: 1px solid transparent; border-radius: var(--ross-radius-sm);
  color: var(--ross-text); text-decoration: none; font-weight: 550;
}
.site-link:hover { text-decoration: underline; }
.site-link:focus-visible { outline: none; border-color: var(--ross-focus-line); border-width: var(--ross-focus-width); padding-inline: calc(var(--ross-space-2) + 1px - var(--ross-focus-width)); }
.site-link[aria-current="page"] { background-color: var(--ross-accent-bg); color: var(--ross-accent-strong); }
/* A link inside a sentence: text with no box, so its one line is the outline from base.css */
.site-text a, .site-notice a, .site-footer a:not(.site-link) { color: var(--ross-accent-strong); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- S1 Site header (bar, minimal) ---------- */
.site-header { position: relative; background: var(--ross-bg); border-bottom: 1px solid var(--ross-border); }
.site-header-in { display: flex; align-items: center; gap: var(--ross-space-3); padding-block: var(--ross-space-2); }
.site-name {
  margin-right: auto; font-family: var(--ross-font-heading); font-weight: var(--ross-heading-weight);
  letter-spacing: var(--ross-heading-tracking); font-size: var(--ross-h4);
}
.site-nav ul, .site-menu-panel ul { display: flex; gap: var(--ross-space-1); list-style: none; margin: 0; padding: 0; }
.site-nav { display: none; }
@media (min-width: 760px) { .site-nav { display: block; } .site-menu { display: none; } }
/* The phone menu is a native disclosure: no script, and the browser reports open or closed to assistive technology */
.site-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  min-height: var(--ross-btn-h); padding: 0 var(--ross-btn-pad-x);
  font: inherit; font-size: var(--ross-btn-font); font-weight: 550; color: var(--ross-text);
  background: var(--ross-surface-2); border: 1px solid var(--ross-border-strong); border-radius: var(--ross-radius-sm);
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:focus-visible { outline: none; border-color: var(--ross-focus-line); border-width: var(--ross-focus-width); padding-inline: calc(var(--ross-btn-pad-x) + 1px - var(--ross-focus-width)); }
.site-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  background: var(--ross-surface); border-bottom: 1px solid var(--ross-border); padding: var(--ross-space-2) var(--ross-space-4);
}
.site-menu-panel ul { flex-direction: column; }

/* ---------- Sections ---------- */
.site-section { padding-block: var(--ross-space-5); }
.site-section > .site-wrap > .site-h2, .site-section > .site-h2 { margin-bottom: var(--ross-space-4); }
.site-main { display: block; }
.site-main:focus-visible { outline: var(--ross-focus-width) solid var(--ross-focus-line); outline-offset: calc(-1 * var(--ross-focus-width)); }

/* ---------- S3 Hero (text only, split) ---------- */
.site-hero { padding-block: var(--ross-space-6); }
.site-hero .site-label { margin: 0 0 var(--ross-space-2); }
.site-hero .site-h1 { margin-bottom: var(--ross-space-3); max-width: 22ch; }
.site-lead { margin: 0; font-size: var(--ross-text-lg); max-width: var(--site-measure); }
/* The action sits in normal flow on kit paint, never on a photo (note 4.6 rule 3) */
.site-actions { display: flex; flex-wrap: wrap; gap: var(--ross-space-3); margin-top: var(--ross-space-5); }
.site-hero[data-variant="split"] .site-wrap { display: grid; gap: var(--ross-space-5); align-items: center; }
@media (min-width: 760px) { .site-hero[data-variant="split"] .site-wrap { grid-template-columns: 1fr 1fr; } }
.site-hero-media { margin: 0; }

/* A content photograph: the class a future photo treatment hangs on (note 4.5). Never on a logo or an icon. */
.photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ross-radius-md); background: var(--ross-surface-2); }

/* ---------- S4 Notice banner ---------- */
/* The tint is laid over the surface, exactly as the contract's pairs measure it */
.site-notice {
  display: flex; gap: var(--ross-space-3); align-items: flex-start;
  padding: var(--ross-space-3) var(--ross-space-4); border: 1px solid var(--ross-border); border-radius: var(--ross-radius-md);
  background-color: var(--ross-surface); color: var(--ross-text);
  background-image: linear-gradient(var(--ross-info-bg), var(--ross-info-bg));
}
.site-notice[data-status="ok"] { background-image: linear-gradient(var(--ross-ok-bg), var(--ross-ok-bg)); }
.site-notice[data-status="warn"] { background-image: linear-gradient(var(--ross-warn-bg), var(--ross-warn-bg)); }
.site-notice[data-status="bad"] { background-image: linear-gradient(var(--ross-bad-bg), var(--ross-bad-bg)); }
/* Never colour alone: an icon and a word (as in Site health). The tone is the status colour, gated on its own tint. */
.site-notice-mark, .site-notice-word { color: var(--ross-info); }
.site-notice[data-status="ok"] :is(.site-notice-mark, .site-notice-word) { color: var(--ross-ok); }
.site-notice[data-status="warn"] :is(.site-notice-mark, .site-notice-word) { color: var(--ross-warn); }
.site-notice[data-status="bad"] :is(.site-notice-mark, .site-notice-word) { color: var(--ross-bad); }
.site-notice-mark {
  flex: none; width: 1.5rem; height: 1.5rem; border: 2px solid currentColor; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--ross-text-xs); font-weight: 700; line-height: 1;
}
.site-notice p { margin: 0; font-size: var(--ross-text-sm); }
.site-notice-word { font-weight: 700; margin-right: var(--ross-space-1); }
.site-notice-wrap { padding-top: var(--ross-space-4); }
.site-form + .site-notice { margin-top: var(--ross-space-4); }
.site-notice-dates { display: block; margin-top: var(--ross-space-1); font-size: var(--ross-text-xs); color: var(--ross-text-muted); }

/* ---------- S7 Facts strip ---------- */
.site-facts {
  display: grid; gap: var(--ross-space-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 0; padding: var(--ross-space-4); background: var(--ross-surface); border: 1px solid var(--ross-border); border-radius: var(--ross-radius-lg);
}
.site-fact { min-width: 0; }
.site-fact dd { margin: var(--ross-space-1) 0 0; font-size: var(--ross-text-md); color: var(--ross-text); overflow-wrap: anywhere; }

/* ---------- S8 Text block ---------- */
.site-text { max-width: var(--site-measure); font-size: var(--ross-text-md); line-height: 1.6; }
.site-text > :first-child { margin-top: 0; }
.site-text h3, .site-text h4 { font-family: var(--ross-font-heading); font-weight: var(--ross-heading-weight); letter-spacing: var(--ross-heading-tracking); text-transform: var(--ross-heading-case); line-height: 1.25; margin: var(--ross-space-5) 0 var(--ross-space-2); }
.site-text h3 { font-size: var(--ross-h3); }
.site-text h4 { font-size: var(--ross-h4); }
.site-text p, .site-text ul, .site-text ol { margin: 0 0 var(--ross-space-3); }
.site-text li { margin-bottom: var(--ross-space-1); }

/* ---------- S9 Form (the field family from specimens/field-family/fields.css, plus segmented radios) ---------- */
.site-form { max-width: 40rem; }
.site-form .rf-label { font-size: var(--ross-text-sm); }
/* Required is said in text, not by a colour edge (note 6, S9) */
.site-form .rf-need { font-weight: 400; color: var(--ross-text-muted); }
/* Hidden from everyone: a honeypot field is for bots only (step 9, Q-002) */
.site-hp { display: none; }
.site-seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.site-seg > legend { padding: 0; margin-bottom: 2px; font-size: var(--ross-text-sm); font-weight: 600; color: var(--ross-text-muted); }
.site-seg-opts { display: flex; flex-wrap: wrap; gap: var(--ross-space-2); }
/* Radios drawn as buttons. The input is a one-pixel invisible control inside its label (a click on the label chooses it,
   the arrow keys move between them); the label is the one element that draws the line. */
.site-seg-opt {
  position: relative; display: inline-flex; align-items: center; cursor: pointer;
  min-height: var(--ross-btn-h); padding: 0 var(--ross-btn-pad-x);
  font-size: var(--ross-btn-font); font-weight: 550; color: var(--ross-text);
  background-color: var(--ross-surface); border: 1px solid var(--ross-border-strong); border-radius: var(--ross-radius-sm);
}
.site-seg-opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
/* Selected is a state marker: a tint and a mark and bold type, never a ring in the focus or accent colour (rule 9) */
.site-seg-opt:has(input:checked) { background-image: linear-gradient(var(--ross-accent-bg), var(--ross-accent-bg)); color: var(--ross-accent-strong); font-weight: 700; }
.site-seg-opt:has(input:checked)::before { content: "\2713"; margin-right: var(--ross-space-1); }
/* the invisible input sits at the padding edge, which moves in by the pixel the border gains: put it back, so nothing moves */
.site-seg-opt:has(input:focus-visible) input { margin: calc(1px - var(--ross-focus-width)) 0 0 calc(1px - var(--ross-focus-width)); }
.site-seg-opt:has(input:focus-visible) { border-color: var(--ross-focus-line); border-width: var(--ross-focus-width); padding-inline: calc(var(--ross-btn-pad-x) + 1px - var(--ross-focus-width)); }
.site-form-actions { display: flex; flex-wrap: wrap; gap: var(--ross-space-3); align-items: center; }
select.rf-control { appearance: auto; }

/* ---------- S10 Gallery ---------- */
.site-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ross-space-3); grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr)); }
.site-gallery figure { margin: 0; }
.site-gallery figcaption { margin-top: var(--ross-space-1); font-size: var(--ross-text-xs); color: var(--ross-text-muted); }

/* ---------- S2 Site footer ---------- */
.site-footer { margin-top: var(--ross-space-6); border-top: 1px solid var(--ross-border); padding-block: var(--ross-space-5); background: var(--ross-bg); }
.site-footer-grid { display: grid; gap: var(--ross-space-5); }
@media (min-width: 760px) { .site-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer address { font-style: normal; font-size: var(--ross-text-sm); line-height: 1.6; color: var(--ross-text); }
.site-footer h2 { margin: 0 0 var(--ross-space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer-small { margin: var(--ross-space-5) 0 0; font-size: var(--ross-text-xs); color: var(--ross-text-muted); }


/* =====================================================================================================================
 * PR 3 (Magazine): S1 masthead, S5 card grid (story, story overlay, person), S6 row list and its pagination variant,
 * S11 accent tile, S12 cover, S13 article, the scrim (note 4.6), the emphasised headline word (note 4.2/4.4) and the
 * photo treatment (note 4.5). Same rules as above: tokens only, no script, focus is one line.
 * ===================================================================================================================== */

/* ---------- The emphasised headline word (note 4.4): <em>, no colour of its own ----------
   The word inherits its container's colour, so it is exactly as readable as the words around it (on the page, on an accent
   tile, on a scrim). The italic belongs to each Design Kit (Riaan, 2026-10-28): this rule names no family, only the kit's heading
   font token plus font-style: italic, so a kit that declares an italic face in its font_faces (style: italic) gets it, and a kit
   without one gets the browser's synthesized slant of its own heading face (font-synthesis allows "style", never a bold),
   never a substitute family. No kit map ships an italic face yet, so today every kit shows the synthesized slant. */
.site-h1 em, .site-h2 em, .site-h3 em, .site-h4 em { font-family: var(--ross-font-heading); font-style: italic; color: inherit; font-synthesis: style; }

/* ---------- Photo treatment (note 4.5): the kit's rule, with the per-image "keep this one in colour" exemption ---------- */
html[data-photo-treatment="mono"] .photo:not([data-treatment="colour"]) { filter: grayscale(1); }

/* ---------- The scrim (note 4.6): text on a photo sits in NORMAL FLOW on ONE uniform scrim ---------- */
/* The photo and its scrim share one grid cell: the cell grows with the text, the photo covers it, nothing is absolutely positioned. */
.mag-cell { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: 4 / 3; }
.mag-cell > * { grid-area: 1 / 1; }
.mag-cell > .photo { width: 100%; height: 100%; min-width: 0; min-height: 0; contain: size; aspect-ratio: auto; border-radius: 0; }
.mag-scrim { align-self: end; padding: var(--ross-space-4); background: var(--ross-scrim); color: var(--ross-on-scrim); min-width: 0; }
.mag-scrim :is(p, h1, h2, h3, h4, em, .site-label) { color: var(--ross-on-scrim); margin: 0; overflow-wrap: break-word; }
.mag-scrim > * + * { margin-top: var(--ross-space-2); }
/* Only a TEXT LINK may sit in the scrim (rule 3): underlined, in the overlay's text colour, its one line an outline at offset 0 (case A) */
.mag-scrim-link { display: inline-block; min-height: 1.5rem; color: var(--ross-on-scrim); text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; }
.mag-scrim-link:focus-visible { outline: var(--ross-focus-width) solid var(--ross-on-scrim); outline-offset: 0; border-radius: 0; }

/* ---------- S1 Site header, variant: masthead ---------- */
.mag-masthead-in { display: flex; flex-direction: column; align-items: center; gap: var(--ross-space-2); padding-block: var(--ross-space-3); }
.mag-dateline { display: flex; justify-content: space-between; gap: var(--ross-space-3); width: 100%; padding-bottom: var(--ross-space-2); border-bottom: 1px solid var(--ross-border); }
.mag-dateline .site-label { margin: 0; }
.mag-name {
  margin: 0; justify-content: center; text-align: center; font-size: var(--ross-h3);
  text-transform: var(--ross-label-case); letter-spacing: var(--ross-label-tracking); overflow-wrap: break-word; min-width: 0; max-width: 100%;
}
.mag-masthead-in .site-nav { width: 100%; border-top: 1px solid var(--ross-border); padding-top: var(--ross-space-2); }
.mag-masthead-in .site-nav ul { justify-content: center; flex-wrap: wrap; }
.mag-masthead-in .site-menu { align-self: center; }

/* ---------- S5 Card grid: story, story overlay, person ---------- */
.mag-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ross-space-4); grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr)); }
.mag-grid > li { display: flex; min-width: 0; }
.mag-grid > li > * { flex: 1; min-width: 0; }
/* The card: its OWN border takes the focus line (1px to 2px) and its padding gives the pixel back (2px to 1px), painted with the card's
   surface. The photo and any scrim live in .mag-media, a normal-flow child clipped to the content box, so nothing can paint into the
   padding: at least 1px of kit paint always lies between the line and the photo (note 4.6, case B). */
.mag-card {
  display: block; padding: 2px; border: 1px solid var(--ross-border-strong); border-radius: var(--ross-radius-md);
  background-color: var(--ross-surface); color: var(--ross-text); text-decoration: none;
}
a.mag-card:focus-visible { outline: none; border-color: var(--ross-focus-line); border-width: var(--ross-focus-width); padding: 1px; }
a.mag-card:hover .mag-title { text-decoration: underline; }
/* A further 1px of the card's own paint all round the media (margin), so that when a card sits at a fractional pixel the clip edge
   cannot bleed a partly covered pixel into the 1px gutter: 2px of kit paint at the line, one of them guaranteed whole. */
.mag-media { overflow: clip; border-radius: var(--ross-radius-sm); margin: 1px; }
.mag-media > .photo { border-radius: 0; }
.mag-card-body { padding: var(--ross-space-3); }
.mag-card-body > * { margin: 0; }
.mag-card-body > * + * { margin-top: var(--ross-space-2); }
.mag-title { text-underline-offset: 0.15em; }
.mag-dek { font-size: var(--ross-text-sm); }
.mag-person-role { margin: 0; }

/* ---------- S11 Accent block, variant: tile (the opinion tile). A filled control, so it takes the two-tone on-accent line (rule 9) ---------- */
.mag-tile {
  display: block; padding: var(--ross-space-4); border: 1px solid transparent; border-radius: var(--ross-radius-md);
  background-color: var(--ross-accent); color: var(--ross-on-accent); text-decoration: none;
}
.mag-tile:focus-visible { outline: none; border-color: var(--ross-focus-on-accent); border-width: var(--ross-focus-width); padding: calc(var(--ross-space-4) - 1px); box-shadow: inset 0 0 0 1px var(--ross-focus-on-accent-edge); }
.mag-tile > * { margin: 0; color: var(--ross-on-accent); }
.mag-tile > * + * { margin-top: var(--ross-space-3); }
.mag-tile .site-label { color: var(--ross-on-accent); }
a.mag-tile:hover .site-h3 { text-decoration: underline; }

/* ---------- S12 Cover: a wide cover story on the scrim, and a narrow stack of side stories ---------- */
.mag-cover { padding-block: var(--ross-space-5); }
.mag-cover-grid { display: grid; gap: var(--ross-space-5); }
@media (min-width: 760px) { .mag-cover-grid { grid-template-columns: 2fr 1fr; align-items: start; } }
.mag-cover-main { min-width: 0; }
.mag-cover-main .mag-media { border-radius: var(--ross-radius-md); }
.mag-cover-main .mag-cell { aspect-ratio: 16 / 11; }
.mag-cover-scrim { padding: var(--ross-space-5); }
.mag-cover-scrim .site-h1 { font-size: var(--ross-h1); line-height: 1.1; }
.mag-standfirst { font-size: var(--ross-text-lg); max-width: var(--site-measure); }
.mag-side { min-width: 0; }
.mag-side > .site-h4 { margin-bottom: var(--ross-space-3); }
.mag-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ross-space-3); }

/* ---------- S6 Row list, and its pagination variant ---------- */
.mag-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ross-space-2); }
.mag-row .mag-card-body { display: grid; gap: var(--ross-space-1) var(--ross-space-4); padding: var(--ross-row-pad-y) var(--ross-space-3); min-height: var(--ross-row-min); align-content: center; }
@media (min-width: 760px) { .mag-row .mag-card-body { grid-template-columns: 9rem 1fr; align-items: center; } }
.mag-row-lead { margin: 0; }
.mag-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ross-space-3); margin-top: var(--ross-space-5); }
.mag-pager ul { display: flex; flex-wrap: wrap; gap: var(--ross-space-1); list-style: none; margin: 0; padding: 0; }
.mag-pager-where { margin: 0; }
/* The current page is a state marker: a tint, bold type and its own word "Page 2 of 5" beside the list, never a ring (rule 9) */
.mag-pager .site-link[aria-current="page"] { font-weight: 700; }

/* ---------- S13 Article ---------- */
.mag-article-head { padding-block: var(--ross-space-6) var(--ross-space-4); }
.mag-article-head > * { margin: 0; }
.mag-article-head > * + * { margin-top: var(--ross-space-3); }
.mag-article-head .site-h1 { max-width: 20ch; }
.mag-byline { margin: 0; }
.mag-lead { margin: 0 0 var(--ross-space-5); }
.mag-lead .photo { aspect-ratio: 16 / 9; border-radius: var(--ross-radius-md); }
.mag-lead figcaption { margin-top: var(--ross-space-2); font-size: var(--ross-text-xs); color: var(--ross-text-muted); max-width: var(--site-measure); }
.mag-body > h2 { font-family: var(--ross-font-heading); font-weight: var(--ross-heading-weight); letter-spacing: var(--ross-heading-tracking); text-transform: var(--ross-heading-case); font-size: var(--ross-h3); line-height: 1.25; margin: var(--ross-space-5) 0 var(--ross-space-2); }
.mag-pull {
  margin: var(--ross-space-5) 0; padding: var(--ross-space-2) 0 var(--ross-space-2) var(--ross-space-4); border-left: 4px solid var(--ross-accent);
  font-family: var(--ross-font-heading); font-weight: var(--ross-heading-weight); letter-spacing: var(--ross-heading-tracking); font-size: var(--ross-h3); line-height: 1.3; color: var(--ross-text); max-width: var(--site-measure);
}
.mag-pull p { margin: 0; }

/* ---------- S10 Gallery inside the card grid: a figure and its caption (text on the page, not on the photo) ---------- */
.site-gallery-fig { margin: 0; }
.mag-caption { margin-top: var(--ross-space-2); font-size: var(--ross-text-xs); color: var(--ross-text-muted); }

/* A story-on-a-photo card fills its grid row: the media wrapper grows with the card, the photo covers the cell */
.mag-card-overlay { display: flex; }
.mag-card-overlay .mag-media { flex: 1; min-width: 0; }
.mag-card-overlay .mag-cell { aspect-ratio: auto; width: 100%; height: 100%; min-height: 12rem; }