@charset "utf-8";
/* ============================================================
   Citizen Robot — site stylesheet
   PALETTE — four members, each with a job:
     --ground     bone paper, the page it is printed on
     --ink        near-black, all body text and the dense bands
     --accent     vermilion, saturated: section bands, rules, kickers
     --secondary  teal, saturated, ~160deg from the accent: the
                  tolerance strips, the footer, article quote bands
   --accent-ink / --secondary-ink are the same hues held down to
   text contrast so they stay legible at 15-17px on the ground.
   ============================================================ */
:root{
  --ground:#EDE7DA;
  --ground-2:#E2DBCB;
  --mat:#DDD4C0;
  --rule:#C4B9A2;
  --rule-soft:#D5CCB7;
  --ink:#14110D;
  --ink-2:#3F392E;
  --ink-3:#5B5344;
  --ink-4:#8B8270;
  --accent:#E4431C;
  --accent-ink:#A92D0C;
  --accent-lift:#F2643C;
  --secondary:#0E8577;
  --secondary-ink:#0A6459;
  --secondary-ground:#08544B;
  --serif:"Faustina",Georgia,"Times New Roman",serif;
  --sans:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:70ch;
  --page:1240px;
  --gutter:40px;
}
*,*::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:19px;line-height:1.7;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-decoration:none}
a:hover,a:focus-visible{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--ground)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.018em;text-wrap:balance;margin:0}
p{margin:0 0 1.15em;text-wrap:pretty}
hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:10px;z-index:99;background:var(--ink);color:var(--ground);padding:9px 14px;font-family:var(--sans);font-size:14px}

