/* Public Domain Flicks — "The Whole Building"
   Palette roles: ground · ink · accent · secondary · shelf (panel) */
:root{
  --ground:#14181A;   /* page ground */
  --ink:#EDE7DA;      /* body ink */
  --accent:#E8B400;   /* signage amber — room numbers, rules, real areas */
  --secondary:#A03A22; /* oxide red — plate grounds, shelf marks */
  --shelf:#1E2426;    /* panel / card ground */
  --muted:#96A1A2;    /* quiet meta ink */
  --hair:#333B3D;

  --prose:78ch;
  --breakout:1180px;
  --wide:1560px;
  --gutter:24px;

  --fs-body:17px;
  --fs-prose:18px;
  --fs-h1:clamp(44px,9vw,72px);
  --para-gap:22px;
  --unit-gap:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-body);line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;line-height:.9;margin:0;text-wrap:balance}
p{margin:0}
figure{margin:0}
.mono{font-family:'DM Mono',ui-monospace,monospace}
.plate{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.plate--accent{color:var(--accent)}
.plate .ico,.band-head h2 .ico,.related h2 .ico,.rooms-strip .n .ico{vertical-align:middle}
p.plate{display:flex;align-items:center;gap:8px}
.band-head h2,.related h2{display:flex;align-items:center;gap:12px}
.band-head h2 .ico,.related h2 .ico{flex:none;color:var(--accent)}
.rooms-strip .n{display:flex;align-items:center;gap:8px}
.rooms-strip .n .ico{color:var(--accent)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--ground);
  padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;z-index:99}

/* ---------- shells ---------- */
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--breakout{max-width:var(--breakout)}
.band{padding-block:56px}
.band--tight{padding-block:36px}

/* ---------- masthead ---------- */
.site-head{border-bottom:1px solid var(--hair);background:var(--ground);position:relative;z-index:5}
.head-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;
  padding-block:20px 16px}
.brand{display:flex;align-items:center;gap:16px;flex:0 0 auto;min-width:max-content}
.brand-name{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;
  text-transform:uppercase;font-size:38px;line-height:.9;letter-spacing:.015em;
  white-space:nowrap}
.brand-name span{display:inline}
.brand-name .pd{color:var(--ink)}
.brand-name .fl{color:var(--accent)}
.perf{flex:none;color:var(--accent);height:clamp(34px,4.2vw,52px);width:auto}
.head-next{text-align:right;flex:0 1 auto;min-width:0}
.head-next b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-weight:700;font-size:26px;line-height:.9;color:var(--accent);letter-spacing:.02em}
.rooms-nav{display:flex;flex-wrap:wrap;gap:2px;padding-bottom:2px}
.room{flex:1 1 auto;min-width:0;background:var(--shelf);padding:11px 13px 12px;
  display:flex;align-items:center;gap:9px;border-bottom:3px solid transparent}
