/* ================================================================
   AIRPORT WILMINGTON — unofficial fansite
   cool slate & copper on off-white · departures-board vernacular
   ================================================================ */

:root{
  --paper:#F2F4F1;
  --paper-2:#E9ECE8;
  --ink:#1C242C;
  --slate:#39434E;
  --slate-soft:#5C6873;
  --line:#CDD4D6;
  --panel:#212932;
  --panel-2:#2A333D;
  --board-text:#E9EDEA;
  --copper:#AE5D28;
  --copper-bright:#C97A42;
  --copper-pale:#EAD9C9;
  --amber:#DFA045;
  --serif:"Newsreader", Georgia, serif;
  --sans:"Archivo", "Helvetica Neue", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:23px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--copper);text-decoration-color:rgba(174,93,40,.4);text-underline-offset:3px}
a:hover{color:var(--copper-bright)}

/* ---------- utility ---------- */
.wrap{max-width:1220px;margin:0 auto;padding:0 28px}
.stamp{
  font-family:var(--mono);font-size:16px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper);font-weight:500;
}
.stamp::before{content:"— ";color:var(--slate-soft)}
.kicker{font-family:var(--mono);font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-soft)}

/* ================= HEADER ================= */
.site-header{
  border-bottom:3px double var(--line);
  background:var(--paper);
}
.header-inner{
  max-width:1220px;margin:0 auto;padding:20px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wordmark{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.wordmark .wm-top{
  font-family:var(--sans);font-weight:900;font-size:24px;letter-spacing:.08em;
  text-transform:uppercase;line-height:1;
}
.wordmark .wm-top em{font-style:normal;color:var(--copper)}
.wordmark .wm-sub{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--slate-soft);
}
.nav-toggle-box{display:none}
.nav-toggle{display:none;cursor:pointer;font-family:var(--mono);font-size:16px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
  border:1.5px solid var(--ink);padding:8px 14px;border-radius:2px;user-select:none}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{
  font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:.04em;
  text-decoration:none;color:var(--slate);padding:6px 0;border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--copper);border-bottom-color:var(--copper)}
.site-nav a.nav-now{color:var(--ink);border-bottom-color:var(--copper)}
.nav-cta{
  border:1.5px solid var(--copper);border-radius:2px;padding:8px 16px !important;
  color:var(--copper) !important;border-bottom:1.5px solid var(--copper) !important;
}
.nav-cta:hover{background:var(--copper);color:#fff !important}

@media (max-width:920px){
  .nav-toggle{display:inline-block}
  .site-nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:50;
    background:var(--paper);border-bottom:3px double var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 28px 20px;
  }
  .site-nav a{display:block;width:100%;padding:12px 0;font-size:19px;border-bottom:1px solid var(--line)}
  .site-nav a:last-child{border-bottom:none}
  .nav-cta{border:none !important;padding:12px 0 !important}
  .nav-cta:hover{background:none;color:var(--copper-bright) !important}
  .site-header{position:relative}
  #navtoggle:checked ~ .site-nav{display:flex}
}

