/* ==========================================================================
   El Farol SF — "Red or Green"
   Palette (5, each with a job):
     --paper   ground        #F2E9D8  parchment
     --ink     ink           #16100E  near-black
     --crimson accent        #7E1610  dried-chile crimson   (hue ~4)
     --ochre   secondary     #D9A22E  ochre-gold            (hue ~40)
     --field   flag / area   #2E5B23  chile-field green     (hue ~103)
   Two saturated members (crimson, field) ~99 degrees apart in hue; both are
   used as whole section grounds, not as rules.
   Type: Anton (display) / Vollkorn (text) / system mono (credits only).
   ========================================================================== */

:root {
  --paper: #F2E9D8;
  --paper-2: #E4D6BE;
  --ink: #16100E;
  --ink-soft: #3A2A24;
  --crimson: #7E1610;
  --ochre: #D9A22E;
  --field: #2E5B23;

  --rule: #C2A69A;
  --rule-dark: #A8483C;
  --on-dark: #F2E9D8;
  --on-dark-soft: #E8B8AC;
  --on-field-soft: #DCE6CE;
  --quiet: #6E5044;
  --credit: rgba(242,233,216,.74);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: Anton, "Arial Narrow", sans-serif;
  --text: Vollkorn, Georgia, "Times New Roman", serif;

  /* width system — three visibly distinct widths + bleed */
  --gutter: 20px;
  --prose: 64ch;
  --side: 0px;          /* the breakout shoulder either side of the measure */

  /* type scale */
  --fs-body: 18px;
  --fs-lead: 21px;
  --fs-cap: 15px;
  --fs-credit: 12.5px;
  --fs-label: 12px;
  --fs-mast: 46px;
  --fs-h1: 34px;
  --fs-h2: 25px;
  --fs-h3: 20px;
  --fs-year: 26px;
  --band: 44px;         /* vertical band rhythm */
  --pgap: 1.15em;       /* paragraph gap; insertions get >= 2x, min 24/32px */
}

@media (min-width: 600px) {
  :root { --gutter: 28px; --fs-mast: 62px; --fs-h1: 42px; --fs-h2: 30px; --band: 56px; }
}
@media (min-width: 900px) {
  :root {
    --gutter: 36px; --side: 64px; --prose: 65ch;
    --fs-body: 19px; --fs-lead: 23px; --fs-cap: 15.5px; --fs-mast: 92px;
    --fs-h1: 56px; --fs-h2: 36px; --fs-h3: 22px; --fs-year: 34px; --band: 72px;
  }
}
@media (min-width: 1200px) {
  :root {
    --gutter: 44px; --side: 150px; --prose: 66ch;
    --fs-body: 20px; --fs-lead: 25px; --fs-cap: 16px; --fs-credit: 13px;
    --fs-mast: 124px; --fs-h1: 68px; --fs-h2: 42px; --fs-h3: 24px;
    --fs-year: 42px; --band: 88px;
  }
}
@media (min-width: 1440px) {
  :root {
    --gutter: 52px; --side: 220px; --prose: 68ch;
    --fs-body: 21px; --fs-lead: 27px; --fs-cap: 17px;
    --fs-mast: 150px; --fs-h1: 78px; --fs-h2: 48px; --fs-h3: 26px;
    --fs-year: 50px; --band: 100px;
  }
}
/* --- above the desktop cap: the page keeps gaining, not just margin --- */
@media (min-width: 1800px) {
  :root {
    --gutter: 64px; --side: 320px; --prose: 72ch;
    --fs-body: 22px; --fs-lead: 30px; --fs-cap: 18px; --fs-credit: 14px;
    --fs-label: 13px;
    --fs-mast: 188px; --fs-h1: 92px; --fs-h2: 56px; --fs-h3: 29px;
    --fs-year: 60px; --band: 120px;
  }
}
@media (min-width: 2400px) {
  :root {
    --gutter: 80px; --side: 430px; --prose: 76ch;
    --fs-body: 24px; --fs-lead: 33px; --fs-cap: 19.5px; --fs-credit: 15px;
    --fs-mast: 240px; --fs-h1: 108px; --fs-h2: 66px; --fs-h3: 33px;
    --fs-year: 72px; --band: 148px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crimson);
  color: var(--on-dark);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-wrap: pretty;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ochre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--on-dark); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.004em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}

/* --------------------------------------------------------------- widths -- */
.wrap { width: 100%; max-width: none; padding-inline: var(--gutter); margin-inline: auto; }
@media (min-width: 1800px) { .wrap { max-width: 2120px; } }
@media (min-width: 2400px) { .wrap { max-width: 2560px; } }

.measure { max-width: var(--prose); margin-inline: auto; }

/* the article grid: bleed / breakout / prose, measure centred */
.grid {
  display: grid;
  grid-template-columns:
    [bleed-s] minmax(var(--gutter), 1fr)
    [wide-s] minmax(0, var(--side))
    [prose-s] min(var(--prose), 100% - (2 * var(--gutter))) [prose-e]
    minmax(0, var(--side)) [wide-e]
    minmax(var(--gutter), 1fr) [bleed-e];
}
.grid > * { grid-column: prose-s / prose-e; min-width: 0; }
.grid > .breakout { grid-column: wide-s / wide-e; }
.grid > .bleed { grid-column: bleed-s / bleed-e; }
.grid > .push-left { grid-column: wide-s / prose-e; }
.grid > .push-right { grid-column: prose-s / wide-e; }

/* ---------------------------------------------------------- the signature --
   One drawn red-chile-pod, stroke=currentColor, at every section opener.     */
.pod { display: block; width: auto; height: 1.5em; overflow: visible; color: inherit; opacity: .95; }
.pod--mast { height: 1.05em; margin-bottom: -.02em; }
.sec-open { display: flex; align-items: flex-start; gap: .5em; }
.sec-open .pod { flex: 0 0 auto; height: calc(var(--fs-h2) * 0.95); margin-top: -.04em; }
/* a header that runs across the page rather than stacking at the left */
.sec-head { display: grid; gap: clamp(14px, 1.8vw, 46px); grid-template-columns: 1fr; align-items: end;
  border-bottom: 2px solid currentColor; padding-bottom: clamp(12px, 1.1vw, 24px); }
