/* ==========================================================================
   HAZEL — The Hazel McCallion Documentary
   Site stylesheet.  Light mode only.

   Design notes:
   - White page, thin header, split hero, light serif headlines, one accent.
   - Built for an older audience: large type, high contrast, big tap targets,
     underlined body links, always-visible form labels, obvious focus rings.
   - No build step. Plain CSS so it can be edited by hand and uploaded as-is.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Force light rendering of form controls even if the OS is in dark mode. */
  color-scheme: light;

  /* Colour ---------------------------------------------------------------- */
  --bg:          #ffffff;
  --bg-warm:     #f7f5f1;   /* alternating section band */
  --bg-deep:     #16314e;   /* dark band, used sparingly */

  --ink:         #191919;   /* headings + body. 16:1 on white */
  --ink-soft:    #55524e;   /* secondary text. 7.4:1 on white */
  --ink-faint:   #6f6b66;   /* captions only. 5.2:1 on white */

  --accent:      #20456f;   /* deep civic navy — echoes the chain of office */
  --accent-dark: #16314e;
  --accent-tint: #eef2f7;

  --rule:        #e2ded7;   /* hairlines + borders */
  --rule-strong: #c9c3b9;

  /* Type ------------------------------------------------------------------ */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* MINIMUM SIZE: nothing on this site is set below 1rem / 16px. The audience
     is largely older readers, so --step--1 is the hard floor for every piece
     of text, including captions, labels, nav and fine print. If you add new
     styles, do not go below 1rem. */
  --step--1: 1rem;       /* 16px — the floor: captions, labels, fine print */
  --step-0:  1.1875rem;  /* 19px — body. Deliberately large. */
  --step-1:  1.375rem;   /* 22px — lead paragraphs */
  --step-2:  1.75rem;    /* 28px — h3 */
  --step-3:  2.375rem;   /* 38px — h2 */
  --step-4:  3.5rem;     /* 56px — h1 */
  --step-5:  4.25rem;    /* 68px — hero */

  /* Space ----------------------------------------------------------------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7rem;

  --container: 1200px;
  --measure:   68ch;      /* readable line length */

  --radius: 2px;          /* the template is essentially square-cornered */
  --shadow: 0 2px 18px rgba(25, 25, 25, 0.08);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-md);
  color: var(--ink);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.2; }
/* A small uppercase label. It is a class rather than a heading level so that
   headings can keep a correct h1 > h2 > h3 order for screen readers while
   still looking like a caption. */
h4, .label {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 var(--space-md);
}

p { margin: 0 0 var(--space-md); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* Body links are underlined, not colour-only — critical for low-contrast vision. */
a { color: var(--accent); }
main a:not(.btn):not(.card):not(.nav-link):not(.person-card) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main a:not(.btn):not(.card):not(.nav-link):not(.person-card):hover {
  color: var(--accent-dark);
  text-decoration-thickness: 2px;
}

strong, b { font-weight: 700; }

blockquote { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-lg) 0;
}

/* Visible focus for keyboard users, on everything. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 1rem 1.5rem;
  z-index: 200;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container--narrow { max-width: 820px; }

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.section--warm { background: var(--bg-warm); }
.section--deep {
  background: var(--bg-deep);
  color: #fff;
}
.section--deep h1,
.section--deep h2,
.section--deep h3 { color: #fff; }
.section--deep p { color: rgba(255, 255, 255, 0.86); }

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--space-lg);
}
.section-head p { color: var(--ink-soft); font-size: var(--step-1); }

/* Small uppercase label that sits above a heading. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-sm);
  display: block;
}
.section--deep .eyebrow { color: #9db8d6; }

.lead {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink-soft);
}

.caption {
  font-size: var(--step--1);
  color: var(--ink-faint);
  line-height: 1.5;
  margin-top: var(--space-xs);
  max-width: none;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;              /* comfortable tap target */
  padding: 0.75rem 2rem;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--accent);
}
.btn--ghost:hover { background: var(--accent); color: #fff; }

.section--deep .btn {
  background: #fff;
  border-color: #fff;
  color: var(--accent-dark);
}
.section--deep .btn:hover { background: var(--accent-tint); border-color: var(--accent-tint); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 88px;
}

/* Wordmark ---------------------------------------------------------------- */
.wordmark {
  display: block;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
}
/* The title is six words long, so it is set in mixed case at a modest size
   rather than the wide letterspaced capitals a one-word name would take. */
.wordmark__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.015em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark__sub {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.35rem;
  white-space: nowrap;
}

/* The footer has no navigation beside it, so the title can breathe. */
.site-footer .wordmark__name { font-size: 1.75rem; white-space: normal; }
.site-footer .wordmark__sub  { white-space: normal; }

/* Desktop nav ------------------------------------------------------------- */
.nav { display: flex; align-items: center; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 0.8rem;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}
.nav-link:hover { color: var(--accent); border-bottom-color: var(--rule-strong); }

.nav-link[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Hamburger --------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0 1rem;
  background: transparent;
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--ink);
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: var(--space-xl) var(--space-xl); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.hero__figure { margin: 0; }
.hero__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--bg-warm);
}

