/* ===========================================================================
   MATILDE - site stylesheet
   Montserrat only. Sky-blue ground, dark navy ink, one interactive blue.
   =========================================================================== */

/* --- 1. Fonts ------------------------------------------------------------ */
/* Montserrat lives in assets/css/fonts.css, embedded as data URIs so the
   typography survives being opened straight from disk. Link it before this
   file. Source .woff2 files are kept in assets/fonts/ for regeneration. */

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  /* colour */
  --sky-top:  #E9F3FB;
  --sky-bot:  #D2E4F4;
  --ink:      #0E2A47;
  --ink-deep: #08203A;
  --blue:     #26608F;
  --cream:    #F2F7FC;

  /* how strongly the sky washes over the photo background (0 = photo, 1 = flat sky) */
  --wash: 0.88;
  /* how dark the veil over the hero video is */
  --veil-top: 0.40;
  --veil-bot: 0.60;

  /* rhythm */
  --gutter: 24px;
  --measure: 1120px;
  --section-y: 104px;

  /* motion */
  --ease: cubic-bezier(.65, .01, .05, .99);
  --t-fast: .28s;
  --t-mid: .45s;

  /* elevation */
  --card-shadow: 0 2px 4px rgba(8, 32, 58, .04), 0 12px 32px rgba(8, 32, 58, .09);
  --card-shadow-hi: 0 4px 8px rgba(8, 32, 58, .06), 0 22px 48px rgba(8, 32, 58, .16);

  --header-h: 76px;
}

/* --- 3. Reset ------------------------------------------------------------ */

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

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

body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .22vw, 1.12rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--sky-bot);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100%;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

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

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- 4. Page background: photo under a sky wash -------------------------- */

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

body::before {
  background-image: url('../img/bg-photo12-1920.jpg');
  background-size: cover;
  background-position: center 30%;
}

body::after {
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(233, 243, 251, var(--wash)) 0%,
      rgba(220, 235, 248, var(--wash)) 45%,
      rgba(210, 228, 244, calc(var(--wash) + .07)) 100%);
}

/* --- 5. Typography ------------------------------------------------------- */

h1, h2, h3 {
  color: var(--ink-deep);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.page-title {
  font-weight: 800;
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.section-title {
  font-weight: 800;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-deep);
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(14, 42, 71, .28), rgba(14, 42, 71, 0));
}

.meta {
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--blue);
}

.lede {
  font-weight: 500;
  font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-deep);
}

.prose p + p { margin-top: 1.15em; }
.prose { max-width: 66ch; }

/* links inside body copy need to look like links: the global reset strips
   colour and underline from every anchor */
.prose a {
  color: var(--ink-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(14, 42, 71, .35);
  text-underline-offset: 4px;
  transition: color var(--t-fast) var(--ease),
              text-decoration-color var(--t-fast) var(--ease);
}
.prose a:hover { color: var(--blue); text-decoration-color: var(--blue); }
.prose a strong { font-weight: 700; }

/* --- 6. Layout ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }

.page-head {
  padding-top: calc(var(--header-h) + 72px);
  padding-bottom: 8px;
}
.page-head .meta { margin-bottom: 14px; }

main { position: relative; z-index: 1; }

/* --- 7. Header ----------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease);
  color: var(--ink);
  background: rgba(233, 243, 251, .92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(14, 42, 71, .08);
}

/* on the home page the header floats over the video until you scroll */
body.is-home .site-header {
  color: var(--cream);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body.is-home .site-header.is-solid {
  color: var(--ink);
  background: rgba(233, 243, 251, .92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(14, 42, 71, .08);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  transition: opacity var(--t-fast) var(--ease);
}
.brand:hover { opacity: .68; }
body.is-home .brand { opacity: 0; pointer-events: none; }
body.is-home .site-header.is-solid .brand { opacity: 1; pointer-events: auto; }

.header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
}

.nav-main a {
  position: relative;
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .06em;
  padding-block: 6px;
  transition: opacity var(--t-fast) var(--ease);
}
.nav-main a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-fast) var(--ease);
}
.nav-main a:hover::after,
.nav-main a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-main a[aria-current='page'] { color: var(--blue); }
body.is-home .site-header:not(.is-solid) .nav-main a[aria-current='page'] { color: var(--cream); }

/* --- 8. Language switcher ------------------------------------------------ */

.lang { position: relative; }

