/* cyndustries.com — The Bench / patchfield
   Ink is steel, paper is schematic grey, cables carry the sections. */

:root{
  --paper:#e4e8eb;
  --field:#edf0f2;
  --card:#f7f8f9;
  --ink:#223140;
  --ink-2:#2c3a48;
  --ink-3:#3c4b59;
  --muted:#5c6b79;
  --annot:#8494a1;
  --rule:rgba(34,49,64,.25);
  --rule-soft:rgba(34,49,64,.14);
  --sig:#bf4a2f;   /* Signal & Path */
  --mod:#c8951a;   /* Modulation */
  --pat:#35629f;   /* Patching */
  --rig:#5c6b79;   /* Building A Rig */
  --rep:#8494a1;   /* Repair & Calibration */
  --accent:var(--pat);
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --serif:'Newsreader',Georgia,serif;
  --gutter:clamp(18px,4vw,48px);
  --measure:720px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:inherit}
a:hover{opacity:.78}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
figure{margin:0}
table{border-collapse:collapse;width:100%}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:99}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:#e4e8eb}
.masthead .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block:16px}
.brand{font:600 19px/1 var(--mono);letter-spacing:.28em;text-decoration:none;color:#fff;white-space:nowrap}
.brand-note{font:italic 500 15px/1.3 var(--serif);color:#a7b3bf}
.mast-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 18px}
.mast-nav a{font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#c3ccd4;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.mast-nav a:hover{color:#fff;opacity:1}
.mast-nav a[aria-current]{color:#fff;border-bottom-color:currentColor}

/* section accent tinting */
.s-signal-path{--accent:var(--sig)}
.s-modulation{--accent:var(--mod)}
.s-patching{--accent:var(--pat)}
.s-building-a-rig{--accent:var(--rig)}
.s-repair-calibration{--accent:var(--rep)}

.eyebrow{font:600 10.5px/1.4 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.kicker{font:600 10.5px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.meta{font:500 12.5px/1.5 var(--mono);color:var(--muted)}
.band{padding-block:clamp(34px,5vw,58px);border-top:1px solid var(--rule)}
.band-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.band-head p{max-width:60ch;font-size:14.5px;color:var(--muted)}

/* ---------- hero ---------- */
.hero{position:relative;background:#141c25}
.hero img{width:100%;height:clamp(340px,52vw,620px);object-fit:cover;opacity:.9}
.hero-plate{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(18px,3vw,40px);max-width:720px;background:rgba(20,28,37,.88);padding:clamp(20px,3vw,32px);color:#e4e8eb}
.hero-plate h1{font:italic 500 clamp(30px,4.4vw,54px)/1.08 var(--serif);color:#fff}
.hero-plate .lead-x{margin-top:14px;font:400 clamp(15px,1.4vw,18px)/1.6 var(--sans);color:#c3ccd4}
.hero-plate .eyebrow{margin-bottom:12px;color:#e0a94a}

/* ---------- featured ---------- */
.featured{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,48px);align-items:start}
.featured .f-img{border:1px solid var(--rule);background:var(--card)}
.featured .f-img img{aspect-ratio:4/3;object-fit:cover;width:100%}
.featured h2{font:600 clamp(26px,3vw,40px)/1.1 var(--sans);margin:12px 0 16px}
.featured h2 a{text-decoration:none}
.f-dek{font:italic 400 clamp(17px,1.6vw,21px)/1.5 var(--serif);color:var(--ink-3)}
.f-body{margin-top:16px;color:var(--ink-3);font-size:16px}
.f-body p + p{margin-top:12px}
.readon{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:5px}

/* ---------- sponsors ---------- */
.supporters{background:var(--ink);color:#c3ccd4;padding-block:clamp(28px,4vw,44px)}
.supporters .band-head p{color:#8fa0ae}
.supporters .kicker{color:#e0a94a}
.sponsor-group + .sponsor-group{margin-top:18px}
.sponsor-group-label{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6e8090;margin-bottom:10px}
.sponsor-run{display:flex;flex-wrap:wrap;gap:12px}
.sponsor{flex:1 1 236px;min-width:0;display:flex;flex-direction:column;gap:12px;padding:18px 22px;background:#1a242e;border:1px solid rgba(228,232,235,.16);text-decoration:none;color:#c3ccd4}
.sponsor:hover{border-color:rgba(228,232,235,.4);opacity:1}
.sponsor img{height:44px;max-height:44px;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.sponsor-blurb{display:block;min-height:2em;font:400 12.5px/1.45 var(--sans);color:#8fa0ae;border-top:1px solid rgba(228,232,235,.16);padding-top:10px}
.sponsor.feat{flex:1 1 300px}
.sponsor.feat img{height:52px;max-height:52px}

/* ---------- recent (asymmetric) ---------- */
.recent{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,2.6vw,40px);align-items:start}
.recent-side{display:flex;flex-direction:column;gap:20px}
.rcard{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--rule);box-shadow:3px 3px 0 rgba(34,49,64,.1);text-decoration:none}
.rcard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.rcard .rc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.rcard h3{font:600 clamp(18px,1.7vw,23px)/1.3 var(--sans)}
.rcard p{font-size:14.5px;color:var(--ink-3)}
.rcard .meta{margin-top:auto;padding-top:6px}
.rcard.lead-card img{aspect-ratio:3/2}
.rcard.slim img{aspect-ratio:21/9}

/* ---------- signpost ---------- */
.signposts{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.signpost{flex:1 1 200px;min-width:0;background:var(--card);padding:20px 22px 22px;text-decoration:none;display:flex;flex-direction:column;gap:10px;min-height:180px}
.signpost:hover{background:#fff;opacity:1}
.sp-jack{display:flex;align-items:center;gap:9px}
.sp-jack span{width:13px;height:13px;border-radius:50%;background:var(--accent);flex:none}
.sp-jack em{font:500 10px/1 var(--mono);letter-spacing:.1em;font-style:normal;color:var(--annot)}
.signpost h3{font:600 19px/1.25 var(--sans)}
.signpost p{font-size:14px;color:var(--ink-3)}
.signpost .meta{margin-top:auto;font-size:11.5px}

/* ---------- the field (patchfield map) ---------- */
.field-legend{display:flex;flex-wrap:wrap;gap:16px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field-legend span{display:flex;align-items:center;gap:7px}
.field-legend i{width:20px;height:3px;display:block}
.fieldwrap{position:relative}
.field-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.field-toolbar button{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--card);border:1px solid var(--rule);padding:9px 12px;cursor:pointer}
.field-toolbar button:hover{border-color:var(--ink)}
.field-hint{font:400 11px/1.4 var(--mono);color:var(--annot)}
.is-live .field-hint-static{display:none}
.field{position:relative;border:1px solid var(--rule);background-color:var(--field);
  background-image:linear-gradient(rgba(34,49,64,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,49,64,.06) 1px,transparent 1px);
  background-size:24px 24px;overflow:hidden;--k:.90}
.field-scale{width:1232px;padding:26px;box-sizing:border-box;transform-origin:top left;transform:scale(var(--k))}
@media (max-width:1220px){.field{--k:.82}}
@media (max-width:1120px){.field{--k:.75}}
@media (max-width:1020px){.field{--k:.70}}
@media (max-width:960px){.field{--k:.66}}
.is-live .field{cursor:grab;touch-action:none}
.is-live .field.grabbing{cursor:grabbing}
.is-live .field-scale{transform:none;will-change:transform}
.node{transition:opacity .16s ease,box-shadow .16s ease,border-color .16s ease}
.has-focus .node{opacity:.22}
.has-focus .node.on{opacity:1}
.has-focus .node.root{border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(34,49,64,.2)}
.cables path{transition:opacity .16s ease,stroke-width .16s ease}
.has-focus .cables path{opacity:.12}
.has-focus .cables path.on{opacity:1;stroke-width:3.2}
.field-readout{margin-top:12px;border:1px solid var(--rule);border-left:4px solid var(--accent);background:var(--card);padding:16px 20px 18px}
.field-readout h3{font:600 20px/1.25 var(--sans);margin:6px 0 10px}
.field-readout dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.field-readout dt{font:600 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field-readout dd{margin:0;color:var(--ink-3)}
.field-readout dd a{color:var(--accent);text-underline-offset:3px}
.field-readout .none{color:var(--annot)}
.field-readout .ro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px}
.field-readout .readon{margin-top:0}
.field-readout button{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--rule);padding:9px 12px;cursor:pointer}
.field-readout button:hover{color:var(--ink);border-color:var(--ink)}
.field-caption{margin-top:10px;font:400 11px/1.5 var(--mono);color:var(--annot)}
.field-list{margin-top:14px;border-top:1px solid var(--rule)}
.field-list summary{cursor:pointer;list-style:none;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:14px 0}
.field-list summary::-webkit-details-marker{display:none}
.field-list summary::after{content:" ↓"}
.field-list[open] summary::after{content:" ↑"}
ul.field-fallback{margin-bottom:6px}
.field svg.cables{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.node{position:absolute;background:var(--card);border:1px solid var(--rule);box-shadow:2px 2px 0 rgba(34,49,64,.12);padding:12px 14px;text-decoration:none;display:flex;flex-direction:column;gap:7px}
.node:hover{border-color:var(--ink);opacity:1}
.node .n-title{font:600 14.5px/1.3 var(--sans);color:var(--ink)}
.node .n-jacks{font:400 10px/1 var(--mono);color:var(--annot);letter-spacing:.06em}
.node.wide{border-width:2px;border-color:var(--ink)}
.field-caption{margin-top:10px;font:400 11px/1.5 var(--mono);color:var(--annot)}
@media (max-width:900px){
  .field-toolbar{gap:6px}
  .field-toolbar button{padding:11px 13px}
  .field-readout dl{grid-template-columns:1fr;gap:2px 0}
  .field-readout dt{margin-top:8px}
}

/* ---------- article ---------- */
.jackhead{border:2px solid var(--ink);background:var(--card);box-shadow:4px 4px 0 rgba(34,49,64,.14);margin-top:clamp(24px,3vw,44px)}
.jh-top{padding:clamp(22px,3vw,34px) clamp(22px,3vw,38px) clamp(20px,2.4vw,28px);border-bottom:1px solid var(--rule)}
.jh-top h1{font:600 clamp(28px,3.8vw,46px)/1.08 var(--sans);margin:12px 0 14px}
.jh-top .dek{font:italic 400 clamp(17px,1.7vw,21px)/1.5 var(--serif);color:var(--ink-3);max-width:60ch}
.jh-top .meta{margin-top:16px}
.jh-jacks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.jh-jack{background:var(--card);padding:14px clamp(22px,3vw,38px) 16px;min-width:0}
.jh-jack .jl{display:flex;align-items:center;gap:8px;font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px}
.jh-jack .jl i{width:11px;height:11px;border-radius:50%;display:block}
.jh-in .jl{color:var(--sig)}
.jh-in .jl i{border:3px solid var(--sig)}
.jh-out .jl{color:var(--pat)}
.jh-out .jl i{background:var(--pat)}
.jh-jack ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--ink-3)}
.jh-jack a{text-underline-offset:3px}
.jh-in a{color:var(--sig)}
.jh-out a{color:var(--pat)}
.jh-jack .none{font:400 13px/1.5 var(--sans);color:var(--annot)}

.bench{display:grid;grid-template-columns:minmax(0,var(--measure)) 200px;column-gap:44px;justify-content:center;align-items:start;padding-block:clamp(26px,3vw,42px)}
.bench > .col{grid-column:1;min-width:0}
.bench > .note-col{grid-column:2;min-width:0}
.col > * + *{margin-top:22px}
.article-body p{font-size:18px;line-height:1.78;color:var(--ink-2)}
.article-body h2{font:600 clamp(21px,2.2vw,28px)/1.25 var(--sans);margin-top:6px}
.article-body h2::before{content:"";display:block;width:52px;height:3px;background:var(--accent);margin-bottom:14px}
.article-body h3{font:600 18px/1.3 var(--sans)}
.article-body a{color:var(--accent);text-underline-offset:3px}
.article-body ul,.article-body ol{padding-left:1.15em;display:flex;flex-direction:column;gap:8px;font-size:17px;color:var(--ink-2)}

.margin-note{border-top:2px solid var(--accent);padding-top:10px}
.margin-note + .margin-note{margin-top:22px}
.margin-note .mn-label{font:600 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.margin-note p,.margin-note li{font:400 11.5px/1.62 var(--mono);color:var(--annot)}
.margin-note ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.margin-note li{padding-left:11px;position:relative}
.margin-note li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--annot)}
.margin-note strong{color:var(--ink-3);font-weight:600}

/* full-bleed interruptions */
.bleed{background:var(--ink);color:#c3ccd4;padding-block:clamp(20px,2.4vw,32px);margin-block:clamp(8px,1.6vw,20px)}
.bleed img{width:100%;max-height:min(64vh,620px);object-fit:cover}
.bleed figcaption{max-width:var(--measure);margin:14px auto 0;font:400 12.5px/1.6 var(--mono);color:#8fa0ae;padding-inline:var(--gutter)}

/* bench panel (Notes-for-Design material, inline) */
.bench-panel{border:1px solid var(--rule);background:var(--field);padding:22px 24px 24px}
.bench-panel .bp-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bench-panel .bp-head i{width:11px;height:11px;border-radius:50%;background:var(--accent);flex:none}
.bench-panel .bp-head h3{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.bench-panel ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 26px}
.bench-panel li{font:400 14px/1.6 var(--sans);color:var(--ink-3);padding-left:16px;border-left:2px solid var(--rule)}
.bench-panel li strong{color:var(--ink);font-weight:600}

/* ---------- styleguide components ---------- */
.lead{font:italic 400 20px/1.55 var(--serif);color:var(--ink-3)}
.pullquote{margin:0;border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:24px 0;text-align:center}
.pullquote p{font:italic 500 clamp(22px,2.4vw,30px)/1.3 var(--serif);color:var(--ink)}
.blockquote{margin:0;border-left:3px solid var(--accent);padding:4px 0 4px 20px}
.blockquote p{font:italic 400 18px/1.6 var(--serif);color:var(--ink-2)}
.blockquote cite{display:block;margin-top:10px;font:500 12px/1.4 var(--mono);font-style:normal;color:var(--muted)}
.callout{background:var(--field);border:1px solid var(--rule);border-left:4px solid var(--accent);padding:18px 20px}
.callout p{font-size:16px;color:var(--ink-2)}
.note{font:400 13.5px/1.6 var(--mono);color:var(--muted);border-top:1px solid var(--rule);padding-top:10px}
.versus,.datatable{font-size:15px}
.versus th,.versus td,.datatable th,.datatable td{border:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top}
.versus th,.datatable th{background:var(--field);font:600 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.datatable td:not(:first-child),.versus td:not(:first-child){font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.statblock{background:var(--card);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font:600 34px/1 var(--sans);color:var(--accent);font-variant-numeric:tabular-nums}
.stat-label{font:400 12.5px/1.45 var(--mono);color:var(--muted)}
.timeline{list-style:none;border-left:2px solid var(--rule);padding-left:22px;display:flex;flex-direction:column;gap:18px}
.timeline li{position:relative;display:grid;gap:4px}
.timeline li::before{content:"";position:absolute;left:-29px;top:.35em;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--paper)}
.t-when{font:600 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.t-what{font-size:15.5px;color:var(--ink-2)}
.chart{border:1px solid var(--rule);background:var(--field);padding:18px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:12px;font:400 12px/1.55 var(--mono);color:var(--muted)}
.article-figure{border:1px solid var(--rule);background:var(--card)}
.article-figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-figure figcaption{padding:12px 16px 14px;font:400 12.5px/1.6 var(--mono);color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.gallery figure{border:1px solid var(--rule);background:var(--card)}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{padding:9px 12px 11px;font:400 11.5px/1.5 var(--mono);color:var(--muted)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.profile-card{border:1px solid var(--rule);background:var(--card);padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:64px;height:64px;object-fit:cover;border-radius:50%}
.profile-card h3{font:600 18px/1.3 var(--sans)}
.p-role{font:500 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.profile-card p{font-size:14.5px;color:var(--ink-3)}
.p-links{display:flex;flex-wrap:wrap;gap:12px;font:500 12.5px/1.4 var(--mono)}
.p-attr{font:400 11px/1.4 var(--mono);color:var(--annot)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.org-card{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;border:1px solid var(--rule);background:var(--card);padding:12px 14px;text-decoration:none}
.org-logo{grid-row:1 / 3;width:44px;height:44px;object-fit:contain}
.org-name{font:600 15px/1.3 var(--sans)}
.org-host{font:400 11.5px/1.4 var(--mono);color:var(--muted);word-break:break-word}
.org-card.no-logo{grid-template-columns:1fr}
.org-card.no-logo .org-name,.org-card.no-logo .org-host{grid-row:auto}
.entity-ref{font-weight:600;color:var(--accent);text-underline-offset:3px}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.further-grid a{border:1px solid var(--rule);background:var(--card);padding:16px 18px;text-decoration:none;font:600 16px/1.35 var(--sans);display:flex;align-items:flex-start;gap:10px;box-shadow:2px 2px 0 rgba(34,49,64,.1)}
.further-grid a::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--accent);flex:none;margin-top:5px}
.related-links{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.related-links li{border:1px solid var(--rule);background:var(--card)}
.related-links a{display:flex;flex-direction:column;gap:6px;padding:15px 18px 17px;text-decoration:none}
.related-links .rl-title{font:600 16px/1.35 var(--sans)}
.cat-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cat-list li{background:var(--card);display:flex}
.cat-list a{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px;text-decoration:none;width:100%}
.cat-list h3{font:600 19px/1.3 var(--sans)}
.cat-list p{font-size:14.5px;color:var(--ink-3)}
.cat-list .meta{margin-top:auto;padding-top:4px;font-size:11.5px}

/* expander for long lists */
.expander{margin-top:12px}
.expander summary{cursor:pointer;font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:10px 0;list-style:none}
.expander summary::-webkit-details-marker{display:none}
.expander summary::after{content:" ↓"}
.expander[open] summary::after{content:" ↑"}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#8fa0ae;margin-top:clamp(30px,4vw,56px)}
.site-foot .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;padding-block:34px}
.foot-stand{font:italic 500 20px/1.4 var(--serif);color:#e4e8eb;max-width:34ch}
.foot-disc{margin-top:12px;font:400 13px/1.6 var(--sans);max-width:52ch}
.foot-nav{display:flex;flex-direction:column;gap:8px}
.foot-nav a{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#c3ccd4;text-decoration:none}
.foot-rule{border-top:1px solid rgba(228,232,235,.16);padding-block:16px;font:400 11px/1.5 var(--mono);color:#6e8090}

/* ---------- page furniture ---------- */
.page-head{padding-block:clamp(28px,4vw,52px)}
.page-head h1{font:600 clamp(32px,4.4vw,54px)/1.05 var(--sans)}
.page-head .dek{margin-top:14px;font:italic 400 clamp(17px,1.8vw,22px)/1.5 var(--serif);color:var(--ink-3);max-width:56ch}
.crumbs{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:16px}
.crumbs a{text-decoration:none}
.prose{max-width:68ch}
.prose p + p{margin-top:18px}
.prose p{font-size:17.5px;line-height:1.75;color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .bench{grid-template-columns:minmax(0,1fr);column-gap:0}
  .bench > .note-col{grid-column:1}
  .margin-note{border-top:none;border-left:3px solid var(--accent);padding:2px 0 2px 16px;margin-top:4px}
  .margin-note p,.margin-note li{font-size:12.5px}
}
@media (max-width:860px){
  .featured,.recent{grid-template-columns:1fr}
  .site-foot .wrap{grid-template-columns:1fr}
  .jh-jacks{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .masthead .wrap{gap:12px;padding-block:12px}
  .brand-note{display:none}
  .mast-nav{margin-left:0;width:100%;gap:6px 14px}
  .sponsor{flex:1 1 100%}
  .article-body p{font-size:17px}
  .hero-plate{position:static;max-width:none;left:auto;right:auto}
  .hero img{height:230px}
  .bench-panel ul{grid-template-columns:1fr}
}
@media print{
  .masthead,.site-foot,.supporters,.field{display:none}
}

/* 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-run .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-run .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1626px at 390, 22% of the whole page. Two columns bring it to
   1191px (27% shorter). Checked before writing: no new overflow, smallest mark still
   122px wide, longest blurb 6 lines, tile heights 180-199px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-run), 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-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsor-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-run > * *{min-width:0!important;max-width:100%}
    .sponsor-run img,.sponsor-run svg{max-width:100%;height:auto}
}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 1425px of tier across
   11 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:68px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:68px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:68px!important;min-height:0!important;overflow:hidden!important}
}

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

/* op-grow-same-size: this tier grows by STRETCHING (flex rows, flex-grow) — one added tile would wrap onto a new row alone and stretch across the grid. Same minimum (236px), same columns at every width, but a short row keeps its siblings' size. Also straightens today's stretched short row — operator: "Same-size fix now" (2026-09-23, /pipeline/_money_grow_review.html). Phones keep their own rules. */
@media (min-width:641px){
  div.sponsor-group:nth-of-type(4) > div.sponsor-run{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(236px,1fr))!important}
}
/* op-grow-same-size:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; letter-spacing: -0.01em; text-wrap: balance;}
.signpost h2:where(.rt-h3){font: 600 19px/1.25 var(--sans);}
.cat-list h2:where(.rt-h3){font: 600 19px/1.3 var(--sans);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.featured > figure.f-img > img,
  div.recent > a.lead-card.rcard.s-signal-path > img,
  div.recent-side > a.rcard.s-building-a-rig.slim > img,
  div.recent-side > a.rcard.s-patching.slim > img,
  main > figure.bleed > img,
  main > section.hero > img){height:auto}
/* op-img-dims:end */