/* ---------- Tokens (teal and green sampled from the real MYCC logo) ---------- */
:root{
  --teal-900:#122831;
  --teal-800:#1c3d47;
  --teal-700:#28525f;
  --teal-600:#38758a;   /* exact logo teal */
  --teal-500:#5c93a6;
  --teal-100:#dbe8ec;
  --teal-50:#eef6f7;

  --green-800:#146b18;  /* white text on this passes AA; 600/700 don't */
  --green-700:#1a8a1f;
  --green-600:#23b029;  /* exact logo green */
  --green-50:#e8f6e6;

  /* Warm accents: a sunny yellow beside the logo colours, on a cream page. */
  --sun:#f5b83d;        /* teal-900 text on this is ~8.6:1 */
  --sun-200:#f4dba6;
  --sun-100:#fdf0d5;
  --cream:#fbf5ec;

  --ink:#182523;
  --ink-soft:#3d4c49;
  --line:#eadfce;
  --paper:#ffffff;
  --paper-soft:#fdfaf4;

  --radius:14px;
  --shadow:0 1px 2px rgba(74,52,20,.05), 0 8px 24px rgba(74,52,20,.07);

  --font-display:"Fraunces", ui-serif, Georgia, serif;
  --font-body:"Public Sans", ui-sans-serif, system-ui, sans-serif;

  --container:1120px;
  /* Clearance for the sticky header, so anchor jumps don't land under it. */
  --header-offset:80px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-offset);}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--teal-700);}
strong{color:var(--teal-900); font-weight:700;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--teal-900);
  line-height:1.2;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:2.5rem;}
h2{
  font-size:1.7rem; padding-bottom:.45em; margin-bottom:.85em;
  border-bottom:3px solid var(--teal-700);
  display:flex; align-items:center; gap:.45em;
}
h2::before{
  content:""; width:12px; height:12px; border-radius:50%; flex-shrink:0;
  background:var(--sun); box-shadow:0 0 0 3px var(--sun-100);
}
h3{font-size:1.25rem; color:var(--teal-800);}
p{margin:0 0 1em; color:var(--ink-soft);}

/* Screen-reader-only text, e.g. the "(opens in a new tab)" notes. */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--teal-800); font-weight:700;
  padding:12px 18px; border:2px solid var(--green-600);
  border-radius:0 0 8px 0; text-decoration:none;
}
.skip-link:focus{left:0;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper-soft);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  padding:12px 24px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand-logo{height:42px; width:auto;}
.brand-full{
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--teal-900);
  white-space:nowrap;
}
.main-nav{display:flex; gap:18px; margin-left:auto;}
/* Lives outside #mainNav so it stays in the header row when the nav
   collapses into the mobile drawer. */