.hero__title {
  font-size: clamp(2.75rem, 6vw, var(--step-5));
  line-height: 1.05;
  margin-bottom: var(--space-md);
}

.hero__sub {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* Full-width image banner used at the top of interior pages. */
.page-banner {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
}
.page-banner__img {
  width: 100%;
  height: clamp(260px, 42vw, 460px);
  object-fit: cover;
  opacity: 0.45;
}
.page-banner__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.page-banner h1 { color: #fff; margin-bottom: 0; }
.page-banner .eyebrow { color: #b9cde6; }

/* Simple heading block for pages without a banner image. */
.page-head {
  padding-block: var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--rule);
}
.page-head p { color: var(--ink-soft); font-size: var(--step-1); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-lg);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  height: 100%;
  transition: border-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
}
a.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--bg-warm);
}
.card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__body h3 { margin-bottom: 0.75rem; }
.card__body p { color: var(--ink-soft); font-size: 1.0625rem; }
.card__more {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
a.card:hover .card__more { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   8. Facts band
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.facts li { text-align: center; }
.fact__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.25rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.section--deep .fact__num { color: #fff; }
.fact__label {
  display: block;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.section--deep .fact__label { color: rgba(255, 255, 255, 0.82); }

/* --------------------------------------------------------------------------
   9. Pull quote
   -------------------------------------------------------------------------- */

.pullquote {
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.125rem);
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
}
.pullquote cite {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.section--deep .pullquote { color: #fff; }
.section--deep .pullquote cite { color: #9db8d6; }

/* --------------------------------------------------------------------------
   10. Split feature (image one side, text the other)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

/* Align to the top instead of the middle. Used where one side is a tall form,
   so the intro text sits level with the first field rather than floating. */
.split--top { align-items: start; }
.split__media { margin: 0; }
.split__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-warm);
}
.split__img--tall { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   11. Video
   -------------------------------------------------------------------------- */

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Custom player -------------------------------------------------------
   The film sits on YouTube, but the visitor should just see the film. Before
   play we show our own still and play button (no YouTube anything). On play we
   load the YouTube iframe with its controls switched off and drive it with the
   bar below, so the YouTube logo and "Watch on YouTube" button never appear.
   When the film ends we swap back to the still so no channel suggestions show.
   ------------------------------------------------------------------------- */

.player {
  position: relative;
  width: 100%;
  background: #000;
}

.player__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.player__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Poster shown before play and again after the film ends. */
.player__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
  display: block;
}
.player__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* keeps her face in frame on a 16:9 crop */
  opacity: 0.82;
  transition: opacity 0.25s ease, transform 0.4s ease;
}
.player__poster:hover img { opacity: 0.95; transform: scale(1.02); }

.player__playbtn {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.player__playbtn svg {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease;
}
.player__poster:hover .player__playbtn svg { transform: scale(1.08); }
.player__playbtn span {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Control bar */
.player__bar {
  display: none;                 /* revealed once the film is playing */
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  background: var(--bg-deep);
  color: #fff;
}
.player.is-playing .player__bar { display: flex; }

.player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
}
.player__btn:hover { background: rgba(255, 255, 255, 0.14); }
.player__btn svg { width: 22px; height: 22px; fill: currentColor; }

.player__time {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
  min-width: 5.5ch;
  text-align: center;
}

.player__seek {
  flex: 1;
  min-width: 60px;
  height: 30px;
  margin: 0;
  accent-color: #fff;
  cursor: pointer;
  background: transparent;
}

/* Full screen ---------------------------------------------------------------
   Both real full screen and the CSS fallback need the same thing: the stage
   has to stop being a fixed 16:9 box and take whatever height the control bar
   leaves, or the bar is pushed off the bottom of the screen where nobody can
   reach it. YouTube letterboxes the picture inside the frame for us.

   :fullscreen, :-webkit-full-screen and the .is-faux-fs fallback each have to
   be written as their own rule — a browser that does not recognise one of the
   pseudo-classes throws away the whole selector list, taking the others with
   it. Grouping .is-faux-fs with :fullscreen would strip the fallback on the
   very browsers (older iOS Safari) that are the only ones to use it.
   -------------------------------------------------------------------------- */
.player:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #000;
}
.player:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #000;
}
.player.is-faux-fs {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #000;
}

.player:fullscreen .player__stage {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}
.player:-webkit-full-screen .player__stage {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}
.player.is-faux-fs .player__stage {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

/* The fallback for browsers with no Fullscreen API — Safari on iOS, which
   will only ever full-screen a native <video>, not an embedded iframe. Real
   full screen puts the element above the page for us; here we do it by hand.
   200 is the sticky header's z-index, so this has to clear it. */
.player.is-faux-fs {
  position: fixed;
  inset: 0;
  z-index: 300;
}
body.has-faux-fs { overflow: hidden; }

/* Shown if the YouTube player cannot be reached at all. */
.player__error {
  padding: var(--space-md);
  background: var(--bg-deep);
  color: #fff;
  text-align: center;
}
.player__error a { color: #fff; }

@media (max-width: 620px) {
  .player__playbtn svg { width: 62px; height: 62px; }
  .player__playbtn span { font-size: 1rem; }
  .player__bar { gap: 0.5rem; padding: 0.6rem 0.6rem; }
  .player__time { font-size: 1rem; min-width: 4.5ch; }
  .player__btn { width: 44px; height: 44px; }
}

/* Shown when no video source has been configured yet. */
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-deep);
  color: #fff;
  text-align: center;
}
.video-placeholder p { color: rgba(255, 255, 255, 0.8); max-width: 44ch; }

/* --------------------------------------------------------------------------
   12. Gallery
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg-warm);
}

/* Every cropped frame on the site is object-fit: cover, so the browser trims
   whichever edges do not fit, working outwards from the centre of the
   photograph — which is not always where the face is. This moves the anchor up
   for a subject standing above the middle of the frame. Its opposite number is
   .img-top further down; between them they are the only crop controls the
   pages need. */
.img-face-high { object-position: center 32%; }

/* Hazel photographed alongside a public figure — three across on the Hazel
   page. The originals are a square, a portrait and a landscape, so they are
   all cropped to one 4:5 frame to make an even row. Two faces have to survive
   that crop rather than one, which is why the Clinton portrait carries
   .img-top: centred, it would take the top off his head. */
.portraits figure { margin: 0; }   /* browsers indent <figure> by 40px */
.portrait-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-warm);
}

