/* ===========================================================
   The English Riviera — Torbay guide
   Shared stylesheet. Palette + type from the content pack.
   =========================================================== */
:root{
  --paper:#FBFCFD; --tint:#EAF3F7; --tint2:#F1F6F9;
  --blue:#2E7CA8; --deep:#1F5D80; --gold:#C58B3D; --palm:#3F7B54;
  --ink:#16303C; --ink2:#22414f;
  --body:#4f6873; --body2:#556c76; --soft:#5c727c;
  --muted:#8aa2ad; --muted2:#93a4ac; --nav:#40616f;
  --border:#E2ECF1; --border2:#DCE7ED;
  --on-dark:#BFD4DE; --on-dark2:#7FBBDB; --on-dark3:#BFE0F0;
  --serif:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:"Manrope",system-ui,sans-serif;
  --wrap:1240px; --measure:70ch;
  --shadow:0 14px 34px rgba(31,60,72,.12);
  --shadow-lg:0 22px 55px rgba(31,60,72,.20);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--body2);
  font-family:var(--sans);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--deep);}
::selection{background:var(--blue);color:#fff;}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.04;margin:0;}
h3{font-weight:700;letter-spacing:-.01em;}
p{margin:0 0 1.1em;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 44px;}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0;}
.eyebrow.on-dark{color:var(--on-dark2);}
.dek{font-size:19px;line-height:1.55;color:var(--body);margin:12px 0 0;max-width:60ch;}
.center{text-align:center;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* buttons + links */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:15px;
  padding:12px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.15s ease;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--deep);color:#fff;}
.btn-ghost{background:#fff;color:var(--nav);border-color:var(--border2);}
.btn-ghost:hover{border-color:var(--blue);color:var(--deep);}
.link-more{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--deep);}
.link-more svg{transition:transform .15s ease;}
.link-more:hover svg{transform:translateX(4px);}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(251,252,253,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px;}
.brand{display:flex;align-items:center;gap:13px;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--blue);position:relative;box-shadow:inset 0 -10px 0 rgba(31,60,72,.25);flex:0 0 auto;}
.brand-name{font-family:var(--serif);font-weight:800;font-size:23px;color:var(--ink);letter-spacing:-.01em;}
.brand-sub{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-top:1px;}
.nav{display:flex;align-items:center;gap:8px;}
.nav a{font-size:15px;font-weight:600;color:var(--nav);padding:8px 13px;border-radius:8px;}
.nav a:hover{color:var(--deep);background:var(--tint);}
.nav a[aria-current]{color:var(--deep);background:var(--tint);}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px;font-size:26px;}
.nav-toggle .icon{width:26px;height:26px;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--on-dark);margin-top:20px;}
.site-footer .wrap{padding-top:52px;padding-bottom:40px;}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;}
.foot-brand{max-width:340px;}
.foot-brand .brand-name{color:#fff;}
.foot-brand p{font-size:15px;line-height:1.6;margin:14px 0 0;color:var(--on-dark);}
.foot-cols{display:flex;gap:52px;flex-wrap:wrap;}
.foot-col h4{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark2);margin:0 0 13px;}
.foot-col a{display:block;color:var(--on-dark);font-size:15px;margin:9px 0;}
.foot-col a:hover{color:#fff;}
.foot-support{border:1px dashed rgba(191,212,222,.4);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--on-dark2);max-width:180px;}
.foot-legal{border-top:1px solid rgba(191,212,222,.2);margin-top:34px;padding-top:22px;font-size:13.5px;color:var(--muted2);}

/* ---------- hero ---------- */
.hero{position:relative;}
.hero-media{position:relative;height:min(60vh,600px);min-height:440px;overflow:hidden;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(105deg,rgba(16,36,46,.86) 0%,rgba(16,36,46,.6) 40%,rgba(16,36,46,.24) 70%,rgba(16,36,46,.12) 100%),
  linear-gradient(0deg,rgba(16,36,46,.55) 0%,rgba(16,36,46,0) 45%);}
.hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;}
.hero-inner .wrap{width:100%;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark3);}
.hero-eyebrow i{width:24px;height:2px;background:var(--gold);display:inline-block;}
.hero h1{color:#fff;font-size:clamp(40px,6.4vw,74px);margin:16px 0 14px;max-width:15ch;text-shadow:0 2px 4px rgba(16,36,46,.55),0 6px 30px rgba(16,36,46,.6);}
.hero .dek{color:#EEF5F8;max-width:48ch;text-shadow:0 1px 3px rgba(16,36,46,.7),0 2px 14px rgba(16,36,46,.6);}
.hero-eyebrow{text-shadow:0 1px 6px rgba(16,36,46,.7);}
.fade-up{opacity:0;transform:translateY(18px);animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) .1s forwards;}
@keyframes fadeUp{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.fade-up{animation:none;opacity:1;transform:none;}}

/* ---------- section scaffold ---------- */
.section{padding:60px 0 8px;}
.section-head{max-width:64ch;margin-bottom:28px;}
.section-head h2{font-size:clamp(30px,4vw,46px);margin:12px 0 8px;}
.section-flex{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px;}

/* ---------- at a glance ---------- */
.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:46px;}
.glance-tile{border-top:3px solid var(--blue);padding-top:16px;}
.glance-tile .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;}
.glance-tile .v{font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.4vw,28px);color:var(--ink);margin-top:6px;letter-spacing:-.01em;}
.glance-tile .d{font-size:14.5px;color:var(--soft);margin-top:3px;}

/* ---------- filter row ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;}
.chip{font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;padding:9px 16px;border-radius:8px;
  background:#fff;color:var(--nav);border:1px solid var(--border2);transition:.15s ease;}
.chip:hover{border-color:var(--blue);color:var(--deep);}
.chip[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue);}

/* ---------- things-to-do grid ---------- */
.todo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.todo-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;height:100%;transition:transform .15s ease,box-shadow .15s ease;}
.todo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.todo-card .no{font-family:var(--serif);font-weight:800;font-size:15px;color:var(--blue);letter-spacing:.04em;}
.todo-card .top{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
.todo-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--tint);color:var(--blue);}
.todo-ic .icon{width:21px;height:21px;stroke-width:1.9;}
.todo-card .top .no{font-size:22px;color:var(--gold);}
.todo-card h3{font-size:22px;line-height:1.14;margin:8px 0 0;}
.todo-card p{font-size:14.5px;line-height:1.55;color:var(--body2);margin:11px 0 16px;flex:1;}
.tags{display:flex;gap:7px;flex-wrap:wrap;}
.tag{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--tint);padding:4px 10px;border-radius:6px;}
.todo-card[hidden]{display:none;}
.filter-empty{color:var(--muted);font-size:15px;padding:8px 0;}

/* ---------- coast mosaic ---------- */
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:220px;gap:16px;}
.mosaic figure{margin:0;position:relative;border-radius:16px;overflow:hidden;}
.mosaic figure.tall{grid-row:span 2;}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.mosaic figure:hover img{transform:scale(1.05);}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;
  background:linear-gradient(0deg,rgba(22,48,60,.78),rgba(22,48,60,0));font-family:var(--serif);}
.mosaic .cap-t{display:block;font-weight:700;font-size:19px;}
.mosaic .cap-s{display:block;font-family:var(--sans);font-size:13.5px;color:#E7F0F5;margin-top:2px;font-weight:500;}

/* ---------- heritage split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;border-radius:22px;overflow:hidden;background:var(--ink);color:#E7F0F5;}
.split-media{min-height:400px;}
.split-media img{width:100%;height:100%;object-fit:cover;}
.split-body{padding:52px;display:flex;flex-direction:column;justify-content:center;}
.split-body h2{color:#fff;font-size:clamp(28px,3.4vw,40px);margin:12px 0 14px;}
.split-body p{color:var(--on-dark);font-size:16.5px;line-height:1.62;margin:0 0 16px;max-width:46ch;}
.split-body a{color:var(--on-dark2);font-weight:800;}
.split-body a:hover{color:#fff;}

/* ---------- map block ---------- */
.map-block{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);background:var(--tint);}
.map-svg-wrap{position:relative;}
.map-svg-wrap svg{width:100%;height:auto;display:block;}
.map-legend{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(4px);
  border-radius:12px;padding:12px 14px;box-shadow:0 6px 18px rgba(31,60,72,.18);font-size:13px;}