.nav-cta{padding:8px 18px; font-size:.9rem;}
.main-nav a{
  text-decoration:none; color:var(--ink-soft); font-weight:700; font-size:.94rem;
  padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.main-nav a:hover{color:var(--teal-800); border-bottom-color:var(--sun);}
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{width:22px; height:2px; background:var(--teal-800); border-radius:2px;}

/* ---------- Motion ---------- */
.text-link{transition:color .2s ease;}

/* Scroll reveal. Hidden state is gated on .js so content stays visible
   when JavaScript never runs. */
.js .reveal{opacity:0; transform:translateY(18px);}
.js .reveal.in-view{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s ease;
}

/* ---------- Hero ---------- */
/* The hero is a cream canvas: text on the left, and the activity photos
   cross-fading in a box on the right, lined up with the page's right edge.
   Each photo keeps its own shape and shows whole (never cropped, never
   enlarged past its real size), framed like a printed photo with its title
   on it. isolation keeps the layers' z-index local to the hero. */
/* The photo box's width drives the text width, so the two can never meet:
   the text gets everything left of the photo, minus a 48px gap. */
.hero{
  --hero-photo-w:min(36vw, 440px);
  --hero-text-w:calc(100% - var(--hero-photo-w) - 48px);
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; min-height:460px;
  background:var(--cream);
}
/* container-type:size lets each photo size itself against this box (cq
   units) even though its figure shrink-wraps it; the box always has a
   definite size (insets here, an explicit height on phones). */
.hero-slides{
  position:absolute; top:40px; bottom:40px; z-index:0;
  right:max(24px, calc(50% - var(--container) / 2 + 24px)); width:var(--hero-photo-w);
  container-type:size;
}
/* Only .is-active shows, so without JS the first photo stands alone. */
.hero-slide{
  position:absolute; top:50%; right:0; margin:0; transform:translateY(-50%);
  border:6px solid #fff; border-radius:16px; background:#fff; overflow:hidden;
  box-shadow:0 14px 34px rgba(74,52,20,.18);
  --turn:rotate(-5deg) scale(.94);
  transform:translateY(-50%) var(--turn);
  opacity:0; transition:opacity .6s ease, transform .6s ease;
}
/* Active sits above the outgoing slide, which is later in the DOM on 10 to 1. */
.hero-slide.is-active{opacity:1; --turn:rotate(0deg) scale(1); z-index:1;}
/* A sun-yellow line traces once around the photo's edge as it arrives.
   @property lets the conic angle animate; browsers without it show no trace. */
@property --trace{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.hero-slide::after{
  content:""; position:absolute; inset:0; border-radius:10px; padding:3px;
  background:conic-gradient(from 0deg, var(--sun) var(--trace), transparent var(--trace));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events:none; opacity:0;
}
.hero-slide.is-active::after{animation:hero-trace 1.1s ease-out forwards;}
@keyframes hero-trace{
  from{--trace:0deg; opacity:1;}
  80%{--trace:360deg; opacity:1;}
  to{--trace:360deg; opacity:0;}
}
/* width/height auto under the max limits keeps each photo's own aspect ratio
   and never upscales it. The px limits are a fallback for browsers without
   container query units; the 12px is the frame on both sides. */
.hero-slide img{
  display:block; width:auto; height:auto;
  max-width:560px; max-height:420px;
  max-width:calc(100cqw - 12px); max-height:calc(100cqh - 12px);
}
/* max-width lets a long title wrap inside a small photo instead of
   running off its edge. */
.hero-slide figcaption{
  position:absolute; left:12px; bottom:12px; max-width:calc(100% - 24px);
  padding:5px 12px; border-radius:14px;
  font-family:var(--font-body); font-size:.74rem; font-weight:800; line-height:1.4;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-900); background:rgba(255,255,255,.92);
}
/* Positioned so it paints above the photo layer (z-index 0). */
.hero-inner{position:relative; z-index:1; width:100%; padding-top:64px; padding-bottom:72px;}
.eyebrow{
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem;
  color:var(--teal-700); margin:0 0 .6em;
}
/* Every line of hero text is capped so it wraps before the photo box. */
.hero .eyebrow{max-width:var(--hero-text-w);}
/* Sized so the name breaks as "Monmouth Youth / Communication Club". */
.hero h1{
  font-size:clamp(2rem, 3.2vw, 2.6rem);
  max-width:min(11em, var(--hero-text-w)); margin-bottom:.4em;
}
/* The club's own mission statement, capped like the rest of the hero text
   so it wraps before the photo box. */
.hero-mission{max-width:min(64ch, var(--hero-text-w));}
.hero-mission p{font-size:1.05rem; color:var(--ink); margin:0 0 .75em;}
.hero-mission p:last-child{margin-bottom:0;}

.tentative{font-weight:400; font-style:italic;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:800; font-size:.95rem; line-height:1.2;
  padding:12px 22px; border-radius:999px; border:2px solid transparent;
  text-decoration:none; white-space:nowrap;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary{background:var(--teal-700); color:#fff;}
.btn-primary:hover{background:var(--teal-900);}
.btn:focus-visible{outline:3px solid var(--green-600); outline-offset:2px;}

/* ---------- Sections ---------- */
/* Sections share the header's and hero's container, so every left edge on
   the page lines up. Titles sit on top and the content uses the full width;
   paragraphs stay at a readable length. */
.content-section{padding:34px 0; border-bottom:1px solid var(--line);}
.content-section:last-child{border-bottom:none;}
.section-body{min-width:0;}
.section-body > :first-child{margin-top:0;}

.section-body p{max-width:75ch;}

/* Wide screens put cards side by side; narrow screens stack everything. */
@media (min-width:901px){
  .content-section{padding:48px 0;}
  .news-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  /* Both news cards share a height; the workshop card fills it with its
     date tiles and pins its links to the bottom. */
  .news-feature{display:flex; flex-direction:column;}
  .news-feature .news-links{margin-top:auto;}
  .news-grid .news-item{margin-bottom:0;}
  /* The featured program: description on the left, details on the right. */
  .program-card.is-featured{
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    column-gap:36px; align-items:start;
  }
  .program-card.is-featured .details{margin-top:0;}
  .program-pair{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px;}
  .program-pair > .program-card{margin-top:0;}
}

/* Calendar-style tiles for upcoming workshop dates. */
.date-tiles{display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:1.1em 0 .5em; padding:0;}
.date-tiles time{
  display:flex; flex-direction:column; align-items:center; width:84px; padding:10px 0 12px;
  border-radius:14px; background:var(--sun-100); border:1px solid var(--sun-200); line-height:1.1;
}
.dt-day, .dt-month{font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.dt-day{color:var(--teal-600);}
.dt-num{margin:4px 0 2px; font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--teal-900);}
.dt-month{color:var(--teal-700);}
.news-feature .fine-print{margin:0 0 1.2em;}
.contact-note{display:block; font-size:.86rem; line-height:1.4; color:var(--ink-soft);}

/* Cards: the one surface style shared by news, programs, tiles and people. */
.news-item, .program-card, .tile, .register-card, .person-card, .project-card, .name-chips li{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}

/* News: dated entries, newest first. */
.news-item{padding:22px 24px; margin-bottom:18px;}
.news-item:last-child{margin-bottom:0;}
.news-date{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 .45em;
  font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-600);
}
.news-tag{padding:2px 10px; border-radius:999px; background:var(--sun); color:var(--teal-900);}
.news-item h3{font-size:1.3rem; margin-bottom:.35em;}
.news-links{display:flex; flex-wrap:wrap; gap:4px 24px; margin:0;}
.news-links .text-link{margin-top:0;}

/* Program cards. The one that's enrolling now wears the sunny accent. */
.program-card{margin-top:18px; padding:22px 24px; border-top:5px solid var(--green-600);}
.program-card.is-featured{border-top-color:var(--sun);}
.program-card h3{margin-bottom:.45em;}
.program-card > :last-child{margin-bottom:0;}

.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 1em; padding:0;}
.chips li{
  padding:5px 13px; border-radius:999px; font-size:.88rem; font-weight:700;
  color:var(--teal-900); background:var(--sun-100);
}

/* Coach profile inside a program card. The portrait is alt="" because her
   name sits right beside it. */
.coach{
  display:flex; align-items:flex-start; gap:20px;
  margin-top:1.2em; padding-top:1.2em; border-top:1px solid var(--line);
}
.coach img{
  width:112px; height:112px; flex-shrink:0; border-radius:50%;
  object-fit:cover; border:4px solid var(--sun-100);
}
.coach-name{
  margin:0 0 .4em; font-family:var(--font-display); font-weight:700;
  font-size:1.15rem; line-height:1.25; color:var(--teal-900);
}
.coach-role{
  display:block; margin-top:2px; font-family:var(--font-body); font-size:.76rem;
  font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--teal-600);
}
.coach p:not(.coach-name){font-size:.98rem;}
.coach-offer{
  margin:0; padding:10px 14px; border-radius:10px;
  background:var(--sun-100); color:var(--teal-900);
}

