/* ============================================================
   PATRICIAN YOUTH CENTRE - Design System
   Palette: cream base, deep plum ink, purple, teal, pink.
   Green is accent-only. No yellow. No orange.
   ============================================================ */

:root {
  --cream: #FAF4EA;
  --cream-2: #F3EADB;
  --ink: #2E2440;
  --purple: #6C3FC5;
  --purple-deep: #4B2A8C;
  --teal: #1E9E9B;
  --teal-deep: #157370;
  --pink: #F27FAB;
  --pink-soft: #FAD7E4;
  --pink-deep: #C74B7E;
  --green: #3D995B;
  --green-deep: #2C7444;
  --green-tint: #E2F1E7;
  --green-accent: #3D995B;
  --white: #FFFDF9;

  --radius: 18px;      /* inner cards, photos, captions */
  --radius-lg: 28px;
  --radius-xl: 44px;
  --shadow-card: 0 10px 30px rgba(46, 36, 64, 0.10);
  --shadow-lift: 0 18px 44px rgba(46, 36, 64, 0.16);

  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Figtree", sans-serif;

  --wrap: 1180px;
  --block-gap: 16px;
  --block-radius: 30px;
  /* Inset of copy from the inside edge of a block. The header uses it too, so
     the logo stays aligned with the hero text at every window width. */
  --copy-inset: clamp(28px, 5vw, 68px);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.01em;
  /* balance stops a heading dropping a single word onto its own line */
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

.display {
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  font-weight: 800;
  text-transform: uppercase;
}

h2.section-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

h3 { font-size: 1.35rem; font-weight: 800; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  opacity: 0.85;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 8px;
  border-radius: 8px;
  background: currentColor;
  opacity: 0.85;
}

.lede { font-size: 1.16rem; max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .35s var(--ease-bounce), box-shadow .3s ease, background .25s ease;
  will-change: transform;
}
.btn-primary { background: var(--green); color: var(--white); box-shadow: 0 8px 22px rgba(61, 153, 91, .35); }
.btn-primary:hover { background: var(--green-deep); box-shadow: 0 14px 30px rgba(61, 153, 91, .4); }
.btn-teal { background: var(--pink-deep); color: var(--white); box-shadow: 0 8px 22px rgba(199, 75, 126, .32); }
.btn-teal:hover { background: #A93A67; }
.btn-ghost { background: transparent; color: var(--ink); border: 2.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.btn .arrow { transition: transform .3s var(--ease-bounce); display: inline-block; }
.btn:hover .arrow { transform: translateX(5px) rotate(-8deg); }

/* ---------- Announcement bar ---------- */
.announce {
  display: block;
  background: var(--pink-deep);
  color: var(--white);
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  padding: 11px 20px;
  text-decoration: none;
}
.announce strong { text-transform: uppercase; letter-spacing: .06em; }
.announce .arrow { display: inline-block; transition: transform .3s var(--ease-bounce); }
.announce:hover .arrow { transform: translateX(5px); }

/* ---------- Coloured blocks ----------
   No outer frame. Every coloured section is its own rounded block inset from
   the page edge, sitting on the one cream background. Cream sections stay open
   and full width so the coloured ones read as the blocks. */
.hero,
section.band.band-pink,
section.band.band-green,
section.band.band-teal,
section.band.band-cream2 {
  margin-left: var(--block-gap);
  margin-right: var(--block-gap);
  border-radius: var(--block-radius);
}
footer.site-footer {
  margin: var(--block-gap);
  border-radius: var(--block-radius);
}

/* ---------- Header ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* The header sits on the page's own cream so it blends into the
     background. It stays opaque, so content scrolling under the sticky
     header is hidden rather than showing through the menu. */
  background: var(--cream);
}
/* Inner padding of --block-gap plus --copy-inset keeps the logo aligned with
   the copy inside the inset blocks below, at every width. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px calc(var(--block-gap) + var(--copy-inset));
  max-width: none;
  margin: 0;
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo .logo-mark { width: 40px; height: 40px; flex: none; }
.logo span em { font-style: normal; color: var(--green-deep); }
.logo span .teal { color: var(--ink); }

nav.main-nav { display: flex; align-items: center; gap: 6px; }
nav.main-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 9px 15px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, transform .3s var(--ease-bounce);
}
nav.main-nav a:hover { background: rgba(61, 153, 91, .12); transform: translateY(-2px); }
nav.main-nav a.active { background: var(--ink); color: var(--cream); }
nav.main-nav a.nav-cta { background: var(--pink); color: var(--ink); margin-left: 8px; }
nav.main-nav a.nav-cta:hover { background: var(--green); color: var(--white); }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle svg { width: 30px; height: 30px; }

/* ---------- Hero (home only) ----------
   One rounded block with the video (or, without it, the photo slideshow)
   filling it as a background, and the copy over the left side on a dark
   gradient. The green stays underneath as the colour while media loads.
   .page-hero on the other pages is unaffected. */
.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--green-deep);
  color: var(--cream);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
  z-index: 2;
  /* Override .wrap so the block runs edge to edge. */
  max-width: none;
  padding: 0;
  min-height: min(84vh, 740px);
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 76px var(--copy-inset);
}
/* Hold the copy to a readable measure on wide screens without shrinking the panel. */
.hero-copy > * { max-width: 38rem; position: relative; z-index: 2; }
/* Over moving footage the gradient does most of the work; the shadow catches
   the odd bright frame behind a letter. */
