/* ============================================================
   Saint-François-Longchamp — an independent visitor's guide
   Shared stylesheet. Palette + type from PICK_SPEC / PALETTE_SPEC.
   ============================================================ */
:root{
  --paper:#F1F7F9;
  --card:#FFFFFF;
  --warm-a:#FFF9F0;
  --ink:#26343B;
  --ink-body:#33454D;
  --ink-3:#43555E;
  --dek:#4C5D65;
  --dek-2:#5A6B73;
  --muted:#6D818B;
  --muted-2:#7A8D96;
  --head:#1F3D4C;
  --head-deep:#173540;
  --accent:#4E90AE;
  --amber:#C6843C;
  --amber-lt:#F0C088;
  --link:#2E6C8C;
  --border:#E4EEF1;
  --border-2:#EAF1F4;
  --footer:#1F3D4C;
  --footer-div:#345767;
  --g-green:#3E9C6B;
  --g-blue:#3F7FB0;
  --g-red:#C0553F;
  --g-black:#33434B;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --measure:44rem;
  --breakout:66rem;
  --wrap:76rem;
  --gutter:clamp(20px,5vw,48px);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:19px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--head);}
h1,h2,h3,h4{font-family:var(--serif);color:var(--head);font-weight:600;line-height:1.05;margin:0;}
p{margin:0 0 1.15em;text-wrap:pretty;}
::selection{background:#C6843C33;}

/* layout helpers */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);width:100%;}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;
  font-size:13px;font-weight:700;color:var(--accent);margin:0;}
.eyebrow.amber{color:var(--amber);}
.skip-link{position:absolute;left:-999px;top:0;background:var(--head);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* ===================== MASTHEAD ===================== */
.masthead{position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:14px;}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;}
.brand .wordmark{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--head);letter-spacing:.01em;}
.brand .tagline{font-family:var(--sans);text-transform:uppercase;letter-spacing:.17em;
  font-size:10px;font-weight:700;color:var(--accent);margin-top:4px;}
.nav{display:flex;gap:26px;align-items:center;}
.nav a{font-family:var(--sans);font-size:15.5px;font-weight:600;color:#42555E;position:relative;padding-block:6px;}
.nav a:hover{color:var(--amber);}
.nav a.active{color:var(--head);}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--amber);border-radius:2px;}
.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:9px;
  width:44px;height:44px;cursor:pointer;color:var(--head);align-items:center;justify-content:center;}
.nav-toggle svg{width:22px;height:22px;}

/* ===================== HERO ===================== */
.hero{position:relative;background:#dfe9ed;}
.hero-media{position:relative;height:clamp(420px,64vh,600px);}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.6) 40%,rgba(255,255,255,.05) 72%,transparent 100%);}
.hero-inner{position:absolute;inset:0;display:flex;align-items:center;}
.hero-inner .wrap{width:100%;}
.hero h1{font-size:clamp(52px,8.5vw,92px);color:var(--head-deep);margin:.12em 0 0;}
.hero .dek{font-size:clamp(18px,2.4vw,21px);color:var(--ink-3);max-width:34rem;margin:.9em 0 0;font-weight:400;}

