/* fromshoppingtosaving.com — "Fluorescent Floor"
   Palette roles: ground / ink / accent / secondary / flag  */

:root{
  --ground:#EDEDE8;      /* cold retail paper */
  --ground-2:#E3E3DC;    /* second ground, banding */
  --mat:#DCDCD4;         /* figure mats */
  --ink:#16171A;         /* text, plan linework */
  --ink-2:#3C3C38;       /* secondary text */
  --ink-3:#6E6E66;       /* credits, fine print */
  --rule:#C6C6BE;
  --accent:#D6220F;      /* shelf-label red — used as whole bands */
  --secondary:#1240C8;   /* signage cobalt — plates, links, plan routes */
  --flag:#E8D400;        /* shelf-label yellow — figure chips, marks */
  --display:"Anton",Impact,sans-serif;
  --text:"Figtree",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.55;
  text-wrap:pretty;
}
img{display:block;max-width:100%}
a{color:var(--secondary);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.98;margin:0}
p{margin:0 0 1em}
svg{overflow:visible}

.wrap{max-width:1340px;margin:0 auto;padding-inline:28px}
.band{padding-block:56px}
.band--tight{padding-block:36px}
.measure{max-width:72ch;margin-inline:auto;padding-inline:28px}
.rule-top{border-top:2px solid var(--ink)}
.eyebrow{font-family:var(--display);font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.eyebrow--quiet{color:var(--ink-3)}
.hr{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- icons ---------- */
.ico{width:1.5em;height:1.5em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square}
.ico--lg{width:44px;height:44px;stroke-width:1.4}
.ico--xl{width:64px;height:64px;stroke-width:1.2}

/* ---------- masthead ---------- */
.masthead{background:var(--ground);border-bottom:3px solid var(--ink);position:relative;z-index:5}
.mast-row{display:grid;grid-template-columns:auto minmax(240px,1fr) auto;align-items:end;gap:44px;padding:24px 28px 16px;max-width:1340px;margin:0 auto}
.mast-meta p{margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--ink-2);max-width:48ch}
.mast-meta ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;border-top:1px solid var(--rule)}
.mast-meta li{display:flex;align-items:baseline;gap:7px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:9px 18px 0 0;margin-right:18px;border-right:1px solid var(--rule)}
.mast-meta li:last-child{border-right:0;margin-right:0;padding-right:0}
.mast-meta .v{font-family:var(--display);font-size:21px;letter-spacing:.02em;color:var(--accent)}
.mast-start{display:flex;flex-direction:column;align-items:flex-start;gap:7px;border-left:3px solid var(--ink);padding:2px 0 2px 18px}
.mast-start .lbl{font-family:var(--display);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0}
.mast-start a{font-size:15px;font-weight:600;white-space:nowrap}
.brand{font-family:var(--display);font-size:clamp(38px,4vw,54px);line-height:.86;letter-spacing:-.004em;text-transform:uppercase;color:var(--ink);display:block;position:relative;padding-bottom:12px}
.brand::after{content:"";position:absolute;left:0;bottom:0;width:76px;height:7px;background:var(--accent);transition:width .18s}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand:hover::after{width:100%}
.brand small{display:block;font-family:var(--text);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:10px}
.mast-note{max-width:330px;font-size:15px;line-height:1.45;color:var(--ink-2);margin:0}
.navrow{border-top:1px solid var(--ink);background:var(--ground-2)}
.navlist{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.navlist::-webkit-scrollbar{display:none}
.navlist li{flex:1 0 auto}
.navlist a{display:flex;align-items:center;gap:9px;padding:12px 16px;border-right:1px solid var(--rule);color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap}
.navlist a:hover{background:var(--ground);text-decoration:none;color:var(--ink)}
.navlist .n{font-family:var(--display);font-size:13px;color:var(--accent);letter-spacing:.06em}
.navlist a[aria-current="page"]{background:var(--accent);color:#fff;border-right-color:var(--ink)}
.navlist a[aria-current="page"] .n{color:#fff}
.navlist .nav-index a{background:var(--ground)}

/* ---------- homepage: lead ---------- */
.lead-feature{position:relative;display:block;color:#EDEDE8;min-height:min(74vh,700px)}
.lead-feature:hover{text-decoration:none;color:#EDEDE8}
.lead-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lead-shade{position:relative;min-height:min(74vh,700px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:180px 28px 34px;background:linear-gradient(to top,rgba(10,11,13,.9) 0%,rgba(10,11,13,.55) 46%,rgba(10,11,13,0) 100%)}
.lead-inner{max-width:1340px;margin:0 auto;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:end}
.lead-kicker{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;letter-spacing:.13em;color:var(--flag);margin-bottom:14px}
.lead-feature h1{font-size:clamp(40px,5.6vw,90px);color:#EDEDE8}
.lead-plate{background:var(--secondary);color:#EDEDE8;padding:16px 18px}
.lead-plate p{margin:0;font-size:16px;line-height:1.45;font-weight:500}
.lead-plate .credit{margin-top:8px;color:#C3D0F6}

/* ---------- statement band (accent, real area) ---------- */
.statement{background:var(--accent);color:#fff;padding:40px 0}
.statement p{margin:0;font-family:var(--display);font-size:clamp(26px,3.4vw,48px);line-height:1.03;text-transform:uppercase}
.statement .sig{font-family:var(--text);text-transform:none;font-size:16px;line-height:1.5;max-width:60ch;margin-top:18px;color:#FFE2DE}

/* ---------- the plan band ---------- */
.plan-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:30px}
.plan-head h2{font-size:clamp(24px,2.4vw,34px)}
.plan-head p{margin:0;max-width:62ch;font-size:16px;color:var(--ink-2)}
.plan-figure{margin:0}
.plan-figure svg{display:block;width:100%;height:auto;color:var(--ink)}
.plan-figure a text[text-anchor="middle"]{fill:var(--accent)}
.plan-figure a:hover circle{fill:var(--accent)}
.plan-figure a:hover text[text-anchor="middle"]{fill:#fff}
.plan-figure a:hover text:not([text-anchor="middle"]){fill:var(--ink)}
.plan-legend{margin:18px 0 0;font-size:15px;color:var(--ink-3)}

/* ---------- feed + supporters rail ---------- */
.feed{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:52px;align-items:start}
.feed-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:26px}
.feed-head h2{font-size:clamp(22px,2.2vw,30px)}
.seconds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.piece{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.piece:hover{text-decoration:none;color:var(--ink)}
.piece:hover .piece-title{color:var(--accent)}
.piece-shot{aspect-ratio:16/10;overflow:hidden;background:var(--mat)}
.piece-shot img{width:100%;height:100%;object-fit:cover}
.piece-meta{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--accent);margin:14px 0 8px;text-transform:uppercase}
.piece-title{font-family:var(--display);font-size:clamp(21px,1.7vw,27px);text-transform:uppercase;line-height:1;min-height:2em;margin:0 0 8px}
.piece-brief{font-size:16px;line-height:1.5;color:var(--ink-2);margin:0}
.piece-more{margin-top:auto;padding-top:12px;font-size:15px;font-weight:600;color:var(--secondary)}
.piece--wide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--ground-2);padding:24px;margin-bottom:36px}
.piece--wide .piece-shot{aspect-ratio:4/3}
.piece--wide .piece-title{font-size:clamp(26px,2.6vw,40px);min-height:0}
.piece--wide .piece-brief{font-size:17px}

/* section index (compact) */
.sectionindex{margin-top:44px;border-top:2px solid var(--ink)}
.sectionindex ul{list-style:none;margin:0;padding:0}
.sectionindex li{border-bottom:1px solid var(--rule)}
.sectionindex a{display:grid;grid-template-columns:44px 42px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 4px;color:var(--ink)}
.sectionindex a:hover{background:var(--ground-2);text-decoration:none}
.sectionindex .n{font-family:var(--display);font-size:22px;color:var(--secondary)}
.sectionindex .t{font-family:var(--display);font-size:23px;text-transform:uppercase}
.sectionindex .b{font-size:15px;color:var(--ink-2)}
.sectionindex .c{font-size:14px;color:var(--ink-3);white-space:nowrap}
@media(min-width:780px){.sectionindex a{grid-template-columns:44px 42px 240px minmax(0,1fr) auto}}

/* ---------- supporters rail (homepage only) ---------- */
.supporters{border:1px solid var(--rule);background:var(--ground-2);padding:20px 18px 24px;position:sticky;top:18px;text-align:center}
.supporters h2{font-size:20px}
.supporters .kick{font-size:14px;line-height:1.45;color:var(--ink-2);margin:8px auto 18px;max-width:34ch}
.sponsor-tier{display:grid;grid-template-columns:repeat(auto-fit,320px);justify-content:center;gap:14px;margin:0}
.sponsor-tier--roll{display:grid;grid-template-columns:repeat(auto-fit,320px);justify-content:center;gap:0;border-top:1px solid var(--rule)}
.tier-label{font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:22px 0 10px;border-top:1px solid var(--rule);padding-top:10px}
.sponsor{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--ground);padding:12px;color:var(--ink)}
.sponsor:hover{text-decoration:none;color:var(--ink)}
.sponsor img{width:100%;max-width:296px;height:54px;object-fit:contain;background:var(--ink);padding:8px 14px}
.sponsor-name{font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sponsor-blurb{font-size:14px;line-height:1.4;color:var(--ink-2);min-width:200px;max-width:30ch}
.sponsor.feat{background:var(--ground);border:1px solid var(--ink);padding:16px 14px}
.sponsor.feat img{height:58px}
.sponsor-tier--roll .sponsor{padding:12px;border-bottom:1px solid var(--rule)}
.sponsor-tier--roll .sponsor img{height:46px}

/* ---------- elevation band ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));align-items:stretch}
.split>div{padding:52px 28px}
.split .pane-a{background:var(--ground-2)}
.split .pane-a h2{font-size:clamp(26px,3vw,40px);margin-bottom:16px}
.split .pane-b{display:block}
.split .pane-b>.elev-scroll{width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.elev-scroll svg{min-width:900px}
.split svg{display:block;width:100%;height:auto;color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#B7B7AF;padding:44px 0 38px}
.foot a{color:#EDEDE8}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px}
.foot .brandline{font-family:var(--display);font-size:26px;line-height:.95;text-transform:uppercase;color:#EDEDE8}
.foot p{font-size:15px;line-height:1.5;max-width:44ch}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.foot .fh{font-family:var(--display);font-size:14px;letter-spacing:.12em;color:#8E8E86;margin-bottom:12px;text-transform:uppercase}

/* ---------- article ---------- */
.art-hero{position:relative}
.art-hero img{width:100%;height:min(62vh,600px);object-fit:cover}
.art-hero .shade{position:absolute;inset:auto 0 0 0;padding:200px 0 30px;background:linear-gradient(to top,rgba(10,11,13,.9),rgba(10,11,13,0))}
.art-hero .credit{position:absolute;right:28px;bottom:10px;color:#C6C6BE}
.art-kicker{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:var(--flag);margin-bottom:12px}
.art-kicker a{color:var(--flag)}
.art-hero h1{font-size:clamp(32px,4.6vw,74px);color:#EDEDE8;max-width:22ch}
.art-body{padding-block:44px 8px;font-size:19px;line-height:1.68}
.art-body>p,.art-body>h2,.art-body>h3,.art-body>ul,.art-body>ol,.art-body>.lead{max-width:72ch;margin-inline:auto;padding-inline:28px}
.art-body .art-open{font-size:21px;line-height:1.6}
.art-body .art-open::first-letter{font-family:var(--display);font-size:3.4em;line-height:.78;float:left;margin:.06em .07em 0 0;color:var(--accent)}
.art-body h2{border-top:1px solid var(--rule);padding-top:22px}
.art-divider{max-width:calc(72ch + 56px);margin:34px auto;padding-inline:28px;display:flex;align-items:center;gap:14px;color:var(--ink-3)}
.art-divider .line{flex:1;height:1px;background:var(--rule)}
.art-divider .lbl{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.art-divider .ico{width:26px;height:26px;color:var(--accent)}
.term-strip{margin:36px auto;max-width:calc(72ch + 200px);padding-inline:28px}
.term-strip .rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.term-strip .strip-head{display:flex;align-items:center;gap:10px;background:var(--ink);color:#EDEDE8;padding:11px 16px;font-family:var(--display);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.term-strip .strip-head .ico{color:var(--flag)}
.term-strip .term{background:var(--ground);padding:18px 16px;display:flex;flex-direction:column;gap:7px}
.term-strip .tn{font-family:var(--display);font-size:14px;letter-spacing:.1em;color:var(--accent)}
.term-strip dt{font-family:var(--display);font-size:19px;text-transform:uppercase;line-height:1.04}
.term-strip dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.aside-note{max-width:calc(72ch + 56px);margin:34px auto;padding-inline:28px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start}
.aside-note .lbl{font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-top:3px solid var(--accent);padding-top:9px;margin:0}
.aside-note p{margin:0;font-size:17px;line-height:1.55;border-top:1px solid var(--rule);padding-top:9px}
@media(max-width:700px){.aside-note{grid-template-columns:minmax(0,1fr);gap:10px}}
.art-body .lead{font-size:23px;line-height:1.45;font-weight:500;color:var(--ink);margin-bottom:28px}
.art-body h2{font-size:clamp(24px,2.6vw,34px);margin:40px auto 14px;display:flex;gap:14px;align-items:baseline}
.art-body h2 .h2n{font-family:var(--display);color:var(--accent);font-size:.7em;flex:none}
.art-meta{max-width:72ch;margin:0 auto 26px;padding-inline:28px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--rule);padding-bottom:14px}
.art-meta .sec{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}

/* figure system — three treatments */
figure{margin:0}
.article-figure{margin:34px auto;max-width:72ch;padding-inline:28px}
.article-figure img{width:100%}
.article-figure figcaption{padding-top:12px}
.cap{margin:0;font-size:16px;line-height:1.45;font-weight:500}
.credit{font-size:13px;line-height:1.4;color:var(--ink-3);margin:6px 0 0}
/* 1 · mat */
.fig-mat{background:var(--mat);padding:24px;max-width:calc(72ch + 56px)}
.fig-mat figcaption{border-top:1px solid #C2BFB2;margin-top:16px}
.fig-mat .cap{padding-left:14px;border-left:3px solid var(--accent)}
/* 2 · full-bleed band breaking the measure */
.fig-bleed{max-width:none;padding:0;margin:44px 0}
.fig-bleed img{width:100%;height:min(56vh,560px);object-fit:cover}
.fig-bleed figcaption{max-width:1340px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 32px}
.fig-bleed .cap{background:var(--secondary);color:#fff;padding:12px 16px;margin-top:-30px;position:relative;max-width:52ch}
.fig-bleed .credit{align-self:end}
/* 3 · inset in the column, yellow figure chip */
.fig-inset{max-width:72ch}
.fig-inset .shot{position:relative}
.fig-inset .chip{position:absolute;left:-10px;bottom:12px;background:var(--flag);color:var(--ink);font-family:var(--display);font-size:15px;letter-spacing:.06em;padding:4px 9px}
.fig-inset figcaption{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 24px;border-top:3px solid var(--ink);margin-top:12px}
@media(min-width:900px){
  .fig-inset{max-width:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;max-width:calc(72ch + 240px);margin-inline:auto;padding-inline:28px}
  .fig-inset figcaption{grid-template-columns:1fr}
}

/* notes-for-design material — interruption panels, not a rail */
.notes-panel{margin:40px 0;background:var(--ink);color:#EDEDE8;padding:34px 0}
.notes-panel .inner{max-width:1340px;margin:0 auto;padding-inline:28px}
.notes-panel h3{font-size:clamp(20px,2vw,26px);color:#EDEDE8;display:flex;gap:12px;align-items:baseline;margin-bottom:24px}
.notes-panel h3 .h2n{font-family:var(--display);color:var(--flag);font-size:.8em}
.notes-panel dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 40px;align-items:start}
.notes-panel dt{font-family:var(--display);font-size:19px;text-transform:uppercase;color:var(--flag);margin-bottom:6px}
.notes-panel dd{margin:0 0 22px;font-size:16px;line-height:1.5;color:#CFCFC7}
.notes-panel--pale{background:var(--ground-2);color:var(--ink)}
.notes-panel--pale h3{color:var(--ink)}
.notes-panel--pale dt{color:var(--accent)}
.notes-panel--pale dd{color:var(--ink-2)}

.pullquote{margin:36px auto;max-width:72ch;padding-inline:28px;border:0}
.pullquote p{font-family:var(--display);font-size:clamp(24px,2.8vw,34px);text-transform:uppercase;line-height:1.08;margin:0;color:var(--ink)}
.blockquote{margin:32px auto;max-width:72ch;padding:0 28px 0 44px;border-left:4px solid var(--secondary)}
.blockquote p{font-size:20px;line-height:1.5;margin:0 0 10px}
.blockquote cite{font-size:15px;color:var(--ink-3);font-style:normal}
.callout{margin:32px auto;max-width:72ch;background:var(--flag);color:var(--ink);padding:22px 26px}
.callout p{margin:0;font-size:18px;line-height:1.5;font-weight:500}
.note{max-width:72ch;margin:0 auto 1em;padding:14px 18px;background:var(--ground-2);font-size:16px;color:var(--ink-2);border-left:3px solid var(--ink-3)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule);margin:32px auto;max-width:calc(72ch + 56px)}
.statblock{background:var(--ground);padding:20px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-size:44px;line-height:.9;color:var(--accent)}
.stat-label{font-size:15px;line-height:1.4;color:var(--ink-2)}

.versus,.datatable{border-collapse:collapse;width:100%;font-size:16px}
.tablewrap{margin:32px auto;max-width:calc(72ch + 56px);padding-inline:28px;overflow-x:auto}
.versus th,.datatable th{background:var(--ink);color:#EDEDE8;font-family:var(--display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:10px 12px;font-weight:400}
.versus td,.datatable td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable tbody tr:nth-child(even){background:var(--ground-2)}
.versus td:first-child{font-weight:600;width:30%}

.timeline{list-style:none;margin:32px auto;max-width:72ch;padding:0 28px}
.timeline li{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:8px 24px;padding:14px 0;border-top:1px solid var(--rule)}
.t-when{font-family:var(--display);font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.t-what{font-size:16px;line-height:1.5}
@media(max-width:640px){.timeline li{grid-template-columns:1fr}}

.chart{margin:32px auto;max-width:calc(72ch + 56px);padding-inline:28px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:15px;color:var(--ink-2);border-top:1px solid var(--rule);margin-top:10px;padding-top:8px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:32px auto;max-width:calc(72ch + 200px);padding-inline:28px}
.gallery figure{background:var(--mat);padding:12px}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:14px;line-height:1.4;margin-top:8px;color:var(--ink-2)}

.map-figure{margin:32px auto;max-width:calc(72ch + 56px);padding-inline:28px}
.map-slot{aspect-ratio:16/9;border:1px solid var(--ink);background:repeating-linear-gradient(45deg,var(--ground-2) 0 10px,var(--ground) 10px 20px)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:32px auto;max-width:calc(72ch + 200px);padding-inline:28px}
.profile-card{background:var(--ground-2);padding:20px;display:flex;flex-direction:column;gap:8px;height:100%}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:6px}
.profile-card h3{font-size:22px}
.profile-card .p-role{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin:0}
.profile-card p{font-size:15px;line-height:1.5;margin:0}
.profile-card .p-links{margin-top:auto;padding-top:10px;font-size:15px}
.profile-card.no-photo{border-left:4px solid var(--secondary)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:28px auto;max-width:calc(72ch + 200px);padding-inline:28px}
.org-card{display:flex;flex-direction:column;gap:4px;background:var(--ground-2);padding:14px;color:var(--ink);height:100%}
.org-card:hover{text-decoration:none;background:var(--mat)}
.org-logo{height:34px;width:auto;max-width:100%;object-fit:contain;background:var(--ink);padding:5px 8px;margin-bottom:6px}
.org-name{font-family:var(--display);font-size:19px;text-transform:uppercase}
.org-host{font-size:13px;color:var(--ink-3)}
.entity-ref{font-weight:600;white-space:nowrap}

.further-grid,.related-links{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.further-grid a,.related-links a{display:flex;flex-direction:column;gap:8px;background:var(--ground);padding:18px;color:var(--ink);height:100%}
.further-grid a:hover,.related-links a:hover{background:var(--ground-2);text-decoration:none}
.related-links .rl-sec{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.related-links .rl-t{font-family:var(--display);font-size:22px;text-transform:uppercase;line-height:1.02}
.related-links .rl-b{font-size:15px;color:var(--ink-2);margin:0}
.related-block{max-width:calc(72ch + 56px);margin:44px auto 0;padding-inline:28px}
.related-block h2{font-size:24px;margin-bottom:16px}

.art-nextband{background:var(--accent);color:#fff;margin-top:52px;padding:30px 0}
.art-nextband .inner{max-width:1340px;margin:0 auto;padding-inline:28px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.art-nextband p{margin:0;font-family:var(--display);font-size:clamp(22px,2.4vw,32px);text-transform:uppercase}
.art-nextband a{color:#fff;border:2px solid #fff;padding:10px 16px;font-weight:600}
.art-nextband a:hover{background:#fff;color:var(--accent);text-decoration:none}
.guardrail{max-width:72ch;margin:0 auto;padding:0 28px 8px;font-size:15px;color:var(--ink-3)}

/* ---------- category / index pages ---------- */
.cat-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:0;border-bottom:3px solid var(--ink)}
.cat-head .txt{padding:46px 28px 40px}
.cat-head .txt .n{font-family:var(--display);font-size:clamp(60px,9vw,120px);line-height:.8;color:var(--accent);display:block;margin-bottom:10px}
.cat-head h1{font-size:clamp(34px,5vw,70px);margin-bottom:14px}
.cat-head .blurb{font-size:20px;line-height:1.45;max-width:44ch}
.cat-head .shot{position:relative;min-height:320px}
.cat-head .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-head .shot .cap{position:absolute;left:0;bottom:0;background:var(--secondary);color:#fff;padding:12px 16px;max-width:38ch}
.cat-head .shot .credit{color:#C3D0F6;margin-top:6px}
.cat-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list>li>a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px 20px;padding:22px 4px;color:var(--ink);align-items:baseline}
.cat-list .n{font-family:var(--display);font-size:24px;color:var(--secondary)}
.cat-list .t{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);text-transform:uppercase;line-height:1.02}
.cat-list .b{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:76ch;grid-column:2}
.cat-list>li>a:hover{background:var(--ground-2);text-decoration:none}
.cat-list>li>a:hover .t{color:var(--accent)}
.sec-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sec-strip a{background:var(--ground);padding:18px 16px;display:flex;flex-direction:column;gap:10px;color:var(--ink);height:100%}
.sec-strip a:hover{background:var(--ground-2);text-decoration:none}
.sec-strip .n{font-family:var(--display);font-size:14px;letter-spacing:.1em;color:var(--accent)}
.sec-strip .t{font-family:var(--display);font-size:21px;text-transform:uppercase}
.sec-strip .b{font-size:14px;line-height:1.4;color:var(--ink-2)}
.sec-strip a[aria-current="page"]{background:var(--ink);color:#EDEDE8}
.sec-strip a[aria-current="page"] .b{color:#B7B7AF}

.page-head{padding:44px 0 28px;border-bottom:2px solid var(--ink)}
.page-head h1{font-size:clamp(34px,4.4vw,62px);margin-bottom:12px}
.page-head p{font-size:20px;line-height:1.45;max-width:60ch;margin:0}
.prose{padding-block:34px}
.prose p,.prose h2,.prose ul{max-width:72ch;margin-inline:auto;padding-inline:28px}
.prose h2{font-size:28px;margin:32px auto 12px}
.prose ul{padding-left:52px;margin-bottom:1em}
.prose li{margin-bottom:.5em}

/* styleguide only */
.sg-block{padding:34px 0;border-top:1px solid var(--rule)}
.sg-block>h2{max-width:1340px;margin:0 auto 18px;padding-inline:28px;font-size:26px}
.sg-note{max-width:1340px;margin:0 auto 18px;padding-inline:28px;font-size:15px;color:var(--ink-3)}

@media(max-width:1080px){
  .feed{grid-template-columns:minmax(0,1fr)}
  .supporters{position:static}
  .lead-inner{grid-template-columns:minmax(0,1fr)}
  .lead-plate{max-width:420px}
}
@media(max-width:860px){
  body{font-size:16px}
  .mast-row{grid-template-columns:minmax(0,1fr);gap:18px}
  .mast-start{border-left:0;border-top:1px solid var(--rule);padding:14px 0 0}
  .brand{font-size:30px}
  .mast-note{max-width:none}
  .band{padding-block:40px}
  .piece--wide{grid-template-columns:minmax(0,1fr)}
  .cat-head{grid-template-columns:minmax(0,1fr)}
  .cat-head .shot{min-height:260px;order:-1}
  .art-hero img{height:min(46vh,380px)}
  .art-hero .shade{padding-top:120px}
  .fig-bleed .cap{margin-top:0}
  .split>div{padding:36px 24px}
}
@media(max-width:420px){
  .wrap,.measure,.art-body>p,.art-body>h2,.art-meta,.article-figure,.chart,.timeline{padding-inline:20px}
  .sponsor-tier,.sponsor-tier--roll{grid-template-columns:minmax(0,1fr)}
}

/* ---------- narrow-screen behaviour ---------- */
@media(max-width:860px){
  /* technical drawings stay legible: scroll them rather than shrink the type */
  .chart{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .plan-figure svg{min-width:1100px}
  .split .pane-b svg{min-width:900px}
  .chart svg{min-width:640px}
  .plan-figure,.chart{padding-bottom:6px}
  .sponsor-tier,.sponsor-tier--roll{grid-template-columns:minmax(0,1fr)}
  .sponsor img{max-width:100%}
  .supporters{text-align:center}
  .sectionindex a{grid-template-columns:34px 30px minmax(0,1fr);gap:6px 12px;padding:16px 4px}
  .sectionindex .b,.sectionindex .c{grid-column:3}
  .sectionindex .c{font-size:13px}
  .cat-list>li>a{grid-template-columns:44px minmax(0,1fr)}
  .art-body{font-size:17px}
  .art-body .lead{font-size:20px}
  .art-body .art-open{font-size:19px}
  .fig-bleed .cap{margin-top:0;max-width:none}
  .fig-mat{padding:16px}
  .notes-panel{padding:26px 0}
  .term-strip .rows{grid-template-columns:minmax(0,1fr)}
  .statrow{grid-template-columns:minmax(0,1fr)}
  /* the register table restacks as rows of cards */
  .datatable{display:block}
  .datatable thead{display:none}
  .datatable tbody,.datatable tr,.datatable td,.datatable th{display:block;width:auto}
  .datatable tbody th{background:var(--ink);color:#EDEDE8;padding:10px 12px;margin-top:18px;font-size:13px;line-height:1.35}
  .datatable tr{border-bottom:1px solid var(--rule);padding:10px 0}
  .datatable tr:has(th){border-bottom:0;padding:0}
  .datatable td{border:0;padding:1px 0}
  .datatable td:first-child{font-family:var(--display);font-size:15px;color:var(--accent);letter-spacing:.08em}
  .datatable td:nth-child(2){font-family:var(--display);font-size:21px;text-transform:uppercase;line-height:1.05;padding-bottom:4px}
  .datatable tbody tr:nth-child(even){background:none}
}
@media(max-width:560px){
  .mast-row{padding:18px 20px 14px}
  .navlist a{padding:11px 13px;font-size:14px}
  .statement p{font-size:clamp(22px,6.4vw,30px)}
  .lead-feature,.lead-shade{min-height:min(72vh,540px)}
  .lead-shade{padding:120px 20px 26px}
  .plan-head,.feed-head{gap:10px}
  .cat-head .txt{padding:32px 20px 30px}
  .art-hero .credit{right:20px}
  .related-block h2,.plan-head h2,.feed-head h2{font-size:22px}
  .art-body h2{font-size:24px;gap:10px}
  .foot{padding:34px 0 30px}
}
.scrollhint{display:none}
@media(max-width:860px){.scrollhint{display:block;font-size:14px;line-height:1.4;color:var(--ink-3);margin:8px 0 0}}
@media(max-width:1100px){
  .plan-figure,.elev-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .plan-figure svg{min-width:1100px}
  .elev-scroll svg{min-width:900px}
  .plan-figure .scrollhint,.split .scrollhint{display:block;font-size:14px;line-height:1.4;color:var(--ink-3);margin:8px 0 0}
}
@media(min-width:1101px){
  .split{grid-template-columns:minmax(0,430px) minmax(0,1fr)}
}
.split .scrollhint{display:block}
@media(min-width:1386px){.split .scrollhint{display:none}}

/* 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-mark-fit: width:100% + padding must not overflow the tile — but the declared
   HEIGHT is the mark's size and border-box alone steals the vertical padding from it.
   earlychristianireland declares height:66px with 10px top/bottom padding: border-box
   left a 46px mark and the operator read it as 'logos too small'. Keep the horizontal
   inset, drop the vertical padding, so the mark occupies the full height Design set. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!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. */
.sponsor-tier .feat.sponsor.feat.sponsor img{box-sizing:border-box!important;padding:9px 15px!important}
.sponsor-tier.sponsor-tier--roll .sponsor.sponsor img{box-sizing:border-box!important;padding:8px 12px!important}


/* op-footer-compact: the footer printed 4 rows for 4 link(s) in
   1 list(s) — 581px at 390, 7% 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 581 -> 510px (12% 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:clamp(8px,2.36vw,34px)!important;row-gap:8px!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:22px}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1656px at 390, 19% of the whole page. Two columns bring it to
   993px (40% shorter). Checked before writing: no new overflow, smallest mark still
   119px wide, longest blurb 3 lines, tile heights 133-191px.
   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. 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-tier, .sponsor-tier.sponsor-tier--roll), 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-tier{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-tier > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier > * *{min-width:0!important;max-width:100%}
    .sponsor-tier img,.sponsor-tier svg{max-width:100%;height:auto}
  .sponsor-tier.sponsor-tier--roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-tier.sponsor-tier--roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier.sponsor-tier--roll > * *{min-width:0!important;max-width:100%}
    .sponsor-tier.sponsor-tier--roll img,.sponsor-tier.sponsor-tier--roll svg{max-width:100%;height:auto}
  .sponsor-tier .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-tier.sponsor-tier--roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-hover-pad */
.sectionindex a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:1399px){
  div.wrap.page-head{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.piece > div.piece-shot > img,
  a.piece.piece--wide > div.piece-shot > img,
  article > div.art-hero > img,
  div.art-body > figure.article-figure.fig-bleed > img,
  div.art-body > figure.article-figure.fig-mat > img,
  div.cat-head > div.shot > img,
  figure.article-figure.fig-inset > div.shot > img,
  main > a.lead-feature > img){height:auto}
/* op-img-dims:end */
@media (min-width:910px) and (max-width:1099px){.sponsor-tier.sponsor-tier:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(320px,calc(50% - 6px)),1fr))!important;justify-content:stretch!important}.sponsor-tier.sponsor-tier > [data-partner]{width:auto!important;max-width:none!important}}
@media (min-width:720px) and (max-width:879px){.sponsor-tier:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.sponsor-tier:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}