/* un-habitat.org — Unique Nature Habitats
   Palette roles: ground · ink · accent (burnt orange) · secondary (indigo) · shade */

:root{
  --ground:#F4EFE6;
  --ground-2:#EAE2D4;
  --ink:#16140F;
  --ink-soft:#5D564A;
  --ink-faint:#7A7365;
  --accent:#C0430F;
  --secondary:#1F2C6E;
  --rule:rgba(22,20,15,.28);
  --measure:68ch;
  --pad:clamp(18px,4vw,44px);
  --max:1560px;
  --display:Chivo,"Helvetica Neue",Arial,sans-serif;
  --body:Bitter,Georgia,"Times New Roman",serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--secondary);color:var(--ground)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.kicker a{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:1em;height:1em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-.12em}

/* tick rule — the site's one drawn device */
.tickrule{height:13px;width:100%;display:block;color:var(--ink)}

/* ---------- masthead: contents as one typographic run ---------- */
.masthead{padding-top:clamp(20px,3vw,34px)}
.masthead-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(16px,3vw,40px)}
.brand{display:block;flex:1 1 460px;min-width:280px}
.brand .profile{display:block;width:min(300px,54%);height:auto;color:var(--accent);margin-bottom:-4px}
.brand h1,.brand .wordmark{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,7.4vw,104px);line-height:.86;letter-spacing:-.045em;margin:0}
.brand .dot{color:var(--accent)}
.masthead-blurb{flex:0 1 340px;min-width:240px;padding-bottom:10px}
.masthead-blurb p{font-size:16px;line-height:1.5;max-width:34ch;margin:0 0 12px}
.masthead-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.masthead-links a{color:var(--secondary);border-bottom:1px solid rgba(31,44,110,.4);padding-bottom:2px}
.masthead-links a:hover{color:var(--accent);border-color:var(--accent)}

/* the run: sections and their pages flow as one wrapping line of type */
.contents{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;padding:18px 0 22px}
.contents .c-sec{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:900;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.025em;line-height:1.15}
.contents .c-sec .icon{width:18px;height:18px;color:var(--accent);align-self:center}
.contents .c-sec:hover .icon{color:var(--ink)}
.contents .c-page{font-size:14.5px;color:var(--ink-soft);line-height:1.3}
.contents .c-page:hover{color:var(--accent)}
.contents .c-div{color:var(--accent);font-size:13px;line-height:1}
.contents .c-break{flex-basis:100%;height:0;margin:0}
@media(max-width:640px){
  .contents{gap:4px 10px}
  .contents .c-sec{flex-basis:100%;margin-top:10px}
  .contents .c-page{font-size:14px}
}

/* ---------- homepage bands ---------- */
.band{padding-block:clamp(48px,6vw,92px)}
.band--tight{padding-block:clamp(30px,4vw,52px)}
.band--indigo{background:var(--secondary);color:var(--ground)}
.band--indigo a{color:var(--ground)}
.band--indigo a:hover{color:#EEDA9A}
.band--shade{background:var(--ground-2)}
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 30px;border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:clamp(22px,3vw,38px)}
.band--indigo .band-head{border-color:rgba(244,239,230,.4)}
.band-head h2{font-size:clamp(22px,2.6vw,38px)}
.band--indigo .kicker{color:rgba(244,239,230,.72)}