/* --------------------------------------------------------------------------
   13. Timeline
   -------------------------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--rule);
}
.timeline li {
  position: relative;
  padding: 0 0 var(--space-lg) var(--space-lg);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0.6rem;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 3px solid var(--bg);
  border-radius: 50%;
}
.timeline__year {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.timeline__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.timeline p { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   14. People (production team)
   -------------------------------------------------------------------------- */

.person {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--rule);
}
.person:first-of-type { border-top: 0; padding-top: 0; }

.person__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-warm);
}

/* For portraits taller than their frame, anchor the crop to the top so the
   subject's head is never clipped. Usable on any cropped image. */
.person__img--top,
.img-top { object-position: center top; }

/* Fallback tile when we have no photograph for someone. */
.person__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint);
  border: 1px solid var(--rule);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 4rem;
  letter-spacing: 0.08em;
}

.person__role {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.person h2 { font-size: var(--step-2); margin-bottom: var(--space-sm); }
.person p { font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   15. Sponsors
   -------------------------------------------------------------------------- */

/* Tiles are capped rather than stretched to 1fr: a tile wider than the logo
   is just white space, because the logo files are small and upscaling them
   would only make them blurry. */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 280px));
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sponsor-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-sm);
  background: var(--bg);
  border: 1px solid var(--rule);
}
/* contain against a filled box, so a square logo is limited by the tile's
   height and a wide one by its width — each ends up as large as it can be. */
