/* razorart.com — Direction A
   Ground: warm paper. Ink: near-black. Accent: vermilion (two contrast tiers).
   Secondary: deep cyan, used on whole bands. Flag: amber, numerals only.
   Signature: the seven-hue press colour bar under every masthead. */

:root{
  --paper:#F2EDE4; --paper-deep:#E4DCCF; --rule:#C9BFAE;
  --ink:#191612; --ink-soft:#4A423A; --ink-quiet:#5C5349;
  --accent:#D23B14; --accent-text:#B8330F; --accent-deep:#9E2B0A;
  --secondary:#0F4E60; --secondary-text:#0E6E8C; --secondary-deep:#0C5A73; --flag:#E8A712;
  --h-raster:#E8A712; --h-drawing:#D23B14; --h-curves:#E2661C;
  --h-colour:#1E7A4F; --h-instruments:#0E6E8C; --h-register:#6B3FA0;
  --display:Chivo,"Helvetica Neue",Arial,sans-serif;
  --text:Cabin,"Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --pad:56px; --measure:66ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.5}
img{max-width:100%}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--secondary-text)}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-0.03em;text-wrap:pretty}
p{text-wrap:pretty}
.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9}

/* ---- colour bar ---- */
.colourbar{display:flex;height:10px}
.colourbar span{flex:1}
.colourbar span:nth-child(1){background:#0E6E8C}.colourbar span:nth-child(2){background:#1E7A4F}
.colourbar span:nth-child(3){background:#E8A712}.colourbar span:nth-child(4){background:#E2661C}
.colourbar span:nth-child(5){background:#D23B14}.colourbar span:nth-child(6){background:#C0338A}
.colourbar span:nth-child(7){background:#6B3FA0}

/* ---- masthead ---- */
.mast{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:18px var(--pad)}
.mast-name{display:flex;align-items:center;gap:14px}
.mast-name a{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-0.035em;color:var(--ink)}
.mast-emblem{flex:none}
.mast-nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--display);font-weight:700;font-size:16px}
.mast-nav a{color:var(--ink)}
.mast-nav a[aria-current]{border-bottom:3px solid currentColor}
.mast-nav a.s-raster[aria-current]{color:#A87400}
.mast-nav a.s-drawing[aria-current]{color:var(--accent-text)}
.mast-nav a.s-curves[aria-current]{color:#B04A0C}
.mast-nav a.s-colour[aria-current]{color:#166138}
.mast-nav a.s-instruments[aria-current]{color:var(--secondary-text)}
.mast-nav a.s-register[aria-current]{color:#5A3489}

/* homepage masthead: emblem + wordmark left, whole menu open right */
.mast-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:34px var(--pad) 0;align-items:start}
.mast-home h1{font-weight:900;font-size:clamp(44px,7vw,92px);line-height:0.9;letter-spacing:-0.05em;margin:0;white-space:nowrap}
.logo{flex:none;margin-top:2px}
.mast-home .brand{align-items:center;gap:26px}
.mast-home .strap{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--secondary-text)}
.mast-home .brand{display:flex;gap:22px;align-items:flex-start;padding-bottom:24px}
.menu{display:flex;flex-direction:column;gap:14px;padding:6px 0 24px}
.menu-lead{border-left:3px solid var(--h-raster);padding-left:16px}
.menu-lead>a{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px;line-height:1;color:var(--ink)}
.menu-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 30px}
.menu-cols>div>a:first-child{font-family:var(--display);font-weight:700;font-size:15px;display:flex;align-items:center;gap:7px;color:var(--ink)}
.menu-entries{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:5px;font-size:15px}
.menu-entries.sm{font-size:14px}
.menu-entries.sm a{color:var(--ink-soft)}
.menu-wide{grid-column:span 2;display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--rule);padding-top:9px;flex-wrap:wrap}
.menu-wide p{margin:0;font-size:14px;color:var(--ink-soft)}
.menu-toggle{display:block}

/* homepage header menu: one row of section names, each with its entries beneath */
.mast-home{display:block;padding:34px var(--pad) 0}
.mast-home .brand{padding-bottom:22px}
.hmenu{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.hmenu-item{padding:14px 18px 18px;border-right:1px solid var(--rule);border-top:4px solid var(--rule)}
.hmenu-item:last-child{border-right:none}
.hmenu-item:first-child{padding-left:0}
.hmenu-item.s-raster{border-top-color:var(--h-raster)}
.hmenu-item.s-drawing{border-top-color:var(--h-drawing)}
.hmenu-item.s-curves{border-top-color:var(--h-curves)}
.hmenu-item.s-colour{border-top-color:var(--h-colour)}
.hmenu-item.s-instruments{border-top-color:var(--h-instruments)}
.hmenu-item.s-register{border-top-color:var(--h-register)}
.hmenu-top{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-0.02em;color:var(--ink)}
.hmenu-sub{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:14px}
.hmenu-sub a{color:var(--ink-soft)}
@media(max-width:1080px){.hmenu{grid-template-columns:repeat(3,minmax(0,1fr))}.hmenu-item{border-bottom:1px solid var(--rule)}.hmenu-item:nth-child(3n){border-right:none}.hmenu-item:first-child{padding-left:18px}}
@media(max-width:640px){.hmenu{grid-template-columns:minmax(0,1fr)}.hmenu-item{border-right:none;padding-left:0!important}.hmenu-sub{flex-direction:row;flex-wrap:wrap;gap:3px 14px}}
.menu-toggle>summary{display:none}

/* ---- kickers, meta ---- */
.kicker{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-deep)}
.kicker a{color:inherit}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-quiet)}
.icon{flex:none}

