/* FTTH Conference — Street Cutaway. Palette: ground/ink/accent/secondary/paper */
:root{
  --ground:#E6E9EA;   /* page ground */
  --paper:#F7F8F8;    /* panels, mats */
  --ink:#13202B;      /* ink + the dark bands */
  --accent:#E8541F;   /* signal orange */
  --second:#0E8FA8;   /* glass cyan */
  --body:#2c3945; --quiet:#6c7883; --rule:#c9ced1; --tint:#dbeef2;
  --on-ink:#E6E9EA; --on-ink-2:#b9c3ca; --ink-rule:#3a4753;
  --sans:'Libre Franklin',system-ui,-apple-system,sans-serif;
  --serif:'Lora',Georgia,serif;
  --measure:44rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
p{margin:0}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;text-wrap:pretty;font-weight:800}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.wrap--text{max-width:1000px}
.ico{margin-right:2px;width:1.15em;height:1.15em;flex:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--second);display:flex;align-items:center;gap:8px}
.eyebrow--accent{color:var(--accent)}
.rule-mark{width:120px;height:3px;background:var(--accent);border:0;margin:0 0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--on-ink);padding:10px 14px;z-index:50}

/* ---------- masthead + nav ---------- */
.mast{border-bottom:1px solid var(--ink);background:var(--ground)}
.mast__row{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:flex-end;justify-content:space-between;padding:22px 0 18px}
.mast__brand{display:flex;align-items:center;gap:clamp(11px,1.4vw,16px)}
.mast__mark{width:clamp(44px,4.8vw,58px);height:auto;flex:none;color:var(--ink)}
.mast--slim .mast__mark{width:36px}
.mast__name{font-size:clamp(26px,3.4vw,34px);font-weight:800;line-height:1;letter-spacing:-.025em}
.mast__domain{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-top:7px}
.mast__line{font-family:var(--serif);font-size:15px;color:var(--body);max-width:44ch}
.mast__flag{display:inline-block;border:1px solid var(--accent);color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:4px 8px}
.mast--slim .mast__row{padding:14px 0 12px;align-items:center}
.mast--slim .mast__brand{display:flex;align-items:center;gap:clamp(11px,1.4vw,16px)}
.mast__mark{width:clamp(44px,4.8vw,58px);height:auto;flex:none;color:var(--ink)}
.mast--slim .mast__mark{width:36px}
.mast__name{font-size:22px}