/* Label/value details (dates, format, contact). */
.details{display:grid; grid-template-columns:minmax(8rem, 11rem) 1fr; margin:1.1em 0 0;}
.details dt, .details dd{margin:0; padding:10px 0; border-top:1px solid var(--line);}
.details dt{padding-right:16px; font-size:.86rem; font-weight:800; color:var(--teal-800);}
.details dd{color:var(--ink-soft);}
.details dd a{font-weight:700;}

/* Sub-group heading within a section: extra room above to separate it from
   the group before. */
.sub-head{margin-top:1.8em;}

.fine-print{font-size:.88rem; margin-top:.9em;}

/* Member-led programs as icon tiles. The icon colours rotate so the grid
   reads as a set of different activities rather than a list. */
.tile-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  list-style:none; margin:1.2em 0 0; padding:0;
}
.tile{padding:18px;}
.tile-icon{
  width:44px; height:44px; padding:10px; margin-bottom:12px; border-radius:12px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  color:var(--teal-700); background:var(--sun-100);
}
.tile:nth-child(3n+2) .tile-icon{color:var(--green-800); background:var(--green-50);}
.tile:nth-child(3n) .tile-icon{color:var(--teal-600); background:var(--teal-50);}
.tile h4{font-size:1.02rem; margin:0 0 .3em;}
.tile p{margin:0; font-size:.92rem; line-height:1.5;}