.map-legend h4{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);margin:0 0 8px;}
.map-legend .row{display:flex;align-items:center;gap:8px;margin:5px 0;font-weight:600;color:var(--ink);}
.map-legend .row svg{width:15px;height:15px;flex:0 0 auto;}
.map-legend .gk{margin-top:9px;padding-top:9px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.5;display:block;}
.map-legend .gk b{color:var(--ink2);font-weight:800;}
.map-legend .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;}
.map-badge{position:absolute;right:16px;top:16px;background:var(--deep);color:#fff;border-radius:999px;
  padding:6px 14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 4px 12px rgba(31,60,72,.3);}
.map-pin{cursor:pointer;}
.map-pin .glyph{filter:drop-shadow(0 2px 3px rgba(22,48,60,.4));transition:transform .12s ease;transform-box:fill-box;transform-origin:center;}
.map-pin:hover .glyph,.map-pin:focus .glyph{transform:scale(1.28);}
.map-pin:focus{outline:none;}
.map-popup{position:absolute;max-width:230px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(22,48,60,.28);
  padding:12px 14px;transform:translate(-50%,-118%);pointer-events:none;opacity:0;transition:opacity .12s ease;z-index:5;}
.map-popup.show{opacity:1;}
.map-popup .pc{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;}
.map-popup .pn{display:block;font-family:var(--serif);font-size:16px;font-weight:800;color:var(--ink);margin:2px 0 3px;line-height:1.15;}
.map-popup .pd{display:block;font-size:13px;line-height:1.45;color:var(--body2);}
.map-caption{font-size:14px;color:var(--muted2);margin:14px 0 0;}

/* ---------- generic content cards (stay / days / category) ---------- */
.card-grid{display:grid;gap:18px;}
.card-grid.g3{grid-template-columns:repeat(3,1fr);}
.card-grid.feature{grid-template-columns:1.4fr 1fr 1fr;}
.photo-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;}
.photo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.photo-card .ph{aspect-ratio:16/10;overflow:hidden;}
.photo-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.photo-card:hover .ph img{transform:scale(1.05);}
.photo-card .bd{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.photo-card .cat{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 8px;}
.photo-card h3{font-size:22px;line-height:1.16;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.photo-card p{font-size:15px;line-height:1.55;color:var(--body2);margin:9px 0 0;}
.photo-card .meta{margin-top:auto;padding-top:14px;font-size:13.5px;color:var(--muted);font-weight:600;}
.tinted{background:var(--tint);border-radius:26px;margin-top:20px;}
.tinted .section{padding-top:52px;}

/* figure caption (stay & eat) */
.cap-fig{margin:0;display:flex;flex-direction:column;height:100%;}
.cap-fig .ph{display:block;aspect-ratio:16/11;border-radius:16px;overflow:hidden;}
.cap-fig .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cap-fig:hover .ph img{transform:scale(1.04);}
.cap-fig figcaption{margin-top:12px;}
.cap-fig .cap-t{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);}
.cap-fig .cap-s{display:block;font-size:14.5px;color:var(--soft);margin-top:3px;}

/* ---------- sponsors ---------- */
.friends{padding:56px 0 8px;}
.friends-head{max-width:60ch;margin-bottom:26px;}
.sponsor-grid{display:grid;gap:16px;}
.sponsor-grid.featured{grid-template-columns:repeat(3,1fr);}
.sponsor-grid.regulars{grid-template-columns:repeat(6,1fr);}
.sponsor{display:flex;flex-direction:column;gap:10px;background:var(--ink);border-radius:14px;padding:22px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;min-height:120px;justify-content:center;}
.sponsor:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.sponsor img{width:100%;max-height:46px;object-fit:contain;object-position:left center;border-radius:4px;}
.sponsor-blurb{color:var(--on-dark);font-size:13.5px;line-height:1.4;}
.sponsor-blurb:empty{display:none;}
.regulars .sponsor{min-height:86px;padding:16px;border-radius:12px;background:var(--ink2);}
.regulars .sponsor img{max-height:30px;}
.closing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 0 8px;}
.closing-card{border:1px solid var(--border);border-radius:16px;padding:24px;background:#fff;display:flex;flex-direction:column;transition:.15s ease;}
.closing-card:hover{border-color:var(--blue);box-shadow:var(--shadow);}
.closing-card .k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.closing-card h3{font-size:21px;margin:9px 0 6px;}
.closing-card p{font-size:14.5px;color:var(--body2);margin:0 0 14px;flex:1;}

/* ---------- page hero (sub pages) ---------- */
.page-hero{background:var(--tint);border-bottom:1px solid var(--border);}
.page-hero .wrap{padding-top:56px;padding-bottom:48px;}
.page-hero h1{font-size:clamp(34px,5vw,56px);margin:12px 0 10px;max-width:18ch;}
.page-hero .dek{font-size:20px;max-width:64ch;}
.crumbs{font-size:13.5px;color:var(--muted);font-weight:600;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--deep);}

