/* nylofthostel.com — "Underneath"
   Palette (3 saturated-capable members + ground/paper):
   --ground  #0C1114  site ground (dark)
   --ink     #EDE7DA  ink on ground
   --paper   #EDE7DA  inverted panel ground
   --accent  #D9412A  red-lead: areas, fills, rules
   --accent-lit #E85539 accent at text sizes on the dark ground
   --secondary #0A5F79 harbour blue: a second real area
*/

:root{
  --ground:#0C1114;
  --ink:#EDE7DA;
  --paper:#EDE7DA;
  --accent:#D9412A;
  --accent-lit:#E85539;
  --secondary:#0A5F79;
  --hair:rgba(237,231,218,.20);
  --hair-strong:rgba(237,231,218,.42);
  --dim:rgba(237,231,218,.62);
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --text:'Spectral',Georgia,'Times New Roman',serif;
  --pad:clamp(20px,5vw,74px);
  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:19px;line-height:1.62;
  text-wrap:pretty;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:var(--accent-lit);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.06;margin:0}
strong{font-weight:600}
figure{margin:0}
table{border-collapse:collapse}

.wrap{padding-inline:var(--pad)}
.hair{border:0;border-top:1px solid var(--hair);margin:0}
.kicker{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lit)}
.eyebrow{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.ico{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.ico-lg{width:52px;height:52px;stroke-width:1.3}

/* ---------- masthead ---------- */
.masthead{padding:26px var(--pad) 0}
.mast-top{display:flex;align-items:flex-start;justify-content:space-between;gap:36px;flex-wrap:wrap}
.mast-name{display:flex;align-items:center;gap:20px;text-decoration:none;color:inherit}
.mast-mark{width:clamp(58px,7.2vw,102px);height:clamp(58px,7.2vw,102px);flex:none;color:var(--accent);stroke:currentColor;fill:none}
.mast-word{display:block;font-family:var(--display);font-weight:800;font-size:clamp(38px,5.6vw,86px);line-height:.86;letter-spacing:-.045em;color:var(--ink)}
.mast-line{display:block;font-size:15px;font-style:italic;color:var(--dim);margin-top:10px}
.mast-nav{display:flex;flex:1 0 100%;justify-content:center;flex-wrap:wrap;gap:4px clamp(14px,2.3vw,38px);border-top:1px solid var(--hair);margin-top:18px;padding:13px 0 11px}
.mast-nav a{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:7px 0;border-bottom:2px solid transparent}
.mast-nav a:hover,.mast-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.mast-nav a:nth-child(1) .ico{color:#E85539}
.mast-nav a:nth-child(2) .ico{color:#3FA8C8}
.mast-nav a:nth-child(3) .ico{color:#E8A33A}
.mast-nav a:nth-child(4) .ico{color:#D9578F}
.mast-nav a:nth-child(5) .ico{color:#5FBF9A}
.mast-nav a:nth-child(6) .ico{color:rgba(237,231,218,.55)}
.mast-nav .ico{width:1.25em;height:1.25em}
.masthead>.hair{margin-top:16px}

/* ---------- generic band rhythm ---------- */
.band{padding:clamp(44px,6vw,96px) var(--pad)}
.band--paper{background:var(--paper);color:var(--ground)}
.band--paper a{color:#A32B18}
.band--paper a:hover{color:var(--ground)}
.band--sea{background:var(--secondary);color:#F4F1EA}
.band--sea a{color:#F4F1EA}
.band--tight{padding-block:clamp(28px,3.4vw,52px)}
.band-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.band-title{font-size:clamp(25px,3vw,44px);max-width:34ch}
.band--paper .kicker{color:#A32B18}
.band--paper .eyebrow,.band--sea .eyebrow{color:currentColor;opacity:.7}

/* ---------- opener ---------- */
.opener{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;isolation:isolate}
.opener img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.opener::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,17,20,.95) 0,rgba(12,17,20,.62) 42%,rgba(12,17,20,.08) 100%)}
.opener-inner{padding:clamp(40px,7vw,88px) var(--pad);width:100%}
.opener h1{font-size:clamp(36px,6.2vw,104px);line-height:.94;letter-spacing:-.04em;max-width:21ch;margin:14px 0 0}
.opener .lede{font-size:clamp(18px,1.5vw,23px);line-height:1.5;color:rgba(237,231,218,.86);max-width:56ch;margin:20px 0 0}
.opener .go{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:5px}
.opener .credit{margin-top:28px}
.opener h1,.opener .lede,.opener .quiet,.opener .credit{text-shadow:0 2px 20px rgba(8,11,13,.8),0 1px 3px rgba(8,11,13,.65)}
/* the kicker is the top line of a bottom-aligned block, so it can land high in the
   scrim on a light photograph — give it its own opaque plate instead of dimming the frame */
.opener .kicker{background:var(--ground);color:var(--accent-lit);width:max-content;max-width:100%;padding:7px 12px;margin-left:-12px}

/* ---------- the five places ---------- */
.places{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.3fr);gap:14px}
.place{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none}
/* section colour keyed to the same order everywhere the five are listed */
.places .place:nth-child(1){--sec:#E85539}
.places .place:nth-child(2){--sec:#3FA8C8}
.places .place:nth-child(3){--sec:#E8A33A}
.places .place:nth-child(4){--sec:#D9578F}
.places .place:nth-child(5){--sec:#5FBF9A}
.place-name .ico{width:1.3em;height:1.3em;color:var(--sec)}
.place-shot{position:relative;aspect-ratio:3/4;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px rgba(237,231,218,.5),0 16px 34px rgba(0,0,0,.5)}
.place-shot::before{content:"";position:absolute;left:0;top:0;width:42%;height:6px;background:var(--sec);z-index:2}
.place-shot::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,17,20,.55),rgba(12,17,20,0) 55%);transition:opacity .4s ease}
.place:hover .place-shot::after{opacity:.35}
.place-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.place:hover .place-shot img{transform:scale(1.04)}
.place-body{border-top:2px solid var(--sec);margin-top:13px;padding-top:11px}
.place-name{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.place-note{font-size:15px;line-height:1.45;color:var(--dim);margin:6px 0 0}
.place:nth-child(2) .place-shot{margin-top:clamp(16px,3.4vw,58px)}
.place:nth-child(4) .place-shot{margin-top:clamp(26px,5vw,88px)}

/* ---------- diagram band ---------- */
.diagram{display:flex;gap:clamp(28px,5vw,84px);align-items:center;flex-wrap:wrap}
.diagram svg{width:clamp(150px,20vw,286px);height:auto;flex:none;color:var(--accent);stroke:currentColor;fill:none}
.diagram-body{flex:1 1 400px;min-width:0}

/* ---------- statblocks ---------- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:clamp(16px,2.4vw,40px)}
.statblock{border-top:1px solid currentColor;padding-top:10px;display:flex;flex-direction:column}
.stat-num{font-family:var(--display);font-size:clamp(32px,3.8vw,54px);font-weight:800;letter-spacing:-.035em;line-height:.96}
.stat-label{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.62;margin-top:6px}

/* ---------- lead feature / seconds ---------- */
.feature-band{background:#101A20;border-top:5px solid var(--accent);border-bottom:1px solid var(--hair);padding-block:clamp(34px,4.4vw,72px)}
.feature-band .feature h2{font-size:clamp(28px,3.9vw,56px)}
.feature-band .second-shot{border-color:rgba(237,231,218,.5);box-shadow:0 12px 26px rgba(0,0,0,.45)}

.feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,4vw,60px);align-items:end}
.feature h2{font-size:clamp(26px,3.4vw,50px);max-width:26ch}
.seconds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,186px),1fr));gap:clamp(16px,2.2vw,30px)}
.second{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.second-shot{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--hair-strong)}
.second-shot::before{content:"";position:absolute;left:0;top:0;width:44%;height:5px;background:var(--sec,var(--accent));z-index:2}
.second.sec-dumbo{--sec:#E85539}.second.sec-brighton{--sec:#3FA8C8}.second.sec-sunset{--sec:#E8A33A}.second.sec-flatbush{--sec:#D9578F}.second.sec-redhook{--sec:#5FBF9A}
.second .eyebrow .ico{color:var(--sec,var(--accent))}
.second-shot img{width:100%;height:100%;object-fit:cover}
.second h3{font-size:19px;line-height:1.14;margin:13px 0 0;min-height:3.4em;color:var(--ink)}
.second p{font-size:15px;line-height:1.45;color:var(--dim);margin:7px 0 0}
.second .eyebrow{margin-top:auto;padding-top:13px;display:flex;align-items:center;gap:7px;font-size:12px}

/* ---------- quiet line band ---------- */
.quiet{font-family:var(--display);font-weight:700;font-size:clamp(22px,3.2vw,46px);line-height:1.1;letter-spacing:-.025em;max-width:36ch}

/* ---------- map ---------- */
.map-figure{margin:0}
.map-wrap{display:grid;grid-template-columns:minmax(210px,.55fr) minmax(0,1.45fr);gap:clamp(22px,4vw,60px);align-items:start}
.map-slot{width:100%}
.map-slot svg{width:100%;height:auto;display:block}
.map-pin circle{fill:var(--accent)}
.map-pin text{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.02em;fill:#F0ECE4}
.map-figure figcaption{margin-top:12px}

/* ---------- figures (one drawing system, four treatments) ---------- */
.article-figure{margin:34px 0}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{font-family:var(--display);font-size:16px;font-weight:500;line-height:1.42;margin-top:12px;padding-top:10px;border-top:2px solid var(--accent);max-width:56ch}
.credit{display:block;font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:rgba(237,231,218,.44);margin-top:7px;font-weight:600}
.band--paper .credit,.fig-mat .credit{color:rgba(12,17,20,.5)}

/* 1 — mat: photo sits on a paper mat */
.fig-mat{background:var(--paper);color:var(--ground);padding:clamp(12px,1.4vw,22px)}
.fig-mat figcaption{border-top-color:var(--accent);color:var(--ground)}

/* 2 — plate: heavy frame, caption steps outside it */
.fig-plate img{border:1px solid var(--hair-strong)}
.fig-plate figcaption{margin-left:clamp(0px,4vw,64px)}

/* 3 — bleed: breaks the measure, caption on a plate */
.fig-bleed{width:100vw;margin-inline:calc(50% - 50vw);margin-block:clamp(34px,4.4vw,58px)}
.fig-bleed img{aspect-ratio:21/9;object-fit:cover}
.fig-bleed figcaption{margin:0 var(--pad);border-top:0;padding-top:0;position:relative;top:-1px;background:var(--ground);padding:14px 22px 0 0;max-width:48ch}

/* 4 — inset: sits in the column, prose runs beside it */
.fig-inset{float:right;width:min(43%,320px);margin:8px 0 22px 30px}
.fig-inset figcaption{font-size:15px;border-top-width:1px;border-top-color:var(--hair-strong)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:32px 0}
.gallery figure{margin:0}
.gallery img{aspect-ratio:3/2;object-fit:cover;border:1px solid var(--hair-strong)}
.gallery figcaption{font-family:var(--display);font-size:14px;line-height:1.35;margin-top:8px;color:var(--dim)}

/* ---------- article ---------- */
.article{padding:0 var(--pad) clamp(50px,6vw,90px)}
/* the reading column and every interruption share one centred axis */
.article-head{max-width:var(--measure);margin-inline:auto}
.article-body{margin-inline:auto}
.article>.article-figure,.article>div:not([class]),.article>.gallery{max-width:1180px;margin-inline:auto}
.article>div:not([class]),.article>.gallery{margin-block:clamp(28px,3.4vw,48px)}
.article>div:not([class])>.article-figure{margin-block:0}
.article>.band{max-width:var(--measure);margin-inline:auto}
.article-body>*:last-child{margin-bottom:0}
.article-head{padding:clamp(28px,4vw,58px) 0 0}
.article-head h1{font-size:clamp(32px,5.2vw,84px);line-height:.94;letter-spacing:-.04em;max-width:24ch;margin:14px 0 0}
.article-kicker{display:flex;align-items:center;gap:9px}
.article-body{max-width:var(--measure);font-size:20px;line-height:1.66}
.article-body p{margin:0 0 1.15em}
.article-body h2{font-size:clamp(24px,2.5vw,36px);margin:44px 0 14px;max-width:30ch}
.article-body h3{font-size:21px;margin:30px 0 8px}
.article-body>*:first-child{margin-top:0}
.article-body a{border-bottom:1px solid rgba(232,85,57,.45)}
.article-wide{max-width:1180px}
.lead{font-family:var(--text);font-size:clamp(20px,1.7vw,26px);line-height:1.44;font-style:italic;color:rgba(237,231,218,.9);border-left:3px solid var(--accent);padding-left:20px;margin:0 0 30px}

.pullquote{margin:38px 0;border-top:3px solid var(--accent);border-bottom:1px solid var(--hair);padding:18px 0}
.pullquote p{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,34px);line-height:1.12;letter-spacing:-.02em;margin:0;max-width:32ch}
.blockquote{margin:34px 0;padding-left:22px;border-left:1px solid var(--hair-strong)}
.blockquote p{font-style:italic;font-size:20px;margin:0}
.blockquote cite{display:block;font-family:var(--display);font-style:normal;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:10px}
.callout{margin:34px 0;background:var(--secondary);color:#F4F1EA;padding:clamp(18px,2vw,28px)}
.callout p{margin:0;font-size:19px;line-height:1.5}
.note{font-size:16px;line-height:1.5;color:var(--dim);border-top:1px solid var(--hair);padding-top:10px;margin:26px 0}

/* notes-for-design furniture */
.notes-band{background:var(--paper);color:var(--ground);padding:clamp(30px,4vw,58px) var(--pad);margin-block:clamp(38px,4.4vw,66px)}
.notes-grid{max-width:1180px;margin-inline:auto}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(26px,3.4vw,58px);align-items:start}
.notes-grid h3{font-size:19px;letter-spacing:.02em;border-bottom:2px solid var(--accent);padding-bottom:8px;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr);gap:6px 18px;padding:11px 0;border-top:1px solid rgba(12,17,20,.18)}
.timeline li:first-child{border-top:0;padding-top:0}
.t-when{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.02em;color:#A32B18;line-height:1.35}
.t-what{font-size:17px;line-height:1.45}
.factlist{list-style:none;margin:0;padding:0}
.factlist li{padding:9px 0;border-top:1px solid rgba(12,17,20,.18);font-size:17px;line-height:1.45}
.factlist li:first-child{border-top:0}
.factlist b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.01em;display:block}
.notes-band .statblock{border-top-color:rgba(12,17,20,.3)}
.notes-band .stat-num{color:var(--ground)}

/* tables */
.datatable,.versus{width:100%;font-family:var(--display);font-size:17px;margin:30px 0}
.datatable th,.versus th{text-align:left;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:10px 14px 10px 0;border-bottom:2px solid var(--accent)}
.datatable td,.versus td{padding:11px 14px 11px 0;border-top:1px solid var(--hair);vertical-align:top}
.versus td+td,.versus th+th{text-align:right;padding-right:0}
.band--paper .datatable td,.band--paper .versus td,.notes-band .datatable td{border-top-color:rgba(12,17,20,.18)}

/* charts */
.chart{margin:32px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .bar-r{fill:var(--accent)}
.chart .bar-lbl{font-family:var(--display);font-size:13px;fill:var(--dim)}
.chart .bar-val{font-family:var(--display);font-size:13px;font-weight:700;fill:var(--ink)}
.chart .axis{stroke:var(--hair)}
.chart figcaption{font-family:var(--display);font-size:15px;color:var(--dim);border-top:1px solid var(--hair);padding-top:9px;margin-top:12px}

/* cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px;margin:32px 0}
.profile-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--hair-strong);padding:0 0 18px}
.p-photo{width:100%;aspect-ratio:4/5;object-fit:cover}
.profile-card h3{font-size:21px;margin:16px 18px 0}
.p-role{font-family:var(--display);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-lit);margin:7px 18px 0}
.profile-card p:not(.p-role):not(.p-links){font-size:16px;line-height:1.5;color:var(--dim);margin:11px 18px 0}
.p-links{margin:14px 18px 0 !important;padding-top:12px;border-top:1px solid var(--hair);font-family:var(--display);font-size:14px}
.profile-card.no-photo{border-top:3px solid var(--accent);padding-top:4px}
.profile-card.no-photo h3{margin-top:14px}
.p-attr{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,231,218,.42);margin:10px 18px 0 !important}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:30px 0}
.org-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;border:1px solid var(--hair-strong);padding:14px;color:inherit}
.org-card:hover{border-color:var(--accent)}
.org-logo{grid-row:1/3;width:44px;height:44px;object-fit:contain;background:#000}
.org-name{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink)}
.org-host{font-family:var(--display);font-size:13px;letter-spacing:.06em;color:var(--dim)}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-card.no-logo .org-name,.org-card.no-logo .org-host{grid-column:1}
.entity-ref{font-family:var(--display);font-size:.94em;font-weight:600;white-space:nowrap}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:2px 34px;margin-top:16px}
.further-grid a{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);padding:15px 0;border-bottom:1px solid var(--hair)}
.further-grid a:hover{color:var(--accent-lit)}
.related-links{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 34px}
.related-links li{border-bottom:1px solid var(--hair)}
.related-links a{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);padding:15px 0}

.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--hair)}
.cat-list li:last-child{border-bottom:1px solid var(--hair)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:6px 34px;align-items:baseline;padding:20px 0;color:inherit}
.cat-list a:hover .cl-title{color:var(--accent-lit)}
.cl-title{font-family:var(--display);font-size:clamp(20px,2vw,27px);font-weight:700;letter-spacing:-.018em;line-height:1.14;color:var(--ink)}
.cl-brief{font-size:17px;line-height:1.5;color:var(--dim)}

/* expander for long lists (CSS only) */
.expander>input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander>input:checked~.cat-list .more,.expander>input:checked~.more-wrap .more{display:block}
.expander>label{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-lit);cursor:pointer;border-bottom:2px solid var(--accent);padding-bottom:4px}
.expander>input:checked~label{display:none}

/* ---------- supporters ---------- */
.supporters{padding:clamp(38px,4.6vw,74px) var(--pad)}
.sponsor-row{display:grid;grid-template-columns:repeat(auto-fit,460px);gap:14px;justify-content:start}
.sponsor{display:grid;grid-template-columns:210px minmax(200px,1fr);gap:18px;align-items:center;width:460px;min-height:96px;padding:16px;border:1px solid var(--hair);color:inherit}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{width:210px;height:52px;max-height:52px;max-width:100%;object-fit:contain;background:#07090B;padding:6px}
.sponsor-name{font-family:var(--display);font-size:17px;font-weight:700;line-height:1.2;color:var(--ink);display:block}
.sponsor-blurb{display:block;font-size:15px;line-height:1.4;color:var(--dim);margin-top:5px}
.sponsor.feat{border-color:var(--hair-strong)}

/* ---------- footer ---------- */
.foot{padding:24px var(--pad) 34px;border-top:1px solid var(--hair);margin-top:clamp(24px,3vw,48px)}
.foot-top{display:flex;justify-content:space-between;gap:20px 36px;flex-wrap:wrap;align-items:center}
.foot-top>div:first-child{align-items:center !important;gap:12px !important}
.foot .mast-mark{width:34px;height:34px}
.foot-nav{display:flex;flex-wrap:wrap;gap:2px 26px}
.foot-nav a{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:4px 0}
.foot-nav a:hover{color:var(--ink)}
.foot-word{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.035em;line-height:1}
.foot-nav .ico{width:1.15em;height:1.15em}
.foot-nav a:nth-child(1) .ico{color:#E85539}
.foot-nav a:nth-child(2) .ico{color:#3FA8C8}
.foot-nav a:nth-child(3) .ico{color:#E8A33A}
.foot-nav a:nth-child(4) .ico{color:#D9578F}
.foot-nav a:nth-child(5) .ico{color:#5FBF9A}

/* ---------- forms (contact) ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px 26px;max-width:760px;margin-top:26px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.field input,.field textarea{background:transparent;border:1px solid var(--hair-strong);color:var(--ink);font:inherit;font-size:17px;padding:12px 13px}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.field--wide{grid-column:1/-1}
.btn{display:inline-flex;align-items:center;gap:9px;margin-top:20px;background:var(--accent);color:#150604;border:0;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:14px 22px;cursor:pointer}
.btn:hover{background:var(--accent-lit)}

/* ---------- narrow ---------- */
@media (max-width:1080px){
  .places{grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr))}
  .place:nth-child(2) .place-shot,.place:nth-child(4) .place-shot{margin-top:0}
  .feature{grid-template-columns:minmax(0,1fr)}
  .map-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body{font-size:18px}
  .article-body{font-size:19px}
  .places{grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr))}
  .fig-inset{float:none;width:100%;margin:26px 0}
  .fig-bleed figcaption{max-width:none}
  .cat-list a{grid-template-columns:minmax(0,1fr)}
  .mast-nav{padding-bottom:8px}
  .mast-name{gap:14px}
}
@media (max-width:560px){
  .sponsor-row{grid-template-columns:minmax(0,1fr)}
  .sponsor{width:auto;grid-template-columns:minmax(0,1fr)}
  .sponsor img{width:100%;max-width:none}
  .foot-nav{gap:2px 18px}
  .places{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  /* a 1200-unit map scaled into a 320px column renders its labels at ~8px:
     drop the orientation annotations (the paragraph beside it says the same in words)
     and size the pin labels up so the five places stay readable */
  .map-slot .map-annot{display:none}
  .map-slot .map-pin--sec text{display:none}
  .map-pin text{font-size:58px !important;font-weight:700 !important}
  .map-pin circle{r:26px}
  .map-pin--sec circle{r:16px}
  .chart svg text{font-size:26px !important}
  .credit{font-size:13px}
  .second .eyebrow{font-size:13px}
  .eyebrow{font-size:13px}
  .mast-nav a{padding:11px 0}
  .foot-nav a{padding:9px 0}
  .cat-list a{padding:22px 0}
}
@media (max-width:560px){
  .mast-nav{gap:2px 14px;font-size:13px}
  .mast-nav a{font-size:13px;letter-spacing:.1em}
  .notes-band{padding-inline:var(--pad)}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .t-when{color:#A32B18}
  .statrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .stat-num{font-size:34px}
  .opener{min-height:min(78vh,640px)}
  .article-body{overflow-wrap:break-word}
  .entity-ref{white-space:normal}
  .datatable,.versus{font-size:15px}
  .gallery{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:400px){
  .places{grid-template-columns:minmax(0,1fr)}
  .place:nth-child(n) .place-shot{aspect-ratio:16/10}
}

/* ---------- large displays: the reading column grows with the screen ---------- */
@media (min-width:1280px){
  :root{--measure:76ch}
  .article-body{font-size:21px}
  .article>.article-figure,.article>div:not([class]),.article>.gallery,.notes-grid{max-width:1320px}
}
@media (min-width:1700px){
  :root{--measure:80ch}
  .article-body{font-size:22px;line-height:1.63}
  .article-head{max-width:88ch}
  .article>.article-figure,.article>div:not([class]),.article>.gallery,.notes-grid{max-width:1520px}
  .fig-inset{width:min(40%,400px);margin-left:38px}
}

/* wide figures have the room for a full-measure caption with the credit alongside */
.fig-mat figcaption,.fig-plate figcaption,.fig-bleed figcaption{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 40px;align-items:baseline}
.fig-mat figcaption{font-size:17px}
.fig-plate figcaption,.fig-bleed figcaption{font-size:17px}
.fig-mat figcaption .credit,.fig-plate figcaption .credit,.fig-bleed figcaption .credit{margin-top:0;text-align:right;white-space:nowrap;max-width:44ch;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .fig-mat figcaption,.fig-plate figcaption,.fig-bleed figcaption{grid-template-columns:minmax(0,1fr)}
  .fig-mat figcaption .credit,.fig-plate figcaption .credit,.fig-bleed figcaption .credit{text-align:left;white-space:normal;margin-top:6px}
}

/* 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}
.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:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.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}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!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}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#141210;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#141210;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-nav-collapse: this nav printed 161px of stacked links at 390 before any content
   (6 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 "filled-soft", 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 (0px measured) the button carries the build's
   gutter (clamp(20px,5vw,74px)) 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 "max-height" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-disclose{display:none}
@media (max-width:900px){
  .nav-disclose{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;border-radius:2px;padding:12px 20px;background:color-mix(in srgb, currentColor 14%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-disclose-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .mast-nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-disclose-c:checked ~ .mast-nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .mast-top:has(> .nav-disclose){display:flow-root}
  .nav-disclose:not(:has(~ .mast-nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2003px at 390, 20% of the whole page. Two columns bring it to
   1386px (31% shorter). Checked before writing: no new overflow, smallest mark still
   131px wide, longest blurb 5 lines, tile heights 169-257px.
   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 (.sponsor-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){
  .sponsor-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-row (11 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-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(a.place > span.place-shot > img,
  a.sec-dumbo.second > span.second-shot > img,
  a.sec-flatbush.second > span.second-shot > img,
  a.sec-redhook.second > span.second-shot > img,
  a.sec-sunset.second > span.second-shot > img,
  div > figure.article-figure.fig-bleed > img,
  div > figure.article-figure.fig-mat > img,
  div > figure.article-figure.fig-plate > img,
  div.article-body > figure.article-figure.fig-inset > img,
  div.article-body > figure.article-figure.fig-plate > img,
  div.feature > figure.article-figure.fig-mat > img,
  main > section.opener > img,
  main.article > figure.article-figure.fig-plate > img,
  section.band.band--paper > figure.article-figure.fig-mat > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1439px){.sponsor-row.sponsor-row:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(460px,calc(50% - 7px)),1fr))!important;justify-content:stretch!important}.sponsor-row.sponsor-row > [data-partner]{width:auto!important;max-width:none!important}}

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}
@media (min-width:640px) and (max-width:1559px){.sponsor-row:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}[data-partner] img{background:transparent!important}