/* hero */
.hero{position:relative}
.hero-frame{position:relative;width:100%;height:min(84vh,860px);min-height:420px;background:var(--ink);overflow:hidden}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-cap{position:absolute;inset:auto 0 0 0;padding:clamp(20px,4vw,46px);background:linear-gradient(to top,rgba(22,20,15,.82),rgba(22,20,15,.2) 46%,rgba(22,20,15,0))}
.hero-cap .kicker{color:#EFD9B4;display:flex;align-items:center;gap:8px}
.hero-cap .kicker .icon{width:15px;height:15px}
.hero-cap h2{color:var(--ground);max-width:24ch;font-size:clamp(28px,5vw,80px);line-height:.96;margin-top:12px;text-shadow:0 2px 4px rgba(22,20,15,.45),0 10px 40px rgba(22,20,15,.55)}
.hero-cap .kicker{text-shadow:0 1px 3px rgba(22,20,15,.6)}
.hero-cap h2 a{color:var(--ground)}
.hero-cap h2 a:hover{color:#EFD9B4}
.hero-under{display:flex;flex-wrap:wrap;gap:14px clamp(24px,4vw,56px);padding-top:16px}
.hero-under p{flex:1 1 440px;max-width:62ch;font-size:17.5px}
.hero-under .credit{flex:0 1 230px;max-width:34ch}

/* generic figure system ------------------------------------------------- */
figure{margin:0}
figcaption{padding-top:12px}
.cap{font-size:15.5px;line-height:1.45;max-width:52ch;margin:0}
.credit{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:7px 0 0;line-height:1.6}
.fig--bleed .credit,.hero-under .credit{color:var(--ink-soft)}
/* 1 · mat: photograph on a raised panel */
.fig--mat{background:var(--ground);box-shadow:0 1px 0 var(--rule);padding:clamp(14px,1.6vw,26px)}
.band--shade .fig--mat{background:var(--ground)}
.fig--mat figcaption{border-top:1px solid var(--rule);margin-top:14px;padding-top:12px}
/* 2 · rule: hairline inset + caption with a hanging accent rule */
.fig--rule img{outline:1px solid var(--rule);outline-offset:-1px}
.fig--rule figcaption{border-left:2px solid var(--accent);padding-left:14px}
/* 3 · offset: caption steps out under the image */
.fig--offset figcaption{margin-left:clamp(0px,4vw,64px);border-top:1px solid var(--ink);padding-top:10px}
/* 4 · bracket: drawn corner marks */
.fig--bracket{position:relative;padding:14px}
.fig--bracket::before,.fig--bracket::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--accent)}
.fig--bracket::before{top:0;left:0;border-right:0;border-bottom:0}
.fig--bracket::after{bottom:0;right:0;border-left:0;border-top:0}
/* 5 · bleed: breaks the measure */
.fig--bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}
.fig--bleed img{width:100%;height:min(70vh,680px);object-fit:cover}
.fig--bleed figcaption{max-width:var(--max);margin:0 auto;padding:14px var(--pad) 0;display:flex;flex-wrap:wrap;gap:10px clamp(24px,4vw,56px)}
.fig--bleed .cap{flex:1 1 420px;font-size:16.5px}
.fig--bleed .credit{flex:0 1 220px}
/* 6 · inset: small, sits in the column with prose beside it */
.fig--inset{float:right;width:min(300px,42%);margin:6px 0 22px clamp(18px,3vw,34px)}
.fig--inset .cap{font-size:14.5px;max-width:32ch}
@media(max-width:720px){.fig--inset{float:none;width:100%;margin:0 0 24px}}

/* ---------- the edit (lead + seconds) ---------- */
.edit{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,44px)}
.edit .lead{grid-column:span 7}
.edit .lead h3{font-size:clamp(26px,3.1vw,46px);margin:16px 0 12px}
.edit .lead p{font-size:17.5px;max-width:52ch}
.edit .seconds{grid-column:span 5;display:flex;flex-direction:column;gap:clamp(16px,1.8vw,24px);justify-content:space-between}
.edit .lead .fig--mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.second{border-top:1px solid var(--rule);padding-top:12px}
.second h4{font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.02em;line-height:1.16}
.second p{font-size:15.5px;color:var(--ink-soft);max-width:44ch;margin-top:6px}
.second .kicker{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.second .kicker .icon{width:13px;height:13px;color:var(--accent)}
@media(max-width:900px){.edit .lead,.edit .seconds{grid-column:1/-1}}

/* one quiet declarative line */
.statement{font-family:var(--display);font-weight:300;font-size:clamp(23px,3.3vw,50px);line-height:1.14;letter-spacing:-.025em;max-width:32ch;margin:0}
.statement em{font-style:normal;color:var(--accent)}

/* ---------- sections index (indigo band) ---------- */
.sectiongrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,40px)}
.sectioncard{display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(244,239,230,.45);padding-top:14px}
.sectioncard .icon{width:30px;height:30px;color:#EEDA9A}
.sectioncard h3{font-size:clamp(19px,1.8vw,25px)}
.sectioncard p{font-size:15.5px;color:rgba(244,239,230,.8);max-width:32ch}
.sectioncard .count{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,230,.6);margin-top:auto}