/* ---------- category list ---------- */
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.cat-list li{border-bottom:1px solid var(--border);}
.cat-list a{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:22px 6px;transition:.15s ease;}
.cat-list a:hover{background:var(--tint2);}
.cat-list .ci{width:120px;height:78px;border-radius:10px;overflow:hidden;flex:0 0 auto;}
.cat-list .ci img{width:100%;height:100%;object-fit:cover;}
.cat-list h3{font-size:23px;margin:0 0 5px;}
.cat-list p{font-size:15px;color:var(--body2);margin:0;max-width:70ch;}
.cat-list .rt{font-size:13.5px;color:var(--muted);font-weight:700;white-space:nowrap;}

/* =========================================================
   ARTICLE / long-form component system
   ========================================================= */
.article-hero{position:relative;height:min(56vh,540px);min-height:380px;overflow:hidden;}
.article-hero img{width:100%;height:100%;object-fit:cover;}
.article-hero .hero-scrim{background:linear-gradient(0deg,rgba(22,48,60,.82) 2%,rgba(22,48,60,.28) 46%,rgba(22,48,60,.05) 100%);}
.article-hero .hero-inner{justify-content:flex-end;padding-bottom:44px;}
.article-hero .kicker{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark3);}
.article-hero h1{color:#fff;font-size:clamp(34px,5.4vw,62px);margin:14px 0 16px;max-width:20ch;text-shadow:0 2px 22px rgba(22,48,60,.5);}
.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#E7F0F5;font-size:15.5px;font-weight:600;}
.byline .sep{opacity:.5;}
.article-wrap{max-width:var(--wrap);margin:0 auto;padding:0 44px;}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:48px 0 20px;}
.article-body{max-width:74ch;margin:0 auto;padding-inline:4px;font-size:20px;line-height:1.75;color:var(--ink2);}
.article-body>p{margin:0 0 1.25em;}
.article-body a{color:var(--deep);text-decoration:underline;text-decoration-color:rgba(46,124,168,.35);text-underline-offset:2px;}
.article-body a:hover{text-decoration-color:var(--deep);}
.lead{font-size:23px;line-height:1.55;color:var(--body);font-weight:500;margin:0 0 1.1em;}
.article-body>p.drop::first-letter{font-family:var(--serif);font-weight:800;float:left;font-size:4.4em;line-height:.78;padding:6px 12px 0 0;color:var(--gold);}
.h2-num{display:flex;align-items:baseline;gap:14px;margin:1.8em 0 .6em;scroll-margin-top:90px;}
.h2-num .n{font-family:var(--serif);font-weight:800;font-size:.62em;color:var(--blue);letter-spacing:0;flex:0 0 auto;}
.h2-num h2{font-size:clamp(26px,3.2vw,36px);}
.entry-lead{font-weight:800;color:var(--ink);}

