/* ==========================================================================
   Kitten's Toy Room — Litho Plate
   Palette roles, type, plates, figures, components.
   ========================================================================== */

:root{
  /* --- palette: 6 members, each with a job ------------------------------- */
  --paper:      #F2E4C8;   /* ground */
  --ink:        #17150F;   /* ink */
  --accent:     #DE7C3A;   /* accent — masthead, plates, marks (saturated) */
  --accent-deep:#8A3809;   /* accent as TEXT on light grounds */
  --flag-deep:  #96061F;   /* flag as TEXT on light grounds */
  --secondary:  #7A9E3F;   /* secondary ground — plates (saturated) */
  --figure:     #2C5C8F;   /* figure plates, links (saturated) */
  --flag:       #C8102E;   /* flag — alerts, one material plate */
  --paper-2:    #E2D3B6;   /* ground, one step down */
  --paper-3:    #D8C7A4;
  --ink-60:     rgba(23,21,15,.62);
  --ink-30:     rgba(23,21,15,.28);
  --ink-12:     rgba(23,21,15,.12);
  --paper-60:   rgba(242,228,200,.66);
  --paper-30:   rgba(242,228,200,.32);

  /* --- one value per section: nav underline AND its bar segment ---------- */
  --sec-makers:    #F0A03C;
  --sec-materials: #2C5C8F;
  --sec-places:    #7A9E3F;
  --sec-people:    #C8102E;
  --sec-standards: #F2E4C8;
  --sec-archive:   #8C8578;

  /* --- widths: three visibly different, plus bleed ----------------------- */
  --measure:  84ch;     /* prose */
  --w-break:  1480px;   /* figures, tables, pulled material */
  --w-wide:   1720px;   /* page frame */
  --gut:      clamp(18px, 4vw, 48px);
  --rail:     340px;

  /* --- type ------------------------------------------------------------- */
  --sans: "Public Sans", system-ui, sans-serif;
  --disp: "Familjen Grotesk", "Public Sans", sans-serif;
  --body: 19px;
  --prose-size: 20px;
  --lh: 1.62;
  --gap-p: 1.15em;       /* paragraph gap — insertions get >= 2x this */
}

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

html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--body); line-height:var(--lh);
  font-weight:380; text-wrap:pretty; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:var(--figure); text-decoration:none; text-underline-offset:.18em;
   text-decoration-thickness:from-font }
a:hover{ color:var(--flag); text-decoration:underline }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:700; letter-spacing:-.028em;
  line-height:.98; margin:0 }