/* ---- bands ---- */
.band{padding:52px var(--pad) 58px;border-bottom:1px solid var(--rule)}
.band-tint{background:var(--paper-deep)}
.band-tint .eyebrow,.fig-mat .eyebrow,.support .eyebrow{color:var(--ink-quiet)}
.band-tint .eyebrow.cyan,.fig-mat .eyebrow.cyan{color:var(--secondary-deep)}
.band-deep{background:var(--secondary);color:var(--paper);border-bottom:none}
.band-deep h2,.band-deep h3,.band-deep a{color:var(--paper)}
.band-quiet{padding:66px var(--pad) 72px;border-top:1px solid var(--rule);border-bottom:3px solid var(--ink)}
.band-quiet p{margin:0 auto;max-width:30ch;font-family:var(--display);font-weight:300;font-size:clamp(30px,4vw,54px);line-height:1.08;letter-spacing:-0.03em;text-align:center}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.band-head h2,.band-head h3{font-weight:800;font-size:clamp(24px,2.4vw,34px);letter-spacing:-0.02em}
.band-deep .band-head{border-bottom:1px solid rgba(242,237,228,.35);padding-bottom:14px}

/* ---- lead / hero figure (figure treatment A: full bleed + inset plate) ---- */
.hero{position:relative}
.hero>img{width:100%;height:min(66vh,660px);object-fit:cover;display:block}
.hero-plate{background:var(--paper);padding:28px 32px 24px;position:relative;max-width:620px}
.hero-plate .tick{position:absolute;color:var(--accent)}
.hero-plate .tick.tl{top:-1px;left:-1px}.hero-plate .tick.br{bottom:-1px;right:-1px}
.hero-plate h2,.hero-plate h1{font-weight:800;font-size:clamp(28px,3.4vw,46px);line-height:1.02}
.hero-plate h2 a,.hero-plate h1 a{color:var(--ink)}
.hero-plate p{margin:14px 0 0;font-size:19px;line-height:1.45}
@media(min-width:900px){.hero-plate{position:absolute;left:var(--pad);bottom:var(--pad)}}
.figcap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;padding:16px var(--pad) 0}
.figcap .cap{border-top:2px solid var(--accent);padding-top:12px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.4;max-width:60ch}
.figcap .credit{border-top:1px solid var(--rule);padding-top:12px;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-quiet)}