/* pull-quote */
.pullquote{margin:1.6em 0;border:0;padding:0;border-left:4px solid var(--gold);padding-left:26px;}
.pullquote p{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.18;color:var(--deep);letter-spacing:-.01em;margin:0;}
/* sourced quote */
.blockquote{margin:1.6em 0;padding:24px 28px;background:var(--tint);border-radius:14px;}
.blockquote p{font-size:20px;font-style:italic;color:var(--ink2);margin:0 0 .5em;}
.blockquote cite{font-style:normal;font-weight:700;font-size:15px;color:var(--muted);}
/* callout */
.callout{margin:1.6em 0;background:#fff;border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:12px;padding:20px 24px;box-shadow:0 6px 18px rgba(31,60,72,.06);}
.callout p{margin:0;font-size:17px;line-height:1.55;color:var(--ink2);}
.callout strong{color:var(--deep);}
/* note */
.note{margin:1.4em 0;font-size:16px;line-height:1.55;color:var(--soft);background:var(--tint2);border-radius:10px;padding:14px 18px;border:1px dashed var(--border2);}
.note::before{content:"Note — ";font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;font-size:12px;}

/* by-the-numbers rail */
.bythenumbers{margin:1.8em 0;}
.bythenumbers .bt-head{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:0 0 14px;}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0;}
.statblock{background:var(--ink);color:#fff;border-radius:14px;padding:20px;}
.statblock .stat-num{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(30px,3.4vw,40px);letter-spacing:-.02em;color:var(--on-dark3);line-height:1;}
.statblock .stat-label{display:block;font-size:13.5px;line-height:1.35;color:var(--on-dark);margin-top:8px;}

/* timeline */
.timeline{list-style:none;margin:1.6em 0;padding:0;border-left:2px solid var(--border2);}
.timeline li{position:relative;padding:0 0 22px 26px;}
.timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid var(--paper);}
.timeline .t-when{display:block;font-family:var(--serif);font-weight:800;font-size:17px;color:var(--deep);}
.timeline .t-what{display:block;font-size:16px;color:var(--body2);margin-top:2px;line-height:1.5;}

/* versus / datatable */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:16px;}
.versus th,.versus td,.datatable th,.datatable td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;}
.versus thead th,.datatable thead th{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--tint2);}
.versus tbody th{font-weight:800;color:var(--ink);}
.datatable tbody tr:nth-child(even){background:var(--tint2);}
.versus td{color:var(--body2);}
.versus .vs-col{font-weight:700;color:var(--deep);}

/* charts */
.chart{margin:1.8em 0;}
.chart svg{width:100%;height:auto;overflow:visible;}
.chart figcaption{font-size:14px;color:var(--muted2);margin-top:12px;}
.chart .bar-track{fill:var(--border);}
.chart .bar-fill{fill:var(--blue);}
.chart .bar-label{font-family:var(--sans);font-size:13px;fill:var(--body2);}
.chart .bar-val{font-family:var(--serif);font-size:13px;font-weight:800;fill:var(--deep);}
.chart .axis{stroke:var(--border2);stroke-width:1;}
.chart .line-path{fill:none;stroke:var(--blue);stroke-width:2.5;}
.chart .line-area{fill:rgba(46,124,168,.12);}
.chart .dot{fill:var(--deep);}

/* figures + gallery */
.article-figure{margin:1.8em 0;}
.article-figure img{width:100%;border-radius:14px;}
.article-figure figcaption{font-size:14.5px;color:var(--muted2);margin-top:10px;line-height:1.45;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.8em 0;}
.gallery figure{margin:0;}
.gallery img{aspect-ratio:1/1;object-fit:cover;border-radius:12px;}
.breakout{margin-inline:calc(50% - 50vw);max-width:100vw;}
@media(min-width:1100px){.breakout{margin-inline:-90px;}}

/* map figure */
.map-figure{margin:1.8em 0;}
.map-figure .map-slot{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--tint);position:relative;}
.map-figure figcaption{font-size:14.5px;color:var(--muted2);margin-top:10px;}