/* ================= DEPARTURES BOARD ================= */
.board{
  background:var(--panel);color:var(--board-text);
  border-radius:4px;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(28,36,44,.55);
}
.board-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 26px;background:var(--panel-2);
  font-family:var(--mono);font-size:15px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--amber);
}
.board-head .blink{animation:blink 1.6s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.board-rows{list-style:none}
.board-rows li{border-top:1px solid rgba(233,237,234,.08)}
.board-rows a{
  display:grid;grid-template-columns:86px 1fr auto;align-items:baseline;gap:20px;
  padding:15px 26px;text-decoration:none;color:var(--board-text);
  font-family:var(--mono);font-size:18px;letter-spacing:.06em;
}
.board-rows a:hover{background:rgba(223,160,69,.09);color:#fff}
.board-code{color:var(--amber);font-weight:600}
.board-dest{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-gate{color:var(--slate-soft);font-size:15px;letter-spacing:.18em;text-transform:uppercase}
.board-rows a:hover .board-gate{color:var(--amber)}
@media (max-width:640px){
  .board-rows a{grid-template-columns:64px 1fr;gap:12px;padding:13px 18px;font-size:16px}
  .board-gate{display:none}
  .board-head{padding:13px 18px;font-size:13px;letter-spacing:.18em}
}

/* ================= HERO ================= */
.hero{padding:64px 0 72px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{
  font-family:var(--sans);font-weight:900;text-transform:uppercase;
  font-size:clamp(64px,9vw,128px);line-height:.92;letter-spacing:-.01em;color:var(--ink);
}
.hero h1 .tile{color:var(--copper)}
.hero-tag{margin-top:26px;font-size:26px;line-height:1.55;color:var(--slate);max-width:34ch;font-style:italic}
.hero-meta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px 28px}
.hero-meta span{font-family:var(--mono);font-size:15.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-soft)}
.hero-meta b{color:var(--copper);font-weight:600}
.hero-fig{position:relative}
.hero-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.hero-fig::after{
  content:"ILM · 34.27° N / 77.90° W";
  position:absolute;left:14px;bottom:14px;background:var(--panel);color:var(--amber);
  font-family:var(--mono);font-size:13.5px;letter-spacing:.2em;padding:8px 12px;border-radius:2px;
}
@media (max-width:920px){
  .hero{padding:44px 0 52px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-fig img{aspect-ratio:16/10}
}

/* ================= SECTIONS ================= */
.section{padding:76px 0}
.section-tight{padding:56px 0}
.section-dark{background:var(--panel);color:var(--board-text)}
.section-dark .stamp{color:var(--amber)}
.section-shade{background:var(--paper-2)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.sec-head h2{
  font-family:var(--sans);font-weight:800;font-size:clamp(34px,4.4vw,52px);
  line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;
}
.sec-head .sec-note{font-size:21px;color:var(--slate-soft);font-style:italic;max-width:42ch}
.section-dark .sec-head .sec-note{color:#9AA5AC}

/* deck: two feature panels */
.deck{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.deck-panel{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:40px 38px;display:flex;flex-direction:column;gap:18px;position:relative;
}
.deck-panel::before{
  content:attr(data-no);position:absolute;top:30px;right:32px;
  font-family:var(--mono);font-size:15px;letter-spacing:.2em;color:var(--slate-soft);
}
.deck-panel h3{font-family:var(--sans);font-weight:800;font-size:30px;line-height:1.1;text-transform:uppercase}
.deck-panel p{font-size:21.5px;color:var(--slate)}
.deck-panel .go{margin-top:auto;font-family:var(--mono);font-size:16px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.deck-panel .go::after{content:" →"}
@media (max-width:820px){.deck{grid-template-columns:1fr}}

/* timeline strip */
.tl{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:2px solid var(--ink);margin-top:44px}
.tl li{padding:20px 18px 0 0;border-right:1px dashed var(--line)}
.tl li:last-child{border-right:none}
.tl .tl-yr{font-family:var(--mono);font-size:19px;color:var(--copper);font-weight:600}
.tl p{font-size:17.5px;line-height:1.5;color:var(--slate);margin-top:6px}
@media (max-width:920px){.tl{grid-template-columns:repeat(3,1fr)}.tl li{border-bottom:1px dashed var(--line);padding-bottom:18px}}
@media (max-width:560px){.tl{grid-template-columns:repeat(2,1fr)}}

/* article shelf */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.shelf-card{
  background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;
}
.shelf-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(28,36,44,.4);color:var(--ink)}
.shelf-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.shelf-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.shelf-body .kicker{font-size:14px}
.shelf-body h3{font-family:var(--sans);font-weight:700;font-size:24px;line-height:1.2}
.shelf-body p{font-size:19px;color:var(--slate-soft);line-height:1.55}
.shelf-body .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.shelf-card:hover .go{color:var(--copper-bright)}
@media (max-width:980px){.shelf{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.shelf{grid-template-columns:1fr}}

/* notebook rail */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.rail a{
  padding:38px 34px;text-decoration:none;color:var(--ink);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
}
.rail a:last-child{border-right:none}
.rail a:hover{background:var(--copper-pale)}
.rail .rail-no{font-family:var(--mono);font-size:52px;line-height:1;color:var(--copper);font-weight:600}
.rail h3{font-family:var(--sans);font-weight:700;font-size:23px;line-height:1.25}
.rail p{font-size:18.5px;color:var(--slate-soft);line-height:1.55}
@media (max-width:820px){
  .rail{grid-template-columns:1fr}
  .rail a{border-right:none;border-bottom:1px solid var(--line);padding:28px}
  .rail a:last-child{border-bottom:none}
}

/* ================= PARTNER CARDS ================= */
.partners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.partner-card{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:26px 26px 24px;display:flex;flex-direction:column;gap:14px;
}
.section-dark .partner-card{background:var(--panel-2);border-color:rgba(233,237,234,.14)}
.partner-logo{
  width:100%;height:64px;display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);border-radius:3px;padding:8px 16px;
}
.section-dark .partner-logo{background:rgba(233,237,234,.92)}
.partner-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.partner-name{font-family:var(--sans);font-weight:800;font-size:22px;line-height:1.2}
.partner-name a{text-decoration:none;color:inherit}
.partner-name a:hover{color:var(--copper)}
.section-dark .partner-name{color:var(--board-text)}
.partner-toggle{display:none}
.partner-desc{
  font-size:19px;line-height:1.6;color:var(--slate-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.section-dark .partner-desc{color:#9AA5AC}
.partner-more{
  cursor:pointer;font-family:var(--mono);font-size:14.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-soft);user-select:none;width:fit-content;
  padding:10px 0;margin:-10px 0;
}
.partner-more::after{content:"read more +"}
.partner-more:hover{color:var(--copper)}
.partner-toggle:checked ~ .partner-desc{-webkit-line-clamp:unset;display:block;overflow:visible}
.partner-toggle:checked ~ .partner-more::after{content:"read less −"}
.partner-cta{
  margin-top:auto;width:fit-content;font-family:var(--sans);font-weight:700;font-size:16.5px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:1.5px solid var(--copper);color:var(--copper);padding:9px 18px;border-radius:2px;
}
.partner-cta:hover{background:var(--copper);color:#fff}
.section-dark .partner-cta{border-color:var(--amber);color:var(--amber)}
.section-dark .partner-cta:hover{background:var(--amber);color:var(--panel)}

/* ================= MAP + FACTS ================= */
.field-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:stretch}
.field-grid > *{min-width:0}
.map-embed{border:1px solid var(--line);border-radius:4px;overflow:hidden;min-height:340px}
.map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.facts{list-style:none;display:flex;flex-direction:column;gap:0;border-top:2px solid var(--ink)}
.facts li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:16px 2px;border-bottom:1px dashed var(--line)}
.facts .f-k{font-family:var(--mono);font-size:15.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-soft)}
.facts .f-v{font-family:var(--sans);font-weight:700;font-size:20px;text-align:right;overflow-wrap:anywhere;min-width:0}
@media (max-width:860px){.field-grid{grid-template-columns:1fr}}

/* ================= ARTICLE PAGES ================= */
.crumbs{padding:22px 0 0;font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-soft)}
.crumbs a{color:var(--slate-soft);text-decoration:none}
.crumbs a:hover{color:var(--copper)}
.post-head{padding:40px 0 34px;max-width:960px}
.post-head h1{
  font-family:var(--sans);font-weight:900;font-size:clamp(38px,5.4vw,62px);
  line-height:1.04;letter-spacing:-.01em;text-transform:uppercase;margin-top:14px;
}
.post-head .dek{margin-top:20px;font-size:25px;font-style:italic;color:var(--slate);line-height:1.55;max-width:36ch}
.post-hero{margin:8px 0 0}
.post-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:4px}
.post-hero figcaption, .fig-cap{
  font-family:var(--mono);font-size:15px;letter-spacing:.06em;color:var(--slate-soft);
  padding-top:10px;
}
.article{max-width:820px;margin:0 auto;padding:56px 28px 40px}
.article > p, .article > ul, .article > ol{margin-bottom:1.35em}
.article .lead{font-size:26px;line-height:1.6}
.article .lead::first-letter{
  font-family:var(--sans);font-weight:900;font-size:4.2em;line-height:.8;
  float:left;padding:8px 16px 0 0;color:var(--copper);
}
.article h2{
  font-family:var(--sans);font-weight:800;font-size:32px;line-height:1.15;
  text-transform:uppercase;margin:1.7em 0 .7em;
}
.article h2 .h-no{color:var(--copper);font-family:var(--mono);font-weight:600;margin-right:12px;font-size:.85em}
.article h3{font-family:var(--sans);font-weight:700;font-size:25px;margin:1.5em 0 .6em}
.article figure{margin:2em 0}
.article figure img{width:100%;border-radius:4px}
.article ul li, .article ol li{margin-bottom:.6em}
.article ul{padding-left:1.2em}
.article ul li::marker{content:"✈  ";color:var(--copper);font-size:.8em}
.article ol{padding-left:1.4em}
.article ol li::marker{font-family:var(--mono);color:var(--copper);font-weight:600}
.pullquote{
  margin:2.2em 0;padding:0 0 0 30px;border-left:4px solid var(--copper);
  font-size:29px;line-height:1.45;font-style:italic;color:var(--slate);
}
.pullquote cite{display:block;margin-top:14px;font-style:normal;font-family:var(--mono);font-size:15.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-soft)}
.callout{
  margin:2.2em 0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--copper);
  border-radius:0 4px 4px 0;padding:26px 30px;
}
.callout .stamp{display:block;margin-bottom:10px}
.callout p{font-size:20px;color:var(--slate);line-height:1.6}
.callout ul{margin:10px 0 0;padding-left:1.2em}
.callout li{font-size:20px;color:var(--slate);margin-bottom:.5em}
.glance{
  margin:2.4em 0;background:var(--panel);color:var(--board-text);border-radius:4px;padding:30px 32px;
}
.glance .stamp{color:var(--amber);display:block;margin-bottom:14px}
.glance ul{list-style:none;padding:0;margin:0}
.glance li{
  display:flex;gap:14px;align-items:baseline;padding:10px 0;margin:0;
  border-bottom:1px dashed rgba(233,237,234,.15);font-size:19.5px;line-height:1.55;
}
.glance li:last-child{border-bottom:none}
.glance li::before{content:"▸";color:var(--amber);flex:0 0 auto}
.infocard{
  margin:1.6em 0 2em;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;
  padding:20px 24px;display:flex;flex-wrap:wrap;gap:8px 30px;align-items:baseline;
}
.infocard .f-k{font-family:var(--mono);font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-soft)}
.infocard .f-v{font-family:var(--sans);font-weight:600;font-size:18px;overflow-wrap:anywhere}
.infocard a.f-v{color:var(--copper);text-decoration:none}
.infocard a.f-v:hover{text-decoration:underline}
.article .map-embed{margin:2em 0}
.article .map-embed iframe{min-height:300px}

/* route card (news post) */
.routecard{
  margin:2.4em 0;background:var(--panel);color:var(--board-text);border-radius:4px;
  padding:30px 34px;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
  font-family:var(--mono);
}
.routecard .rc-code{font-size:52px;font-weight:600;color:var(--amber);line-height:1}
.routecard .rc-city{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#9AA5AC;margin-top:8px}
.routecard .rc-mid{text-align:center;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--board-text)}
.routecard .rc-mid .rc-plane{display:block;font-size:26px;color:var(--amber);margin-bottom:6px}
.routecard div:last-child{text-align:right}
@media (max-width:640px){
  .routecard{padding:26px 22px;gap:18px;grid-template-columns:1fr;text-align:center}
  .routecard > div{min-width:0}
  .routecard div:last-child{text-align:center}
  .routecard .rc-code{font-size:38px}
  .routecard .rc-mid{padding:4px 0}
}

/* stats row */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;margin:2.4em 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:4px;padding:22px 24px}
.stat .s-v{font-family:var(--sans);font-weight:900;font-size:40px;line-height:1;color:var(--copper)}
.stat .s-k{font-family:var(--mono);font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-soft);margin-top:10px;line-height:1.5}