@media (min-width: 1000px) { .sec-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; } }
.sec-head .deck { margin: 0; }
.sec-head .sec-more { margin: 0; white-space: nowrap; font-family: var(--display); text-transform: uppercase; font-size: var(--fs-h3); }
.sec-head .sec-more a { text-decoration: none; }

/* small section glyphs — same grid, same stroke weight, nav + kicker only */
.glyph { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* ------------------------------------------------------------- masthead -- */
.mast { background: var(--crimson); color: var(--on-dark); border-bottom: 1px solid var(--rule-dark); }
.mast__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.2em 2.4em; flex-wrap: wrap; padding-top: calc(var(--band) * .42);
}
.mast__brand { display: flex; align-items: flex-end; gap: .28em; text-decoration: none; color: inherit; font-size: var(--fs-mast); line-height: .8; }
.mast__brand .pod { align-self: flex-end; }
.mast__brand:hover { color: inherit; }
.mast__brand .pod { color: var(--ochre); }
.mast__name { font-family: var(--display); font-size: 1em; display: flex; flex-direction: column; line-height: .8; }
.mast__el {
  font-family: var(--text); font-weight: 700; font-size: .2em; line-height: 1;
  letter-spacing: .38em; text-transform: uppercase; color: var(--ochre);
  margin-bottom: .3em; padding-left: .1em;
}
.mast__lock { display: flex; align-items: flex-end; gap: .1em; line-height: .76; letter-spacing: -0.01em; }
.mast__sf {
  font-size: .38em; line-height: 1; color: var(--ochre); letter-spacing: .03em;
  border-top: .1em solid var(--ochre); padding-top: .16em; margin-bottom: .04em;
}
.mast__standing {
  margin: 0 0 .45em; max-width: 34ch; font-size: var(--fs-cap);
  line-height: 1.4; color: var(--on-dark-soft);
}
.mast__nav { padding: 0.7em 0 0; }
.navlist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
}
.navlist > li { position: relative; }
.navlist > li { border-left: 1px solid rgba(242,233,216,.2); }
.navlist > li:first-child { border-left: 0; }
.navlist a {
  display: flex; align-items: center; gap: .4em;
  padding: .68em clamp(11px, 1.5vw, 30px); text-decoration: none; color: var(--on-dark);
  font-family: var(--display); font-weight: 400;
  font-size: calc(var(--fs-label) * 1.85); letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; line-height: 1;
  box-shadow: inset 0 0 0 0 currentColor; transition: box-shadow .12s linear;
}
.navlist > li:first-child > a { padding-left: 0; }
.navlist a .glyph { width: 1.05em; height: 1.05em; opacity: .9; }
.nav-count { display: inline-flex; opacity: .58; margin-left: .1em; }
.nav-count svg { height: .5em; width: auto; display: block; overflow: visible; }
.navlist a:hover { box-shadow: inset 0 -4px 0 currentColor; }
.navlist a[aria-current="page"] { box-shadow: inset 0 -4px 0 currentColor; }