/* People cards. The headshot is alt="" because the name sits right below
   it; repeating the name in alt would read it out twice. */
.people-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
  list-style:none; margin:1.2em 0 0; padding:0;
}
.person-card{display:flex; flex-direction:column; overflow:hidden;}
.person-card img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-bottom:1px solid var(--line);
}
.person-text{padding:10px 12px 12px;}
.person-name{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:.98rem; line-height:1.25; color:var(--teal-900);
}

/* Student tutors: first-name chips with an initial avatar, in two groups. */
.tutor-groups{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:1em;}
.group-label{
  font-family:var(--font-body); font-size:.78rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal-600); margin:0 0 .6em;
}
.name-chips{display:flex; flex-direction:column; gap:8px; list-style:none; margin:0; padding:0;}
.name-chips li{display:flex; align-items:center; gap:12px; padding:10px 14px;}
.avatar{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-size:1.1rem; font-weight:800;
  color:#fff; background:var(--teal-600);
}
.name-chips li:nth-child(even) .avatar{color:var(--teal-900); background:var(--sun);}
.chip-name{display:block; font-weight:800; color:var(--teal-900); line-height:1.3;}
.chip-note{display:block; font-size:.86rem; color:var(--ink-soft); line-height:1.35;}

/* Wellbeing & safety: a soft, sunny callout rather than a formal block. */
.callout{
  margin-top:1.8em; padding:22px 24px; border-radius:var(--radius);
  background:var(--sun-100); border:1px solid var(--sun-200);
}
.callout > :last-child{margin-bottom:0;}

/* Wellbeing & safety: the sunny callout, an advisor card, and the three
   safety practices as small icon cards (reusing the contact-card icon). */
.safety-head{display:flex; align-items:center; gap:14px; margin-bottom:1em;}
.safety-head h3{margin:0 0 .15em;}
.safety-head p{margin:0;}
.safety-icon{width:52px; height:52px; padding:12px;}
.advisor{max-width:500px; margin-bottom:1.3em;}
.safety-list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  list-style:none; margin:0 0 1.2em; padding:0;
}
.safety-list li{
  display:flex; align-items:flex-start; gap:12px; padding:14px;
  background:var(--paper); border:1px solid var(--sun-200); border-radius:12px;
}
.safety-title{display:block; font-weight:800; line-height:1.3; color:var(--teal-900);}
.safety-text{display:block; margin-top:3px; font-size:.9rem; line-height:1.45; color:var(--ink-soft);}
.safety-contact{display:flex; align-items:center; gap:12px;}
.safety-contact a{font-weight:700;}

/* "Say hello" in Join: the sunny callout with contact cards inside. */
.say-hello h3{margin-bottom:.35em;}
.contact-list{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  list-style:none; margin:1em 0 0; padding:0;
}
.contact-list li{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--paper); border:1px solid var(--sun-200); border-radius:12px;
  color:var(--ink-soft);
}
.contact-icon{
  flex-shrink:0; width:40px; height:40px; padding:9px; border-radius:50%;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  color:var(--teal-900); background:var(--sun);
}
.contact-label{
  display:block; font-size:.74rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--teal-600);
}
.contact-list a{font-weight:700; overflow-wrap:anywhere;}

/* Registration call-out in Join. */
.register-card{padding:24px 26px; border-top:5px solid var(--sun);}
.register-card > :last-child{margin-bottom:0;}

/* Project cards: a flex-column link card with the host pinned to the bottom. */
.project-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  list-style:none; margin:1.2em 0 0; padding:0;
}
.project-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(74,52,20,.13);}
.project-card:focus-visible{outline:2px solid var(--green-600); outline-offset:3px;}
.project-card img{width:100%; height:auto; border-bottom:1px solid var(--line);}
.project-name{
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  line-height:1.25; color:var(--teal-900); padding:12px 14px 0;
}
.project-note{padding:5px 14px 0; font-size:.9rem; line-height:1.5; color:var(--ink-soft);}
/* margin-top:auto pins the host line to the bottom so cards of unequal
   description length still line up. */
.project-host{
  margin-top:auto; padding:10px 14px 12px;
  font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-700);
}
.project-card:hover .project-host{color:var(--green-700);}