/* menu list (food post) */
.menu-list{list-style:none;padding:0;margin:2em 0}
.menu-list li{display:flex;align-items:baseline;gap:12px;margin:0;padding:14px 0;border-bottom:1px dashed var(--line)}
.menu-list .m-name{font-family:var(--sans);font-weight:700;font-size:21px;white-space:nowrap}
.menu-list .m-dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-6px)}
.menu-list .m-note{font-size:18.5px;color:var(--slate-soft);text-align:right;max-width:52%}
@media (max-width:640px){
  .menu-list li{flex-wrap:wrap}
  .menu-list .m-note{max-width:100%;text-align:left}
  .menu-list .m-dots{display:none}
}

/* article timeline (history page) */
.spine{list-style:none;padding:0;margin:2.4em 0;border-left:3px solid var(--copper)}
.spine li{position:relative;padding:0 0 2em 34px;margin:0}
.spine li::before{
  content:"";position:absolute;left:-8px;top:10px;width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:3px solid var(--copper);
}
.spine .sp-yr{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--copper)}
.spine h3{font-family:var(--sans);font-weight:700;font-size:23px;margin:.2em 0 .3em}
.spine p{font-size:20.5px;color:var(--slate);line-height:1.6}

/* prev / next */
.post-nav{border-top:3px double var(--line);margin-top:30px}
.post-nav-inner{max-width:1220px;margin:0 auto;padding:36px 28px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.post-nav a{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px}
.post-nav a:hover h4{color:var(--copper)}
.post-nav .pn-dir{font-family:var(--mono);font-size:14.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-soft)}
.post-nav h4{font-family:var(--sans);font-weight:700;font-size:22px;line-height:1.25}
.post-nav .pn-next{text-align:right;align-items:flex-end}
@media (max-width:640px){.post-nav-inner{grid-template-columns:1fr;gap:20px;padding:28px}}

