/* =====================================================================
   assets/styles.css   —   THE APPEARANCE FILE
   =====================================================================

   Every colour, size, spacing and layout decision on the whole website
   lives in this one file. There is no text here - only appearance.

   THE EASIEST AND SAFEST EDIT
     The block immediately below is called :root. It lists the site's
     colours once, each with a name. Change a colour there and it
     changes everywhere it is used, on every page. For example
     --ocean is the teal used for links and small headings.

   HOW A RULE WORKS
       .p-name { font-size: 1.35rem; }
       \____/   \_______________/
         |              |
         |              the change to make
         the thing being changed, by its label

   USEFUL LABELS TO KNOW
     .hero ............ the top section of the home page
     .nav ............. the masthead
     .profile ......... a speaker or team member card
     .member-photo .... the portrait on an individual profile page
     .gal-item ........ one gallery photograph
     footer ........... the dark band at the bottom

   SIZES: 1rem is roughly the size of normal body text, so 1.35rem is
   35% larger. px means screen dots. Increasing a font-size is one of
   the safest changes you can make.

   RULES LOWER DOWN THE FILE WIN. If you change something and nothing
   happens, a later rule is probably overriding it - search the file for
   the same label to find it.
   ===================================================================== */


:root{
  /* Palette derived from the symposium logo: atom + sunrise + ocean */
  --abyss:#052430;        /* deep-sea ink, dark sections + text */
  --abyss-2:#083344;
  --ocean:#0E7C86;        /* primary teal */
  --ocean-bright:#12A7B0;
  --lagoon:#39C0C4;
  --orbit:#94A524;        /* olive-gold orbit ring (used sparingly) */
  --sun:#F4A81C;          /* rising sun */
  --sun-hi:#F8C948;       /* sun highlight */
  --coral:#EE7B2B;        /* small spark */
  --sand:#FBF6EC;         /* warm light background */
  --sand-2:#F3EAD8;
  --paper:#FFFFFF;
  --ink-soft:#3A4C52;

  --maxw:1240px;
  --shadow:0 18px 50px -24px rgba(5,36,48,.45);
  --shadow-sm:0 6px 22px -14px rgba(5,36,48,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--sand);color:var(--abyss);
  font-family:"Manrope",system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.05;margin:0}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* small mono label used for eyebrows + schedule times (encodes data) */
.eyebrow{
  font-family:"Space Mono",monospace;font-size:12px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ocean);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--orbit)}
.eyebrow.on-dark{color:var(--lagoon)}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{display:none}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(251,246,236,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(5,36,48,.08);
}
/* ROW 1 — brand alone, centred, given the grand central space */
.nav-brandbar{border-bottom:1px solid rgba(5,36,48,.07)}
.nav-brandbar .wrap{display:flex;justify-content:center;align-items:center;padding-top:14px;padding-bottom:12px}
.brand{display:inline-flex;align-items:center;gap:14px;text-align:center}
.brand img{width:44px;height:44px;object-fit:contain;flex:none}
.brand .b-txt{font-family:"Fraunces",serif;font-weight:600;font-size:27px;line-height:1.06;
  letter-spacing:-.005em;color:var(--abyss)}
.brand .b-txt small{display:block;font-family:"Space Mono",monospace;font-weight:400;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ocean);margin-top:5px}
/* ROW 2 — the menu */
.nav-menubar .wrap{display:flex;align-items:center;justify-content:center;gap:20px;min-height:48px}
.nav-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center}
.nav-links a{font-size:14px;font-weight:600;color:var(--ink-soft);transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--ocean)}
.nav-links a[aria-current="page"]{color:var(--ocean)}
/* Support button. Selector must out-specify `.nav-links a` (class+element),
   or the link colour wins and the label goes dark-on-dark. */
.nav-links a.nav-cta{
  background:linear-gradient(180deg,var(--sun-hi),var(--sun));
  color:#3a2600;font-weight:700;padding:9px 18px;border-radius:999px;font-size:13px;
  box-shadow:0 3px 12px -4px rgba(244,168,28,.85);transition:transform .18s,box-shadow .18s,filter .18s}
.nav-links a.nav-cta:hover{color:#3a2600;filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 6px 18px -6px rgba(244,168,28,.95)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;z-index:70}
.burger span{display:block;width:24px;height:2px;background:var(--abyss);margin:5px 0;transition:transform .25s,opacity .2s}
/* mobile: brand stays centred on its own line; menu collapses to a dropdown */
.is-mobile .brand img{width:34px;height:34px}
.is-mobile .brand .b-txt{font-size:18px}
.is-mobile .brand .b-txt small{font-size:8.5px;letter-spacing:.14em}
.is-mobile .nav-brandbar .wrap{padding-top:11px;padding-bottom:9px}
.is-mobile .nav-menubar .wrap{min-height:44px;justify-content:flex-end}
.is-mobile .burger{display:block}
.is-mobile .nav-links{
  position:absolute;top:100%;left:0;right:0;margin:0;
  display:none;flex-direction:column;align-items:stretch;gap:0;
  background:var(--sand);border-top:1px solid rgba(5,36,48,.08);
  border-bottom:1px solid rgba(5,36,48,.12);box-shadow:var(--shadow);padding:8px 0;
}
.is-mobile .nav.nav-open .nav-links{display:flex}
.is-mobile .nav-links a{padding:15px 24px;font-size:16px;color:var(--abyss)}
.is-mobile .nav-links a:not(.nav-cta):active{background:var(--sand-2)}
.is-mobile .nav-links a.nav-cta{margin:12px 24px 8px;text-align:center;padding:14px;color:#3a2600}
.nav.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .burger span:nth-child(2){opacity:0}
.nav.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;
  padding:96px 0;
  background:radial-gradient(120% 90% at 72% 116%, #0a3a4a 0%, var(--abyss) 55%, #04202b 100%);
  color:var(--sand);overflow:hidden;isolation:isolate}
/* signature: sunrise that rises on load + slow orbit rings, biased to the visual side */
.sunrise{position:absolute;left:72%;bottom:-46%;translate:-50% 0;
  width:min(1300px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
     rgba(248,201,72,.55) 0%, rgba(244,168,28,.30) 26%,
     rgba(238,123,43,.14) 42%, rgba(14,124,134,0) 62%);
  animation:rise 1.9s cubic-bezier(.16,.8,.3,1) both;z-index:-2}
@keyframes rise{from{opacity:0;translate:-50% 22%}to{opacity:1;translate:-50% 0}}
.orbits{position:absolute;left:72%;top:50%;translate:-50% -50%;
  width:min(640px,60vw);aspect-ratio:1;z-index:-1;opacity:.55}
.orbits span{position:absolute;inset:0;border:1px solid rgba(57,192,196,.35);border-radius:50%}
.orbits span:nth-child(1){transform:rotate(24deg) scaleY(.42);animation:spin 26s linear infinite}
.orbits span:nth-child(2){transform:rotate(-40deg) scaleY(.5);border-color:rgba(148,165,36,.32);animation:spin 34s linear infinite reverse}
.orbits span:nth-child(3){transform:rotate(78deg) scaleY(.38);border-color:rgba(248,201,72,.28);animation:spin 44s linear infinite}
@keyframes spin{to{rotate:360deg}}
/* two-column desktop hero: copy left, logo right */
.hero-grid{position:relative;z-index:2;width:100%;display:grid;
  grid-template-columns:1.06fr .94fr;align-items:center;gap:56px;text-align:left}
.hero-copy{display:grid;gap:26px;justify-items:start}
.hero-eyebrow{animation:fadeUp .8s .15s both}
.hero h1{font-size:clamp(2.1rem,3.5vw,3.6rem);letter-spacing:-.015em;max-width:26ch;margin:0;text-wrap:balance;
  animation:fadeUp .9s .26s both}
.hero h1 em{font-style:italic;color:var(--sun-hi);white-space:nowrap}
.hero .lede{max-width:52ch;font-size:clamp(1.05rem,1.4vw,1.28rem);color:#dce7e6;margin:0;
  animation:fadeUp .9s .4s both}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;animation:fadeUp .9s .52s both}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 12px;animation:fadeUp .9s .64s both}
.chip{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.08em;
  border:1px solid rgba(57,192,196,.4);color:#cfeceb;padding:7px 14px;border-radius:999px}
.chip b{color:var(--sun-hi);font-weight:700}
.hero-visual{position:relative;display:grid;place-items:center;isolation:isolate}
.hero-visual::before{content:"";position:absolute;width:118%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(18,167,176,.22),rgba(5,36,48,0) 65%)}
.hero-logo{width:min(360px,30vw);height:auto;object-fit:contain;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));animation:fadeUp 1s .2s both}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:15px;transition:transform .2s,box-shadow .2s,background .2s;border:0;cursor:pointer}
.btn-sun{background:linear-gradient(180deg,var(--sun-hi),var(--sun));color:#3a2600;box-shadow:var(--shadow-sm)}
.btn-sun:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--sand);border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--lagoon);color:#fff}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- SECTIONS ---------- */
section{padding:96px 0}
.section-head{max-width:64ch}
.section-head h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:.35em 0 .4em;letter-spacing:-.01em}
.section-head p{color:var(--ink-soft);font-size:1.08rem}
.center-head{margin:0 auto;text-align:center}
.center-head .eyebrow{justify-content:center}
.center-head .eyebrow::before{display:none}

/* callaloo pull quote strip */
.thesis{background:var(--abyss);color:var(--sand);text-align:center}
.thesis .wrap{max-width:900px}
.thesis blockquote{margin:0;font-family:"Fraunces",serif;font-weight:500;
  font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:1.24;letter-spacing:-.01em}
.thesis blockquote em{color:var(--sun-hi);font-style:italic}
.thesis cite{display:block;margin-top:26px;font-family:"Space Mono",monospace;font-style:normal;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon)}

/* about split */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.about-grid .prose p{color:var(--ink-soft);font-size:1.08rem}
.about-grid .prose p:first-of-type{color:var(--abyss);font-size:1.25rem;font-family:"Fraunces",serif;line-height:1.4}
.stat-card{background:var(--paper);border:1px solid rgba(5,36,48,.08);border-radius:20px;
  padding:30px;box-shadow:var(--shadow-sm)}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(5,36,48,.08);
  border-radius:16px;overflow:hidden}
.stat{background:var(--paper);padding:22px}
.stat .n{font-family:"Fraunces",serif;font-size:2.5rem;font-weight:600;color:var(--ocean);line-height:1}
.stat .l{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:8px}
.disc-title{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:22px 0 12px}
.disc{display:flex;flex-wrap:wrap;gap:8px}
.disc span{font-size:12.5px;font-weight:600;background:var(--sand-2);color:var(--abyss-2);
  padding:6px 12px;border-radius:999px}