/* ---------- compact register ---------- */
.register{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(24px,3vw,44px)}
.register a.row{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;border-top:1px solid var(--rule);padding:12px 0 12px 0;transition:background .12s,padding .12s}
.register a.row:hover{background:var(--ground-2);box-shadow:-3px 0 0 var(--accent);padding-left:12px}
.register a.row:hover .n{color:var(--ink)}
.register a.row .n{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.08em}
.register a.row .t{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.2}
.register a.row .d{grid-column:2;font-size:14.5px;color:var(--ink-soft);max-width:46ch}

/* ---------- supporters ---------- */
.sponsors{display:flex;flex-wrap:wrap;gap:14px}
.sponsors--roll{gap:10px}
.sponsor{flex:0 0 248px;height:66px;display:flex;align-items:center;justify-content:center;background:var(--ink);padding:9px 12px;overflow:hidden}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor:hover{background:#2a1215}
.sponsor.feat{box-shadow:0 0 0 1px var(--accent)}
.sponsor-blurb:empty{display:none}
.tier-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
@media(max-width:520px){.sponsor{flex:0 0 100%;height:72px}.sponsors--roll .sponsor{flex:0 0 100%}}

/* ---------- article ---------- */
.article-head{padding-top:clamp(10px,2vw,22px)}
.article-head .kicker{display:inline-flex;align-items:center;gap:8px}
.article-head .kicker .icon{width:16px;height:16px;color:var(--accent)}
.article-head h1{font-size:clamp(31px,5.4vw,84px);max-width:28ch;margin:14px 0 0;line-height:.94}
.lead{font-size:clamp(19px,1.8vw,25px);line-height:1.46;max-width:52ch;margin:24px 0 0;color:var(--ink);font-family:var(--body);font-weight:500}
.article-body{max-width:var(--measure);margin-inline:auto;padding-inline:0}
.article-body{max-width:1180px;margin-inline:auto;padding-inline:0}
.article-body > h2{font-size:clamp(24px,2.5vw,36px);margin:clamp(38px,4.4vw,58px) auto 16px;padding-top:16px;border-top:1px solid var(--rule);max-width:640px}
.article-body > h3{font-size:22px;margin:34px auto 10px;max-width:640px}
.article-body > p{font-size:19px;line-height:1.72;margin:0 auto 24px;max-width:640px}
.article-body > .notes{width:auto;margin-left:0;transform:none;padding-inline:0}
.article-body > .pullquote{max-width:1180px;margin-inline:auto}
.article-body > .statrow{max-width:1180px}
.article-body a{color:var(--secondary);border-bottom:1px solid rgba(31,44,110,.35)}
.article-body a:hover{color:var(--accent);border-color:var(--accent)}
.article-body > figure{margin-block:clamp(26px,3vw,40px)}
.article-body em{font-style:italic}
.article-wide{max-width:1180px;margin-inline:auto}

/* notes-for-design material — full-width interruptions, no side rail */
.notes{margin:clamp(30px,4vw,52px) 0;width:min(100vw,1180px);margin-left:50%;transform:translateX(-50%);padding-inline:var(--pad)}
.notes-inner{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:16px 0 20px}
.notes h3{font-family:var(--display);font-weight:900;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em;margin:0 0 16px;display:flex;align-items:baseline;gap:10px}
.notes h3::before{content:"";width:26px;height:2px;background:var(--accent);flex:0 0 auto;transform:translateY(-6px)}
.notes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px clamp(24px,3vw,44px)}
.notes li{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--rule);padding-left:14px}
.notes .n-term{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--accent);line-height:1.4}
.notes .n-desc{font-size:15.5px;line-height:1.5;color:var(--ink)}
.notes--indigo .notes-inner{background:var(--secondary);color:var(--ground);border:0;padding:clamp(20px,3vw,32px)}
.notes--indigo .n-term{color:#EEDA9A}
.notes--indigo .n-desc{color:rgba(244,239,230,.9)}
.notes--indigo li{border-left-color:rgba(244,239,230,.4)}
.notes--indigo h3::before{background:#EEDA9A}

/* styleguide components */
.pullquote{margin:clamp(34px,4vw,56px) auto;padding:clamp(22px,2.6vw,36px) clamp(20px,3vw,44px);background:var(--ground-2);border-left:4px solid var(--accent);position:relative}
.pullquote::before{content:"";position:absolute;left:clamp(20px,3vw,44px);top:0;width:56px;height:3px;background:var(--accent)}
.pullquote p{font-family:var(--display);font-weight:300;font-size:clamp(23px,2.7vw,37px);line-height:1.14;letter-spacing:-.025em;margin:0;max-width:36ch;text-wrap:pretty}
.pullquote p::after{content:"";display:block;width:26px;height:1px;background:var(--ink);margin-top:clamp(14px,1.6vw,20px)}
.blockquote{margin:28px 0;padding:0}
.blockquote p{font-size:19px;line-height:1.55;margin:0 0 8px}
.blockquote cite{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-style:normal}
.callout{margin:28px 0;background:var(--ground-2);padding:clamp(16px,2vw,24px);border-top:2px solid var(--accent)}
.callout p{font-size:17px;margin:0}
.note{font-size:15.5px;color:var(--ink-soft);border-left:1px solid var(--accent);padding-left:12px;margin:22px 0}
.versus,.datatable{width:100%;border-collapse:collapse;margin:28px 0;font-size:15.5px}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.versus th,.datatable th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:400}
.datatable tbody tr:nth-child(even),.versus tbody tr:nth-child(even){background:var(--ground-2)}
.table-scroll{overflow-x:auto}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);margin:28px 0}
.statblock{background:var(--ground);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:900;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;color:var(--accent);line-height:1}
.stat-label{font-size:14px;line-height:1.4;color:var(--ink-soft)}
.timeline{list-style:none;margin:28px 0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:6px 20px;border-top:1px solid var(--rule);padding:12px 0}
.t-when{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--accent);line-height:1.5}
.t-what{font-size:16px;line-height:1.5}
@media(max-width:560px){.timeline li{grid-template-columns:1fr}}
.chart{margin:28px 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-size:14.5px;color:var(--ink-soft);padding-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:28px 0}
.profile-grid,.org-grid,.further-grid{display:grid;gap:16px;margin:24px 0}
.profile-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.profile-card{display:flex;flex-direction:column;gap:8px;background:var(--ground-2);padding:18px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.profile-card h3{font-size:19px}
.p-role{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font-size:15px;line-height:1.5;margin:0}
.p-links a,.p-attr{font-size:14px}
.org-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.org-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 12px;align-items:center;border:1px solid var(--rule);padding:12px 14px}
.org-logo{grid-row:span 2;width:44px;height:44px;object-fit:contain;background:var(--ink)}
.org-name{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.015em}
.org-host{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-faint)}
.entity-ref{color:var(--secondary);border-bottom:1px solid rgba(31,44,110,.35)}
.further-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.further-grid a{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--ink);padding-top:12px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1.2;min-height:96px}
.further-grid a .icon{width:16px;height:16px;color:var(--accent)}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.related-links li{border-top:1px solid var(--rule);padding-top:12px}
.related-links a{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.2;display:block}
.related-links .rl-sec{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.related-links .rl-sec .icon{width:12px;height:12px;color:var(--accent)}

/* category / archive lists */
.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 clamp(24px,3vw,44px)}
.cat-list li{border-top:1px solid var(--rule);padding:16px 0;display:flex;flex-direction:column;gap:6px}
.cat-list a{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.8vw,23px);letter-spacing:-.02em;line-height:1.16}
.cat-list p{font-size:15.5px;color:var(--ink-soft);max-width:48ch;margin:0}
.archive-group{margin-bottom:clamp(34px,4vw,56px)}
.archive-group h2{display:flex;align-items:center;gap:10px;font-size:clamp(20px,2vw,28px);margin-bottom:12px}
.archive-group h2 .icon{width:22px;height:22px;color:var(--accent)}