/* figure treatment B: mat */
.fig-mat{background:var(--paper-deep);padding:34px;margin:0}
.fig-mat img{display:block;width:100%;height:380px;object-fit:cover;border:1px solid var(--ink)}
.fig-mat{display:flex;flex-direction:column}
.fig-mat img{height:clamp(240px,26vw,380px)}
.mat-label{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.mat-label .swatch{width:26px;height:12px;flex:none}
.mat-label .swatch.em{background:linear-gradient(90deg,#D23B14 0 33%,#1E7A4F 33% 66%,#0E6E8C 66%)}
.mat-label .swatch.pr{background:linear-gradient(90deg,#0E6E8C 0 25%,#C0338A 25% 50%,#E8A712 50% 75%,#191612 75%)}
.fig-mat figcaption{margin-top:14px;border-top:2px solid var(--ink);padding-top:12px}
.fig-mat .cap{display:block}
.fig-mat .cap{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.4}
.fig-mat .credit{font-family:var(--mono);font-size:11px;margin-top:6px;color:var(--ink-quiet)}
.fig-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px}
.fig-pair-foot{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;border-top:2px solid var(--ink);margin-top:22px;padding-top:18px}
.fig-pair-foot .cap{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.35;max-width:58ch}
.fig-pair-foot .credit{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-quiet)}
.cmp .fig-pair-foot{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
.cmp .fig-pair-foot .cap{font-weight:600;font-size:19px}
.cmp .more{display:flex;flex-direction:column;gap:8px;margin:0}
.cmp .more a{font-family:var(--display);font-weight:700;font-size:16px;border-top:1px solid var(--rule);padding-top:8px}
.cmp .more a:first-child{border-top:2px solid var(--accent);color:var(--accent-text)}

/* figure treatment C: offset caption on a cyan plate */
.fig-offset{position:relative;padding-bottom:26px;margin:36px 0}
.fig-offset img{display:block;width:88%;height:auto;aspect-ratio:16/10;object-fit:cover}
.fig-offset figcaption{background:var(--secondary);color:var(--paper);padding:18px 20px;width:64%;margin-left:auto;margin-top:-56px;position:relative}
.fig-offset .cap{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.35}
.fig-offset .credit{font-family:var(--mono);font-size:11px;margin-top:8px;opacity:.85}

/* figure treatment D: chip strip */
.chipstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:36px 0 0}
.chipstrip figure{margin:0}
.chipstrip img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--rule)}
.chipstrip figure:nth-child(4n+1) img{border-color:#0E6E8C}
.chipstrip figure:nth-child(4n+2) img{border-color:#E8A712}
.chipstrip figure:nth-child(4n+3) img{border-color:#C0338A}
.chipstrip figure:nth-child(4n+4) img{border-color:#1E7A4F}
.chipstrip figcaption{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-quiet);margin-top:8px}

/* full-bleed figure inside an article */
.fig-bleed{margin:44px 0}
.fig-bleed img{display:block;width:100%;height:min(58vh,560px);object-fit:cover;background:var(--ink)}
.fig-bleed img.diagram{object-fit:contain;background:var(--paper-deep);height:min(54vh,520px);border-bottom:1px solid var(--rule)}

/* ---- article ---- */
.art-head{padding:48px var(--pad) 0;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px}
.art-head h1{font-weight:900;font-size:clamp(38px,5vw,68px);line-height:0.95;letter-spacing:-0.04em;max-width:24ch}
.standfirst{margin:20px 0 0;font-family:var(--display);font-weight:300;font-size:clamp(20px,2vw,25px);line-height:1.35;max-width:52ch}
.art-facts{border-left:1px solid var(--rule);padding:6px 0 6px 22px}
.art-facts dl{margin:12px 0 0;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.45}
.art-facts dt{font-family:var(--display);font-weight:700}
.art-facts dd{margin:2px 0 0;color:var(--ink-soft)}
.prose{max-width:var(--measure);margin:0 auto;padding:52px var(--pad) 0;font-size:19px;line-height:1.62}
.prose h2{font-weight:800;font-size:clamp(24px,2.6vw,32px);margin:38px 0 16px;letter-spacing:-0.025em}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 22px}
.prose .dropcap::first-letter{font-family:var(--display);font-weight:900;font-size:62px;float:left;line-height:.8;margin:6px 12px 0 0;color:var(--accent)}
.prose figure{margin:34px 0}
.prose .fig-in-col img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--ink)}
.prose .fig-in-col figcaption{margin-top:10px;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.4}
.prose .fig-in-col .credit{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-quiet);margin-top:5px;display:block}
.wide{max-width:none;padding-inline:var(--pad)}