/* ---------- shell ---------- */
.wrap{max-width:var(--page);margin:0 auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:76px}
.band-tight{padding-block:52px}
.kicker{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 14px}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--ink);padding-bottom:13px;margin-bottom:34px;flex-wrap:wrap}
.band-head h2{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.band-head .band-note{font-family:var(--sans);font-size:13.5px;color:var(--ink-3)}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:60;background:var(--ink);color:#F1ECE1;border-bottom:1px solid rgba(241,236,225,.16)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:66px;flex-wrap:wrap;padding-block:8px}
.wordmark{display:flex;align-items:center;gap:11px;color:#F1ECE1;font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:.13em;text-transform:uppercase}
.wordmark:hover{color:#F1ECE1;text-decoration:none}
.wordmark svg{color:var(--accent);flex:none}
.mastnav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-family:var(--sans);font-size:15px;letter-spacing:.01em}
.mastnav a{display:flex;align-items:center;gap:8px;color:#D6CEBE;padding:6px 0;min-height:44px}
.mastnav a:hover,.mastnav a:focus-visible{color:#F1ECE1;text-decoration:none}
.mastnav a[aria-current]{color:#F1ECE1;font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.mastnav svg{flex:none}

/* ---------- homepage opener ---------- */
.opener{position:relative;background:var(--ink);color:#F1ECE1;overflow:hidden}
.opener>img{width:100%;height:min(78vh,720px);min-height:440px;object-fit:cover;object-position:center 42%}
.opener-veil{position:absolute;inset:0;background:linear-gradient(to right,rgba(20,17,13,.88) 0%,rgba(20,17,13,.62) 44%,rgba(20,17,13,.12) 76%),linear-gradient(to top,rgba(20,17,13,.96) 0%,rgba(20,17,13,.84) 38%,rgba(20,17,13,.34) 76%,rgba(20,17,13,.22) 100%)}
.opener-body{position:absolute;inset:auto 0 0 0;padding-bottom:56px}
.opener h1{font-size:clamp(34px,5vw,72px);line-height:1.04;letter-spacing:-.02em;max-width:17ch;margin:0}
.opener .kicker{color:var(--accent-lift)}
.opener .deck{font-family:var(--sans);font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:#CBC3B4;max-width:52ch;margin:24px 0 0}
.opener-credit{font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;color:#8B8270;margin:18px 0 0}

/* ---------- statement band ---------- */
.statement{background:var(--ground)}
.statement .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:64px}
.statement .spine{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--secondary-ink);border-top:2px solid var(--secondary);padding-top:13px}
.statement p:first-of-type{font-size:clamp(21px,2.1vw,27px);line-height:1.46;font-weight:500;letter-spacing:-.004em}
.statement p+p{font-size:18px;line-height:1.66;color:var(--ink-2);max-width:64ch}

/* ---------- section register (homepage + hub) ---------- */
.sections-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.section-card{display:flex;flex-direction:column;gap:15px;background:var(--ground-2);padding:28px 26px 30px;color:var(--ink)}
.section-card:hover{background:var(--ground);text-decoration:none}
.section-card .sc-top{display:flex;align-items:center;justify-content:space-between;color:var(--accent)}
.section-card .sc-no{font-family:var(--sans);font-size:12px;letter-spacing:.16em;color:#5B5344}
.section-card h3{font-size:26px}
.section-card p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}
.section-card .sc-count{margin-top:auto;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}

/* ---------- lead + seconds ---------- */
.lead-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:52px;align-items:start}
.lead-feature .lf-text{display:flex;flex-direction:column}
.lead-feature h2{font-size:clamp(30px,3.4vw,46px);line-height:1.08;margin:0 0 18px}
.lead-feature .lf-deck{font-size:19px;line-height:1.62;color:var(--ink-2);max-width:52ch}
.lf-distinction{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--rule);display:grid;gap:16px;max-width:52ch}
.lf-distinction div{display:block}
.lf-distinction dt{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--accent-ink);margin-bottom:4px}
.lf-distinction dd{margin:0;font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.lf-read{margin-top:auto;padding-top:28px;display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.eyebrow svg{color:var(--accent)}
.seconds{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:36px}
.second{display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.second:hover{text-decoration:none}
.second:hover h3{text-decoration:underline;text-underline-offset:3px}
.second img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule)}
.second h3{font-size:23px;line-height:1.2}
.second p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.second .s-meta{margin-top:auto;padding-top:4px;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#5B5344}

/* ---------- quiet line ---------- */
.quiet{background:var(--accent);color:var(--ink);padding-block:104px}
.quiet p{max-width:22ch;margin:0 auto;text-align:center;font-size:clamp(27px,3.5vw,48px);line-height:1.16;font-weight:600;letter-spacing:-.018em}
.quiet .attrib{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;max-width:none;margin-top:26px}

/* ---------- compact index ---------- */
.register{background:var(--ink);color:#F1ECE1}
.register .band-head{border-color:rgba(241,236,225,.3)}
.register .band-head h2,.register .band-head .band-note{color:#F1ECE1}
.register .band-head .band-note{color:var(--ink-4)}
.reg-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:20px;align-items:baseline;padding:16px 8px;border-bottom:1px solid rgba(241,236,225,.14);color:#F1ECE1}
.reg-row:hover{background:var(--accent-ink);text-decoration:none}
.reg-row:hover .rr-title,.reg-row:hover .rr-sec{color:#F1ECE1}
.reg-row .rr-title{font-size:20px;font-weight:500}
.reg-row .rr-sec{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lift);text-align:right}
.reg-more{margin-top:26px;font-family:var(--sans);font-size:13.5px}
.register .reg-more a{color:#F1ECE1;box-shadow:inset 0 -1px 0 var(--accent)}

/* ---------- FIGURE SYSTEM — three treatments, one drawing system ----------
   square corners · no shadows · caption is typography, credit subordinate  */
figure{margin:0}
figcaption{font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.cap-kicker{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:7px}
.credit{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.03em;color:var(--ink-2);margin-top:9px}

/* 1 — full-bleed band, caption stepped in below the crop */
.fig-bleed{margin:56px 0}
.fig-bleed img{width:100%;aspect-ratio:24/9;object-fit:cover}
.fig-bleed figcaption{max-width:58ch;margin:16px auto 0;padding-inline:var(--gutter);border-top:2px solid var(--accent);padding-top:14px}

/* 2 — matted plate, teal rule keyed to the palette */
.fig-mat{margin:46px 0;background:var(--mat);padding:22px}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{margin-top:18px;padding-top:14px;border-top:3px solid var(--secondary);max-width:62ch}

/* 3 — framed inset, caption set beside the plate */
.fig-frame{margin:46px 0;border:1px solid var(--ink);padding:12px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0 22px;align-items:end}
.fig-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig-frame figcaption{padding:0 8px 6px 0}
/* 4 — small inset at column width, caption hanging below the plate */
.fig-inset{margin:44px auto;max-width:46ch}
.fig-inset img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--rule)}
.fig-inset figcaption{margin-top:13px;padding-left:16px;border-left:3px solid var(--accent);font-size:15px}
/* generic styleguide alias */
.article-figure{margin:46px 0;background:var(--mat);padding:22px}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{margin-top:18px;padding-top:14px;border-top:3px solid var(--secondary)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:40px 0}
.gallery figure{display:flex;flex-direction:column}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}
.gallery figcaption{font-size:14px;margin-top:10px}

/* ---------- article ---------- */
.article-head{padding-block:58px 0}
.article-head h1{font-size:clamp(36px,5vw,70px);line-height:1.03;letter-spacing:-.022em;max-width:22ch}
.lead{font-size:clamp(19px,1.7vw,22px);line-height:1.55;color:var(--ink-2);max-width:52ch;margin:26px 0 0;font-weight:500}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:28px 0 0;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--sans);font-size:13px;letter-spacing:.03em;color:var(--ink-3)}
.prose{font-size:20px;line-height:1.72}
.prose>p{max-width:var(--measure);margin-inline:auto}
.prose h2{font-size:clamp(24px,2.4vw,32px);line-height:1.2;max-width:var(--measure);margin:52px auto 22px;padding-top:16px;border-top:2px solid var(--ink)}
.prose h2 .h2-no{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.prose a{box-shadow:inset 0 -1px 0 rgba(169,45,12,.45)}
.prose a:hover{box-shadow:none}

/* tolerance strip — the site's signature */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:rgba(237,231,218,.28);border:0;margin:34px 0 0}
.statband{background:var(--secondary-ground);color:#EDF3F1;padding:26px 0 28px;margin:40px 0 0}
.statband .sb-head{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#CFE3DF;margin-bottom:16px}
.statblock{background:var(--secondary-ground);padding:4px 20px 6px 0}
.stat-num{display:block;font-family:var(--sans);font-size:clamp(21px,2.1vw,27px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.stat-label{display:block;font-family:var(--serif);font-size:15px;line-height:1.5;color:#CFE3DF;margin-top:7px}

/* distinctions — full-bleed ink band, label stacked over description */
.distinctions{background:var(--ink);color:#F1ECE1;padding-block:56px;margin:56px 0}
.distinctions h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lift);margin-bottom:26px;padding-bottom:13px;border-bottom:1px solid rgba(241,236,225,.28)}
.distinctions dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:30px 44px;margin:0}
.distinctions dt{font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:.01em;color:#F1ECE1;margin-bottom:8px}
.distinctions dd{margin:0;font-size:16.5px;line-height:1.6;color:#B9B0A0}
/* cross-links inside the dark bands take the lifted accent (7.8:1 on ink);
   the default accent-ink is a bone-ground value and fails here. */
.distinctions a,.statrow a,.statement a{color:var(--accent-lift)}
.distinctions a:hover,.statrow a:hover,.statement a:hover{color:#F1ECE1}

/* note panel — inset, breaks the measure, top rule in accent */
.notepanel{background:var(--ground-2);border-top:3px solid var(--accent);padding:30px 32px 32px;margin:48px auto;max-width:calc(var(--measure) + 12ch)}
.notepanel h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:22px}
.notepanel ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.notepanel li{display:block}
.notepanel .np-label{display:block;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);margin-bottom:5px}
.notepanel .np-desc{display:block;font-size:16.5px;line-height:1.58;color:var(--ink-2)}

/* pull quote + callout + note */
.pullquote{margin:52px 0;padding:0;background:var(--secondary-ground);color:#EDF3F1}
.pullquote p{max-width:26ch;margin:0 auto;padding:60px var(--gutter);text-align:center;font-size:clamp(24px,2.9vw,38px);line-height:1.2;font-weight:600;letter-spacing:-.016em}
.blockquote{margin:40px auto;max-width:var(--measure);border-left:3px solid var(--secondary);padding:4px 0 4px 22px}
.blockquote p{font-size:21px;line-height:1.55;font-style:italic;margin-bottom:.5em}
.blockquote cite{font-family:var(--sans);font-size:13.5px;font-style:normal;color:var(--ink-3)}
.callout{margin:40px auto;max-width:var(--measure);background:var(--mat);border-left:4px solid var(--accent);padding:22px 24px}
.callout p{margin:0;font-size:18px;line-height:1.6}
.note{max-width:var(--measure);margin-inline:auto;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:14px}

/* tables */
.versus,.datatable{width:100%;max-width:calc(var(--measure) + 8ch);margin:40px auto;border-collapse:collapse;font-family:var(--sans);font-size:15px}
.versus caption,.datatable caption{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);text-align:left;padding-bottom:12px}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
.versus thead th,.datatable thead th{border-bottom:1.5px solid var(--ink);font-weight:600}
.versus tbody th{font-weight:600;width:30%}
.datatable tbody tr:nth-child(even){background:var(--ground-2)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* timeline */
.timeline{list-style:none;margin:40px auto;padding:0;max-width:calc(var(--measure) + 8ch);border-top:1.5px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:minmax(150px,26%) minmax(0,1fr);gap:8px 26px;padding:16px 0;border-bottom:1px solid var(--rule)}
.t-when{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--accent-ink);line-height:1.45}
.t-what{font-size:17px;line-height:1.55}

/* charts */
.chart{margin:44px auto;max-width:calc(var(--measure) + 8ch)}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);font-size:15px}
.chart .c-label{font-family:var(--sans);font-size:12px;fill:var(--ink-2)}
.chart .c-value{font-family:var(--sans);font-size:12px;font-weight:600;fill:var(--ink)}
.chart .c-bar{fill:var(--secondary)}
.chart .c-bar-alt{fill:var(--accent)}

/* cards / references */
.profile-card.no-photo{border-top-color:var(--accent)}
.org-card.no-logo{border-left:3px solid var(--secondary)}
.chart .c-line{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-dot{fill:var(--accent)}
.chart .c-donut-a{fill:none;stroke:var(--secondary);stroke-width:16}
.chart .c-donut-b{fill:none;stroke:var(--accent);stroke-width:16}
.chart .c-center{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--ink)}
.sg-toc{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--sans);font-size:13.5px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--rule)}
.profile-grid,.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin:36px 0}
.profile-card{display:flex;flex-direction:column;background:var(--ground-2);border-top:3px solid var(--secondary);padding:22px}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;margin-bottom:16px}
.profile-card h3{font-size:21px;margin-bottom:4px}
.profile-card .p-role{font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 12px}
.profile-card p{font-size:16px;line-height:1.55}
.profile-card .p-links{margin-top:auto;padding-top:12px;font-family:var(--sans);font-size:14px;margin-bottom:0}
.profile-card .p-attr{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin:8px 0 0}
.org-card{display:flex;flex-direction:column;gap:8px;background:var(--ground-2);border:1px solid var(--rule);padding:18px;color:var(--ink)}
.org-card:hover{background:var(--ground);text-decoration:none}
.org-logo{height:34px;width:auto;max-width:100%;object-fit:contain;object-position:left center;background:var(--ink);padding:6px 10px}
.org-name{font-size:18px;font-weight:600}
.org-host{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);word-break:break-word}
.entity-ref{white-space:nowrap;box-shadow:inset 0 -1px 0 rgba(169,45,12,.45)}
.further-grid,.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0;padding:0;list-style:none}
.further-grid a,.related-links a{display:flex;flex-direction:column;gap:9px;background:var(--ground);padding:22px 22px 24px;color:var(--ink);font-size:20px;line-height:1.24;font-weight:500;min-height:100%}
.further-grid a:hover,.related-links a:hover{background:var(--ground-2);text-decoration:none}
.related-links .rl-sec{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}