/* one size for every entry; each section keeps its own colour */
.navlist .nav-chile   { color: #F2E9D8; }
.navlist .nav-dishes  { color: #D9A22E; }
.navlist .nav-ground  { color: #E8B8AC; }
.navlist .nav-growers { color: #B7CE9A; }
.navlist .nav-trails  { color: #DCE6CE; }
.navlist .nav-archive { color: #C2A69A; }

/* second level — Chile only. Hover on pointer, tap-toggle via :focus-within */
.has-sub > .sub {
  list-style: none; margin: 0; padding: .55em 1.1em .75em;
  position: absolute; left: -1.1em; top: 100%; z-index: 40; min-width: 12em;
  background: var(--ink); border: 1px solid var(--rule-dark);
  display: none;
}
.has-sub::after { /* hover bridge: no dead gap */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .7em;
}
.sub-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sub-caret { display: none; }
.has-sub:hover > .sub, .has-sub:focus-within > .sub { display: block; }
.sub a { padding: .34em 0; letter-spacing: .1em; font-size: calc(var(--fs-label) * 1.12); font-family: var(--text); font-weight: 700; box-shadow: none; }
.sub a:hover { box-shadow: none; color: var(--ochre); }
.has-sub > .sub { min-width: 13em; }
@media (max-width: 899px) {
  .has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .has-sub::after { display: none; }
  .has-sub > .sub {
    position: static; order: 3; flex: 0 0 100%;
    display: none; flex-wrap: wrap; gap: 0 1.3em;
    padding: 0 0 .7em; background: none; border: 0;
  }
  .has-sub:hover > .sub { display: none; }
  .sub-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: -.4em; cursor: pointer; color: var(--on-dark-soft);
  }
  .sub-caret svg { width: 15px; height: 15px; transition: transform .14s linear; }
  .sub-toggle:checked ~ .sub-caret svg { transform: rotate(180deg); }
  .sub-toggle:checked ~ .sub { display: flex; }
  .sub-toggle:focus-visible ~ .sub-caret { outline: 2px solid var(--ochre); outline-offset: -4px; }
  .sub a { font-size: calc(var(--fs-label) * 1.05); }
}

/* ---------------------------------------------------------------- bands -- */
.band { padding-block: var(--band); }
.band--paper, .band--ochre, .fig-mat, .map-frame, .cat-list, .unit, .profile-card, .fig-plate .figcap.on-paper { --credit: #6E5044; }
.band--paper { background: var(--paper); color: var(--ink); }
.band--paper a { color: var(--crimson); }
.band--paper a:hover { color: var(--field); }
.band--field { background: var(--field); color: var(--on-dark); }
.band--field a { color: var(--ochre); }
.band--ochre { background: var(--ochre); color: var(--ink); }
.band--ochre a { color: var(--crimson); }
.band--ink { background: var(--ink); color: var(--on-dark); }
.band--tight { padding-block: calc(var(--band) * .62); }

.kicker {
  margin: 0 0 .7em; display: flex; align-items: center; gap: .5em;
  font-family: var(--text); font-weight: 700;
  font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--crimson);
}
.band--field .kicker, .band .kicker--light { color: var(--ochre); }
.kicker--light { color: var(--ochre); }
.art-head .sec-open .pod { height: calc(var(--fs-h1) * 0.6); }
.band--paper .kicker { color: var(--crimson); }

.deck { font-size: var(--fs-lead); line-height: 1.36; margin: .7em 0 0; max-width: 46ch; }
.quiet { color: var(--quiet); }
.band--field .quiet { color: var(--on-field-soft); }

/* ------------------------------------------------------- hero / opener --- */
.hero-full { position: relative; overflow: hidden; }
.hero-full .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-full .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(22,16,14,.55) 0%, rgba(22,16,14,0) 42%),
    linear-gradient(100deg, rgba(126,22,16,.95) 0%, rgba(126,22,16,.9) 30%, rgba(126,22,16,.5) 58%, rgba(126,22,16,.2) 100%);
}
@media (max-width: 899px) {
  .hero-full .hero-scrim { background: linear-gradient(to top, rgba(126,22,16,.97) 24%, rgba(126,22,16,.72) 62%, rgba(126,22,16,.42) 100%); }
}
.hero-full .hero-inner {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(82vh, 940px); padding-block: clamp(46px, 6vw, 130px) clamp(40px, 4.4vw, 96px);
}
.hero-full .hero-body { max-width: 42ch; }
.hero-full .shot-credit {
  position: absolute; right: var(--gutter); bottom: calc(var(--gutter) * .55); margin: 0;
  font-family: var(--mono); font-size: var(--fs-credit); color: rgba(242,233,216,.78); text-align: right;
}
.hero-full .hero-caption {
  margin: 1.1em 0 0; max-width: 46ch; font-size: var(--fs-cap); line-height: 1.45;
  color: var(--on-dark-soft); border-top: 1px solid rgba(242,233,216,.35); padding-top: .7em;
}
.hero { padding-block: calc(var(--band) * .38) calc(var(--band) * .7); }
.hero__cols { display: grid; gap: clamp(18px, 2.4vw, 52px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero__cols { grid-template-columns: 1.02fr .98fr; } }
@media (min-width: 1800px) { .hero__cols { grid-template-columns: 1fr 1.06fr; } }
.hero__title { font-size: clamp(52px, 8.6vw, 190px); line-height: .84; padding-bottom: .02em; }
.hero__title span { display: block; line-height: .86; }
.hero__title .or { font-size: .34em; line-height: 1.06; color: var(--ochre); letter-spacing: .07em; }
.hero__title .green { color: var(--field); -webkit-text-stroke: 2px var(--on-dark); }
.hero__note { display: flex; gap: clamp(12px, 1.3vw, 30px); align-items: flex-start; margin-top: .85em; }
.hero__note p { margin: 0; max-width: 38ch; font-size: calc(var(--fs-lead) * .88); line-height: 1.38; }
.hero .fig-bleed.tall img { aspect-ratio: 5 / 4; max-height: 54vh; }
@media (min-width: 900px) { .hero .fig-bleed.tall img { aspect-ratio: 4 / 5; max-height: 62vh; } }
.year { font-family: var(--display); color: var(--ochre); flex: 0 0 auto; }
.grower-note { display: flex; gap: clamp(12px, 1.1vw, 22px); align-items: flex-start; margin: 0; padding: .85em 0 0; border-top: 2px solid var(--crimson); }
.grower-note span { font-size: var(--fs-cap); line-height: 1.45; }
.band--paper .year { color: var(--crimson); }
.band--ochre .year { color: var(--crimson); }
.year svg { display: block; height: 1em; width: auto; overflow: visible; }

/* ----------------------------------------------------- figure system ----
   Three treatments, one drawing system:
   (a) .fig-bleed  full-bleed, optional Anton overlay, mono credit bottom-right
   (b) .fig-offset image breaks the measure, caption flush right under a rule
   (c) .fig-mat    photograph on parchment with an 8px ochre border
   --------------------------------------------------------------------------*/
figure { margin: 0; }

.figcap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .45em 1.6em; justify-content: space-between; padding-top: .6em;
}
.figcap .cap { margin: 0; flex: 1 1 22ch; max-width: 64ch; font-size: var(--fs-cap); line-height: 1.42; }
.figcap .credit {
  margin: 0; flex: 0 1 auto; max-width: 46ch;
  font-family: var(--mono); font-size: var(--fs-credit); line-height: 1.35;
  letter-spacing: .01em; color: var(--credit); text-align: left;
}
.band--field .figcap .credit, .band--ink .figcap .credit { color: rgba(242,233,216,.74); }
body > .fig-bleed .figcap .credit { color: var(--on-dark-soft); }

.fig-bleed { position: relative; }
.fig-bleed img { width: 100%; object-fit: cover; }
.fig-bleed .frame { position: relative; }
.fig-bleed .overlay {
  position: absolute; inset: auto 0 0 0; pointer-events: none;
  padding: var(--gutter) var(--gutter) calc(var(--gutter) * 4.6);
  background: linear-gradient(to top, rgba(22,16,14,.92) 0%, rgba(22,16,14,.6) 46%, rgba(22,16,14,0) 100%);
}
/* caption band across the full width, over the picture */
.figcap--band {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: rgba(22,16,14,.9); color: var(--on-dark);
  padding-block: clamp(12px, 1.05vw, 24px); border-top: 3px solid var(--ochre);
}
.figcap--band .band-inner {
  width: 100%; max-width: 2560px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-wrap: wrap; gap: .4em clamp(20px, 3vw, 72px);
  justify-content: space-between; align-items: baseline;
}
.figcap--band .cap { margin: 0; flex: 1 1 30ch; max-width: 86ch; font-size: var(--fs-cap); line-height: 1.45; color: var(--on-dark); }
.figcap--band .credit { margin: 0; flex: 0 1 auto; font-family: var(--mono); font-size: var(--fs-credit); color: rgba(242,233,216,.72); }
@media (max-width: 699px) { .figcap--band { position: static; background: var(--ink); } }
.fig-bleed .overlay h2, .fig-bleed .overlay h1 { color: var(--on-dark); max-width: 22ch; font-size: var(--fs-h2); text-shadow: 0 2px 22px rgba(22,16,14,.6), 0 1px 3px rgba(22,16,14,.5); }
.fig-bleed .shot-credit {
  position: absolute; right: var(--gutter); bottom: calc(var(--gutter) * .5);
  margin: 0; font-family: var(--mono); font-size: var(--fs-credit);
  color: rgba(242,233,216,.72); text-align: right; max-width: 42ch;
}
.fig-bleed .figcap { padding-inline: var(--gutter); max-width: 2560px; margin-inline: auto; }

/* (e) .fig-overprint — the caption plate sits on the picture, bottom left */
.fig-overprint { position: relative; background: var(--paper-2); padding: clamp(8px, .8vw, 18px); box-shadow: inset 0 0 0 1px rgba(22,16,14,.2), 0 16px 34px rgba(22,16,14,.24); }
.fig-overprint img { box-shadow: 0 0 0 1px rgba(22,16,14,.4), 0 10px 26px rgba(22,16,14,.3); }
.fig-overprint .figcap {
  position: absolute; left: 0; bottom: 0; margin: clamp(8px, .8vw, 18px); z-index: 2;
  box-shadow: 0 12px 30px rgba(22,16,14,.34);
  width: min(100% - 2rem, 52ch); margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: .3em;
  background: var(--paper); color: var(--ink);
  padding: clamp(12px, 1.1vw, 24px) clamp(14px, 1.3vw, 28px) clamp(11px, 1vw, 20px);
  border-top: 4px solid var(--crimson);
  --credit: #6E5044;
}
.fig-overprint .figcap .cap { flex: none; max-width: 46ch; }
.fig-overprint .figcap .credit { flex: none; text-align: left; max-width: 46ch; }
@media (max-width: 699px) {
  .fig-overprint .figcap { position: static; margin: 0; box-shadow: none; width: auto; padding-inline: 0; padding-bottom: 0; border-top-width: 3px; margin-top: .6em; background: none; }
}

.fig-offset .figcap { border-top: 1px solid var(--crimson); margin-top: .55em; }
.fig-offset .figcap .cap { text-align: left; }
.band--field .fig-offset .figcap, .band--ink .fig-offset .figcap { border-top-color: var(--ochre); }

/* (d) .fig-plate — photograph on a tinted mat with a keyline and a barred caption */
.fig-plate .plate-mat {
  padding: clamp(6px, .55vw, 13px);
  background: rgba(22,16,14,.18);
  box-shadow: inset 0 0 0 1px rgba(242,233,216,.24), 0 12px 26px rgba(22,16,14,.3);
}
.band--paper .fig-plate .plate-mat, .band--ochre .fig-plate .plate-mat {
  background: rgba(22,16,14,.07); box-shadow: inset 0 0 0 1px rgba(22,16,14,.2), 0 12px 26px rgba(22,16,14,.18);
}
.fig-plate img { box-shadow: 0 0 0 1px rgba(22,16,14,.4); }
.fig-plate .figcap { border-top: 3px solid var(--ochre); margin-top: .65em; padding-top: .55em; }
.band--ochre .fig-plate .figcap { border-top-color: var(--crimson); }

/* a hanging drawn index, part of the numeral system */
.fig-ix { display: block; font-family: var(--display); color: var(--ochre); line-height: 1; margin-bottom: .3em; }
.fig-ix svg { height: .95em; width: auto; display: block; overflow: visible; }
.band--paper .fig-ix, .band--ochre .fig-ix { color: var(--crimson); }

/* every content photograph gets the same keyline */
.fig-offset img, .fig-mat img, .gallery img, .dishrun img { box-shadow: 0 0 0 1px rgba(22,16,14,.32); }

.fig-mat { background: var(--paper-2); padding: clamp(12px, 1.1vw, 22px); box-shadow: 0 14px 30px rgba(22,16,14,.22); }
.fig-mat img { border: 8px solid var(--ochre); }
.fig-mat .figcap { color: var(--ink); }
.fig-mat .figcap .cap { font-style: italic; }
.fig-mat .figcap .credit { color: var(--quiet); font-style: normal; }
@media (max-width: 599px) { .fig-mat img { border-width: 5px; } }

.plate img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.tall img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.wide img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.pano img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }

/* --------------------------------------------------------- dish run ----- */
/* one horizontal run of plates, scrolled inside itself */
.dishrail { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .4em; }
.dishrun {
  display: grid; gap: clamp(10px, 1.1vw, 26px);
  grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); min-width: 100%;
}
@media (min-width: 1800px) { .dishrun { grid-auto-columns: minmax(240px, 1fr); } }
.dishrun .double { grid-column: span 2; }
.dishrun .double img { aspect-ratio: 2 / 1; object-fit: cover; width: 100%; }
@media (max-width: 899px) { .dishrun .double img { aspect-ratio: 16 / 10; } }
.dishrun figure { display: flex; flex-direction: column; }
.dishrun .plate-mat { padding: clamp(5px, .5vw, 11px); background: rgba(22,16,14,.2); box-shadow: inset 0 0 0 1px rgba(242,233,216,.22), 0 12px 26px rgba(22,16,14,.32); }
.dishrun figcaption { border-top: 2px solid rgba(242,233,216,.3); margin-top: .55em; }
.dishrun .double .plate-mat { background: rgba(22,16,14,.3); box-shadow: inset 0 0 0 1px var(--ochre); }
.dishrun .double figcaption { border-top-color: var(--ochre); }
.dishrun .double .dish-name { font-size: calc(var(--fs-h3) * 1.5); }
.dishrun figcaption { padding-top: .5em; font-size: var(--fs-cap); line-height: 1.3; }
.dishrun .dish-name { display: block; font-family: var(--display); font-size: var(--fs-h3); text-transform: uppercase; }
.dishrun .dish-name a { color: inherit; text-decoration: none; }
.dishrun .dish-name a:hover { color: var(--ochre); }
.dishrun .dish-note { display: block; color: var(--on-dark-soft); }

/* --------------------------------------------------------- two-column --- */
.duo { display: grid; gap: clamp(22px, 2.6vw, 68px); grid-template-columns: 1fr; align-items: start; }
.duo--baseline { align-items: end; }
@media (min-width: 900px) { .duo { grid-template-columns: 1.15fr .85fr; } }
/* above 1800 the two-column bands gain a third narrow gutter column */
@media (min-width: 1800px) { .duo { grid-template-columns: 1fr .82fr .42fr; } }
.duo__aside { font-size: var(--fs-cap); line-height: 1.45; }
@media (max-width: 1799px) { .duo__aside { grid-column: 1 / -1; } }

.trio { display: grid; gap: clamp(20px, 2.4vw, 60px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .trio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .trio { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------ almanac --- */
.almanac { list-style: none; margin: 0; padding: 0; }
.almanac > li {
  display: flex; flex-wrap: wrap; gap: .3em clamp(14px, 1.8vw, 46px);
  align-items: baseline; border-top: 1px solid var(--rule);
  padding-block: clamp(12px, 1.2vw, 26px);
}
.almanac > li:last-child { border-bottom: 2px solid var(--ink); }
.almanac .a-year, .almanac .year { flex: 0 0 auto; color: var(--crimson); font-size: var(--fs-year); font-family: var(--display); }
.almanac .a-year svg, .almanac .year svg { display: block; height: 1em; width: auto; overflow: visible; }
.almanac p { margin: 0; flex: 1 1 28ch; max-width: 84ch; font-size: calc(var(--fs-body) * .94); line-height: 1.45; }

/* ---------------------------------------------------------------- map --- */
.map-figure { }
.map-slot { position: relative; }
.map-frame { background: var(--paper); padding: clamp(10px, .95vw, 20px); box-shadow: inset 0 0 0 1px rgba(22,16,14,.22), 0 16px 34px rgba(22,16,14,.24); }
.map-head { display: flex; flex-wrap: wrap; gap: .3em 1.2em; justify-content: space-between; align-items: baseline; margin-bottom: .6em; }
.map-title { font-family: var(--display); text-transform: uppercase; font-size: var(--fs-h3); color: var(--ink); line-height: 1; }
.map-sub { font-family: var(--mono); font-size: var(--fs-credit); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.map-legend {
  list-style: none; margin: .85em 0 0; padding: .7em 0 0; border-top: 1px solid rgba(22,16,14,.2);
  display: grid; gap: .45em 1.1em; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.map-legend li { display: flex; align-items: flex-start; gap: .55em; font-size: var(--fs-cap); line-height: 1.32; color: var(--ink); }
.map-legend .sw { width: 13px; height: 13px; margin-top: .28em; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(22,16,14,.14); }
.sw--chile { background: var(--crimson); }
.sw--city { background: var(--ink); }
.sw--station { background: var(--field); }
.sw--road { background: #6E5044; }
.map-figure > .figcap { padding-top: clamp(14px, 1.3vw, 28px); }
.mapband { display: grid; gap: clamp(20px, 2.4vw, 60px); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1000px) { .mapband { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
@media (min-width: 1800px) { .mapband { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.mapband .map-legend { grid-template-columns: 1fr; }
.map-notes { display: grid; gap: clamp(14px, 1.4vw, 30px); align-content: start; }
@media (min-width: 1000px) { .map-notes { align-content: space-between; } }
.pin-list { list-style: none; margin: .9em 0 0; padding: 0; display: grid; gap: 0; }
.pin-list li { display: grid; grid-template-columns: 14px 1fr; gap: .25em .75em; align-items: baseline; border-bottom: 1px solid var(--rule); padding: .75em 0; }
.pin-list li:first-child { padding-top: 0; }
.pin-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.pin-list .sw { width: 11px; height: 11px; border-radius: 50%; margin-top: .3em; box-shadow: 0 0 0 2px rgba(22,16,14,.14); }
.pin-list .pl-name { font-family: var(--display); text-transform: uppercase; font-size: calc(var(--fs-h3) * .85); line-height: 1; }
.pin-list .pl-name a { text-decoration: none; }
.pin-list .pl-what { grid-column: 2; font-size: var(--fs-cap); line-height: 1.35; color: var(--ink-soft); }
.map-notes h3 { font-size: var(--fs-h3); margin-bottom: .3em; }
.map-notes p { margin: 0; font-size: var(--fs-cap); line-height: 1.5; }
.map-stats { display: grid; gap: .5em; border-top: 2px solid var(--crimson); padding-top: .7em; }
.map-stats div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2em 1.2em; font-size: var(--fs-cap); border-bottom: 1px solid var(--rule); padding: .55em 0; }
.map-stats div:first-child { padding-top: .2em; }
.map-stats div:last-child { border-bottom: 0; }
.map-stats b { font-family: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-label); }
.mapsvg { display: block; width: 100%; height: auto; background: #E3D4B6; }
.mapsvg .land { fill: #F7F0DF; stroke: var(--ink); stroke-width: 4.5; }
.mapsvg .neighbour { fill: rgba(22,16,14,.055); stroke: none; }
.mapsvg .pin { fill: var(--crimson); }
.mapsvg .p-chile .pin { fill: var(--crimson); }
.mapsvg .p-chile .pin-ring { stroke: var(--crimson); }
.mapsvg .p-city .pin { fill: var(--ink); }
.mapsvg .p-city .pin-ring { stroke: var(--ink); }
.mapsvg .p-city .pin-label { font-size: 36px; }
.mapsvg .p-station .pin { fill: var(--field); }
.mapsvg .p-station .pin-ring { stroke: var(--field); }
.mapsvg .p-road .pin { fill: #8A6A5E; }
.mapsvg .p-road .pin-ring { stroke: #8A6A5E; opacity: .35; }
.mapsvg .p-road .pin-label { font-size: 26px; fill: #6A5D53; }
.mapsvg .compass { fill: none; stroke: var(--ink); stroke-width: 3; opacity: .5; }
.mapsvg .compass-n { font-family: var(--display); font-size: 34px; fill: var(--ink); opacity: .6; stroke: none; }
.mapsvg .pin-ring { fill: none; stroke: var(--crimson); stroke-width: 3; opacity: .5; }
.mapsvg .pin-label { font-family: var(--text); font-weight: 700; font-size: 30px; fill: var(--ink); paint-order: stroke; stroke: #F2E9D8; stroke-width: 6; }
.mapsvg a:hover .pin { fill: var(--field); }
.mapsvg a:hover .pin-label { fill: var(--field); }

/* ------------------------------------------------------- article pages -- */
.art-head { padding-block: calc(var(--band) * .6) calc(var(--band) * .42); }
.art-head .kicker a { text-decoration: none; }
.art-title { font-size: var(--fs-h1); max-width: 26ch; }
.art-title--long { font-size: calc(var(--fs-h1) * .82); max-width: 30ch; }
.lead {
  font-size: var(--fs-lead); line-height: 1.36; margin: .8em 0 0; max-width: 48ch;
  color: var(--on-dark);
}
.band--paper .lead { color: var(--ink); }

.prose > p { margin: 0 0 var(--pgap); }
.prose > h2 {
  font-size: var(--fs-h2); margin: 1.5em 0 .55em; color: var(--crimson);
  display: flex; align-items: baseline; gap: .5em;
}
.prose > h3 { font-size: var(--fs-h3); margin: 1.4em 0 .5em; }
.prose a { color: var(--crimson); }
.prose a:hover { color: var(--field); }
.prose strong { font-weight: 700; }

/* every inserted unit: >= 2x the paragraph gap on BOTH sides, min 24/32px */
.ins { margin-block: max(32px, calc(var(--pgap) * 2.4)); }
@media (max-width: 599px) { .ins { margin-block: max(24px, calc(var(--pgap) * 2.2)); } }
.grid > .ins:last-child { margin-bottom: max(32px, calc(var(--pgap) * 2.4)); }

/* ---------------------------------------------------- text components --- */
.pullquote { margin: 0; border-top: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson); padding-block: .8em; }
.pullquote p { margin: 0; font-family: var(--display); text-transform: uppercase; line-height: 1.02; font-size: calc(var(--fs-h2) * .92); }
.band--paper .pullquote p { color: var(--ink); }

.blockquote { margin: 0; padding-left: 1.1em; border-left: 4px solid var(--ochre); }
.blockquote p { margin: 0 0 .5em; font-style: italic; font-size: calc(var(--fs-body) * 1.06); }
.blockquote cite { font-style: normal; font-size: var(--fs-cap); color: var(--quiet); }

.callout { background: var(--crimson); color: var(--on-dark); padding: clamp(16px, 1.6vw, 34px); }
.callout p { margin: 0; font-size: calc(var(--fs-body) * 1.02); }
.callout a, .callout .h { color: var(--ochre); }
.band--paper .callout p { color: var(--on-dark); }

.note {
  margin: 0; padding: .7em 0 .7em 1em; border-left: 3px solid var(--rule);
  font-size: var(--fs-cap); line-height: 1.45; color: var(--ink-soft);
}

.unit-label {
  margin: 0 0 .6em; display: flex; align-items: center; gap: .5em;
  font-family: var(--text); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: .2em; text-transform: uppercase; color: var(--crimson);
}
.unit {
  background: var(--paper-2); padding: clamp(16px, 1.7vw, 38px);
  border-top: 3px solid var(--crimson); color: var(--ink);
}
.unit--field { background: var(--field); color: var(--on-dark); border-top-color: var(--ochre); }
.unit--field .unit-label { color: var(--ochre); }
.unit--field a { color: var(--ochre); }

/* --------------------------------------------------- data components ---- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.versus, .datatable { width: 100%; border-collapse: collapse; text-align: left; font-size: calc(var(--fs-body) * .92); }
.versus th, .datatable th {
  border-bottom: 2px solid currentColor; padding: .55em .8em .55em 0;
  font-family: var(--text); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: .13em; text-transform: uppercase;
}
.versus td, .datatable td { border-bottom: 1px solid var(--rule); padding: .7em .8em .7em 0; vertical-align: top; }
.versus tbody th { border-bottom: 1px solid var(--rule); text-transform: none; letter-spacing: 0; font-size: inherit; font-family: var(--display); }
.datatable tr:last-child td, .versus tr:last-child td { border-bottom: 0; }

.statrow { display: grid; gap: clamp(12px, 1.2vw, 28px); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.statblock { border-top: 3px solid var(--crimson); padding-top: .5em; }
.stat-num { display: block; font-family: var(--display); font-size: calc(var(--fs-h2) * 1.1); line-height: .95; }
.stat-label { display: block; font-size: var(--fs-cap); line-height: 1.35; color: var(--ink-soft); }
.unit--field .stat-label { color: var(--on-field-soft); }
.unit--field .statblock { border-top-color: var(--ochre); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
  display: flex; flex-wrap: wrap; gap: .2em 1.2em; align-items: baseline;
  padding-block: .62em; border-top: 1px solid var(--rule);
}
.timeline > li:first-child { border-top: 0; padding-top: 0; }
.timeline .t-when {
  flex: 0 0 auto; max-width: 100%; font-family: var(--display);
  font-size: calc(var(--fs-body) * .98); text-transform: uppercase; color: var(--crimson);
}
.unit--field .timeline .t-when { color: var(--ochre); }
.timeline .t-what { flex: 1 1 26ch; min-width: 0; font-size: calc(var(--fs-body) * .93); line-height: 1.42; }
@media (min-width: 900px) { .timeline .t-when { flex: 0 0 clamp(9em, 22%, 15em); } }

/* horizontal chronology rail */
.timeline-h { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .6em; }
.timeline-h ol {
  list-style: none; margin: 0; padding: 0; min-width: 100%;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(216px, 1fr);
}
.timeline-h li { position: relative; padding: 20px clamp(14px, 1.4vw, 34px) 0 0; }
.timeline-h li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); opacity: .28; }
.timeline-h li::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 15px; background: var(--crimson); }
.timeline-h li:first-child::after { height: 22px; width: 4px; }
.timeline-h .th-year { display: block; color: var(--crimson); font-size: var(--fs-year); font-family: var(--display); }
.timeline-h .th-year svg { height: 1em; width: auto; display: block; overflow: visible; }
.timeline-h p { margin: .55em 0 0; font-size: calc(var(--fs-body) * .8); line-height: 1.42; max-width: 34ch; }
.timeline-h .th-tag {
  display: block; margin-top: .5em; font-family: var(--text); font-weight: 700;
  font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--crimson);
}
.timeline-h .th-tag a:hover { color: var(--field); }
.rail-note { margin: .8em 0 0; font-size: var(--fs-cap); color: var(--quiet); }

.keyterms { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
@media (min-width: 900px) { .keyterms { grid-template-columns: repeat(2, 1fr); gap: .8em 2em; } }
.keyterms li { font-size: calc(var(--fs-body) * .93); line-height: 1.42; }
.keyterms .kt { display: block; font-family: var(--display); text-transform: uppercase; color: var(--crimson); }
.unit--field .keyterms .kt { color: var(--ochre); }

.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .bar-fill { fill: var(--crimson); }
.chart .bar-fill.alt { fill: var(--field); }
.chart .bar-label, .chart .bar-value { font-family: var(--text); font-size: 13px; fill: currentColor; }
.chart .bar-value { font-weight: 700; }
.chart figcaption { padding-top: .6em; font-size: var(--fs-cap); color: var(--ink-soft); }

/* --------------------------------------------------------- gallery ------ */
.gallery { display: grid; gap: clamp(10px, 1vw, 22px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { display: flex; flex-direction: column; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding-top: .5em; font-size: var(--fs-cap); line-height: 1.35; }
.gallery figcaption .eyebrow { text-transform: none; letter-spacing: .01em; color: var(--credit); }
.gallery--mat { background: var(--paper-2); padding: clamp(12px, 1.1vw, 22px); }
.gallery--mat img { border: 6px solid var(--ochre); }
.gallery--mat figcaption { font-style: italic; }
.gallery--mat .eyebrow { font-style: normal; }
@media (max-width: 599px) { .gallery--mat img { border-width: 4px; } }

/* ------------------------------------------------------------- cards ---- */
.profile-grid { display: grid; gap: clamp(18px, 2vw, 46px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .profile-grid { grid-template-columns: repeat(2, 1fr); } }
.profile-card { display: flex; flex-direction: column; background: var(--paper-2); color: var(--ink); padding: clamp(14px, 1.3vw, 26px); }
.profile-card .p-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: .7em; }
.profile-card.no-photo { border-top: 3px solid var(--crimson); }
.profile-card h3 { font-size: var(--fs-h3); margin-bottom: .2em; }
.profile-card .p-role { margin: 0 0 .5em; font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--crimson); }
.profile-card p { margin: 0 0 .6em; font-size: calc(var(--fs-body) * .92); line-height: 1.45; }
.profile-card .p-links { margin-top: auto; font-size: var(--fs-cap); }
.profile-card .p-attr { font-size: var(--fs-credit); font-family: var(--mono); color: var(--quiet); }

.org-grid { display: grid; gap: clamp(10px, 1vw, 20px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.org-card {
  display: flex; flex-direction: column; gap: .25em; text-decoration: none;
  background: var(--paper-2); color: var(--ink); padding: .8em 1em; border-left: 3px solid var(--ochre);
}
.org-card:hover { color: var(--crimson); }
.org-logo { max-height: 34px; width: auto; object-fit: contain; margin-bottom: .3em; }
.org-name { font-family: var(--display); text-transform: uppercase; font-size: var(--fs-h3); line-height: 1; }
.org-host { font-family: var(--mono); font-size: var(--fs-credit); color: var(--quiet); word-break: break-word; }

.entity-ref { overflow-wrap: anywhere; }

.further-grid { display: grid; gap: clamp(12px, 1.2vw, 26px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .further-grid { grid-template-columns: repeat(3, 1fr); } }
.further-grid > a {
  display: flex; flex-direction: column; text-decoration: none;
  border-top: 2px solid var(--crimson); padding-top: .55em;
  font-family: var(--display); text-transform: uppercase; font-size: var(--fs-h3);
  line-height: 1.05; color: inherit;
}
.further-grid > a:hover { color: var(--crimson); }
.further-grid > a .f-sec {
  font-family: var(--text); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: .18em; margin-bottom: .35em; color: var(--crimson);
}

.related-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.related-links a { font-family: var(--display); text-transform: uppercase; text-decoration: none; font-size: var(--fs-h3); line-height: 1.05; }

/* --------------------------------------------------------- card lists --- */
.cardgrid { display: grid; gap: clamp(18px, 2vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cardgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1800px) { .cardgrid { grid-template-columns: repeat(4, 1fr); } }
.card { display: flex; flex-direction: column; height: 100%; }
.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card h3 { font-size: var(--fs-h3); margin: .6em 0 .3em; min-height: 2.1em; }
.card h3 a { text-decoration: none; color: inherit; }
.card h3 a:hover { color: var(--crimson); }
.card p { margin: 0 0 .7em; font-size: calc(var(--fs-body) * .9); line-height: 1.45; }
.card .card-sec {
  margin-top: auto; display: flex; align-items: center; gap: .45em;
  font-family: var(--text); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: .18em; text-transform: uppercase; color: var(--crimson);
}

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list > li { border-top: 1px solid var(--rule); }
.cat-list > li:last-child { border-bottom: 2px solid var(--ink); }
.cl-link {
  display: grid; gap: .7em clamp(16px, 1.8vw, 40px); grid-template-columns: 1fr;
  align-items: start; text-decoration: none; color: inherit;
  padding: clamp(16px, 1.4vw, 32px) clamp(10px, .8vw, 18px);
  margin-inline: calc(-1 * clamp(10px, .8vw, 18px));
  transition: background .13s linear;
}
@media (min-width: 700px) { .cl-link { grid-template-columns: auto clamp(150px, 20vw, 300px) minmax(0, 1fr) auto; } }
.cl-link:hover { background: rgba(126,22,16,.055); }
.cl-link:hover .cl-thumb img { transform: scale(1.03); }
.cl-link:hover .cl-title { color: var(--crimson); }
.cl-link:hover .cl-go { color: var(--field); }
.cl-ix { font-family: var(--display); color: var(--crimson); line-height: 1; opacity: .55; }
.cl-ix svg { height: calc(var(--fs-h3) * .9); width: auto; display: block; overflow: visible; }
.cl-title { font-family: var(--display); text-transform: uppercase; font-size: var(--fs-h3); line-height: 1.05; margin: 0 0 .35em; transition: color .13s linear; }
.cl-brief { margin: 0; font-size: calc(var(--fs-body) * .9); line-height: 1.45; color: var(--ink-soft); max-width: 68ch; }
.cl-go { font-family: var(--display); text-transform: uppercase; font-size: calc(var(--fs-h3) * .8); color: var(--crimson); white-space: nowrap; transition: color .13s linear; }
@media (max-width: 699px) { .cl-go { justify-self: start; } }
.cat-list .cl-thumb { margin: 0; }
.cat-list .cl-thumb .plate-mat { padding: clamp(5px, .45vw, 10px); background: rgba(22,16,14,.07); box-shadow: inset 0 0 0 1px rgba(22,16,14,.2), 0 10px 22px rgba(22,16,14,.16); }
.cat-list .cl-thumb .plate-mat { overflow: hidden; }
.cat-list .cl-thumb img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: 0 0 0 1px rgba(22,16,14,.32); transition: transform .2s ease-out; }
.cat-list .cl-thumb figcaption { margin-top: .45em; padding-top: .35em; border-top: 2px solid var(--ochre); font-family: var(--mono); font-size: var(--fs-credit); line-height: 1.3; color: var(--quiet); }
.cat-list h3 { font-size: var(--fs-h3); }
.cat-list h3 a { text-decoration: none; color: inherit; }
.cat-list h3 a:hover { color: var(--crimson); }
.cat-list p { margin: 0; font-size: calc(var(--fs-body) * .9); line-height: 1.45; color: var(--ink-soft); }

/* CSS-only expander for long lists */
.expander { display: contents; }
.expander input { position: absolute; opacity: 0; pointer-events: none; }
.expander .more { display: none; }
.expander input:checked ~ .more { display: block; }
.expander .more-label {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  margin-top: 1em; font-family: var(--text); font-weight: 700;
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--crimson); border-bottom: 2px solid var(--crimson); padding-bottom: .2em;
}
.expander input:checked ~ .more-label { display: none; }

/* ------------------------------------------------------- supporters ----- */
.supporters { background: var(--ink); color: var(--on-dark); padding-block: clamp(24px, 2.4vw, 52px); }
.supporters .unit-label { color: var(--ochre); }
.supporters .sup-head { display: flex; flex-wrap: wrap; gap: .3em 3em; align-items: baseline; justify-content: space-between; margin-bottom: .9em; }
.supporters .sup-note { margin: 0; font-size: var(--fs-cap); color: var(--on-dark-soft); max-width: 56ch; }
.sponsor-row {
  --tile: clamp(190px, 17.5vw, 400px);
  display: grid; grid-template-columns: repeat(auto-fit, var(--tile));
  gap: 14px 18px; justify-content: space-between;
}
@media (max-width: 599px) { .sponsor-row { grid-template-columns: repeat(auto-fit, 100%); } }
.sponsor-row + .sponsor-row { margin-top: .9em; padding-top: .9em; border-top: 1px solid var(--rule-dark); }
.sponsor {
  display: flex; align-items: center; min-height: 4.4em; padding: .7em 1.1em;
  background: #241713; border: 1px solid var(--rule-dark);
  text-decoration: none; color: var(--on-dark); overflow: hidden;
}
.sponsor:hover { color: var(--ochre); border-color: var(--ochre); }
.sponsor-name {
  font-family: var(--text); font-weight: 600; font-size: calc(var(--fs-body) * .84);
  letter-spacing: .03em; line-height: 1.16; white-space: normal;
  overflow-wrap: break-word; min-width: 0;
}
.sponsor.feat { background: var(--crimson); border-color: var(--crimson); }
.sponsor.feat:hover { border-color: var(--ochre); }
.sponsor.feat .sponsor-name { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: calc(var(--fs-body) * .88); line-height: 1.06; }

/* ---------------------------------------------------------- footer ------ */
.foot { background: var(--ink); color: var(--on-dark); padding-block: calc(var(--band) * .5); border-top: 1px solid var(--rule-dark); }
.foot__row { display: flex; flex-wrap: wrap; gap: 1.4em 3em; justify-content: space-between; align-items: flex-start; }
.foot__standing { margin: 0; max-width: 42ch; font-size: calc(var(--fs-body) * .98); line-height: 1.4; }
.foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em 2em; }
.foot__links a {
  text-decoration: none; color: var(--on-dark); font-weight: 600;
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase;
}
.foot__links a:hover { color: var(--ochre); }

/* --------------------------------------------------------- utilities --- */
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ochre); color: var(--ink);
  padding: .6em 1em; z-index: 99;
}
.skip:focus { left: 0; }
.stack > * + * { margin-top: 1em; }
.hr { border: 0; border-top: 2px solid currentColor; margin: 0; opacity: .35; }
.eyebrow { font-family: var(--mono); font-size: var(--fs-credit); letter-spacing: .1em; text-transform: uppercase; color: var(--credit); }

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.supporters .sup-head{flex-wrap:wrap!important}
.supporters .sup-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit-panels{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px;width:100%}
.mapkit-panels>svg.mapkit{width:100%;height:auto;display:block}
@media (max-width:700px){.mapkit-panels{grid-template-columns:minmax(0,1fr)}}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#EFE6D6;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.4}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-money-columns: the supporters block ran one tile per row — 8 tiles,
   456px at 390, 4% of the whole page. Two columns bring it to
   257px (44% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 2 lines, tile heights 44-62px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-row), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div > figure.fig-overprint.pano > img,
  div.duo > figure.fig-offset.wide > img,
  div.grid.prose > figure.fig-mat.ins.push-right > img,
  div.grid.prose > figure.fig-offset.ins.push-left > img,
  div.stack > figure.fig-mat.wide > img,
  figure.cl-thumb > div.plate-mat > img,
  figure.double.wide > div.plate-mat > img,
  figure.fig-bleed.pano > div.frame > img,
  figure.fig-bleed.wide > div.frame > img,
  figure.fig-plate > div.plate-mat > img,
  figure.fig-plate.wide > div.plate-mat > img,
  figure.plate > div.plate-mat > img,
  main > section.hero-full > img.hero-img){height:auto}
/* op-img-dims:end */