/* Hello Auan Designs — "The Plate Room"
   ground / panel / ink / accent / secondary — five jobs, two saturated members
   ------------------------------------------------------------------------- */
:root{
  --ground:#101113;      /* ground  — the press-room dark the whole site sits on */
  --panel:#1C1E22;       /* panel   — the mat every plate is mounted on */
  --panel-2:#16171A;
  --line:#2C2F35;        /* hairlines */
  --line-2:#3A3E45;
  --ink:#EDE9E1;         /* ink     — text on ground */
  --muted:#8E9199;       /* credits, small furniture */
  --accent:#E8FF52;      /* accent  — acid, used as whole areas (h 90) */
  --rose:#E0325C;        /* secondary — plate numerals, section 1/3 (h 345) */
  --clay:#C96442;        /* flag    — Books, warnings (h 20) */

  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Space Grotesk","Helvetica Neue",Arial,sans-serif;

  --fs-body:21px;
  --plate-w:1480px;      /* breakout width */
  --page-w:1480px;       /* band width */
  --gut:64px;
}
@media (min-width:1680px){ :root{ --plate-w:1600px; --page-w:1620px; --gut:80px; } }
@media (min-width:2100px){ :root{ --fs-body:23px; --plate-w:1880px; --page-w:1900px; --gut:104px; } }
@media (max-width:900px){ :root{ --fs-body:19px; --gut:28px; } }
@media (max-width:560px){ :root{ --gut:20px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--serif); font-size:var(--fs-body); line-height:1.62;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--accent); }
h1,h2,h3,h4{ font-weight:800; letter-spacing:-0.025em; line-height:1.08; margin:0; text-wrap:pretty; }
p{ margin:0 0 1.05em; text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.page{ width:100%; max-width:var(--page-w); margin:0 auto; padding-inline:var(--gut); }
.kicker{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:0; }
.kicker svg{ width:20px; height:20px; flex:none; }
.kicker--rose{ color:var(--rose); }
.label{ font-family:var(--sans); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.plate-no{ font-family:var(--sans); font-weight:700; font-size:clamp(22px,2.1vw,32px); color:var(--rose); line-height:1; letter-spacing:.02em; }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }
.more{ font-family:var(--sans); font-weight:500; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); border-bottom:2px solid var(--accent);
  padding-bottom:3px; display:inline-block; }
.more:hover{ color:var(--ink); border-color:var(--ink); }
.reg{ width:26px; height:26px; color:var(--accent); flex:none; }

/* ---------- masthead: nav rule, hairline, wordmark plate ---------- */
.site-head{ border-bottom:0; background:var(--ground); }
.navrule{ border-bottom:1px solid var(--line); }
.navrule .page{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  padding-block:14px; font-family:var(--sans); font-size:14px; letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:1240px) and (min-width:1101px){
  .navrule .page{ font-size:12px; letter-spacing:.08em; }
  .navrule ul{ gap:16px; flex-wrap:nowrap; }
  .navrule a{ gap:6px; white-space:nowrap; }
  .navrule a svg{ width:16px; height:16px; }
}
.navrule ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:28px; }
.navrule a{ display:inline-flex; align-items:center; gap:8px; }
.navrule a svg{ width:19px; height:19px; }
.navrule a[aria-current="page"]{ color:var(--accent); }
.navrule .archive-link{ color:var(--accent); white-space:nowrap; }
.masthead{ border-bottom:2px solid var(--accent); }
.masthead .page{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; padding-block:30px 16px; }
/* display paragraphs carry no inherited bottom margin — spacing is set on purpose */
.wordmark,.lead-numeral,.lead-numeral-note,.mast-sub,.lead-dek,.foot-line,.label,.byfurn,.stand{ margin-bottom:0; }
.wordmark{ font-size:clamp(34px,5.8vw,96px); font-weight:800; letter-spacing:-0.045em; line-height:.9; margin:0; }
.wordmark a{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:0 .16em; }
.wordmark .wm-2{ background:var(--accent); color:var(--ground); padding:0 .1em .05em; }
.wordmark a:hover .wm-2{ background:var(--rose); color:var(--ink); }
.masthead .wordmark{ display:flex; align-items:flex-start; gap:.3em; }
.wordmark .mark{ width:.44em; height:.44em; color:var(--accent); flex:none; margin-top:.1em; }
.wordmark a:hover{ color:var(--ink); }
.mast-right{ display:flex; align-items:flex-start; gap:20px; padding-top:10px; }
.mast-sub{ font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-align:right; line-height:1.5; max-width:210px; }
.typeheight{ color:var(--accent); }
.navtoggle{ display:none; }

