/* ==========================================================================
   Ma-Tšhabeng Voices Film Festival — site stylesheet
   Brand: green #094D26, yellow #F7C202, white #FFFFFF.
   Type:  Poppins (local files in fonts/), with system fallbacks.
   Notes: South African English. Body colour is brand green per the brief.
   ========================================================================== */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: block; /* block, not swap: no fallback-to-Poppins reflow (review fix 4) */
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
}

/* ----- Design tokens ----- */
:root {
  --green: #094D26;
  --green-dark: #063517;
  --green-50: #e6efe9;
  --yellow: #F7C202;
  --yellow-dark: #b8900c;
  --yellow-50: #fef4d6;
  --white: #FFFFFF;
  --ink: #1a1a1a;
  --muted: #595959;
  --line: #d8d8d8;
  --max: 1140px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 6px;
  --shadow: 0 2px 14px rgba(9, 77, 38, 0.08);
  --focus: 3px solid var(--yellow);
  --focus-offset: 3px;
  /* Part 5: one section per screen. Use a FIXED header height (66px) for all
     section-height calculations so there is zero layout shift when the header
     shrinks on scroll. The header element itself is always 66px tall; only
     the logo size and shadow change. (Previously --header-h switched between
     86px and 66px on scroll, which caused CLS 0.014–0.055.) */
  --header-h: 66px;
  --footer-h: 0px;
}

/* ----- Reset / base ----- */
* { box-sizing: border-box; }
html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--green-dark); text-decoration-thickness: 2px; }
h1, h2, h3, h4 { color: var(--green); line-height: 1.25; margin: 0 0 0.75rem; font-weight: 600; }
h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); }
h3 { font-size: 1.1875rem; }
p  { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin: 0.25rem 0; }
:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}
.on-green :focus-visible,
.footer-yellow :focus-visible {
  outline-color: var(--white);
}

/* On yellow backgrounds (footer, distinctive) use a darker outline */
.distinctive :focus-visible,
.footer-yellow :focus-visible {
  outline-color: var(--green);
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ----- Layout helpers ----- */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section-intro { max-width: 70ch; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--yellow);
  color: var(--green);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ----- Yellow highlighter stripe behind headings ----- */
.stripe {
  display: inline-block;
  font-weight: 700;
  padding: 0 0.4rem 0.05em;
  background: linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 92%, transparent 92%);
  /* Fallback for browsers without linear-gradient: */
  background-color: var(--yellow);
  color: var(--green);
}
/* On the green Vision/Mission block, the heading text sits on a yellow stripe
   over a green background. White text on yellow fails WCAG (1.66:1). Keep the
   text green so the contrast is 6.03:1 (passes AAA for large text). */
.on-green .stripe { color: var(--green); }
.on-green h1, .on-green h2 { color: var(--white); }
/* The stripe span itself is green-on-yellow, but the surrounding heading text
   (outside the stripe) stays white on green. */

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  background: var(--white);
  border-bottom: 6px solid var(--yellow);
  position: sticky;
  top: 0;
  z-index: 30;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.25rem;
  min-height: 60px; /* 66px total (60px inner + 6px border-bottom) — fixed, no shift */
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  height: 44px; /* Fixed — no shift on scroll */
  width: auto;
  transition: height 0.2s ease-out;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--green);
  background: var(--white);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--green);
  position: absolute;
  left: 10px;
  top: 20px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bar:nth-child(1) { transform: translateY(-7px); }
.nav-toggle-bar:nth-child(2) { transform: translateY(0); }
.nav-toggle-bar:nth-child(3) { transform: translateY(7px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(0) rotate(-45deg); }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--green);
  border-radius: var(--radius);
  border: 2px solid transparent;
}
.site-nav a:hover { background: var(--yellow-50); }
.site-nav a[aria-current="page"] {
  background: var(--yellow);
  color: var(--green-dark);
}

/* Mobile nav: collapsible menu.
   The .nav-toggle button is only shown when JS is available (html.js class)
   because clicking it does nothing without JS. Without JS, the nav stays
   visible as a normal list so the user can still navigate. */