.room:hover{background:#242c2f;color:var(--ink)}
.room .rn{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.room .rl{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700;
  font-size:21px;line-height:1;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.room .ico{flex:none;color:var(--accent)}
.rooms-nav .room:nth-child(1) .ico{color:#7FB7C4}
.rooms-nav .room:nth-child(2) .ico{color:#E8B400}
.rooms-nav .room:nth-child(3) .ico{color:#8FAF63}
.rooms-nav .room:nth-child(4) .ico{color:#C9704E}
.rooms-nav .room:nth-child(5) .ico{color:#B79BC8}
.rooms-nav .room--all .ico{color:var(--muted)}
.rooms-nav .room[aria-current] .ico{color:var(--ground)}
.room[aria-current]{background:var(--accent);color:var(--ground);border-bottom-color:var(--secondary)}
.room[aria-current] .rn{color:rgba(20,24,26,.7)}
.room[aria-current] .ico{color:var(--ground)}
.room--all{background:transparent;border:1px solid var(--hair)}

/* ---------- homepage lead ---------- */
.lead{position:relative;isolation:isolate}
.lead img{width:100%;height:clamp(340px,64vh,760px);object-fit:cover;filter:saturate(.9)}
.lead-plate{position:absolute;inset:auto 0 0 0;
  background:linear-gradient(to top,rgba(10,12,13,.94),rgba(10,12,13,.55) 55%,rgba(10,12,13,0));
  padding-block:40px 34px}
.lead-kicker{display:inline-block;background:var(--accent);color:var(--ground);
  padding:5px 12px;font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase}
.lead h1{font-size:clamp(38px,7.2vw,104px);margin-top:18px;color:#fff;max-width:20ch;
  text-shadow:0 2px 4px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.6),0 18px 60px rgba(0,0,0,.7)}
.lead-sub{display:grid;gap:26px;padding-block:26px 0;align-items:start}
.lead-sub .standfirst{font-size:clamp(18px,2vw,22px);line-height:1.5;max-width:70ch}
.lead-sub .cap{border-left:2px solid var(--accent);padding-left:16px;color:var(--muted);
  font-size:15px;line-height:1.45;max-width:46ch}
.lead-sub .cap b{color:var(--ink);font-weight:400;display:block;margin-bottom:6px}

/* ---------- section furniture ---------- */
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-top:2px solid var(--hair);padding-top:18px;margin-bottom:26px;flex-wrap:wrap}
.band-head h2{font-size:clamp(30px,4.4vw,58px);max-width:26ch}
.band-more{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}

/* ---------- the plan (drawn device) ---------- */
.plan-intro{font-size:17px;line-height:1.55;color:#C9CFCF;max-width:82ch;margin-bottom:22px}
.plan{background:var(--shelf);padding:30px 26px 26px}
.plan-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.plan > svg{width:100%;height:auto;display:block}
.plan-key h3 svg{width:22px;height:22px;flex:none}
.plan-hint{display:none;font-family:'DM Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.plan-key{display:grid;gap:22px;margin-top:26px}
.plan-key h3{font-size:20px;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.plan-key p b{color:var(--ink);font-weight:500}
.plan-key p{font-size:15.5px;color:var(--muted);line-height:1.5}

/* ---------- feature band ---------- */
.feature{display:grid;gap:26px;background:var(--shelf)}
.feature .ph{position:relative;min-height:280px}
.feature .ph img{width:100%;height:100%;object-fit:cover;min-height:280px}
.feature .shelf-mark{position:absolute;left:0;top:0;background:var(--secondary);color:var(--ink);
  font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.16em;padding:7px 12px}
.feature .body{padding:26px 26px 30px}
.feature h2{font-size:clamp(30px,4.2vw,54px);margin-bottom:14px}
.feature .dek{font-size:18px;line-height:1.55;color:#C9CFCF;max-width:60ch}
.feature blockquote{margin:24px 0 0;border-left:4px solid var(--accent);padding-left:20px;
  font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,34px);line-height:.98}
.feature .go{display:inline-block;margin-top:22px;font-family:'DM Mono',monospace;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border-bottom:2px solid var(--accent);padding-bottom:3px}

/* ---------- cluster of editorial pieces (unequal) ---------- */
.cluster{display:grid;gap:2px}
.piece{background:var(--shelf);display:flex;flex-direction:column}
.piece .ph{position:relative;aspect-ratio:16/10;overflow:hidden}
.piece .ph img{width:100%;height:100%;object-fit:cover}
.piece .shelf-mark{position:absolute;left:0;top:0;background:var(--secondary);color:var(--ink);
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;padding:6px 10px}
.piece .body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.piece h3{font-size:26px;margin-bottom:9px}
.piece p{font-size:15.5px;line-height:1.5;color:#C9CFCF}
.piece .rm{margin-top:auto;padding-top:14px}
.piece--big h3{font-size:clamp(28px,3.4vw,42px)}
.piece--big p{font-size:17px}

/* ---------- quiet band ---------- */
.quiet{background:var(--shelf);color:var(--ink);border-top:4px solid var(--accent)}
.quiet .inner{display:grid;gap:28px;align-items:center;padding-block:54px}
.quiet h2{font-size:clamp(28px,4vw,58px);max-width:30ch}
.quiet .src{font-family:'DM Mono',monospace;font-size:12.5px;line-height:1.8;
  letter-spacing:.05em;text-transform:uppercase;border-left:2px solid var(--accent);
  padding-left:18px;max-width:36ch;color:var(--muted)}
.rooms-strip{display:grid;gap:0;border-top:2px solid var(--hair)}
.rooms-strip a{display:flex;align-items:baseline;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--hair);color:var(--ink)}
.rooms-strip a:hover{color:var(--accent)}
.rooms-strip a:hover .t{text-decoration:underline;text-underline-offset:3px}
.rooms-strip .n{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;
  font-size:30px;color:var(--accent);line-height:.8;flex:none}
.rooms-strip .t{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700;
  font-size:24px;text-transform:uppercase;flex:none}
.rooms-strip .d{color:var(--muted);font-size:15px;line-height:1.45}

/* ---------- supporters ---------- */
.supporters{border-top:2px solid var(--hair);border-bottom:2px solid var(--hair)}
.sponsor-groups{display:grid;gap:26px 24px}
.sponsor-group{min-width:0}
.sponsor-group > .plate{display:block;margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid var(--hair)}
.sponsor-row{display:grid;gap:2px}
.sponsor{display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 14px;
  background:#0F1213;padding:12px 14px 13px;align-items:center}
.sponsor:hover{background:#161B1D;color:var(--ink)}
.sponsor .logo-box{grid-row:1/3;width:104px;height:46px;display:flex;align-items:center;
  background:#0A0C0D;border:1px solid var(--hair);padding:5px 8px}
.sponsor .logo-box img{max-height:34px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700;
  font-size:19px;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;align-self:end}
.sponsor-blurb{font-size:13.5px;line-height:1.4;color:var(--muted);align-self:start}

/* ---------- footer ---------- */
.site-foot{border-top:2px solid var(--hair);padding-block:34px 46px}
.foot-in{display:grid;gap:24px}
.foot-line{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700;
  text-transform:uppercase;font-size:24px;line-height:1.05;max-width:40ch;min-width:0}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-nav a{font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.foot-nav a:hover{color:var(--accent)}

/* ================= ARTICLE ================= */
.art-head{padding-block:40px 0}
.art-head-in{display:grid;gap:28px;align-items:start}
.art-kicker{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.art-kicker .ico{color:var(--accent);flex:none}
.art-kicker span{font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}
.art-head h1{font-size:var(--fs-h1);max-width:24ch}
.art-head .standfirst{margin-top:22px;font-size:clamp(18px,2.1vw,23px);line-height:1.48;
  color:#DCE1E1;max-width:62ch}
.accession{border:2px solid var(--accent);padding:18px 20px;font-family:'DM Mono',monospace;
  font-size:12.5px;line-height:1.5}
.accession h2{font-family:'DM Mono',monospace;font-weight:400;font-size:11.5px;
  letter-spacing:.2em;color:var(--accent);margin-bottom:14px;text-transform:uppercase}
.accession dl{display:grid;gap:10px;margin:0}
.accession dt{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.accession dd{margin:0;color:var(--ink)}

.prose{font-size:var(--fs-prose);line-height:1.68;max-width:var(--prose);margin-inline:auto;display:flow-root}
.prose > * + *{margin-top:var(--para-gap)}
.prose h2{font-size:clamp(26px,3.2vw,40px);margin-top:44px;color:var(--ink)}
.prose h2 + p{margin-top:16px}
.prose a{color:var(--accent);border-bottom:1px solid rgba(232,180,0,.45)}
.prose a:hover{background:rgba(232,180,0,.14)}
.prose ul{padding-left:1.1em;margin-top:16px}
.prose li + li{margin-top:8px}

/* figure system — three treatments, one drawing system */
.fig{margin-block:var(--unit-gap)}
.fig figcaption{display:grid;gap:6px;margin-top:12px}
.fig .cap{font-size:15.5px;line-height:1.45;color:var(--ink)}
.fig .cred{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
/* 1. full-bleed opener */
.fig--bleed{margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw;margin-block:0 0}
.fig--bleed img{width:100%;height:clamp(260px,52vh,660px);object-fit:cover}
.fig--bleed figcaption{max-width:var(--wide);margin-inline:auto;padding:14px var(--gutter) 0}
/* 2. breakout plate with amber rule */
.fig--breakout{max-width:var(--breakout);margin-inline:auto;clear:both}
.fig--breakout img{width:100%;border-top:4px solid var(--accent)}
.fig--breakout figcaption{border-bottom:1px solid var(--hair);padding-bottom:12px}
/* 3. inset plate inside the measure */
.fig--inset{background:var(--shelf);padding:12px}
.fig--inset .ph{position:relative}
.fig--inset .shelf-mark{position:absolute;left:0;top:0;background:var(--secondary);
  color:var(--ink);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;
  padding:6px 10px}
.fig--inset figcaption{padding:12px 4px 2px}

/* notes-for-design material — breakout plate */
.notes{max-width:var(--breakout);margin:var(--unit-gap) auto;background:var(--shelf);
  border-top:4px solid var(--accent);padding:26px 24px 28px;clear:both;display:grid;gap:28px}
.notes > .plate{display:block;margin-bottom:0;grid-column:1/-1}
.notes h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:18px}
.notes ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:14px}
.notes ol li{counter-increment:n;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;
  align-items:baseline;font-size:16.5px;line-height:1.5}
.notes ol li::before{content:counter(n,decimal-leading-zero);
  font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;font-size:24px;
  color:var(--accent);line-height:1}
.notes--terms ol li::before{color:var(--muted)}

.pull{max-width:var(--breakout);margin:var(--unit-gap) auto;border-top:2px solid var(--hair);
  border-bottom:2px solid var(--hair);padding-block:28px;clear:both}
.pull p{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700;
  text-transform:uppercase;font-size:clamp(26px,3.6vw,46px);line-height:.96;max-width:34ch}

.related{max-width:var(--breakout);margin:var(--unit-gap) auto 0;background:var(--shelf);padding:26px 24px 28px}
.related h2{font-size:26px;margin-bottom:18px}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.related-links li{background:#171D1F}
.related-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;
  align-items:baseline;padding:14px 16px}
.related-links .t{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700;
  font-size:22px;text-transform:uppercase;line-height:1}
.related-links .r{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.art-foot{padding-block:0 var(--unit-gap)}

/* ================= CATEGORY ================= */
.room-open{border-bottom:1px solid var(--hair)}
.room-open-in{display:grid;gap:26px;align-items:end;padding-block:44px 34px}
.room-no-big{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;
  font-size:clamp(96px,17vw,220px);line-height:.72;color:var(--accent);letter-spacing:-.01em}
.room-open h1{font-size:clamp(38px,6vw,84px);max-width:22ch}
.room-open .descriptor{margin-top:18px;font-size:clamp(17px,1.9vw,21px);line-height:1.5;
  color:#DCE1E1;max-width:64ch}
.room-open .count{margin-top:16px}
.room-hero img{width:100%;height:clamp(220px,38vh,460px);object-fit:cover}
.room-hero figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;
  padding-top:12px}

.entries{display:grid;gap:calc(var(--para-gap) * 2.2)}
.entry{background:var(--shelf);display:grid;gap:0}
.entry .ph{position:relative;overflow:hidden;aspect-ratio:16/10}
.entry .ph img{width:100%;height:100%;object-fit:cover}
.entry .shelf-mark{position:absolute;left:0;top:0;background:var(--secondary);color:var(--ink);
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;padding:6px 10px}
.entry .body{padding:22px 24px 26px;display:flex;flex-direction:column}
.entry h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:10px}
.entry p{font-size:16px;line-height:1.5;color:#C9CFCF}
.entry .rm{margin-top:auto;padding-top:16px}
.entry--lead h2{font-size:clamp(32px,4.4vw,54px)}
.entry--lead p{font-size:18px}

/* hub / archive */
.hub-rooms{display:grid;gap:2px}
.hub-room{background:var(--shelf);padding:24px 24px 28px}
.hub-room h2{font-size:clamp(26px,3vw,38px);margin-bottom:8px}
.hub-room .blurb{color:var(--muted);font-size:16px;line-height:1.5;margin-bottom:18px;max-width:70ch}
.hub-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hub-list li{background:#171D1F}
.hub-list a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:13px 16px;
  align-items:baseline}
.hub-list .n{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--muted);letter-spacing:.1em}
.hub-list .t{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700;font-size:21px;
  text-transform:uppercase;line-height:1.05}

/* simple pages */
.page-body{max-width:var(--prose);margin-inline:auto;font-size:var(--fs-prose);line-height:1.65}
.page-body > * + *{margin-top:var(--para-gap)}
.page-body .mono{overflow-wrap:anywhere}
.page-body h1{font-size:clamp(38px,6vw,72px);margin-bottom:8px}
.page-body h2{font-size:28px;margin-top:36px}

/* styleguide only */
.sg-block{border-top:1px solid var(--hair);padding-block:30px}

/* ================= RESPONSIVE — up and up ================= */
@media (min-width:700px){
  :root{--gutter:32px;--unit-gap:64px}
  .head-top{padding-block:26px 18px}
  .brand-name{font-size:clamp(38px,4.6vw,56px)}
  .lead-sub{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:44px}
  .plan-key{grid-template-columns:repeat(5,minmax(0,1fr))}
  .feature{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0}
  .sponsor-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature .body{padding:34px 34px 38px}
  .cluster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiet .inner{grid-template-columns:minmax(0,1fr) auto}
  .rooms-strip a{align-items:center}
  .foot-in{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:end}
  .foot-nav{justify-content:flex-end}
  .entries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entry--lead{grid-column:1/-1;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .entry--lead .ph{aspect-ratio:auto;height:100%}
  .art-head-in{grid-template-columns:minmax(0,1fr) 320px;gap:44px}
  .room-open-in{grid-template-columns:auto minmax(0,1fr);gap:36px}
  .fig--inset{float:right;width:min(46%,420px);margin:0 0 var(--unit-gap) 40px}
}
@media (min-width:1200px){
  :root{--gutter:40px;--fs-body:18px;--fs-prose:19.5px;--para-gap:24px;--unit-gap:72px}
  .band{padding-block:76px}
  .cluster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .piece--big{grid-column:span 2}
  .piece--big .ph{aspect-ratio:2/1}
  .rooms-strip{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}
  .related-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;padding:30px 30px 34px}
}
@media (min-width:1440px){
  :root{--breakout:1300px;--wide:1680px;--gutter:48px;--fs-prose:20px}
  .band{padding-block:92px}
  .brand-name{font-size:clamp(52px,4.4vw,64px)}
  .art-head-in{grid-template-columns:minmax(0,1fr) 380px;gap:64px}
  .hub-rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sponsor-groups{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 2px}
}
@media (min-width:1760px){
  :root{--prose:80ch;--breakout:1480px;--wide:1860px;--gutter:64px;--fs-body:19px;
        --fs-prose:21px;--para-gap:26px;--unit-gap:84px}
  .entries{grid-template-columns:repeat(3,minmax(0,1fr))}
  .entry--lead{grid-column:span 2;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .entry--lead .ph{aspect-ratio:auto;height:100%}
  .cluster{grid-template-columns:repeat(4,minmax(0,1fr))}
  .piece--big{grid-column:span 2}
  .fig--inset{width:min(42%,480px);margin-left:56px}
  .sponsor{grid-template-columns:132px minmax(0,1fr);padding:14px 16px 15px}
  .sponsor .logo-box{width:132px;height:52px}
  .sponsor .logo-box img{max-height:40px}
  .sponsor-name{font-size:21px}
  .sponsor-blurb{font-size:14.5px}
}
@media (min-width:2240px){
  :root{--prose:84ch;--breakout:1700px;--wide:2140px;--gutter:80px;--fs-body:20px;
        --fs-prose:22px;--unit-gap:96px}
  .band{padding-block:110px}
  .hub-rooms{grid-template-columns:repeat(3,minmax(0,1fr))}
  .related-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:699px){
  .plan{padding:22px 18px 20px}
  .plan > .plan-scroll > svg{min-width:900px}
  .plan-hint{display:block}
  .brand{padding-block:6px}
  .band-more,.foot-nav a,.count a,.plate a,.feature .go,.hub-room h2 a{display:inline-flex;align-items:center;min-height:44px}
  .page-body li a{display:inline-block;padding-block:12px}
  .page-body li + li{margin-top:4px}
  .band-head{align-items:center}
  .brand-name{font-size:clamp(23px,7.2vw,38px)}
  .brand{flex:1 1 100%}
  .head-next{flex:1 1 100%;text-align:left}
  .head-next b{display:inline;margin-right:8px}
  .sponsor{grid-template-columns:88px minmax(0,1fr);gap:3px 12px}
  .sponsor .logo-box{width:88px;height:40px}
  .sponsor .logo-box img{max-height:30px}
  .fig--inset{margin-block:var(--unit-gap)}
  .room .rl{font-size:19px}
}
@media (prefers-reduced-motion:no-preference){
  a,.room,.sponsor{transition:background-color .18s ease,color .18s ease}
}

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

/* sp-markbox-wide: a wordmark runs to 13:1 — a sub-200px box renders it a few
   pixels tall. Let the mark's box use the tile width Design already gave it. */
.sponsor .logo-box{width:100%!important;max-width:none!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{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))!important;justify-content:stretch!important}
.sponsor>[data-partner],.sponsor>*>[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;}

/* 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. */
.sponsor-row .sponsor.sponsor img{box-sizing:border-box!important;height:38px!important;display:block!important;width:145px!important;max-width:100%!important;flex:none!important;padding:8px 12px!important}

/* op-clamp-3: operator asked for the blurb to show three lines and no more. The copy sits in the
   right-hand column of a 104px + 1fr tile, so a long sentence stretched the row well past its
   mark. display needs !important to beat sp-blurb-unhide's display:block. */
.sponsor-row .sponsor .sponsor-blurb{
  display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}

/* op-nav-collapse: this nav printed 191px of stacked links at 390 before any content
   (6 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "right-tab", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (24px measured) the button carries the build's
   gutter (24px) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (900px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "bars" icon — the mechanism
   is deliberately not identical across the fleet either. */
.index-toggle{display:none}
@media (max-width:900px){
  .index-toggle{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-left:auto;border:1px solid currentColor;border-radius:2px;padding:10px 16px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .index-toggle-bars{width:15px;height:9px;flex:none;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-shadow:inset 0 3.5px 0 -1px currentColor}
  .rooms-nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .index-toggle-c:checked ~ .rooms-nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .wrap:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .rooms-nav)){display:none}
}

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

/* op-odd-tier-lead: money_slots changed a tier's size — .sponsor-row (3 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels:h1-mirror */
h1.rt-h2 { font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;line-height:.9;margin:0;text-wrap:balance }
.band-head h1.rt-h2 { display:flex;align-items:center;gap:12px }
.band-head h1.rt-h2 { font-size:clamp(30px,4.4vw,58px);max-width:26ch }
/* op-heading-levels:h1-mirror:end */
[data-partner] .logo-box{background:transparent!important}