/* Escargo /discover — Explore destination. Scoped to .ex-*.
   Reuses the site palette; adds no button/card system of its own. The provider
   cards are the canonical .ec-* cards from customer.js and are NOT restyled. */

.ex{max-width:1320px;margin:0 auto;padding:26px 20px 70px}
.ex-ey{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#719323;margin:0 0 10px}
.ex-head{text-align:center;max-width:900px;margin:12px auto 6px;padding:32px 28px 24px;border-radius:28px;
  background:radial-gradient(70% 120% at 8% 0%,rgba(217,255,77,.32),transparent 62%),radial-gradient(58% 110% at 94% 100%,rgba(162,224,204,.33),transparent 64%),#f8fcf1}
.ex-head .ex-loc{justify-content:center}
.ex-sub{margin-left:auto;margin-right:auto}
.ex-head h1{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:900;letter-spacing:-.03em;margin:0 0 10px;color:#14311f}
.ex-sub{color:#69736f;max-width:62ch;margin:0 0 18px;line-height:1.5}
.ex-loc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ex-loc input{flex:1 1 260px;min-height:46px;padding:11px 14px;border:1px solid #dbe6de;border-radius:12px;font-size:16px}
.ex-btn{min-height:46px;padding:0 18px;border-radius:12px;border:1px solid #14311f;background:#14311f;color:#fff;
  font:700 14px Inter,sans-serif;cursor:pointer}
.ex-btn.ex-ghost{background:#fff;color:#14311f}
.ex-locnote{margin:10px 0 0;font-size:13px;color:#69736f}
.ex-live{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:4px 8px;border-radius:999px;background:rgba(217,255,77,.55);color:#38510d;font-size:10px;letter-spacing:.08em}
.ex-live[hidden]{display:none}
.ex-live i{width:6px;height:6px;border-radius:50%;background:#456b0f;box-shadow:0 0 0 3px rgba(69,107,15,.12)}
/* Meets gateway tile — prominent, honest-count doorway into /meets */
.ex-gateway{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:16px 0 0;padding:14px 16px;border:1px solid #dfe7e0;border-radius:12px;background:linear-gradient(135deg,#f2f8ec, #fff 65%);text-decoration:none;color:inherit}
.ex-gateway b{font-size:15px;color:#073b24}
.ex-gateway span{font-size:13px;color:#5b6a5f;min-width:0}
.ex-gateway .ex-gateway-cta{margin-left:auto;font-weight:800;color:#4d7c0f;white-space:nowrap}
.ex-gateway:hover{border-color:#4d7c0f}
/* the doorway with a REAL event cover behind it (set by fillGateway only when
   one exists on file) — text flips to light over the darkened photo */
.ex-gateway.ex-gateway-live{background-size:cover;background-position:center;border-color:#0b3d26;
  min-height:96px;align-content:center}
.ex-gateway.ex-gateway-live b{color:#f4fbe9}
.ex-gateway.ex-gateway-live span{color:#d6e4cf}
.ex-gateway.ex-gateway-live .ex-gateway-cta{color:#d9ff4d}
/* provider filter chips with the canonical category art tile */
.ex-chip.ex-chip-art{display:inline-flex;align-items:center;gap:8px;padding-left:6px}
.ex-chipart{width:28px;height:28px;border-radius:999px;background-size:cover;background-position:center;
  border:1px solid #dbe6de;flex:none}
/* truthful rail count — exactly what the rail is showing */
.ex-railcount{font-size:12.5px;font-weight:700;color:#5b6a5f;background:#eef4ee;border-radius:999px;
  padding:3px 10px;vertical-align:middle;margin-left:6px}

.ex-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 12px}
.ex-layer{display:flex;border:1px solid #dbe6de;border-radius:12px;overflow:hidden}
.ex-tab{border:0;background:#fff;min-height:44px;padding:0 16px;font:700 13.5px Inter,sans-serif;cursor:pointer}
.ex-tab.on{background:#14311f;color:#fff}
.ex-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 100%;order:3}
.ex-chip{border:1px solid #dbe6de;background:#fff;border-radius:999px;min-height:40px;padding:0 14px;
  font:700 13px Inter,sans-serif;cursor:pointer}
.ex-chip.on{background:#d9ff4d;border-color:#c7ef3a}
.ex-viewsw{display:flex;border:1px solid #dbe6de;border-radius:10px;overflow:hidden;margin-left:auto}
.ex-viewsw button{border:0;background:#fff;min-height:44px;padding:0 15px;font:700 13px Inter,sans-serif;cursor:pointer}
.ex-viewsw button.on{background:#d9ff4d}

.ex-shell{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;min-height:600px}
.ex-map{position:relative;z-index:0;isolation:isolate;border:1px solid #dbe6de;border-radius:16px;overflow:hidden;background:#eef2ea;min-height:600px}
.ex-panel{border:1px solid #dbe6de;border-radius:16px;background:#fff;display:flex;flex-direction:column;min-height:600px}
.ex-count{margin:0;padding:13px 16px;border-bottom:1px solid #eef2ea;font:700 13px Inter,sans-serif;color:#41504a}
.ex-results{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.ex-note{color:#69736f;font-size:14px;padding:14px;margin:0;line-height:1.5}
.ex-err{color:#8c2f2f}

.ex-free{border:1px solid #e6ece5;border-radius:12px;padding:12px 14px}
.ex-free h3{margin:0 0 3px;font-size:14.5px;letter-spacing:-.01em}
.ex-free p{margin:0;font-size:13px;color:#69736f;line-height:1.45}
.ex-op{font-weight:700;color:#41504a !important}
.ex-dir{display:inline-block;margin-top:8px;font:700 13px Inter,sans-serif;color:#14311f}
.ex-nogeo{display:inline-block;margin-top:8px;font-size:12.5px;color:#8a938e}
.ex-attr{margin-top:6px !important;font-size:11.5px;color:#8a938e !important}

.ex-sec{margin:34px 0 0}
.ex-sec h2{font-size:1.25rem;letter-spacing:-.02em;margin:0 0 14px}
.ex-sec h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#69736f;margin:16px 0 8px}

/* Explore 2.0 Wire. It has no static fallback: this surface is mounted only
   when the approved public editorial reader supplies attributed stories. */
.ex-news{position:relative;margin:40px 0 0;padding:26px;border:1px solid #dbe8c5;border-radius:24px;overflow:hidden;background:linear-gradient(130deg,#f7fbef 0%,#fff 57%,#eff9df 100%)}
.ex-news:before{content:"";position:absolute;inset:auto -8% -70% auto;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(217,255,77,.48),rgba(217,255,77,0) 67%);pointer-events:none}
.ex-news-head,.ex-newstopics,.ex-news-grid{position:relative}
.ex-news-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:18px}
.ex-news .ex-ey{margin-bottom:5px}.ex-news h2{margin:0;max-width:18ch;font-size:clamp(1.55rem,3.2vw,2.35rem);letter-spacing:-.035em;line-height:1.03;color:#14311f}
.ex-news-note{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5a6b53;white-space:nowrap}
.ex-newstopics{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px;scrollbar-width:thin}
.ex-newstopic{flex:0 0 auto;min-height:38px;padding:0 13px;border:1px solid #d7e3d0;border-radius:999px;background:rgba(255,255,255,.75);color:#385143;font:700 12.5px Inter,sans-serif;cursor:pointer}
.ex-newstopic.on,.ex-newstopic:hover{background:#d9ff4d;border-color:#b7e62f;color:#14311f}
.ex-news-grid{display:grid;grid-template-columns:1.35fr repeat(2,1fr);grid-auto-rows:minmax(170px,auto);gap:12px}
.ex-news-card{display:flex;flex-direction:column;justify-content:flex-end;gap:9px;min-height:180px;padding:18px;border:1px solid #e2eadc;border-radius:17px;background:rgba(255,255,255,.9);text-decoration:none;color:#14311f;box-shadow:0 1px 2px rgba(7,59,36,.04);transition:transform .16s ease,box-shadow .16s ease}
.ex-news-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(7,59,36,.11)}
.ex-news-card b{font-size:17px;line-height:1.14;letter-spacing:-.02em}.ex-news-lead{grid-row:span 2;min-height:372px;background:linear-gradient(155deg,#14311f,#204d2d 66%,#496317)}
.ex-news-lead b{font-size:clamp(1.45rem,2.4vw,2.1rem);color:#fff}.ex-news-lead .ex-news-meta,.ex-news-lead .ex-news-snippet{color:#d5e1d1}.ex-news-lead .ex-news-open{color:#d9ff4d}
.ex-news-meta,.ex-news-open{font:800 10.5px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}.ex-news-meta{color:#648621}.ex-news-snippet{font-size:13.5px;line-height:1.46;color:#526159}.ex-news-open{margin-top:auto;color:#3f6212}

/* Meets keeps its own motorsport language — CONTAINED to this rail. The rest of
   Explore stays on the light Escargo canvas (founder §12). */
.ex-meets{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.ex-meet{display:flex;flex-direction:column;gap:4px;text-decoration:none;background:#fff;
  border:1px solid #dbe6de;border-radius:12px;padding:13px 15px;color:#14311f}
.ex-meet:hover{border-color:#87b52a}
.ex-meet-when{font:800 11px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5c8712}
.ex-meet b{font-size:14.5px;letter-spacing:-.01em}
.ex-meet-where{font-size:12.5px;color:#69736f}

/* Card rails reuse the canonical .ec-* provider card untouched; this only lays
   them out. No card styling is overridden here. */
.ex-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}

.ex-comms{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.ex-comm-card{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit;
  border:1px solid #dbe6de;border-radius:12px;padding:13px 15px;background:#fff}
.ex-comm-card:hover{border-color:#14311f}
.ex-comm-card b{font-size:14.5px}
.ex-comm-card span{font-size:12.5px;color:#69736f}

.ex-minis{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.ex-mini{flex:0 0 auto;min-width:150px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;
  border:1px solid #dbe6de;border-radius:12px;padding:11px 13px;background:#fff}
.ex-mini b{font-size:13.5px}
.ex-mini span{font-size:12px;color:#69736f}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .ex-shell{grid-template-columns:1fr;min-height:0}
  .ex-map,.ex-panel{min-height:0}
  .ex-map{height:420px}
  .ex-panel{max-height:none}
  /* On one column the switch becomes real: show one or the other, never a
     420px map squeezed above a scroll-in-scroll list. */
  .ex-shell[data-view="list"] .ex-map{display:none}
  .ex-shell[data-view="map"] .ex-panel{display:none}
  .ex-results{overflow:visible}
}
@media (max-width:767px){
  .ex{padding:18px 14px 64px}
  .ex-head{padding:25px 16px 20px;border-radius:22px}
  .ex-viewsw{margin-left:0}
  .ex-controls{gap:10px}
  .ex-map{height:340px}
  .ex-meets,.ex-comms,.ex-cards{grid-template-columns:1fr}
  .ex-news{margin-top:28px;padding:20px 16px;border-radius:20px}.ex-news-head{align-items:flex-start;flex-direction:column;gap:8px}.ex-news-note{white-space:normal}
  .ex-news-grid{grid-template-columns:1fr;grid-auto-rows:auto}.ex-news-lead{grid-row:auto;min-height:270px}.ex-news-card{min-height:160px}
}
@media (prefers-reduced-motion:reduce){ .ex-chip,.ex-btn,.ex-mini,.ex-meet{transition:none} }

/* ══════════════════════════════════════════════════════════════════════════
   EXPLORE — BRIGHT SOCIAL SYSTEM (founder design review, 2026-08-28).
   Replaces the dark V2.1 social cards wholesale: white/off-white canvas,
   photography-led cards, bright lime accents, larger type, varied composition.
   Structure, ids, honesty rules and the .ex-map containment (position/z-index/
   isolation/overflow, pinned) are UNTOUCHED — this is the visual language only.
   ══════════════════════════════════════════════════════════════════════════ */
.ex-sec{margin-top:52px}
.ex-sec h2{font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:900;letter-spacing:-.02em;margin:0 0 6px;color:#14311f}
.ex-secsub{font-size:14px;color:#69736f;margin:0 0 16px}
/* varied composition: events + campus sections read as CENTRED editorial moments */
/* Left-aligned with every other Explore heading (founder review 2026-09-05). These two were
   centred by an ID rule, so the heading floated in the middle of the band while its own
   eyebrow and standfirst stayed left - the row read as dead space on both sides. */
#ex-meets-sec h2,#ex-campus-sec h2{text-align:left}
#ex-campus-sec .ex-secsub{text-align:left;max-width:520px}
/* campus section sits on a soft lime field, full-bleed */
#ex-campus-sec{background:#f4fae8;border-radius:24px;padding:34px 22px 26px;margin-top:56px}

/* ── horizontal snap rails: one substantial card after another ── */
.ex-commgrid,.ex-meetgrid,.ex-campusrail{display:flex;gap:18px;overflow-x:auto;
  padding:6px 2px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ex-comm-card{flex:0 0 clamp(300px,34vw,400px)}
/* the FIRST community is the editorial feature — noticeably larger */
.ex-commgrid .ex-comm-card:first-child{flex-basis:clamp(340px,46vw,560px)}
.ex-campus-card{flex:0 0 clamp(270px,30vw,360px)}
.ex-meetgrid .ex-meet{flex:0 0 clamp(270px,30vw,360px)}
@media (max-width:640px){
  .ex-comm-card,.ex-commgrid .ex-comm-card:first-child{flex-basis:84vw}   /* dominant + peek */
  .ex-campus-card{flex-basis:76vw}
  .ex-meetgrid .ex-meet{flex-basis:78vw}
}

/* ── community cards: bright, image-led, social ── */
.ex-comm-card{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;border-radius:20px;
  background:#fff;border:1px solid #e3ebe2;color:#14311f;text-decoration:none;scroll-snap-align:start;
  box-shadow:0 1px 2px rgba(7,59,36,.04);transition:box-shadow .15s ease, transform .15s ease}
.ex-comm-card:hover{box-shadow:0 10px 30px rgba(7,59,36,.12);transform:translateY(-2px)}
.ex-commimg{display:block;height:clamp(170px,24vw,230px);background-size:cover;background-position:center}
/* Escargo-designed category art: BRIGHT identity, never a fake photo */
.ex-commbrand{display:flex;align-items:flex-end;justify-content:space-between;padding:14px 16px;position:relative}
.ex-brandword{font:800 13px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#14311f;
  background:#d9ff4d;padding:5px 12px;border-radius:99px}
.ex-brandmark{font:900 72px Inter,sans-serif;color:rgba(20,49,31,.16);line-height:.8}
.ex-brand-bmw,.ex-brand-german{background:linear-gradient(135deg,#dfe9ff,#eef4e4 70%)}
.ex-brand-jap{background:linear-gradient(135deg,#ffe3ea,#eef4e4 70%)}
.ex-brand-college{background:linear-gradient(135deg,#dff3e6,#f4fae8 70%)}
.ex-brand-local,.ex-brand-general{background:linear-gradient(135deg,#eaf6d2,#f7fbef 70%)}
.ex-brand-modified,.ex-brand-drift{background:linear-gradient(135deg,#ffedd2,#f7fbef 70%)}
.ex-brand-supercars,.ex-brand-classics{background:linear-gradient(135deg,#f6e8d8,#f7fbef 70%)}
.ex-commbody{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.ex-commbody b{font-size:18px;font-weight:800;letter-spacing:-.015em}
.ex-commgrid .ex-comm-card:first-child .ex-commbody b{font-size:21px}
.ex-commmeta{font-size:12.5px;color:#69736f;text-transform:capitalize}
.ex-commdesc{font-size:13.5px;color:#41504a;line-height:1.5}
.ex-commev{font:800 10.5px Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#5c8712}
.ex-commopen{font-size:13.5px;font-weight:800;color:#3f6212;margin-top:8px}

/* ── event cards: bright, image-led ── */
.ex-meetgrid .ex-meet{padding:0;overflow:hidden;border-radius:20px;scroll-snap-align:start;
  background:#fff;border:1px solid #e3ebe2;color:#14311f;box-shadow:0 1px 2px rgba(7,59,36,.04)}
.ex-meetgrid .ex-meet:hover{box-shadow:0 10px 30px rgba(7,59,36,.12);border-color:#c7ef3a}
.ex-meetimg{display:block;height:clamp(130px,18vw,170px);background-size:cover;background-position:center}
.ex-meetbody{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px}
.ex-meetbody b{font-size:16.5px;font-weight:800}
.ex-meetgrid .ex-meet .ex-meet-when{color:#5c8712}
.ex-meetgrid .ex-meet .ex-meet-where{color:#69736f}
/* intentional empty-events card: bright and inviting, never a void */
.ex-evempty{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:#14311f;
  background:#f4fae8;border:1px dashed #b9d977;border-radius:18px;padding:18px 20px;max-width:520px;margin:0 auto;text-align:center}
.ex-evempty b{font-size:15.5px}
.ex-evempty span{font-size:13.5px;color:#5b6a5f;line-height:1.5}
.ex-evemptycta{font-weight:800;color:#3f6212 !important;margin-top:6px}

/* ── campus cards: bright destinations on the lime field ── */
.ex-campus-card{display:flex;flex-direction:column;text-decoration:none;color:#14311f;border-radius:20px;
  overflow:hidden;background:#fff;border:1px solid #dfeccb;scroll-snap-align:start;
  box-shadow:0 1px 2px rgba(7,59,36,.05);transition:box-shadow .15s ease, transform .15s ease}
.ex-campus-card:hover{box-shadow:0 10px 30px rgba(7,59,36,.12);transform:translateY(-2px)}
.ex-campusimg{display:block;height:clamp(140px,20vw,180px);background-size:cover;background-position:center}
.ex-campusimg-txt{display:flex;align-items:center;justify-content:center;font:900 46px Inter,sans-serif;
  color:#3f6212;background:linear-gradient(135deg,#dff3e6,#eaf6d2 70%)}
.ex-campusbody{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.ex-campusbody b{font-size:16.5px;font-weight:800;letter-spacing:-.015em}
.ex-campusloc{font-size:12.5px;color:#69736f}
.ex-campustag{font:800 10.5px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#87986a;margin-top:2px}
.ex-campusopen{font-size:13.5px;font-weight:800;color:#3f6212;margin-top:8px}

/* ── provider rails become horizontal (shorter page) ── */
#ex-rec-sec .ex-cards,#ex-new-sec .ex-cards{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
#ex-rec-sec .ex-cards>*,#ex-new-sec .ex-cards>*{flex:0 0 clamp(250px,28vw,320px);scroll-snap-align:start}
@media (max-width:640px){ #ex-rec-sec .ex-cards>*,#ex-new-sec .ex-cards>*{flex-basis:78vw} }

/* ── the map is a CONTEXTUAL module, not the destination ──
   Same DOM, same containment stack (position/z-index/isolation/overflow are set
   in the pinned .ex-map rule above and stay authoritative); this only reduces
   its footprint: a compact split module with the list carrying equal weight. */
.ex-around{margin-top:56px;background:#fbfdf7;border:1px solid #eef2e4;border-radius:24px;padding:26px 22px 22px}
.ex-around h2{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:900;letter-spacing:-.02em;margin:0 0 12px;text-align:center}
.ex-shell{min-height:440px;grid-template-columns:.95fr 1.05fr}
.ex-map{min-height:440px}
.ex-panel{min-height:440px}
@media (max-width:1023px){ .ex-shell{min-height:0} .ex-map{height:360px;min-height:0} }
@media (prefers-reduced-motion:reduce){ .ex-comm-card,.ex-campus-card,.ex-meetgrid .ex-meet{transition:none} }

/* ══════════════════════════════════════════════════════════════════════════
   EXPLORE 2.0 — EDITORIAL AUTOMOTIVE-CULTURE COMPOSITION.
   The map, provider and account modules retain their existing data/rendering
   seams. This layer changes the order, scale and visual language so Explore
   opens as Escargo's automotive world rather than as a service directory.
   ══════════════════════════════════════════════════════════════════════════ */
.ex-route-wrap{max-width:none!important;width:100%!important;padding-left:0!important;padding-right:0!important}.ex-route-wrap #dv-main{width:100%}.ex-publication{max-width:1440px;margin:0 auto;padding:0 28px 92px;color:#102619;background:
  radial-gradient(65rem 34rem at 8% 7%,rgba(217,255,77,.18),transparent 64%),
  radial-gradient(55rem 42rem at 93% 28%,rgba(86,205,169,.10),transparent 66%),#f8faf6}
.ex-publication:before{content:"";position:fixed;z-index:-1;inset:0;background:radial-gradient(48rem 28rem at 80% 80%,rgba(255,215,105,.09),transparent 70%);pointer-events:none}
.ex-cover{position:relative;margin:0 -28px 68px;min-height:calc(100vh - 104px);isolation:isolate;background:#10251a;overflow:hidden}
.ex-cover-bar{position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px clamp(24px,4vw,62px);color:#fff;border-bottom:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(0,0,0,.42),transparent)}
.ex-cover-bar p{display:flex;gap:8px;align-items:center;margin:0;font:800 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}.ex-cover-bar p b{color:#d9ff4d}
.ex-cover-topics{display:flex;max-width:57vw;gap:5px;overflow:auto;scrollbar-width:none}.ex-cover-topics .ex-newstopic{min-height:30px;border-color:rgba(255,255,255,.32);background:rgba(10,23,16,.38);color:#fff;backdrop-filter:blur(14px)}.ex-cover-topics .ex-newstopic.on{background:#d9ff4d;border-color:#d9ff4d;color:#123222}
.ex-cover-rail{display:flex;min-height:calc(100vh - 104px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.ex-cover-story{position:relative;display:none;flex:0 0 100%;min-height:calc(100vh - 104px);overflow:hidden;scroll-snap-align:start;background:#173527}.ex-cover-story.is-active{display:block}.ex-cover-photo,.ex-editorial-photo{position:absolute;inset:0;background-image:var(--ex-image);background-size:cover;background-position:var(--ex-position);transform:scale(1.015);filter:saturate(1.06) contrast(1.04)}.ex-cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,13,9,.84) 0%,rgba(3,13,9,.51) 40%,rgba(3,13,9,.06) 75%),linear-gradient(0deg,rgba(3,13,9,.64),transparent 45%)}
.ex-cover-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100vh - 104px);max-width:820px;padding:clamp(150px,20vh,220px) clamp(28px,7vw,116px) 104px;color:#fff}.ex-cover-copy p,.ex-ed-head p{margin:0 0 15px;font:800 11px/1.15 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#d9ff4d}.ex-cover-copy h1{margin:0;max-width:min(24ch,100%);font:900 clamp(1.9rem,4.4vw,4rem)/.98 Arial,sans-serif;letter-spacing:-.06em;text-transform:uppercase;color:#fff!important}.ex-cover-copy>span{max-width:47ch;margin:28px 0 0;font-size:15px;line-height:1.45;color:#e9f0e9}.ex-cover-copy footer{display:flex;align-items:center;gap:18px;margin-top:28px}.ex-cover-copy footer b{font:800 10px Inter,sans-serif;letter-spacing:.12em;color:#d7e8d8;text-transform:uppercase}.ex-cover-copy footer button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(255,255,255,.10);color:#fff;font:800 12px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;backdrop-filter:blur(12px);cursor:pointer}.ex-cover-copy footer button:hover{background:#d9ff4d;color:#102619;border-color:#d9ff4d}
.ex-cover-controls{position:absolute;z-index:4;inset:auto clamp(28px,4vw,62px) 28px;display:flex;align-items:center;gap:12px;color:#fff}.ex-cover-arrow,.ex-cover-tab{display:grid;place-items:center;border:1px solid rgba(255,255,255,.42);background:rgba(10,25,17,.42);color:#fff;backdrop-filter:blur(13px);cursor:pointer}.ex-cover-arrow{width:38px;height:38px;border-radius:50%;font-size:18px}.ex-cover-tabs{display:flex;gap:6px}.ex-cover-tab{width:34px;height:30px;border-radius:9px;font:800 10px Inter,sans-serif}.ex-cover-tab.on,.ex-cover-arrow:hover{background:#d9ff4d;color:#14311f;border-color:#d9ff4d}.ex-cover-development{margin-left:auto;padding:7px 11px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(4,16,10,.38);font:800 9px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(12px)}
/* TEXT-LED STORY (2026-09-04). The treatment for a story with no rights-cleared media, which
   is most real stories until a media-rights record exists. It is deliberately PREMIUM rather
   than a stripped-down card: generous type, a strong rule, real whitespace - so the honest
   choice never looks like the broken one, and nobody is tempted to paste in an unrelated
   photograph to make the grid look finished. */
.ex-editorial-card.is-textled,.ex-people-card.is-textled,.ex-built-card.is-textled,
.ex-newnext-card.is-textled,.ex-motorsport-card.is-textled,.ex-ireland-card.is-textled,
article.is-textled{position:relative;display:flex;align-items:flex-end;min-height:184px;padding:20px;border:1px solid #d7e3d0;border-radius:18px;background:linear-gradient(158deg,#f7fbf4 0%,#eef6ea 62%,#e6f2df 100%);box-shadow:0 2px 12px rgba(7,59,36,.05);overflow:hidden}
article.is-textled:before{content:"";position:absolute;left:20px;top:20px;width:34px;height:3px;border-radius:2px;background:#d9ff4d}
article.is-textled .ex-editorial-copy{position:static;display:flex;flex-direction:column;gap:8px;padding:0;background:none;color:#14311f}
article.is-textled small{font:800 10.5px Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#5a6b53}
article.is-textled h3{margin:0;font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.1;letter-spacing:-.02em;color:#0f2a1a}
article.is-textled strong{font:800 11px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#3d5c46}
article.is-textled em{font:700 10px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#7d8f78;font-style:normal}
article.is-textled.is-lead{min-height:300px}
article.is-textled.is-lead h3{font-size:clamp(1.5rem,3vw,2.3rem)}
/* WIRE RHYTHM (2026-09-05). The grid previously gave every card the same 685px width, so a
   feed of six stories read as a list. Weight now varies horizontally as well as vertically:
   one dominant lead, two medium, the rest compact. Mobile collapses to a single column, where
   stacking is correct and column tricks would only shrink the type. */
@media(min-width:900px){
  /* minmax(0,1fr), not 1fr: a bare 1fr is minmax(AUTO,1fr), so a long headline sets the track's
     minimum and the fr distribution collapses — measured as "0px 0px 245px 245px 438px 438px"
     instead of six equal columns. The explicit gap is restated because a later unconditional
     rule resets parts of this grid. */
  .ex-news-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:14px}
  .ex-news-card{min-width:0}
  .ex-news-card.ex-news-lead{grid-column:span 6;grid-row:auto;min-height:300px}
  .ex-news-card.ex-news-mid{grid-column:span 3;min-height:190px}
  .ex-news-card.ex-news-compact{grid-column:span 2;min-height:158px}
  .ex-news-card.ex-news-compact b{font-size:15.5px;line-height:1.16}
  .ex-news-card.ex-news-compact .ex-news-snippet{display:none}
}
@media(min-width:900px) and (max-width:1180px){
  .ex-news-card.ex-news-compact{grid-column:span 3}
}
/* QUICK ACCESS PRESENCE (2026-09-05). It was 78px, about 0.7% of the page — correct in
   position but too quiet to read as a primary Escargo gateway. Taller targets, a clearer
   surface and a marker per destination, still a compact rail rather than a dashboard grid. */
.ex-quick{gap:12px;margin:0 0 54px;padding:4px 0 14px}
.ex-quick a{position:relative;min-height:86px;padding:16px 17px 15px;border-radius:18px;border-color:#cfe0c6;background:linear-gradient(180deg,#ffffff,#f1f8ee)}
.ex-quick a:before{content:"";position:absolute;left:17px;top:15px;width:22px;height:3px;border-radius:2px;background:#d9ff4d}
.ex-quick b{margin-top:13px;font-size:16px}
.ex-quick span{font-size:11px}
@media(min-width:720px){.ex-quick{gap:14px}}
/* STORY DETAIL (2026-09-05). A reading surface, so it is measured for reading: a bounded
   line length, generous leading and real hierarchy. It is deliberately comfortable WITHOUT an
   image, because most true stories will have none until a rights record exists — the honest
   layout must never look like the broken one. */
.nw-story{padding:clamp(22px,4vw,54px) 0 90px}
.nw-story .page-width{max-width:760px}
.nw-crumbs{font:800 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#5a6b53;margin:0 0 22px}
.nw-crumbs a{color:#2f6f4a;text-decoration:none}.nw-crumbs a:hover{text-decoration:underline}
.nw-crumbs span{margin:0 6px;color:#9bb094}
.nw-kicker{font:800 11.5px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#2f6f4a;margin:0 0 10px}
.nw-story h1{margin:0 0 14px;font-size:clamp(1.85rem,4.4vw,3.05rem);line-height:1.06;letter-spacing:-.028em;color:#0f2a1a}
.nw-time{margin:0 0 6px;font:600 13px Inter,sans-serif;color:#5a6b53}
.nw-certainty{display:inline-block;margin:0 0 18px;padding:3px 10px;border-radius:999px;background:#fff6d6;border:1px solid #ecd98a;font:800 10.5px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#7a5c12}
.nw-media{margin:24px 0;border-radius:16px;overflow:hidden;border:1px solid #d7e3d0}
.nw-media img{display:block;width:100%;height:auto}
.nw-media figcaption{padding:8px 12px;font:600 11.5px Inter,sans-serif;color:#5a6b53;background:#f5faf2}
/* The 16:9 box now sits on an INNER frame. It used to be on .nw-embed itself with height:0 and
   overflow:hidden, which would have clipped the asset credit the moment one was added. */
.nw-embed{margin:24px 0}
.nw-embed-frame{position:relative;padding-bottom:56.25%;height:0;border-radius:16px;overflow:hidden}
.nw-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nw-embed figcaption{margin:9px 0 0;font:600 12px Inter,sans-serif;color:#6f8574}
.nw-summary{margin:22px 0;font-size:clamp(1.02rem,1.9vw,1.2rem);line-height:1.62;color:#1d3a28}
.nw-story h2{margin:34px 0 12px;font-size:clamp(1.12rem,2.1vw,1.4rem);letter-spacing:-.015em;color:#0f2a1a}
.nw-facts,.nw-also{margin:0 0 18px;padding-left:20px}
.nw-facts li,.nw-also li{margin:0 0 8px;line-height:1.55;color:#1d3a28}
.nw-original{margin:32px 0 10px}
.nw-read{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;border-radius:14px;background:#14311f;color:#eafff2;font:800 14.5px Inter,sans-serif;text-decoration:none;transition:transform .16s ease,background .16s ease}
.nw-read:hover,.nw-read:focus-visible{background:#0f2a1a;transform:translateY(-1px)}
.nw-attrib{margin:10px 0 0;font:600 12px Inter,sans-serif;color:#7d8f78}
.nw-foot{margin:44px 0 0}
.nw-back{font:800 13px Inter,sans-serif;color:#2f6f4a;text-decoration:none}
.nw-back:hover{text-decoration:underline}
.nw-missing h1{font-size:clamp(1.5rem,3.4vw,2.2rem)}
@media(max-width:520px){.nw-story{padding-top:16px}.nw-read{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.nw-read{transition:none}.nw-read:hover{transform:none}}
/* STORY-CARD MEDIA VARIANTS (founder ruling 2026-09-05). Media is used for RHYTHM, so only the
   minority of cards carrying an APPROVED exact asset are treated. A card with an approved embed
   gets a video affordance — deliberately a drawn play glyph, NOT the provider's thumbnail, which
   is not licensed outside the official player. Text-led remains a first-class card. */
/* PLAYER CARD. The card that carries a genuinely licensed asset shows the OFFICIAL player, which
   is the whole point: real motion, real subject, nothing lifted. It is an <article> rather than an
   <a> because an iframe inside an anchor swallows its own clicks — the text below is the link. */
.ex-news-player-card{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.ex-news-player{margin:0;display:block}
.ex-news-player > iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;background:#0f2a1a}
.ex-news-player figcaption{margin:6px 0 0;font:600 11px Inter,sans-serif;color:#6f8574}
.eo a.ex-news-body,.ex-news-body{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit}
.ex-news-video{position:relative}
.ex-news-play{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0 0 9px;border-radius:50%;background:#14311f}
.ex-news-play::after{content:"";display:block;width:0;height:0;margin-left:3px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #eafff2}
.ex-news-mediahint{display:block;margin:0 0 7px;font:800 11px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#2f6f4a}
.ex-news-figure{display:block;margin:0 0 11px;border-radius:12px;overflow:hidden;background:#eef4ea}
.ex-news-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ex-news-credit{display:block;margin:-4px 0 8px;font:600 11px Inter,sans-serif;color:#6f8574}
/* Once the fallback strips the figure the card is an ordinary text card again — no reserved
   empty box is left behind, which is the whole point of removing the node rather than hiding it. */

/* CREATOR / BUILDS RAIL (founder ruling 2026-09-05). Uses the Explore palette already in this
   file — no second visual language. Anchor colours are scoped through .eo from the outset because
   escargo-os.css sets `.eo a{color:inherit}` at (0,1,1) and would otherwise win. */
.ex-creator-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 46px}
@media(min-width:720px){.ex-creator-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.eo a.ex-creator-card,.ex-creator-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:18px 19px;border:1px solid #d7e3d0;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(243,249,240,.92));color:#14311f;text-decoration:none;box-shadow:0 2px 12px rgba(7,59,36,.06);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.eo a.ex-creator-card:hover,.eo a.ex-creator-card:focus-visible{transform:translateY(-2px);border-color:#b7e62f;box-shadow:0 14px 28px rgba(7,59,36,.13)}
.ex-creator-badge{align-self:flex-start;padding:3px 9px;border-radius:999px;background:#14311f;color:#eafff2;font:800 10.5px/1.5 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ex-creator-meta{font:700 11.5px Inter,sans-serif;color:#5d7a63;letter-spacing:.02em}
.ex-creator-card b{font:800 17px/1.25 Inter,sans-serif;color:#0f2a1a;letter-spacing:-.01em}
.ex-creator-snippet{font:500 13.5px/1.5 Inter,sans-serif;color:#3f5646}
.ex-creator-open{margin-top:2px;font:800 12.5px Inter,sans-serif;color:#2f6f4a}
@media(prefers-reduced-motion:reduce){.eo a.ex-creator-card{transition:none}.eo a.ex-creator-card:hover{transform:none}}

/* THE WIRE - IMAGE-LED COMPOSITION (architectural correction 2026-09-05).
   Images dominate; text supports them. One lead, two secondaries, a mosaic, then a rail of small
   cards. Every card is an <a> with the visual layer underneath and the copy over a gradient that
   exists only where the text sits - no opaque boxes over photography. Text-led cards use the
   designed lane treatment (.ex-wc-art), which is Escargo-owned by construction. Scoped through
   .eo where colour matters, because escargo-os.css sets `.eo a{color:inherit}` at (0,1,1). */
#ex-news-grid.ex-news-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:12px;grid-auto-rows:auto}
.eo a.ex-wc,.ex-wc{position:relative;display:block;overflow:hidden;border-radius:16px;background:#10251a;color:#fff;text-decoration:none;isolation:isolate;min-height:200px;box-shadow:0 2px 12px rgba(7,59,36,.08);transition:transform .16s ease,box-shadow .16s ease}
.eo a.ex-wc:hover,.ex-wc:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(7,59,36,.16)}
.ex-wc-lead,.eo a.ex-wc-lead{grid-column:span 6;min-height:min(62vh,540px)}
.ex-wc-second,.eo a.ex-wc-second{min-height:min(36vh,320px)}
.ex-wc-second{grid-column:span 3;min-height:300px}
.ex-wc-mosaic{grid-column:span 2;min-height:250px}
.ex-wc-rail{grid-column:span 2;min-height:190px}
.ex-wc-figure,.ex-wc-art{position:absolute;inset:0;z-index:0;display:block}
.ex-wc-figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.ex-wc-art{background:radial-gradient(120% 90% at 85% 15%,var(--b) 0%,var(--a) 60%);overflow:hidden}
.ex-wc-art::after{content:"";position:absolute;inset:auto -12% -35% auto;width:70%;aspect-ratio:1;border-radius:50%;border:34px solid rgba(183,230,47,.13)}
.ex-wc-artword{position:absolute;left:-2%;bottom:18%;font:900 clamp(56px,11vw,150px)/.85 Inter,sans-serif;letter-spacing:-.05em;color:rgba(255,255,255,.08);text-transform:uppercase;white-space:nowrap;user-select:none}
.ex-wc-poster{filter:saturate(1.1)}
.ex-wc-play{position:absolute;z-index:2;left:18px;top:18px;width:44px;height:44px;border-radius:50%;background:#b7e62f;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.ex-wc-play::after{content:"";position:absolute;left:17px;top:12px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #0f2a1a}
.ex-wc-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(6,20,12,.55) 70%,rgba(6,20,12,.92) 100%)}
.ex-wc-art + .ex-wc-shade{background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(6,20,12,.55) 100%)}
.ex-wc-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:16px 18px}
.ex-wc-lead .ex-wc-copy{padding:26px 28px;max-width:760px}
.ex-wc-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ex-wc-lane,.ex-wc-tag,.ex-wc-cluster{display:inline-block;padding:3px 9px;border-radius:999px;font:800 10.5px/1.5 Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase}
.ex-wc-lane{background:#b7e62f;color:#0f2a1a}
.ex-wc-tag{background:rgba(255,255,255,.16);color:#eafff2;backdrop-filter:blur(6px)}
.ex-wc-cluster{background:rgba(255,255,255,.12);color:#d5e1d1}
.ex-wc-head{display:block;font:800 17px/1.18 Inter,sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);text-wrap:balance}
.ex-wc-lead .ex-wc-head{font-size:clamp(1.55rem,3vw,2.6rem);line-height:1.04}
.ex-wc-second .ex-wc-head{font-size:clamp(1.1rem,1.6vw,1.45rem)}
.ex-wc-rail .ex-wc-head{font-size:14.5px}
.ex-wc-rail .ex-wc-copy{padding:12px 14px}
.ex-wc-src{font:600 11.5px Inter,sans-serif;color:#d5e1d1;letter-spacing:.01em}
.ex-wc-credit{position:absolute;z-index:2;right:10px;top:10px;padding:3px 8px;border-radius:7px;background:rgba(6,20,12,.55);color:#cfe3d3;font:600 10px Inter,sans-serif;backdrop-filter:blur(4px)}
/* Real wire headlines are 60-90 characters, not the 4-word fixtures the cover was drawn for. The
   h1 now sizes to the headline length class the JS sets, and the width cap is lifted so a real
   headline reads as two or three lines instead of a tower of single words. */
.ex-cover-copy h1{max-width:min(22ch,100%);font-size:clamp(1.9rem,4.6vw,4.2rem);line-height:.98}
.ex-cover-copy h1.is-long{font-size:clamp(1.5rem,3.4vw,3rem);max-width:min(30ch,100%);line-height:1.04}
.ex-cover-read{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;background:#b7e62f;color:#0f2a1a!important;font:800 13px Inter,sans-serif;text-decoration:none}
.ex-cover-credit{display:block;margin-top:10px;font:600 11px Inter,sans-serif;color:rgba(255,255,255,.62)}
@media (max-width:899px){
  #ex-news-grid.ex-news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ex-wc-lead,.eo a.ex-wc-lead{grid-column:span 2;min-height:360px}
  .ex-wc-second,.eo a.ex-wc-second{min-height:240px}
  .ex-wc-second{grid-column:span 2;min-height:240px}
  .ex-wc-mosaic{grid-column:span 1;min-height:210px}
  .ex-wc-rail{grid-column:span 1;min-height:180px}
  .ex-wc-head{font-size:15px}.ex-wc-mosaic .ex-wc-head,.ex-wc-rail .ex-wc-head{font-size:13.5px}
  .ex-wc-copy{padding:12px 13px}.ex-wc-lead .ex-wc-copy{padding:18px}
  .ex-wc-artword{font-size:clamp(44px,20vw,96px)}
}
@media (prefers-reduced-motion:reduce){.ex-wc{transition:none}.ex-wc:hover{transform:none}}

/* COVER FOR REAL HEADLINES - placed after every earlier cover rule so it wins the cascade.
   Measured: a real 78-character wire headline rendered as a 12-line tower under the fixture-era
   `max-width:10.5ch`. Real headlines read as 2-3 lines here, and the cover no longer occupies a full
   viewport, so Quick Access and the Wire start above the fold on a 900px-tall screen. */
.ex-cover.ex-cover{min-height:min(72vh,640px)}
.ex-cover .ex-cover-rail,.ex-cover .ex-cover-story{min-height:min(72vh,640px)}
.ex-cover .ex-cover-copy{min-height:min(72vh,640px);padding-top:clamp(70px,9vh,110px);padding-bottom:54px}
.ex-cover .ex-cover-copy h1{max-width:min(24ch,100%);font-size:clamp(1.9rem,4.4vw,4rem);line-height:.98}
.ex-cover .ex-cover-copy h1.is-long{max-width:min(34ch,100%);font-size:clamp(1.45rem,3vw,2.7rem);line-height:1.05}
@media (max-width:899px){
  .ex-cover.ex-cover,.ex-cover .ex-cover-rail,.ex-cover .ex-cover-story,.ex-cover .ex-cover-copy{min-height:min(64vh,520px)}
  .ex-cover .ex-cover-copy h1.is-long{font-size:clamp(1.3rem,6vw,1.9rem)}
}

/* CASCADE REPAIR (2026-09-05). escargo-os.css sets `.eo a{color:inherit}` at specificity (0,1,1),
   which outranks `.nw-read` (0,1,0) on every page inside the .eo shell — so the story CTA rendered
   its own dark-green text on its dark-green pill at 1.37:1, well under the 4.5:1 minimum, and the
   back link lost its colour too. Declaring the colour again is NOT enough; the selector has to
   out-rank the shell rule, so these are scoped through .eo. Same class of defect as the Wire grid:
   the losing rule looked correct in isolation and only lost once another sheet was present. */
.eo a.nw-read{color:#eafff2}
.eo a.nw-read:hover,.eo a.nw-read:focus-visible{color:#fff}
.eo a.nw-back{color:#2f6f4a}
/* QUICK ACCESS (2026-09-04). Escargo's own network, reachable on the first screen.
   Horizontal snap rail on mobile so six destinations stay one thumb-swipe apart without
   stacking into a wall of cards; a settled row from 720px up. Uses the Explore palette
   already in this file rather than introducing a second visual language. */
.ex-quick{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);gap:10px;margin:0 0 46px;padding:2px 0 12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ex-quick::-webkit-scrollbar{display:none}
.ex-quick a{scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;min-height:64px;padding:13px 15px;border:1px solid #d7e3d0;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(243,249,240,.9));color:#14311f;text-decoration:none;box-shadow:0 2px 10px rgba(7,59,36,.05);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ex-quick a:hover,.ex-quick a:focus-visible{transform:translateY(-2px);border-color:#b7e62f;box-shadow:0 12px 26px rgba(7,59,36,.12)}
.ex-quick b{font-size:15px;line-height:1.1;letter-spacing:-.01em}
.ex-quick span{font:700 10.5px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#5a6b53}
@media(min-width:720px){.ex-quick{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);overflow:visible}}
@media(prefers-reduced-motion:reduce){.ex-quick a{transition:none}.ex-quick a:hover{transform:none}}
.ex-news{margin:0 0 82px;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}.ex-news:before{display:none}.ex-news-head{align-items:flex-end;margin-bottom:22px;border-bottom:1px solid #cbd7cb;padding-bottom:18px}.ex-news .ex-ey{margin-bottom:10px}.ex-news h2,.ex-ed-head h2{margin:0;font:900 clamp(2.3rem,5.3vw,5.4rem)/.86 Arial,sans-serif;letter-spacing:-.075em;text-transform:uppercase;color:#102619}.ex-news-note{max-width:18ch;white-space:normal;color:#657466;text-align:right}.ex-newstopics{gap:8px;padding:0 0 18px}.ex-newstopic{min-height:34px;padding:0 12px;border-color:#cbd8cc;background:rgba(255,255,255,.7);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}.ex-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid #cbd7cb}.ex-wire-row{display:grid;grid-template-columns:62px 122px minmax(0,1fr) auto;align-items:baseline;gap:12px;min-height:70px;padding:15px 0;border-bottom:1px solid #cbd7cb}.ex-wire-row:nth-child(odd){padding-right:25px}.ex-wire-row:nth-child(even){padding-left:25px;border-left:1px solid #cbd7cb}.ex-wire-row time,.ex-wire-label,.ex-wire-fixture{font:800 10px Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase}.ex-wire-row time{color:#5d6a61}.ex-wire-label{color:#46760d}.ex-wire-row b{font-size:16px;line-height:1.18;letter-spacing:-.025em}.ex-wire-fixture{color:#8a948c;font-size:8px;white-space:nowrap}.ex-wire-empty{grid-column:1/-1;margin:0;padding:22px 0;color:#657466}
.ex-editorial{display:grid;grid-template-columns:minmax(200px,.55fr) minmax(0,1.45fr);gap:clamp(28px,5vw,78px);align-items:start;margin:0 0 100px}.ex-ed-head{position:relative}.ex-ed-head>span{display:block;max-width:28ch;margin-top:20px;color:#526258;font-size:14px;line-height:1.5}.ex-people-grid,.ex-built-grid,.ex-newnext-grid,.ex-motorsport-grid,.ex-ireland-grid{display:grid;gap:16px}.ex-people-grid{grid-template-columns:1.1fr .9fr;grid-template-rows:220px 290px}.ex-editorial-photo{background-position:var(--ex-position);transition:transform .5s ease}.ex-editorial:hover .ex-editorial-photo,.ex-editorial article:hover .ex-editorial-photo{transform:scale(1.05)}.ex-editorial-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,15,10,.84),transparent 60%)}.ex-people-card,.ex-build-card,.ex-new-card,.ex-motorsport-card,.ex-ireland-card{position:relative;min-height:220px;overflow:hidden;color:#fff;background:#193625}.ex-people-card.is-lead{grid-row:span 2}.ex-editorial-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;padding:20px}.ex-editorial-copy small,.ex-editorial-copy em{font:800 10px Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase}.ex-editorial-copy small{color:#d9ff4d}.ex-editorial-copy h3{margin:8px 0 0;font:900 clamp(1.7rem,3vw,3.5rem)/.9 Arial,sans-serif;letter-spacing:-.07em;text-transform:uppercase}.ex-editorial-copy strong{margin-top:10px;font:800 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}.ex-editorial-copy em{margin-top:12px;color:#dce8dd;font-size:8px;font-style:normal}.ex-built{align-items:center;padding:clamp(32px,6vw,80px);margin-left:-28px;margin-right:-28px;background:linear-gradient(135deg,#0d1b13,#162d20 60%,#10251a);color:#fff}.ex-built .ex-ed-head h2,.ex-motorsport .ex-ed-head h2{color:#fff}.ex-built-grid{grid-template-columns:1.45fr .72fr;grid-template-rows:250px 250px;min-width:0}.ex-build-card{border:1px solid rgba(255,255,255,.14)}.ex-build-card.is-lead{grid-row:span 2}.ex-newnext{padding:20px 0}.ex-newnext-grid{grid-template-columns:repeat(3,1fr)}.ex-new-card{min-height:390px}.ex-new-card:nth-child(2){margin-top:55px}.ex-new-card:nth-child(3){min-height:260px}.ex-motorsport{align-items:center;padding:clamp(32px,5vw,72px);margin-left:-28px;margin-right:-28px;background:radial-gradient(50rem 28rem at 70% 50%,rgba(186,255,32,.21),transparent 70%),#151918;color:#fff}.ex-motorsport-grid{grid-template-columns:1.22fr .78fr}.ex-motorsport-card{min-height:440px}.ex-motorsport-card+.ex-motorsport-card{min-height:250px;margin-top:110px}.ex-ireland-grid{grid-template-columns:1.35fr .65fr;grid-template-rows:220px 220px}.ex-ireland-card.is-lead{grid-row:span 2}.ex-ireland-card:nth-child(3){grid-column:2}.ex-whatson,.ex-community-activity{margin-top:100px}.ex-service-transition{display:grid;grid-template-columns:.7fr 1.3fr;gap:32px;align-items:end;margin:100px -28px 72px;padding:clamp(38px,6vw,84px);background:linear-gradient(125deg,#d9ff4d,#eef9ca 52%,#d9f0e8);overflow:hidden}.ex-service-transition p{margin:0 0 12px;font:800 10px Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#426510}.ex-service-transition h2{margin:0;font:900 clamp(2.4rem,4.8vw,5rem)/.85 Arial,sans-serif;letter-spacing:-.075em;text-transform:uppercase}.ex-service-transition>div>span{display:block;max-width:30ch;margin-top:18px;color:#39533d;font-size:14px;line-height:1.45}.ex-service-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.ex-service-tiles a{display:flex;flex-direction:column;gap:10px;min-width:0;padding:8px;text-decoration:none;color:#102619;font:800 11px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase}.ex-service-art{display:block;aspect-ratio:1;border-radius:16px;background-size:cover;background-position:center;box-shadow:0 10px 20px rgba(16,38,25,.12)}.ex-s-garage{background-image:url('/assets/cat/garage-300.webp')}.ex-s-detailing{background-image:url('/assets/cat/car_detailing-300.webp')}.ex-s-tyres{background-image:url('/assets/story/problem-256.webp')}.ex-s-recovery{background-image:url('/assets/cat/recovery-300.webp')}.ex-s-body{background-image:url('/assets/story/garage-256.webp')}
.ex-around{margin-top:0;padding:clamp(28px,4vw,54px);border:0;border-radius:26px;background:linear-gradient(135deg,#f0f8ec,#fff 56%,#edf8e7)}.ex-around .ex-ed-head{max-width:650px;margin-bottom:30px}.ex-around .ex-ed-head h2{font-size:clamp(2rem,4.2vw,4.4rem)}.ex-around .ex-ed-head p{color:#567f16}.ex-controls{margin-top:0}.ex-sec{margin-top:88px}.ex-sec .ex-ed-head{margin-bottom:24px}.ex-sec h2{font-size:clamp(2rem,4vw,4rem)}.ex-meetgrid,.ex-commgrid,#ex-rec-sec .ex-cards,#ex-new-sec .ex-cards{padding-bottom:16px}.ex-gateway{margin:0}.ex-head{display:none}
@media (max-width:1023px){.ex-publication{padding-left:20px;padding-right:20px}.ex-cover{margin-left:-20px;margin-right:-20px}.ex-cover-copy{padding-left:42px;padding-right:42px}.ex-cover-topics{max-width:55vw}.ex-news-grid{grid-template-columns:1fr}.ex-wire-row:nth-child(odd),.ex-wire-row:nth-child(even){padding-left:0;padding-right:0;border-left:0}.ex-editorial{grid-template-columns:1fr;gap:26px;margin-bottom:70px}.ex-ed-head{max-width:720px}.ex-built,.ex-motorsport{margin-left:-20px;margin-right:-20px}.ex-service-transition{grid-template-columns:1fr;margin-left:-20px;margin-right:-20px}.ex-service-tiles{max-width:700px}.ex-new-card:nth-child(2){margin-top:28px}.ex-motorsport-card+.ex-motorsport-card{margin-top:70px}}
@media (max-width:640px){.ex-publication{padding:0 14px 62px}.ex-cover{margin:0 -14px 52px;min-height:calc(100svh - 104px)}.ex-cover-bar{align-items:flex-start;padding:17px 18px}.ex-cover-bar p{font-size:9px}.ex-cover-topics{position:absolute;top:54px;left:0;right:0;max-width:none;padding:0 18px}.ex-cover-topics .ex-newstopic{font-size:9px}.ex-cover-rail,.ex-cover-story,.ex-cover-copy{min-height:calc(100svh - 104px)}.ex-cover-copy{padding:142px 22px 90px}.ex-cover-copy h1{font-size:clamp(3.35rem,17vw,5.2rem)}.ex-cover-copy>span{margin-top:20px;font-size:14px}.ex-cover-copy footer{margin-top:20px}.ex-cover-controls{inset:auto 18px 18px}.ex-cover-development{display:none}.ex-news{margin-bottom:62px}.ex-news-head{align-items:flex-start}.ex-news h2,.ex-ed-head h2{font-size:clamp(2.35rem,13vw,4rem)}.ex-news-note{text-align:left}.ex-newstopics{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}.ex-wire-row{grid-template-columns:46px 1fr auto;gap:6px;min-height:62px}.ex-wire-label{grid-column:2;font-size:8px}.ex-wire-row b{grid-column:2;font-size:14px}.ex-wire-row time{grid-row:1/3;align-self:center}.ex-wire-fixture{grid-column:3;grid-row:1/3;writing-mode:vertical-rl}.ex-people-grid{grid-template-columns:1fr;grid-template-rows:360px 230px 230px}.ex-people-card.is-lead{grid-row:auto}.ex-editorial-copy h3{font-size:clamp(2rem,11vw,3.4rem)}.ex-built,.ex-motorsport{margin-left:-14px;margin-right:-14px;padding:40px 14px}.ex-built-grid{grid-template-columns:1fr;grid-template-rows:360px 210px 210px}.ex-build-card.is-lead{grid-row:auto}.ex-newnext-grid{grid-template-columns:1fr}.ex-new-card,.ex-new-card:nth-child(3){min-height:355px}.ex-new-card:nth-child(2){margin-top:0;min-height:240px}.ex-motorsport-grid{grid-template-columns:1fr}.ex-motorsport-card{min-height:360px}.ex-motorsport-card+.ex-motorsport-card{min-height:240px;margin-top:0}.ex-ireland-grid{grid-template-columns:1fr;grid-template-rows:360px 230px 230px}.ex-ireland-card.is-lead{grid-row:auto}.ex-ireland-card:nth-child(3){grid-column:auto}.ex-whatson,.ex-community-activity{margin-top:68px}.ex-service-transition{margin:70px -14px 54px;padding:40px 14px}.ex-service-tiles{display:flex;overflow-x:auto;margin-right:-14px;padding-right:14px}.ex-service-tiles a{flex:0 0 104px}.ex-service-art{border-radius:14px}.ex-around{margin-left:-14px;margin-right:-14px;padding:34px 14px}.ex-sec{margin-top:64px}.ex-around .ex-ed-head h2{font-size:clamp(2.2rem,12vw,3.6rem)} }
@media (prefers-reduced-motion:reduce){.ex-editorial-photo{transition:none}.ex-cover-story{scroll-behavior:auto}}

/* Keep the cover within the intended viewport and make the live Wire a compact
   scan rather than an inherited card grid. These deliberately override the
   earlier generic Explore grid defaults. */
.ex-cover-copy{box-sizing:border-box}
.ex-cover-copy{max-width:950px;padding-top:clamp(120px,14vh,160px);padding-bottom:74px}
.ex-news-grid{grid-auto-rows:auto}
@media (max-width:640px){.ex-cover-copy{max-width:100%;padding:142px 22px 90px}}
/* (2026-09-05) the 10.5ch / 8.5ch headline caps that lived here were removed: with real publisher
   headlines they produced a 12-line cover title; the sizing now lives with the cover rules above. */

/* ── FROM THE COMMUNITIES (WS2): varied real-activity composition ── */
.ex-actgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:minmax(96px,auto);gap:14px}
.ex-act{display:flex;flex-direction:column;text-decoration:none;color:#14311f;background:#fff;
  border:1px solid #e3ebe2;border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(7,59,36,.04);
  transition:box-shadow .15s ease}
.ex-act:hover{box-shadow:0 10px 30px rgba(7,59,36,.12)}
.ex-act-featured{grid-column:span 2;grid-row:span 2}
.ex-act-photo{grid-row:span 2}
.ex-actimg{display:block;flex:1 1 120px;min-height:120px;background-size:cover;background-position:center}
.ex-act-featured .ex-actimg{min-height:200px}
.ex-actbody{display:flex;flex-direction:column;gap:4px;padding:12px 15px 14px}
.ex-actcomm{font:800 11.5px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#5c8712}
.ex-acttext{font-size:14px;line-height:1.5;color:#41504a}
.ex-act-featured .ex-acttext{font-size:15.5px}
.ex-actmeta{font-size:12px;color:#8a938e}
@media (max-width:640px){ .ex-act-featured{grid-column:span 1} }

/* The rails deliberately scroll within their own containers. Their cards use
   flex-basis rather than a viewport-sized fixed width, so a narrow customer
   screen retains a visible next-card cue without widening the document. */
.ex-commgrid,.ex-meetgrid,.ex-campusrail,#ex-rec-sec .ex-cards,#ex-new-sec .ex-cards{max-width:100%}

/* ── WS26 performance: below-fold sections render lazily; card images size
   themselves so late loads cannot shift layout (fixed heights already set). ── */
.ex-sec,.ex-around{content-visibility:auto;contain-intrinsic-size:auto 420px}
/* WS27 a11y: visible keyboard focus on all interactive cards/chips */
.ex-comm-card:focus-visible,.ex-campus-card:focus-visible,.ex-meet:focus-visible,
.ex-act:focus-visible,.ex-chip:focus-visible,.ex-btn:focus-visible{outline:3px solid #4d7c0f;outline-offset:2px}

/* WIRE GRID — CASCADE REPAIR (2026-09-05). Measured, not guessed: the computed columns were
   `0px 0px 245px 245px 438px 438px` and two cards rendered 37px wide.

   Cause: an UNCONDITIONAL `.ex-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}` from the
   older compact-scan design sits LATER in this file than the `(min-width:900px)` six-column rule.
   Media queries add no specificity, so the later unconditional rule won at every width — while the
   cards still carried span 6 / span 3 / span 2 intended for six columns. Spanning six tracks in a
   two-track grid creates implicit columns, which is exactly the mangled distribution above.

   Both intents are kept: the compact two-column scan remains the base for narrow viewports, and the
   weighted rhythm is restated HERE, after the override, so it wins from 900px up. Restated in full
   rather than reordering the older block, because that block is load-bearing for the small-screen
   Wire and moving it would trade one silent regression for another. */
@media (min-width:900px){
  .ex-news-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:14px;border-top:0}
  .ex-news-card{min-width:0}
  .ex-news-card.ex-news-lead{grid-column:span 6;grid-row:auto;min-height:300px}
  .ex-news-card.ex-news-mid{grid-column:span 3;min-height:190px}
  .ex-news-card.ex-news-compact{grid-column:span 2;min-height:158px}
  .ex-news-card.ex-news-compact b{font-size:15.5px;line-height:1.16}
  .ex-news-card.ex-news-compact .ex-news-snippet{display:none}
}
@media (min-width:900px) and (max-width:1180px){
  .ex-news-card.ex-news-compact{grid-column:span 3}
}

/* ══ DISTRIBUTED WIRE + LANE-FILLED EDITORIAL SECTIONS (founder direction 2026-09-05) ══
   The Wire was one 4,472px block under the cover — a third of the page — after which Explore
   ran ~5,000px containing no photograph at all, and five topic sections rendered development
   fixtures with empty image areas. The same ranked feed is now composed as three blocks placed
   through the page, and the five topic sections are filled from their OWN lanes of that feed.
   These rules give blocks B/C the dense grid that was bound to the first block's id, and give
   the lane grids a layout built for wire cards instead of the fixture-card row templates. */
#ex-news-grid-b.ex-news-grid,#ex-news-grid-c.ex-news-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:12px;grid-auto-rows:auto}
.ex-news-more{margin-top:8px}
.ex-news-more .ex-news-head h2{font-size:clamp(1.7rem,3.2vw,2.9rem)}
.ex-news-more .ex-wc-second,.eo a.ex-news-more .ex-wc-second{min-height:min(34vh,300px)}

/* Lane grids: a lead that carries the section visually, then two supporting cards. Paired with
   `.eo a…` because `.eo a{...}` outranks a single class on every anchor inside the shell. */
.ex-lanegrid.ex-lanegrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;
  grid-auto-rows:minmax(190px,auto);gap:14px;min-width:0}
.ex-lanegrid .ex-wc-lnlead,.eo a.ex-wc-lnlead{grid-column:span 2;grid-row:span 2;min-height:min(44vh,400px)}
.ex-lanegrid .ex-wc-ln,.eo a.ex-wc-ln{grid-column:span 1;min-height:190px}
.ex-lanegrid .ex-wc-lnlead .ex-wc-head{font-size:clamp(1.25rem,2.1vw,1.95rem);line-height:1.06}
/* A lane with a single story must not leave two empty columns. */
.ex-lanegrid .ex-wc-lnlead:only-child,.eo a.ex-wc-lnlead:only-child{grid-column:span 3;grid-row:span 1}
@media (max-width:1023px){
  #ex-news-grid-b.ex-news-grid,#ex-news-grid-c.ex-news-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ex-lanegrid.ex-lanegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-lanegrid .ex-wc-lnlead,.eo a.ex-wc-lnlead{grid-column:span 2;grid-row:span 1;min-height:300px}
  .ex-lanegrid .ex-wc-lnlead:only-child,.eo a.ex-wc-lnlead:only-child{grid-column:span 2}
}
@media (max-width:640px){
  #ex-news-grid-b.ex-news-grid,#ex-news-grid-c.ex-news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ex-lanegrid.ex-lanegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ex-lanegrid .ex-wc-lnlead,.eo a.ex-wc-lnlead{min-height:250px}
  .ex-lanegrid .ex-wc-ln,.eo a.ex-wc-ln{min-height:165px}
}

/* ══ SHARED DESIGNED ARTWORK FOR ESCARGO'S OWN RECORDS (founder direction 2026-09-05) ══
   Meets and Communities are real records with no photography in the network yet, and the pale
   category tint they used to draw read as an EMPTY image area, not a designed one. This is the
   same treatment the text-led wire cards use, so an Escargo record and a text-led story look
   like one publication. It is deliberately NOT photographic: it must never be mistaken for a
   picture of the event or the club. A real cover always replaces it. */
.ex-artwork{position:relative;display:block;overflow:hidden;
  background:radial-gradient(120% 90% at 85% 15%,var(--b) 0%,var(--a) 60%)}
.ex-artwork .ex-artword{position:absolute;left:-2%;bottom:12%;
  font:900 clamp(34px,6.5vw,74px)/.85 Inter,sans-serif;letter-spacing:-.05em;
  color:rgba(255,255,255,.10);text-transform:uppercase;white-space:nowrap;user-select:none}
.ex-artwork:after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,15,10,.34),transparent 62%)}
.ex-meetimg.ex-artwork{height:clamp(130px,18vw,170px)}
.ex-commimg.ex-artwork{height:clamp(170px,24vw,230px)}
@media (max-width:640px){.ex-artwork .ex-artword{font-size:clamp(30px,11vw,56px)}}

/* A lane holding a single story should still carry its section, not read as a thin strip. */
.ex-lanegrid .ex-wc-lnlead:only-child,.eo a.ex-wc-lnlead:only-child{min-height:min(38vh,320px)}

/* Section headings inherited a centred text-align from the shell while their own eyebrow and
   standfirst stayed left, so "COMING UP" floated in the middle of an apparently empty band while
   the left of the row read as dead space (founder review 2026-09-05). Every Explore heading is
   left-aligned, matching the editorial sections. */
.ex .ex-ed-head,.ex .ex-ed-head h2,.ex .ex-ed-head p,.ex .ex-ed-head span,
.ex .ex-sec>h2,.ex .ex-secsub{text-align:left}
.ex .ex-ed-head h2{max-width:22ch}

/* WIRE GRID CASCADE, restated for the two continuation blocks (2026-09-05).
   Media queries add no specificity, so the LAST matching declaration wins. The narrow-viewport
   two-column rules for blocks B and C above would otherwise be the final word on the weighted
   grid — the same cascade defect that once collapsed the first block's tracks to 37px cards.
   The desktop grid is therefore restated here, after every narrow override. */
@media (min-width:1024px){
  #ex-news-grid-b.ex-news-grid,#ex-news-grid-c.ex-news-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* The two continuation Wire blocks are a CONTINUATION, not a third front page. Each was carrying
   the full section rhythm (~100px gap plus ~100px of its own lead-in), so roughly 200px of empty
   page opened before "More from the wire" - read as a dead band rather than a breath between
   sections. Their lead-in is halved; the main block and every other section keep their rhythm. */
.ex-news-more.ex-news-more{padding-top:34px}
.ex-news-more .ex-news-head{padding-top:0;margin-top:0}
@media (max-width:640px){.ex-news-more.ex-news-more{padding-top:24px}}

/* ══ ESCARGO'S OWN SURFACES ARE PHOTOGRAPHIC (founder walkthrough 2026-09-05) ══
   "The meets should have pictures, the communities pictures, college pictures." Escargo owns real
   car-meet photography, so these tiles carry a photograph instead of the designed art that stood
   in while I believed none existed. */
.ex-photo{position:relative;display:block;background-size:cover;background-position:center;
  background-color:#12241a;overflow:hidden}
.ex-photo:after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,15,10,.52),rgba(4,15,10,.06) 62%)}
.ex-meetimg.ex-photo{height:clamp(150px,20vw,196px)}
.ex-commimg.ex-photo{height:clamp(170px,24vw,230px)}
.ex-wc-figure.ex-photo{position:absolute;inset:0;height:auto}

/* "You shouldn't be able to scroll — it should be filled with pictures." The meet and community
   rails were horizontal scrollers showing three cards and hiding the rest behind a swipe; they are
   now filled grids so every record is on the page as a picture. */
#ex-meets.ex-meetgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;overflow:visible}
#ex-comm.ex-commgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;overflow:visible}
#ex-campus.ex-campusrail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;overflow:visible}
#ex-meets.ex-meetgrid .ex-meet,#ex-comm.ex-commgrid .ex-comm-card,#ex-campus.ex-campusrail .ex-campus-card{
  flex:none;width:auto;min-width:0}
#ex-comm.ex-commgrid .ex-comm-card:first-child{flex-basis:auto}
@media (max-width:1023px){
  #ex-meets.ex-meetgrid,#ex-comm.ex-commgrid,#ex-campus.ex-campusrail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  #ex-meets.ex-meetgrid,#ex-comm.ex-commgrid,#ex-campus.ex-campusrail{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ex-meetimg.ex-photo{height:130px}.ex-commimg.ex-photo{height:130px}
}

/* A photograph under each editorial heading. These sections placed their heading in a narrow
   column and left the remainder of it empty, so half of every editorial band was blank space
   (founder walkthrough 2026-09-05: "there should be a picture surrounding this half of it"). */
/* `.ex-ed-head>span{max-width:28ch}` styles the standfirst, and the photo is also a span, so it
   inherited a 211px cap inside a 361px column. Matched specificity releases it. */
.ex-ed-head>.ex-headphoto{display:block;width:100%;max-width:none;margin-top:26px;border-radius:18px;
  min-height:clamp(240px,26vw,360px);box-shadow:0 14px 30px rgba(9,32,20,.16)}
.ex-built .ex-headphoto,.ex-motorsport .ex-headphoto{box-shadow:0 14px 30px rgba(0,0,0,.34)}
@media (max-width:1023px){.ex-headphoto{min-height:200px;margin-top:20px}}
@media (max-width:640px){.ex-headphoto{min-height:170px;margin-top:16px}}

/* WIRE GRID CASCADE, restated last (2026-09-05). The filled meet/community/campus grids above add
   narrow-viewport two-column rules, and media queries add no specificity — so the weighted wire
   grid must be the final word on those tracks or the first block's cards collapse, the defect
   `escargo-explore-tests` pins with "restated AFTER the unconditional two-column override". */
@media (min-width:1024px){
  #ex-news-grid.ex-news-grid,#ex-news-grid-b.ex-news-grid,#ex-news-grid-c.ex-news-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* ══ LESS BLACK (founder review 2026-09-05: "there's still too much black screen") ══
   Measured before changing anything: ~5,900px of a 14,000px page rendered near-solid dark, in big
   contiguous bands. Four causes, fixed at source:
     1. `.ex-built` and `.ex-motorsport` painted their WHOLE section dark (711px each), so two full
        bands of the page were black before any card was drawn.
     2. My own `.ex-photo:after` laid 52% black over every photograph I had just added.
     3. Escargo's meet photography is shot at dusk, so it needs lifting rather than shading.
   The editorial bands now read light like the rest of the page, keeping the lime accent. */
.ex-editorial.ex-built{
  background:linear-gradient(135deg,#eef7e6,#ffffff 58%,#e9f4ec);color:#14311f}
.ex-editorial.ex-motorsport{
  background:radial-gradient(50rem 28rem at 72% 45%,rgba(186,255,32,.30),transparent 70%),#f5f9f3;
  color:#14311f}
.ex-built .ex-ed-head h2,.ex-motorsport .ex-ed-head h2,
.ex-built .ex-ed-head p,.ex-motorsport .ex-ed-head p,
.ex-built .ex-ed-head>span,.ex-motorsport .ex-ed-head>span{color:inherit}
.ex-built .ex-ed-head p,.ex-motorsport .ex-ed-head p{color:#4e7a12}
.ex-built .ex-ed-head>span,.ex-motorsport .ex-ed-head>span{color:#526258}

/* A photograph should read as a photograph. The overlay now only darkens the strip the caption
   sits on, and the dusk meet shots are lifted so they are not a black rectangle at card size. */
.ex-photo:after{background:linear-gradient(0deg,rgba(4,15,10,.40),rgba(4,15,10,0) 46%)}
.ex-photo{filter:brightness(1.14) saturate(1.05)}
.ex-wc-figure.ex-photo{filter:brightness(1.10) saturate(1.04)}

/* The designed art used for text-led stories was the darkest thing on the page after the two
   editorial bands. Same palette, lifted, so a text-led card reads as a colour panel not a hole. */
/* The palette itself is lightened in discover-explore.js (LANE_PALETTE); a CSS color-mix on
   var(--a)/var(--b) computed to `none` whenever those custom properties were absent, which left a
   blacker card than the one it replaced. */
.ex-wc-artword{color:rgba(255,255,255,.14)}

/* No card is ever a black rectangle. Each wire card carries its lane colour as a base, so a
   publisher photograph that is still decoding — or that never arrives — reveals a colour panel
   rather than the dark card background with a credit floating on it. The image sits on top and
   hides this entirely once painted. */
.ex-wc,.eo a.ex-wc{background:radial-gradient(120% 90% at 85% 15%,var(--b,#4f7fc4) 0%,var(--a,#2a5236) 62%)}
.ex-wc-figure{background:transparent}

/* The "no events yet" state was an unstyled anchor that occupied a 523px band of empty page —
   the same dead space the founder objected to, appearing exactly when the section has nothing to
   show. It is now a compact, photo-led card that states the position and offers the route on. */
#ex-meets.ex-meetgrid:has(.ex-evempty){grid-template-columns:1fr}
.ex-evempty{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  min-height:230px;padding:22px 24px;border-radius:20px;overflow:hidden;text-decoration:none;color:#fff;
  background:linear-gradient(0deg,rgba(4,15,10,.72),rgba(4,15,10,.18) 70%),
             url('/assets/meets/escargo-meets-hero.webp') center/cover no-repeat}
.ex-evempty b{font:800 20px Inter,sans-serif}
.ex-evempty span{max-width:52ch;font:500 13px/1.45 Inter,sans-serif;color:#e6efe6}
.ex-evempty .ex-evemptycta{display:inline-flex;align-self:flex-start;margin-top:8px;padding:9px 16px;
  border-radius:999px;background:#d9ff4d;color:#102619;font:800 12px Inter,sans-serif}
@media (max-width:640px){.ex-evempty{min-height:190px;padding:18px}}

/* Empty-state corrections: the heading inherited a dark green from the section and sat unreadable
   on its own photograph, and the card was not filling the row. */
#ex-meets.ex-meetgrid .ex-evempty{grid-column:1/-1;width:100%;align-items:flex-start;text-align:left}
.ex-evempty b,.ex-evempty span,.eo a.ex-evempty b,.eo a.ex-evempty span{color:#fff}
.ex-evempty b{font:800 clamp(20px,2.4vw,30px) Inter,sans-serif;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.ex-evempty span{color:#e6efe6!important}
.ex-evempty .ex-evemptycta{color:#102619!important}
#ex-meets.ex-meetgrid .ex-evempty{max-width:none;justify-self:stretch;flex:1 1 auto}

/* ══ FILL THE WHITE (founder review 2026-09-05: "a bit too much white … it should be filled",
   "it should have like a nice big picture") ══
   Measured: the heading column ran 593px while the card grid ran 396px, leaving a 315–475px band
   of empty page across the bottom of EVERY editorial section. Two changes close it from both
   sides — the cards grow to the height of the column beside them, and the heading photograph
   grows to fill whatever the words leave, so each band is picture rather than paper. */
.ex-editorial .ex-ed-head{display:flex;flex-direction:column}
.ex-ed-head>.ex-headphoto{flex:1 1 auto;margin-top:24px;min-height:clamp(260px,24vw,340px)}
.ex-lanegrid.ex-lanegrid{grid-auto-rows:minmax(clamp(230px,18.5vw,288px),auto)}
.ex-lanegrid .ex-wc-lnlead,.eo a.ex-wc-lnlead{min-height:clamp(480px,39vw,590px)}
.ex-lanegrid .ex-wc-ln,.eo a.ex-wc-ln{min-height:clamp(230px,18.5vw,288px)}
@media (max-width:1023px){
  .ex-lanegrid.ex-lanegrid{grid-auto-rows:minmax(210px,auto)}
  .ex-lanegrid .ex-wc-lnlead,.eo a.ex-wc-lnlead{min-height:320px}
  .ex-lanegrid .ex-wc-ln,.eo a.ex-wc-ln{min-height:210px}
  .ex-ed-head>.ex-headphoto{min-height:220px}
}
@media (max-width:640px){
  .ex-lanegrid.ex-lanegrid{grid-auto-rows:minmax(170px,auto)}
  .ex-lanegrid .ex-wc-lnlead,.eo a.ex-wc-lnlead{min-height:260px}
  .ex-lanegrid .ex-wc-ln,.eo a.ex-wc-ln{min-height:170px}
  .ex-ed-head>.ex-headphoto{min-height:180px}
}
/* A lane holding one story still has to fill its band, or the section reads as a hole. */
.ex-lanegrid .ex-wc-lnlead:only-child,.eo a.ex-wc-lnlead:only-child{
  grid-column:1/-1;grid-row:1/-1;min-height:clamp(480px,39vw,562px)}

/* ══ A BIG PICTURE BEHIND EVERY SECTION HEADING (founder: "it should have like a nice big
   picture", "a big meets picture in the back") ══
   The non-editorial sections announced themselves with a heading on bare paper, which is where
   most of the remaining white sat. Each now opens on a full-width Escargo photograph matched to
   what that section is about, with the heading over it in the same language as the lead wire card.
   The editorial sections are excluded — they already carry their photograph beside the words. */
.ex-news-head,
#ex-meets-sec>.ex-ed-head,#ex-comm-sec>.ex-ed-head,#ex-new-sec>.ex-ed-head{
  position:relative;min-height:clamp(190px,20vw,280px);
  padding:clamp(22px,2.6vw,38px) clamp(24px,3vw,44px);
  border-radius:22px;overflow:hidden;border-bottom:0;color:#fff;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;flex-direction:column;justify-content:flex-end}
.ex-news-head:before,
#ex-meets-sec>.ex-ed-head:before,#ex-comm-sec>.ex-ed-head:before,#ex-new-sec>.ex-ed-head:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,15,10,.80) 0%,rgba(4,15,10,.46) 46%,rgba(4,15,10,.12) 100%)}
.ex-news-head>*,#ex-meets-sec>.ex-ed-head>*,#ex-comm-sec>.ex-ed-head>*,#ex-new-sec>.ex-ed-head>*{
  position:relative;z-index:1}
.ex-news-head h2,#ex-meets-sec>.ex-ed-head h2,#ex-comm-sec>.ex-ed-head h2,#ex-new-sec>.ex-ed-head h2{color:#fff}
.ex-news-head .ex-ey,#ex-meets-sec>.ex-ed-head p,#ex-comm-sec>.ex-ed-head p,#ex-new-sec>.ex-ed-head p{color:#d9ff4d}
.ex-news-head .ex-news-note{color:rgba(255,255,255,.82)}
#ex-meets-sec>.ex-ed-head>span,#ex-comm-sec>.ex-ed-head>span{color:#e6efe6;max-width:46ch}

/* Matched to each section's own subject. */
#ex-news-sec>.ex-news-head{background-image:url('/assets/photos/df-collection-street.webp')}
#ex-news-sec-b>.ex-news-head{background-image:url('/assets/meets/escargo-meets-hero.webp')}
#ex-news-sec-c>.ex-news-head{background-image:url('/assets/photos/df-collection-classic-mini.webp')}
#ex-meets-sec>.ex-ed-head{background-image:url('/assets/meets/community-drogheda.webp')}
#ex-comm-sec>.ex-ed-head{background-image:url('/assets/meets/community-galway.webp')}
#ex-new-sec>.ex-ed-head{background-image:url('/assets/categories/11-garage.webp')}
#ex-campus-sec{position:relative}
@media (max-width:640px){
  .ex-news-head,#ex-meets-sec>.ex-ed-head,#ex-comm-sec>.ex-ed-head,#ex-new-sec>.ex-ed-head{
    min-height:170px;padding:18px 20px;border-radius:16px}
  .ex-news-head:before,#ex-meets-sec>.ex-ed-head:before,#ex-comm-sec>.ex-ed-head:before,
  #ex-new-sec>.ex-ed-head:before{background:linear-gradient(0deg,rgba(4,15,10,.82),rgba(4,15,10,.30) 70%)}
}
/* `.ex-news-head{align-items:flex-end}` predates the banner; as a column it pushed the heading to
   the RIGHT, i.e. onto the lightest part of the left-weighted gradient. Text goes where the
   photograph is darkened. */
.ex-news-head{align-items:flex-start;text-align:left}
.ex-news-head .ex-news-note{text-align:left;margin-top:10px}

/* The green service band carried five small tiles and a large empty field of lime (founder: "that
   green bit … every bit should kind of have an asset", "a picture in this corner"). The tiles grow
   and the copy column gains a photograph beneath the words, so the band is filled like the rest. */
.ex-service-transition{align-items:stretch}
.ex-service-transition>div:first-child{display:flex;flex-direction:column}
.ex-service-transition>div:first-child:after{content:"";display:block;flex:1 1 auto;
  margin-top:22px;min-height:clamp(150px,15vw,210px);border-radius:18px;
  background:url('/assets/marketing/photo-recovery-collection.webp') center/cover no-repeat;
  box-shadow:0 12px 26px rgba(23,45,10,.18)}
.ex-service-tiles{align-content:stretch}
.ex-service-tiles a{gap:12px}
.ex-service-art{aspect-ratio:4/5;border-radius:18px}
@media (max-width:1023px){
  .ex-service-transition>div:first-child:after{min-height:170px}
  .ex-service-art{aspect-ratio:1}
}
@media (max-width:640px){
  .ex-service-transition>div:first-child:after{min-height:140px;margin-top:16px}
}

/* A heading photograph taken from the feed is the same rights-cleared publisher preview a card
   uses, in the same editorial use, so it carries the same credit. Escargo's own photography needs
   no credit and shows none. */
.ex-headphoto{position:relative}
.ex-headcredit{position:absolute;right:10px;top:10px;z-index:2;
  padding:4px 9px;border-radius:999px;background:rgba(4,15,10,.62);
  font:700 10px Inter,sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);pointer-events:none}
.ex-headcredit.is-banner{right:14px;top:14px}
.ex-news-head .ex-headcredit.is-banner{position:absolute}
@media (max-width:640px){.ex-headcredit{font-size:9px;padding:3px 7px}}