/* ===================== SECTION SHELL ===================== */
.band{padding-block:clamp(48px,6vw,72px);}
.band.tint{background:#EAF3F6;border-block:1px solid var(--border);}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px;}
.band-head h2{font-size:clamp(32px,4.4vw,46px);margin-top:4px;}
.section-title{font-size:clamp(30px,4vw,40px);}

/* ===================== AT A GLANCE ===================== */
.toggle{display:inline-flex;gap:6px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:5px;}
.toggle button{font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;
  border:none;background:none;color:#42555E;padding:9px 22px;border-radius:999px;transition:.18s;}
.toggle button[aria-pressed="true"]{background:var(--accent);color:#fff;}
.glance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.glance-cell{background:#fff;border-radius:14px;padding:22px 24px;box-shadow:0 8px 22px -18px rgba(30,60,76,.5);}
.glance-cell .k{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:var(--accent);}
.glance-cell .v{font-size:19px;font-weight:700;color:var(--ink);margin-top:7px;line-height:1.35;}

/* ===================== CARD GRID (even height) ===================== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-2);
  border-radius:16px;overflow:hidden;box-shadow:0 12px 30px -24px rgba(30,60,76,.5);
  transition:transform .25s ease,box-shadow .25s ease;height:100%;color:inherit;}
a.card:hover{transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(30,60,76,.6);color:inherit;}
.card-media{aspect-ratio:16/10;overflow:hidden;background:#dfe9ed;}
.card-media img{width:100%;height:100%;object-fit:cover;}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.card .kicker{text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:700;color:var(--accent);margin-bottom:8px;}
.card h3{font-size:26px;line-height:1.08;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.16em;}
.card .dek{font-size:15px;line-height:1.55;color:var(--dek-2);flex:1;margin:0;}
.card .more{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--amber);font-weight:700;margin-top:18px;}

/* ===================== FEATURED SPLIT ===================== */
.feature{display:grid;grid-template-columns:1.15fr 1fr;background:#fff;border:1px solid var(--border-2);
  border-radius:20px;overflow:hidden;box-shadow:0 16px 40px -30px rgba(30,60,76,.5);
  transition:transform .25s,box-shadow .25s;color:inherit;}
a.feature:hover{transform:translateY(-4px);box-shadow:0 26px 54px -30px rgba(30,60,76,.6);color:inherit;}
.feature-media{min-height:340px;background:#dfe9ed;}
.feature-media img{width:100%;height:100%;object-fit:cover;}
.feature-body{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,var(--warm-a),var(--paper));}
.feature-body h3{font-size:clamp(30px,3.5vw,46px);line-height:1.02;margin:8px 0 14px;}
.feature-body p{font-size:16.5px;line-height:1.6;color:var(--dek);margin:0;}

/* ===================== MAP BLOCK ===================== */
.map-block{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,3vw,40px);align-items:stretch;}
.map-frame{position:relative;border:1px solid var(--border-2);border-radius:20px;overflow:hidden;
  background:#F7FAFB;box-shadow:0 16px 40px -30px rgba(30,60,76,.5);padding:10px;}
.map-frame .locator{width:100%;height:auto;display:block;}
.map-cap{position:absolute;left:22px;bottom:16px;text-transform:uppercase;letter-spacing:.09em;
  font-size:11.5px;font-weight:700;color:var(--muted);}
.map-side{display:flex;flex-direction:column;justify-content:center;}
.map-side h3{font-size:clamp(28px,3.4vw,38px);margin:2px 0 16px;}
.map-side p{font-size:16px;line-height:1.65;color:var(--dek);margin:0 0 22px;}
.travel-rows{display:flex;flex-direction:column;gap:14px;}
.travel-row{display:flex;gap:14px;align-items:flex-start;}
.travel-row svg{width:24px;height:24px;flex:none;color:var(--accent);margin-top:2px;}
.travel-row b{color:var(--head);font-weight:700;}
.travel-row span{color:var(--ink-3);font-size:15.5px;}

/* ===================== SPONSORS — "The noticeboard" ===================== */
.board-head{text-align:center;max-width:40rem;margin:0 auto 8px;}
.board-head h2{font-size:clamp(28px,3.6vw,40px);margin-top:4px;}
.board-head p{color:var(--dek);font-size:16px;margin-top:10px;}
.sponsor{display:flex;gap:20px;align-items:center;text-decoration:none;color:inherit;}
.sponsor-logo{background:#20323d;border-radius:12px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex:none;}
.sponsor-logo img{width:100%;height:100%;object-fit:cover;opacity:1;}
.sponsor-blurb{color:var(--dek);font-size:15px;line-height:1.5;}
/* featured woven single card */
.sponsor-woven{background:#fff;border:1px solid var(--border-2);border-radius:16px;
  padding:20px 24px;box-shadow:0 10px 28px -22px rgba(30,60,76,.5);
  display:flex;gap:24px;align-items:center;transition:transform .2s,box-shadow .2s;}
.sponsor-woven:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(30,60,76,.55);}
.sponsor-woven .tag{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;
  color:var(--amber);margin-bottom:8px;}
.sponsor-woven .sponsor-logo{width:210px;height:76px;}
.sponsor-woven .sponsor-blurb{font-size:15.5px;}
.woven-slot{margin-block:clamp(30px,4vw,44px);}
.woven-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.sponsor.sponsor-card{flex-direction:column;align-items:flex-start;gap:12px;background:#fff;
  border:1px solid var(--border-2);border-radius:14px;padding:18px;height:100%;
  box-shadow:0 10px 28px -22px rgba(30,60,76,.5);transition:transform .2s,box-shadow .2s;}
.sponsor.sponsor-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(30,60,76,.55);}
.sponsor-card .sponsor-logo{width:100%;height:72px;}
.sponsor-card .tag{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;color:var(--amber);}
.woven-slot .pin-note{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:700;
  color:var(--muted-2);text-align:center;margin-bottom:14px;}
/* pinned board of the quieter remainder */
.board{display:flex;flex-wrap:wrap;gap:22px 26px;justify-content:center;}
.board .sponsor{flex-direction:column;gap:12px;align-items:flex-start;width:min(260px,100%);
  background:#fff;border:1px solid var(--border-2);border-radius:12px;padding:16px;
  box-shadow:0 8px 22px -20px rgba(30,60,76,.5);transition:transform .2s;}
.board .sponsor:nth-child(3n+1){transform:rotate(-1.1deg);}
.board .sponsor:nth-child(3n+2){transform:rotate(.8deg);}
.board .sponsor:nth-child(3n){transform:rotate(-.4deg);}
.board .sponsor:hover{transform:rotate(0) translateY(-3px);}
.board .sponsor::before{content:"";position:absolute;}
.board .sponsor-logo{width:100%;height:66px;}
.board-wrap{position:relative;background:#EAF3F6;border:1px solid var(--border);border-radius:20px;
  padding:clamp(26px,3.4vw,44px);}

/* ===================== FOOTER ===================== */
.site-foot{background:var(--footer);color:#BCD4DE;padding-block:clamp(40px,5vw,56px);margin-top:8px;}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px;align-items:flex-start;}
.foot-top .wordmark{font-family:var(--serif);font-size:26px;font-weight:600;color:#fff;}
.foot-top .tagline{text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;font-weight:700;color:#8FBDD1;margin-top:5px;}
.foot-nav{display:flex;gap:24px;flex-wrap:wrap;}
.foot-nav a{font-size:14px;font-weight:600;color:#AECBD8;}
.foot-nav a:hover{color:#fff;}
.foot-note{border-top:1px solid var(--footer-div);margin-top:26px;padding-top:18px;
  font-size:13px;color:#84AEC1;line-height:1.6;max-width:60rem;}

/* ===================== ARTICLE ===================== */
.article-hero{position:relative;background:#dfe9ed;}
.article-hero-media{height:clamp(340px,52vh,520px);}
.article-hero-media img{width:100%;height:100%;object-fit:cover;}
.article-hero .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,34,44,.82) 0%,rgba(15,34,44,.1) 55%,rgba(15,34,44,.32) 100%);}
.article-hero .inner{position:absolute;inset:0;display:flex;align-items:flex-end;padding-bottom:clamp(28px,4vw,48px);}
.article-hero .inner .measure-wide{width:100%;}
.crumb{font-size:14px;font-weight:600;margin-bottom:14px;}
.article-hero .crumb,.article-hero .crumb a{color:#EAF2F6;}
.article-hero .crumb a:hover{color:var(--amber-lt);}
.article-hero .eyebrow{color:var(--amber-lt);}
.article-hero h1{color:#fff;font-size:clamp(38px,6vw,62px);margin:10px 0 0;max-width:20ch;}
.byline{margin-top:16px;color:#DCE7EC;font-size:14.5px;font-weight:600;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;text-transform:uppercase;letter-spacing:.08em;}
.byline .sep{color:#7FA6B7;}

.article-body{max-width:var(--measure);margin-inline:auto;padding-inline:clamp(20px,5vw,32px);
  padding-block:clamp(36px,5vw,52px);font-size:20px;line-height:1.75;color:var(--ink-body);}
.article-body>p,.article-body>h2,.article-body>h3,.article-body>.note,.article-body>.callout{}
.article-body h2{font-size:clamp(28px,3.6vw,34px);margin:1.6em 0 .5em;color:var(--head);}
.article-body h3{font-size:24px;margin:1.4em 0 .4em;}
.sec-no{display:inline-block;font-family:var(--sans);font-weight:800;font-size:14px;color:var(--amber);
  letter-spacing:.05em;vertical-align:middle;margin-right:12px;
  border:1.5px solid #E7CBA6;border-radius:999px;padding:2px 10px;position:relative;top:-4px;}
.article-body a{color:var(--link);text-decoration:underline;text-decoration-color:#B9D2DE;text-underline-offset:3px;}
.article-body a:hover{text-decoration-color:var(--amber);color:var(--head);}
.lead{font-family:var(--serif);font-size:clamp(24px,3vw,30px);line-height:1.4;color:#28414C;
  font-weight:500;margin:0 0 1em;}
.dropcap::first-letter{font-family:var(--serif);font-weight:600;color:var(--accent);
  font-size:4.4em;line-height:.72;float:left;padding:8px 14px 0 0;}

/* breakout wrappers inside article */
.breakout{max-width:var(--breakout);margin-inline:auto;padding-inline:var(--gutter);
  margin-block:clamp(30px,4vw,44px);}

/* ---- palette components ---- */
.pullquote{margin:0;border:none;}
.pullquote-band{background:var(--head);color:#fff;}
.pullquote-band .breakout{padding-block:clamp(34px,5vw,56px);}
.pullquote p{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(26px,3.6vw,40px);line-height:1.25;margin:0;max-width:24ch;color:#fff;}
.pullquote p::before{content:"“";color:var(--amber-lt);}
.pullquote p::after{content:"”";color:var(--amber-lt);}

.blockquote{margin:1.6em 0;padding:6px 0 6px 26px;border-left:3px solid var(--amber);}
.blockquote p{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.35;color:var(--head);margin:0 0 .3em;}
.blockquote cite{font-family:var(--sans);font-style:normal;font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}

.callout{background:var(--warm-a);border:1px solid #EFE1CC;border-left:4px solid var(--amber);
  border-radius:12px;padding:22px 26px;margin:1.6em 0;}
.callout p{margin:0;font-size:17.5px;line-height:1.6;color:var(--ink-3);}
.callout .callout-label{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;
  font-weight:800;color:var(--amber);margin-bottom:8px;}

.note{background:#EAF3F6;border-radius:10px;padding:14px 18px;font-size:16px;color:var(--ink-3);margin:1.4em 0;
  position:relative;padding-left:46px;}
.note::before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;border-radius:50%;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E") center/contain no-repeat;}

/* tables */
.datatable,.versus{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:16px;
  background:#fff;border:1px solid var(--border-2);border-radius:14px;overflow:hidden;}
.datatable caption,.versus caption{caption-side:top;text-align:left;font-family:var(--sans);
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800;color:var(--accent);
  margin-bottom:12px;}
.datatable th,.versus th{background:#EAF3F6;text-align:left;font-weight:800;color:var(--head);
  font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding:14px 18px;}
.datatable td,.versus td{padding:14px 18px;border-top:1px solid var(--border);color:var(--ink-3);vertical-align:top;}
.datatable tr:nth-child(even) td{background:#FAFCFD;}
.versus td:first-child{font-weight:700;color:var(--head);}
.versus td+td,.versus th+th{border-left:1px solid var(--border);}
.grade{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:3px 12px;
  border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;}
.grade.green{background:var(--g-green);}.grade.blue{background:var(--g-blue);}
.grade.red{background:var(--g-red);}.grade.black{background:var(--g-black);}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.statblock{background:#fff;border:1px solid var(--border-2);border-radius:14px;padding:22px;
  text-align:center;box-shadow:0 8px 22px -20px rgba(30,60,76,.5);}
.stat-num{display:block;font-family:var(--serif);font-size:clamp(34px,4vw,44px);font-weight:600;color:var(--accent);line-height:1;}
.stat-label{display:block;font-size:14px;color:var(--muted);margin-top:8px;line-height:1.35;}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--border);}
.timeline li{position:relative;padding:0 0 22px 26px;}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--amber);border:2px solid #fff;box-shadow:0 0 0 1px #E7CBA6;}
.timeline .t-when{display:block;font-weight:800;color:var(--head);font-size:15px;}
.timeline .t-what{display:block;color:var(--ink-3);font-size:16px;margin-top:2px;}

/* charts */
.chart{margin:0;background:#fff;border:1px solid var(--border-2);border-radius:14px;padding:22px 24px;}
.chart svg{width:100%;height:auto;display:block;overflow:visible;}
.chart figcaption{font-size:14px;color:var(--muted);margin-top:14px;}
.chart .bar-rect{fill:var(--accent);}
.chart .bar-label{font-size:13px;fill:var(--ink-3);font-weight:600;}
.chart .bar-val{font-size:12px;fill:var(--muted);font-weight:700;}
.chart .axis{stroke:var(--border);stroke-width:1;}

/* figures + gallery */
.article-figure{margin:0;}
.article-figure img{width:100%;border-radius:14px;background:#dfe9ed;}
.article-figure figcaption{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.5;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#dfe9ed;}
.gallery figcaption{font-size:13px;color:var(--muted);margin-top:6px;}

/* map-figure */
.map-figure{margin:0;}
.map-figure .map-slot{border:1px solid var(--border-2);border-radius:16px;overflow:hidden;
  background:#F7FAFB;padding:10px;position:relative;}
.map-figure .locator{width:100%;height:auto;display:block;}
.map-figure figcaption{font-size:14.5px;color:var(--muted);margin-top:10px;}

/* profile + org cards */
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.profile-card{background:#fff;border:1px solid var(--border-2);border-radius:16px;padding:24px;}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#dfe9ed;margin-bottom:14px;}
.profile-card.no-photo::before{content:"";display:block;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--head));margin-bottom:14px;}
.profile-card h3{font-size:24px;}
.profile-card .p-role{font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--amber);margin:2px 0 12px;}
.profile-card p{font-size:15.5px;line-height:1.55;color:var(--ink-3);}
.profile-card .p-links a{font-weight:700;font-size:14px;}
.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.org-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border-2);
  border-radius:12px;padding:14px 16px;color:inherit;transition:transform .2s,box-shadow .2s;}
.org-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px -22px rgba(30,60,76,.5);color:inherit;}
.org-logo,.org-card.no-logo::before{width:44px;height:44px;border-radius:10px;flex:none;object-fit:cover;background:#20323d;}
.org-card.no-logo::before{content:"";background:linear-gradient(135deg,var(--accent),var(--head));}
.org-name{font-weight:700;color:var(--head);font-size:15px;display:block;}
.org-host{font-size:13px;color:var(--muted);}
.entity-ref{font-weight:700;color:var(--link);white-space:nowrap;}

/* related / further / cat lists */
.further-grid,.related-links{max-width:var(--breakout);margin:0 auto;}
.related h2,.further-title{font-family:var(--serif);font-size:30px;color:var(--head);margin:0 0 18px;}
.related-links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.related-links a{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--border-2);
  border-radius:14px;padding:20px;color:inherit;transition:transform .2s,box-shadow .2s;height:100%;}
.related-links a:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(30,60,76,.55);color:inherit;}
.related-links .rl-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--accent);}
.related-links .rl-title{font-family:var(--serif);font-size:21px;color:var(--head);line-height:1.1;}
.further-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.further-grid a{background:#fff;border:1px solid var(--border-2);border-radius:14px;padding:18px 20px;
  font-weight:600;color:var(--head);}
.further-grid a:hover{color:var(--amber);}

/* category / index list */
.cat-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.cat-list a{display:grid;grid-template-columns:120px 1fr;gap:18px;background:#fff;border:1px solid var(--border-2);
  border-radius:16px;overflow:hidden;color:inherit;transition:transform .2s,box-shadow .2s;height:100%;}
.cat-list a:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(30,60,76,.55);color:inherit;}
.cat-list .cl-media{background:#dfe9ed;}
.cat-list .cl-media img{width:100%;height:100%;object-fit:cover;}
.cat-list .cl-body{padding:18px 20px 18px 0;display:flex;flex-direction:column;justify-content:center;}
.cat-list .cl-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--accent);margin-bottom:5px;}
.cat-list .cl-title{font-family:var(--serif);font-size:23px;color:var(--head);line-height:1.08;margin-bottom:6px;}
.cat-list .cl-dek{font-size:14.5px;color:var(--dek-2);line-height:1.5;}

/* plain sponsor slot (single, on article) */
.sponsor-slot{border:1px dashed #CFE0E7;border-radius:16px;background:#fff;padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.sponsor-slot .ss-eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:700;color:#7FA6B7;}
.sponsor-slot p{margin:5px 0 0;font-size:15px;color:var(--muted);}
.sponsor-slot .ss-pill{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:#7FA6B7;
  border:1px solid #CFE0E7;border-radius:20px;padding:9px 18px;white-space:nowrap;}

/* CSS-only "show more" */
.more-toggle{display:none;}
.more-btn{display:inline-block;cursor:pointer;font-weight:700;color:var(--accent);
  border:1px solid var(--border);border-radius:999px;padding:10px 22px;margin-top:22px;font-size:14px;}
.more-btn:hover{background:#EAF3F6;}
.more-toggle:checked ~ .more-items{display:contents;}
.more-items{display:none;}
.more-toggle:checked ~ .more-btn{display:none;}

/* generic page (about/contact/404) */
.page-head{padding-block:clamp(40px,6vw,72px) 8px;}
.page-head h1{font-size:clamp(40px,6vw,68px);}
.page-head .dek{font-size:clamp(18px,2.2vw,22px);color:var(--dek);max-width:40rem;margin-top:14px;}
.prose{max-width:var(--measure);font-size:18px;line-height:1.7;color:var(--ink-body);padding-block:clamp(24px,3vw,40px);}
.prose h2{font-size:28px;margin:1.5em 0 .4em;}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#B9D2DE;}

/* styleguide bits */
.sg-section{padding-block:36px;border-bottom:1px solid var(--border);}
.sg-section>h2{font-size:30px;margin-bottom:6px;}
.sg-label{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:18px;}
.sg-swatches{display:flex;flex-wrap:wrap;gap:14px;}
.sw{width:120px;}
.sw .chip{height:64px;border-radius:10px;border:1px solid rgba(0,0,0,.06);}
.sw .nm{font-size:12px;font-weight:700;color:var(--head);margin-top:6px;}
.sw .hx{font-size:12px;color:var(--muted);}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1000px){
  .map-block{grid-template-columns:1fr;}
  .map-side{order:-1;}
  .cat-list{grid-template-columns:1fr;}
}
@media (max-width:860px){
  body{font-size:18px;}
  .nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:#fff;flex-direction:column;
    align-items:flex-start;gap:4px;padding:88px 28px 28px;transform:translateX(100%);
    transition:transform .28s ease;box-shadow:-20px 0 50px -30px rgba(0,0,0,.5);z-index:90;}
  .nav.open{transform:translateX(0);}
  .nav a{font-size:18px;padding-block:12px;width:100%;border-bottom:1px solid var(--border-2);}
  .nav-toggle{display:inline-flex;}
  .card-grid,.glance-grid,.org-grid,.gallery,.related-links,.further-grid,.woven-row{grid-template-columns:1fr;}
  .profile-grid,.statrow{grid-template-columns:1fr;}
  .feature{grid-template-columns:1fr;}
  .feature-media{min-height:240px;aspect-ratio:16/10;}
  .sponsor-woven{flex-direction:column;align-items:flex-start;gap:16px;}
  .sponsor-woven .sponsor-logo{width:100%;}
  .article-body{font-size:18px;}
  .glance-grid{gap:12px;}
}
@media (max-width:520px){
  .statrow{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .cat-list a{grid-template-columns:88px 1fr;}
  .hero-scrim{background:linear-gradient(0deg,rgba(255,255,255,.97) 8%,rgba(255,255,255,.7) 46%,rgba(255,255,255,.25) 100%);}
  .foot-top{flex-direction:column;}
}

/* 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-logo-panel (finalize): adult wordmark logos are light/transparent → give the logo tile its own
   dark panel (Design's .sponsor-logo intent, matched to the injected .sp-logo class) so they show on light cards. */
.sp-logo{background:#20323d;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sp-logo img{object-fit:contain!important;width:100%;height:100%;padding:12px 16px;box-sizing:border-box;background:transparent}

/* sp-final-fix: board logos centred + sized on dark tile */
.board .sponsor-logo{display:flex;align-items:center;justify-content:center}
.board .sponsor-logo img{object-position:center center!important;max-height:100%}

/* 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. */
.woven-row .sponsor.sponsor-card.sponsor.sponsor-card img{box-sizing:border-box!important;object-fit:contain!important;padding:12px 19px!important}
.board .sponsor.sponsor img{box-sizing:border-box!important;object-fit:contain!important;padding:11px 18px!important}

/* op-drawer-clip: the mobile nav is position:fixed and parked off-canvas to the RIGHT, so its box
   added its full width to the document's scroll width — the page was hundreds of px wider than the
   phone. overflow-x:clip on the root stops a parked panel contributing to scroll width; `clip`
   rather than `hidden` because hidden creates a scroll container and breaks position:sticky
   elsewhere. Verified per build: the drawer still opens and lands fully on screen. */
/* ⚠️ scoped to phone widths on the operator's instruction: "We basically want to
     desktop grid design to stay as-is ... We are strictly re-working how mobile is
     displaying." the parked off-canvas drawer only exists at phone widths, so the clip has no business at desktop. */
@media (max-width:900px){html,body{overflow-x:clip}}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2307px at 390, 27% of the whole page. Two columns bring it to
   1181px (49% shorter). Checked before writing: no new overflow, smallest mark still
   104px wide, longest blurb 3 lines, tile heights 180-190px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.woven-row, .board), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .woven-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px!important}
    .woven-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .woven-row > * *{min-width:0!important;max-width:100%}
    .woven-row img,.woven-row svg{max-width:100%;height:auto}
  .board{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px!important}
    .board > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .board > * *{min-width:0!important;max-width:100%}
    .board img,.board svg{max-width:100%;height:auto}
  .woven-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .board .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 640px (71 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article div.article-body{--measure:min(979px, 100%)!important}
}
@media (min-width:1600px){
  article div.article-body{--measure:min(clamp(979px, 67.986vw, 1175px), 100%)!important}
  article div.article-body > :is(p:not([class])){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: .woven-row 5 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){
  .woven-row .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-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > div.cl-media > img,
  a.card > div.card-media > img,
  a.feature > div.feature-media > img,
  div.card > div.card-media > img,
  header.article-hero > div.article-hero-media > img,
  section.hero > div.hero-media > img){height:auto}
/* op-img-dims:end */
@media (min-width:860px) and (max-width:1023px){.board.board:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(261px,calc(50% - 13px)),1fr))!important;column-gap:26px!important;row-gap:22px!important;justify-content:stretch!important;align-items:stretch!important}.board.board > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}
@media (min-width:700px) and (max-width:879px){.woven-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.woven-row:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}