.hero h1, .hero .lede { text-shadow: 0 2px 18px rgba(30, 22, 44, .45); }
.hero h1, .hero .lede { color: var(--cream); }
.hero .display { font-size: clamp(2.4rem, 4vw, 4.4rem); }
.hero h1 span.hl-green { color: #8BDCA4; }
.hero h1 span.hl-teal { color: var(--pink); }
.hero .lede { margin: 26px 0 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* The green primary button would vanish into the panel, so invert it here. */
.hero .btn-primary { background: var(--cream); color: var(--ink); box-shadow: 0 8px 22px rgba(20, 50, 32, .28); }
.hero .btn-primary:hover { background: var(--white); box-shadow: 0 14px 30px rgba(20, 50, 32, .34); }
.hero .btn-ghost { border-color: var(--cream); color: var(--cream); }
.hero .btn-ghost:hover { background: var(--cream); color: var(--ink); }
/* The badge is white, so its text must not inherit the panel's cream. It is also
   a flex child now, hence align-self or it stretches the full column width. */
.hero .hero-badge { color: var(--ink); align-self: flex-start; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  margin-bottom: 22px;
  transform: rotate(-2deg);
}

.hero-visual { position: absolute; inset: 0; z-index: 0; display: flex; }
.hero-photo {
  /* Fills the whole block behind the copy; the block's own rounding and
     overflow clip it. */
  border-radius: 0;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--purple) 0%, var(--green-deep) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: none;
}
/* Stickers sit over the photo, pulled inside its edges so nothing clips.
   They are white, so their text must not inherit the hero panel's cream. */
/* Legibility gradient: heavy behind the copy on the left, clear by two thirds
   across so the faces in the footage stay bright. Above the media, below the
   pause button (5). */
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(30, 22, 44, .78) 0%, rgba(30, 22, 44, .55) 34%, rgba(30, 22, 44, .12) 66%, rgba(30, 22, 44, 0) 100%),
    linear-gradient(0deg, rgba(30, 22, 44, .25) 0%, rgba(30, 22, 44, 0) 30%);
}
.hero-photo .photo-note {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85); font-weight: 700; text-align: center; padding: 30px;
  font-size: .95rem;
}
.sticker {
  position: absolute;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 5px 6px 0 var(--ink);
  z-index: 3;
  transition: transform .4s var(--ease-bounce);
}
.sticker:hover { transform: rotate(0deg) scale(1.06) !important; }
.sticker small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

