/* evos.net — Section A–A
   ground #F5F2EA · ink #14100E · accent (oxide red) #B3001B · secondary (blueprint) #3A5BFF · panel #EFEADD */
:root{
  --ground:#F5F2EA;
  --ink:#14100E;
  --accent:#B3001B;
  --secondary:#3A5BFF;
  --panel:#EFEADD;
  --rule:#C8C1B2;
  --muted:#5C554C;
  --ink-soft:#3D372F;
  --display:'Familjen Grotesk',system-ui,sans-serif;
  --body:'Spline Sans',system-ui,sans-serif;
  --mono:'Fragment Mono',ui-monospace,monospace;
  --gut:clamp(18px,4vw,36px);
  --measure:68ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--secondary);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-0.03em;line-height:1.05;margin:0}
::selection{background:var(--secondary);color:var(--ground)}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.rule-hair{height:1px;background:var(--rule);border:0;margin:0}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--secondary)}
.kicker--red{color:var(--accent)}
.ico{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-0.15em}

/* ---------- masthead : two visible tiers, no dropdown ---------- */
.masthead{border-bottom:3px solid var(--ink);background:var(--ground)}
.mast-top{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;padding:34px 0 22px}
.mast-brand{display:flex;align-items:center;gap:16px;color:var(--ink);font-size:clamp(44px,6.4vw,84px)}
.mast-brand:hover{text-decoration:none;color:var(--ink)}
.mast-brand svg{color:var(--accent)}
.mast-mark{width:auto;height:0.78em;margin-bottom:0}
.wordmark{font-family:var(--display);font-weight:700;font-size:clamp(44px,6.4vw,84px);line-height:0.78;letter-spacing:-0.045em}
.titleblock{max-width:44ch;font-family:var(--mono);font-size:12.5px;line-height:1.5;letter-spacing:0.01em;color:var(--muted);margin-bottom:9px}
.titleblock b{font-weight:400;color:var(--secondary)}
.nav-1{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule)}
.nav-1 a{display:flex;align-items:center;gap:12px;padding:15px 20px 15px 0;margin-right:26px;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-0.015em;color:var(--ink)}
.nav-1 .ico{width:1.5em;height:1.5em;stroke-width:1.5}
.nav-1 a:hover .ico{color:var(--accent)}
.nav-1 a:hover{color:var(--accent);text-decoration:none}
.nav-1 a[aria-current="page"]{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.nav-1 .nav-hub{margin-left:auto;margin-right:0;padding:15px 0;color:var(--secondary)}
.nav-1 .nav-hub .ico{width:30px;height:30px;stroke-width:1.4}
.nav-1 .nav-hub:hover .ico{color:var(--accent)}
.nav-2{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px;padding:18px clamp(16px,2vw,24px) 20px;margin-inline:calc(-1 * clamp(16px,2vw,24px));border-top:1px solid var(--rule);background:var(--panel)}
.nav-2 span{font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);padding-right:10px;border-right:1px solid var(--rule)}
.nav-2 a{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}

/* ---------- homepage bands ---------- */
.lead-band{position:relative;border-bottom:3px solid var(--ink)}
.lead-band img{width:100%;height:min(78vh,720px);object-fit:cover;filter:saturate(0.92);display:block}
.lead-plate{position:absolute;left:0;bottom:0;width:min(100%,880px);background:rgba(245,242,234,0.95);border-top:3px solid var(--accent);border-right:1px solid var(--ink);padding:26px 0 30px}
.lead-plate>.wrap{padding-right:clamp(24px,4vw,48px)}
.lead-plate h1{font-size:clamp(32px,4.8vw,64px);max-width:22ch}
.lead-plate .deck{max-width:60ch;font-size:clamp(17px,1.4vw,20px);color:var(--ink-soft);margin:16px 0 0}
.lead-meta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-bottom:16px}
.sec-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
.more{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:13px;border-bottom:1px solid var(--accent);padding-bottom:3px}