.nav{border-top:1px solid var(--rule);background:var(--ground)}
.nav__inner{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.nav__sec{position:relative}
.nav__sec>a{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;padding:13px 12px;white-space:nowrap}
.nav__sec:first-child>a{padding-left:0}
.nav__sec[aria-current="true"]>a,.nav__sec>a:hover{background:var(--paper);box-shadow:inset 0 -3px 0 var(--accent);color:var(--ink)}
.nav__panel{position:absolute;left:0;top:100%;min-width:270px;background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--accent);padding:12px 16px 14px;display:none;z-index:30;box-shadow:0 18px 40px rgba(19,32,43,.16)}
.nav__sec::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.nav__sec:hover .nav__panel,.nav__sec:focus-within .nav__panel{display:block}
.nav__panel a{display:block;font-family:var(--serif);font-size:14.5px;padding:5px 0;border-bottom:1px solid rgba(201,206,209,.6)}
.nav__panel a:last-child{border-bottom:0}
.nav__util{display:flex;gap:0;margin-left:auto}
.nav__util a{font-size:13px;font-weight:600;color:var(--second);padding:13px 0 13px 16px;white-space:nowrap}
@media (max-width:900px){
  .nav__inner{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav__inner::-webkit-scrollbar{display:none}
  .nav__panel{display:none!important}
  .nav__util{margin-left:0}
  .nav__util a{padding-left:14px}
}

/* ---------- bands ---------- */
.band{padding:clamp(38px,5vw,58px) 0}
.band--tight{padding:clamp(26px,3vw,34px) 0}
.band--paper{background:var(--paper);border-top:1px solid var(--rule)}
.band--ink{background:var(--ink);color:var(--on-ink)}
.band--ink .eyebrow{color:var(--second)}
.band--ink a:hover{color:#f5a184}
.band__head{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between;border-bottom:2px solid currentColor;padding-bottom:12px;margin-bottom:26px}
.band__head h2{font-size:clamp(20px,2.4vw,24px);font-weight:700}
.band__more{font-size:13.5px;font-weight:600;color:var(--second)}

/* ---------- opener (figure treatment 1: bleed + plate) ---------- */
.opener{position:relative;background:var(--ink)}
.opener__img{width:100%;height:clamp(300px,46vw,620px);object-fit:cover}
.opener__plate{background:var(--paper);border-top:4px solid var(--accent);padding:clamp(22px,3vw,32px);max-width:760px;position:relative;margin-top:-90px}
@media (max-width:700px){.opener__plate{margin-top:0}}
.opener__plate h1{font-size:clamp(30px,5vw,54px);line-height:1.03;letter-spacing:-.022em;margin-top:14px}
.opener__deck{font-family:var(--serif);font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:var(--body);margin-top:14px}
.opener__cta{display:inline-block;margin-top:20px;font-size:15px;font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:2px}
.opener__cap{display:flex;justify-content:flex-end;padding-top:18px}
.opener__cap>div{max-width:420px}

/* ---------- captions / credits ---------- */
.cap{display:block;font-size:16px;font-weight:500;line-height:1.45;color:var(--ink)}
.band--ink .cap{color:var(--on-ink)}
.credit{display:block;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet);margin-top:7px}
.band--ink .credit{color:var(--on-ink-2)}

/* figure treatment 2: mat */
.fig-mat{margin:0;background:var(--paper);border:1px solid var(--rule);padding:clamp(12px,1.6vw,20px)}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{display:flex;gap:14px;padding-top:14px}
.fig-mat .num{flex:none;width:34px;border-top:2px solid var(--accent);padding-top:8px;font-size:11px;font-weight:700;color:var(--accent)}
/* figure treatment 3: strip on a rule */
.fig-strip{margin:0;border-top:2px solid var(--ink)}
.fig-strip__frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding-top:18px}
.fig-strip img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fig-strip figcaption{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;padding-top:12px}
.fig-strip figcaption .cap{max-width:70ch}
/* figure treatment 4: tinted section drawing */
.fig-tint{margin:0;background:var(--tint);border-top:3px solid var(--second);padding:18px 20px 20px}
.fig-tint>svg{display:block;width:100%;height:auto;aspect-ratio:320/150;color:var(--second)}
.fig-tint figcaption{padding-top:12px}
/* full-bleed interruption inside an article */
.fig-bleed{margin:0;position:relative}
.fig-bleed img{width:100%;height:clamp(240px,38vw,480px);object-fit:cover}
.fig-bleed figcaption{background:var(--paper);border-top:3px solid var(--accent);padding:18px 22px 20px;max-width:520px;margin-left:auto;margin-top:-1px}

/* ---------- the cutaway signature ---------- */
.cutaway{display:block;width:100%;height:auto;color:var(--on-ink)}
.cutaway text{font-family:var(--sans)}
.cutaway__legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px 22px;margin-top:26px;border-top:1px solid var(--ink-rule);padding-top:18px}
.cutaway__legend h3{font-size:15px;font-weight:700}
.cutaway__legend h3 a,.hub__item h3 a,.archive-group h2 a{display:flex;gap:9px;align-items:center}
.cutaway__legend p{font-family:var(--serif);font-size:14px;line-height:1.5;color:var(--on-ink-2);margin-top:6px}

/* ---------- cards / selection ---------- */
.lead-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,3vw,40px);align-items:start}
@media (max-width:900px){.lead-grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;height:100%}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card__kicker{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:12px}
.card h3{font-size:20px;font-weight:700;line-height:1.18;margin-top:7px;letter-spacing:-.014em;min-height:2.4em}
.card p{font-family:var(--serif);font-size:14.5px;line-height:1.5;color:var(--body);margin-top:7px}
.card--lead h3{font-size:clamp(24px,3vw,34px);min-height:0;letter-spacing:-.02em}
.card--lead p{font-size:17px}
.card--flat img{aspect-ratio:3/2}
.card__foot{margin-top:auto;padding-top:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,2.4vw,30px)}
.stack{display:flex;flex-direction:column;gap:22px}
.stack .row{display:grid;grid-template-columns:120px 1fr;gap:16px;border-top:1px solid var(--rule);padding-top:16px}
.stack .row img{aspect-ratio:3/2;object-fit:cover;width:100%}
.stack .row h3{font-size:18px;font-weight:700;line-height:1.2}
.stack .row p{font-family:var(--serif);font-size:14px;color:var(--body);margin-top:6px}