/* ---------- Squiggles (the signature) ---------- */
.squiggle {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
/* Copy always sits above the decoration. Without this the absolutely
   positioned squiggles paint over section headings. */
.wrap { position: relative; z-index: 1; }
@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
.floaty { animation: floaty 7s ease-in-out infinite; }
.floaty.slow { animation-duration: 10s; }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: 15px 0;
  transform: rotate(-1.2deg);
  margin: 0 -20px;
  width: calc(100% + 40px);
}
.marquee-track {
  display: flex;
  gap: 44px;
  white-space: nowrap;
  width: max-content;
  animation: marquee 28s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.02rem;
  letter-spacing: .04em;
}
.marquee-track .dot { color: var(--pink); }
.marquee-track .dot:nth-of-type(3n) { color: var(--teal); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Sections ---------- */
/* overflow: clip, not hidden: hidden would make the band a scroll container and
   silently kill position: sticky inside it (the timeline years). clip crops the
   squiggles identically without that side effect. */
section.band { position: relative; padding: 96px 0; overflow: clip; }
.band-green { background: var(--green-deep); color: var(--cream); }
.band-green .eyebrow { color: var(--pink-soft); }
.band-teal { background: var(--green-deep); color: var(--cream); }
.band-teal .eyebrow { color: var(--pink-soft); }
.band-pink { background: var(--pink-soft); }
.band-cream2 { background: var(--cream-2); }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 46px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  color: var(--ink);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease-bounce), box-shadow .35s ease;
  position: relative;
}
.card:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--shadow-lift); }
.card:nth-child(even):hover { transform: translateY(-8px) rotate(.6deg); }
.card .card-icon {
  width: 74px; height: 74px;
  margin-bottom: 20px;
  transition: transform .45s var(--ease-bounce);
}
.card:hover .card-icon { transform: rotate(-6deg) scale(1.1); }
.card h3 { margin-bottom: 10px; text-transform: uppercase; }
.card p { font-size: .98rem; opacity: .88; }
.card .tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.tag-purple { background: rgba(108,63,197,.12); color: var(--purple); }
.tag-teal { background: rgba(30,158,155,.14); color: var(--teal-deep); }
.tag-pink { background: rgba(242,127,171,.2); color: #B3466F; }
.tag-green { background: rgba(61,153,91,.14); color: var(--green-deep); }
.tag-ink { background: rgba(46,36,64,.1); color: var(--ink); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 50px; }
.stat {
  color: var(--ink);
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  box-shadow: 6px 7px 0 var(--ink);
  transition: transform .35s var(--ease-bounce), box-shadow .35s ease;
}
.stat:hover { transform: translate(-3px, -5px); box-shadow: 10px 12px 0 var(--ink); }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; }
.stat:nth-child(1) .num { color: var(--green-deep); }
.stat:nth-child(2) .num { color: var(--pink-deep); }
.stat:nth-child(3) .num { color: var(--purple); }
.stat:nth-child(4) .num { color: var(--ink); }
.stat .label { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; opacity: .8; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.flip > .split-media { order: 2; }
.split-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3.4;
  box-shadow: var(--shadow-lift);
}
.hero-photo img, .split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
/* Hero slideshow: only .on is visible, the rest wait at zero opacity. The first
   slide carries .on in the markup so it shows with no JS and under reduced
   motion, where the rotation never starts. */
.hero-photo img { opacity: 0; transition: opacity .9s ease; }
.hero-photo img.on { opacity: 1; }
/* Hero video: sits over the slides and fades in once it is actually playing
   (.has-video, set by the script). The pause button only shows with it. */