.sponsor-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sponsor-tile--empty {
  color: var(--ink-faint);
  font-size: var(--step--1);
  text-align: center;
  border-style: dashed;
  background: var(--bg-warm);
}

.tier {
  border: 1px solid var(--rule);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tier__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0 0 0.35rem;
}
.tier__price {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}
.tier ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
.tier li { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   15b. Definition lists (film credits, premiere details)
   -------------------------------------------------------------------------- */

.deflist { margin: 0; }

.deflist > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
}
.deflist > div:last-child { border-bottom: 1px solid var(--rule); }

.deflist dt { font-weight: 700; color: var(--ink); }
.deflist dd { margin: 0; color: var(--ink); }
.deflist dd.pending { color: var(--ink-soft); }

/* Stack label above value rather than squeezing it into a narrow column. */
@media (max-width: 620px) {
  .deflist > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
    padding: 1rem 0;
  }
}

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */

.form { max-width: 700px; }

.field { margin-bottom: var(--space-md); }

.field label {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.field .hint {
  display: block;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}
.req { color: #a8302f; font-weight: 700; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 56px;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
}
.field textarea { min-height: 220px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: var(--space-md);
}
.field-check input[type="checkbox"] {
  width: 26px;
  height: 26px;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.field-check label {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

/* Honeypot: hidden from people, visible to naive bots. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: var(--space-sm);
}

/* Success / error banners */
.notice {
  padding: var(--space-md);
  border-left: 5px solid var(--accent);
  background: var(--accent-tint);
  margin-bottom: var(--space-lg);
}
.notice--error {
  border-left-color: #a8302f;
  background: #fbeeee;
}
.notice h3 { margin-bottom: 0.5rem; }
.notice p:last-child { margin-bottom: 0; }
.notice ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }

/* --------------------------------------------------------------------------
   17. Stories
   -------------------------------------------------------------------------- */

.story {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-lg);
}
.story:first-of-type { border-top: 0; }
.story__quote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 var(--space-sm);
  max-width: 46ch;
}
.story__by {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-deep);
  color: rgba(255, 255, 255, 0.8);
  padding-block: var(--space-xl) var(--space-lg);
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.site-footer .wordmark__name { color: #fff; }
.site-footer .wordmark__sub  { color: rgba(255, 255, 255, 0.6); }
.site-footer .label { color: #fff; margin-bottom: var(--space-sm); }
.site-footer p { color: rgba(255, 255, 255, 0.78); font-size: 1.0625rem; }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.35rem; }
.footer-links a {
  display: inline-block;
  padding: 0.35rem 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.0625rem;
  text-decoration: none;
}
.footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Contact line in the footer. Underlined and near-white rather than the muted
   body colour — it is the only address on the site, so it should read as a
   link at a glance. The address is 41 characters and the column narrows to a
   single grid track on small screens, so it is allowed to break mid-string
   rather than push the footer wide. */
.footer-contact { margin-top: var(--space-md); }
.footer-contact a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.footer-contact a:hover { text-decoration-thickness: 2px; }

.footer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.footer-logos img {
  height: 66px;
  width: auto;
  background: #fff;
  padding: 8px 12px;
  border-radius: var(--radius);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.6);
}
.footer-bottom p { color: inherit; font-size: inherit; margin: 0; }

/* --------------------------------------------------------------------------
   18b. Full-bleed city band
   The photo is a frame grabbed from video, so it is soft to start with.
   Fading the whole image down reads as blur, so keep it at full strength and
   lay a scrim over it for the words to sit on instead.
   -------------------------------------------------------------------------- */