.drawing-band{padding:clamp(34px,5vw,68px) 0 0}
.drawing-grid{display:flex;flex-wrap:wrap;gap:34px 48px;align-items:flex-start}
.drawing-grid .draw{flex:1 1 560px;min-width:290px}
.drawing-grid aside{flex:1 1 300px;min-width:270px;max-width:400px}
.part-card{border:1px solid var(--ink);background:var(--panel);padding:20px}
.part-card h3{font-size:25px;margin:10px 0}
.part-card p{margin:0 0 14px;color:var(--ink-soft);font-size:15.5px}
.callout-hit{cursor:pointer;color:var(--ink)}
.callout-hit:hover,.callout-hit[data-on="1"]{color:var(--secondary)}

.sig-band{background:var(--accent);color:var(--ground);padding:clamp(30px,3.6vw,54px) 0;margin-top:clamp(34px,5vw,64px)}
.sig-band p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(23px,3vw,44px);line-height:1.1;letter-spacing:-0.03em;max-width:34ch}
.sig-band a{color:var(--ground);border-bottom:1px solid rgba(245,242,234,.55)}
.sig-band .kicker{color:rgba(245,242,234,.75)}

.seconds{display:flex;flex-wrap:wrap;gap:40px;margin-top:clamp(34px,5vw,64px);padding:clamp(32px,4.4vw,58px) 0;align-items:flex-start;background:var(--panel);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.seconds .big{flex:2 1 480px;min-width:300px}
.seconds .small{flex:1 1 260px;min-width:240px}
.seconds .big h3{font-size:clamp(27px,3vw,42px);margin:14px 0 12px}
.seconds .big{padding-right:clamp(0px,2vw,28px)}
.seconds .big .article-figure--plate>div{border-width:1px;background:var(--ground)}
.seconds .small{background:var(--ground);border:1px solid var(--ink);border-top-width:3px;border-top-color:var(--accent);padding:20px}
.seconds .small h3{font-size:21px;margin:10px 0 8px}
.seconds p{margin:0;color:var(--ink-soft);font-size:16px}

.shortlist{padding:clamp(40px,5.5vw,72px) 0 clamp(34px,4.5vw,60px)}
.shortlist ol{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.shortlist li{border-bottom:1px solid var(--rule)}
.shortlist a{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;padding:15px 0;color:var(--ink)}
.shortlist a:hover{color:var(--accent);text-decoration:none}
.shortlist .n{font-family:var(--mono);font-size:12.5px;color:var(--accent);flex:0 0 42px}
.shortlist .t{font-family:var(--display);font-weight:600;font-size:20px;flex:1 1 320px}
.shortlist .b{font-size:14.5px;color:var(--muted);flex:1 1 260px}

/* ---------- colophon / supporters ---------- */
.colophon{padding:clamp(40px,5vw,72px) 0 clamp(30px,4vw,50px)}
.colophon-head{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;border-bottom:3px solid var(--ink);padding-bottom:10px;margin-bottom:0}
.colophon-head h2{font-size:clamp(21px,2.2vw,30px)}
.colophon-head p{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.colophon-cols{display:flex;flex-wrap:wrap;gap:0 56px}
.sponsor-list{flex:1 1 420px;min-width:300px;display:flex;flex-direction:column}
.sponsor{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.sponsor:hover{text-decoration:none;color:var(--ink);background:rgba(58,91,255,.05)}
.sponsor img{flex:0 0 240px;width:240px;height:52px;object-fit:contain;background:var(--ink);padding:7px 12px}
.sponsor-txt{flex:1 1 240px;min-width:200px}
.sponsor-name{display:block;font-family:var(--display);font-weight:600;font-size:16px}
.sponsor-blurb{display:block;font-size:14px;line-height:1.45;color:var(--muted)}

/* ---------- site footer ---------- */
.foot{border-top:3px solid var(--ink);padding:24px 0 30px;background:var(--panel)}
.foot-grid{display:flex;flex-wrap:wrap;gap:16px 32px}
.foot-col{flex:1 1 170px;min-width:155px}
.foot-col h4{display:flex;align-items:center;gap:7px;font-size:13.5px;margin-bottom:5px}
.foot-col h4 .ico{width:1.05em;height:1.05em}
.foot-col a{display:block;font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--ink-soft)}
.foot-note{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--muted);max-width:70ch}

/* ---------- article ---------- */
.post-head{padding:clamp(26px,3.4vw,52px) 0 0}
.post-head h1{font-size:clamp(31px,4.4vw,60px);max-width:26ch}
.post-head .lead{max-width:56ch;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--ink-soft);font-family:var(--body);margin:20px 0 0}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin-bottom:18px}
.post-meta .sheet{font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;color:var(--muted)}
.post-body{max-width:var(--measure);margin:0;padding-block:6px}
.post-body p{margin:0 0 20px;font-size:17.5px;line-height:1.7}
.post-body h2{font-size:clamp(22px,2.3vw,31px);margin:38px 0 14px;padding-top:14px;border-top:1px solid var(--rule)}
.post-body ul{margin:0 0 20px;padding-left:20px}
.post-flow{display:flex;flex-wrap:wrap;gap:0 clamp(24px,4vw,64px);padding-bottom:40px}
.post-flow>.col{flex:1 1 620px;min-width:280px;max-width:820px}
.post-flow>.rail{flex:0 1 300px;min-width:240px}
.lead{font-family:var(--body)}
a.entity-ref{overflow-wrap:anywhere}