.hero-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity .9s ease; }
.hero-photo.has-video video { opacity: 1; }
.hero-video-btn {
  position: absolute; left: 20px; bottom: 20px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(46,36,64,.55); color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.hero-video-btn svg { fill: currentColor; }
.hero-video-btn:hover { background: rgba(46,36,64,.8); }
.hero-video-btn:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.hero-photo.has-video .hero-video-btn { display: flex; }
.hero-video-btn .i-play, .hero-video-btn[aria-pressed="true"] .i-pause { display: none; }
.hero-video-btn[aria-pressed="true"] .i-play { display: block; }
.split-media .ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: rgba(255,255,255,.88); font-weight: 700; padding: 28px; font-size: .95rem;
}
.ph-green { background: linear-gradient(140deg, var(--green), var(--green-deep)); }
.ph-teal { background: linear-gradient(140deg, var(--green), var(--green-deep)); }
.ph-pink { background: linear-gradient(140deg, var(--pink), #C74B7E); }
.ph-ink { background: linear-gradient(140deg, #453763, var(--ink)); }

/* ---------- Timetable (What's On) ---------- */
.timetable { display: grid; gap: 18px; margin-top: 44px; }
.day-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease-bounce), box-shadow .3s ease;
}
.day-row:hover { transform: translateX(8px); box-shadow: var(--shadow-lift); }
.day-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.day-name .day-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 9px; flex: none; }
.sessions { display: flex; flex-direction: column; gap: 14px; }
.session { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; }
.session .time { font-weight: 800; font-size: .92rem; color: var(--green-deep); }
.session .what strong { display: block; font-size: 1.02rem; }
.session .what span { font-size: .88rem; opacity: .75; }

/* ---------- Notice ---------- */
.notice {
  color: var(--ink);
  background: var(--pink-soft);
  border: 2px dashed #C74B7E;
  border-radius: var(--radius);
  padding: 20px 26px;
  font-size: .95rem;
  margin-top: 30px;
}
.notice strong { color: #B3466F; }

/* ---------- Accordion-ish detail lists ---------- */
.detail-list { margin-top: 34px; display: grid; gap: 14px; }
.detail-item {
  background: var(--white);
  border-radius: 20px;
  padding: 22px 26px;
  box-shadow: var(--shadow-card);
}
.detail-item h4 { font-size: 1.08rem; text-transform: uppercase; margin-bottom: 6px; }
.detail-item p { font-size: .95rem; opacity: .88; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; margin-top: 44px; align-items: start; }
.contact-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
}
.contact-line { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1.5px solid rgba(46,36,64,.08); }
.contact-line:last-child { border-bottom: none; }
.contact-line .ci { width: 46px; height: 46px; flex: none; }
.contact-line strong { display: block; text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; opacity: .65; }
.contact-line a { font-weight: 700; text-decoration: none; }
.contact-line a:hover { color: var(--green-deep); }

form.contact-form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  border: 2px solid rgba(46,36,64,.18);
  border-radius: 16px;
  background: var(--white);
  transition: border-color .25s ease, box-shadow .25s ease, transform .3s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(61,153,91,.16);
  transform: translateY(-1px);
}
textarea { min-height: 130px; resize: vertical; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--green-deep);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 30px;
  align-items: center;
}
.cta-band h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); text-transform: uppercase; }
.cta-band p { opacity: .92; margin-top: 12px; }
.cta-band .btn-primary { background: var(--pink); color: var(--ink); box-shadow: none; }
.cta-band .btn-primary:hover { background: var(--white); }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 70px 0 34px;
  margin-top: 100px;
  position: relative;
  overflow: hidden;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; position: relative; z-index: 2; }
.footer-grid h4 { text-transform: uppercase; font-size: .95rem; margin-bottom: 16px; color: var(--pink); }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { text-decoration: none; opacity: .85; transition: opacity .2s ease, padding-left .25s ease; }
.footer-grid a:hover { opacity: 1; padding-left: 5px; color: var(--pink); }
.footer-mission { font-size: .95rem; opacity: .82; max-width: 40ch; margin-top: 14px; }
.footer-bottom {
  border-top: 1px solid rgba(250,244,234,.15);
  margin-top: 50px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .84rem;
  opacity: .7;
  position: relative;
  z-index: 2;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s var(--ease-bounce); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ---------- Person card (safeguarding officers) ----------
   Circular portrait beside the name, ring in the card's own tag colour. */
.card.card-person { display: grid; grid-template-columns: 84px 1fr; gap: 20px; align-items: center; }
.card-person .person-photo {
  width: 84px; height: 84px; border-radius: 50%;
  overflow: hidden; flex: none;
  border: 3px solid var(--green); box-shadow: var(--shadow-card);
}
.card-person.person-deputy .person-photo { border-color: var(--pink-deep); }
.card-person .person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) {
  .card.card-person { grid-template-columns: 64px 1fr; gap: 16px; }
  .card-person .person-photo { width: 64px; height: 64px; }
}

/* ---------- History timeline (About) ----------
   Centre spine, cards alternating left and right, sticky years on the opposite
   side, and a scroll-driven ring (built in main.js, motion-gated) that travels
   the spine and locks onto each event dot. Cards use .reveal with directional
   overrides so they slide in from their own side. */