.lang-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 10px;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.lang-btn:hover { opacity: .7; }
.lang-btn svg { width: 19px; height: 19px; }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  padding: 7px;
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  box-shadow: var(--card-shadow-hi);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              visibility var(--t-fast);
}
.lang.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  font-weight: 600;
  font-size: .88rem;
  border-radius: 8px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-menu button:hover { background: rgba(38, 96, 143, .1); }
.lang-menu button[aria-selected='true'] { color: var(--blue); }
.lang-menu button[aria-selected='true']::after { content: ' ·'; }

/* --- 9. Mobile nav toggle ------------------------------------------------ */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }

body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- 10. Hero (home) ----------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(6, 22, 40, calc(var(--veil-top) + .12)) 0%,
      rgba(6, 22, 40, var(--veil-top)) 26%,
      rgba(6, 22, 40, var(--veil-bot)) 100%);
}

.hero-inner {
  width: 100%;
  text-align: center;
  color: var(--cream);
  padding: calc(var(--header-h) + 24px) var(--gutter) 96px;
}
/* full width, so centring is measured against the viewport rather than against
   the widest child - otherwise the wordmark's negative margin drags the whole
   stack off-centre */

.wordmark {
  font-weight: 800;
  font-size: clamp(2.85rem, .5rem + 12.2vw, 9.2rem);
  line-height: .92;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 40px rgba(4, 16, 30, .45);
}

.hero-tag {
  margin-top: 22px;
  font-weight: 500;
  font-size: clamp(.82rem, .74rem + .38vw, 1rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(242, 247, 252, .9);
}

/* Playable Spotify widget on the hero. Spotify's embed reflows to a compact
   single-row player at this height, so it keeps the footprint of the card it
   replaced while actually playing the track instead of leaving the site. */

.hero-spotify {
  width: 320px;
  max-width: 100%;
  /* exactly the player's own height. Spotify's iframe body is transparent, so
     any spare height here shows through as a floating empty rectangle. */
  height: 80px;
  margin: 34px auto 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(4, 16, 30, .34);
}
.hero-spotify iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero .social-row { margin-top: 42px; justify-content: center; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: rgba(242, 247, 252, .78);
  font-weight: 600;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}
.scroll-cue:hover { color: var(--cream); }
.scroll-cue svg { width: 15px; height: 15px; animation: nudge 2.4s var(--ease) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .65; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* --- 11. Social icons ---------------------------------------------------- */

.social-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.social-row a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .8;
  transition: transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.social-row a svg { width: 20px; height: 20px; fill: currentColor; }
.social-row a:hover {
  transform: translateY(-3px);
  opacity: 1;
}

/* on light backgrounds the hover fills navy */
.social-row--ink a { border-color: rgba(14, 42, 71, .25); color: var(--ink); opacity: 1; }
.social-row--ink a:hover { background: var(--ink-deep); color: var(--cream); border-color: var(--ink-deep); }

/* --- 12. Buttons --------------------------------------------------------- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Rectangular outline buttons: a 1px navy rule, no fill, navy label.
   Hover inverts to a solid navy block. No rounding and no lift. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-deep);
  background: transparent;
  border: 1px solid rgba(14, 42, 71, .45);
  border-radius: 2px;
  transition: color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn:hover {
  color: var(--cream);
  background: var(--ink-deep);
  border-color: var(--ink-deep);
}
.btn:active { background: var(--blue); border-color: var(--blue); }

.btn--solid {
  color: var(--cream);
  background: var(--ink-deep);
  border-color: var(--ink-deep);
}
.btn--solid:hover { background: var(--blue); border-color: var(--blue); }

/* --- 13. Home strip ------------------------------------------------------ */

.strip { padding-block: 90px; }

/* --- 13b. Filmstrip ------------------------------------------------------ */

/* A fixed row. Nothing scales, nothing rotates, nothing reflows: the only
   thing that moves between states is focus, carried by blur and opacity. */

/* The sharp frame is always dead centre. The others slide along one straight
   line, leave the frame at either edge and come back in from the opposite
   side. No arc, no rotation - only horizontal translation. JS positions each
   frame by its signed distance from the centre; the wrap-around jump happens
   off-screen with the transition suppressed, so it is never visible. */

.filmstrip {
  --frame-w: 260px;
  --step: 250px;
  position: relative;
  height: var(--frame-w);
  margin-bottom: 84px;
  overflow: hidden;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--frame-w);
  height: var(--frame-w);
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
  background: var(--sky-bot);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .85s var(--ease), opacity .85s var(--ease);
  will-change: transform, opacity;
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* constant scale: blur() fades an element's own edges to transparent, and
     this pushes that softness outside the frame's clip */
  transform: scale(1.06);
  filter: blur(5px) saturate(.6) brightness(.86);
  transition: filter .85s var(--ease);
}

.frame.is-active { cursor: default; }
.frame.is-active img { filter: blur(0) saturate(1) brightness(1); }

.frame:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* --- 13c. Home strip text ------------------------------------------------ */

.home-blurb {
  max-width: 62ch;
  margin: 0 auto 56px;
  padding-block: 26px;
  text-align: center;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, .95rem + 1.05vw, 1.62rem);
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--ink-deep);
}