p{ margin:0 0 var(--gap-p) }
p:last-child{ margin-bottom:0 }
strong{ font-weight:650 }
em{ font-style:italic }
figure{ margin:0 }
ul,ol{ margin:0 0 var(--gap-p); padding-left:1.25em }
:focus-visible{ outline:3px solid var(--figure); outline-offset:3px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

/* --------------------------------------------------------------------------
   Frames
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--w-wide); margin-inline:auto;
  padding-inline:var(--gut) }
.prose{ max-width:var(--measure) }
.breakout{ max-width:var(--w-break) }
.centred{ margin-inline:auto }

/* --------------------------------------------------------------------------
   Signature: printer's furniture — registration mark, colour bar, plate numeral
   -------------------------------------------------------------------------- */
.regmark{ flex:0 0 auto; color:currentColor }
.bar{ display:flex; height:14px; width:100%; margin:0;
  border-top:2px solid var(--ink) }
.bar i{ flex:1 1 0 }
.bar i.b-makers{ background:var(--sec-makers) }
.bar i.b-materials{ background:var(--sec-materials) }
.bar i.b-places{ background:var(--sec-places) }
.bar i.b-people{ background:var(--sec-people) }
.bar i.b-standards{ background:var(--sec-standards) }
.bar i.b-archive{ background:var(--sec-archive) }

.plate-no{
  font-family:var(--disp); font-weight:700; letter-spacing:-.05em;
  line-height:.78; font-size:clamp(76px,10vw,168px); opacity:.42;
}
.plate-no--solid{ opacity:1; color:var(--accent-deep) }

.kicker{
  font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.kicker svg,.sect svg,.strip__i .n svg,.supporters .k svg,.notes .k svg,
.sec-nav svg,.nav__toggle svg,.card__b .kicker svg{
  width:19px; height:19px; flex:0 0 auto;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead{ background:var(--ink); color:var(--paper) }
.masthead a{ color:var(--paper) }
.masthead a:hover{ color:var(--paper); text-decoration:underline }
.masthead__in{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px 32px; flex-wrap:wrap; padding-block:18px 12px;
}
.brand{ display:flex; align-items:stretch; gap:16px; text-decoration:none }
.brand .regmark{
  width:56px; height:56px; padding:7px; background:var(--ink); color:var(--paper);
  box-sizing:border-box;
}
.brand__mark{ display:flex; align-items:center; justify-content:center;
  width:66px; height:auto; align-self:stretch; flex:0 0 auto;
  background:var(--paper); color:var(--ink) }
.brand__mark svg{ width:42px; height:23px }
.brand__type{ display:flex; flex-direction:column; align-items:flex-start; gap:3px }
.brand__l1{ font-family:var(--disp); font-weight:700; letter-spacing:-.045em;
  line-height:.82; font-size:clamp(30px,3.5vw,54px) }
.brand__l2{ font-family:var(--disp); font-weight:700; letter-spacing:.04em;
  line-height:1; font-size:clamp(17px,2vw,27px); text-transform:uppercase;
  background:var(--accent); color:var(--ink); padding:3px 10px 5px }
.brand__name{
  font-family:var(--disp); font-weight:700; letter-spacing:-.038em;
  line-height:.86; font-size:clamp(34px,6vw,88px);
}
.nav{ display:flex; flex-wrap:wrap; gap:6px 26px; width:auto;
  justify-content:flex-end; padding-bottom:2px;
  font-size:14px; font-weight:700; letter-spacing:.16em; text-transform:uppercase }
.nav a{ padding-bottom:5px; border-bottom:5px solid transparent }
.nav a[data-sec="makers"]{ border-bottom-color:var(--sec-makers) }
.nav a[data-sec="materials"]{ border-bottom-color:var(--sec-materials) }
.nav a[data-sec="places"]{ border-bottom-color:var(--sec-places) }
.nav a[data-sec="people"]{ border-bottom-color:var(--sec-people) }
.nav a[data-sec="standards"]{ border-bottom-color:var(--sec-standards) }
.nav a[data-sec="archive"]{ border-bottom-color:var(--sec-archive) }
.nav a:hover{ text-decoration:none; opacity:.72 }
.nav a{ padding-block:2px }
.nav a[aria-current]{ box-shadow:none; background:var(--paper); color:var(--ink);
  padding:2px 8px 5px }
.nav__toggle,.nav__box{ display:none }

@media (max-width:1200px){
  .nav{ font-size:12.5px; letter-spacing:.12em; gap:6px 16px }
  .brand__l1{ font-size:clamp(28px,3.2vw,40px) }
  .brand__l2{ font-size:clamp(16px,1.8vw,21px) }
}
@media (max-width:900px){
  /* mobile: compact masthead, smaller chips, unlabelled map */
  .brand{ gap:11px }
  .brand__mark{ width:50px }
  .brand__mark svg{ width:32px; height:18px }
  .brand__l1{ font-size:30px }
  .brand__l2{ font-size:15px; padding:2px 8px 4px }
  .bar{ height:10px }
  .masthead__in{ align-items:center; padding-block:12px 10px }
  .brand__mark{ width:54px }
  .brand__mark svg{ width:34px; height:19px }
  .brand .regmark{ width:44px; height:44px; padding:6px }
  .nav{ display:none }
  .nav__toggle{
    display:flex; align-items:center; gap:10px; cursor:pointer; margin-left:auto;
    font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    border:2px solid var(--paper); padding:8px 12px;
  }
  .nav__box:checked ~ .nav{
    display:grid; gap:0; width:100%; font-size:17px; letter-spacing:.1em;
    padding:0 0 4px; margin-top:12px; border-top:2px solid var(--paper-30);
    justify-content:stretch;
  }
  .nav__box:checked ~ .nav a{ border-bottom:0 }
  .nav__box:checked ~ .nav a{
    padding:14px var(--gut); border-top:1px solid var(--paper-30);
  }
  .masthead__in{ flex-wrap:wrap }
  .nav{ order:3 }
}

/* --------------------------------------------------------------------------
   Plates — the homepage's structural vocabulary
   -------------------------------------------------------------------------- */
.plate{ padding-block:clamp(48px,6vw,92px) }
.plate--accent{ background:var(--accent); color:var(--ink) }
.plate--green{ background:var(--secondary); color:var(--ink) }
.plate--ink{ background:var(--ink); color:var(--paper) }
.plate--paper{ background:var(--paper) }
.plate--paper2{ background:var(--paper-2) }
.plate--accent a{ color:var(--ink) }
.plate--accent a:hover{ color:var(--ink) }
.plate--ink a{ color:var(--paper) }
.plate--ink a:hover{ color:var(--paper) }
.plate--green a{ color:var(--ink) }
.plate--tight{ padding-block:clamp(30px,3.4vw,52px) }

.plate__head{ display:flex; align-items:flex-start; gap:clamp(16px,2.4vw,34px) }
.plate__head h1,.plate__head h2{ max-width:24ch }
.plate h1{ font-size:clamp(44px,7.4vw,116px) }
.plate h2{ font-size:clamp(34px,4.6vw,74px) }
.plate__deck{ font-size:clamp(18px,1.3vw,23px); max-width:62ch; margin-top:14px }

/* the lead ---------------------------------------------------------------- */
.lead-band{ display:grid; gap:clamp(24px,2.6vw,46px); align-items:end;
  margin-top:clamp(20px,2.2vw,34px) }
@media (min-width:1200px){
  .lead-band{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) }
  .lead-band__t{ padding-bottom:8px }
}
@media (min-width:1600px){
  .lead-band{ grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) }
}
/* the numeral sits above the headline here, so display type gets the track */
.lead-band__t .plate__head{ display:block }
.lead-band__t .plate-no{ font-size:clamp(56px,4.4vw,104px); margin-bottom:2px }
.lead-band__t .plate__head h1{ max-width:none }
.lead-band__f img{ width:100%; aspect-ratio:4/3; max-height:560px; object-fit:cover;
  border-bottom:3px solid var(--ink) }
.lead-fig{ margin-top:clamp(28px,3.6vw,54px) }
.lead-fig img{ width:100%; aspect-ratio:16/9; object-fit:cover }

/* --------------------------------------------------------------------------
   Figure system — three treatments, one drawing system
   1 .fig--plate   image inset in a coloured plate, caption in the plate
   2 .fig--card    image flush to the top of a colour card, caption padded under
   3 .fig--bleed   full-bleed band breaking the measure
   -------------------------------------------------------------------------- */
figure img{ width:100% }

.fig-cap{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  font-size:17px; line-height:1.45; margin-top:14px;
  border-top:2px solid currentColor; padding-top:11px;
}
.fig-cap__t{ flex:1 1 22ch; min-width:0; max-width:80ch }
.fig-cap__div{ flex:0 0 auto; opacity:.5; align-self:center }
.fig-cap__c{ flex:0 1 auto; font-size:13.5px; letter-spacing:.02em; opacity:.66;
  max-width:52ch }

.fig--card{ background:var(--figure); color:var(--paper) }
.fig--card.is-green{ background:var(--secondary); color:var(--ink) }
.fig--card.is-red{ background:var(--flag); color:var(--paper) }
.fig--card.is-ink{ background:var(--ink); color:var(--paper) }
.fig--card img{ aspect-ratio:3/2; object-fit:cover }
.fig--card .fig-cap{ margin:0; padding:16px clamp(16px,1.6vw,26px) 20px;
  border-top:0 }

.fig--plate{ background:var(--paper-2); padding:clamp(14px,1.4vw,22px) }
.fig--plate img{ aspect-ratio:3/2; object-fit:cover }
.fig--plate .fig-cap{ border-top-color:var(--ink-30) }

.fig--bleed{ width:100vw; margin-left:calc(50% - 50vw); max-width:100vw }
.fig--bleed img{ width:100%; aspect-ratio:2.35/1; object-fit:cover }
.fig--bleed .fig-cap{ max-width:var(--w-break); margin-inline:auto;
  padding-inline:var(--gut) }

/* --------------------------------------------------------------------------
   Section strip (homepage) + section icons
   -------------------------------------------------------------------------- */
.strip{ display:grid; gap:clamp(20px,2vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.strip__i{ display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--paper); border-top:4px solid var(--accent) }
.plate--ink .strip__i{ background:#211d15; color:var(--paper) }
.strip__i img{ aspect-ratio:16/10; object-fit:cover;
  border-bottom:3px solid var(--accent) }
.strip__i .b{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px;
  flex:1 1 auto }
.strip__i h3{ font-size:26px }
.strip__i p{ margin:0; font-size:16.5px; line-height:1.45 }
.strip__i .n{ margin-top:auto; font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; opacity:.7 }
.strip__i:hover h3{ color:var(--accent) }

/* --------------------------------------------------------------------------
   Curated run — deliberately uneven
   -------------------------------------------------------------------------- */
.run{ display:grid; gap:clamp(26px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.run--split{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  align-items:start }
.run--split > .card{ height:auto }
.card{ display:flex; flex-direction:column; text-decoration:none; color:inherit;
  height:100% }
.card img{ width:100%; aspect-ratio:3/2; object-fit:cover;
  border-bottom:3px solid var(--ink) }
.card__fig{ position:relative; display:block; background:var(--paper-2);
  padding:9px 9px 0 }
.plate--accent .card__fig,.plate--ink .card__fig{ background:var(--paper) }
.card__fig img{ box-shadow:0 0 0 1px var(--ink-30) }
.card__plate{
  position:absolute; left:9px; top:9px; display:inline-flex; align-items:baseline;
  gap:8px; background:var(--ink); color:var(--paper);
  font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.16em;
  text-transform:uppercase; padding:5px 10px 6px;
}
.card:hover .card__plate{ background:var(--accent); color:var(--ink) }
.plate--ink .card img{ border-bottom-color:var(--accent) }
.card--framed img{ box-shadow:0 0 0 1px var(--ink-30) }
.card--tall img{ aspect-ratio:4/5 }
.card__b{ display:flex; flex-direction:column; gap:9px; padding-top:16px;
  flex:1 1 auto }
.card h3{ font-size:clamp(24px,2vw,34px) }
.card--big h3{ font-size:clamp(32px,3.2vw,52px) }
.card p{ margin:0; font-size:17.5px; line-height:1.48 }
.card .sect{ margin-top:auto; padding-top:10px; font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; display:flex; gap:9px;
  align-items:center }
.card:hover h3{ color:var(--accent) }
.card--framed{ background:var(--paper-2); padding:clamp(14px,1.3vw,20px) }
.plate--ink .card--framed{ background:#211d15 }

/* --------------------------------------------------------------------------
   Feed + supporters rail (homepage only)
   -------------------------------------------------------------------------- */
.feed{ display:grid; gap:clamp(30px,3.4vw,56px); align-items:start }
@media (min-width:1080px){
  .feed{ grid-template-columns:minmax(0,1fr) var(--rail) }
}
.rail{ position:sticky; top:22px }
@media (max-width:1079px){ .rail{ position:static } }

.supporters{ background:var(--ink); color:var(--paper); padding:22px 20px 26px }
.supporters h2{ font-size:26px; margin-bottom:6px }
.supporters .k{ font-size:12.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px }
.supporters .intro{ font-size:16px; color:var(--paper-60); margin-bottom:18px }
.sponsor-mosaic{ display:flex; flex-direction:column; gap:14px }
.sponsor{
  display:block; text-decoration:none; color:var(--paper);
  background:#241f16; border-left:3px solid var(--paper-30);
  padding:13px 15px 15px;
}
.sponsor:hover{ border-left-color:var(--accent); color:var(--paper) }
.sponsor-name{ display:block; font-family:var(--disp); font-weight:700;
  font-size:21px; letter-spacing:-.02em; line-height:1.05 }
.sponsor-blurb{ display:block; font-size:14.5px; line-height:1.42;
  color:var(--paper-60); margin-top:6px; min-height:2.84em }
.sponsor.feat{ background:var(--accent); color:var(--ink);
  border-left-color:var(--ink); padding:18px 17px 20px }
.sponsor.feat:hover{ color:var(--ink); border-left-color:var(--paper) }
.sponsor.feat .sponsor-name{ font-size:27px }
.sponsor.feat .sponsor-blurb{ color:var(--ink); font-size:16px }
@media (min-width:1080px){ .sponsor,.sponsor.feat{ width:100% } }
@media (max-width:1079px){
  .sponsor-mosaic{ display:grid; grid-template-columns:repeat(auto-fill,260px);
    gap:14px; justify-content:start }
  .sponsor,.sponsor.feat{ width:260px }
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.map-band{ display:grid; gap:clamp(22px,2.4vw,40px); margin-top:clamp(22px,2.4vw,38px);
  align-items:start }
@media (min-width:1000px){
  .map-band{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) }
}
.map-band__notes{ display:grid; gap:clamp(16px,1.8vw,26px); align-content:start }
.map-figure{ background:var(--paper); padding:clamp(12px,1.1vw,18px) }
.plate--green .map-figure{ background:#6B8D36 }
.map-slot{ width:100%; }
.map-slot svg{ width:100%; height:auto; display:block; max-height:min(62vh,540px) }
.map-pin__dot{ fill:var(--flag) }
.map-pin__t{ font-family:var(--sans); font-size:29px; font-weight:700;
  fill:var(--ink); letter-spacing:.01em;
  stroke:#F2E4C8; stroke-width:8; stroke-linejoin:round; paint-order:stroke fill }
.map-figure .fig-cap{ border-top-color:var(--ink-30) }

/* --------------------------------------------------------------------------
   Article page
   -------------------------------------------------------------------------- */
.art-head{ background:var(--ink); color:var(--paper);
  padding-block:clamp(38px,4.6vw,76px) }
.art-head a{ color:var(--accent) }
.art-head a:hover{ color:var(--accent) }
.art-head h1{ font-size:clamp(40px,6.4vw,104px); margin:16px 0 22px;
  max-width:26ch }
.art-head .kicker{ color:var(--accent) }
.art-head .stand{ font-size:clamp(19px,1.5vw,26px); line-height:1.4;
  max-width:60ch; font-weight:400 }
.art-head .meta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 22px;
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-60) }

.art-body{ padding-block:clamp(34px,4vw,60px) }
.art-body > *{ margin-inline:auto }
.art-body p,.art-body ul,.art-body ol,.art-body h2,.art-body h3,.art-body .lead{
  max-width:var(--measure); margin-inline:auto;
}
.art-body{ font-size:var(--prose-size) }
.art-body h2{ font-size:clamp(26px,2.1vw,36px); letter-spacing:-.012em;
  line-height:1.06; margin:2.5em auto .75em; max-width:var(--measure);
  padding-top:15px; border-top:3px solid var(--ink) }
.art-body h2:first-child{ margin-top:0 }
.art-body h3{ font-size:clamp(20px,1.5vw,25px); letter-spacing:-.01em;
  margin:1.9em auto .5em; max-width:var(--measure); color:var(--accent-deep) }
.art-body .lead{ font-size:clamp(21px,1.6vw,27px); line-height:1.4;
  font-weight:400; margin-bottom:1.4em }
.art-body > figure,.art-body > .callout,.art-body > .pullquote,
.art-body > .blockquote,.art-body > .statrow,.art-body > .notes,
.art-body > .table-scroll,.art-body > .chart,.art-body > .map-figure,
.art-body > .profile-grid,.art-body > .gallery{
  margin-block:clamp(32px,3.4vw,58px);           /* A2: >= 2x paragraph gap */
  max-width:var(--w-break);
}
.art-body > .fig--bleed{ max-width:100vw; margin-inline:0 }

/* inline components ------------------------------------------------------- */
.pullquote{ border-top:4px solid var(--accent); border-bottom:4px solid var(--accent);
  padding:22px 0 24px }
.pullquote p{ font-family:var(--disp); font-weight:700; font-size:clamp(26px,2.6vw,40px);
  line-height:1.06; letter-spacing:-.025em; max-width:34ch; margin:0 }
.blockquote{ background:var(--paper-2); padding:22px clamp(18px,2vw,30px) 24px;
  border-left:6px solid var(--figure) }
.blockquote p{ font-size:1.05em; margin-bottom:.6em }
.blockquote cite{ font-style:normal; font-size:15px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-60) }
.callout{ background:var(--accent); color:var(--paper);
  padding:24px clamp(18px,2.2vw,32px) 26px }
.callout p{ font-size:1.06em; margin:0 }
.note{ font-size:16.5px; border-left:3px solid var(--flag); padding-left:14px;
  color:var(--ink-60) }

.statrow{ display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--ink) }
.statblock{ background:var(--ink); color:var(--paper); padding:20px 20px 22px;
  display:flex; flex-direction:column; gap:6px }
.stat-num{ font-family:var(--disp); font-weight:700; font-size:clamp(36px,3.4vw,54px);
  line-height:.9; letter-spacing:-.03em; color:var(--accent) }
.stat-label{ font-size:15.5px; line-height:1.35; color:var(--paper-60) }

.notes{ background:var(--paper-2) }
.notes .more{ margin-top:8px }
.notes .more > summary{ cursor:pointer; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep);
  padding:8px 0 2px; list-style:none }
.notes .more > summary::-webkit-details-marker{ display:none }
.notes .more > summary::after{ content:" +" }
.notes .more[open] > summary::after{ content:" \2212" }
.notes .more > summary:hover{ color:var(--ink) }
.notes__in{ padding:clamp(20px,2.4vw,34px) }
.notes h2{ font-size:clamp(24px,2vw,32px); margin:0 0 4px; max-width:none }
.notes .k{ font-size:12.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-deep); margin-bottom:10px;
  display:flex; align-items:center; gap:9px }
.notes__cols{ display:grid; gap:clamp(18px,2vw,34px); margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.notes h3{ font-family:var(--disp); font-size:21px; margin:0 0 10px;
  padding-bottom:8px; border-bottom:2px solid var(--ink); max-width:none }

.timeline{ list-style:none; margin:0; padding:0 }
.timeline li{ display:grid; grid-template-columns:minmax(90px,auto) minmax(0,1fr);
  gap:6px 16px; padding:9px 0; border-top:1px solid var(--ink-12);
  font-size:16.5px; line-height:1.4 }
.timeline li:first-child{ border-top:0 }
.t-when{ font-weight:700; letter-spacing:.02em; color:var(--flag-deep) }
.notes .keylist{ list-style:none; margin:0; padding:0 }
.notes .keylist li{ padding:9px 0; border-top:1px solid var(--ink-12);
  font-size:16.5px; line-height:1.42 }
.notes .keylist li:first-child{ border-top:0 }
.notes .keylist b{ font-weight:700 }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.datatable,.versus{ border-collapse:collapse; width:100%; min-width:520px;
  font-size:17px }
.datatable th,.versus th{ text-align:left; font-family:var(--disp); font-size:19px;
  background:var(--ink); color:var(--paper); padding:12px 16px; font-weight:700 }
.datatable td,.versus td{ padding:12px 16px; border-bottom:1px solid var(--ink-12);
  vertical-align:top }
.datatable tr:last-child td,.versus tr:last-child td{ border-bottom:0 }
.datatable caption,.versus caption{ text-align:left; font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding-bottom:10px;
  color:var(--ink-60) }
.versus td:first-child{ font-weight:650 }

.gallery{ display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.gallery figure img{ aspect-ratio:3/2; object-fit:cover }
.gallery .fig-cap{ font-size:15.5px; margin-top:10px; padding-top:8px }

.chart figcaption{ font-size:16px; margin-top:12px; padding-top:10px;
  border-top:2px solid var(--ink) }
.chart svg{ width:100%; height:auto }
.chart .c-bar{ fill:var(--figure) }
.chart .c-bar.is-accent{ fill:var(--accent) }
.chart .c-lab,.chart .c-val{ font-family:var(--sans); font-size:14px; fill:var(--ink) }
.chart .c-val{ font-weight:700 }
.chart .c-line{ fill:none; stroke:var(--accent); stroke-width:3 }
.chart .c-axis{ stroke:var(--ink-30); stroke-width:1 }

.profile-grid{ display:grid; gap:clamp(16px,1.8vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.profile-card{ background:var(--paper-2); padding:20px; display:flex;
  flex-direction:column; gap:10px; height:100% }
.profile-card .p-photo{ aspect-ratio:1/1; object-fit:cover; width:110px }
.profile-card h3{ font-size:24px }
.profile-card .p-role{ font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--flag); margin:0 }
.profile-card p{ font-size:16.5px; margin:0 }
.profile-card .p-links{ margin-top:auto; padding-top:8px; font-size:16px }
.profile-card .p-attr{ font-size:13.5px; color:var(--ink-60) }
.profile-card.no-photo{ border-left:6px solid var(--figure) }

.org-grid{ display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.org-card{ display:flex; flex-direction:column; gap:4px; background:var(--paper-2);
  padding:14px 16px; text-decoration:none; color:inherit }
.org-card:hover{ background:var(--paper-3); color:inherit }
.org-logo{ height:34px; width:auto; max-width:100%; object-fit:contain;
  margin-bottom:6px }
.org-name{ font-family:var(--disp); font-weight:700; font-size:20px }
.org-host{ font-size:14px; color:var(--ink-60) }
.entity-ref{ font-weight:600; white-space:nowrap }

.further-grid{ display:grid; gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); background:var(--ink-12) }
.further-grid a{ background:var(--paper-2); padding:18px 20px 20px;
  font-family:var(--disp); font-weight:700; font-size:22px; line-height:1.06;
  letter-spacing:-.02em; color:var(--ink); display:block }
.further-grid a:hover{ background:var(--accent); color:var(--paper);
  text-decoration:none }
.related-links{ list-style:none; margin:0; padding:0; display:grid; gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.related-links li{ background:var(--paper-2) }
.related-links li a{ display:block; padding:18px 20px 20px; font-family:var(--disp);
  font-weight:700; font-size:21px; line-height:1.08; letter-spacing:-.02em;
  color:var(--ink) }
.related-links li a:hover{ background:var(--accent); color:var(--paper);
  text-decoration:none }
.related-links:empty{ display:none }

.art-end{ padding-block:clamp(34px,4vw,60px) 0 }
.art-foot{ padding-block:clamp(34px,4vw,64px) }
.art-foot h2{ font-size:clamp(24px,2.2vw,34px); margin-bottom:18px }

/* --------------------------------------------------------------------------
   Section / category pages
   -------------------------------------------------------------------------- */
.sec-head{ color:var(--paper) }
.sec-head h1{ font-size:clamp(44px,7vw,108px); margin:14px 0 20px; max-width:22ch }
.sec-head .deck{ font-size:clamp(19px,1.4vw,24px); max-width:58ch }
.sec-nav{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:26px }
.sec-nav a{ font-size:13.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; border:2px solid currentColor; padding:8px 13px }
.sec-nav a:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper);
  text-decoration:none }

.listing{ display:grid; gap:clamp(28px,3vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) }
.entry{ display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--paper-2); height:100% }
.entry img{ width:100%; aspect-ratio:3/2; object-fit:cover;
  border-bottom:3px solid var(--ink) }
.entry__b{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px;
  flex:1 1 auto }
.entry h3{ font-size:clamp(23px,1.8vw,30px) }
.entry p{ margin:0; font-size:17px; line-height:1.46 }
.entry .sect{ margin-top:auto; padding-top:12px; font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
  display:flex; align-items:center; gap:9px }
.entry:hover h3{ color:var(--accent) }
.entry--lead{ grid-column:1/-1; background:var(--ink); color:var(--paper) }
.entry--lead .sect{ color:var(--accent) }
@media (min-width:900px){
  .entry--lead{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:stretch }
  .entry--lead img{ width:100%; height:100%; object-fit:cover; aspect-ratio:auto;
    min-height:340px }
  .entry--lead .entry__b{ padding:clamp(22px,2.6vw,40px) }
  .entry--lead h3{ font-size:clamp(30px,3.4vw,54px) }
  .entry--lead p{ font-size:19.5px }
}

/* archive ----------------------------------------------------------------- */
.arch{ display:grid; gap:0 }
.arch__g{ margin-bottom:clamp(30px,3vw,50px) }
.arch__g h2{ font-size:clamp(26px,2.4vw,38px); padding-bottom:10px;
  border-bottom:3px solid var(--ink); margin-bottom:4px }
.arch__l{ list-style:none; margin:0; padding:0 }
.arch__l li{ border-bottom:1px solid var(--ink-12) }
.arch__l a{ display:grid; gap:4px 24px; padding:16px 0; color:var(--ink);
  grid-template-columns:minmax(0,1fr) }
@media (min-width:900px){
  .arch__l a{ grid-template-columns:minmax(0,32ch) minmax(0,1fr); align-items:baseline }
}
.arch__l a:hover{ text-decoration:none; background:var(--paper-2) }
.arch__t{ font-family:var(--disp); font-weight:700; font-size:21px; line-height:1.1;
  letter-spacing:-.02em }
.arch__d{ font-size:16.5px; color:var(--ink-60) }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot{ background:var(--accent); color:var(--ink); margin-top:0 }
.foot a{ color:var(--ink) }
.foot__in{ display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:30px 60px; padding-block:clamp(28px,3vw,48px) }
.foot__name{ font-family:var(--disp); font-weight:700; font-size:clamp(28px,3vw,44px);
  letter-spacing:-.03em; line-height:.95 }
.foot__scope{ font-size:18px; max-width:52ch; margin-top:12px }
.foot__nav{ display:grid; gap:8px 44px; grid-template-columns:repeat(2,auto);
  font-size:16px; align-content:start }

/* --------------------------------------------------------------------------
   Simple pages
   -------------------------------------------------------------------------- */
.page-head{ background:var(--ink); color:var(--paper);
  padding-block:clamp(36px,4vw,68px) }
.page-head h1{ font-size:clamp(38px,5.4vw,84px); max-width:24ch }
.page-body{ padding-block:clamp(30px,3.4vw,56px); font-size:var(--prose-size) }
.page-body p,.page-body h2,.page-body ul{ max-width:var(--measure) }
.page-body h2{ font-size:clamp(26px,2.4vw,38px); margin:1.8em 0 .6em }

/* styleguide -------------------------------------------------------------- */
.sg-sec{ padding-block:clamp(26px,3vw,48px); border-bottom:2px solid var(--ink-12) }
.sg-sec > h2{ font-size:clamp(24px,2.2vw,34px); margin-bottom:6px }
.sg-sec > .k{ font-size:12.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:20px }
.sg-box{ margin-block:26px }

/* --------------------------------------------------------------------------
   Above the desktop cap — the page gains, it does not just gain margin
   -------------------------------------------------------------------------- */
@media (min-width:1600px){
  :root{
    --measure:88ch; --w-break:1580px; --w-wide:1860px;
    --body:20px; --prose-size:22px; --rail:390px;
  }
  .listing{ grid-template-columns:repeat(auto-fit,minmax(390px,1fr)) }
  .strip{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
  .fig-cap{ font-size:18px }
  .fig-cap__c{ font-size:14.5px }
  .art-body > figure,.art-body > .notes,.art-body > .table-scroll,
  .art-body > .statrow,.art-body > .callout,.art-body > .pullquote{
    max-width:var(--w-break);
  }
}
@media (min-width:2200px){
  :root{
    --measure:92ch; --w-break:1780px; --w-wide:2180px;
    --body:21px; --prose-size:24px; --rail:460px; --gut:64px;
  }
  .plate h1{ font-size:clamp(96px,7vw,152px) }
  .listing{ grid-template-columns:repeat(auto-fit,minmax(430px,1fr)) }
  .strip{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .run{ grid-template-columns:repeat(auto-fit,minmax(420px,1fr)) }
  .notes__cols{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* --------------------------------------------------------------------------
   Image height caps — the page keeps its full width, the photographs do not
   grow with it past a readable height.
   -------------------------------------------------------------------------- */
.lead-fig img{ aspect-ratio:16/9; max-height:600px; object-fit:cover }
.fig--bleed img{ aspect-ratio:2.4/1; max-height:560px }
.fig--card img,.fig--plate img{ aspect-ratio:16/9; max-height:480px }
.gallery figure img{ aspect-ratio:3/2; max-height:360px }
.card img{ max-height:340px }
.card--big img{ max-height:460px }
.card--big .card__plate{ font-size:16px; padding:6px 13px 8px }
.card--tall img{ max-height:420px }
.strip__i img{ max-height:230px }
.entry img{ max-height:320px }
@media (min-width:900px){
  .entry--lead img{ min-height:300px; max-height:440px }
}
.profile-card .p-photo{ max-height:110px }

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .run--split{ grid-template-columns:minmax(0,1fr) }
  .plate__head{ flex-direction:column; gap:6px }
  .plate-no{ font-size:64px }
  .foot__in{ flex-direction:column }
  .art-body > figure,.art-body > .callout,.art-body > .pullquote,
  .art-body > .blockquote,.art-body > .statrow,.art-body > .notes,
  .art-body > .table-scroll{ margin-block:34px }
}
@media (max-width:520px){
  .art-body > figure,.art-body > .callout,.art-body > .pullquote,
  .art-body > .blockquote,.art-body > .statrow,.art-body > .notes,
  .art-body > .table-scroll{ margin-block:28px }
  .fig-cap{ font-size:16px }
}
@media (max-width:640px){
  .map-pin__t{ display:none }
  .map-figure{ padding:8px }
}
@media (max-width:520px){
  .brand__l1{ font-size:27px }
  .brand__l2{ font-size:13.5px }
  .brand__mark{ width:44px }
  .brand__mark svg{ width:28px; height:16px }
  .nav__toggle{ font-size:11.5px; padding:11px 11px }
}
@media (max-width:420px){
  .timeline li{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:900px){
  /* card mats and plate chips, compacted (after the base card rules) */
  .card__fig{ padding:7px 7px 0 }
  .card__plate{ font-size:11px; letter-spacing:.12em; padding:4px 8px 5px;
    left:7px; top:7px }
  .card--big .card__plate{ font-size:12px; padding:4px 9px 6px }
}

/* 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}
.sponsor-mosaic > .sponsor{flex:0 0 auto!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-grid-fill: fixed px columns leave a dead strip at wide widths — the tiles
   must stretch, and a tile with its own fixed width has to give that up too */
.sponsor-mosaic{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;justify-content:stretch!important}
.sponsor-mosaic>[data-partner],.sponsor-mosaic>*>[data-partner]{width:auto!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-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:5;-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}

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* 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:#F4EDDF;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-hover-pad */
.arch__l a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
.card:hover h2:where(.rt-h3){color: var(--accent);}
.entry:hover h2:where(.rt-h3){color: var(--accent);}
h2:where(.rt-h3){font-family: var(--disp); font-weight: 700; letter-spacing: -0.028em; line-height: 0.98; margin: 0px;}
.strip__i h2:where(.rt-h3){font-size: 26px;}
.strip__i:hover h2:where(.rt-h3){color: var(--accent);}
.card h2:where(.rt-h3){font-size: clamp(24px, 2vw, 34px);}
.card--big h2:where(.rt-h3){font-size: clamp(32px, 3.2vw, 52px);}
.entry h2:where(.rt-h3){font-size: clamp(23px, 1.8vw, 30px);}
@media (min-width: 900px){.entry--lead h2:where(.rt-h3){font-size: clamp(30px, 3.4vw, 54px);}}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.card__fig > img,
  a.card.card--big.card--framed > span.card__fig > img,
  article > figure.fig--bleed > img,
  div.art-body.wrap > figure.fig--card > img,
  div.art-body.wrap > figure.fig--plate > img,
  div.gallery > figure > img,
  div.lead-band.wrap > figure.lead-band__f > img,
  div.listing > a.entry > img,
  div.listing > a.entry.entry--lead > img,
  div.strip > a.strip__i > img){height:auto}
/* op-img-dims:end */

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}