/* ---- components ---- */
.lead{font-family:var(--display);font-weight:300;font-size:25px;line-height:1.35}
.pullquote{margin:34px 0;background:var(--secondary);color:var(--paper);padding:26px 30px}
.pullquote p{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.3}
.blockquote{margin:30px 0;border-left:3px solid var(--rule);padding:2px 0 2px 20px}
.blockquote p{margin:0;font-size:19px;line-height:1.5}
.blockquote cite{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--ink-quiet)}
.callout{margin:30px 0;border-left:3px solid var(--accent);padding:4px 0 4px 18px}
.callout p{margin:0;font-size:18px;line-height:1.5}
.note{border-top:1px solid var(--rule);padding-top:10px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.note b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary-text)}

.notes-band{background:var(--paper-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:44px var(--pad) 48px;margin:48px 0}
.notes-band h2{font-weight:800;font-size:clamp(22px,2.2vw,28px);margin-bottom:20px}
.notes-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;padding:10px 0;border-top:1px solid var(--rule)}
.timeline li:first-child{border-top:2px solid var(--ink)}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.t-when{font-family:var(--mono);font-size:13px;color:var(--accent-deep);line-height:1.45}
.t-what{font-size:16px;line-height:1.45}
.deflist{margin:0;font-size:16px;line-height:1.5}
.deflist dt{font-family:var(--display);font-weight:700;border-top:1px solid var(--rule);padding-top:9px;margin-top:9px}
.deflist dt:first-of-type{border-top:2px solid var(--ink)}
.deflist dd{margin:3px 0 0;color:var(--ink-soft)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:30px 0}
.statblock{background:var(--ink);color:var(--paper);padding:16px 18px}
.stat-num{display:block;font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:var(--flag)}
.stat-label{display:block;font-size:14px;line-height:1.35;margin-top:6px}

.datatable,.versus{width:100%;border-collapse:collapse;margin:30px 0;font-size:16px}
.datatable th,.versus th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-quiet);border-bottom:2px solid var(--ink);padding:8px 12px 8px 0;vertical-align:bottom}
.datatable td,.versus td{border-bottom:1px solid var(--rule);padding:11px 12px 11px 0;line-height:1.45;vertical-align:top}
.versus td:first-child{font-family:var(--display);font-weight:700}

.chart figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-quiet);margin-top:8px}
.chart svg{width:100%;height:auto;display:block}

.article-figure{margin:34px 0}
.article-figure img{display:block;width:100%;object-fit:cover;border:1px solid var(--ink)}
.article-figure figcaption{margin-top:10px;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.4}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin:34px 0}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.map-figure .map-slot{min-height:360px;border:1px solid var(--rule)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:30px 0}
.profile-card{background:var(--paper-deep);padding:24px;display:flex;flex-direction:column}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-weight:800;font-size:22px}
.p-role{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary-text);margin:6px 0 8px}
.profile-card p{margin:0 0 10px;font-size:16px;line-height:1.45}
.p-links{margin-top:auto!important}
.p-attr{font-family:var(--mono);font-size:11px;color:var(--ink-quiet)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.org-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);padding:16px;background:var(--paper)}
.org-logo{height:34px;width:auto;object-fit:contain;align-self:flex-start}
.org-name{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.org-host{font-family:var(--mono);font-size:11px;color:var(--ink-quiet)}
.entity-ref{font-family:var(--display);font-weight:700}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.further-grid a{border-top:3px solid var(--accent);padding-top:10px;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink)}
.further-grid a:nth-child(2n){border-top-color:var(--secondary)}
.further-grid a:nth-child(3n){border-top-color:var(--flag)}
.related-links{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.related-links li{border-top:2px solid var(--ink);padding-top:10px}
.related-links a{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink)}
.related-links .why{display:block;font-family:var(--text);font-weight:400;font-size:15px;color:var(--ink-soft);margin-top:4px}