@media (max-width: 800px) {
  html.js .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  html.js .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 6px solid var(--yellow);
    box-shadow: var(--shadow);
    /* Hidden state: invisible to mouse + keyboard when JS has collapsed it */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  html.js .site-nav.is-open { max-height: 70vh; overflow: auto; }
  html.js .site-nav ul { flex-direction: column; padding: 0.5rem var(--gutter) 1rem; }
  html.js .site-nav a { width: 100%; justify-content: flex-start; }
  /* Without JS: nav is a normal visible list, toggle is hidden. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav ul { flex-direction: column; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--green);
  border-bottom: 6px solid var(--yellow);
  position: relative;
  overflow: hidden;
}
.hero img {
  width: 100%;
  height: auto;
  display: block;
}
/* Hero overlay: on mobile, the overlay is NOT absolutely positioned — it
   flows below the image as a normal block. This prevents the overlay text
   from being clipped when the hero image is short (4:1 aspect ratio at 390px
   = 95px tall). On desktop (>= 1024px), the hero is a full-screen flex
   container and the overlay is absolutely positioned at the bottom. */
.hero-overlay {
  background: var(--green);
  color: var(--white);
  padding: 1.5rem var(--gutter);
}
.hero-overlay .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.hero-overlay-text { flex: 1 1 200px; }
.hero-overlay-dates { font-size: 1.125rem; font-weight: 700; margin: 0; }
.hero-overlay-location { font-size: 0.9375rem; opacity: 0.9; margin: 0.25rem 0 0; }
.hero-overlay-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-overlay-buttons .btn {
  background: var(--yellow);
  color: var(--green-dark);
}
.hero-overlay-buttons .btn:hover {
  background: var(--white);
  color: var(--green-dark);
}
.hero-overlay-buttons .btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}
.hero-overlay-buttons .btn-secondary:hover {
  background: var(--white);
  color: var(--green);
}
/* Scroll chevron — hidden on mobile (it overlaps), shown on desktop */
.hero-chevron {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--white);
  font-size: 1.5rem;
  text-decoration: none;
  opacity: 0.7;
}
.hero-chevron:hover { opacity: 1; }

/* On desktop, the hero is a full-screen flex container. The image sits at
   the top (object-fit: contain), and the overlay (dates, location, buttons)
   is centred vertically in the green space below the image. This eliminates
   the "big empty green gap" by centring the overlay content. */
@media (min-width: 1024px) and (min-height: 700px) {
  .hero.snap-section {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
  }
  .hero.snap-section > img {
    width: 100%;
    height: auto;
    max-height: 70%;
    object-fit: contain;
    object-position: center top;
    flex-shrink: 0;
  }
  .hero-overlay {
    position: relative;
    background: var(--green);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem var(--gutter) 1.5rem;
  }
  /* Review fix 1: dates, location and buttons are stacked and centred in the
     green area so no empty band is left under them. */
  .hero-overlay .wrap { flex-direction: column; justify-content: center; text-align: center; gap: 3rem; }
  .hero-overlay-text { flex: 0 0 auto; }
  .hero-overlay-dates { font-size: 3.5rem; line-height: 1.15; }
  .hero-overlay-location { font-size: 1.625rem; margin-top: 0.75rem; }
  .hero-overlay-buttons { justify-content: center; gap: 1rem; }
  .hero-overlay-buttons .btn { padding: 1.1rem 2.5rem; font-size: 1.25rem; }
  .hero-chevron { display: block; }
}

/* ==========================================================================
   Page title (interior pages)
   ========================================================================== */
.page-title {
  padding-block: clamp(2rem, 5vw, 3rem) 1rem;
}
.page-title h1 { margin-bottom: 0.5rem; }
.page-title .section-intro { color: var(--muted); font-size: 1.0625rem; }

/* ==========================================================================
   Home: definition cards
   ========================================================================== */
.defs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-block: 2rem 3rem;
}
.def {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.def-icon {
  height: 56px;
  width: auto;
  margin-bottom: 0.5rem;
}
.def h3 {
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.5rem 0 0.5rem;
}
.def-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}
.def-photo {
  display: block;
  margin-top: 0.75rem;
  width: 100%;
  max-width: 260px;
  border: 8px solid var(--yellow);
}
.def-photo.alt { border-color: var(--green); }
@media (max-width: 900px) { .defs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .defs { grid-template-columns: 1fr; } }

/* ==========================================================================
   Home: distinctive (yellow block)
   ========================================================================== */