/* next / prev */
.next-piece{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:16px 44px;align-items:baseline;border-top:2px solid var(--ink);padding:22px 6px;margin-top:16px;color:var(--ink)}
.next-piece:hover{background:var(--ground-2);text-decoration:none}
.next-piece .np-k{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.next-piece .np-t{font-size:clamp(24px,2.4vw,32px);line-height:1.14;font-weight:600}

/* ---------- category page ---------- */
.cat-head{background:var(--ink);color:#F1ECE1;padding:52px 0 46px}
.cat-head .ch-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:end}
.cat-head .ch-id{display:flex;align-items:flex-start;gap:24px}
.cat-head svg{color:var(--accent);flex:none;margin-top:6px}
.cat-head .ch-no{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#A79E8E;margin-bottom:12px}
.cat-head h1{font-size:clamp(40px,5.6vw,76px);line-height:.99;letter-spacing:-.024em}
.cat-head .ch-blurb{font-family:var(--sans);font-size:17px;line-height:1.6;color:#B9B0A0;margin:0}
.cat-head .breadcrumb{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin-bottom:32px}
.cat-head .breadcrumb a{color:var(--ink-4)}
.cat-head .breadcrumb a:hover{color:#F1ECE1}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list>li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:58px minmax(0,1.05fr) minmax(0,1.25fr);gap:14px 30px;align-items:start;padding:26px 8px;color:var(--ink)}
.cat-list a:hover{background:var(--ground-2);text-decoration:none}
.cat-list .cl-no{font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:#5B5344;padding-top:9px}
.cat-list .cl-title{font-size:clamp(23px,2.2vw,29px);line-height:1.16;font-weight:600;letter-spacing:-.014em}
.cat-list .cl-brief{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-2)}

/* ---------- archive ---------- */
.archive-table{width:100%;border-collapse:collapse}
.archive-table th{text-align:left;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);border-bottom:1.5px solid var(--ink);padding:0 20px 12px 0}
.archive-table td{border-bottom:1px solid var(--rule);padding:15px 20px 15px 0;vertical-align:top}
.archive-table tr:hover td{background:var(--ground-2)}
.archive-table .at-title{font-size:18.5px;font-weight:500}
.archive-table .at-sec{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap}
.archive-table .at-brief{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink-2)}

/* ---------- supporters colophon ---------- */
.colophon{background:var(--ground-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:56px}
.colophon .band-head{border-color:var(--rule)}
.col-group+.col-group{margin-top:38px}
.col-group h3{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
/* Each tier fills the container: featured three across, supporters four across.
   Geometry is identical WITHIN a tier (1fr columns, one fixed logo-box aspect),
   so no supporter gets more area than its neighbour; the tier itself is the
   only prominence signal. */
.col-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 18px}
.col-group-feat .col-slots{grid-template-columns:repeat(3,1fr)}
.sponsor{display:flex;flex-direction:column;gap:12px;color:var(--ink);text-decoration:none;min-width:0}
.sponsor img{width:100%;aspect-ratio:4.7/1;height:auto;object-fit:contain;object-position:center;background:var(--ink);padding:10px 16px}
.sponsor .sponsor-name{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.sponsor .sponsor-blurb{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink-2)}
.sponsor:hover{text-decoration:none}
.sponsor:hover .sponsor-name{box-shadow:inset 0 -1px 0 var(--accent-ink)}
@media (max-width:860px){
  .col-slots,.col-group-feat .col-slots{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .col-slots,.col-group-feat .col-slots{grid-template-columns:1fr;gap:24px}
}

/* ---------- footer ---------- */
.site-foot{background:var(--secondary-ground);color:#EDF3F1;padding:62px 0 46px}
.site-foot a{color:#EDF3F1}
.site-foot a:hover{color:#EDF3F1;text-decoration:underline;text-underline-offset:3px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:44px}
.foot-grid .fg-about p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:#B8D6D0;max-width:36ch;margin:14px 0 0}
.foot-col h4{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#CFE3DF;margin-bottom:12px}
.foot-col ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:14.5px;line-height:2}
.foot-col a{display:flex;align-items:center;gap:8px}
.foot-col svg{flex:none;opacity:.85}
.foot-base{margin-top:42px;padding-top:18px;border-top:1px solid rgba(237,243,241,.3);font-family:var(--sans);font-size:12.5px;color:#CFE3DF;display:flex;flex-wrap:wrap;gap:8px 26px}

/* ---------- simple pages ---------- */
.page-head{padding-block:64px 0}
.page-head h1{font-size:clamp(36px,4.6vw,62px);line-height:1.04}
.page-body{padding-block:34px 84px;font-size:19px}
.page-body h2{font-size:26px;margin:40px 0 14px;padding-top:14px;border-top:2px solid var(--ink)}
.page-body ul{padding-left:1.1em}
.page-body li{margin-bottom:.5em}
.notfound{padding-block:110px 120px;text-align:center}
.notfound h1{font-size:clamp(40px,6vw,84px);line-height:1}
.notfound p{font-size:20px;color:var(--ink-2);max-width:44ch;margin:22px auto 30px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:12px 22px;background:var(--ink);color:var(--ground);font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.btn:hover{background:var(--accent);color:var(--ink);text-decoration:none}

/* ---------- styleguide furniture ---------- */
.sg-item{border-top:1px solid var(--rule);padding:34px 0 10px}
.sg-item>h2{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.sg-item>.sg-note{font-family:var(--sans);font-size:13.5px;color:var(--ink-3);margin-bottom:20px}
.sg-swatches{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0}
.sg-swatch{flex:0 0 168px}
.sg-chip{height:82px;border:1px solid var(--rule)}
.sg-swatch b{display:block;font-family:var(--sans);font-size:13px;margin-top:8px}
.sg-swatch span{font-family:var(--sans);font-size:12px;color:var(--ink-3)}
.sg-icons{display:flex;flex-wrap:wrap;gap:26px;margin:20px 0}
.sg-icons figure{text-align:center;color:var(--accent)}
.sg-icons figcaption{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin-top:8px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lead-feature{grid-template-columns:1fr;gap:34px}
  .statement .wrap{grid-template-columns:1fr;gap:22px}
  .cat-head .ch-grid{grid-template-columns:1fr;gap:26px}
  .fig-frame{grid-template-columns:1fr;gap:16px}
  .fig-frame figcaption{padding:0 4px 4px}
}
@media (max-width:860px){
  :root{--gutter:22px}
  body{font-size:18px}
  .band{padding-block:52px}
  .prose{font-size:19px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .next-piece{grid-template-columns:1fr}
  .cat-list a{grid-template-columns:34px minmax(0,1fr);gap:10px 16px}
  .cat-list .cl-brief{grid-column:2}
  .archive-table .at-brief{display:none}
  .distinctions{padding-block:40px}
  .notepanel{padding:24px 22px 26px}
}
@media (max-width:620px){
  /* touch targets: standalone links reach 44px without changing type size */
  .wordmark{min-height:44px}
  .band-head .band-note a,.eyebrow a,.register .reg-more a,.lf-read,.related-links a{display:inline-flex;align-items:center;min-height:44px}
  .eyebrow{align-items:center}
  .foot-col ul{line-height:1.5}
  .foot-col li a{min-height:44px}
  .archive-table td,.archive-table th{padding-block:14px}
  .masthead{position:static}
  .masthead .wrap{min-height:0;padding-block:12px}
  .mastnav{gap:2px 14px}
  .mastnav a{font-size:13px}
  .opener>img{height:62vh;min-height:340px}
  .opener-body{padding-bottom:34px}
  .quiet{padding-block:64px}
  .pullquote p{padding:44px 22px}
  .seconds{gap:30px}
  .foot-grid{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr}
  .versus tbody th{width:auto}
  .fig-bleed img{aspect-ratio:16/10}
}
@media print{
  .masthead,.site-foot,.colophon{display:none}
  body{background:#fff;color:#000}
}

/* 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}

/* 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-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}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.col-slots .sponsor.sponsor img{height:58px!important}

/* op-footer-compact: the footer printed 8 rows for 8 link(s) in
   2 list(s) — 948px at 390, 10% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 948 -> 582px (39% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:min(3.06vw,44px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1340px at 390, 15% of the whole page. Two columns bring it to
   794px (41% shorter). Checked before writing: no new overflow, smallest mark still
   165px wide, longest blurb 3 lines, tile heights 91-166px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.col-slots), 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){
  .col-slots{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .col-slots > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .col-slots > * *{min-width:0!important;max-width:100%}
    .col-slots img,.col-slots svg{max-width:100%;height:auto}
  .col-slots .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .col-slots (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){
  .col-slots:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — span.rr-sec reached
   290px in a 320px screen (+6px), inside
   a.reg-row. Remedy: let the words break. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  span.rr-sec,span.rr-sec *{overflow-wrap:anywhere!important;min-width:0!important}
}

/* op-hover-pad */
.archive-table tr td:first-child{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-weight: 600; letter-spacing: -0.018em; text-wrap: balance; margin: 0px;}
.section-card h2:where(.rt-h3){font-size: 26px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.fig-bleed > img,
  div.lead-feature > figure.fig-mat > img,
  div.seconds > a.second > img,
  div.wrap > figure.fig-frame > img,
  div.wrap > figure.fig-inset > img,
  div.wrap > figure.fig-mat > img,
  main > figure.fig-bleed > img,
  main > section.opener > img){height:auto}
/* op-img-dims:end */
@media (min-width:640px) and (max-width:879px){.col-slots:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}