/* figures — one drawing system: paper mat, ink hairline, red caption kicker */
figure{margin:0}
.article-figure{margin:30px 0}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{padding-top:11px;font-family:var(--display);font-weight:500;font-size:16px;line-height:1.4;max-width:52ch}
.article-figure figcaption .credit{display:block;font-family:var(--mono);font-weight:400;font-size:12px;color:#7A7267;margin-top:6px;letter-spacing:0.02em}
/* 1 · plate: photograph on a paper mat */
.article-figure--plate>div{border:1px solid var(--ink);background:var(--panel);padding:11px}
.article-figure--plate figcaption{border-left:2px solid var(--accent);padding-left:12px;margin-top:12px}
/* 2 · bleed: breaks the measure, caption offset right */
.article-figure--bleed{margin:40px 0;width:100%}
.article-figure--bleed img{aspect-ratio:21/9;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.article-figure--bleed figcaption{margin-left:auto;max-width:46ch;text-align:left;padding-top:12px}
/* 3 · inset: sits in the column, prose beside it */
.article-figure--inset{float:left;width:min(46%,320px);margin:8px 26px 18px 0}
.article-figure--inset img{aspect-ratio:4/3;border:1px solid var(--ink)}
.article-figure--inset figcaption{font-size:14.5px;border-top:1px solid var(--rule);margin-top:9px;padding-top:8px}
/* 4 · drawn plate (inline svg diagrams) */
.draw-figure{margin:34px 0;border:1px solid var(--ink);background:var(--panel);padding:14px}
.draw-figure svg{width:100%;height:auto;display:block}
.draw-figure figcaption{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding-top:10px}

/* ---------- components ---------- */
.pullquote{margin:32px 0;padding:20px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.pullquote p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(21px,2.2vw,30px);line-height:1.2;letter-spacing:-0.02em}
.blockquote{margin:30px 0;padding-left:20px;border-left:3px solid var(--secondary)}
.blockquote p{margin:0 0 8px;font-size:18px}
.blockquote cite{font-family:var(--mono);font-size:12.5px;font-style:normal;color:var(--muted)}
.callout{margin:30px 0;background:var(--ink);color:var(--ground);padding:22px 24px}
.callout p{margin:0;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.35}
.note{margin:24px 0;font-size:15px;color:var(--muted);border-left:2px solid var(--rule);padding-left:14px}
.plate{margin:32px 0;border:1px solid var(--ink);background:var(--panel)}
.plate>.plate-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:12px 18px;border-bottom:1px solid var(--ink);background:var(--ground)}
.plate>.plate-head h3{font-size:18px}
.plate>.plate-head .kicker{color:var(--accent)}
.plate-body{padding:16px 18px}
.timeline{list-style:none;margin:0;padding:0;counter-reset:t}
.timeline li{display:flex;flex-wrap:wrap;gap:4px 18px;padding:11px 0;border-bottom:1px solid var(--rule)}
.timeline li:last-child{border-bottom:0}
.timeline .t-when{flex:0 0 190px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--accent);text-transform:uppercase;letter-spacing:0.06em}
.timeline .t-what{flex:1 1 260px;font-size:15.5px;line-height:1.5}
.datatable,.versus{width:100%;border-collapse:collapse;font-size:15.5px;margin:26px 0}
.datatable th,.versus th{text-align:left;font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);padding:10px 12px 10px 0;border-bottom:2px solid var(--ink)}
.datatable td,.versus td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.versus td+td,.versus th+th{padding-left:14px}
.statrow{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0}
.statblock{flex:1 1 150px;min-width:140px;border:1px solid var(--ink);padding:14px 16px;background:var(--ground)}
.stat-num{display:block;font-family:var(--display);font-weight:700;font-size:38px;line-height:1;letter-spacing:-0.04em;color:var(--accent)}
.stat-label{display:block;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--muted);margin-top:8px}
.chart{margin:30px 0}
.chart svg{width:100%;height:auto;color:var(--ink)}
.chart figcaption{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding-top:8px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:30px 0}
.gallery figure img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--ink)}
.gallery figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:7px}
.profile-grid{display:flex;flex-wrap:wrap;gap:18px;margin:28px 0}
.profile-card{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;border:1px solid var(--ink);background:var(--panel);padding:16px}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:12px}
.profile-card h3{font-size:19px}
.profile-card .p-role{font-family:var(--mono);font-size:12px;color:var(--accent);margin:6px 0 10px}
.profile-card p{margin:0 0 10px;font-size:15px;color:var(--ink-soft)}
.profile-card .p-links{margin-top:auto;font-family:var(--mono);font-size:12.5px}
.profile-card.no-photo{border-left:4px solid var(--secondary)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:26px 0}
.org-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--rule);background:var(--ground);padding:13px 15px;color:var(--ink)}
.org-card:hover{border-color:var(--ink);text-decoration:none}
.org-logo{width:100%;max-width:150px;height:34px;object-fit:contain}
.org-name{font-family:var(--display);font-weight:600;font-size:16px}
.org-host{font-family:var(--mono);font-size:12px;color:var(--muted)}
.entity-ref{border-bottom:1px solid var(--rule)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:3px solid var(--ink);margin:40px 0 0}
.further-grid a{display:flex;min-height:100px;flex-direction:column;justify-content:space-between;gap:10px;padding:16px 18px 18px 0;border-bottom:1px solid var(--rule);color:var(--ink);font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2}
.further-grid a:hover{color:var(--accent);text-decoration:none}
.related-links{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--ink)}
.related-links li{border-bottom:1px solid var(--rule)}
.related-links a{display:flex;gap:12px;align-items:baseline;padding:12px 0;color:var(--ink);font-family:var(--display);font-weight:600;font-size:18px}
.related-links a:hover{color:var(--accent);text-decoration:none}