/* standing statement */
.statement{font-family:var(--serif);font-size:clamp(20px,2.6vw,32px);line-height:1.35;max-width:60ch;text-wrap:pretty}

/* ---------- sections hub ---------- */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,2.5vw,32px)}
.hub__item{border-top:2px solid var(--ink);padding-top:14px}
.hub__item h3{font-size:20px;font-weight:800;display:flex;align-items:center;gap:9px}
.hub__item p{font-family:var(--serif);font-size:14.5px;line-height:1.5;color:var(--body);margin-top:8px}
.hub__item ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.hub__item li a{font-size:14.5px;font-weight:500}
.hub__count{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-top:10px}

/* ---------- article ---------- */
.artmeta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--second)}
.artmeta .dash{width:24px;height:1px;background:var(--rule)}
.artmeta .plain{color:var(--quiet)}
.art h1{font-size:clamp(32px,5.4vw,60px);line-height:1.02;letter-spacing:-.028em;margin-top:16px}
.art__deck{font-family:var(--serif);font-size:clamp(17px,2vw,22px);line-height:1.45;color:var(--body);margin-top:16px;max-width:46ch}
.prose{max-width:var(--measure);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.prose>*+*{margin-top:20px}
.prose p{font-family:var(--serif);font-size:18px;line-height:1.68;color:#1e2a35}
.prose h2{font-size:clamp(21px,2.4vw,26px);font-weight:700;margin-top:38px;padding-top:14px;border-top:2px solid var(--ink)}
.prose h2 .n{color:var(--accent);font-size:13px;letter-spacing:.14em;display:block;margin-bottom:6px}
.prose ul{font-family:var(--serif);font-size:17.5px;line-height:1.6;padding-left:1.1em;margin:0}
.prose ul li+li{margin-top:8px}
.prose a{border-bottom:1px solid var(--second);padding-bottom:1px}
.prose a:hover{border-color:var(--accent)}
.interrupt{margin:clamp(32px,4vw,48px) 0}
.interrupt--wide{max-width:1000px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.pullquote{margin:clamp(32px,4vw,46px) auto;max-width:960px;padding-inline:clamp(20px,4vw,48px);border-left:4px solid var(--accent)}
.pullquote p{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);line-height:1.35;text-wrap:pretty}
.pullquote cite,.blockquote cite{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);font-style:normal;margin-top:12px}

/* notes-for-design material: the plate */
.plate{background:var(--ink);color:var(--on-ink);padding:clamp(24px,3vw,34px)}
.plate--paper{background:var(--paper);color:var(--ink);border-top:4px solid var(--second)}
.plate h3{font-size:clamp(19px,2.2vw,23px);font-weight:700;margin-top:10px}
.plate ol,.plate ul{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 30px;counter-reset:pl}
.plate li{counter-increment:pl;font-family:var(--serif);font-size:15.5px;line-height:1.5;border-top:1px solid var(--ink-rule);padding-top:12px}
.plate--paper li{border-top-color:var(--rule)}
.plate li::before{content:counter(pl,decimal-leading-zero);display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:6px}
.plate li b{font-weight:700;font-family:var(--sans);font-size:15px}

/* related + section index at the foot of an article */
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.further-grid a{border-top:2px solid var(--ink);padding-top:12px;font-size:18px;font-weight:700;line-height:1.22;display:flex;flex-direction:column;gap:8px}
.further-grid a span{font-family:var(--serif);font-size:14px;font-weight:400;color:var(--body);line-height:1.45}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.related-links li{border-top:1px solid var(--rule);padding-top:10px}
.related-links a{font-size:16px;font-weight:600;line-height:1.25}

/* ---------- category / archive lists ---------- */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:18px 0;align-items:start}
.cat-list img{width:120px;aspect-ratio:3/2;object-fit:cover}
.cat-list h3{font-size:clamp(19px,2.2vw,22px);font-weight:700;line-height:1.16}
.cat-list p{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--body);margin-top:6px;max-width:70ch}
@media (max-width:560px){.cat-list a{grid-template-columns:84px 1fr;gap:14px}.cat-list img{width:84px}}
.archive-group{border-top:2px solid var(--ink);padding-top:14px;margin-top:34px}
.archive-group h2{font-size:21px;font-weight:800;display:flex;align-items:center;gap:9px}