/* two-column split that collapses */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,44px)}
.split>.s7{grid-column:span 7}
.split>.s5{grid-column:span 5}
@media(max-width:900px){.split>.s7,.split>.s5{grid-column:1/-1}}

/* styleguide-only component aliases */
.article-figure img{width:100%;outline:1px solid var(--rule);outline-offset:-1px}
.article-figure figcaption{border-left:2px solid var(--accent);padding-left:14px}
.profile-card.no-photo{border-top:2px solid var(--accent);background:var(--ground)}
.org-card.no-logo{grid-template-columns:1fr}
.org-card.no-logo .org-name,.org-card.no-logo .org-host{grid-column:1}
.p-attr{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- main nav: icon-led sections, guides on hover/focus ---------- */
.mainnav{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 26px;padding:14px 0 20px}
.nav-row{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0}
.nav-item{position:relative}
.nav-sec{display:flex;align-items:center;gap:11px;padding:8px 14px 8px 10px;border:1px solid transparent}
.nav-sec .nav-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;background:var(--ink);color:var(--ground)}
.nav-sec .nav-ico .icon{width:21px;height:21px}
.nav-name{display:flex;flex-direction:column;gap:2px;font-family:var(--display);font-weight:900;font-size:clamp(15px,1.35vw,19px);letter-spacing:-.025em;line-height:1.08}
.nav-count{font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.nav-item:hover>.nav-sec,.nav-item:focus-within>.nav-sec{border-color:var(--ink);background:var(--ground-2)}
.nav-item:hover>.nav-sec .nav-ico,.nav-item:focus-within>.nav-sec .nav-ico{background:var(--accent)}
.nav-panel{position:absolute;top:100%;left:0;z-index:60;min-width:320px;padding-top:6px;display:none}
.nav-panel-inner{background:var(--ground);border:1px solid var(--ink);box-shadow:6px 6px 0 rgba(22,20,15,.12);padding:14px 18px 16px}
.nav-item:hover>.nav-panel,.nav-item:focus-within>.nav-panel{display:block}
.nav-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nav-panel li+li{border-top:1px solid var(--rule)}
.nav-panel a{display:block;padding:8px 0;font-size:15.5px;line-height:1.3;color:var(--ink-soft);max-width:34ch}
.nav-panel a:hover{color:var(--accent)}
.nav-panel .panel-blurb{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.nav-all{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);border-bottom:1px solid rgba(31,44,110,.4);padding-bottom:3px}
.nav-all:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:820px){
  .mainnav{gap:8px}
  .nav-row{flex-direction:column;gap:0;width:100%}
  .nav-item{border-top:1px solid var(--rule)}
  .nav-sec{padding:12px 0}
  .nav-panel{position:static;display:block;min-width:0;padding-top:0}
  .nav-panel-inner{background:transparent;border:0;box-shadow:none;padding:0 0 12px 45px}
  .nav-panel .panel-blurb{display:none}
  .nav-panel a{padding:6px 0;max-width:none}
  .nav-item:hover>.nav-sec,.nav-item:focus-within>.nav-sec{background:transparent;border-color:transparent}
}