/* ---------- category + hub ---------- */
.cat-head{padding:clamp(28px,3.6vw,56px) 0 0;display:flex;flex-wrap:wrap;gap:20px 44px;align-items:flex-end}
.cat-head h1{flex:1 1 480px;font-size:clamp(32px,4.4vw,58px);max-width:24ch}
.cat-head p{flex:1 1 300px;max-width:46ch;margin:0;font-size:17px;color:var(--ink-soft)}
.cat-list{list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0;border-top:3px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:flex;flex-wrap:wrap;gap:6px 28px;padding:20px 0;color:var(--ink)}
.cat-list a:hover{color:var(--accent);text-decoration:none}
.cat-list .n{flex:0 0 54px;font-family:var(--mono);font-size:12.5px;color:var(--accent);padding-top:5px}
.cat-list .t{flex:1 1 380px;font-family:var(--display);font-weight:700;font-size:clamp(21px,2.2vw,29px);line-height:1.12;letter-spacing:-0.02em}
.cat-list .b{flex:1 1 300px;max-width:52ch;font-size:15.5px;color:var(--ink-soft)}
.hub-sec{padding:clamp(30px,4vw,56px) 0 0}
.hub-sec h2{display:flex;align-items:center;gap:12px;font-size:clamp(23px,2.4vw,33px);border-bottom:1px solid var(--ink);padding-bottom:10px}
.hub-sec h2 .kicker{margin-left:auto}