.strip-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}

.upcoming {
  padding: 30px 32px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(14, 42, 71, .1);
  border-left: 3px solid var(--blue);
  border-radius: 4px 16px 16px 4px;
  box-shadow: var(--card-shadow);
}
.upcoming .date {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
}
.upcoming h3 {
  margin-top: 10px;
  font-weight: 800;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
}
.upcoming .venue {
  margin-top: 8px;
  font-weight: 500;
  color: rgba(14, 42, 71, .82);
}

.wins { display: grid; gap: 14px; }
.win {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(14, 42, 71, .12);
}
.win:last-child { border-bottom: 0; padding-bottom: 0; }
.win .year {
  flex: none;
  min-width: 3.4em;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--blue);
}
.win .what { font-weight: 500; }
.win .what strong { font-weight: 700; color: var(--ink-deep); }

/* --- 14. Lists (awards, stages) ------------------------------------------ */

.award-list { display: grid; gap: 0; }
.award-list li {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  gap: 20px;
  align-items: baseline;
  padding-block: 18px;
  border-bottom: 1px solid rgba(14, 42, 71, .12);
}
.award-list li:first-child { border-top: 1px solid rgba(14, 42, 71, .12); }
.award-list .year {
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .06em;
  color: var(--blue);
}
.award-list .title { display: block; font-weight: 700; color: var(--ink-deep); }
.award-list .place {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-weight: 500;
  font-size: .88rem;
  color: rgba(14, 42, 71, .8);
}
.award-list .flag {
  width: 15px;
  height: 10px;
  flex: none;
  border-radius: 1px;
  /* hairline sits inside so the flag keeps its exact size, and the palette is
     pulled toward the page tones instead of full poster primaries */
  box-shadow: inset 0 0 0 1px rgba(14, 42, 71, .12);
  opacity: .92;
}
.award-list .detail {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: .93rem;
  color: rgba(14, 42, 71, .76);
}

.stage-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 2px 34px;
}
.stage-list li {
  padding-block: 15px;
  border-bottom: 1px solid rgba(14, 42, 71, .1);
  font-size: .95rem;
}
.stage-list li b {
  display: block;
  font-weight: 700;
  color: var(--ink-deep);
  letter-spacing: -.005em;
}
.stage-list .place {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-weight: 500;
  font-size: .88rem;
  color: rgba(14, 42, 71, .8);
}
.stage-list .flag {
  width: 15px;
  height: 10px;
  flex: none;
  border-radius: 1px;
  /* hairline sits inside so the flag keeps its exact size, and the palette is
     pulled toward the page tones instead of full poster primaries */
  box-shadow: inset 0 0 0 1px rgba(14, 42, 71, .12);
  opacity: .92;
}
.stage-list .role {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: .8rem;
  color: rgba(14, 42, 71, .58);
}

/* --- 15. Media gallery --------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 26px;
}

.card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(14, 42, 71, .1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hi); }

.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sky-bot);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
/* gallery sources are pre-cropped to 16:10 around their subject, so plain
   centring is correct here - no per-image object-position nudges needed */
.card:hover .card-media img { transform: scale(1.05); }

.card-body { padding: 20px 22px 24px; }
.card-body .meta { font-size: .68rem; }
.card-body h3 {
  margin-top: 9px;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: 0;
}
.card-body p {
  margin-top: 7px;
  font-size: .89rem;
  color: rgba(14, 42, 71, .75);
}
.card-link {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue);
}
.card-link svg { width: 13px; height: 13px; transition: transform var(--t-fast) var(--ease); }
.card:hover .card-link svg { transform: translate(3px, -3px); }

/* --- 16. Release: cover art + platform buttons (music) ------------------- */

/* cover stays deliberately small so the platform buttons are reachable
   without scrolling; they stack under it once there is no room alongside */
.release {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  max-width: 780px;
}

.release-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(8, 32, 58, .10), 0 16px 40px rgba(8, 32, 58, .20);
}

.release .btn-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.release .btn { width: 100%; }