/* ---------- small-screen hardening ---------- */
img,svg,table{max-width:100%}
.credit,.kicker,.nav-count,.panel-blurb,.foot-legal p{overflow-wrap:anywhere}
.cat-list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media(max-width:1100px){.nav-item:last-child .nav-panel{left:auto;right:0}}
@media(max-width:820px){
  .nav-panel a{padding:11px 0}
  .nav-all{margin-top:12px}
  /* the guide list stays in the HTML but the header stays short: the section row leads to its page */
  .nav-panel{display:none}
  .nav-sec{justify-content:space-between;width:100%}
  .nav-sec::after{content:"\2192";font-family:var(--mono);font-size:13px;color:var(--accent)}
}
@media(max-width:760px){
  .foot-col a{min-height:36px;align-items:center}
  .masthead-links a{padding-block:5px}
}
@media(max-width:600px){
  .hero-frame{height:min(72vh,560px);min-height:340px}
  .hero-cap{background:linear-gradient(to top,rgba(22,20,15,.9),rgba(22,20,15,.35) 55%,rgba(22,20,15,0))}
  .band{padding-block:clamp(34px,7vw,52px)}
  .notes ul{grid-template-columns:1fr}
  .notes li{border-left:0;border-top:1px solid var(--rule);padding:10px 0 0}
  .notes--indigo li{border-top-color:rgba(244,239,230,.4)}
  .article-body > p{font-size:17.5px;line-height:1.66}
  .lead{font-size:18.5px}
  .fig--offset figcaption{margin-left:0}
  .fig--bleed img{height:min(52vh,380px)}
  .statrow{grid-template-columns:1fr}
  .register a.row{grid-template-columns:1fr}
  .register a.row .n{color:var(--accent)}
  .register a.row .d{grid-column:1}
  .brand .profile{width:min(220px,62%)}
}