/* ---------- narrow ---------- */
@media (max-width:820px){
  .article-figure--inset{float:none;width:100%;margin:26px 0}
  .sponsor img{flex:0 0 200px;width:200px;height:46px}
  .nav-1 a{padding:11px 14px 11px 0;margin-right:16px;font-size:17px}
}
@media (max-width:640px){
  .lead-plate{position:static;width:100%;border-right:0}
  .lead-band img{height:min(46vh,360px)}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .post-body p{font-size:17px}
  .sponsor{gap:10px}
  .sponsor img{flex:1 1 100%;width:100%;max-width:280px}
  .timeline .t-when{flex:1 1 100%}
}
@media print{ .nav-1,.nav-2,.colophon{display:none} }

/* additions */
.profile-card .p-attr{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:0}
.org-card.no-logo{border-left:4px solid var(--accent)}
.org-card.no-logo .org-name{font-size:17px}
.chart text{font-family:var(--mono);font-size:12px;fill:var(--muted)}
.sg-sec{padding:34px 0 8px;border-top:3px solid var(--ink);margin-top:34px}
.sg-sec>h2{font-size:26px;margin-bottom:6px}
.sg-sec>p.sg-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 18px}

/* floats never collide with plates, drawings or heads */
.post-body h2,.plate,.draw-figure,.article-figure--plate,.article-figure--bleed,.datatable,.versus,.related-links,.further-grid{clear:both}