@media (max-width:1100px){
  .navrule .page{ display:none; }
  .masthead .page{ padding-block:18px; align-items:center; }
  .masthead .wordmark .mark{ display:none; }
  .mast-right{ padding-top:0; align-items:center; }
  .mast-right .typeheight{ display:none; }
  .mast-sub{ display:none; }
  .navtoggle{ display:block; }
  .navtoggle summary{ list-style:none; cursor:pointer; font-family:var(--sans); font-size:13px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
    border:1px solid var(--line-2); padding:10px 14px; min-height:44px; display:flex; align-items:center; }
  .navtoggle summary::-webkit-details-marker{ display:none; }
  .navtoggle ul{ list-style:none; margin:0; padding:0 var(--gut) 18px; }
  .navtoggle li{ border-top:1px solid var(--line); }
  .navtoggle a{ display:flex; align-items:center; gap:12px; min-height:48px;
    font-family:var(--sans); font-size:15px; letter-spacing:.12em; text-transform:uppercase; }
  .navtoggle a svg{ width:19px; height:19px; }
  .wordmark{ max-width:9ch; }
}

/* ---------- footer ---------- */
.site-foot{ background:var(--panel); border-top:1px solid var(--line); margin-top:0; }
.site-foot .page{ padding-block:34px 38px; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.foot-id{ max-width:46ch; }
.foot-id .wordmark{ font-size:clamp(24px,2vw,30px); letter-spacing:-.03em; }
.foot-line{ margin-top:8px; color:#B9B5AD; font-size:16.5px; line-height:1.45; }
.foot-nav{ display:grid; grid-template-columns:repeat(3,auto); gap:8px 40px;
  font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.foot-nav a{ display:inline-flex; gap:8px; align-items:center; }
.foot-nav svg{ width:16px; height:16px; }
@media (max-width:700px){ .site-foot .page{ gap:24px; padding-block:26px 30px; } .foot-nav{ grid-template-columns:repeat(2,auto); gap:10px 28px; } }

/* ---------- homepage: lead plate ---------- */
.lead-band{ border-bottom:1px solid var(--line); }
.lead-grid{ display:grid; grid-template-columns:1fr minmax(320px,42%); align-items:stretch; }
.lead-type{ background:var(--accent); color:var(--ground); padding:54px 52px 46px;
  display:flex; flex-direction:column; justify-content:space-between; gap:38px; }
.lead-type .kicker{ color:var(--ground); }
.lead-numeral{ font-size:clamp(88px,12vw,208px); font-weight:800; letter-spacing:-.055em; line-height:.8; margin-top:14px; }
.lead-numeral-note{ font-family:var(--sans); font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; margin-top:10px; }
.lead-type h1{ font-size:clamp(30px,3.3vw,47px); }
.lead-dek{ font-size:clamp(18px,1.4vw,21px); margin-top:16px; max-width:44ch; }
.lead-type .more{ color:var(--ground); border-color:var(--ground); }
.lead-type .more:hover{ color:var(--ground); border-color:var(--ground); opacity:.62; }
.lead-photo{ position:relative; background:var(--panel); padding:22px; min-height:520px; }
.lead-photo img{ width:100%; height:100%; object-fit:cover; }
.lead-photo::after{ content:""; position:absolute; inset:22px; border:1px solid var(--accent); pointer-events:none; }
.capbar{ border-bottom:1px solid var(--line); }
.capbar .page{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 36px; padding-block:14px 16px; }
.capbar .cap{ font-size:18px; max-width:80ch; flex:1 1 340px; }
@media (max-width:900px){
  .lead-grid{ grid-template-columns:1fr; }
  .lead-type{ padding:34px var(--gut) 32px; gap:26px; }
  .lead-photo{ min-height:320px; padding:14px; }
  .lead-photo::after{ inset:14px; }
}

/* ---------- band furniture ---------- */
.band{ border-bottom:1px solid var(--line); }
.band .page{ padding-block:74px 66px; }
.band-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:38px; }
.band-head h2{ font-size:clamp(25px,2.6vw,37px); max-width:34ch; }
.band-head .label{ flex:none; }
@media (max-width:760px){ .band .page{ padding-block:46px 42px; } .band-head{ flex-direction:column; align-items:flex-start; gap:14px; } }

/* ---------- section strip: one row of six, the drawn marks doing the work ---------- */
.sect-strip{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.sect-cell{ background:var(--ground); padding:30px 24px 24px; display:flex; flex-direction:column; gap:18px; }
.sect-cell:hover{ background:var(--panel-2); }
.sect-cell .icn{ display:block; width:62px; height:62px; }
.sect-cell .icn svg{ width:100%; height:100%; }
.sect-cell h3{ font-size:22px; letter-spacing:-.02em; }
.sect-cell .label{ margin-top:auto; padding-top:10px; }
@media (min-width:2100px){ .sect-cell{ padding:38px 30px 30px; } .sect-cell .icn{ width:76px; height:76px; } .sect-cell h3{ font-size:26px; } }
@media (max-width:1180px){ .sect-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px){ .sect-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); } .sect-cell{ padding:22px 18px 18px; gap:14px; } .sect-cell .icn{ width:48px; height:48px; } }

/* each section carries its own colour on its mark, everywhere it is named */
[href$="/category/punchcutters/"] svg{ color:var(--rose); }
[href$="/category/typefaces/"] svg{ color:var(--accent); }
[href$="/category/posters/"] svg{ color:var(--clay); }
[href$="/category/sign-systems/"] svg{ color:var(--accent); }
[href$="/category/books/"] svg{ color:var(--clay); }
[href$="/category/screens/"] svg{ color:var(--rose); }
[href$="/archive/"] svg{ color:var(--muted); }
.navrule a:hover svg,.foot-nav a:hover svg,.sect-jump a:hover svg{ opacity:.75; }

/* ---------- featured piece ---------- */
.feature{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:52px; align-items:start; }
.feature-fig{ background:var(--panel); padding:20px; }
.feature-fig img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.feature h2{ font-size:clamp(28px,2.9vw,42px); margin-top:16px; }
.feature .lead-dek{ max-width:56ch; }
.feature .pullquote{ margin-top:30px; }
@media (max-width:900px){ .feature{ grid-template-columns:1fr; gap:28px; } }

/* ---------- editorial run: one wide plate, then a compact row ---------- */
.run-major{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:44px; align-items:center;
  padding-bottom:52px; margin-bottom:52px; border-bottom:1px solid var(--line); }
.run-major .plate-mat{ background:var(--panel); padding:18px; }
.run-major .plate-mat img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.run-major h3{ font-size:clamp(25px,2.4vw,34px); margin-top:16px; }
.run-major p{ font-size:19px; color:#C8C4BB; margin:14px 0 0; }
.run-major .plate-no{ display:block; margin-bottom:10px; }
.run-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; align-items:start; }
.run-row .plate{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.run-row .plate-mat{ background:var(--panel); padding:14px; }
.run-row .plate-mat img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.run-row h3{ font-size:21px; margin-top:16px; }
.run-row p{ font-size:17px; color:#C0BCB4; margin:10px 0 0; }
.run-row .label{ display:block; margin-top:12px; }
.plate .plate-no{ padding-top:2px; }
@media (max-width:980px){
  .run-major{ grid-template-columns:1fr; gap:24px; padding-bottom:38px; margin-bottom:38px; }
  .run-row{ grid-template-columns:1fr; gap:34px; }
}

/* ---------- specimen band: letterform at near-full width ---------- */
.specimen{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--panel-2); }
.specimen .page{ position:relative; padding-block:64px 60px; }
.specimen-glyph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:min(46vw,620px); line-height:.8; color:var(--line);
  letter-spacing:-.06em; pointer-events:none; user-select:none; }
.specimen-body{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:end; }
.specimen-body h2{ font-size:clamp(26px,2.7vw,38px); }
.specimen-body p{ font-size:20px; margin:0; }
@media (max-width:900px){ .specimen-body{ grid-template-columns:1fr; gap:20px; } }

/* ---------- supporters: two runs of three, each filling the width ---------- */
.supporters .page{ padding-block:58px 62px; }
.sponsor-groups{ display:flex; flex-direction:column; gap:24px; }
.sponsor-group{ display:grid; grid-template-columns:repeat(auto-fill,calc((100% - 48px)/3)); gap:24px; }
.sponsor{ background:var(--panel); border:1px solid var(--line); padding:18px 20px 20px;
  display:flex; flex-direction:column; gap:14px; }
.sponsor:hover{ border-color:var(--accent); }
.sponsor img{ background:#0C0D0F; border:1px solid var(--line-2); padding:10px 16px;
  width:100%; height:72px; max-height:72px; object-fit:contain; }
.sponsor-name{ font-family:var(--sans); font-size:15px; letter-spacing:.06em; color:var(--ink); }
.sponsor-blurb{ font-size:16.5px; line-height:1.45; color:#B9B5AD; min-width:200px; }
@media (max-width:900px){ .sponsor-group{ grid-template-columns:repeat(auto-fill,calc((100% - 24px)/2)); } }
@media (max-width:600px){ .sponsor-group{ grid-template-columns:100%; } }

/* ---------- archive band ---------- */
.archive-band{ background:var(--panel); border-top:2px solid var(--accent); border-bottom:1px solid var(--line); }
.archive-band .page{ padding-block:52px 56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; }
.archive-band .icn{ display:block; width:64px; height:64px; color:var(--accent); margin-bottom:20px; }
.archive-band h2{ font-size:clamp(27px,2.7vw,40px); }
.archive-band p{ margin:14px 0 0; font-size:20px; color:#C8C4BB; max-width:52ch; }
.archive-band .statrow{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.archive-band .statblock{ background:var(--panel-2); }
@media (min-width:1400px){ .archive-band .statrow{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){ .archive-band .page{ grid-template-columns:1fr; gap:30px; padding-block:36px 40px; } }

/* ---------- figure system ---------- */
figure{ margin:0; }
.cap-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 28px; margin-top:14px; }
.cap{ font-size:17.5px; line-height:1.45; flex:1 1 320px; margin:0; }
.credit{ font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; color:var(--muted);
  flex:0 1 auto; margin:0; margin-left:auto; text-align:right; }
@media (max-width:700px){ .credit{ margin-left:0; text-align:left; } }

.fig-plate{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; }
.fig-plate > .plate-no{ padding-top:6px; }
.fig-plate .mat{ background:var(--panel); padding:18px; position:relative; }
.fig-plate .mat::after{ content:""; position:absolute; inset:18px; border:1px solid rgba(232,255,82,.5); pointer-events:none; }
.fig-plate img{ width:100%; }
.fig-pair .grid{ background:var(--panel); padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.fig-pair img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.fig-strip{ position:relative; }
.fig-strip .band-img{ position:relative; background:var(--panel); }
.fig-strip img{ width:100%; height:clamp(280px,38vw,540px); object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.86); }
.fig-strip .band-img::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(16,17,19,.72),rgba(224,50,92,.22) 55%,rgba(232,255,82,.16)); mix-blend-mode:multiply; }
.fig-chip{ background:var(--panel); border:1px solid var(--line-2); padding:12px; }
.fig-chip img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.fig-chip .cap{ font-size:16px; flex:1 1 100%; }
.fig-chip .credit{ margin-left:0; text-align:left; }
@media (max-width:700px){
  .fig-plate{ grid-template-columns:1fr; gap:12px; }
  .fig-pair .grid{ grid-template-columns:1fr; }
}

/* ---------- article page ---------- */
.article-head{ border-bottom:1px solid var(--line); }
.article-head .grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,44%); align-items:stretch; }
.article-title{ padding:60px 52px 54px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.article-title h1{ font-size:clamp(34px,4.4vw,68px); letter-spacing:-.04em; }
.article-title .stand{ font-size:clamp(19px,1.7vw,25px); color:var(--accent); max-width:40ch; margin:0; line-height:1.34; }
.article-title .byfurn{ font-family:var(--sans); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
@media (max-width:900px){
  .article-head .grid{ grid-template-columns:1fr; }
  .article-title{ padding:30px var(--gut) 28px; }
}

.article-body{
  /* side tracks absorb what is left between the prose measure and the breakout
     width, and go to zero on narrow screens so the measure is never squeezed */
  --side:max(0px, calc((min(var(--plate-w), 100% - 2*var(--gut)) - 82ch) / 2));
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [wide-start] var(--side)
    [prose-start] minmax(0,82ch)
    [prose-end] var(--side)
    [wide-end] minmax(var(--gut),1fr) [full-end];
  padding-block:56px 20px;
  row-gap:0;
}
.article-body > *{ grid-column:prose; }
.article-body > .breakout{ grid-column:wide; margin-block:56px; }
.article-body > .fullbleed{ grid-column:full; margin-block:60px; }
.article-body > .marginal{ grid-column:prose-end / wide-end; margin-block:44px; padding-left:40px; align-self:start; }
.article-body h2{ font-size:clamp(23px,2.2vw,31px); margin:44px 0 16px; }
.article-body h2:first-child{ margin-top:0; }
.article-body > p{ margin:0 0 1.15em; }
.article-body a:not(.more):not(.entity-ref){ color:var(--accent); border-bottom:1px solid rgba(232,255,82,.42); }
.article-body a:not(.more):not(.entity-ref):hover{ border-bottom-color:var(--accent); }
@media (max-width:1399px){
  .article-body > .marginal{ grid-column:prose; padding-left:0; margin-block:44px; }
  .article-body > .breakout{ margin-block:48px; }
  .article-body > .fullbleed{ margin-block:52px; }
}
@media (max-width:700px){
  .article-body{ padding-block:34px 12px; }
  .article-body > .breakout,.article-body > .marginal{ margin-block:44px; }
  .article-body > .fullbleed{ margin-block:44px; }
}

.article-foot{ border-top:1px solid var(--line); margin-top:56px; }
.article-foot .page{ padding-block:46px 58px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; }
@media (max-width:900px){ .article-foot .page{ grid-template-columns:1fr; gap:32px; } }
.related-links{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.related-links li{ border-top:1px solid var(--line); padding-top:14px; }
.related-links a{ font-size:21px; font-weight:600; }
.related-links:empty{ display:none; }

/* ---------- component set (styleguide contract) ---------- */
.lead{ font-size:clamp(20px,1.7vw,24px); line-height:1.44; color:var(--ink); }
.pullquote{ margin:0; border-left:4px solid var(--accent); padding:6px 0 6px 26px; }
.pullquote p{ font-size:clamp(22px,2.1vw,29px); font-weight:600; line-height:1.24; margin:0; letter-spacing:-.015em; }
.blockquote{ margin:0; background:var(--panel); border:1px solid var(--line); padding:26px 28px; }
.blockquote p{ font-size:20px; font-style:italic; margin:0 0 12px; }
.blockquote cite{ font-family:var(--sans); font-style:normal; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.callout{ background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--accent); padding:26px 28px; }
.callout p:last-child{ margin-bottom:0; }
.callout h3{ font-size:20px; margin-bottom:12px; }
.note{ font-size:17.5px; color:#C0BCB4; border-left:2px solid var(--rose); padding-left:18px; }

.notes-panel{ background:var(--panel); border:1px solid var(--line); padding:30px 32px 34px; }
.notes-panel > .kicker{ margin-bottom:20px; }
.notes-panel h3{ font-size:22px; margin-bottom:16px; }
.notes-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px 40px; }
@media (max-width:700px){ .notes-panel{ padding:22px 20px 24px; } }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ display:grid; grid-template-columns:minmax(88px,auto) 1fr; gap:6px 22px;
  padding:13px 0; border-top:1px solid var(--line); align-items:baseline; }
.timeline li:first-child{ border-top:0; padding-top:0; }
.t-when{ font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); overflow-wrap:anywhere; }
.t-what{ font-size:16.5px; line-height:1.42; }
.t-toggle{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.timeline .t-extra{ display:none; }
.t-toggle:checked + .timeline .t-extra{ display:grid; }
.t-label{ display:inline-flex; align-items:center; min-height:40px; cursor:pointer; margin-top:4px;
  font-family:var(--sans); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); border-bottom:1px solid rgba(232,255,82,.45); }
.t-label:hover{ color:var(--ink); border-color:var(--ink); }
.t-toggle:focus-visible ~ .t-label{ outline:2px solid var(--accent); outline-offset:3px; }
.t-label .t-hide{ display:none; }
.t-toggle:checked ~ .t-label .t-show{ display:none; }
.t-toggle:checked ~ .t-label .t-hide{ display:inline; }
@media (max-width:520px){ .timeline li{ grid-template-columns:1fr; gap:4px; } }

.keylist{ list-style:none; margin:0; padding:0; }
.keylist li{ font-size:17.5px; line-height:1.45; padding:11px 0 11px 26px; border-top:1px solid var(--line); position:relative; }
.keylist li:first-child{ border-top:0; }
.keylist li::before{ content:""; position:absolute; left:0; top:20px; width:11px; height:1px; background:var(--rose); }

.versus,.datatable{ width:100%; border-collapse:collapse; font-size:17.5px; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.versus th,.versus td,.datatable th,.datatable td{ border:1px solid var(--line); padding:13px 16px; text-align:left; vertical-align:top; }
.versus th,.datatable th{ font-family:var(--sans); font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); font-weight:500; background:var(--panel); }
.versus tbody th{ color:var(--ink); background:var(--panel-2); }

.statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; background:none; border:0; }
.statblock{ background:var(--ground); border:1px solid var(--line); margin:-1px 0 0 -1px;
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:8px; }
.stat-num{ font-family:var(--sans); font-weight:700; font-size:clamp(30px,3vw,42px); color:var(--accent); line-height:1; }
.stat-label{ font-size:16.5px; color:#C0BCB4; line-height:1.35; }

.chart{ background:var(--panel); border:1px solid var(--line); padding:22px; }
.chart svg{ width:100%; height:auto; display:block; }
.chart figcaption{ margin-top:14px; font-size:16.5px; color:#C0BCB4; }
.chart .c-bar{ fill:var(--accent); }
.chart .c-bar-alt{ fill:var(--rose); }
.chart .c-axis{ stroke:var(--line-2); }
.chart .c-lab{ font-family:var(--sans); font-size:11px; fill:var(--muted); }

.article-figure{ margin:0; }
.article-figure img{ width:100%; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.gallery figure{ background:var(--panel); padding:12px; }
.gallery img{ aspect-ratio:4/3; object-fit:cover; }
.map-figure .map-slot{ min-height:320px; border:1px solid var(--line-2); background:var(--panel-2); }

.profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.profile-card{ background:var(--panel); border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:10px; }
.p-photo{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.profile-card h3{ font-size:21px; }
.p-role{ font-family:var(--sans); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0; }
.profile-card p{ font-size:17px; margin:0; }
.p-links{ margin-top:auto !important; padding-top:8px; }
.p-attr{ font-family:var(--sans); font-size:12px; color:var(--muted); letter-spacing:.06em; }

.org-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.org-card{ background:var(--panel); border:1px solid var(--line); padding:16px 18px;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 16px; align-items:center; }
.org-card:hover{ border-color:var(--accent); }
.org-logo{ grid-row:span 2; width:46px; height:46px; object-fit:contain; background:#0C0D0F; padding:5px; }
.org-name{ font-family:var(--sans); font-size:15px; letter-spacing:.04em; }
.org-host{ font-family:var(--sans); font-size:12.5px; color:var(--muted); }
.org-card.no-logo{ grid-template-columns:1fr; }
.org-card.no-logo .org-logo{ display:none; }
.entity-ref{ color:var(--accent); border-bottom:1px solid rgba(232,255,82,.4); }
.further-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.further-grid a{ background:var(--panel); border:1px solid var(--line); padding:18px 20px; font-size:19px; font-weight:600; }
.further-grid a:hover{ border-color:var(--accent); }

/* ---------- category / archive listings ---------- */
.cat-head .page{ padding-block:64px 54px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr); gap:56px; align-items:start; }
.cat-head h1{ font-size:clamp(34px,4.2vw,62px); letter-spacing:-.035em; }
.cat-head p{ font-size:clamp(19px,1.6vw,22px); margin:18px 0 0; max-width:56ch; }
.cat-head .mat{ background:var(--panel); padding:16px; }
.cat-head .mat img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
@media (max-width:900px){ .cat-head .page{ grid-template-columns:1fr; gap:26px; padding-block:34px 30px; } }

.cat-lead{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:center;
  background:var(--panel); padding:26px; margin-bottom:48px; }
.cat-lead img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.cat-lead h2{ font-size:clamp(26px,2.6vw,36px); }
.cat-lead p{ font-size:19px; margin:14px 0 0; color:#C8C4BB; }
@media (max-width:900px){ .cat-lead{ grid-template-columns:1fr; gap:22px; padding:16px; } }

.cat-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:48px 44px; }
.cat-list > li{ display:flex; }
.cat-item{ background:var(--panel); border:1px solid var(--line); padding:16px 16px 22px;
  display:flex; flex-direction:column; gap:14px; width:100%; }
.cat-item:hover{ border-color:var(--accent); }
.cat-item img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.cat-item h3{ font-size:22px; min-height:2.2em; }
.cat-item p{ font-size:17px; color:#C0BCB4; margin:0; }
.cat-item .label{ margin-top:auto; padding-top:6px; }
@media (max-width:760px){ .cat-list{ grid-template-columns:1fr; gap:32px; } .cat-item h3{ min-height:0; } }

.sect-jump{ display:flex; flex-wrap:wrap; gap:14px 18px; }
.sect-jump a{ border:1px solid var(--line-2); padding:11px 16px; min-height:44px;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; }
.sect-jump a:hover{ border-color:var(--accent); }
.sect-jump svg{ width:18px; height:18px; }

.arch-group{ margin-bottom:54px; }
.arch-group h2{ font-size:clamp(24px,2.3vw,32px); margin-bottom:6px; }
.arch-table{ width:100%; border-collapse:collapse; margin-top:18px; }
.arch-table td{ border-top:1px solid var(--line); padding:16px 18px 16px 0; vertical-align:top; }
.arch-table td:first-child{ width:56px; color:var(--rose); font-family:var(--sans); font-weight:700; font-size:15px; }
.arch-table a{ font-size:21px; font-weight:600; }
.arch-table .brief{ font-size:16.5px; color:var(--muted); margin:6px 0 0; max-width:92ch; }

/* ---------- simple pages ---------- */
.plain .page{ padding-block:66px 74px; max-width:min(var(--page-w),1100px); }
.plain h1{ font-size:clamp(32px,3.6vw,54px); margin-bottom:22px; }
.plain p{ max-width:76ch; }
.plain .lead{ margin-bottom:26px; }

/* ---------- touch layout: matches the width at which the desktop nav is withdrawn ---------- */
@media (max-width:1100px){
  .foot-nav a{ min-height:44px; }
  .more{ display:inline-flex; align-items:center; min-height:44px; }
  .related-links li{ padding-top:16px; }
  .related-links a{ display:block; min-height:44px; }
  .arch-table a{ display:block; min-height:40px; }
}
@media (max-width:700px){
  .related-links a{ font-size:19px; }
  .arch-table td{ padding:14px 12px 14px 0; }
  .arch-table a{ font-size:19px; }
  .archive-band .icn{ width:48px; height:48px; margin-bottom:14px; }
  .archive-band h2{ font-size:25px; }
  .archive-band p{ font-size:18px; }
  .fig-strip img{ height:clamp(210px,52vw,320px); }
  .band-head{ margin-bottom:26px; }
  .capbar .page{ padding-block:12px 14px; }
  .capbar .cap{ font-size:17px; }
}
@media (max-width:560px){
  .lead-numeral{ font-size:76px; }
  .lead-type{ padding-block:26px 26px; gap:22px; }
  .lead-type h1{ font-size:27px; }
  .lead-dek{ font-size:17.5px; }
  .masthead .page{ padding-block:16px 12px; }
  .navtoggle summary{ padding:11px 12px; }
  .specimen .page{ padding-block:40px 38px; }
  .statblock{ padding:18px 18px 16px; }
  .cat-lead{ margin-bottom:32px; }
  .plain .page{ padding-block:34px 40px; }
}

/* ---------- styleguide only ---------- */
.sg-block{ border-top:1px solid var(--line); padding-block:44px; }
.sg-block > h2{ font-size:26px; margin-bottom:22px; }
.sg-block > h3{ font-size:17px; font-family:var(--sans); font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:30px 0 14px; }
.sg-narrow{ max-width:360px; border:1px dashed var(--line-2); padding:14px; }

/* 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-groups > .sponsor{flex:0 0 auto!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-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;}

/* op-money-columns: the supporters block ran one tile per row — 6 tiles,
   1187px at 390, 14% of the whole page. Two columns bring it to
   848px (29% shorter). Checked before writing: no new overflow, smallest mark still
   123px wide, longest blurb 2 lines, tile heights 143-254px.
   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.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-group), 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-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px!important}
    .sponsor-group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group > * *{min-width:0!important;max-width:100%}
    .sponsor-group img,.sponsor-group svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-group (3 tiles), .sponsor-group (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-group:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-group:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
[data-partner] img{background:transparent!important}