.distinctive {
  background: var(--yellow);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.distinctive > .wrap { display: grid; gap: 2rem; }
.distinctive-heading {
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--green-dark);
  margin: 0;
}
.distinctive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.distinctive-item h3 {
  text-align: center;
  font-size: 1.1875rem;
  color: var(--green-dark);
  margin-bottom: 0.5rem;
}
.distinctive-item p { color: var(--ink); }
@media (max-width: 900px) { .distinctive-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Home: vision & mission (green block)
   ========================================================================== */
.on-green {
  background: var(--green);
  color: var(--white);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.on-green h1, .on-green h2, .on-green h3 { color: var(--white); }
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.vm-photo {
  width: 100%;
  display: block;
  border: 8px solid var(--yellow);
}
.vm-text h2 { margin-top: 1.5rem; }
.vm-text h2:first-child { margin-top: 0; }
.vm-text p { color: var(--white); font-size: 1.0625rem; }
@media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ==========================================================================
   Home: jobs & partners
   ========================================================================== */
.jobs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
.jobs-heading {
  font-size: 1.5rem;
  text-align: center;
}
.jobs-text p { color: var(--muted); }
.partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
}
.partner-logo {
  max-height: 90px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 760px) {
  .jobs-grid { grid-template-columns: 1fr; gap: 2rem; }
  .partners { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { margin-top: auto; }
.footer-yellow {
  background: var(--yellow);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.footer-col { color: var(--green-dark); }
.footer-heading {
  color: var(--green-dark);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.contact-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0;
}
.contact-list dt { font-weight: 700; }
.contact-list dd { margin: 0; }
.contact-list a { color: var(--green-dark); display: inline-block; padding-block: 11px; }
.address-lines { list-style: none; margin: 0; padding: 0; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.footer-green {
  background: var(--green);
  color: var(--white);
  padding-block: 1.25rem;
  font-size: 0.875rem;
}
.footer-green p { margin: 0; }
.footer-green a { color: var(--white); }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Programme: tabs + day panels
   ========================================================================== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1.5rem 2rem;
}
.tab {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--green);
  border-radius: 999px;
  background: var(--white);
  color: var(--green);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab:hover { background: var(--yellow-50); }
.tab[aria-selected="true"] {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.day-panels { display: grid; gap: 1.5rem; }
.day {
  border-left: 8px solid var(--yellow);
  padding: 0.5rem 0 0.5rem 1.25rem;
  background: var(--green-50);
  padding-block: 1.25rem;
  padding-right: 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.day-date { font-weight: 600; margin: 0; color: var(--muted); }
.day-date time { color: var(--green); }
.day-title { font-size: 1.375rem; margin: 0.5rem 0 0.75rem; }
.day-summary { color: var(--ink); margin: 0; max-width: 70ch; }

.sessions { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.sessions li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
}
.session-time {
  font-weight: 700;
  background: var(--green);
  color: var(--white);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  min-width: 5.5rem;
  text-align: center;
}
.session-title { font-weight: 600; }
.session-note { color: var(--muted); font-size: 0.9375rem; }

.free-note {
  font-weight: 600;
  background: var(--yellow);
  color: var(--green-dark);
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  margin-top: 1.5rem;
}

/* When a day is hidden by the filter, remove it from the layout */
.day[hidden] { display: none; }

/* ==========================================================================
   Cards (films, masterclasses)
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  padding: 0;
  list-style: none;
  margin: 1.5rem 0;
}
.card {
  border: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.card:nth-child(even) { border-color: var(--yellow-dark); }
.card h3 { margin: 0; }
.card[hidden] { display: none; }

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--green);
  color: var(--white);
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  align-self: flex-start;
}
.badge-feature { background: var(--green-dark); }
.badge-documentary { background: var(--yellow-dark); color: var(--white); }
.badge-short { background: var(--green); }

.film-director, .film-runtime { font-size: 0.9375rem; color: var(--muted); margin: 0; }
.film-synopsis { margin: 0.5rem 0 0; }
.film-day { font-size: 0.875rem; color: var(--muted); margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--line); }

/* ==========================================================================
   Open call page
   ========================================================================== */
.criteria-block { margin-top: 1.5rem; }
.criteria-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.criteria-list li {
  background: var(--green-50);
  padding: 0.625rem 1rem;
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.preference { font-weight: 600; margin-top: 1rem; }

.oc-state { margin-top: 2rem; padding: 1.5rem; border-radius: var(--radius); }
.oc-state[hidden] { display: none; }
.oc-state-before, .oc-state-closed {
  background: var(--green-50);
  border-left: 4px solid var(--green);
}
.oc-state-open {
  background: var(--yellow-50);
  border-left: 4px solid var(--yellow-dark);
}
.oc-state h2 { margin-top: 0; }
.form-status { font-weight: 600; font-size: 1.125rem; margin: 0; }

.setup-note {
  background: var(--yellow);
  color: var(--green-dark);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  margin: 0 0 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--green-dark); color: var(--white); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
/* Disabled button: use a desaturated background instead of opacity so the
   text contrast stays measurable. Effective contrast with this background
   is ~4.5:1 (passes AA for normal text). cursor: not-allowed makes the
   disabled state obvious to mouse users. */
.btn:disabled {
  background: var(--muted);
  color: var(--white);
  cursor: not-allowed;
}
.btn:disabled:hover { background: var(--muted); }
.form-button-row { margin: 0.5rem 0; }
.form-note { color: var(--muted); margin: 0.5rem 0 0; font-size: 0.9375rem; }

/* No-JS note on the open-call page */
.noscript-note {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--green-50);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ==========================================================================
   Masterclasses: day-grouped sections
   ========================================================================== */
.masterclass-day { margin-top: 2rem; }
.masterclass-day:first-of-type { margin-top: 1rem; }
.masterclass-day-heading {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green);
  border-bottom: 3px solid var(--yellow);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* ==========================================================================
   Films page: empty state
   ========================================================================== */
.films-empty {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--green-50);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.films-empty-text { margin: 0; font-size: 1.0625rem; }
.films-empty-link { font-weight: 700; }

/* ==========================================================================
   Print styles — programme page prints as a one-page flyer
   ========================================================================== */
@media print {
  .site-header, .site-footer, .nav-toggle, .skip-link, .tabs { display: none !important; }
  body { color: #000; background: #fff; }
  .day { break-inside: avoid; page-break-inside: avoid; border-color: #000; }
  .day[hidden] { display: block !important; }
  a { color: #000; text-decoration: none; }
  .stripe { background: none !important; }
}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 480px) {
  .partners { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Part 5: one section per screen (desktop only, >= 1024px and >= 700px)
   ========================================================================== */
/* Scroll snapping: proximity (never mandatory), desktop-only, no-preference only */
@media (min-width: 1024px) and (min-height: 700px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--header-h);
  }
  .snap-section {
    scroll-snap-align: start;
  }
}

/* Full-screen sections on desktop. Use min-height so content can grow. */
@media (min-width: 1024px) and (min-height: 700px) {
  .snap-section {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex;
    align-items: center;
  }
  .snap-section > .wrap {
    width: 100%;
  }
  /* The last content section + footer together fill one screen */
  .snap-section-last {
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
    min-height: calc(100svh - var(--header-h) - var(--footer-h));
  }
}

/* Section dots indicator (Home page only, >= 1024px) */
.section-dots {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 1024px) {
  .section-dots { display: flex; }
}
.section-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: var(--white);
  text-decoration: none;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
  /* Drop-shadow ensures the dots are visible on any background colour
     (white, yellow, green) */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.section-dot:hover { background: var(--yellow-50); }
.section-dot.is-current {
  background: var(--yellow);
  border-color: var(--green);
}
/* Visually hidden label, visible on focus/hover as a tooltip */
.section-dot .section-dot-label {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--green);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.section-dot:hover .section-dot-label,
.section-dot:focus-visible .section-dot-label {
  opacity: 1;
}
/* Screen-reader-only text for the dot link */
.section-dot .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* (Hero overlay and chevron styles are defined earlier in the file, in the
   Hero section. They were moved there to fix the mobile layout issue where
   the overlay was being clipped by overflow:hidden on short hero images.) */

/* Two-column layout for "The Festival" section (Part 5 screen 2) */
.festival-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 2.5rem;
  align-items: center;
}
.festival-grid h1 { margin: 0; }
/* Two-column paragraphs inside the Festival section to fit one screen */
.festival-paragraphs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}
.festival-paragraphs p { margin: 0; font-size: 0.875rem; line-height: 1.45; }
@media (max-width: 1023px) {
  .festival-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .festival-paragraphs { grid-template-columns: 1fr; }
  .festival-paragraphs p { font-size: 1rem; }
}

/* Larger definition-card photos (Part 5 screen 3) */
@media (min-width: 1024px) and (min-height: 700px) {
  .def-photo { max-width: 300px; }
  .partner-logo { max-height: 110px; }
}

/* Sub-page: hero + content fills one screen */
@media (min-width: 1024px) and (min-height: 700px) {
  .sub-page-main {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
  }
  .sub-page-content {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-h) - 280px - var(--footer-h));
    min-height: calc(100svh - var(--header-h) - 280px - var(--footer-h));
  }
  .sub-page-content > .wrap {
    width: 100%;
  }
}

/* Programme: sticky tab bar */
.programme-tabs-sticky {
  position: sticky;
  top: var(--header-h);
  z-index: 15;
  background: var(--white);
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
}
/* Each Programme day panel fills one screen on desktop. Don't subtract the
   footer — the footer sits below all the day panels, not below each day. */
@media (min-width: 1024px) and (min-height: 700px) {
  .day {
    min-height: calc(100vh - var(--header-h) - 60px);
    min-height: calc(100svh - var(--header-h) - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 1023px), (max-height: 699px) {
  .programme-tabs-sticky { position: static; }
}

/* Masterclasses: 3-column day layout (Part 5) */
.masterclasses-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.masterclasses-3col .masterclass-day {
  margin-top: 0;
}
.masterclasses-3col .masterclass-day-heading {
  margin-bottom: 0.75rem;
  font-size: 1.0625rem;
}
.masterclasses-3col .card {
  padding: 1rem;
}
.masterclasses-3col .card h3 {
  font-size: 0.9375rem;
  line-height: 1.3;
}
@media (max-width: 1023px) {
  .masterclasses-3col { grid-template-columns: 1fr; }
  .masterclasses-3col .card { padding: 1.25rem; }
  .masterclasses-3col .card h3 { font-size: 1.0625rem; }
}

/* Open Call: 2-column layout (Part 5) */
.open-call-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 1023px) {
  .open-call-2col { grid-template-columns: 1fr; }
}

/* Films: 2-column paragraphs (Part 5) */
.films-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 1023px) {
  .films-2col { grid-template-columns: 1fr; }
}


.page-hero {
  position: relative;
  background: var(--white);
  overflow: hidden;
  border-bottom: 6px solid var(--yellow);
  display: flex;
  align-items: center;
  min-height: 280px;
}
.page-hero-text {
  position: relative;
  z-index: 2;
  max-width: 60ch;
  padding: 2rem var(--gutter);
  margin-inline: auto;
  width: 100%;
  max-width: var(--max);
}
.page-hero-text h1 { margin-bottom: 0.75rem; }
.page-hero-lead {
  color: var(--green);
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
}
/* The yellow base band: 10% of hero height, full width, at the bottom.
   hero-strip.jpg already contains this band, but we add it as a CSS
   background too so the band runs the full width even where the image
   doesn't reach. */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10%;
  background: var(--yellow);
  z-index: 1;
}
/* The film-strip image: aligned to the right edge and bottom, full hero height. */
.page-hero-strip {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 50%;
  object-fit: cover;
  object-position: left center;
  z-index: 1;
}
/* The reel: ~150px, bottom-left, behind the text, half-hidden by the yellow band. */
.page-hero-reel {
  position: absolute;
  left: 2rem;
  bottom: -40px;
  width: 150px;
  height: 150px;
  z-index: 0;
  opacity: 0.5;
}
@media (max-width: 1023px) {
  .page-hero { min-height: 230px; }
}
@media (max-width: 600px) {
  .page-hero { min-height: 190px; }
  .page-hero-strip { max-width: 60%; opacity: 0.7; }
  .page-hero-reel { width: 100px; height: 100px; bottom: -25px; left: 1rem; }
  .page-hero-lead { font-size: 1rem; }
}
/* Remove the old .page-title styles (no longer used, but keep for safety) */

/* ==========================================================================
   Scroll progress bar (E4)
   ========================================================================== */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
}

/* ==========================================================================
   Header scroll state (E3)
   ========================================================================== */
.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(9, 77, 38, 0.15);
}
/* Logo height stays at 44px — no height change on scroll (prevents CLS) */

/* ==========================================================================
   Film-strip divider (E7)
   A 16px green bar with yellow perforations, drifting slowly.
   ========================================================================== */
.film-strip-divider {
  height: 16px;
  background-color: var(--green);
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--yellow) 0,
      var(--yellow) 8px,
      transparent 8px,
      transparent 20px
    );
  background-size: 20px 16px;
  background-repeat: repeat-x;
}