/* ---------- palette at size: dark plate, blueprint band, dark colophon ---------- */
.lead-plate{background:rgba(20,16,14,0.92);border-top:4px solid var(--accent);border-right:1px solid var(--ink)}
.lead-plate h1{color:var(--ground)}
.lead-plate .deck{color:#CFC9C0}
.lead-plate .sec-tag{color:var(--ground)}
.lead-plate .sec-tag .ico{color:#FF7A6A}
.lead-plate .lead-meta span{color:#9A938A !important}
.lead-plate .more{color:var(--ground);border-bottom-color:var(--ground)}
.lead-plate .more:hover{color:#FF7A6A;border-bottom-color:#FF7A6A;text-decoration:none}

.drawing-band{background:#E9ECFF;border-top:1px solid var(--secondary);border-bottom:1px solid var(--secondary);padding-bottom:clamp(30px,4vw,54px)}
.drawing-band aside .kicker{border-bottom-color:var(--secondary) !important;color:var(--ink)}
.part-card{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.part-card h3{color:var(--ground)}
.part-card p{color:#C6C0B7}
.drawing-band aside .part-card .kicker--red{color:#FF7A6A}
.part-card .more{color:var(--ground);border-bottom-color:#FF7A6A}
.part-card .more:hover{color:#FF7A6A;text-decoration:none}

.shortlist ol{border-top-color:var(--secondary)}
.shortlist .n{color:var(--secondary)}
.shortlist a:hover{background:#E9ECFF}
.shortlist .b{color:var(--secondary)}

.colophon{background:var(--ink);color:var(--ground);margin-top:0;padding-inline:0}
.colophon .colophon-head{border-bottom-color:var(--ground)}
.colophon .colophon-head h2{color:var(--ground)}
.colophon .colophon-head p{color:#9A938A}
.colophon .sponsor{border-bottom-color:rgba(245,242,234,0.18);color:var(--ground)}
.colophon .sponsor:hover{background:rgba(58,91,255,0.16);color:var(--ground)}
.colophon .sponsor img{background:#0B0908;outline:1px solid rgba(245,242,234,0.16)}
.colophon .sponsor-blurb{color:#ADA69C}

/* seconds band — given structure */
.seconds{display:block}
.seconds-head{display:flex;align-items:center;gap:14px;padding-bottom:14px}
.seconds-head .seconds-rule{flex:1 1 auto;height:1px;background:var(--ink)}
.seconds-body{display:flex;flex-wrap:wrap;gap:0 clamp(28px,4vw,56px);align-items:stretch}
.seconds-body .big{flex:2 1 460px;min-width:300px;display:flex;flex-wrap:wrap;gap:22px clamp(20px,3vw,34px);padding-bottom:8px}
.seconds-body .plate-fig{position:relative;flex:1 1 260px;min-width:240px}
.seconds-body .plate-fig .article-figure{margin:0}
.seconds-body .plate-no{position:absolute;left:0;top:0;z-index:2;background:var(--accent);color:var(--ground);font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;padding:5px 10px}
.seconds-body .big-txt{flex:1 1 300px;min-width:260px;position:relative;padding-top:2px}
.seconds-body .hang{display:block;font-family:var(--mono);font-size:12.5px;color:var(--accent);margin-bottom:8px}
.seconds-body .small{flex:1 1 250px;min-width:230px;border-left:1px solid var(--ink);padding:20px 0 20px 22px;background:transparent;border-top:0;border-right:0;border-bottom:0}
.seconds-body .small h3{margin:10px 0 8px}
.seconds-body .small .mini{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--rule)}
.seconds-body .small .mini li{border-bottom:1px solid var(--rule)}
.seconds-body .small .mini a{display:block;padding:9px 0;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.seconds-body .small .mini a:hover{color:var(--accent);text-decoration:none}
@media (max-width:760px){ .seconds-body .small{border-left:0;border-top:1px solid var(--ink);padding:20px 0 0} }

/* shortlist as a 2x2 of plates */
.sl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 18px;padding-bottom:22px}
.sl-head h2{font-size:clamp(21px,2.2vw,30px)}
.sl-head .sl-rule{flex:1 1 auto;height:3px;background:var(--secondary)}
.sl-head a{font-family:var(--mono);font-size:12.5px}
.sl-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(30px,4vw,64px);row-gap:0;background:none;border:0;border-top:1px solid var(--ink)}
@media (max-width:700px){ .sl-grid{grid-template-columns:1fr} }
.sl-head .sl-rule{background:var(--ink)}
.sl-card{display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;align-items:start;column-gap:14px;row-gap:10px;padding:22px 0 24px;border-bottom:1px solid var(--rule);background:none;color:var(--ink)}
.sl-card:hover{text-decoration:none;color:var(--accent)}
.sl-card:hover .sl-n{color:var(--accent)}
.sl-n{grid-area:1 / 1 / 3 / 2;font-family:var(--mono);font-size:12.5px;color:var(--secondary);padding-top:5px}
.sl-t{grid-area:1 / 2 / 2 / 3;min-height:2.32em;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.7vw,23px);line-height:1.16;letter-spacing:-0.02em;max-width:30ch}
.sl-s{grid-area:2 / 2 / 3 / 3;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}

/* proper footer: brand block, columns, bottom bar */
.foot-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;padding-bottom:20px;border-bottom:1px solid var(--rule);margin-bottom:20px}
.foot-brand{display:flex;align-items:center;gap:11px;color:var(--accent);text-decoration:none}
.foot-brand span{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-0.04em;color:var(--ink)}
.foot-brand:hover{text-decoration:none}
.foot-blurb{flex:1 1 380px;max-width:62ch;margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.foot-hub{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--secondary)}
.foot-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:22px;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.foot-bar nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-bar a{color:var(--muted)}
.foot-bar a:hover{color:var(--accent)}

/* the drawing reads as interactive */
.callout-hit{cursor:pointer;transition:color .12s ease}
.callout-hit:hover,.callout-hit[data-on="1"]{color:var(--accent)}
.callout-hit .cue circle{fill:var(--ground);transition:fill .12s ease}
.callout-hit:hover .cue circle,.callout-hit[data-on="1"] .cue circle{fill:var(--accent);stroke:var(--accent)}
.callout-hit:hover .num,.callout-hit[data-on="1"] .num{fill:var(--ground)}
.callout-hit:hover g,.callout-hit[data-on="1"] g{stroke-width:2.4}
.callout-hit:hover .cue,.callout-hit[data-on="1"] .cue{stroke-width:1.4}
.draw-hint{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:var(--secondary)}

/* four more — a full-bleed contact strip of plates */
.strip{padding:clamp(40px,5.5vw,74px) 0 0}
.strip-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px;padding-bottom:20px}
.strip-head h2{font-size:clamp(21px,2.2vw,30px)}
.strip-head .strip-rule{flex:1 1 60px;height:3px;background:var(--ink)}
.strip-head a{font-family:var(--mono);font-size:12.5px}
.strip-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
.strip-cell{position:relative;display:block;overflow:hidden;background:var(--ink);border-right:1px solid rgba(245,242,234,0.25);color:var(--ground)}
.strip-cell:last-child{border-right:0}
.strip-cell img{width:100%;height:100%;min-height:340px;object-fit:cover;filter:grayscale(0.35) contrast(1.05);transition:filter .2s ease,transform .3s ease}
.strip-cell:hover{text-decoration:none;color:var(--ground)}
.strip-cell:hover img{filter:grayscale(0) contrast(1);transform:scale(1.03)}
.strip-no{position:absolute;left:0;top:0;background:var(--accent);color:var(--ground);font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;padding:6px 11px}
.strip-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:10px;padding:22px 20px;background:linear-gradient(to top,rgba(20,16,14,0.97) 0%,rgba(20,16,14,0.92) 62%,rgba(20,16,14,0) 100%)}
.strip-s{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;white-space:nowrap;background:var(--accent);color:var(--ground);font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;padding:5px 9px}
.strip-t{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.35vw,21px);line-height:1.16;letter-spacing:-0.02em}
@media (max-width:900px){ .strip-row{grid-template-columns:repeat(2,1fr)} .strip-cell:nth-child(2){border-right:0} .strip-cell img{min-height:300px} }
@media (max-width:520px){ .strip-row{grid-template-columns:1fr} .strip-cell{border-right:0;border-bottom:1px solid rgba(245,242,234,0.25)} .strip-cell img{min-height:250px} }

/* ---------- narrow screens: the two nav tiers become scroll rows ---------- */
@media (max-width:640px){
  .mast-top{padding:18px 0 10px;gap:10px 18px}
  .mast-brand{font-size:46px;gap:12px}
  .wordmark{font-size:44px}
  .nav-1{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-1::-webkit-scrollbar{display:none}
  .nav-1 a{flex:0 0 auto;white-space:nowrap;font-size:15.5px;gap:8px;padding:11px 0;margin-right:20px}
  .nav-1 .ico{width:1.3em;height:1.3em}
  .nav-1 .nav-hub{position:sticky;right:0;margin-left:6px;padding:11px 0 11px 12px;background:linear-gradient(90deg,rgba(245,242,234,0),var(--ground) 45%)}
  .nav-1 .nav-hub .ico{width:24px;height:24px}
  .nav-2{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:11px clamp(16px,2vw,24px) 12px;gap:0 20px}
  .nav-2::-webkit-scrollbar{display:none}
  .nav-2 span,.nav-2 a{flex:0 0 auto;white-space:nowrap}
  .colophon-cols{gap:0}
  .seconds-body .big{gap:18px}
}

/* 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}
.colophon-head > .sponsor{flex:1 1 0!important;min-width:0!important}
.colophon-cols > .sponsor{flex:1 1 0!important;min-width:0!important}
.sponsor-list > .sponsor{flex:0 0 auto!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:start!important;flex-wrap:nowrap!important;align-items:center!important;height:auto!important;min-height:0!important}
.sponsor{padding:16px 16px!important}
.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:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}

/* sp-grid-stretch: fixed pixel tracks left the container part-empty. */
.strip-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!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}


/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.cat-head{padding-inline:var(--gut)}
}

/* op-money-cutoff: at 320 the list carries min-width:300px, 16px more than the 284px available at 320. Structural only — no spacing value of mine: the mark is
   held to the box it is given, the column is allowed to shrink, or the tile is measured
   border-box. Trialled before writing: the cut-off is gone, no new overflow, the smallest mark
   still measures over 70px. Phone widths only; 390 and desktop are untouched. */
@media (max-width:360px){
  .sponsor-list{min-width:0!important;max-width:100%!important}
}

/* op-edge-gutter: copy sat against the screen edge at phone width — div.wrap, p.kicker.kicker--red, div.wrap > h1 — with no gutter at all
   (46 runs of text measured within 2px of the glass; 46 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 18px IS NOT MINE: it is the gutter this build already uses on its own full-width
   containers at the same width, taken as the median of them. Only the columns that TOUCH are
   padded — operator, on kaanet: "Only items needed padding are the ones touching edges of
   browsers ... Not globally." Phone widths only. */
@media (max-width:390px){
  div.wrap{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  p.kicker.kicker--red{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  div.wrap > h1{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  div.wrap > p{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  nav.further-grid > a{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
}

/* op-page-overflow: at 390 this page was 28px too wide from two separate things, neither of which
   an element rect shows — both are TEXT spilling out of its own box.
   1. The money tile is a row with a 280px mark that cannot shrink, which left the brand copy a
      32px-wide box: its sentences ran 40-50px past the screen. The row is allowed to WRAP on
      phones, so the copy drops beneath the mark only when there is no room beside it; desktop
      keeps Design's side-by-side exactly.
   2. The colophon links are white-space:nowrap, so "Seven years, one spec" reached x=462.
   Structural only — no spacing value of mine. Phone widths only. */
@media (max-width:400px){
  .sponsor-list > .sponsor{flex-wrap:wrap!important}
  .sponsor-list > .sponsor > .sponsor-txt{flex-basis:100%!important;min-width:0!important}
  .colophon-cols a{white-space:normal!important;overflow-wrap:anywhere}
}

/* 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.post-meta{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  div.wrap.post-head{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  div.wrap.post-head div.post-meta{padding-left:0;padding-right:0}
}
@media (min-width:901px) and (max-width:1399px){
  div.wrap.cat-head{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.col.post-body > figure.article-figure.article-figure--inset > img,
  div.strip-row > a.strip-cell > img,
  div.wrap > figure.article-figure.article-figure--bleed > img,
  figure.article-figure.article-figure--plate > div > img,
  main > section.lead-band > img){height:auto}
/* op-img-dims:end */
@media (min-width:800px) and (max-width:979px){.sponsor-list:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))!important;gap:var(--sp-gap,14px)!important;justify-content:start!important}.sponsor-list:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}.sponsor-list > [data-partner] img{background:transparent!important}