.city-band {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--bg-deep);
}
.city-band__img {
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 460px);
  object-fit: cover;
  object-position: center 46%;   /* towers and skyline, not empty foreground */
  filter: saturate(1.08) contrast(1.06);
}
/* Darkened behind the words, and heavier top and bottom so the band meets
   the sections either side of it cleanly. */
.city-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 80% at 50% 50%,
      rgba(9, 22, 38, 0.7) 0%,
      rgba(9, 22, 38, 0.5) 45%,
      rgba(9, 22, 38, 0) 80%),
    linear-gradient(to bottom,
      rgba(22, 49, 78, 0.78) 0%,
      rgba(22, 49, 78, 0.24) 42%,
      rgba(22, 49, 78, 0.28) 58%,
      rgba(22, 49, 78, 0.82) 100%);
}
.city-band__caption {
  position: absolute;
  inset: 0;
  z-index: 1;                    /* above the scrim */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
}
.city-band__caption .pullquote {
  color: #fff;
  max-width: 22ch;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
  .nav-link { padding: 0 0.55rem; }
  .wordmark__name { font-size: 1.25rem; }
}

/* The strapline is the widest thing on the left, so while the nav is still
   laid out across the top it has to give a little too, or it pushes the nav
   off the right-hand edge. Stop at 1151px: below that the nav is behind the
   Menu button, and this rule would otherwise outrank the narrow-phone
   strapline sizing further down purely on specificity. */
@media (min-width: 1151px) and (max-width: 1240px) {
  .site-header .wordmark__sub { font-size: 0.9rem; letter-spacing: 0.1em; }
}

/* Switch to the mobile menu early — the nav has seven items and they need
   to stay legible rather than shrink. */
@media (max-width: 1150px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow);
  }
  .nav.is-open { display: block; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-xs) var(--space-md) var(--space-md);
  }
  .nav-link {
    min-height: 60px;               /* generous rows for imprecise taps */
    padding: 0 0.25rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav-link[aria-current="page"] {
    border-bottom-color: var(--accent);
  }

  .site-header { position: relative; }
  .header-inner { position: relative; min-height: 76px; }
}

@media (max-width: 900px) {
  :root {
    --step-3: 2rem;
    --step-4: 2.75rem;
    --space-xl: 3.5rem;
    --space-2xl: 4.5rem;
  }

  .hero__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero__img { aspect-ratio: 3 / 2; object-position: center 20%; }
  .hero__sub { max-width: none; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }

  .person { grid-template-columns: 200px minmax(0, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  :root {
    --step-0: 1.125rem;   /* 18px */
    --step-1: 1.25rem;
    --step-2: 1.5rem;
    --step-3: 1.75rem;
    --step-4: 2.25rem;
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
  }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  /* One capped tile per row would otherwise sit off to the left. */
  .sponsor-grid { justify-content: center; }

  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }

  .person { grid-template-columns: 1fr; }
  .person__img,
  .person__placeholder { max-width: 260px; aspect-ratio: 4 / 5; }

  .footer-grid { grid-template-columns: 1fr; }

  .btn { width: 100%; }        /* full-width buttons are easier to hit */
  .btn-row { flex-direction: column; align-items: stretch; }

  /* Let the title wrap onto two lines so it can stay readable next to
     the Menu button on a narrow phone. The max-width is in em so it scales
     with the font size and keeps the break at two lines, not four. */
  .wordmark__name {
    font-size: 1.0625rem;
    line-height: 1.15;
    white-space: normal;
    max-width: 11em;
  }
  /* The tagline is set in wide capitals and does not wrap by default, so on a
     narrow phone it would push the Menu button off the side of the screen.
     Give it the same treatment as the title above: let it break, and cap it at
     the same width so the two lines stack tidily. */
  .wordmark__sub {
    font-size: 1rem;
    letter-spacing: 0.06em;
    white-space: normal;
    max-width: 11em;
  }
  .site-footer .wordmark__name { font-size: 1.5rem; max-width: none; }
  .site-footer .wordmark__sub { max-width: none; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   20. Motion / print
   -------------------------------------------------------------------------- */

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

@media print {
  .site-header, .site-footer, .btn, .nav-toggle { display: none !important; }
  body { font-size: 12pt; }
  a { text-decoration: underline; }
}