.timeline { position: relative; margin-top: 46px; display: flex; flex-direction: column; gap: 34px; }
.timeline::before {
  content: ""; position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 16px; bottom: 46px; width: 5px;
  border-radius: 5px; background: rgba(46, 36, 64, .12);
}
.tl-entry { display: grid; grid-template-columns: 1fr 96px 1fr; position: relative; }
.tl-year {
  grid-column: 3; grid-row: 1;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1;
  color: var(--green-deep);
  position: sticky; top: 96px; align-self: start;
  padding-top: 4px; letter-spacing: -0.01em;
}
.tl-entry:nth-child(even) .tl-year { grid-column: 1; justify-self: end; text-align: right; color: var(--pink-deep); }
/* the event dot, on the spine */
.tl-entry::after {
  content: ""; position: absolute;
  left: 50%; transform: translateX(-50%); top: 12px;
  width: 13px; height: 13px;
  border-radius: 50%; background: var(--green-deep);
  border: 3px solid var(--cream-2);
  z-index: 2;
}
.tl-entry:nth-child(even)::after { background: var(--pink-deep); }
.tl-card {
  grid-column: 1; grid-row: 1;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 28px 30px;
  color: var(--ink); /* white card on a coloured band: force ink per contrast rule */
}
.tl-entry:nth-child(even) .tl-card { grid-column: 3; }
/* slow directional reveals: each card slides in from its own side */
.tl-entry:nth-child(odd) .tl-card.reveal { transform: translateX(-52px) scale(.95); }
.tl-entry:nth-child(even) .tl-card.reveal { transform: translateX(52px) scale(.95); }
.tl-entry .tl-card.reveal { transition: opacity .8s ease, transform .95s var(--ease-bounce); }
.tl-entry .tl-card.reveal.in { transform: none; }
.tl-card h3 { margin-bottom: 10px; }
.tl-card p { font-size: .95rem; }
.tl-card p + p { margin-top: 12px; }
.tl-card blockquote {
  margin: 16px 0 0; padding: 4px 0 4px 18px;
  border-left: 4px solid var(--green); border-radius: 2px;
  font-weight: 600; font-style: italic; color: var(--green-deep);
}
.tl-card blockquote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; font-size: .82rem; color: var(--ink); opacity: .7; }
.tl-photo { position: relative; margin: 18px 0 0; border-radius: 16px; overflow: hidden; }
/* Fixed height, not max-height: before a lazy image loads it has no size,
   the page measures shorter, and the reveal observer thinks the cards are
   already in view and shows them all instantly. */