.spotify-embed {
  max-width: 780px;
  margin-top: 40px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.spotify-embed iframe { display: block; width: 100%; height: 152px; border: 0; }

.video-embed {
  position: relative;
  max-width: 780px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink-deep);
  box-shadow: var(--card-shadow-hi);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* poster shown until (or instead of) the live player */
.video-poster { position: absolute; inset: 0; display: block; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.video-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 22, 40, .1), rgba(6, 22, 40, .5));
  transition: opacity var(--t-mid) var(--ease);
}
.video-poster:hover::after { opacity: .7; }

.play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(242, 247, 252, .94);
  color: var(--ink-deep);
  box-shadow: 0 8px 30px rgba(4, 16, 30, .4);
  transition: transform var(--t-mid) var(--ease);
  z-index: 2;
}
.play-badge svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.video-poster:hover .play-badge { transform: translate(-50%, -50%) scale(1.08); }

/* --- 17. Contact --------------------------------------------------------- */

/* the address appears once: the button IS the end of the sentence */
.contact-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 62ch;
  font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink-deep);
}

.contact-mail {
  font-size: .95rem;
  letter-spacing: .01em;
  word-break: break-word;
}

.social-list {
  display: grid;
  gap: 0;
  max-width: 560px;
  margin-top: 52px;
}
.social-list a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 18px;
  border-bottom: 1px solid rgba(14, 42, 71, .12);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.social-list a:first-child { border-top: 1px solid rgba(14, 42, 71, .12); }
.social-list a:hover { color: var(--blue); padding-left: 8px; }
.social-list svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.social-list .name { font-weight: 700; }
.social-list .handle {
  margin-left: auto;
  font-weight: 500;
  font-size: .86rem;
  color: var(--ink);
}
.social-list a:hover .handle { color: var(--blue); }

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

.site-footer {
  position: relative;
  z-index: 1;
  padding-block: 44px;
  border-top: 1px solid rgba(14, 42, 71, .14);
  background: rgba(233, 243, 251, .55);
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer .brand { font-size: .92rem; }
.site-footer small {
  display: block;
  margin-top: 7px;
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(14, 42, 71, .6);
}

/* --- 19. Reveal on scroll ------------------------------------------------ */

/* Content is visible by default. site.js adds .reveals-on to <html> only once
   it has a working IntersectionObserver, so a script failure or a throttled
   observer can never leave the page blank. */

html.reveals-on .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
html.reveals-on .reveal.is-in { opacity: 1; transform: none; }

/* --- 20. Responsive ------------------------------------------------------ */

@media (max-width: 1000px) {
  .strip-grid { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --section-y: 64px;
    --header-h: 64px;
  }

  body::before { background-image: url('../img/bg-photo12-1080.jpg'); }

  .nav-toggle { display: flex; }

  .nav-main {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--gutter) 22px;
    color: var(--ink);
    background: rgba(233, 243, 251, .98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 34px rgba(8, 32, 58, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                visibility var(--t-fast);
  }
  body.nav-open .nav-main {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-main a {
    padding-block: 15px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(14, 42, 71, .1);
  }
  .nav-main a::after { display: none; }
  .nav-main a:last-child { border-bottom: 0; }

  /* keep the burger and globe legible once the sheet is open over the video */
  body.is-home.nav-open .site-header {
    color: var(--ink);
    background: rgba(233, 243, 251, .98);
  }
  body.is-home.nav-open .brand { opacity: 1; pointer-events: auto; }

  .page-head { padding-top: calc(var(--header-h) + 46px); }

  .hero-inner { padding-bottom: 78px; }
  .hero .social-row { margin-top: 32px; gap: 6px; }
  .social-row a { width: 44px; height: 44px; }

  .strip { padding-block: 60px; }
  .home-blurb { margin-bottom: 34px; }

  .filmstrip {
    --frame-w: 190px;
    --step: 176px;
    margin-bottom: 52px;
  }
  .upcoming { padding: 24px 22px; }



  .award-list li { grid-template-columns: 1fr; gap: 4px; }
  .stage-list { grid-template-columns: 1fr; }

  .btn { width: 100%; }
  .btn-row { gap: 10px; }
  /* cover on top, buttons underneath once there is no room alongside */
  .release {
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: 360px;
    margin-inline: auto;      /* centre the block in the page */
    justify-items: center;    /* and the cover within it */
  }
  .release-cover { max-width: 260px; }
  .release .btn-row { grid-template-columns: 1fr; width: 100%; }
  .contact-mail { width: 100%; }
  .social-list { margin-top: 38px; }

  .site-footer .wrap { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* --- 21. Reduced motion -------------------------------------------------- */

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