/* ---------- supporters strip ---------- */
.support{background:var(--ink);color:var(--on-ink);padding:clamp(28px,3.4vw,40px) 0 clamp(24px,3vw,32px)}
.support h2{font-size:19px;font-weight:700}
.support__intro{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--on-ink-2);max-width:62ch;margin-top:8px}
.support__group{margin-top:26px}
.support__label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--second);border-bottom:1px solid var(--ink-rule);padding-bottom:8px;margin-bottom:18px}
.support__row{display:flex;flex-wrap:wrap;gap:22px}
.sponsor{flex:0 0 calc(25% - 16.5px);display:flex;flex-direction:column;gap:10px}
@media (max-width:1080px){.sponsor{flex:0 0 calc(33.333% - 14.67px)}}
@media (max-width:800px){.sponsor{flex:0 0 calc(50% - 11px)}}
.sponsor img{width:100%;height:46px;max-height:46px;object-fit:contain;object-position:left center;background:#0b1620;border:1px solid var(--ink-rule);padding:8px 12px}
.sponsor-name{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--on-ink)}
.sponsor-blurb{font-family:var(--serif);font-size:13.5px;line-height:1.45;color:var(--on-ink-2);min-width:200px}
@media (max-width:460px){.sponsor{flex:0 0 100%}}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--on-ink-2);border-top:1px solid var(--ink-rule);padding:clamp(28px,3.4vw,36px) 0}
.foot__row{display:flex;flex-wrap:wrap;gap:26px 48px;justify-content:space-between}
.foot__name{font-size:20px;font-weight:800;color:var(--on-ink);letter-spacing:-.02em}
.foot p{font-family:var(--serif);font-size:13.5px;line-height:1.55;max-width:48ch;margin-top:8px}
.foot__links{display:grid;grid-template-columns:repeat(2,minmax(140px,auto));gap:6px 40px;font-size:13.5px}
.foot__links a{display:flex;align-items:center;gap:7px}

/* ---------- styleguide-only components (PALETTE_SPEC set) ---------- */
.lead{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--body)}
.callout{background:var(--paper);border-top:4px solid var(--second);padding:20px 22px;margin:0}
.callout p{font-family:var(--serif);font-size:17px;line-height:1.55}
.note{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--body);border-left:3px solid var(--rule);padding-left:14px}
.blockquote{margin:0;background:var(--paper);padding:22px 24px;border-left:4px solid var(--ink)}
.blockquote p{font-family:var(--serif);font-size:19px;line-height:1.45}
table.versus,table.datatable{width:100%;border-collapse:collapse;font-size:15.5px}
.versus caption,.datatable caption{text-align:left;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--quiet);padding-bottom:10px}
.versus th,.datatable th{text-align:left;background:var(--ink);color:var(--on-ink);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:10px 12px}
.versus td,.datatable td{font-family:var(--serif);border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);padding:12px;vertical-align:top;line-height:1.45}
.versus td:first-child,.datatable td:first-child{border-left:0;font-family:var(--sans);font-weight:700}
.tablewrap{overflow-x:auto}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}
.statblock{border-top:3px solid var(--accent);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.stat-num{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat-label{font-family:var(--serif);font-size:14px;line-height:1.4;color:var(--body)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:20px;border-top:1px solid var(--rule);padding:14px 0}
.t-when{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.t-what{font-family:var(--serif);font-size:16px;line-height:1.5}
@media (max-width:560px){.timeline li{grid-template-columns:1fr;gap:6px}}
.chart{margin:0}
.chart svg{width:100%;height:auto}
.chart figcaption{font-size:14px;color:var(--body);margin-top:10px;font-family:var(--serif)}
.article-figure{margin:0}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{border-top:2px solid var(--accent);padding-top:10px;margin-top:12px;font-size:16px;font-weight:500;line-height:1.45}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.gallery figure{margin:0}
.gallery img{aspect-ratio:1/1;object-fit:cover}
.gallery figcaption{font-size:13px;color:var(--quiet);margin-top:8px}
.profile-grid,.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.profile-card{background:var(--paper);border:1px solid var(--rule);padding:20px}
.profile-card .p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%;margin-bottom:12px}
.profile-card h3{font-size:19px}
.p-role{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--second);margin:6px 0 10px}
.profile-card p{font-family:var(--serif);font-size:15px;line-height:1.55}
.p-links{margin-top:12px;font-family:var(--sans)!important;font-size:14px!important;font-weight:600}
.p-attr{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet);margin-top:10px}
.org-card{display:flex;flex-direction:column;gap:8px;background:var(--ink);color:var(--on-ink);padding:16px 18px}
.org-logo{height:34px;max-height:34px;width:auto;object-fit:contain;object-position:left center}
.org-name{font-size:16px;font-weight:700}
.org-host{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-2)}
.entity-ref{font-weight:600;border-bottom:1px solid var(--second)}
.sg-block{border-top:2px solid var(--ink);padding-top:16px;margin-top:44px}
.sg-block>h2{font-size:22px;font-weight:800}
.sg-block>.credit{margin-bottom:20px}
.sg-narrow{max-width:360px;border:1px dashed var(--quiet);padding:16px;margin-top:20px}