.tl-photo img { display: block; width: 100%; height: 280px; object-fit: cover; object-position: 50% 32%; }
/* the filled portion of the spine, trailing the marker (created by main.js) */
.tl-fill {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 16px; width: 5px; height: 0;
  border-radius: 5px; background: var(--green-deep); /* fallback; JS paints segments */
  pointer-events: none; z-index: 1;
}
/* the travelling ring: created by main.js, so it never exists under reduced motion */
.tl-marker {
  position: absolute; left: 50%; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(46, 36, 64, .3);
  pointer-events: none; z-index: 3;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.tl-marker.locked { border-color: var(--green-deep); box-shadow: 0 0 0 5px rgba(44, 116, 68, .14); }
.tl-marker.locked.pink { border-color: var(--pink-deep); box-shadow: 0 0 0 5px rgba(199, 75, 126, .14); }
@media (max-width: 860px) {
  /* Phones: spine moves to a left rail, year sits above its card in flow. */
  .timeline::before { left: 22px; transform: translateX(-50%); }
  .tl-fill { left: 22px; }
  .tl-entry { grid-template-columns: 46px 1fr; grid-template-rows: auto auto; }
  .tl-year, .tl-entry:nth-child(even) .tl-year {
    grid-column: 2; grid-row: 1; justify-self: start; text-align: left;
    position: static; font-size: 1.15rem; padding: 0 0 8px;
  }
  .tl-entry::after { left: 22px; top: 4px; }
  .tl-card, .tl-entry:nth-child(even) .tl-card { grid-column: 2; grid-row: 2; }
  .tl-card { padding: 22px 20px; }
  .tl-photo img { height: 220px; }
  .tl-marker { left: 22px; width: 30px; height: 30px; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; padding: 74px 0 60px; overflow: hidden; }
.page-hero .display { max-width: 14ch; }
.page-hero .lede { margin-top: 20px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; }
  .split.flip > .split-media { order: 0; }
  .card-grid, .card-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { grid-template-columns: 1fr; padding: 46px 34px; }
}
/* The hamburger menu runs up to 980: between 700 and 980 the full menu
   no longer fits beside the logo and wrapped onto two lines. */
@media (max-width: 980px) {
  nav.main-nav {
    position: fixed;
    inset: 70px 16px auto 16px;
    background: var(--white);
    border-radius: 24px;
    box-shadow: var(--shadow-lift);
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    display: none;
    z-index: 70;
  }
  nav.main-nav.open { display: flex; }
  nav.main-nav a { text-align: center; padding: 13px; }
  .menu-toggle { display: block; }
  nav.main-nav { max-width: 420px; margin-left: auto; }
}
@media (max-width: 700px) {
  .card-grid, .card-grid.cols-4, .card-grid.cols-2 { grid-template-columns: 1fr; }
  .day-row { grid-template-columns: 1fr; gap: 10px; }
  .session { grid-template-columns: 1fr; gap: 2px; }
  .form-row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sticker { display: none; }
}

/* Hero stacks below 980. Big type over moving footage is unreadable on a
   narrow screen, so the media becomes a band at the top (the pill floats over
   it) and the copy sits underneath on the solid green, no gradient needed. */
@media (max-width: 980px) {
  /* Tighter inset on small screens. Redefining the variable keeps the header
     and the hero copy in step automatically. */
  :root { --copy-inset: clamp(24px, 6vw, 46px); }
  .header-inner { padding: 10px calc(var(--block-gap) + 16px); }
  .hero-grid { min-height: 0; display: flex; flex-direction: column; }
  .hero-visual { position: relative; inset: auto; order: -1; aspect-ratio: 16 / 10; }
  .hero-copy { padding: 40px var(--copy-inset) 48px; }
  .hero-copy > * { max-width: none; }
  .hero h1, .hero .lede { text-shadow: none; }
  .hero-photo::after { display: none; }
}
@media (max-width: 700px) {
  /* Phones get the vertical cut of the video; a 4:5 window of it keeps faces big. */
  .hero-visual { aspect-ratio: 4 / 5; }
}

/* archive caption */
.media-cap {
  position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 2;
  width: fit-content; max-width: calc(100% - 24px);
  background: rgba(46,36,64,.82); color: var(--cream);
  font-size: .76rem; font-weight: 600; padding: 6px 12px;
  border-radius: 8px;
}

/* Mobile: squiggles out of the text's way */
@media (max-width: 700px) {
  .hero .squiggle { display: none; }
  .page-hero .squiggle { width: 200px !important; opacity: .45; }
  section.band .squiggle { opacity: .45; width: 150px !important; }
}

/* funders strip */
.funders {
  border-top: 1px solid rgba(250,244,234,.15);
  margin-top: 50px;
  padding-top: 30px;
  position: relative;
  z-index: 2;
}
.funders h4 { text-transform: uppercase; font-size: .8rem; letter-spacing: .14em; opacity: .6; margin-bottom: 18px; }
.funders-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.funder {
  background: rgba(250,244,234,.08);
  border: 1px solid rgba(250,244,234,.2);
  border-radius: 14px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: .82rem;
  opacity: .85;
}
.funder { display:flex; align-items:center; min-height:58px; }
.funder img { height: 34px; width: auto; filter: grayscale(1) brightness(10); }

/* ---------- Feastie-style arch photo treatment ---------- */
.arch { border-radius: 999px 999px var(--radius-lg) var(--radius-lg) !important; }
.arch-top { border-radius: 340px 340px var(--radius-lg) var(--radius-lg) !important; }

.cta-band.has-photo { grid-template-columns: 1fr; padding-right: 320px; }
.cta-photo {
  position: absolute;
  right: 36px;
  bottom: -34px;
  width: 250px;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  transform: rotate(3deg);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  transition: transform .5s var(--ease-bounce);
}
.cta-band.has-photo:hover .cta-photo { transform: rotate(0deg) translateY(-8px); }
.cta-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }

@media (max-width: 980px) {
  .cta-band.has-photo { padding-right: 34px; }
  .cta-photo { display: none; }
}

/* ---------- Photo cards (Feastie-style colour blocks) ---------- */
/* ---------- Programme cards (home) ----------
   Photo fills the top of the card; the coloured panel rises over it with a
   soft wave, and holds the tag, title and copy. Alternate cards mirror the
   wave so the row does not look stamped out. */