/* ================= CONTACT ================= */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start}
.contact-grid > *{min-width:0}
.contact-card{
  background:var(--panel);color:var(--board-text);border-radius:4px;padding:44px 42px;
}
.contact-card h2{font-family:var(--sans);font-weight:800;font-size:34px;text-transform:uppercase;line-height:1.1}
.contact-card .c-intro{margin-top:16px;font-size:21px;line-height:1.6;color:#B9C1C6;font-style:italic}
.c-lines{list-style:none;padding:0;margin:30px 0 0}
.c-lines li{display:flex;gap:18px;align-items:baseline;padding:15px 0;border-top:1px dashed rgba(233,237,234,.16)}
.c-lines .f-k{flex:0 0 108px;font-family:var(--mono);font-size:14.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.c-lines .f-v{font-size:20px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.c-lines a{color:var(--board-text);text-decoration-color:rgba(223,160,69,.5)}
.c-lines a:hover{color:var(--amber)}
.mail-cta{
  display:inline-block;margin-top:30px;background:var(--amber);color:var(--panel);
  font-family:var(--sans);font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 26px;border-radius:2px;text-decoration:none;
}
.mail-cta:hover{background:var(--copper-bright);color:#fff}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}.contact-card{padding:32px 28px}}

/* ================= FOOTER (editorial colophon) ================= */
.colophon{background:var(--panel);color:#B9C1C6;margin-top:80px}
.colophon-inner{
  max-width:1220px;margin:0 auto;padding:52px 28px 20px;
  display:grid;grid-template-columns:1.2fr .8fr;gap:44px;
}
.colophon .col-about h3{
  font-family:var(--sans);font-weight:900;font-size:22px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--board-text);
}
.colophon .col-about h3 em{font-style:normal;color:var(--amber)}
.colophon .col-about p{font-size:18.5px;line-height:1.65;margin-top:14px;max-width:52ch}
.colophon .col-about .col-note{font-family:var(--mono);font-size:14px;letter-spacing:.08em;margin-top:18px;color:#7C8890}
.col-index{display:flex;flex-direction:column;gap:6px}
.col-index .stamp{color:var(--amber);margin-bottom:8px}
.col-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.col-links a{
  font-family:var(--sans);font-weight:600;font-size:16.5px;color:#B9C1C6;
  text-decoration:none;padding:4px 0;
}
.col-links a:hover{color:var(--amber)}
.colophon-base{
  max-width:1220px;margin:0 auto;padding:20px 28px 30px;
  border-top:1px dashed rgba(233,237,234,.15);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:#7C8890;
}
@media (max-width:820px){
  .colophon-inner{grid-template-columns:1fr;gap:28px;padding:38px 24px 14px}
  .colophon .col-about p{font-size:17px}
  .col-links{gap:2px 18px}
  .colophon-base{padding:16px 24px 24px}
}

/* misc */
.cta-strip{background:var(--copper);color:#fff}
.cta-strip .wrap{padding:54px 28px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta-strip h2{font-family:var(--sans);font-weight:900;font-size:clamp(30px,4vw,44px);text-transform:uppercase;line-height:1.05}
.cta-strip p{font-size:21px;font-style:italic;opacity:.92}
.cta-strip a{
  background:#fff;color:var(--copper);text-decoration:none;font-family:var(--sans);font-weight:800;
  font-size:18px;letter-spacing:.05em;text-transform:uppercase;padding:16px 28px;border-radius:2px;white-space:nowrap;
}
.cta-strip a:hover{background:var(--panel);color:var(--amber)}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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}
.partner-card > .sponsor{flex:0 0 auto!important}
.partner-logo{flex-wrap:wrap!important}
.partner-logo > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.colophon-base{flex-wrap:wrap!important}
.colophon-base > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!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-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}
.sponsor.sponsor{justify-content:center!important}
: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):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-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}

/* 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. */
.partners-grid .partner-card .partner-logo.partner-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important}
.partners-grid .partner-card .partner-logo.partner-logo{display:block!important;width:100%!important}
.partners-grid .partner-card.partner-card img{height:48px!important;display:block!important;width:100%!important;background:transparent!important;width:100%!important;padding:0!important}

/* op-overflow-row: label.nav-toggle overhung the viewport by 52px at 320 on
   index.html — width 79px reaching x=328, white-space:normal,
   min-width:auto, inside div.header-inner (flex/nowrap,
   tracks none). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .header-inner{flex-wrap:wrap}
  .nav-toggle{min-width:0;max-width:100%}
}

/* op-overflow-grid: div overhung the viewport by 52px at 320 on
   index.html — width 344px reaching x=372, white-space:normal,
   min-width:auto, inside div.wrap.hero-grid (grid/nowrap,
   tracks 343.945px). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .wrap.hero-grid{grid-template-columns:minmax(0,1fr)}
}

/* op-overflow-pushed: span.tile overhung the viewport by 52px at 320 on
   index.html — width 147px reaching x=372, white-space:normal,
   min-width:0px, inside h1 (block/nowrap,
   tracks none). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .wrap.hero-grid div > h1{min-width:0}
  .tile{min-width:0;max-width:100%}
}

/* op-overflow-pushed: span.tile overhung the viewport by 52px at 320 on
   index.html — width 147px reaching x=372, white-space:normal,
   min-width:0px, inside h1 (block/nowrap,
   tracks none). Closed at the element that causes it, phone
   widths only, escalated because the first declaration lost the cascade. */
@media (max-width:640px){
  .wrap.hero-grid div > h1{min-width:0!important}
  .tile{min-width:0!important;max-width:100%!important}
}

/* op-overflow-cutoff: `body{overflow-x:hidden}` meant this page never scrolled sideways — it
   simply cut content off, which is why it read as clean to a scroll test. Measured at 320:
   52px of content past the edge, from three separate fixed widths:
     .deck            one grid track of 337.85px inside a 320px page
     h1 .tile         a long inline word with nowhere to break
     .partners-grid   a 300px track, so each money card reached x=328
   All three are released at phone widths; desktop keeps its fixed tracks. Tested live at 320
   in this order: +52 -> +8 -> 0. */
@media (max-width:640px){
  .deck{grid-template-columns:minmax(0,1fr)}
  h1 .tile{overflow-wrap:anywhere}
  .partners-grid{grid-template-columns:minmax(0,1fr)}
}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   3537px at 390, 22% of the whole page. Two columns bring it to
   2471px (30% shorter). Checked before writing: no new overflow, smallest mark still
   80px wide, longest blurb 3 lines, tile heights 333-438px.
   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 (.partners-grid), 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){
  .partners-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px!important}
    .partners-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .partners-grid > * *{min-width:0!important;max-width:100%}
    .partners-grid img,.partners-grid svg{max-width:100%;height:auto}

}

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