/* ==========================================================================
   Motion system (E1, E2, E5, E6, E7, E8, E9)
   All motion sits inside prefers-reduced-motion: no-preference.
   With reduced motion, everything is visible and static.
   Hidden "before reveal" states only apply when html has the class "js"
   (added by js/head.js before first paint).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* E1: Page entrance ----------------------------------------------- */
  /* Hero text block fades up on load. */
  html.js .page-hero-text {
    animation: heroTextIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes heroTextIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Sub-page hero art slides in from the right (100ms delay). */
  html.js .page-hero-strip {
    animation: heroArtIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
  }
  @keyframes heroArtIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
  }
  /* Home hero image fades and settles (scale 1.03 to 1). */
  html.js .hero img {
    animation: heroImageIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes heroImageIn {
    from { opacity: 0; transform: scale(1.03); }
    to { opacity: 1; transform: scale(1); }
  }

  /* E2: Scroll reveal ----------------------------------------------- */
  /* Reveal targets start hidden (only when JS is on) and animate in when
     .is-revealed is added by IntersectionObserver. */
  html.js main > section:not(.is-revealed),
  html.js .def:not(.is-revealed),
  html.js .distinctive-item:not(.is-revealed),
  html.js .day:not(.is-revealed),
  html.js .card:not(.is-revealed),
  html.js .partner-logo:not(.is-revealed),
  html.js .footer-col:not(.is-revealed) {
    opacity: 0;
    transform: translateY(24px);
  }
  html.js main > section,
  html.js .def,
  html.js .distinctive-item,
  html.js .day,
  html.js .card,
  html.js .partner-logo,
  html.js .footer-col {
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  html.js .is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* E5: Card and photo hovers (only on hover-capable devices) ------- */
  @media (hover: hover) {
    .def {
      transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    }
    .def:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 16px rgba(9, 77, 38, 0.12);
    }
    .def .def-photo {
      transition: transform 0.25s ease-out;
    }
    .def:hover .def-photo {
      transform: scale(1.05);
    }
    .card {
      transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 16px rgba(9, 77, 38, 0.12);
      border-color: var(--yellow);
    }
    .card:nth-child(even):hover {
      border-color: var(--green);
    }
    .partner-logo {
      transition: transform 0.2s ease-out;
    }
    .partner-logo:hover {
      transform: scale(1.05);
    }
  }

  /* E6: Navigation and buttons ------------------------------------- */
  @media (hover: hover) {
    .site-nav a {
      position: relative;
    }
    .site-nav a::after {
      content: "";
      position: absolute;
      left: 1rem;
      right: 1rem;
      bottom: 0.25rem;
      height: 3px;
      background: var(--yellow);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.2s ease-out;
    }
    .site-nav a:hover::after,
    .site-nav a[aria-current="page"]::after {
      transform: scaleX(1);
    }
    .btn, .tab {
      transition: transform 0.2s ease-out, background 0.2s ease-out, color 0.2s ease-out;
    }
    .btn:hover:not(:disabled), .tab:hover {
      transform: translateY(-2px);
    }
    .btn:active:not(:disabled), .tab:active {
      transform: translateY(0);
    }
  }

  /* E7: Film-strip perforations drift ------------------------------- */
  .film-strip-divider {
    animation: filmStripDrift 1.6s linear infinite;
  }
  @keyframes filmStripDrift {
    from { background-position: 0 0; }
    to { background-position: 20px 0; }
  }

  /* E8: Reel rotation ----------------------------------------------- */
  .page-hero-reel {
    animation: reelSpin 28s linear infinite;
  }
  @keyframes reelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* E9: Tab panel change fade-up ------------------------------------ */
  .day-panels.panel-enter > .day {
    animation: panelEnter 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes panelEnter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Anchor scroll offset for sticky header */
:target {
  scroll-margin-top: 100px;
}