.pcard {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--cream);
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease-bounce), box-shadow .35s ease;
}
.pcard:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.pcard .pcard-photo { order: -1; aspect-ratio: 4 / 3.4; overflow: hidden; background: rgba(46,36,64,.15); }
.pcard .pcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.pcard-body { position: relative; flex: 1; padding: 6px 30px 32px; background: inherit; }
.pcard-body::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 46px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V16C14 2 34 0 50 14S82 34 100 20V40Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V16C14 2 34 0 50 14S82 34 100 20V40Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.pcard:nth-child(even) .pcard-body::before { transform: scaleX(-1); }
.pcard h3 { margin-bottom: 10px; text-transform: uppercase; color: inherit; }
.pcard p { font-size: .95rem; opacity: .92; }
.pcard .tag {
  display: inline-block;
  background: rgba(250,244,234,.18);
  color: inherit;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.pc-green { background: var(--green-deep); }
.pc-purple { background: var(--purple-deep); }
.pc-pink { background: var(--pink-deep); }
.pc-ink { background: var(--ink); }
@media (max-width: 700px) {
  .pcard .pcard-photo { aspect-ratio: 4 / 3; }
  .pcard-body { padding: 4px 24px 28px; }
  .pcard-body::before { height: 36px; }
}

/* ---------- Nav dropdown ---------- */
.nav-item { position: relative; display: inline-flex; }
.nav-item > a::after { content: " \25BE"; font-size: .7em; opacity: .6; }
.sub-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--white); border-radius: 16px;
  box-shadow: var(--shadow-lift);
  padding: 8px; min-width: 175px;
  display: none; flex-direction: column; gap: 2px; z-index: 90;
}
/* Invisible bridge across the 6px gap above the menu. Without it the pointer
   leaves .nav-item on the way down and the menu closes before it can be used.
   10px covers the gap plus the 2px lift the parent link takes on hover. */
.sub-menu::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -10px; height: 10px;
}
.sub-menu a { text-align: left; }
.nav-item:hover .sub-menu, .nav-item:focus-within .sub-menu { display: flex; }
@media (max-width: 980px) {
  .nav-item { display: block; }
  .nav-item > a { display: block; }
  .sub-menu { position: static; display: flex; box-shadow: none; padding: 0 0 0 18px; background: transparent; }
}

/* ---------- Age filter ---------- */
.age-filter {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  box-shadow: var(--shadow-card);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  position: sticky; top: 86px; z-index: 40;
}
.age-filter .q { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; margin-right: 6px; }
.age-btn {
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 2.5px solid var(--ink); background: transparent; color: var(--ink);
  transition: background .25s ease, color .25s ease, transform .3s var(--ease-bounce);
}
.age-btn:hover { transform: translateY(-2px); }
.age-btn[aria-pressed="true"] { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.age-btn.reset[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
section[data-age].age-hidden { display: none; }


/* The wordmark wrapped to two lines on a phone, leaving a broken lockup and a
   wide gap before the menu button. Shrink it so it stays on one line. */
@media (max-width: 560px) {
  .logo { font-size: .82rem; gap: 8px; letter-spacing: .01em; }
  .logo .logo-mark { width: 32px; height: 32px; }
  .logo span { white-space: nowrap; }
  /* two footer columns do not fit a phone: the links ran off the right edge */
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Long-form text pages (privacy) */
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.45rem; margin: 40px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose .small { font-size: .9rem; opacity: .7; }

/* ---------- About: archive gallery ----------
   A sideways strip of archive scans under the history timeline. Scroll-snap
   swipe on touch, arrow buttons and keyboard on desktop. It never moves on its
   own (motion stays minimal). Photos keep their own shape at a shared height. */
.archive { margin-top: 80px; }
.archive-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.archive-head p { max-width: 36rem; }
.archive-nav { display: flex; gap: 10px; flex: none; }
.archive-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2.5px solid var(--ink); background: var(--white); color: var(--ink);
  font-size: 1.25rem; font-weight: 700; cursor: pointer; line-height: 1;
  transition: background .25s ease, color .25s ease;
}
.archive-btn:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
.archive-btn:disabled { opacity: .3; cursor: default; }
.archive-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px 2px 10px; scrollbar-width: none;
}
.archive-track::-webkit-scrollbar { display: none; }
.archive-track:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 4px; border-radius: var(--radius); }
.archive-item { flex: none; margin: 0; scroll-snap-align: start; max-width: 86vw; width: min-content; }   /* the photo sets the width; the caption wraps to it */
.archive-item img { display: block; height: clamp(220px, 28vw, 340px); width: auto; max-width: 86vw; object-fit: cover; border-radius: var(--radius); }
.archive-item figcaption { font-size: .85rem; font-weight: 600; margin-top: 10px; opacity: .8; }
@media (max-width: 700px) {
  .archive { margin-top: 60px; }
  .archive-nav { display: none; }          /* phones swipe */
  /* Short enough that the next photo peeks in at the edge, so it reads as swipeable. */
  .archive-item img { height: 170px; }
  /* Run the strip to the block's edge (out through .wrap's 28px padding) so
     the peeking photo is actually visible, while the first still lines up
     with the copy. */
  .archive-track { margin: 0 -28px; padding-left: 28px; padding-right: 28px; scroll-padding-left: 28px; }
}