/* op-text-spill: the page scrolled sideways on phones because TEXT spilled out of boxes that
   themselves fit — which no element rect shows: span.board-dest (nowrap, "Amsterdam, Netherlands" +98px); article.deck-panel h3 (word, "The Journey to International" +7px). Each is released the way its box needs
   (a code block scrolls inside itself, nowrap copy may wrap, a squeezing row may wrap, a box
   wider than its column is held to it, a long word may break). Structural only — no spacing
   value of mine. Verified on every failing page with webfonts settled; desktop unchanged. */
@media (max-width:400px){
  span.board-dest{white-space:normal!important;overflow-wrap:anywhere!important}
  article.deck-panel h3{overflow-wrap:anywhere!important;min-width:0!important}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.article > figure > img,
  div.hero-grid.wrap > figure.hero-fig > img,
  div.shelf > a.shelf-card > img,
  div.wrap > figure.post-hero > img){height:auto}
/* op-img-dims:end */
@media (min-width:640px) and (max-width:659px){.partners-grid: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}}@media (min-width:700px) and (max-width:1019px){.partners-grid: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}}
.tl li{padding-left:18px}.tl li:first-child{padding-left:0}@media (max-width:920px){.tl li:first-child{padding-left:18px}.tl li:nth-child(3n+1){padding-left:0}.tl li:nth-child(3n){border-right:none}}@media (max-width:560px){.tl li:nth-child(3n+1){padding-left:18px}.tl li:nth-child(3n){border-right:1px dashed var(--line)}.tl li:nth-child(2n+1){padding-left:0}.tl li:nth-child(2n){border-right:none}}