/* footer */
.site-foot{border-top:1px solid var(--ink);margin-top:clamp(48px,6vw,88px);padding-block:0 56px}
.foot-rule{color:var(--ink);display:block}
.foot-grid{display:grid;grid-template-columns:minmax(240px,1.1fr) repeat(2,minmax(150px,.8fr));gap:26px clamp(30px,4vw,64px);align-items:start;padding-top:26px}
.foot-brand{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot-brand .profile{width:150px;color:var(--accent)}
.foot-brand span{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(17px,1.7vw,23px);letter-spacing:-.03em;line-height:1}
.site-foot p{font-size:15px;max-width:40ch;color:var(--ink-soft);margin:0}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-col h3{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px}
.foot-col a{display:flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.25}
.foot-col a .icon{width:14px;height:14px;color:var(--accent);flex:0 0 auto;margin-top:3px}
.foot-col a:hover .icon{color:var(--ink)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);margin-top:28px;padding-top:14px}
.foot-legal p{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);max-width:none}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* simple page (about/contact/404) */
.page-body{max-width:var(--measure);margin-inline:auto}
.page-body h1{font-size:clamp(30px,4.6vw,66px);margin-bottom:20px}
.page-body h2{font-size:clamp(20px,2vw,27px);margin:36px 0 12px}
.page-body p{font-size:18px;line-height:1.68;margin:0 0 20px}
.page-body a{color:var(--secondary);border-bottom:1px solid rgba(31,44,110,.35)}

/* 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-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

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

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 688px at 390, 8% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 688 -> 557px (19% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:min(0.69vw,10px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px}
}

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

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 1000px of tier across
   12 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){
  .sponsors .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
  .sponsors.sponsors--roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 640px (75 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 640px (declared in .article-body > p) 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){
  div.article-body > :is(h2:not([class]), p:not([class])){max-width:min(876px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body > :is(h2:not([class]), p:not([class])){max-width:min(clamp(876px, 60.833vw, 1051px), 100%)!important}
  div.article-body > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.register a.row{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h1:where(.rt-h2){font-family: var(--display); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin: 0px; text-wrap: balance;}
.band-head h1:where(.rt-h2){font-size: clamp(22px, 2.6vw, 38px);}
.hero-cap h1:where(.rt-h2){color: var(--ground); max-width: 24ch; font-size: clamp(28px, 5vw, 80px); line-height: 0.96; margin-top: 12px; text-shadow: rgba(22, 20, 15, 0.45) 0px 2px 4px, rgba(22, 20, 15, 0.55) 0px 10px 40px;}
.hero-cap h1:where(.rt-h2) a{color: var(--ground);}
.hero-cap h1:where(.rt-h2) a:hover{color: rgb(239, 217, 180);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.lead > figure.fig--mat > img,
  div.article-body > figure.fig--bleed > img,
  div.article-body > figure.fig--mat > img,
  div.article-body > figure.fig--offset > img,
  div.article-body > figure.fig--rule > img,
  div.split > figure.fig--mat.s5 > img,
  div.wrap > figure.fig--bleed > img,
  div.wrap > figure.fig--rule > img,
  figure > div > img,
  figure > div.hero-frame > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1439px){.sponsors.sponsors:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(232px,calc(50% - 7px)),1fr))!important;column-gap:14px!important;row-gap:14px!important;justify-content:stretch!important;align-items:stretch!important}.sponsors.sponsors > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}