.text-link{
  display:inline-block; margin-top:1em; font-weight:800; font-size:1rem;
  text-decoration:none; color:var(--teal-700); border-bottom:2px solid var(--sun);
  padding-bottom:1px;
}
.text-link:hover{color:var(--green-700);}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); background:#f4ead9; padding:22px 0;}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-inner p{margin:0; font-size:.88rem; color:var(--ink-soft); font-weight:600;}
.footer-inner .footer-sub{font-weight:400; margin-top:2px;}
.footer-nav{display:flex; gap:20px; flex-wrap:wrap;}
.footer-nav a{text-decoration:none; color:var(--ink-soft); font-size:.88rem; font-weight:700;}
.footer-nav a:hover{color:var(--teal-800);}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .reveal.in-view{opacity:1; transform:none; transition:none;}
  .hero-slide, .hero-slide.is-active{transition:none; --turn:rotate(0deg) scale(1);}
  .hero-slide::after{display:none;}
  .project-card{transition:none;}
  .project-card:hover{transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Responsive ---------- */
/* The header carries the full name, four links, and Register, so it collapses
   to the menu button earlier than the page layout breaks — otherwise labels
   wrap mid-word. */
@media (max-width:1100px){
  /* visibility (delayed on close so the slide-up still plays) keeps the
     collapsed links out of the tab order; max-height alone leaves them
     focusable while invisible. */
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper-soft); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .3s ease, visibility 0s linear .3s;
    border-bottom:1px solid var(--line);
  }
  .main-nav.open{
    max-height:460px; overflow-y:auto; visibility:visible;
    transition:max-height .3s ease;
  }
  .main-nav a{padding:14px 24px; border-top:1px solid var(--line); border-bottom:none;}
  .nav-cta{margin-left:auto;}
  .nav-toggle{display:flex;}
  .brand-full{display:none;}
}
/* Once the layout stacks, there's no longer room for five portrait tiles or
   three program tiles across. */
@media (max-width:900px){
  .safety-list{grid-template-columns:1fr;}
  .people-grid{grid-template-columns:repeat(3,1fr);}
  .tile-grid{grid-template-columns:repeat(2,1fr);}
  /* In two columns, a leftover last tile spans the row instead of sitting
     alone on the left (the three "join in" cards). */
  .tile-grid > .tile:last-child:nth-child(odd){grid-column:1 / -1;}
}
/* Narrow screens: the photo box drops into the flow above the text, full
   width, with the photo centred in it. */
@media (max-width:900px){
  .hero{display:block; min-height:0;}
  .hero-slides{
    position:relative; top:auto; right:auto; bottom:auto; left:auto;
    width:auto; height:58vw; max-height:420px; margin:20px 24px 0;
  }
  .hero-slide{right:auto; left:50%; transform:translate(-50%,-50%) var(--turn);}
  .hero-inner{padding-top:12px; padding-bottom:36px;}
  .hero .eyebrow{max-width:none;}
  .hero h1{max-width:11em;}
  .hero-mission{max-width:60ch;}
}
@media (max-width:600px){
  .wrap{padding:0 18px;}
  .hero-slides{margin:16px 18px 0;}
  .details{grid-template-columns:1fr;}
  .details dd{border-top:0; padding-top:0;}
  .project-grid, .tutor-groups, .contact-list{grid-template-columns:1fr;}
  .safety-head{align-items:flex-start;}
  .tile{padding:14px;}
  /* Five portrait tiles are too small side by side on a phone; switch to
     rows with a thumbnail. */
  .people-grid{grid-template-columns:1fr; gap:10px;}
  .person-card{flex-direction:row; align-items:center;}
  .person-card img{
    width:76px; flex-shrink:0; border-bottom:0; border-right:1px solid var(--line);
  }
  .person-text{padding:8px 14px;}
  .news-item, .program-card, .register-card, .callout{padding:18px;}
  /* Phone photos are small: a lighter, normal-case title keeps long ones
     like "AI Mentorship (conference presentation)" to a single line. */
  .hero-slide figcaption{
    left:8px; bottom:8px; max-width:calc(100% - 16px); padding:4px 10px;
    font-size:.72rem; letter-spacing:0; text-transform:none;
  }
  .coach{flex-direction:column; gap:12px;}
  .coach img{width:96px; height:96px;}
}