/* ---------- Home: pill menu inside the hero block ----------
   Home only (body.hero-nav, from `heroNav: true` in the page's front matter).
   The header keeps its height for sticky positioning but pulls the hero up
   underneath it with a matching negative margin, so the white pill floats
   inside the top of the hero. It stays sticky, so it floats over the page on
   scroll. Every other page keeps the plain cream header. */
body.hero-nav { --nav-top: calc(var(--block-gap) + 14px); --pill-h: 60px; --nav-h: calc(var(--nav-top) + var(--pill-h)); }
body.hero-nav header.site-header {
  background: transparent;
  /* Padding, not a margin on the pill: a margin would collapse through the
     header and the pill would stick flush to the top edge on scroll. */
  padding-top: var(--nav-top);
  margin-bottom: calc(-1 * var(--nav-h));
  pointer-events: none;             /* the clear strip around the pill must not block clicks */
}
body.hero-nav .header-inner {
  pointer-events: auto;
  margin: 0 calc(var(--block-gap) + 14px);
  height: var(--pill-h); box-sizing: border-box;
  padding: 0 9px 0 20px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(46, 36, 64, .14);
}
body.hero-nav .hero { margin-top: var(--block-gap); }
/* Room for the pill above the copy. */
body.hero-nav .hero-copy { padding-top: calc(76px + var(--nav-h) - var(--block-gap)); }
@media (max-width: 980px) {
  body.hero-nav { --nav-top: calc(var(--block-gap) + 10px); --pill-h: 52px; }
  body.hero-nav .header-inner { margin: 0 calc(var(--block-gap) + 10px); padding: 0 6px 0 14px; }
  body.hero-nav .hero-copy { padding-top: 40px; }   /* the pill sits over the media band now, not the copy */
}
@media (max-width: 980px) {
  body.hero-nav nav.main-nav { top: calc(var(--nav-h) + 8px); }
}

/* ---------- Safeguarding page ----------
   The urgent contacts are the one coloured block; everything else reads as
   plain text on cream. */
.sg-help .section-title { color: var(--cream); max-width: 20ch; }
.sg-help a { color: inherit; }
.sg-emergency { margin-top: 14px; font-size: 1.12rem; font-weight: 600; }
.sg-emergency a { font-weight: 800; }
.sg-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 34px; }
.sg-contact { border-top: 2px solid rgba(250, 244, 234, .35); padding-top: 20px; min-width: 0; }
.sg-contact h3 { text-transform: uppercase; color: var(--pink-soft); font-size: 1.05rem; letter-spacing: .02em; }
.sg-who { margin-top: 6px; opacity: .9; }
.sg-num { display: inline-block; margin-top: 8px; font-family: var(--font-display, 'Bricolage Grotesque', sans-serif); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; text-decoration: none; font-variant-numeric: tabular-nums; }
.sg-num:hover { text-decoration: underline; }
.sg-ooh { margin-top: 8px; font-size: .95rem; opacity: .9; }
.sg-ooh a { font-weight: 700; }
.sg-centre { margin-top: 34px; max-width: 62ch; font-size: .98rem; opacity: .92; }
.sg-centre a { font-weight: 700; white-space: nowrap; }
.sg-body { padding: 80px 0 96px; }
.sg-statement { margin-top: 64px; }
@media (max-width: 700px) {
  .sg-contacts { grid-template-columns: 1fr; gap: 26px; }
  .sg-body { padding: 56px 0 72px; }
  .sg-statement { margin-top: 48px; }
}

/* ---------- Youth Theatre (term time page) ---------- */
.yt-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.yt-copy { min-width: 0; }
.yt-note { margin-top: 16px; font-size: .9rem; opacity: .8; }
.yt-note a { font-weight: 700; white-space: nowrap; }
.yt-card { color: var(--ink); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 10px 30px; min-width: 0; }
.yt-row { padding: 20px 0; border-bottom: 2px dashed rgba(199, 75, 126, .35); }
.yt-row:last-child { border-bottom: 0; }
.yt-ages { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.yt-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-deep); }
.yt-val { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; text-wrap: balance; }
.yt-show .yt-val { color: var(--purple-deep); }
@media (max-width: 860px) {
  .yt-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 420px) {
  .yt-ages { grid-template-columns: 1fr; gap: 14px; }
  .yt-card { padding: 6px 22px; }
}
.yt-ages .yt-val { font-size: 1.1rem; }