/* section index / register */
.entry-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.entry{display:block;padding:28px 34px 32px 0;border-top:1px solid var(--rule)}
.entry:nth-child(odd){border-right:1px solid var(--rule)}
.entry:nth-child(even){padding:28px 0 32px 34px}
.entry:nth-child(1),.entry:nth-child(2){border-top:2px solid var(--ink)}
.entry-no{font-family:var(--mono);font-size:12px;color:var(--accent-deep)}
.entry h2{font-weight:800;font-size:clamp(22px,2.2vw,30px);margin:10px 0 8px;letter-spacing:-0.025em;color:var(--ink)}
.entry p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-soft);max-width:46ch}
.cat-list{list-style:none;margin:0;padding:0}
.reg{width:100%;border-collapse:collapse;font-size:16px}
.reg th{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-quiet);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:9px 14px 9px 0}
.reg td{border-bottom:1px solid var(--rule);padding:13px 14px 13px 0;vertical-align:baseline}
.reg .t-title{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-0.02em;color:var(--ink)}
.reg .t-sec{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-quiet)}
.reg td.ico{width:26px;padding-right:0}

/* section blocks on the homepage */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px 34px}
.sec-block{border-top:3px solid var(--rule);padding-top:14px}
.sec-block>a:first-child{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-0.02em;display:flex;align-items:center;gap:9px;color:var(--ink)}
.sec-block p{margin:8px 0 12px;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.sec-block .menu-entries{font-size:15px}
.s-raster{border-top-color:var(--h-raster)}.s-drawing{border-top-color:var(--h-drawing)}
.s-curves{border-top-color:var(--h-curves)}.s-colour{border-top-color:var(--h-colour)}
.s-instruments{border-top-color:var(--h-instruments)}.s-register{border-top-color:var(--h-register)}

/* four-up problem run on the cyan band */
.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px}
.deep-strap{margin:0;font-size:17px;line-height:1.45;color:#DCE7EA;max-width:44ch}
.four{border-top:1px solid rgba(242,237,228,.35);padding-top:26px;gap:0}
.prob{padding:0 26px;border-left:1px solid rgba(242,237,228,.28);display:flex;flex-direction:column}
.prob:first-child{padding-left:0;border-left:none}
.prob:last-child{padding-right:0}
.prob .n{font-family:var(--mono);font-size:26px;margin:0 0 10px}
.prob-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.prob-foot a{color:#DCE7EA}
.four h4{font-weight:700;font-size:21px;letter-spacing:-0.01em;margin:8px 0}
.four p{margin:0;font-size:16px;line-height:1.5;color:#DCE7EA}
.four .n{font-family:var(--mono);font-size:13px}
.four>div:nth-child(1) .n{color:#F2C14E}.four>div:nth-child(2) .n{color:#7FDAA8}
.four>div:nth-child(3) .n{color:#FF9E6B}.four>div:nth-child(4) .n{color:#F7A8CB}

/* supporters — woven groups, identical tiles */
.support{background:var(--paper-deep);padding:38px var(--pad) 44px;border-bottom:1px solid var(--rule)}
.support-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:34px 40px}
.support h2{font-weight:700;font-size:22px;letter-spacing:-0.02em}
.support-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);border-bottom:2px solid var(--ink);padding-bottom:7px;margin-bottom:14px}
.support-groups{grid-template-columns:minmax(0,1fr);gap:26px}
.support-row{display:flex;flex-wrap:wrap;gap:20px}
.sponsor{flex:0 0 calc((100% - 40px)/3);height:88px;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:10px 14px}
.sponsor img,.sponsor svg{max-height:52px;max-width:100%;width:auto;height:auto;object-fit:contain}

/* footer */
.foot{background:var(--ink);color:var(--paper);padding:44px var(--pad) 40px}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.foot h2{font-weight:900;font-size:32px;letter-spacing:-0.03em}
.foot p{font-size:17px;margin:8px 0 0;color:#CFC6B8;max-width:66ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px;justify-content:flex-end;max-width:560px}
.foot-nav a{color:var(--paper)}

/* expander for long lists (CSS only) */
details.more{margin-top:12px}
details.more>summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:15px;color:var(--accent-text);list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:" +"}
details.more[open]>summary::after{content:" −"}

@media(max-width:1080px){
  :root{--pad:32px}
  .art-head,.figcap,.fig-pair,.fig-pair-foot,.entry-grid,.foot-in{grid-template-columns:minmax(0,1fr)}
  .art-facts{border-left:none;border-top:2px solid var(--ink);padding:14px 0 0}
  .entry,.entry:nth-child(even){padding:24px 0 26px;border-right:none}
  .foot-nav{justify-content:flex-start}
}
@media(max-width:900px){
  .prob{padding:18px 0 0;border-left:none;border-top:1px solid rgba(242,237,228,.28)}
  .prob:first-child{padding-top:0;border-top:none}
  .sponsor{flex:0 0 100%}
  .cmp .fig-pair-foot{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){
  body{font-size:16px}
  .mast-home{grid-template-columns:minmax(0,1fr);gap:0;padding-top:26px}
  .mast-home h1{font-size:56px}
  .menu-cols{grid-template-columns:minmax(0,1fr)}
  .menu-wide{grid-column:auto}
  .menu-toggle>summary{display:block;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:11px 0;list-style:none}
  .menu-toggle>summary::-webkit-details-marker{display:none}
  .menu-toggle>summary::after{content:" ▾"}
  .menu-toggle[open]>summary::after{content:" ▴"}
  .prose{font-size:17px}
  .hero>img{height:56vh}
  .hero-plate{position:static;max-width:none}
  .fig-offset img{width:100%}
  .fig-offset figcaption{width:100%;margin-top:0}
  .fig-mat{padding:20px}
  .fig-mat img{height:260px}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:2px}
  .prose .dropcap::first-letter{font-size:48px}
  .reg thead{display:none}
  .reg tr{display:grid;grid-template-columns:26px minmax(0,1fr);border-bottom:1px solid var(--rule);padding:12px 0}
  .reg td{border:none;padding:1px 0}
  .reg td.ico{grid-row:span 3}
}
@media print{
  .mast-nav,.menu,.support,.foot-nav{display:none}
  body{background:#fff}
  .band,.notes-band{border-color:#ccc}
}

/* register extract — icon-led cards */
.regcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0}
.regcard{border-top:1px solid var(--rule)}
.regcard a{display:flex;gap:18px;align-items:flex-start;padding:20px 22px 22px 0;height:100%}
.regcard-ico{flex:none;width:58px;height:58px;display:flex;align-items:center;justify-content:center;border:2px solid currentColor}
.regcard-body{display:flex;flex-direction:column;gap:3px}
.regcard-sec{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-quiet)}
.regcard-title{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.025em;color:var(--ink)}
.regcard-solved{font-size:16px;line-height:1.4;color:var(--ink-soft)}
.regcard.s-raster{color:#A87400}.regcard.s-drawing{color:var(--accent-text)}
.regcard.s-curves{color:#B04A0C}.regcard.s-colour{color:#166138}
.regcard.s-instruments{color:var(--secondary-deep)}.regcard.s-register{color:#5A3489}
.regcard a:hover .regcard-ico{background:currentColor}
.regcard a:hover .regcard-ico .icon{color:var(--paper)}
.regcard a:hover .regcard-title{color:currentColor}

/* section blocks with more pop */
.sec-block{border-top:4px solid var(--rule);padding-top:0;background:var(--paper-deep);display:flex;flex-direction:column}
.sec-top{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--ink)}
.sec-chip{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;background:currentColor}
.sec-chip .icon{color:var(--ink)}
.sec-name{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.025em;color:var(--paper)}
.sec-block p{margin:14px 18px 12px;font-size:17px;line-height:1.45;color:var(--ink-soft)}
.sec-block .menu-entries{margin:auto 18px 18px;gap:4px 14px}
.sec-block.s-raster .sec-top{color:var(--h-raster)}
.sec-block.s-drawing .sec-top{color:var(--h-drawing)}
.sec-block.s-curves .sec-top{color:var(--h-curves)}
.sec-block.s-colour .sec-top{color:#2E9A66}
.sec-block.s-instruments .sec-top{color:#22A0C4}
.sec-block.s-register .sec-top{color:#9B72D0}
.sec-block.s-raster{border-top-color:var(--h-raster)}
.sec-block.s-drawing{border-top-color:var(--h-drawing)}
.sec-block.s-curves{border-top-color:var(--h-curves)}
.sec-block.s-colour{border-top-color:var(--h-colour)}
.sec-block.s-instruments{border-top-color:var(--h-instruments)}
.sec-block.s-register{border-top-color:var(--h-register)}
@media(max-width:860px){.regcard a{padding-right:0}.regcard-ico{width:46px;height:46px}}

/* links on tinted grounds step to the darker accent tier */
.band-tint a,.sec-block .menu-entries a,.fig-mat a,.support a,.notes-band a,.regcard a{color:var(--accent-deep)}
.band-tint a:hover,.sec-block .menu-entries a:hover,.fig-mat a:hover,.notes-band a:hover{color:var(--secondary-deep)}
.sec-block .sec-top,.sec-block .sec-name{color:var(--paper)}
.regcard-title{color:var(--ink)}

/* the drawing leads each problem */
.prob-ico{display:block;margin-bottom:16px}
.prob-ico svg{display:block}
.prob .n{font-family:var(--mono);font-size:13px;letter-spacing:.14em;margin:0 0 8px}
.four>div:nth-child(1) .prob-ico{color:#F2C14E}
.four>div:nth-child(2) .prob-ico{color:#7FDAA8}
.four>div:nth-child(3) .prob-ico{color:#FF9E6B}
.four>div:nth-child(4) .prob-ico{color:#F7A8CB}
.prob h4{font-size:22px;margin:0 0 8px}
.prob-foot{border-top:1px solid rgba(242,237,228,.28)}
@media(max-width:900px){.prob-ico svg{width:64px;height:64px}}

/* entry lists inside section blocks: one per row, numbered, hairline rules */
.sec-block .menu-entries{display:flex;flex-direction:column;gap:0;counter-reset:e;margin:auto 18px 18px}
.sec-block .menu-entries a{counter-increment:e;display:grid;grid-template-columns:26px minmax(0,1fr) 16px;align-items:baseline;gap:8px;padding:8px 0;border-top:1px solid var(--rule);font-family:var(--display);font-weight:600;font-size:15px;line-height:1.3}
.sec-block .menu-entries a::before{content:counter(e,decimal-leading-zero);font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-quiet)}
.sec-block .menu-entries a::after{content:"→";justify-self:end;font-family:var(--text);opacity:0;transition:opacity .12s}
.sec-block .menu-entries a:hover{background:var(--paper)}
.sec-block .menu-entries a:hover::after{opacity:1}
.sec-block .menu-entries a:last-child{border-bottom:1px solid var(--rule)}

/* four-problem run: pinned column count so the divider reset can be row-aware */
.four{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0}
@media(max-width:1150px){
  .four{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .prob:nth-child(2n+1){padding-left:0;border-left:none}
  .prob:nth-child(n+3){border-top:1px solid rgba(242,237,228,.28);padding-top:28px}
}
@media(max-width:900px){
  .four{grid-template-columns:minmax(0,1fr);row-gap:0}
  .prob,.prob:nth-child(n+3){padding:22px 0 0;border-left:none;border-top:1px solid rgba(242,237,228,.28)}
  .prob:first-child{padding-top:0;border-top:none}
}

/* ---- article rhythm furniture ---- */
.notes-band .wrap-in{max-width:1400px;margin:0 auto}
.notes-band .eyebrow{margin:0 0 6px}
.notes-band h2{margin:0 0 18px}
.statwrap{margin:34px 0}
.statwrap .eyebrow{margin:0 0 10px}
.statwrap .statrow{margin:0}
.stat-num.sm{font-size:24px;line-height:1.15}
.callout-list{margin:34px 0;background:var(--paper-deep);padding:24px 26px;border-left:3px solid var(--accent)}
.callout-list .eyebrow{margin:0 0 12px}
.callout-list .deflist dt:first-of-type{border-top:none;padding-top:0;margin-top:0}
.callout-list .deflist dt{font-size:17px}
.callout-list .deflist dd{font-size:16px}
.fig-in-col.tone{background:var(--paper-deep);padding:22px}
.fig-in-col.tone img{border-color:var(--ink)}
.art-facts-foot{margin:14px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-quiet)}
.art-facts dl{gap:0}
.art-facts dt{border-top:1px solid var(--rule);padding:9px 0 0;margin-top:9px}
.art-facts dt:first-of-type{border-top:2px solid var(--ink)}
.prose .pullquote{margin:38px 0}
.prose .fig-in-col,.prose .callout-list,.prose .statwrap{max-width:none}

/* ---- mobile pass ---- */
@media(max-width:700px){
  :root{--pad:20px}
  .mast{flex-direction:column;align-items:flex-start;gap:12px;padding:14px var(--pad)}
  .mast-nav{gap:6px 16px;font-size:15px}
  .mast-nav a{min-height:32px;display:flex;align-items:center}
  .mast-home{padding-top:20px}
  .mast-home .brand{gap:16px}
  .logo{width:84px;height:84px}
  .mast-home h1{font-size:clamp(38px,12vw,56px)}
  .hmenu-top{min-height:44px}
  .hmenu-sub a,.sec-block .menu-entries a,.menu-entries a{min-height:40px;display:flex;align-items:center}
  .sec-block .menu-entries a{display:grid;align-items:center}
  .prose{padding-inline:var(--pad)}
  .prose .dropcap::first-letter{font-size:42px;margin-right:8px}
  .art-head{padding:26px var(--pad) 0;gap:24px}
  .fig-bleed img,.fig-bleed img.diagram{height:44vh}
  .hero>img{height:46vh}
  .hero-plate{padding:20px 20px 18px}
  .figcap{padding:14px var(--pad) 0;gap:14px}
  .notes-band{padding:30px var(--pad) 34px;margin:34px 0}
  .callout-list{padding:18px 18px 18px 16px;margin:28px 0}
  .statrow{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .stat-num{font-size:32px}
  .fig-pair{gap:20px}
  .support{padding:28px var(--pad) 32px}
  .sponsor{height:76px}
  .foot{padding:32px var(--pad)}
  .related-links{gap:12px}
  .band,.band-quiet{padding:34px var(--pad) 38px}
  .band-deep{padding:34px var(--pad) 40px}
  .regcard a{gap:14px;padding:16px 0 18px}
  .reg td{padding-right:0}
  table.reg{display:block}
}
@media(max-width:380px){
  .mast-home h1{font-size:34px}
  .logo{width:64px;height:64px}
  .sec-block .menu-entries a{grid-template-columns:22px minmax(0,1fr) 14px;font-size:14px}
  .hmenu-sub{font-size:13px}
}

/* caption and credit are separate lines everywhere */
.fig-offset .cap,.fig-offset .credit,.fig-mat .cap,.fig-mat .credit,.fig-in-col .credit,.article-figure .credit{display:block}
.fig-offset .credit,.fig-mat .credit{margin-top:8px}
.fig-in-col.tone a,.tone a{color:var(--accent-deep)}

/* chart variants */
.chart.bar{display:block;height:auto}
.chart.bar svg{aspect-ratio:640/220;height:auto}
/* profile cards sit on the tinted ground */
.profile-card .p-role{color:var(--secondary-deep)}
.profile-card a{color:var(--accent-deep)}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* 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. */
.support-row .sponsor.sponsor img{height:52px!important;display:block!important;width:100%!important}

/* op-nav-collapse: this nav printed 911px of stacked links at 390 before any content
   (29 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 "bracket", 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 (20px measured) the button carries the build's
   gutter (56px) 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 "display" 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-inline:auto;justify-self:center;border:0;padding:10px 4px;letter-spacing:.2em;gap:12px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .index-toggle::before{content:"[";opacity:.55}
  .index-toggle::after{content:"]";opacity:.55}
  .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}
  .hmenu{display:none}
  .index-toggle-c:checked ~ .hmenu{display:grid}
  .index-toggle:not(:has(~ .hmenu)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1072px at 390, 12% of the whole page. Two columns bring it to
   688px (36% shorter). Checked before writing: no new overflow, smallest mark still
   137px wide, longest blurb 0 lines, tile heights 76-76px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.support-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){
  .support-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .support-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .support-row > * *{min-width:0!important;max-width:100%}
    .support-row img,.support-row svg{max-width:100%;height:auto}

}

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

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.fig-pair > figure.fig-mat > img,
  div.prose > figure.fig-in-col > img,
  div.wrap > figure.fig-offset > img,
  main > div.hero > img,
  main > figure.fig-bleed > img,
  main > figure.fig-bleed > img.diagram){height:auto}
/* op-img-dims:end */
@media (min-width:700px) and (max-width:919px){.support-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.support-row:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}
@media (max-width:899px){.hero-plate .tick.br{right:0!important}}