/* ---------- locator rail: where the piece sits on the street ---------- */
.locator{background:var(--ink);color:var(--on-ink);padding:20px 0 22px}
.locator__label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--second);margin-bottom:14px}
.locator__rail{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.locator__stop{display:flex;flex-direction:column;gap:9px;min-width:0}
.locator__tick{height:3px;background:var(--ink-rule)}
.locator__stop.is-here .locator__tick{background:var(--accent)}
.locator__name{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--on-ink-2);line-height:1.2}
.locator__stop.is-here .locator__name{color:var(--on-ink);font-weight:700}
.locator__stop:hover .locator__name{color:#f5a184}
@media (max-width:760px){.locator__rail{grid-template-columns:repeat(3,1fr);gap:14px 10px}}
@media (max-width:430px){.locator__rail{grid-template-columns:repeat(2,1fr)}}
.interrupt+.interrupt{margin-top:clamp(24px,3vw,34px)}

/* micro-label floor: labels are authored in viewBox units, so below the breakpoint the
   dense homepage cutaway drops its labels (the legend under it carries the same information)
   and the sparser guide drawings hold a 9-unit floor that still fits their 320-unit box. */
@media (max-width:760px){
  .fig-tint>svg text{font-size:9px;letter-spacing:.8px}
  .cutaway text{display:none}
}

/* mobile: touch targets and in-chart labels */
@media (max-width:760px){
  .band__more,.hub__item h3 a,.related-links a,.archive-group p a,.p-links a,.mast__name a,.cutaway__legend h3 a{display:inline-flex;align-items:center;min-height:44px}
  .opener__cta,.artmeta a{display:inline-flex;align-items:center;min-height:44px}
  .cat-list a{padding:14px 0}
  .locator__stop{padding-bottom:6px}
  .chart svg text{font-size:24px}
  .foot__links a{min-height:40px}
  .nav__sec>a{padding-top:16px;padding-bottom:16px}
  .nav__util a{padding-top:16px;padding-bottom:16px}
}

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

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

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

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

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.support__row .sponsor.sponsor img{box-sizing:border-box!important;padding:8px 12px!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1439px at 390, 19% of the whole page. Two columns bring it to
   1007px (30% shorter). Checked before writing: no new overflow, smallest mark still
   167px wide, longest blurb 3 lines, tile heights 107-148px.
   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:22px!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 (7 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}
}

/* op-article-width: the article column was capped at 608px (73 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article.art div.prose{--measure:min(945px, 100%)!important}
}
@media (min-width:1600px){
  article.art div.prose{--measure:min(clamp(945px, 65.625vw, 1134px), 100%)!important}
  article.art div.prose > :is(p:not([class])){font-size:clamp(18px,1.2500vw,21.6px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; letter-spacing: -0.02em; text-wrap: pretty; font-weight: 800;}
.hub__item h2:where(.rt-h3){font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 9px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.art > figure.fig-bleed > img,
  div.cards > a.card.card--flat > img,
  div.interrupt > figure.fig-bleed > img,
  div.interrupt.interrupt--wide > figure.fig-mat > img,
  div.lead-grid > a.card.card--lead > img,
  div.lead-grid > figure.fig-mat > img,
  div.stack > a.row > img,
  figure.fig-strip > div.fig-strip__frames > img,
  li > a > img,
  main > figure.fig-bleed > img,
  main > section.opener > img.opener__img){height:auto}
/* op-img-dims:end */
.support__row > [data-partner] img{background:transparent!important}