/* edition feature band */
.edition{background:linear-gradient(160deg,#0a3a4a,var(--abyss));color:var(--sand)}
.edition .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.edition h2{font-size:clamp(2rem,4.4vw,3.1rem);margin:.3em 0 .5em}
.edition .e-lede{color:#cfe0df;font-size:1.1rem;max-width:52ch}
.e-facts{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px}
.e-fact .k{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon)}
.e-fact .v{font-family:"Fraunces",serif;font-size:1.35rem;margin-top:4px}
.theme-list{display:grid;gap:12px}
.theme{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  padding:18px 20px;border:1px solid rgba(57,192,196,.24);border-radius:16px;
  background:rgba(255,255,255,.03);transition:border-color .25s,background .25s}
.theme:hover{border-color:var(--sun);background:rgba(255,255,255,.06)}
.theme .day{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--sun-hi);white-space:nowrap}
.theme .t{font-family:"Fraunces",serif;font-size:1.18rem;font-weight:500}
.theme .t small{display:block;font-family:"Manrope",sans-serif;font-size:.8rem;color:#a9c4c3;font-weight:500;margin-top:3px}

/* programme (tabbed) */
.prog-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 30px}
.prog-tabs button{font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.06em;
  border:1px solid rgba(5,36,48,.16);background:var(--paper);color:var(--ink-soft);
  padding:11px 16px;border-radius:12px;cursor:pointer;transition:.2s;text-align:left;line-height:1.3}
.prog-tabs button b{display:block;color:var(--abyss);font-family:"Manrope",sans-serif;font-size:14px;margin-top:3px}
.prog-tabs button[aria-selected="true"]{background:var(--abyss);border-color:var(--abyss);color:var(--lagoon)}
.prog-tabs button[aria-selected="true"] b{color:#fff}
.prog-panel{border:1px solid rgba(5,36,48,.09);border-radius:20px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm)}
.slot{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:18px 24px;border-top:1px solid rgba(5,36,48,.07)}
.slot:first-child{border-top:0}
.slot.break{background:var(--sand)}
.slot .time{font-family:"Space Mono",monospace;font-size:12.5px;color:var(--ocean);padding-top:2px}
.slot .what h4{font-family:"Manrope",sans-serif;font-weight:700;font-size:15.5px;margin:0 0 3px}
.slot .what .who{font-size:13.5px;color:var(--ink-soft)}
.slot .what .who b{color:var(--abyss)}
.slot .what .title2{font-family:"Fraunces",serif;font-style:italic;color:var(--ocean);font-size:14.5px;margin-top:4px}
.tag{display:inline-block;font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;border-radius:6px;margin-bottom:6px}
.tag.keynote{background:#fdeccb;color:#8a5a00}
.tag.talklet{background:#d9f0f0;color:#0a6068}
.tag.panel{background:#e8e6c9;color:#5c6113}
.tag.ritual{background:#f6ddcb;color:#9a4d1c}
.tag.social{background:#e5e9ec;color:#44565c}

/* speakers */
.spk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.spk{background:var(--paper);border:1px solid rgba(5,36,48,.08);border-radius:18px;padding:22px;
  transition:transform .2s,box-shadow .2s}
.spk:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.spk .av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-family:"Fraunces",serif;font-weight:600;font-size:20px;color:#fff;margin-bottom:16px}
.spk .nm{font-family:"Fraunces",serif;font-size:1.18rem;font-weight:600}
.spk .af{font-size:13px;color:var(--ink-soft);margin-top:4px}
.spk .rl{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ocean);margin-top:10px}

/* gallery */
.gallery{background:var(--sand-2)}
.gal-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-flow:dense}
.gal-item{position:relative;border-radius:16px;overflow:hidden;background:var(--abyss);
  min-height:200px;box-shadow:var(--shadow-sm)}
.gal-item img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform .6s ease}
.gal-item:hover img{transform:scale(1.05)}
.gal-item .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;
  background:linear-gradient(150deg,#0a3a4a,var(--abyss));color:#9fc0bf}
.gal-item .ph .ico{width:34px;height:34px;opacity:.6;margin:0 auto 10px}
.gal-item .ph small{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.gal-item .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;
  background:linear-gradient(transparent,rgba(5,36,48,.82));color:#fff;font-size:13px;font-weight:600;
  opacity:0;transition:opacity .3s}
.gal-item:hover .cap{opacity:1}
/* varied tile spans for editorial rhythm */
.gal-item.w6{grid-column:span 6}.gal-item.w4{grid-column:span 4}.gal-item.w8{grid-column:span 8}
.gal-item.w6{min-height:280px}.gal-item.w8{min-height:340px}

/* series timeline */
.timeline{display:grid;gap:0}
.tl-item{display:grid;grid-template-columns:150px 1fr;gap:34px;padding:30px 0;border-top:1px solid rgba(5,36,48,.12);position:relative}
.tl-item:first-child{border-top:0}
.tl-year{font-family:"Fraunces",serif;font-size:2.4rem;font-weight:600;color:var(--ocean);line-height:1}
.tl-year .ord{display:block;font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.tl-body h3{font-size:1.35rem;margin-bottom:6px}
.tl-body p{color:var(--ink-soft);margin:0;max-width:62ch}
.tl-item.current .tl-year{color:var(--coral)}
.tl-badge{display:inline-block;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--sun);color:#3a2600;padding:3px 9px;border-radius:6px;margin-bottom:8px}

/* committee */
.committee{background:var(--abyss);color:var(--sand)}
.comm-lead{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:34px}
.comm-card{border:1px solid rgba(57,192,196,.22);border-radius:16px;padding:24px;background:rgba(255,255,255,.03)}
.comm-card .rl{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sun-hi)}
.comm-card .nm{font-family:"Fraunces",serif;font-size:1.5rem;margin:8px 0 2px}
.comm-card .af{color:#bcd4d3;font-size:14px}
.comm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px;
  background:rgba(57,192,196,.16);border-radius:16px;overflow:hidden}
.comm-mem{background:var(--abyss);padding:18px 20px}
.comm-mem .nm{font-weight:700;font-size:15px}
.comm-mem .af{font-size:12.5px;color:#a9c4c3;margin-top:2px}

/* partners */
.partners{text-align:center}
.p-logos{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:34px}
.p-logo{border:1px solid rgba(5,36,48,.12);border-radius:14px;padding:20px 28px;min-width:180px;
  background:var(--paper);transition:.2s}
.p-logo:hover{border-color:var(--ocean);box-shadow:var(--shadow-sm)}
.p-logo .nm{font-family:"Fraunces",serif;font-weight:600;font-size:1.05rem}
.p-logo .kind{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ocean);margin-top:6px}

/* CTA + footer */
.closer{background:linear-gradient(160deg,var(--ocean),#0a5e66);color:#fff;text-align:center}
.closer h2{font-size:clamp(2rem,4.6vw,3.2rem);max-width:20ch;margin:0 auto .4em}
.closer p{color:#d7f0ef;max-width:52ch;margin:0 auto 30px}
footer{background:#041b24;color:#8fb0af;padding:64px 0 40px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot-brand{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.foot-brand img{width:44px;height:44px;object-fit:contain}
.foot-brand .t{font-family:"Fraunces",serif;color:#eaf3f2;font-size:1.15rem;line-height:1.1}
footer h5{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lagoon);margin:0 0 14px;font-weight:700}
footer a{display:block;color:#a9c8c7;margin-bottom:9px;transition:color .2s}
footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;
  flex-wrap:wrap;gap:12px;justify-content:space-between;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.06em}

/* ---------- responsive ---------- */
/* ---- MOBILE FORMAT ----
   Applied two ways: (a) viewport <=900px via media query (works without JS),
   (b) .is-mobile set by the detection script for mobile devices at any width. */
.is-mobile .nav-links{display:none}
.is-mobile .burger{display:block}
.is-mobile .about-grid,
.is-mobile .edition .wrap,
.is-mobile .foot-grid{grid-template-columns:1fr}
.is-mobile .comm-lead{grid-template-columns:1fr}
.is-mobile .gal-item.w6,
.is-mobile .gal-item.w4,
.is-mobile .gal-item.w8{grid-column:span 12}
.is-mobile section{padding:68px 0}
.is-mobile .hero{min-height:auto;padding:84px 0 72px}
.is-mobile .tl-item{grid-template-columns:1fr;gap:8px}
/* hero collapses to a centred, logo-first stack */
.is-mobile .hero-grid{grid-template-columns:1fr;gap:28px;text-align:center}
.is-mobile .hero-copy{justify-items:center;gap:22px}
.is-mobile .hero-visual{order:-1}
.is-mobile .hero-logo{width:120px}
.is-mobile .hero-eyebrow{justify-content:center}
.is-mobile .hero h1{font-size:clamp(1.75rem,6.4vw,2.35rem);max-width:22ch}
.is-mobile .hero .lede{max-width:60ch}
.is-mobile .hero-cta,
.is-mobile .hero-meta{justify-content:center}
.is-mobile .sunrise{left:50%;bottom:-40%;width:min(1200px,150vw)}
.is-mobile .orbits{left:50%;top:38%;width:min(560px,90vw)}
/* mirror the class onto the media query so no-JS visitors still get it */
@media(max-width:900px){
  .nav-links{display:none}.burger{display:block}
  .about-grid,.edition .wrap,.foot-grid{grid-template-columns:1fr}
  .comm-lead{grid-template-columns:1fr}
  .gal-item.w6,.gal-item.w4,.gal-item.w8{grid-column:span 12}
  section{padding:68px 0}
  .hero{min-height:auto;padding:84px 0 72px}
  .tl-item{grid-template-columns:1fr;gap:8px}
  .hero-grid{grid-template-columns:1fr;gap:28px;text-align:center}
  .hero-copy{justify-items:center;gap:22px}
  .hero-visual{order:-1}
  .hero-logo{width:120px}
  .hero-eyebrow{justify-content:center}
  .hero h1{font-size:clamp(1.75rem,6.4vw,2.35rem);max-width:22ch}
  .hero .lede{max-width:60ch}
  .hero-cta,.hero-meta{justify-content:center}
  .sunrise{left:50%;bottom:-40%;width:min(1200px,150vw)}
  .orbits{left:50%;top:38%;width:min(560px,90vw)}
}
@media(max-width:520px){
  .slot{grid-template-columns:1fr;gap:6px}
  .slot .time{color:var(--coral)}
  .stat-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}


/* ===== multi-page additions ===== */
section[id]{scroll-margin-top:132px}
.backbar{background:var(--abyss)}
.backbar .wrap{display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px}
.backlink{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lagoon);display:inline-flex;align-items:center;gap:8px}
.backlink:hover{color:#fff}
.edition.page-lead{padding-top:120px}
.subnav{margin-left:auto;display:flex;gap:20px}
.subnav a{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.08em;color:#9fc0bf}
.subnav a:hover{color:#fff}
@media(max-width:900px){ .subnav{display:none} .edition.page-lead{padding-top:104px} }

/* history: stats band + disciplines + timeline together */
.hist-top{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;margin-bottom:8px}
.stat-quad{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(5,36,48,.1);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.stat-quad .stat{background:var(--paper);padding:24px}
.hist-aside .disc-title{margin-top:0}
@media(max-width:900px){ .hist-top{grid-template-columns:1fr;gap:28px} }

/* feature card linking to the latest event page */
.feature{background:linear-gradient(160deg,#0a3a4a,var(--abyss));color:var(--sand);
  border-radius:24px;padding:44px;display:grid;grid-template-columns:1.2fr auto;gap:32px;align-items:center;
  box-shadow:var(--shadow)}
.feature .f-eyebrow{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lagoon)}
.feature h3{font-family:"Fraunces",serif;font-size:clamp(1.7rem,3.4vw,2.5rem);margin:10px 0 12px;color:#fff}
.feature p{color:#cfe0df;max-width:56ch;margin:0}
.feature .f-cta{white-space:nowrap}
@media(max-width:900px){ .feature{grid-template-columns:1fr;padding:32px;text-align:left} }

/* ===== people pages (team, speakers): photo + bio profile cards ===== */
.page-head{padding:118px 0 4px;background:var(--sand)}
.page-head .wrap{max-width:780px}
.page-head h1{font-family:"Fraunces",serif;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.01em;margin:.32em 0 .35em}
.page-head p{color:var(--ink-soft);font-size:1.12rem}
@media(max-width:900px){ .page-head{padding-top:104px} }

.people{padding-top:52px}
.group-label{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ocean);margin:6px 0 20px;display:flex;align-items:center;gap:14px}
.group-label::after{content:"";flex:1;height:1px;background:rgba(5,36,48,.12)}
.group-label.spaced{margin-top:48px}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.profile{background:var(--paper);border:1px solid rgba(5,36,48,.08);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.profile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.profile .photo{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(150deg,#0a3a4a,var(--abyss))}
.profile .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile .photo .ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:#9fc0bf}
.profile .photo .ph .av{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  font-family:"Fraunces",serif;font-weight:600;font-size:23px;color:#fff}
.profile .photo .ph small{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.profile .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:5px;flex:1}
.profile .p-role{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ocean)}
.profile .p-name{font-family:"Fraunces",serif;font-size:1.35rem;font-weight:600;line-height:1.12}
.profile .p-aff{font-size:13.5px;color:var(--ink-soft)}
.profile .bio{font-size:14.5px;color:var(--abyss-2);margin-top:9px;line-height:1.55}
.profile .bio.empty{color:#9aa7ab;font-style:italic}

/* ===== partner / sponsor logo slots ===== */
.p-logos{gap:20px}
.p-logo{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:210px;padding:24px 26px}
.p-logo .logo-slot{width:100%;height:76px;display:grid;place-items:center;position:relative;
  border-radius:10px;background:var(--sand);border:1px dashed rgba(5,36,48,.18);overflow:hidden}
.p-logo .logo-slot img{max-width:88%;max-height:60px;width:auto;height:auto;object-fit:contain;
  position:absolute;background:var(--paper);padding:2px}
.p-logo .logo-slot .slot-hint{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#93a3a7}
.p-logo .p-text{text-align:center}
/* brand text: keep the full name tidy on small screens */
.is-mobile .brand .b-txt{font-size:14px;max-width:60vw}
.is-mobile .brand img{width:34px;height:34px}
@media(max-width:900px){
  .brand .b-txt{font-size:14px;max-width:60vw}
  .brand img{width:34px;height:34px}
}
@media(max-width:400px){
  .brand .b-txt small{display:none}
}
.p-logo .logo-slot.has-logo{border-style:solid;border-color:rgba(5,36,48,.10);background:var(--paper)}
.p-logo .logo-slot.has-logo .slot-hint{display:none}

/* ===== showcase band (home, directly under the hero) ===== */
.showcase{background:var(--sand-2);padding:74px 0}
.showcase .sc-head{max-width:70ch;margin-bottom:30px}
.showcase .sc-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.3em 0 .35em}
.showcase .sc-head p{color:var(--ink-soft);margin:0}
.sc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.shot{position:relative;margin:0;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,#0a3a4a,var(--abyss));
  box-shadow:var(--shadow)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;color:#9fc0bf}
.shot .ph .ico{width:34px;height:34px;opacity:.6}
.shot .ph small{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 22px 16px;color:#fff;
  background:linear-gradient(transparent,rgba(4,27,36,.88));font-size:13.5px;font-weight:600;line-height:1.35}
.shot figcaption span{display:block;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sun-hi);font-weight:400;margin-bottom:4px}
/* group panorama across the top, beach + note beneath */
.shot-wide{grid-column:span 12;aspect-ratio:1685/715}
.shot-tall{grid-column:span 5;aspect-ratio:1/1}
.sc-note{grid-column:span 7;background:var(--paper);border:1px solid rgba(5,36,48,.08);border-radius:20px;
  padding:32px 34px;display:flex;flex-direction:column;justify-content:center;gap:14px;box-shadow:var(--shadow-sm)}
.sc-note .k{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ocean)}
.sc-note h3{font-family:"Fraunces",serif;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.15}
.sc-note p{color:var(--ink-soft);margin:0}
.sc-note .btn{align-self:flex-start;margin-top:6px}
.is-mobile .sc-grid{gap:14px}
.is-mobile .shot-wide,.is-mobile .shot-tall,.is-mobile .sc-note{grid-column:span 12}
.is-mobile .shot-tall{aspect-ratio:4/3}
.is-mobile .showcase{padding:56px 0}
.is-mobile .sc-note{padding:26px 24px}
@media(max-width:900px){
  .sc-grid{gap:14px}
  .shot-wide,.shot-tall,.sc-note{grid-column:span 12}
  .shot-tall{aspect-ratio:4/3}
  .showcase{padding:56px 0}
  .sc-note{padding:26px 24px}
}
.shot.has-photo .ph{display:none}
.shot a{display:block;width:100%;height:100%}
.shot a::after{content:"⤢";position:absolute;top:12px;right:14px;width:28px;height:28px;
  display:grid;place-items:center;border-radius:8px;background:rgba(4,27,36,.55);color:#fff;font-size:13px}


/* ===== hero: brand lockup under the logo + sponsor slot under the blurb ===== */
.hero-visual{gap:20px}
.hero-brandmark{text-align:center;max-width:22ch}
.hero-brandmark .hb-name{font-family:"Fraunces",serif;font-size:clamp(1.15rem,1.7vw,1.55rem);
  font-weight:600;color:#fff;line-height:1.15;letter-spacing:-.005em}
.hero-brandmark .hb-sub{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lagoon);margin-top:7px}
.hero-sponsor{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(57,192,196,.24);max-width:390px}
.hero-sponsor .hs-k{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lagoon);line-height:1.5}
.hero-sponsor .hs-slot{width:126px;height:48px;flex:none;display:grid;place-items:center;position:relative;
  border-radius:8px;background:rgba(255,255,255,.9)}
.hero-sponsor .hs-slot img{max-width:92%;max-height:40px;width:auto;height:auto;object-fit:contain}
.hero-sponsor .hs-slot .hint{font-family:"Space Mono",monospace;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:#7d8f94}
.hero-sponsor .hs-slot.has-logo .hint{display:none}
.hero-sponsor .hs-name{font-family:"Fraunces",serif;font-size:1rem;color:#fff;line-height:1.2}
.is-mobile .hero-sponsor{max-width:100%;justify-content:center;flex-wrap:wrap;text-align:center}
.is-mobile .hero-brandmark{max-width:26ch}
@media(max-width:900px){
  .hero-sponsor{max-width:100%;justify-content:center;flex-wrap:wrap;text-align:center}
}

/* ===== simple content pages (past symposia, news, community) ===== */
.tl-item .tl-links{margin-top:12px;display:flex;gap:16px;flex-wrap:wrap}
.tl-item .tl-links a{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ocean);border-bottom:1px solid rgba(14,124,134,.35);padding-bottom:2px}
.tl-item .tl-links a:hover{color:var(--coral);border-color:var(--coral)}

.news-list{display:grid;gap:18px}
.news-item{background:var(--paper);border:1px solid rgba(5,36,48,.08);border-radius:20px;
  padding:28px 30px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:132px 1fr;gap:26px}
.news-item .n-date{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ocean);padding-top:5px}
.news-item h3{font-family:"Fraunces",serif;font-size:1.35rem;margin-bottom:8px;line-height:1.2}
.news-item p{color:var(--ink-soft);margin:0}
.news-item .n-more{display:inline-block;margin-top:12px;font-weight:700;font-size:13.5px;color:var(--ocean)}
.is-mobile .news-item{grid-template-columns:1fr;gap:8px;padding:24px}
@media(max-width:900px){ .news-item{grid-template-columns:1fr;gap:8px;padding:24px} }

.strand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.strand{background:var(--paper);border:1px solid rgba(5,36,48,.08);border-radius:20px;padding:28px 30px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s}
.strand:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.strand .s-k{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ocean)}
.strand h3{font-family:"Fraunces",serif;font-size:1.3rem;line-height:1.18}
.strand p{color:var(--ink-soft);margin:0;font-size:15px}
.empty-note{background:var(--sand-2);border:1px dashed rgba(5,36,48,.22);border-radius:18px;
  padding:30px;color:var(--ink-soft);text-align:center;font-size:15px}

/* ===== sub-page cards (2026 symposium -> programme / speakers) ===== */
.subpage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.subpage{background:var(--paper);border:1px solid rgba(5,36,48,.08);border-radius:22px;padding:34px 34px 30px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.subpage:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(14,124,134,.35)}
.subpage .sp-k{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocean)}
.subpage h3{font-family:"Fraunces",serif;font-size:1.55rem;line-height:1.15}
.subpage p{color:var(--ink-soft);margin:0;font-size:15px;flex:1}
.subpage .sp-go{font-weight:700;font-size:14px;color:var(--ocean);margin-top:8px}
.subpage:hover .sp-go{color:var(--coral)}
.is-mobile .subpage{padding:26px 24px}
@media(max-width:900px){ .subpage{padding:26px 24px} }
/* sub-nav: show the current page */
.subnav a[aria-current="page"]{color:var(--sun-hi)}
.is-mobile .backbar .wrap{flex-wrap:wrap;gap:10px}
.is-mobile .subnav{display:flex;margin-left:0;gap:16px;flex-wrap:wrap}

/* ===== team cards now link through to a member page ===== */
a.profile{color:inherit;text-decoration:none}
.profile .bio.teaser{color:var(--abyss-2);font-style:normal;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.profile .p-more{margin-top:auto;padding-top:12px;font-weight:700;font-size:13px;color:var(--ocean)}
.profile:hover .p-more{color:var(--coral)}
.profile .photo.has-photo .ph{display:none}

/* ===== individual member page ===== */
.member{padding:44px 0 0}
.member-grid{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start}
.member-photo{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;
  background:linear-gradient(150deg,#0a3a4a,var(--abyss));box-shadow:var(--shadow)}
.member-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member-photo .ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:#9fc0bf}
.member-photo .ph .av{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  font-family:"Fraunces",serif;font-weight:600;font-size:28px;color:#fff}
.member-photo .ph small{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.member-photo.has-photo .ph{display:none}
.member-body .m-role{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocean)}
.member-body h1{font-family:"Fraunces",serif;font-size:clamp(2rem,4vw,3rem);line-height:1.08;margin:10px 0 6px}
.member-body .m-aff{font-size:1.08rem;color:var(--ink-soft);margin-bottom:26px}
.member-body .m-bio p{font-size:1.05rem;line-height:1.72;color:var(--abyss-2);margin:0 0 1em;max-width:66ch}
.m-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:12px 20px;border-radius:999px;
  border:1px solid rgba(14,124,134,.4);color:var(--ocean);font-weight:700;font-size:14px;transition:.2s}
.m-link:hover{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.is-mobile .member-grid{grid-template-columns:1fr;gap:28px}
.is-mobile .member-photo{max-width:280px;margin:0 auto}
@media(max-width:900px){
  .member-grid{grid-template-columns:1fr;gap:28px}
  .member-photo{max-width:280px;margin:0 auto}
}
/* specific academic rank */
.profile .p-rank{font-size:13px;color:var(--abyss-2);font-weight:600;margin-top:3px;line-height:1.35}
.profile .p-aff{margin-top:2px}
.member-body .m-rank{font-family:"Fraunces",serif;font-size:1.12rem;color:var(--ocean);
  line-height:1.3;margin-top:8px}
.member-body .m-aff{font-size:1rem;color:var(--ink-soft);margin-bottom:26px;margin-top:4px}
/* ensembles / groups with no individual portrait */
.profile .photo.no-photo{background:linear-gradient(150deg,#123c4a,#0b2a36)}
.profile .photo.no-photo .av{background:rgba(255,255,255,.14)!important}

/* sponsor wordmark shown until an official logo file is supplied */
.hs-slot .wordmark,.logo-slot .wordmark{font-family:"Fraunces",serif;font-weight:600;
  font-size:15px;letter-spacing:-.01em;color:var(--abyss);text-align:center;line-height:1.2;padding:0 10px}
.logo-slot .wordmark{font-size:16px;color:var(--abyss-2)}
.hs-slot.has-logo .wordmark,.logo-slot.has-logo .wordmark{display:none}
.hs-wrap{display:block}
a.p-logo{text-decoration:none;color:inherit}
a.p-logo:hover .logo-slot{border-color:var(--ocean)}

/* ===== Our Community ===== */
.cgroup{margin-bottom:58px}
.cgroup-head{max-width:62ch;margin-bottom:24px}
.cgroup-head .s-k{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocean)}
.cgroup-head h2{font-family:"Fraunces",serif;font-size:clamp(1.6rem,3vw,2.2rem);margin:9px 0 8px;line-height:1.14}
.cgroup-head p{color:var(--ink-soft);margin:0}
.person-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.person{display:flex;gap:14px;align-items:flex-start;background:var(--paper);
  border:1px solid rgba(5,36,48,.08);border-radius:16px;padding:16px 18px;
  box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;
  transition:transform .18s,box-shadow .18s,border-color .18s}
a.person:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(14,124,134,.35)}
.person .p-av{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:"Fraunces",serif;font-weight:600;font-size:15px;color:#fff}
.person .p-nm{font-family:"Fraunces",serif;font-size:1.05rem;font-weight:600;line-height:1.18}
.person .p-fld{font-size:13px;color:var(--ocean);font-weight:600;margin-top:3px}
.person .p-meta{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.partner{background:var(--paper);border:1px solid rgba(5,36,48,.08);border-radius:18px;padding:24px 26px;
  box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:6px;
  transition:transform .18s,box-shadow .18s,border-color .18s}
a.partner:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(14,124,134,.35)}
.partner .pt-kind{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ocean)}
.partner .pt-name{font-family:"Fraunces",serif;font-size:1.18rem;line-height:1.2}
.partner .pt-go{font-size:12.5px;font-weight:700;color:var(--ocean);margin-top:6px}
a.partner:hover .pt-go{color:var(--coral)}
/* until an official logo is supplied the wordmark carries the name — don't repeat it */
.hero-sponsor:not(.has-logo) .hs-name{display:none}
.hero-sponsor:not(.has-logo) .hs-k{font-size:10px}
.p-logo:not(:has(.logo-slot)){justify-content:center;min-height:104px}

/* ============================================================
   LIGHT HERO — hero sits on the same cream as the masthead.
   Everything here is scoped to .hero so the genuinely dark
   sections (thesis, edition band, committee, closers) keep
   their existing light-on-dark treatment.
   ============================================================ */
.hero{
  background:var(--sand);
  color:var(--abyss);
  border-bottom:1px solid rgba(5,36,48,.07);
}
.hero h1{color:var(--abyss)}
/* gold on cream is unreadable (1.45:1) — bronze keeps the sunrise
   warmth and measures 4.95:1 */
.hero h1 em{color:#A85410}
.hero .lede{color:var(--ink-soft)}
.hero .eyebrow.on-dark{color:var(--ocean)}
.hero .eyebrow.on-dark::before{background:var(--orbit)}
/* chips: light-mode variant (the dark version is still used elsewhere) */
.hero .chip{border-color:rgba(5,36,48,.18);color:var(--ink-soft);background:rgba(255,255,255,.6)}
.hero .chip b{color:#A85410}
/* ghost button needs dark ink on cream */
.hero .btn-ghost{color:var(--abyss);border-color:rgba(5,36,48,.28);background:rgba(255,255,255,.5)}
.hero .btn-ghost:hover{border-color:var(--ocean);color:var(--ocean);background:#fff}
/* sunrise becomes a soft dawn wash rather than a glow in the dark */
.hero .sunrise{
  background:radial-gradient(circle at 50% 50%,
     rgba(244,168,28,.20) 0%, rgba(238,123,43,.12) 30%,
     rgba(148,165,36,.07) 48%, rgba(251,246,236,0) 66%);
}
/* orbit rings: darker strokes so they read on cream */
.hero .orbits{opacity:.8}
.hero .orbits span{border-color:rgba(14,124,134,.30)}
.hero .orbits span:nth-child(2){border-color:rgba(148,165,36,.32)}
.hero .orbits span:nth-child(3){border-color:rgba(238,123,43,.26)}
.hero .hero-visual::before{
  background:radial-gradient(circle,rgba(244,168,28,.16),rgba(251,246,236,0) 66%)}
.hero .hero-logo{filter:drop-shadow(0 14px 30px rgba(5,36,48,.18))}
/* brand lockup under the logo */
.hero .hero-brandmark .hb-name{color:var(--abyss)}
.hero .hero-brandmark .hb-sub{color:var(--ocean)}
/* principal-sponsor panel as a light card */
.hero .hero-sponsor{background:#fff;border-color:rgba(5,36,48,.12);box-shadow:var(--shadow-sm)}
.hero .hero-sponsor .hs-k{color:var(--ocean)}
.hero .hero-sponsor .hs-name{color:var(--abyss)}
.hero .hero-sponsor .hs-slot{background:var(--sand);border:1px solid rgba(5,36,48,.08)}
/* founder sits alone on the top row */
.profile-grid.founder-row{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.profile-grid.founder-row .profile{max-width:none}

/* ============================================================
   READABILITY — larger type for dense bodies of running text.
   Base body goes 17px -> 18px; prose blocks step up further and
   gain a little extra line-height, since long-form reading is
   where the old size was tightest.
   ============================================================ */
body{font-size:18px}

/* "Why the Caribbean" and other long-form prose on the home page */
.about-grid .prose p{font-size:1.14rem;line-height:1.72}
.about-grid .prose p:first-of-type{font-size:1.34rem;line-height:1.55}
.stat-card p{font-size:1.06rem !important;line-height:1.68}

/* section intros */
.section-head p{font-size:1.12rem;line-height:1.65}
.cgroup-head p,.page-head p{font-size:1.1rem;line-height:1.68}

/* full biographies on profile pages */
.member-body .m-bio p{font-size:1.14rem;line-height:1.78}
.member-body .m-aff{font-size:1.06rem}

/* cards carrying real paragraphs */
.subpage p,.strand p,.news-item p{font-size:1.02rem;line-height:1.65}
.profile .bio{font-size:15.5px;line-height:1.6}
.person .p-fld{font-size:13.5px}
.person .p-meta{font-size:13px}
.tl-body p{font-size:1.06rem;line-height:1.7}
.e-lede{font-size:1.15rem !important;line-height:1.68}
.showcase .sc-head p{font-size:1.1rem;line-height:1.65}
.sc-note p{font-size:1.06rem;line-height:1.68}
.slot .what .who{font-size:14.5px}
.partner .pt-name{font-size:1.22rem}

/* keep the hero lede in proportion with the larger base */
.hero .lede{font-size:clamp(1.1rem,1.45vw,1.32rem);line-height:1.62}
/* musicians tile: sits beside the square setting tile, matched in height */
.shot-mid{grid-column:span 7;aspect-ratio:1.42}
.is-mobile .shot-mid{grid-column:span 12;aspect-ratio:3/2}
@media(max-width:900px){ .shot-mid{grid-column:span 12;aspect-ratio:3/2} }
/* the note card now runs full width beneath the three photographs */
.sc-note{grid-column:span 12}

/* ============================================================
   FOUNDER HIERARCHY — the Founder & Director sits above the rest
   of the team as a full-width feature card (portrait beside text),
   rather than a standard card marooned in an empty grid row.
   Collapses to the normal card shape on phones so nothing clips.
   ============================================================ */
.profile-grid.founder-row{grid-template-columns:1fr;margin-bottom:6px}
.profile.feature{flex-direction:row;align-items:stretch;box-shadow:var(--shadow)}
.profile.founder{border-color:rgba(248,201,72,.55)}
.profile.feature .photo{width:310px;flex:none;aspect-ratio:auto;min-height:100%}
.profile.feature .body{flex:1;justify-content:center;padding:32px 38px;gap:7px}
.profile.feature .p-role{font-size:11px;letter-spacing:.16em}
.profile.feature .p-name{font-size:1.55rem;line-height:1.12}
.profile.founder .p-name{font-size:1.9rem}
.profile.feature .p-rank{font-size:15px}
.profile.feature .p-aff{font-size:15px}
.profile.feature .bio.teaser{-webkit-line-clamp:4;font-size:1.02rem;line-height:1.62;margin-top:4px}
.profile.feature .p-more{font-size:14px}
/* badge used where the founder appears in a shared grid */
.founder-tag{display:inline-block;align-self:flex-start;margin-top:5px;
  font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--sun);color:#3a2600;padding:3px 9px;border-radius:6px;font-weight:700}
.is-mobile .profile.feature{flex-direction:column}
.is-mobile .profile.feature .photo{width:100%;aspect-ratio:4/3;min-height:0}
.is-mobile .profile.feature .body{padding:22px 24px}
.is-mobile .profile.feature .p-name{font-size:1.45rem}
@media(max-width:900px){
  .profile.feature{flex-direction:column}
  .profile.feature .photo{width:100%;aspect-ratio:4/3;min-height:0}
  .profile.feature .body{padding:22px 24px}
  .profile.feature .p-name{font-size:1.45rem}
}
.gal-item.has-photo .ph{display:none}

/* home page: the Founder & Director takes a full line of his own,
   above the Chair, rather than sharing a two-column row */
.comm-lead.founder-lead{grid-template-columns:1fr;margin-bottom:18px}
#comm-lead{grid-template-columns:1fr;margin-bottom:34px}
.comm-card.founder{border-color:rgba(248,201,72,.55);background:rgba(255,255,255,.06);
  padding:30px 32px}
.comm-card.founder .nm{font-size:1.9rem}
.comm-card .rk{color:var(--lagoon);font-size:14.5px;margin-top:3px;line-height:1.4}
.comm-card.founder .rk{font-size:15.5px}

/* leadership: Founder and Chair each get their own full-width line */
#team-lead{grid-template-columns:1fr}

/* =====================================================================
   MASTHEAD PROMINENCE
   ---------------------------------------------------------------------
   The Initiative's name is the primary mark on every page, so it is set
   large in the top row of the masthead. 40px sits deliberately below the
   home page's hero headline (about 50px) so the two do not compete: the
   name reads as the identity, the headline still leads the page.
   The logo grows with it to keep the lockup balanced.
   ===================================================================== */
.brand .b-txt{font-size:40px;letter-spacing:-.012em}
.brand .b-txt small{font-size:11px;letter-spacing:.19em;margin-top:7px}
.brand img{width:58px;height:58px}
.brand{gap:18px}
.nav-brandbar .wrap{padding-top:15px;padding-bottom:13px}

/* phones: the name is long, so it sets on two centred lines */
.is-mobile .brand .b-txt{font-size:19px;letter-spacing:-.008em}
.is-mobile .brand .b-txt small{font-size:9px;letter-spacing:.13em;margin-top:5px}
.is-mobile .brand img{width:44px;height:44px}
.is-mobile .brand{gap:12px}
.is-mobile .nav-brandbar .wrap{padding-top:12px;padding-bottom:10px}
@media(max-width:900px){
  .brand .b-txt{font-size:19px;letter-spacing:-.008em}
  .brand .b-txt small{font-size:9px;letter-spacing:.13em;margin-top:5px}
  .brand img{width:44px;height:44px}
  .brand{gap:12px}
  .nav-brandbar .wrap{padding-top:12px;padding-bottom:10px}
}

/* the masthead is taller now, so in-page anchors need a bigger offset
   or a linked section would scroll up underneath it */
section[id]{scroll-margin-top:152px}

/* The hero headline itself scales with the window (clamp 2.1rem–3.5vw–3.6rem).
   A fixed-size masthead would therefore overtake it on narrower laptops, so the
   brand scales on the same curve and stays a consistent step below it. */
.brand .b-txt{font-size:clamp(26px, 2.7vw, 42px)}
.brand img{width:clamp(42px, 4.0vw, 60px);height:clamp(42px, 4.0vw, 60px)}

/* =====================================================================
   NAVY MASTHEAD
   ---------------------------------------------------------------------
   The header sits on deep navy so the site announces itself immediately
   rather than easing in. All contrast measured: cream on navy is 14.4:1,
   the gold tagline 9.9:1, the Support button 7.7:1 against the bar.
   ===================================================================== */
:root{--navy:#0A2540; --navy-2:#0D2E4D}

header.nav{
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  border-bottom:3px solid var(--sun);
  box-shadow:0 10px 30px -18px rgba(5,36,48,.75);
}
.nav-brandbar{border-bottom:1px solid rgba(255,255,255,.13)}

/* the Initiative's name */
.brand .b-txt{color:#fff;font-weight:700;letter-spacing:-.015em;
  text-shadow:0 1px 0 rgba(0,0,0,.25)}
/* the tagline: gold, letterspaced, and noticeably bolder than before */
.brand .b-txt small{
  color:var(--sun-hi);font-weight:700;
  font-size:clamp(12px,1.05vw,15px);letter-spacing:.26em;margin-top:9px;
}
/* a larger logo, lifted off the navy */
.brand img{width:clamp(52px,5.2vw,78px);height:clamp(52px,5.2vw,78px);
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
.brand{gap:20px}
.nav-brandbar .wrap{padding-top:20px;padding-bottom:17px}

/* menu row */
.nav-links a{color:#DCE8F0;font-size:15.5px;font-weight:700;letter-spacing:.01em}
.nav-links a:hover{color:var(--sun-hi)}
.nav-links a[aria-current="page"]{color:var(--sun-hi)}
.nav-menubar .wrap{min-height:56px}
.burger span{background:#fff}

/* mobile dropdown sits on navy too, so it reads as part of the header */
.is-mobile .nav-links{background:var(--navy-2);border-top:1px solid rgba(255,255,255,.12);
  border-bottom:3px solid var(--sun)}
.is-mobile .nav-links a{color:#EAF2F8;font-size:17px}
.is-mobile .nav-links a:not(.nav-cta):active{background:rgba(255,255,255,.07)}
.is-mobile .brand .b-txt small{font-size:9.5px;letter-spacing:.16em}

/* the hero now meets a navy bar, so soften the join */
.hero{border-top:0}

/* =====================================================================
   HOME PAGE READABILITY  — a further step up in size
   ===================================================================== */
.hero .lede{font-size:clamp(1.22rem,1.65vw,1.5rem);line-height:1.6;color:#33454B}
.hero .chip{font-size:13.5px;padding:9px 16px}
.hero .btn{font-size:16.5px;padding:16px 30px}
.hero .eyebrow{font-size:12.5px;letter-spacing:.2em}

.showcase .sc-head h2,.section-head h2{font-size:clamp(2rem,3.1vw,2.9rem)}
.showcase .sc-head p,.section-head p{font-size:1.2rem;line-height:1.62}
.shot figcaption{font-size:15.5px}
.shot figcaption span{font-size:11px;letter-spacing:.16em}
.sc-note h3{font-size:1.7rem}
.sc-note p{font-size:1.15rem;line-height:1.68}

.thesis blockquote{font-size:clamp(1.7rem,2.9vw,2.6rem);line-height:1.28}
.thesis .attrib{font-size:1.02rem}

.about-grid .prose p:first-of-type{font-size:1.45rem;line-height:1.5}
.about-grid .prose p{font-size:1.2rem;line-height:1.72}
.stat-card .stat b{font-size:2.5rem}
.stat-card .stat span{font-size:1rem}
.stat-card p{font-size:1.12rem !important}
.disc-title{font-size:12px;letter-spacing:.16em}
.disc-tags span{font-size:14.5px;padding:8px 14px}

.tl-year{font-size:1.5rem}
.tl-body h3{font-size:1.4rem}
.tl-body p{font-size:1.12rem;line-height:1.7}

.comm-card .nm{font-size:1.35rem}
.comm-card .rl{font-size:11.5px;letter-spacing:.16em}
.comm-card .rk,.comm-card .af{font-size:1.02rem}
.comm-mem .nm{font-size:1.08rem}
.comm-mem .af{font-size:.95rem}

.partner .pt-name,.p-logo .nm{font-size:1.2rem}
.p-logo .kind{font-size:11.5px;letter-spacing:.14em}

.closer h2{font-size:clamp(2rem,3.2vw,3rem)}
.closer p{font-size:1.2rem;line-height:1.65}

/* =====================================================================
   THE HERO FIGURE
   ---------------------------------------------------------------------
   One rounded card holding three things stacked: the interactive circle
   diagram, the description of whichever circle is selected, and a
   photograph of the shoreline bleeding to the card's lower edge. Read as
   a single object rather than three stacked elements.
   ===================================================================== */
.hero-visual{align-self:stretch;place-items:stretch}
.figure-card{
  width:100%;display:flex;flex-direction:column;
  background:linear-gradient(170deg,#FFFDF8,#FBF3E4);
  border:1px solid rgba(5,36,48,.10);border-radius:26px;overflow:hidden;
  box-shadow:0 26px 60px -32px rgba(5,36,48,.55), 0 2px 0 rgba(255,255,255,.7) inset;
}
.fig-diagram{padding:14px 14px 2px}
.fig-diagram svg{display:block;width:100%;height:auto}

/* the three circles */
.pillar{cursor:pointer;outline:none}
.pillar .p-disc{fill:#fff;stroke:none;
  filter:drop-shadow(0 6px 16px rgba(5,36,48,.20));transition:fill .22s}
.pillar .p-ring{fill:none;stroke:#0E7C86;stroke-width:2.5;stroke-opacity:.55;transition:.22s}
.pillar .p-label{font-family:"Manrope",system-ui,sans-serif;font-size:15.5px;font-weight:800;
  fill:#052430;pointer-events:none;letter-spacing:-.005em}
.pillar:hover .p-ring,.pillar:focus-visible .p-ring{stroke-opacity:1;stroke-width:3.5}
.pillar:hover .p-disc{fill:#FFFDF6}
.pillar.is-on .p-disc{fill:#FFF6DF}
.pillar.is-on .p-ring{stroke:#F4A81C;stroke-opacity:1;stroke-width:5}
.pillar.is-on .p-label{fill:#052430}
.pillar:focus-visible .p-disc{fill:#FFF6DF}

/* the description of the selected circle */
.fig-readout{padding:4px 26px 20px;min-height:112px;text-align:center}
.fig-readout .fr-label{font-family:"Fraunces",Georgia,serif;font-size:1.32rem;font-weight:700;
  color:var(--abyss);margin-bottom:6px;line-height:1.2}
.fig-readout p{margin:0;font-size:1.06rem;line-height:1.6;color:var(--ink-soft);
  max-width:42ch;margin-inline:auto}
.fig-readout.is-on{animation:frIn .32s ease}
@keyframes frIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* the shoreline, closing the card */
.fig-photo{margin:0;position:relative;height:190px;overflow:hidden}
.fig-photo img{width:100%;height:100%;object-fit:cover;display:block}
.fig-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(251,243,228,.92),rgba(251,243,228,0) 42%)}

.is-mobile .fig-readout{padding:2px 18px 16px;min-height:120px}
.is-mobile .fig-photo{height:150px}
.is-mobile .pillar .p-label{font-size:17px}
@media(max-width:900px){
  .fig-readout{padding:2px 18px 16px;min-height:120px}
  .fig-photo{height:150px}
  .pillar .p-label{font-size:17px}
}

/* =====================================================================
   HERO FIGURE — corrections
   ---------------------------------------------------------------------
   Fixes, in order of the problems they solve:
     * the top circle was clipped        -> larger viewBox margin (in app.js)
     * the beach was pushed off-screen   -> the description is now a cloud
                                            over the diagram, not a block
                                            of text between the two
     * stray rings floated behind        -> the decorative orbits are hidden
                                            on the home page hero
     * left column sat too high          -> both columns centre vertically
     * the card ran past the fold        -> capped to the viewport height
   ===================================================================== */

/* the decorative orbit rings sat awkwardly behind the new card */
.hero .orbits, .hero .hero-visual::before{display:none}

/* both hero columns centre against each other */
.hero-grid{align-items:center}
.hero{padding-top:clamp(28px,4vh,60px);padding-bottom:clamp(28px,4vh,60px)}

/* the card, sized so the whole thing is visible without scrolling */
.figure-card{max-height:calc(100vh - 230px);min-height:0}
.fig-diagram{position:relative;padding:10px 10px 0}
.fig-diagram svg{width:100%;height:auto;max-height:calc(100vh - 430px);
  display:block;margin-inline:auto}

/* the beach now has room to be seen */
.fig-photo{height:clamp(140px,20vh,210px)}
.fig-photo::after{background:linear-gradient(180deg,rgba(251,243,228,.85),rgba(251,243,228,0) 38%)}

/* ---------- the hovering cloud ---------- */
.fig-cloud{
  position:absolute;z-index:5;transform:translate(-50%,-50%) scale(.94);
  width:min(78%,300px);
  background:rgba(255,255,255,.97);backdrop-filter:blur(6px);
  border:1px solid rgba(14,124,134,.28);border-radius:18px;
  padding:16px 18px 17px;text-align:left;
  box-shadow:0 22px 48px -18px rgba(5,36,48,.55), 0 0 0 6px rgba(255,255,255,.45);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
}
.fig-cloud.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.fig-cloud .fc-label{font-family:"Fraunces",Georgia,serif;font-size:1.18rem;font-weight:700;
  color:var(--abyss);line-height:1.18;margin:0 22px 6px 0}
.fig-cloud p{margin:0;font-size:1.01rem;line-height:1.55;color:var(--ink-soft)}
.fig-cloud .fc-x{position:absolute;top:8px;right:10px;background:none;border:0;
  font-size:19px;line-height:1;color:var(--ink-soft);opacity:.55;cursor:pointer;padding:3px 5px}
.fig-cloud .fc-x:hover{opacity:1;color:var(--coral)}

/* a one-time pulse so it is obvious the circles are tappable */
@keyframes hintPulse{0%,100%{stroke-opacity:.55}50%{stroke-opacity:1;stroke-width:4}}
.hint-once .pillar .p-ring{animation:hintPulse 2.4s ease-in-out 2}
.pillar{cursor:pointer}

.is-mobile .figure-card{max-height:none}
.is-mobile .fig-diagram svg{max-height:none}
.is-mobile .fig-cloud{width:min(86%,320px)}
.is-mobile .fig-photo{height:150px}
@media(max-width:900px){
  .figure-card{max-height:none}
  .fig-diagram svg{max-height:none}
  .fig-cloud{width:min(86%,320px)}
  .fig-photo{height:150px}
}

/* =====================================================================
   HERO FIGURE — corrections
   ---------------------------------------------------------------------
   Problems this block fixes:
     * the card grew tall enough on big screens to push the beach below
       the fold, so its height is now capped and the diagram flexes
     * the loose orbit rings behind the hero are removed; they now live
       inside the figure instead (drawn in app.js)
     * the description used to be a fixed panel wedged between the
       diagram and the photograph, which is what hid the beach. It is
       now a cloud floating over the diagram, so it costs no height.
   ===================================================================== */

/* the drifting rings behind the hero are gone - they are inside the figure now */
.hero .orbits{display:none}

/* keep the whole card inside a laptop screen */
.figure-card{max-height:min(66vh,620px)}
.fig-diagram{position:relative;flex:1 1 auto;min-height:0;display:flex;
  align-items:center;justify-content:center;padding:10px 12px 4px}
.fig-diagram svg{max-height:100%;width:auto;max-width:100%}
.fig-photo{flex:0 0 auto;height:clamp(120px,17vh,168px)}

/* the orbit rings turn slowly, each at its own pace */
#orbit-rings .orb-ring{transform-box:view-box;transform-origin:280px 280px}
.orb-0{animation:orbSpin 54s linear infinite}
.orb-1{animation:orbSpin 78s linear infinite reverse}
.orb-2{animation:orbSpin 96s linear infinite}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .orb-0,.orb-1,.orb-2{animation:none}
}

/* the floating cloud */
.fig-cloud{position:absolute;transform:translate(-50%,-50%) scale(.94);
  width:min(70%,278px);z-index:5;opacity:0;transition:opacity .18s ease,transform .18s ease;
  background:#fff;border:1px solid rgba(5,36,48,.10);border-radius:16px;
  padding:15px 17px 16px;text-align:left;pointer-events:auto;
  box-shadow:0 22px 44px -18px rgba(5,36,48,.55),0 3px 10px -4px rgba(5,36,48,.25)}
.fig-cloud.is-open{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fig-cloud .fc-label{font-family:"Fraunces",Georgia,serif;font-size:1.12rem;font-weight:700;
  color:var(--abyss);line-height:1.2;margin-bottom:5px;padding-right:16px}
.fig-cloud p{margin:0;font-size:.99rem;line-height:1.55;color:var(--ink-soft)}
.fig-cloud .fc-x{position:absolute;top:7px;right:9px;background:none;border:0;
  font-size:17px;line-height:1;color:var(--ink-soft);opacity:.5;cursor:pointer;padding:3px}
.fig-cloud .fc-x:hover{opacity:1;color:var(--coral)}

/* the one-off nudge that the circles are tappable */
.fig-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocean);opacity:.75;pointer-events:none;
  animation:hintPulse 2.6s ease-in-out infinite}
.fig-hint.gone{display:none}
@keyframes hintPulse{0%,100%{opacity:.35}50%{opacity:.85}}

.is-mobile .fig-cloud{width:min(84%,300px)}
.is-mobile .figure-card{max-height:none}
@media(max-width:900px){
  .fig-cloud{width:min(84%,300px)}
  .figure-card{max-height:none}
}

/* =====================================================================
   HERO — beach background, coloured strands, tighter top
   ===================================================================== */

/* ---- the shoreline, anchored to the right and fading toward the middle ----
   The photograph is a background layer for the whole hero rather than a strip
   inside the figure, which is why it can now be seen properly. The mask fades
   it out to the left so the headline always sits on clean cream. */
.hero-beach{position:absolute;inset:0 0 0 auto;width:min(58%,860px);
  z-index:0;pointer-events:none;overflow:hidden}
.hero-beach img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;display:block}
.hero-beach::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#FBF6EC 0%,rgba(251,246,236,.97) 26%,rgba(251,246,236,.62) 52%,rgba(251,246,236,.30) 78%,rgba(251,246,236,.18) 100%),
    linear-gradient(180deg,rgba(251,246,236,.55),rgba(251,246,236,0) 30%,rgba(251,246,236,0) 72%,rgba(251,246,236,.5));
}
/* the hero's own children must sit above the photograph */
/* The hero's own content must sit above the photograph. NOTE: .sunrise must
   stay absolutely positioned - making it relative turned it into a flex item
   of .hero and stole 672px from the content columns. */
.hero-grid{position:relative;z-index:2}
.hero .sunrise{z-index:1}

/* ---- pull the hero up toward the header ---- */
.hero{padding-top:clamp(26px,3.4vh,52px);padding-bottom:clamp(30px,4vh,60px)}
.hero .eyebrow{margin-bottom:10px}

/* ---- the figure sits on the photograph, so it needs its own quiet ground ---- */
.figure-card{background:rgba(255,253,248,.80);backdrop-filter:blur(3px);
  border-color:rgba(255,255,255,.75);max-height:min(62vh,560px)}
.fig-diagram{padding:12px 12px 14px}

/* ---- the three strands, each in its own colour ---- */
.pillar .p-disc{fill:#fff;transition:fill .22s}
.pillar .p-ring{fill:none;stroke:var(--tone,#0E7C86);stroke-width:3;stroke-opacity:.75;transition:.22s}
.pillar:hover .p-disc,.pillar:focus-visible .p-disc{
  fill:color-mix(in srgb,var(--tone,#0E7C86) 9%, #ffffff)}
.pillar:hover .p-ring,.pillar:focus-visible .p-ring{stroke-opacity:1;stroke-width:4}
.pillar.is-on .p-disc{fill:color-mix(in srgb,var(--tone,#0E7C86) 13%, #ffffff)}
.pillar.is-on .p-ring{stroke-opacity:1;stroke-width:6}
.pillar .p-label{fill:#052430}

/* the cloud is tinted by whichever strand is open */
.fig-cloud{border-top:4px solid var(--tone,#0E7C86)}
.fig-cloud .fc-label{color:var(--tone,#052430);filter:brightness(.72)}

/* on phones the photograph spans the whole hero, faded much further back */
.is-mobile .hero-beach{width:100%;opacity:.5}
.is-mobile .figure-card{background:rgba(255,253,248,.9)}
@media(max-width:900px){
  .hero-beach{width:100%;opacity:.5}
  .figure-card{background:rgba(255,253,248,.9)}
}

/* ---------------------------------------------------------------------
   FIX: .hero is a flex container, so a child that is meant to be a
   background layer was being laid out as a flex item and taking width
   away from the content. Taking it out of the flow restores the columns.
   --------------------------------------------------------------------- */
.hero-beach{position:absolute !important;top:0;right:0;bottom:0;left:auto;
  flex:0 0 auto}
.hero > .wrap{position:relative;z-index:2;width:100%}

/* The hero is a flex container and .wrap is its only in-flow child. A flex
   item sizes to its content unless told otherwise, which was letting the
   hero's columns collapse to about 768px and drift right. Telling it to
   fill the line restores the intended full-width two-column layout. */
.hero > .wrap{flex:1 1 100%;width:100%;max-width:var(--maxw);margin-inline:auto}

/* ---------------------------------------------------------------------
   Let the shoreline breathe. The figure card was sitting directly on top
   of the photograph, hiding it again. Narrowing the right column and
   pushing the card slightly left leaves a clear band of beach down the
   right-hand edge, with the diagram floating over the faded middle.
   --------------------------------------------------------------------- */
.hero-grid{grid-template-columns:1.02fr .78fr;gap:44px}
.hero-visual{justify-items:start}
.figure-card{max-width:470px;margin-right:auto;
  background:rgba(255,253,248,.72);
  box-shadow:0 26px 60px -30px rgba(5,36,48,.5)}
/* push the photograph's focal point so sand and sea sit in the visible band */
.hero-beach{width:min(52%,760px)}
.hero-beach img{object-position:72% 62%}
.hero-beach::after{background:
  linear-gradient(90deg,#FBF6EC 0%,rgba(251,246,236,.96) 22%,rgba(251,246,236,.55) 48%,rgba(251,246,236,.14) 76%,rgba(251,246,236,.06) 100%),
  linear-gradient(180deg,rgba(251,246,236,.45),rgba(251,246,236,0) 26%,rgba(251,246,236,0) 74%,rgba(251,246,236,.42))}

/* =====================================================================
   HERO — let the shoreline lead
   ---------------------------------------------------------------------
   The card chrome and the orbiting ellipses are removed. The diagram now
   floats directly on the photograph, and the photograph itself is wider,
   less faded, and fades further to the left so the sand and sea read
   strongly rather than being washed out.
   ===================================================================== */

/* no card: the diagram sits straight on the photograph */
.figure-card{background:none;border:0;box-shadow:none;backdrop-filter:none;
  max-height:none;max-width:none;overflow:visible}
.fig-diagram{padding:0}
/* The white glow that used to sit behind the circles is gone: it hazed over
   the middle of the diagram and hid the beach photograph. The small circles
   carry their own near-opaque discs, so the labels stay legible without it. */
.fig-diagram::before{content:none}
.fig-diagram svg{position:relative;z-index:1}

/* the floating ellipses are gone */
#orbit-rings{display:none}

/* the photograph: wider, stronger, fading further left */
.hero-beach{width:min(62%,980px)}
.hero-beach img{object-position:64% 58%}
.hero-beach::after{background:
  linear-gradient(90deg,
    #FBF6EC 0%,
    rgba(251,246,236,.94) 14%,
    rgba(251,246,236,.55) 30%,
    rgba(251,246,236,.16) 50%,
    rgba(251,246,236,0) 70%),
  linear-gradient(180deg,rgba(251,246,236,.34),rgba(251,246,236,0) 22%,
    rgba(251,246,236,0) 80%,rgba(251,246,236,.30))}

/* give the figure room and let the beach breathe to its right */
.hero-grid{grid-template-columns:1fr .82fr;gap:38px}
.figure-card{max-width:none}
.pillar .p-disc{fill:rgba(255,255,255,.96)}

/* =====================================================================
   SECTIONS BELOW THE HERO — another step up in size
   ===================================================================== */
.section-head h2,.showcase .sc-head h2{font-size:clamp(2.2rem,3.4vw,3.2rem)}
.section-head p,.showcase .sc-head p{font-size:1.3rem;line-height:1.6}
.about-grid .prose p:first-of-type{font-size:1.58rem;line-height:1.46}
.about-grid .prose p{font-size:1.3rem;line-height:1.7}
.stat-card .stat b{font-size:2.9rem}
.stat-card .stat span{font-size:1.08rem}
.stat-card p{font-size:1.2rem !important;line-height:1.66}
.disc-tags span{font-size:15.5px;padding:9px 16px}
.tl-year{font-size:1.7rem}
.tl-body h3{font-size:1.55rem}
.tl-body p{font-size:1.2rem;line-height:1.68}
.thesis blockquote{font-size:clamp(1.9rem,3.1vw,2.9rem)}
.thesis .attrib{font-size:1.12rem}
.shot figcaption{font-size:16.5px}
.sc-note h3{font-size:1.85rem}
.sc-note p{font-size:1.22rem;line-height:1.66}
.subpage h3{font-size:1.7rem}
.subpage p{font-size:1.12rem}
.partner .pt-name,.p-logo .nm{font-size:1.3rem}
.closer h2{font-size:clamp(2.2rem,3.5vw,3.2rem)}
.closer p{font-size:1.3rem;line-height:1.62}

/* =====================================================================
   AUGUST 2026 REVISIONS
   ---------------------------------------------------------------------
   1. The shoreline photograph starts further right into the frame, so
      the sandy sweep of the bay (right-hand side of the photo) fills
      the visible band instead of open sea.
   2. Condensed history on the home page: the 2026 statistics and a
      prominent horizontal strip of locations + years, sitting above
      the "Why it works" card inside the photo band.
   3. A shared lightbox: any photo opens full-scale with its caption.
   4. Gallery tiles never crop the photograph (object-fit: contain),
      so no faces are ever cut off.
   ===================================================================== */

/* ---- 1. beach: begin further right into the photograph ---- */
/* The element is stretched wider than its window and right-aligned, so the
   sea-only left third of the photo falls outside the visible band and the
   sand + palms carry it instead. */
.hero-beach img{width:132%;max-width:none;margin-left:-32%;object-position:100% 62%}
.is-mobile .hero-beach img{width:118%;margin-left:-18%}
@media(max-width:900px){ .hero-beach img{width:118%;margin-left:-18%} }

/* ---- 2. condensed history inside the photo band ---- */
.sc-history{grid-column:span 12;display:grid;grid-template-columns:1fr;gap:18px;
  margin-top:6px}
.sc-stats{border-radius:16px;overflow:hidden}
.sc-stats{grid-template-columns:repeat(4,1fr)}
.years-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ys-item{display:flex;flex-direction:column;gap:2px;text-decoration:none;
  background:var(--paper);border:1px solid rgba(5,36,48,.10);border-radius:16px;
  padding:20px 22px;transition:border-color .18s, box-shadow .18s}
.ys-item:hover{border-color:var(--ocean);box-shadow:0 14px 30px -20px rgba(5,36,48,.45)}
.ys-year{font-family:"Fraunces",Georgia,serif;font-size:2.3rem;font-weight:600;
  line-height:1;color:var(--ocean)}
.ys-item.current .ys-year{color:var(--coral)}
.ys-place{font-family:"Fraunces",Georgia,serif;font-size:1.35rem;font-weight:500;
  color:var(--abyss);line-height:1.2;margin-top:4px}
.ys-ord{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
/* the note card now sits alone beneath the strip, so let it span the row */
.sc-note{grid-column:span 12}
@media(max-width:900px){
  .sc-stats{grid-template-columns:repeat(2,1fr)}
  .years-strip{grid-template-columns:1fr}
  .ys-item{flex-direction:row;align-items:baseline;gap:12px}
  .ys-place{margin-top:0}.ys-ord{margin-top:0;margin-left:auto}
}
.is-mobile .sc-stats{grid-template-columns:repeat(2,1fr)}
.is-mobile .years-strip{grid-template-columns:1fr}
.is-mobile .ys-item{flex-direction:row;align-items:baseline;gap:12px}
.is-mobile .ys-place{margin-top:0}
.is-mobile .ys-ord{margin-top:0;margin-left:auto}

/* ---- 3. lightbox ---- */
.lb-zoom{cursor:zoom-in}
body.lb-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;background:rgba(4,22,29,.92);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .18s ease;cursor:zoom-out;padding:22px}
/* the class's display:flex outranks the [hidden] attribute's default, so an
   explicit rule is needed - without it a closed lightbox stays as an
   invisible full-screen layer that swallows every click on the page */
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox figure{margin:0;max-width:min(1200px,96vw);max-height:92vh;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox img{max-width:100%;max-height:calc(92vh - 64px);object-fit:contain;
  border-radius:10px;box-shadow:0 34px 80px -30px rgba(0,0,0,.8);display:block}
.lightbox figcaption{color:#eafffe;font-size:1.02rem;line-height:1.5;
  text-align:center;max-width:70ch;padding:0 8px}
.lightbox .lb-x{position:absolute;top:14px;right:18px;background:none;border:0;
  color:#fff;font-size:34px;line-height:1;opacity:.75;cursor:pointer;padding:8px}
.lightbox .lb-x:hover{opacity:1}

/* ---- 4. gallery: never crop a photograph ---- */
.gal-item{background:linear-gradient(150deg,#0a3a4a,var(--abyss))}
.gal-item img{object-fit:contain}
.gal-item:hover img{transform:none}
.gal-item.w4{min-height:250px}

/* ---- "Click me" cue at the base of each circle ---- */
.pillar .p-cta{font-family:"Space Mono",monospace;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;fill:var(--tone,#0E7C86);
  opacity:.85;pointer-events:none}
.pillar:hover .p-cta,.pillar.is-on .p-cta{opacity:1}
/* the central "Tap a circle" hint is redundant now each circle carries its own cue */
.fig-hint{display:none}

/* ---- larger masthead logo ---- */
.brand img{width:66px;height:66px}
.is-mobile .brand img{width:50px;height:50px}
@media(max-width:900px){ .brand img{width:50px;height:50px} }

/* ---- lift the text column ("The Initiative" side) slightly ---- */
.hero-copy{align-self:start;margin-top:-30px}
.is-mobile .hero-copy{align-self:auto;margin-top:0}
@media(max-width:900px){ .hero-copy{align-self:auto;margin-top:0} }

/* =====================================================================
   MOBILE PARITY - bring the desktop revisions to phones
   ---------------------------------------------------------------------
   The cream figure-card survived on mobile (its .is-mobile rule outranked
   the later card-removal), so the diagram still sat on a white haze and
   the beach was hidden. Strip the chrome on phones too, let the beach
   read more strongly, and scale the circle text up for small screens.
   ===================================================================== */
.is-mobile .figure-card{background:none;border:0;box-shadow:none;backdrop-filter:none}
.is-mobile .hero-beach{opacity:.62}
.is-mobile .pillar .p-cta{font-size:15px}
@media(max-width:900px){
  .figure-card{background:none;border:0;box-shadow:none;backdrop-filter:none}
  .hero-beach{opacity:.62}
  .pillar .p-cta{font-size:15px}
}

/* On phones each gallery tile hugs its photograph exactly - no fixed
   min-heights, so no dark letterbox bands and still nothing cropped.
   Placeholder tiles (no photo yet) keep a height via the base rules. */
.is-mobile .gal-item.has-photo{min-height:0}
.is-mobile .gal-item.has-photo img{position:relative;inset:auto;height:auto}
@media(max-width:900px){
  .gal-item.has-photo{min-height:0}
  .gal-item.has-photo img{position:relative;inset:auto;height:auto}
}

/* =====================================================================
   MOBILE HERO ORDER
   ---------------------------------------------------------------------
   On phones the diagram used to open the page (order:-1), which read as
   an unexplained figure before any words. The text now leads and the
   diagram closes the hero, introduced by its own caption. Desktop keeps
   the side-by-side layout and never shows the caption.
   ===================================================================== */
/* The caption that used to sit under the diagram on phones has been
   removed - the labelled circles introduce themselves. Only the ordering
   rules remain: text first, diagram closing the hero. */
.is-mobile .hero-visual{order:2;margin-top:6px}
@media(max-width:900px){
  .hero-visual{order:2;margin-top:6px}
}

/* =====================================================================
   AUGUST 2026 - SECOND ROUND
   ===================================================================== */

/* ---- (1) a larger masthead: logo, name and tagline ---- */
.brand img{width:92px;height:92px}
.brand .b-txt{font-size:34px}
.brand .b-txt small{font-size:12.5px;letter-spacing:.2em;margin-top:6px}
.nav-brandbar .wrap{padding-top:20px;padding-bottom:18px}
.is-mobile .brand img{width:60px;height:60px}
.is-mobile .brand .b-txt{font-size:21px}
.is-mobile .brand .b-txt small{font-size:9.5px;letter-spacing:.15em}
@media(max-width:900px){
  .brand img{width:60px;height:60px}
  .brand .b-txt{font-size:21px}
  .brand .b-txt small{font-size:9.5px;letter-spacing:.15em}
}

/* ---- (5) bigger, bolder captions on the home photo band ---- */
.shot figcaption{font-size:21px;line-height:1.28;padding:56px 26px 22px}
.shot figcaption span{font-size:12.5px;letter-spacing:.16em;margin-bottom:7px}
.shot figcaption strong{color:var(--sun-hi);font-weight:700}
.is-mobile .shot figcaption{font-size:17px;padding:44px 18px 16px}
.is-mobile .shot figcaption span{font-size:11px}
@media(max-width:900px){
  .shot figcaption{font-size:17px;padding:44px 18px 16px}
  .shot figcaption span{font-size:11px}
}

/* ---- (7) the statistics are explicitly the 2026 edition's ---- */
.sc-stats-title{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocean);margin-bottom:-4px}
.sc-stats .stat .l{font-size:11px;line-height:1.35}

/* ---- (7b) a grander "Why the Caribbean" ---- */
.about-grid .prose p:first-of-type{font-size:1.75rem;line-height:1.42}
.about-grid .prose p{font-size:1.36rem;line-height:1.72}
#about .section-head h2{font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.1}
.is-mobile .about-grid .prose p:first-of-type{font-size:1.34rem}
.is-mobile .about-grid .prose p{font-size:1.14rem}
@media(max-width:900px){
  .about-grid .prose p:first-of-type{font-size:1.34rem}
  .about-grid .prose p{font-size:1.14rem}
}

/* ---- (12) bigger circle labels; each strand keeps its own typeface,
        set inline from pillars[].font in assets/app.js ---- */
.pillar .p-label{font-size:17.5px;font-weight:700;letter-spacing:.01em}
/* Weight, size, tracking and case are now set per pillar from pillars[] in
   assets/app.js, so each strand has its own typographic voice. Nothing here
   should override them — these are only the shared defaults and the
   mobile step-up. */

/* ---- (13) "click me" text replaced by an animated invitation:
        a ring that pulses out of each circle, and a bobbing chevron.
        Both stop once that circle has been opened. ---- */
.pillar .p-cta{display:none}
.pillar .p-pulse{stroke:var(--tone,#0E7C86);stroke-width:3;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:pillar-pulse 2.6s ease-out infinite;pointer-events:none}
@keyframes pillar-pulse{
  0%  {opacity:.55; transform:scale(1)}
  70% {opacity:0;   transform:scale(1.22)}
  100%{opacity:0;   transform:scale(1.22)}
}
.pillar .p-tap{animation:pillar-bob 2.2s ease-in-out infinite;pointer-events:none;
  transform-box:fill-box;transform-origin:center}
@keyframes pillar-bob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(5px)}
}
.pillar.is-on .p-pulse,.pillar.is-on .p-tap{animation:none;opacity:0}
.pillar:hover .p-tap{animation-duration:1.1s}
@media(prefers-reduced-motion:reduce){
  .pillar .p-pulse{animation:none;opacity:.4}
  .pillar .p-tap{animation:none}
}

/* ---- (8,9) the two simple form pages ---- */
.wrap-narrow{max-width:760px}
.form-page{padding:72px 0 96px}
.form-page h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:10px 0 18px;line-height:1.06}
.form-lede{font-size:1.2rem;color:var(--ink-soft);line-height:1.65;max-width:62ch}
.simple-form{display:grid;gap:8px;margin:34px 0 46px;max-width:560px}
.simple-form label{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ocean);margin-top:14px}
.simple-form input,.simple-form textarea{font:inherit;font-size:1rem;color:var(--abyss);
  background:var(--paper);border:1px solid rgba(5,36,48,.18);border-radius:12px;
  padding:13px 15px;width:100%}
.simple-form input:focus,.simple-form textarea:focus{outline:none;border-color:var(--ocean);
  box-shadow:0 0 0 3px rgba(14,124,134,.14)}
.simple-form textarea{resize:vertical;line-height:1.55}
.simple-form .btn{justify-self:start;margin-top:22px;border:0;cursor:pointer}
.form-note{font-size:.95rem;color:var(--ocean);min-height:1.2em;margin:10px 0 0}
.form-note.is-error{color:#b4442a}
.form-privacy{border-top:1px solid rgba(5,36,48,.12);padding-top:26px;max-width:64ch}
.form-privacy h2{font-family:"Fraunces",Georgia,serif;font-size:1.35rem;margin:0 0 12px}
.form-privacy p{color:var(--ink-soft);font-size:1rem;line-height:1.66;margin:0 0 12px}

/* ghost buttons on the cream form/404 pages need dark ink and a visible edge
   (the base .btn-ghost is white-on-photo, which disappears here) */
.form-page .btn-ghost{color:var(--abyss);border-color:rgba(5,36,48,.28);background:#fff}
.form-page .btn-ghost:hover{border-color:var(--ocean);color:var(--ocean)}

/* =====================================================================
   AUGUST 2026 - THIRD ROUND: a louder front page
   ===================================================================== */

/* ---- (1) the masthead tagline: heavier, same colour ---- */
.brand .b-txt small{font-weight:700;font-size:13.5px;letter-spacing:.19em}
.is-mobile .brand .b-txt small{font-weight:700;font-size:10px;letter-spacing:.13em}
@media(max-width:900px){ .brand .b-txt small{font-weight:700;font-size:10px;letter-spacing:.13em} }

/* ---- (1b) the home page generally, one step larger ---- */
.hero h1{font-size:clamp(2.5rem,4.7vw,4.6rem)}
.hero .lede{font-size:clamp(1.2rem,1.65vw,1.5rem);max-width:46ch;line-height:1.55}
.section-head h2{font-size:clamp(2.15rem,4.7vw,3.5rem)}
.sc-note h3,.f-title{font-size:1.7rem}
.sc-note p{font-size:1.16rem;line-height:1.65}
.thesis blockquote{font-size:clamp(1.6rem,3.1vw,2.5rem)}
.stat .n{font-size:2.6rem}
.ys-year{font-size:2.6rem}
.ys-place{font-size:1.5rem}
.is-mobile .hero h1{font-size:clamp(1.95rem,7vw,2.6rem)}
.is-mobile .hero .lede{font-size:1.14rem}
.is-mobile .stat .n{font-size:2.1rem}
@media(max-width:900px){
  .hero h1{font-size:clamp(1.95rem,7vw,2.6rem)}
  .hero .lede{font-size:1.14rem;max-width:60ch}
  .stat .n{font-size:2.1rem}
}

/* ---- (2) the tap cue bobs faster, so it reads as an invitation ---- */
.pillar .p-tap{animation-duration:.95s}
.pillar:hover .p-tap{animation-duration:.6s}
@keyframes pillar-bob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(8px)}
}
.pillar .p-pulse{animation-duration:1.9s}

/* =====================================================================
   SITE-WIDE TYPE SCALE-UP
   ---------------------------------------------------------------------
   Everything on every page, one clear step larger. Two mechanisms:
     - rem-based sizes (headings, hero, prose) scale from the root, so
       raising the root size lifts them all proportionally;
     - the many px-based details (nav, eyebrows, captions, cards, mono
       labels) do not follow the root, so they are raised individually
       below.
   Kept out of it deliberately: the pillar-circle labels, whose sizes are
   set inline from pillars[] and then auto-fitted to their circles in
   assets/app.js, and the SVG diagram, which scales with its viewBox.
   ===================================================================== */
html{font-size:112.5%}                 /* 16px -> 18px root */
body{font-size:1.11rem;line-height:1.62}
.is-mobile body{font-size:1.08rem}

/* navigation and masthead */
.nav a{font-size:1.03rem}
.brand .b-txt{font-size:38px}
.brand .b-txt small{font-size:14.5px}
.subnav a,.subnav .crumb{font-size:.95rem}

/* the small mono labels used as eyebrows, tags and times */
.eyebrow{font-size:13.5px;letter-spacing:.22em}
.tag,.pill,.chip,.f-eyebrow,.disc span{font-size:13px}

/* cards and listings */
.p-name,.card h3,.news-item h3,.prog-item .title{font-size:1.32rem}
.p-rank,.p-aff{font-size:1.02rem}
.bio,.teaser,.card p,.news-item p{font-size:1.06rem;line-height:1.62}
.cgroup h2,.cgroup h3{font-size:2rem}
.cm-name{font-size:1.15rem}
.cm-field{font-size:1.02rem}

/* programme, footer, forms */
.prog-item .time,.prog-item .tag{font-size:.95rem}
.foot a,.foot p,.foot small{font-size:1.02rem}
.form-lede{font-size:1.3rem}
.simple-form input,.simple-form textarea{font-size:1.08rem}
.form-privacy p{font-size:1.06rem}
.member-bio,.profile-bio,.mbio{font-size:1.12rem;line-height:1.7}

/* the home photo band */
.shot figcaption{font-size:23px}
.shot figcaption span{font-size:13.5px}

/* phones: the same lift, a little gentler so lines do not break badly */
.is-mobile .brand .b-txt{font-size:23px}
.is-mobile .eyebrow{font-size:12px}
.is-mobile .shot figcaption{font-size:18.5px}
@media(max-width:900px){
  html{font-size:110%}
  .brand .b-txt{font-size:23px}
  .eyebrow{font-size:12px}
  .shot figcaption{font-size:18.5px}
}

/* The remaining small details, raised so the step-up is genuinely
   site-wide. Mono micro-labels stay proportionally smaller than body
   text, since that contrast is what makes them read as labels. */
.btn,.nav-cta{font-size:1.02rem}
.backlink,.day,.disc-title,.group-label,.k,.hs-k,.s-k,.sp-k,.pt-kind,
.kind,.n-date,.m-role,.p-role,.ord,.ys-ord,.tl-badge,.sc-stats-title,
.f-eyebrow,.founder-tag,.cap,.p-meta{font-size:12.5px}
.p-rank,.p-aff,.p-fld,.cm-field{font-size:15px}
.p-more,.n-more,.m-link,.sp-go,.pt-go{font-size:15.5px}
.wordmark{font-size:17px}

/* ---- the masthead tagline, larger on every screen ----
   It was hidden outright below 400px; on a phone the strapline is the one
   line that says what the Initiative is, so it now stays and simply wraps
   its tracking in instead. */
.brand .b-txt small{font-size:17px;font-weight:700;letter-spacing:.2em}
.is-mobile .brand .b-txt small{font-size:12.5px;letter-spacing:.11em}
@media(max-width:900px){
  .brand .b-txt small{font-size:12.5px;letter-spacing:.11em}
}
@media(max-width:400px){
  /* .is-mobile has to be named here too, or the class-based rule above wins
     on specificity and the strapline stays too wide for a 360px screen */
  .brand .b-txt small,
  .is-mobile .brand .b-txt small{display:block;font-size:11px;letter-spacing:.03em}
}

/* Very narrow phones (360px and below): the enlarged statistics no longer
   fit two to a row, and the wrap padding leaves them a few pixels short.
   One per row, with the labels a touch smaller. */
@media(max-width:430px){
  .stat-quad.sc-stats,
  .is-mobile .stat-quad.sc-stats{grid-template-columns:1fr}
  .sc-stats .stat .l{font-size:11.5px;letter-spacing:.1em}
  .wrap{padding:0 18px}
}

/* 320px screens: grid children default to min-width:auto, so a long label
   can push a track wider than its container. Let them shrink and wrap. */
@media(max-width:430px){
  .sc-history,.sc-stats,.sc-stats .stat,.years-strip,.ys-item{min-width:0}
  .sc-stats .stat .l,.ys-place{overflow-wrap:anywhere}
  .subnav{flex-wrap:wrap;row-gap:6px}
  .subnav a.subpage{white-space:normal}
}

/* 320px: the feature card's fixed padding and its no-wrap button push it
   past the viewport, and the sub-navigation links do the same. */
@media(max-width:430px){
  .feature{padding-left:20px;padding-right:20px;min-width:0}
  .feature .f-cta{white-space:normal;text-align:center}
  .feature *{min-width:0}
  .subnav .wrap{flex-wrap:wrap}
}

/* The event sub-navigation is a flex row that keeps its own gap even when
   the links wrap; below 430px the row still measured wider than the screen. */
@media(max-width:430px){
  .is-mobile .subnav,.subnav{gap:12px;row-gap:6px}
  .subnav a{font-size:11.5px;letter-spacing:.05em}
  .subnav a.subpage{flex:0 1 auto;min-width:0}
}

/* The sub-page cards ask for a 320px minimum track, which is wider than the
   content column on a 320px screen. Below that, let the track shrink. */
@media(max-width:430px){
  .subpage-grid{grid-template-columns:1fr}
}


/* The "Why it works" card now runs without a heading, so its one paragraph
   carries the card: bold italic, and a size up to match. */
.sc-note p{font-weight:700;font-style:italic;font-size:1.28rem;line-height:1.6}
.is-mobile .sc-note p{font-size:1.14rem}
@media(max-width:900px){ .sc-note p{font-size:1.14rem} }

/* The science photograph is a wide frame; its neighbour matches height so the
   two tiles still bottom out together. */
.shot-mid{aspect-ratio:1.9}
.shot-tall{aspect-ratio:1.36}

/* =====================================================================
   THE SMALL MONO LABELS, MADE READABLE
   ---------------------------------------------------------------------
   Eyebrows ("THE INITIATIVE", "WHY THE CARIBBEAN"), section kickers, the
   statistics heading, the pull-quote attribution, the hero meta chips and
   the sponsor strip were all set between 9 and 13px, which is small on a
   page whose body text is now 20px. They keep their tracking and their
   uppercase - that is what makes them read as labels - but they are no
   longer squinting size.
   ===================================================================== */
.eyebrow{font-size:16px;letter-spacing:.2em}
.eyebrow::before{width:34px}
.eyebrow.on-dark{font-size:16px}
.s-k,.sc-stats-title,.sc-note .k,.f-eyebrow,.group-label,
.hs-k,.k,.sp-k,.pt-kind,.kind,.disc-title,.tl-badge,
.n-date,.m-role,.p-role,.day,.ord,.ys-ord,.founder-tag,
.cap,.p-meta,.backlink,.wordmark{font-size:15px;letter-spacing:.13em}
.thesis .attrib,.thesis figcaption,.thesis .who{font-size:15.5px;letter-spacing:.14em}
.hero-meta span,.chip,.pill,.tag{font-size:14.5px}
.hero-sponsor .k,.hero-sponsor small,.p-logo .kind{font-size:14.5px}
.subnav a{font-size:14.5px;letter-spacing:.08em}

/* phones: the same labels, a step down so they still fit their rows */
.is-mobile .eyebrow{font-size:14px;letter-spacing:.16em}
.is-mobile .s-k,.is-mobile .sc-stats-title,.is-mobile .sc-note .k,
.is-mobile .k,.is-mobile .kind,.is-mobile .pt-kind,.is-mobile .sp-k,
.is-mobile .hs-k,.is-mobile .ys-ord,.is-mobile .day,.is-mobile .n-date,
.is-mobile .p-role,.is-mobile .m-role,.is-mobile .founder-tag,
.is-mobile .cap,.is-mobile .p-meta{font-size:13px;letter-spacing:.1em}
@media(max-width:900px){
  .eyebrow{font-size:14px;letter-spacing:.16em}
  .s-k,.sc-stats-title,.sc-note .k,.k,.kind,.pt-kind,.sp-k,.hs-k,
  .ys-ord,.day,.n-date,.p-role,.m-role,.founder-tag,.cap,.p-meta{font-size:13px;letter-spacing:.1em}
}

/* The remaining stragglers: the pull-quote attribution is a <cite>, the hero
   meta labels are .chip, and the sponsor strip's kicker is .hs-k. None of
   them matched the selectors above. */
.thesis cite,cite{font-size:16px;letter-spacing:.16em}
.chip{font-size:15px}
.hs-k{font-size:14px;letter-spacing:.14em}
.hs-name{font-size:19px}
.is-mobile .thesis cite,.is-mobile cite{font-size:13.5px}
.is-mobile .chip{font-size:13.5px}
.is-mobile .hs-k{font-size:12.5px}
@media(max-width:900px){
  .thesis cite,cite{font-size:13.5px}
  .chip{font-size:13.5px}
  .hs-k{font-size:12.5px}
}

/* =====================================================================
   THE SMALL MONO LABELS, MADE READABLE
   ---------------------------------------------------------------------
   Eyebrows, section keys, the statistics heading, the quote attribution
   and the sponsor strip were all set at 9-13px with heavy tracking. They
   are structural signposts, not fine print, so they now sit close to body
   size with the tracking eased back a little to keep them legible.
   ===================================================================== */
.eyebrow{font-size:16px;letter-spacing:.16em}
.eyebrow::before{width:34px}
.is-mobile .eyebrow{font-size:14px;letter-spacing:.12em}
@media(max-width:900px){ .eyebrow{font-size:14px;letter-spacing:.12em} }

.sc-note .k,.sc-stats-title,.s-k,.group-label,.disc-title,
.f-eyebrow,.n-date,.day,.kind,.pt-kind,.ord,.ys-ord,.tl-badge,
.p-role,.m-role,.cap,.p-meta,.founder-tag,.hs-k,.k{
  font-size:15px;letter-spacing:.13em}
.is-mobile .sc-note .k,.is-mobile .sc-stats-title,.is-mobile .s-k,
.is-mobile .group-label,.is-mobile .f-eyebrow,.is-mobile .k{
  font-size:13.5px;letter-spacing:.1em}
@media(max-width:900px){
  .sc-note .k,.sc-stats-title,.s-k,.group-label,.f-eyebrow,.k{
    font-size:13.5px;letter-spacing:.1em}
}

/* the attribution under the pull-quote */
.thesis .attrib,.thesis figcaption,.thesis .who,.thesis cite,.thesis small{
  font-size:15px;letter-spacing:.12em}

/* the statistics labels sit under big numerals - they can take more size */
.stat .l{font-size:14px;letter-spacing:.1em}
.is-mobile .stat .l{font-size:12.5px}

/* =====================================================================
   THE PRINCIPAL SUPPORTER CARD IN THE HERO
   Larger logo well, larger name, more padding - it is the one piece of
   third-party endorsement on the page and was the smallest thing on it.
   ===================================================================== */
.hero-sponsor{padding:20px 26px;gap:22px;border-radius:18px}
.hero-sponsor .hs-k{font-size:13px;letter-spacing:.14em}
.hero-sponsor .hs-slot{width:190px;height:74px}
.hero-sponsor .hs-slot img{max-height:64px}
.hero-sponsor .hs-name{font-size:1.28rem}
.is-mobile .hero-sponsor{padding:18px 20px;gap:14px}
.is-mobile .hero-sponsor .hs-slot{width:158px;height:62px}
.is-mobile .hero-sponsor .hs-slot img{max-height:54px}
@media(max-width:900px){
  .hero-sponsor .hs-slot{width:158px;height:62px}
  .hero-sponsor .hs-slot img{max-height:54px}
}

/* the sponsor strip renders without a logo file in some builds; that variant
   had its own smaller size and was outranking the rule above */
.hero-sponsor:not(.has-logo) .hs-k{font-size:13px;letter-spacing:.14em}
.hero-sponsor .hs-k{white-space:nowrap}
@media(max-width:430px){ .hero-sponsor .hs-k{white-space:normal} }
/* the enlarged logo well plus a one-line label needs more room than the
   original 390px cap allowed */
.hero-sponsor{max-width:520px}

/* The hero chips (Third symposium · Barbados · March 2026) were the last of
   the mono micro-labels still set as fine print. */
.hero-meta .chip{font-size:15px;letter-spacing:.1em;padding:9px 17px}
.is-mobile .hero-meta .chip{font-size:13.5px;letter-spacing:.08em;padding:8px 14px}
@media(max-width:900px){
  .hero-meta .chip{font-size:13.5px;letter-spacing:.08em;padding:8px 14px}
}

/* =====================================================================
   THE LOGO IN THE MASTHEAD
   ---------------------------------------------------------------------
   The mark is drawn in teal, gold and green on transparency, so against
   the deep navy bar its darker strokes disappeared. It now sits inside a
   pale convex plate: an octagon (clip-path, so the shape is real rather
   than a rounded square) filled with a warm off-white and lifted with a
   soft inner highlight and an outer shadow. The plate reads as a badge,
   and every colour in the mark now has contrast to work against.
   ===================================================================== */
.brand{gap:18px}
/* (the .brand-scoped badge rules moved to the shared block at the end of
   this file, so both badges scale from a single definition) */

/* The leadership rows hold a single wide card each. The founder row already
   forces one column; the new "Lead: Science and Culture" row and the chair
   row need the same, or the auto-fill track shrinks the card to 270px and
   the feature layout collapses. */
#team-sci,#team-lead{grid-template-columns:1fr}

/* (1) "THIRD SYMPOSIUM · 2026" on the Barbados feature card was still the
   smallest label on the page. */
.feature .f-eyebrow{font-size:16px;letter-spacing:.14em}
.is-mobile .feature .f-eyebrow{font-size:14px;letter-spacing:.11em}
@media(max-width:900px){ .feature .f-eyebrow{font-size:14px;letter-spacing:.11em} }




/* =====================================================================
   THE OCTAGONAL LOGO BADGE - ONE DEFINITION, TWO SIZES
   ---------------------------------------------------------------------
   Everything is derived from --plate, so the masthead badge and the
   footer badge are the same shape at different scales. Previously the
   rim (inset), the padding and the shadow were absolute pixel values,
   which meant that at the smaller footer size the gold edge was
   proportionally more than twice as thick as the one in the header.
   ===================================================================== */
.logo-badge,.foot-badge{
  --plate:112px;
  position:relative;display:grid;place-items:center;flex:none;
  width:var(--plate);height:var(--plate);
}
.logo-badge::before,.foot-badge::before{
  content:"";position:absolute;
  inset:calc(var(--plate) * -0.027);          /* the gold edge, always 2.7% */
  background:linear-gradient(150deg, var(--sun-hi), #94A524 55%, var(--lagoon));
  clip-path:polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%,
                    30% 100%, 0% 70%, 0% 30%);
  opacity:.9;
}
.logo-badge .logo-plate,.foot-badge .logo-plate{
  position:relative;flex:none;display:grid;place-items:center;
  width:100%;height:100%;
  padding:calc(var(--plate) * 0.125);
  background:
    radial-gradient(120% 120% at 30% 22%, #ffffff 0%, #fdf8ec 46%, #f3e6cd 100%);
  clip-path:polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%,
                    30% 100%, 0% 70%, 0% 30%);
  box-shadow:0 calc(var(--plate) * .09) calc(var(--plate) * .23)
             calc(var(--plate) * -.107) rgba(0,0,0,.55);
  transition:transform .25s ease;
}
.logo-badge .logo-plate img,.foot-badge .logo-plate img{
  width:100%;height:100%;object-fit:contain}
.brand:hover .logo-plate{transform:translateY(-2px) scale(1.02)}

/* the two places it appears, and the only thing that differs: the size */
.brand .logo-badge{--plate:112px}
.foot-brand .foot-badge{--plate:64px}
.is-mobile .brand .logo-badge{--plate:74px}
@media(max-width:900px){ .brand .logo-badge{--plate:74px} }
@media(max-width:400px){ .brand .logo-badge{--plate:62px} }
.is-mobile .foot-brand .foot-badge{--plate:56px}
@media(max-width:900px){ .foot-brand .foot-badge{--plate:56px} }