/* profile / org cards */
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:1.6em 0;}
.profile-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;flex-direction:column;}
.profile-card .p-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:12px;}
.profile-card h3{font-size:19px;margin:0 0 3px;}
.profile-card .p-role{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin:0 0 9px;}
.profile-card p{font-size:15px;line-height:1.5;color:var(--body2);margin:0;}
.profile-card.no-photo{border-left:4px solid var(--palm);}
.p-links{margin-top:10px!important;font-weight:700;}
.p-attr{font-size:13px;color:var(--muted);}
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:1.6em 0;}
.org-card{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;transition:.15s ease;}
.org-card:hover{border-color:var(--blue);box-shadow:var(--shadow);}
.org-name{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);}
.org-host{font-size:13px;color:var(--muted);}
.entity-ref{font-weight:700;white-space:nowrap;}
.entity-ref::after{content:"";}

/* aside floats for by-the-numbers on wide screens */
@media(min-width:1080px){
  .article-body .aside-float{float:right;width:300px;margin:6px 0 24px 40px;}
}

/* related + further */
.related{margin:40px auto 0;max-width:74ch;padding-inline:4px;border-top:1px solid var(--border);padding-top:28px;}
.related h2{font-size:26px;margin:0 0 18px;}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.related-links li{border-bottom:1px solid var(--border);}
.related-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 4px;font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);}
.related-links a:hover{color:var(--deep);}
.related-links .rt{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted);}
.further-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.6em 0;}
.further-grid a{background:var(--tint);border-radius:12px;padding:18px;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);transition:.15s ease;}
.further-grid a:hover{background:var(--blue);color:#fff;}

/* styleguide scaffolding */
.sg-section{padding:34px 0;border-bottom:1px solid var(--border);}
.sg-label{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:800;margin:0 0 4px;}
.sg-section>.wrap>h2{font-size:30px;margin:0 0 6px;}
.sg-note{font-size:15px;color:var(--muted);margin:0 0 22px;}
.sg-demo{max-width:74ch;}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.swatch{border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.swatch .chip-c{height:64px;}
.swatch .lab{padding:10px 12px;font-size:13px;}
.swatch .lab b{display:block;color:var(--ink);font-size:14px;}
.swatch .lab span{color:var(--muted);font-family:var(--sans);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .glance{grid-template-columns:repeat(2,1fr);gap:24px 22px;}
  .split{grid-template-columns:1fr;}
  .split-media{min-height:280px;}
  .sponsor-grid.featured{grid-template-columns:repeat(2,1fr);}
  .sponsor-grid.regulars{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  body{font-size:17px;}
  .wrap,.article-wrap{padding:0 24px;}
  .nav{position:fixed;inset:74px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--border);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;box-shadow:var(--shadow);display:none;}
  .nav.open{display:flex;}
  .nav a{padding:13px 12px;border-radius:8px;font-size:16px;}
  .nav-toggle{display:inline-flex;}
  .card-grid.g3,.card-grid.feature,.closing{grid-template-columns:1fr;}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:170px;}
  .mosaic figure.tall{grid-row:span 2;}
  .profile-grid,.gallery,.further-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .article-body{font-size:18px;}
  .lead{font-size:20px;}
  .article-body .aside-float{float:none;width:auto;margin:1.6em 0;}
  .split-body{padding:34px 26px;}
  .cat-list a{grid-template-columns:1fr;gap:12px;}
  .cat-list .ci{width:100%;height:180px;}
  .cat-list .rt{justify-self:start;}
  .breakout{margin-inline:0;}
  .section{padding:48px 0 8px;}
  .section-head h2{font-size:clamp(28px,6.5vw,40px);}
  .hero-media{min-height:400px;}
  .glance{padding-top:36px;}
  .article-hero{height:auto;min-height:342px;}
  .article-hero .hero-inner{padding-bottom:30px;}
  .article-hero h1{font-size:clamp(30px,7vw,44px);}
  .h2-num{gap:11px;margin:1.5em 0 .5em;}
  .article-body>p.drop::first-letter{font-size:3.4em;padding:5px 10px 0 0;}
  .article-figure,.sg-demo{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .article-body .datatable,.sg-demo .datatable,.sg-demo .versus{min-width:480px;}
  .related-links a{font-size:17px;gap:12px;}
}
@media (max-width:560px){
  .wrap,.article-wrap{padding:0 18px;}
  .glance{grid-template-columns:1fr;gap:20px;}
  .todo-grid{grid-template-columns:1fr;}
  .mosaic{grid-template-columns:1fr;grid-auto-rows:200px;}
  .mosaic figure.tall{grid-row:span 1;}
  .sponsor-grid.featured,.sponsor-grid.regulars{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:1fr;}
  .foot-cols{gap:32px;}
  .map-legend{position:static;margin:0;border-radius:0 0 12px 12px;box-shadow:none;}
  .hero-media{height:62vh;min-height:360px;}
  .hero h1{font-size:clamp(32px,9vw,46px);}
  .hero .dek{font-size:17px;}
  .hero-eyebrow{font-size:12px;}
  .section{padding:40px 0 8px;}
  .section-head{margin-bottom:20px;}
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px 4px;}
  .chip{flex:0 0 auto;}
  .section-head .dek .link-more{display:inline-flex;margin-top:6px;}
  .todo-card{padding:20px;}
  .glance-tile .v{font-size:25px;}
  .map-caption{font-size:13px;}
  .closing-card{padding:20px;}
  .friends{padding-top:44px;}
  .article-hero{min-height:300px;}
  .article-hero .hero-inner{padding-bottom:24px;}
  .article-hero h1{font-size:clamp(26px,7.6vw,34px);margin:12px 0 12px;}
  .byline{font-size:14px;gap:7px;}
  .article-body{font-size:17px;line-height:1.72;}
  .article-body>p.drop::first-letter{font-size:2.9em;padding:3px 9px 0 0;}
  .h2-num .n{font-size:.72em;}
  .h2-num h2{font-size:clamp(23px,6.2vw,28px);}
  .statblock{padding:18px;}
  .statblock .stat-num{font-size:30px;}
  .timeline li{padding-left:22px;}
  .article-figure figcaption,.map-figure figcaption{font-size:13.5px;}
  .related{padding-top:24px;}
  .related h2{font-size:23px;}
}
/* 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;background:transparent}

/* sp-relayout-fix */
.sponsor-grid.regulars .sponsor img,.regulars .sponsor img{max-height:48px!important;height:auto;width:auto;object-fit:contain;padding:4px 8px}
.sponsor-grid.regulars .sponsor{min-height:92px}

/* sp-final-fix: centre logos (was object-position:left) + enlarge featured */
.sponsor img{object-position:center center!important}
.sp-logo{display:flex;align-items:center;justify-content:center;width:100%}
.sponsor-grid.featured .sponsor img{max-height:62px!important}
.sponsor-grid.regulars .sponsor img{margin:0 auto;display:block}

/* 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. */
.sponsor-grid.regulars .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-grid.regulars .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 1275px of tier across
   12 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-grid.featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-grid.regulars .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-grid.featured (3 tiles), .sponsor-grid.regulars (9 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-grid.featured:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-grid.regulars:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 895px (99 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 74ch (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1440 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1440px){
  div.article-layout div.article-body{max-width:min(928px, 100%)!important}
}
@media (min-width:1600px){
  div.article-layout div.article-body{max-width:min(clamp(928px, 64.444vw, 1114px), 100%)!important}
  div.article-layout div.article-body > :is(p.drop, p:not([class])), div.article-layout div.article-body > :is(ol.timeline) > li{font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-grid.regulars 7 rows at 1024). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-grid.regulars .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-hover-pad */
.cat-list a{padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h3:where(.rt-h4){font-family: var(--serif); color: var(--ink); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; margin: 0px;}
div:where(.rt-h1){font-family: var(--serif); color: var(--ink); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; margin: 0px;}
.foot-col h3:where(.rt-h4){font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark2); margin: 0px 0px 13px;}
.map-legend h3:where(.rt-h4){font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); margin: 0px 0px 8px;}
.page-hero div:where(.rt-h1){font-size: clamp(34px, 5vw, 56px); margin: 12px 0px 10px; max-width: 18ch;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.ci > img,
  a.cap-fig > span.ph > img,
  a.photo-card > span.ph > img,
  article > header.article-hero > img,
  div.mosaic > figure > img,
  div.mosaic > figure.tall > img,
  div.split > div.split-media > img,
  section.hero > div.hero-media > img){height:auto}
/* op-img-dims:end */
.article-body.article-body{max-width:min(74ch,100%)!important}