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

:root {
  --bg: #090909;
  --text: #f0ece5;
  --line: #1c1c1c;
  --muted: rgba(240, 236, 229, 0.45);
  --accent: #0a1ca3;            /* deep cobalt blue (logo) */
  --ff-serif: 'Instrument Serif', Georgia, serif;
  --ff-sans: 'Syne', system-ui, sans-serif;
  --nav-h: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* FILM backdrop — fixed full-viewport layer behind the content.
   Base layer (#film-bg) is a faint ~40px grid; the ::before layer is a
   soft warm radial glow that drifts slowly, like an off-frame projector.
   Only shown while the FILM section is active. */
#film-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s var(--ease);
  /* ~40px grid; line faintness (~3.5%) is baked into the SVG stroke so the
     glow layer below isn't dimmed by a parent opacity. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1'/%3E%3C/svg%3E");
}

body.film-active #film-bg {
  opacity: 1;
}

/* FILM view fills exactly one screen — no vertical scroll. Trim #main's
   usual padding so the strip sits right below the nav. */
body.film-active {
  overflow-y: hidden;
}

body.film-active #main {
  padding-top: var(--nav-h);
  padding-bottom: 0;
}

#film-bg::before {
  content: '';
  position: absolute;
  inset: -25%;
  /* Translucent warm glow toward #1a1000, fading to transparent so the
     grid stays visible beneath it. Covers roughly half the viewport. */
  background: radial-gradient(circle at 50% 50%,
    rgba(26, 16, 0, .85) 0%,
    rgba(26, 16, 0, .4) 28%,
    rgba(9, 9, 9, 0) 58%);
  animation: film-glow 28s ease-in-out infinite;
  will-change: transform;
}

@keyframes film-glow {
  0%   { transform: translate(-7%, -5%); }
  35%  { transform: translate(8%, 4%); }
  70%  { transform: translate(3%, -8%); }
  100% { transform: translate(-7%, -5%); }
}

/* NAV */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}

nav.nav--solid {
  background: rgba(9, 9, 9, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.logo {
  font-family: 'Unbounded', var(--ff-sans);
  /* Match the nav buttons' size so the wordmark sits at the same height as the
     menu on the right; the heavier weight keeps it distinct as the logo.
     Unbounded runs wide, so the tracking is eased vs the sans wordmark. */
  font-size: .62rem;
  letter-spacing: .12em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 5px rgba(240, 236, 229, .22);
  animation: logo-glow 4.5s ease-in-out infinite;
  cursor: pointer;
}

/* Gentle breathing glow — small, elegant, no size change. */
@keyframes logo-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(240, 236, 229, .18), 0 0 9px rgba(240, 236, 229, .09); }
  50%      { text-shadow: 0 0 7px rgba(255, 255, 255, .34), 0 0 16px rgba(240, 236, 229, .16); }
}

/* Wordmark motion — the two O's bob gently at rest (idle tell), then drift up
   and fade like balloons on hover, swaying as they rise. The rise lives on the
   outer .logo-o (transition); the bob/sway lives on the inner .o-i (animation),
   so the two never fight over `transform`. */
.logo-ltr {
  display: inline-block;
}

.logo-o {
  transition: transform 1.8s cubic-bezier(.33, .7, .29, 1), opacity 1.6s ease;
}
.logo-o .o-i {
  display: inline-block;
  animation: o-idle 4.2s ease-in-out infinite;
}
.logo-o2 .o-i { animation-delay: -2.1s; }   /* desync the two balloons */

.logo:hover .logo-o {
  opacity: 0;
  transform: translate(-.06em, -2.4em);
}
.logo:hover .logo-o2 {
  transform: translate(.1em, -2.9em);
  transition-delay: .14s;
}
.logo:hover .o-i { animation-name: o-sway; animation-duration: 1.5s; }
.logo:hover .logo-o2 .o-i { animation-delay: -.75s; }

/* Idle: barely-there buoyant bob. */
@keyframes o-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-1px) rotate(1.5deg); }
}
/* Hover: looser side-to-side sway as they lift off. */
@keyframes o-sway {
  0%   { transform: translateX(0)     rotate(-5deg); }
  50%  { transform: translateX(.06em) rotate(6deg); }
  100% { transform: translateX(0)     rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-o { transition: none; }
  .logo-o .o-i { animation: none; }
  .logo:hover .logo-o { opacity: 1; transform: none; }
}

.nav-r {
  display: flex;
  gap: 2.5rem;
}

.nav-r button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff-sans);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  transition: color .3s;
}

.nav-r button:hover,
.nav-r button.active {
  color: var(--text);
}

/* Hamburger toggle — hidden on desktop, revealed at the mobile breakpoint.
   The three bars morph into an X when the menu is open (body.nav-open). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* LANDING */
#landing {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  transition: opacity .9s var(--ease), visibility .9s;
}

#landing.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#landing-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* The landing video plays clean — no darkening scrim over it. The name/role
   sit low in the frame, kept legible with a soft shadow on the glyphs only
   (no overlay on the footage). */
.landing-overlay {
  position: absolute;
  left: 0;
  right: 0;
  /* Sit on the midline of the video's bottom letterbox bar (~2.35:1 content
     in a 16:9 frame → the bar's centre is ~6.1% up from the bottom). The
     translate centres the text block on that line. */
  bottom: 6.1%;
  transform: translateY(50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
}

.land-name {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: .5rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.land-role {
  font-family: var(--ff-sans);
  font-size: .55rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(240, 236, 229, .8);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* Landing teaser — fades in after a delay to fast-track visitors to a project.
   Sits at the name's height, midway between the name and the page edge. */
.land-teaser {
  position: absolute;
  z-index: 4;
  bottom: 6.1%;
  transform: translate(-50%, 50%);
  text-align: center;
  max-width: 250px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}

.land-teaser--right { left: 75%; }

.land-teaser.is-in { opacity: 1; }

.land-teaser-eyebrow {
  display: block;
  font-family: var(--ff-sans);
  font-size: .5rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(240, 236, 229, .55);
  margin-bottom: .55rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  transition: color .3s var(--ease);
}

.land-teaser-title {
  display: block;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.25;
  color: rgba(240, 236, 229, .72);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
  transition: color .3s var(--ease);
}

.land-teaser:hover .land-teaser-eyebrow { color: rgba(240, 236, 229, .8); }
.land-teaser:hover .land-teaser-title { color: var(--text); }

@media (max-width: 820px) {
  .land-teaser { display: none; }
}

/* MAIN */
#main {
  display: none;
  padding-top: calc(var(--nav-h) + 4rem);
  max-width: 1060px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-bottom: 6rem;
  position: relative;
  z-index: 10;
}

#main.is-visible {
  display: block;
}

.content-section {
  display: none;
}

.content-section.is-active {
  display: block;
}

.content-section h2 {
  font-family: var(--ff-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

/* Section header with count (film-list sections) */
.section-hd {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.section-hd h2 {
  padding-bottom: 0;
  border-bottom: none;
}

.section-count {
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* FILM STRIP — infinite horizontal poster strip.
   Scrolled by trackpad/wheel on desktop and touch-swipe on mobile;
   fills exactly one viewport height so the page never scrolls. */
.film-strip-viewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* full-bleed out of the centered #main */
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
  display: flex;
  align-items: center;             /* centre the strip vertically */
  user-select: none;
  touch-action: pan-y;
}

.film-strip {
  display: flex;
  gap: 60px;
  will-change: transform;
}

/* One scroll unit: poster + placard, stacked and centred. */
.film-slide {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Cap the slide to the poster width so a long caption wraps within it
     instead of stretching the slide wider than the poster (which would break
     the centred two-poster hero). Matches .poster-card's width. */
  max-width: min(36vw, 53vh);
}

.poster-card {
  position: relative;
  flex: 0 0 auto;
  /* ~1/3 of viewport width so ~2–2.5 posters show, but never so tall it
     forces a scroll: the vh term caps height to fit one screen. */
  width: min(36vw, 53vh);
  /* Matches the posters' A-series ratio (~1:√2) so they fill the frame
     without cropping. */
  aspect-ratio: 0.707;
  background: #111;
  cursor: pointer;
}

/* Media wrapper clips the poster image; the card stays overflow-visible
   so the outside corner accents remain visible. */
.poster-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.poster-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;             /* show the whole poster, never crop */
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;            /* never intercept the drag */
}

/* Viewfinder corner accents: L-shaped marks inset from each edge.
   Two pseudo-elements paint two corners each; every corner is a
   horizontal + vertical 18px line meeting at the corner. */
.poster-card::before,
.poster-card::after {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: 2;
  pointer-events: none;
  opacity: .3;
  transition: opacity .3s var(--ease);
}

.poster-card::before {
  background:
    linear-gradient(#fff, #fff) left top / 18px 1px no-repeat,
    linear-gradient(#fff, #fff) left top / 1px 18px no-repeat,
    linear-gradient(#fff, #fff) right top / 18px 1px no-repeat,
    linear-gradient(#fff, #fff) right top / 1px 18px no-repeat;
}

.poster-card::after {
  background:
    linear-gradient(#fff, #fff) left bottom / 18px 1px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 1px 18px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 18px 1px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 1px 18px no-repeat;
}

/* Poster + placard hover as one unit: hovering either brightens both. */
.film-slide:hover .poster-card::before,
.film-slide:hover .poster-card::after {
  opacity: .7;
}

/* CSS placeholder for films without a real poster yet */
.poster-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  background: #111;
}

.poster-ph span {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.1;
  color: var(--muted);
}

/* Gallery placard — sits ~16px below the poster, no fill/border, its
   shape suggested only by four L-shaped corner accents. Never wider than
   the poster above it. */
.placard {
  position: relative;
  margin-top: 18px;
  padding: 13px 16px;
  max-width: 100%;
}

.placard-text {
  display: block;
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: .24em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 0 5px rgba(255, 236, 214, .55);
}

/* Same corner-accent technique as the posters, smaller and fainter. */
.placard::before,
.placard::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  transition: opacity .3s var(--ease);
}

.placard::before {
  background:
    linear-gradient(#fff, #fff) left top / 11px 1px no-repeat,
    linear-gradient(#fff, #fff) left top / 1px 11px no-repeat,
    linear-gradient(#fff, #fff) right top / 11px 1px no-repeat,
    linear-gradient(#fff, #fff) right top / 1px 11px no-repeat;
}

.placard::after {
  background:
    linear-gradient(#fff, #fff) left bottom / 11px 1px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 1px 11px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 11px 1px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 1px 11px no-repeat;
}

.film-slide:hover .placard::before,
.film-slide:hover .placard::after {
  opacity: .7;
}

/* Mobile: a single large poster is the hero (JS centres one instead of two),
   so the poster and its placard scale up to fill the narrow screen. The slide
   is capped to the poster width so a long caption truncates within it instead
   of stretching the slide wider than the poster (which would throw off both the
   placard framing and the JS centring, since it measures the slide). */
@media (max-width: 680px) {
  .poster-card {
    width: min(74vw, 62vh);
  }
  .film-slide {
    max-width: min(74vw, 62vh);
  }
  .placard {
    margin-top: 20px;
    padding: 15px 18px;
  }
  .placard-text {
    font-size: 13px;
    letter-spacing: .22em;
  }
}

/* Scroll-reveal (COMMERCIAL + DOC) — the .reveal class is only applied by JS
   when motion is allowed; elements start hidden/low and transition in when they
   enter the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}

.reveal--doc {
  transform: translateY(30px);
  transition-duration: .7s;
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* COMMERCIAL GRID */
.com-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 1rem;
}

/* DOC listing: full-width cards stacked one per row. */
#doc-grid {
  grid-template-columns: 1fr;
}

.com-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0f0f0f;
  cursor: pointer;
}

.com-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gif layered over the cover; fades in only once it has loaded (no black
   flash while a heavy gif downloads on first hover). */
.com-card-gif {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s var(--ease);
}

.com-card-gif.is-on {
  opacity: 1;
}

.com-card-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--ff-sans);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  /* No scrim — keep the GIF bright; the shadow keeps the text readable. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 0 16px rgba(0, 0, 0, .75);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.com-card:hover .com-card-title {
  opacity: 1;
}


/* MORE sub-nav */
.sub-nav {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
}

.sub-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff-sans);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  transition: color .3s;
}

.sub-nav-btn:hover,
.sub-nav-btn.active {
  color: var(--text);
}

.sub-section {
  display: none;
}

.sub-section.is-active {
  display: block;
}

.map-embed {
  margin-top: 2rem;
  border-radius: 8px;
  overflow: hidden;
}

.map-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* MORE → South America */
.sa-hero {
  width: 100%;
  overflow: hidden;
  margin-top: 2rem;
  /* Match the page bg so the gif's black area screen-blends to exactly this
     grey — the rectangle disappears and only the white shape shows. */
  background: var(--bg);
}

.sa-hero img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: screen;
}

.sa-text {
  max-width: 820px;
  margin: 3rem auto 0;
  text-align: center;
}

.sa-text p {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(240, 236, 229, .78);
  margin: 0;
}

.sa-text p + p {
  margin-top: 1.3rem;
}

.sa-text + .map-embed {
  margin-top: 3.5rem;
}

/* Episode thumbnail grid — uniform 16:9 tiles, in order. */
.sa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 3.5rem;
}

.sa-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0f0f0f;
  padding: 0;
  border: 0;
  display: block;
  width: 100%;
}

.sa-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Playable tiles are clickable (no hover effect). */
.sa-thumb--play { cursor: pointer; }

/* One-line captions above the map and the grid. */
.sa-note {
  text-align: center;
  font-family: var(--ff-sans);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 3.5rem 0 1.4rem;
}

.sa-note + .map-embed,
.sa-note + .sa-grid { margin-top: 0; }

@media (max-width: 1000px) {
  .sa-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  .sa-grid { grid-template-columns: repeat(2, 1fr); }
  /* Full-bleed the map so it fills the narrow screen instead of sitting small
     inside the text column; a bit shorter so it isn't an awkward tall strip. */
  .map-embed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
  }
  .map-embed iframe { height: 68vh; }
}

/* Video lightbox */
#video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  background: rgba(5, 5, 5, .93);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}

#video-lightbox.on {
  opacity: 1;
  pointer-events: auto;
}

.vlb-inner {
  width: 100%;
  max-width: 1100px;
}

.vlb-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.vlb-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.vlb-close {
  position: absolute;
  top: 3vh;
  right: 3vw;
  background: none;
  border: none;
  color: var(--text);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  transition: opacity .3s;
}

.vlb-close:hover { opacity: 1; }

/* ---- Photo lightbox (Photos gallery) ---- */
#photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 7vw;
  background: rgba(5, 5, 5, .95);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
#photo-lightbox.on { opacity: 1; pointer-events: auto; }

.plb-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.plb-close {
  position: absolute;
  top: 3vh;
  right: 3vw;
  background: none;
  border: none;
  color: var(--text);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  transition: opacity .3s;
}
.plb-close:hover { opacity: 1; }
.plb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 1rem;
  opacity: .55;
  transition: opacity .3s;
}
.plb-nav:hover { opacity: 1; }
.plb-prev { left: 1.5vw; }
.plb-next { right: 1.5vw; }
.plb-count {
  position: absolute;
  bottom: 3vh;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--ff-sans);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Film-strip "swipe" hint (mobile only, at rest) ---- */
#strip-hint { display: none; }
@media (max-width: 680px) {
  #strip-hint {
    position: absolute;
    left: 50%;
    bottom: 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    pointer-events: none;
    color: rgba(240, 236, 229, .6);
    opacity: 1;
    transition: opacity .5s var(--ease);
    animation: strip-hint-nudge 2.4s var(--ease) infinite;
  }
  .film-strip-viewport.strip-revealed #strip-hint { opacity: 0; }
  .strip-hint-arrows { font-size: 1.4rem; letter-spacing: .1em; }
  .strip-hint-label {
    font-family: var(--ff-sans);
    font-size: .55rem;
    letter-spacing: .28em;
    text-transform: uppercase;
  }
}
@keyframes strip-hint-nudge {
  0%, 100% { transform: translateX(-50%); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* ---- Detail prev/next pager ---- */
.det-pager {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: 1080px;
  margin: 4rem auto 0;
  padding: 1.6rem 2.5rem 4rem;   /* horizontal gutter keeps prev/next off the edges */
  border-top: 1px solid var(--line);
}
/* Commercial detail already pads .det-inner, so don't double-inset the pager. */
#detail.detail--commercial .det-pager { order: 30; padding-left: 0; padding-right: 0; }
.det-pager-btn {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.det-pager-prev { align-items: flex-start; text-align: left; }
.det-pager-next { align-items: flex-end; text-align: right; margin-left: auto; }
.det-pager-dir {
  font-family: var(--ff-sans);
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s;
}
.det-pager-title {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--text);
  transition: color .3s;
}
.det-pager-btn:hover .det-pager-title { color: #fff; }
.det-pager-btn:hover .det-pager-dir { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  #strip-hint { animation: none; }
}

/* MORE → Photos — freely scattered gallery. Each photo is absolutely
   positioned by JS at a randomised x/y (no column alignment); photos keep
   their natural aspect ratio (no cropping). The container height is set by JS
   so the page scrolls. */
.photos-intro {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(240, 236, 229, .68);
  max-width: none;
  margin: 1rem 0 0;
  text-align: center;
}

/* Full-bleed: break out of the centered #main column to span the viewport. */
.photo-scatter {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 3.5rem;
}

.photo-box {
  position: absolute;
  background: #141414;
  overflow: hidden;
}

.photo-box img {
  width: 100%;
  height: auto;          /* natural height — never crop */
  display: block;
}

/* Placeholder tile (aspect-ratio set by JS so heights vary like real photos) */
.photo-ph {
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-ph::after {
  content: 'PHOTO';
  font-family: var(--ff-sans);
  font-size: .55rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}

/* MORE → Conceptual — centred list of films on the dark bg. */
.concept-intro {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(240, 236, 229, .68);
  max-width: none;
  margin: 1rem 0 0;
  text-align: center;
}

.concept-intro p { margin: 0; }
.concept-intro p + p { margin-top: 1.1rem; }

.concept-list {
  margin-top: 5rem;   /* generous space below the intro */
  text-align: center;
}

/* Space between the top-level blocks (top-two films + the bottom pair).
   Scoped with > so the two films inside .concept-pair stay top-aligned. */
.concept-list > .concept-film + .concept-film,
.concept-list > .concept-film + .concept-pair {
  margin-top: 96px;
}

.concept-title {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 1.4rem;
}

/* Top two films: video + two gifs, centred and a bit smaller. */
.concept-media {
  max-width: 680px;
  margin: 0 auto;
}

.concept-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0d0d0d;
  overflow: hidden;
}

.concept-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Two gifs aligned in a row directly below the film. */
.concept-gifs {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}

.concept-gifs img {
  width: calc(50% - 7px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #0d0d0d;
}

/* Bottom two films side by side. A grid (with the films as display:contents)
   puts both titles in one row and both videos in the next, so the videos stay
   aligned even when one title wraps to more lines than the other. */
.concept-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.concept-pair .concept-film { display: contents; }

.concept-pair .concept-film:nth-child(1) .concept-title { grid-column: 1; grid-row: 1; }
.concept-pair .concept-film:nth-child(1) .concept-video { grid-column: 1; grid-row: 2; }
.concept-pair .concept-film:nth-child(1) .concept-desc  { grid-column: 1; grid-row: 3; }
.concept-pair .concept-film:nth-child(2) .concept-title { grid-column: 2; grid-row: 1; }
.concept-pair .concept-film:nth-child(2) .concept-video { grid-column: 2; grid-row: 2; }
.concept-pair .concept-film:nth-child(2) .concept-desc  { grid-column: 2; grid-row: 3; }

.concept-desc {
  font-family: var(--ff-sans);
  font-size: .82rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 520px;
  margin: 1.1rem auto 0;
}

@media (max-width: 680px) {
  .concept-pair { grid-template-columns: 1fr; gap: 96px; }
  .concept-pair .concept-film { display: block; }
}

/* ABOUT */
.about-inner {
  max-width: 1060px;
}

/* Intro: bio text on the left, portrait on the right */
.about-top {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3rem;
  align-items: start;
  margin: 2.5rem 0 4rem;
}

.about-top .about-text p {
  max-width: none;
}

.about-portrait {
  margin: 0;
}

.about-portrait img {
  width: 100%;
  display: block;
}

/* Bio photo mosaic — tiles a 3×3 grid with no empty corners: one tall
   portrait, two wide shots and three standard cells. */
.bio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 17vw, 230px);
  grid-auto-flow: dense;
  gap: 10px;
  margin-top: 1rem;
}

.bio-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bio-grid .tall { grid-row: span 2; }
.bio-grid .wide { grid-column: span 2; }

@media (max-width: 900px) {
  .about-top {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 640px;
  }
}

@media (max-width: 780px) {
  .bio-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 30vw;
  }
  .bio-grid .tall,
  .bio-grid .wide { grid-row: auto; grid-column: auto; }
}

@media (max-width: 480px) {
  .bio-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 62vw;
  }
}

.about-eye {
  font-family: var(--ff-sans);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

#section-about .about-name {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
  padding: 0;
  border: 0;
  text-transform: none;
  margin-bottom: 2.5rem;
}

.about-text p {
  font-family: var(--ff-sans);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.85;
  color: rgba(240, 236, 229, .72);
  max-width: 640px;
}

.about-text p + p {
  margin-top: 1.3rem;
}

.about-text strong {
  font-weight: 700;
  color: var(--text);
}

.inline-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--muted);
  cursor: pointer;
  transition: text-decoration-color .3s;
}

.inline-link:hover {
  text-decoration-color: var(--text);
}

.about-social {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 4rem;
}

.about-social a {
  display: inline-flex;
  color: var(--muted);
  transition: color .3s var(--ease), transform .3s var(--ease);
}

.about-social a:hover {
  color: var(--text);
  transform: translateY(-3px);
}

.about-copy {
  margin-top: 3.5rem;
  text-align: center;
  font-family: var(--ff-sans);
  font-size: .55rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-social svg {
  width: 24px;
  height: 24px;
  display: block;
}

@media (max-width: 680px) {
  nav {
    padding: 0 1.2rem;
  }

  .nav-toggle {
    display: flex;
  }

  /* The menu drops out of the flex row into a full-width panel below the bar,
     hidden until body.nav-open. */
  .nav-r {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .4rem 1.2rem 1.4rem;
    background: rgba(9, 9, 9, .97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  body.nav-open .nav-r {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-r button {
    width: 100%;
    text-align: left;
    padding: 1rem 0;
    font-size: .8rem;
    border-bottom: 1px solid rgba(240, 236, 229, .07);
  }
  .nav-r button:last-child {
    border-bottom: none;
  }

  #main {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

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

/* FILM DETAIL OVERLAY */
#detail {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s;
}

#detail.on {
  opacity: 1;
  pointer-events: auto;
}

.det-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 9, 9, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.det-back {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff-sans);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s;
}

.det-back:hover {
  color: var(--text);
}

.det-logo {
  font-family: 'Unbounded', var(--ff-sans);
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--text);
  text-shadow: 0 0 5px rgba(240, 236, 229, .22);
  animation: logo-glow 4.5s ease-in-out infinite;
}

.det-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 3rem 2.5rem 6rem;
}

.det-eye {
  font-size: .57rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .7rem;
}

.det-title {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.laurels {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.laurels:empty {
  display: none;
}

.laurel {
  border: 1px solid #222;
  padding: .7rem 1rem;
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}

.det-video {
  aspect-ratio: 16 / 9;
  background: #0f0f0f;
  margin-bottom: .6rem;
}

.det-video:empty {
  display: none;
}

.det-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.det-video--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder shown until a film's video link is added. */
.det-video-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(26, 16, 0, .35), transparent 70%),
    #0d0d0d;
}

.det-video-ph-play {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(240, 236, 229, .5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s;
}

.det-video-ph-play::after {
  content: '';
  border-left: 15px solid rgba(240, 236, 229, .7);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 5px;
}

.det-video-ph-label {
  font-family: var(--ff-sans);
  font-size: .55rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}

.det-stills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-bottom: 2.5rem;
}

.det-stills:empty {
  display: none;
}

.det-stills img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #0f0f0f;
}

/* A full-width still spanning the whole gallery row. */
.det-stills img.wide {
  grid-column: 1 / -1;
}

/* Exactly five stills: fill the grid as 3 on top + 2 larger below (no empty
   cell). A 6-col grid lets the top three span 2 columns each and the bottom
   two span 3 each, so both rows stretch edge to edge. Falls back to the plain
   3-col grid where :has() is unsupported. */
.det-stills:has(img:nth-child(5):last-child) {
  grid-template-columns: repeat(6, 1fr);
}

.det-stills:has(img:nth-child(5):last-child) img:nth-child(-n+3) {
  grid-column: span 2;
}

.det-stills:has(img:nth-child(5):last-child) img:nth-child(n+4) {
  grid-column: span 3;
}

.det-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

.ib {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.ib-l {
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.ib-v {
  font-size: .85rem;
  color: var(--text);
}

.det-body {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 40%);
  gap: 3.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

.det-desc {
  max-width: 560px;
  font-size: .9rem;
  line-height: 1.82;
  color: rgba(240, 236, 229, .68);
}

.det-poster {
  width: 100%;
}

.det-poster:empty {
  display: none;
}

.det-poster img {
  width: 100%;
  display: block;
}

.det-credits {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.det-credits:empty {
  display: none;
}

.creds-group + .creds-group {
  margin-top: 2.5rem;
}

.creds-lbl {
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.creds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem 2rem;
}

.cr {
  display: flex;
  flex-direction: column;
  gap: .18rem;
}

.cr-r {
  font-size: .5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cr-n {
  font-size: .82rem;
  color: var(--text);
}

/* ---- Commercial detail: centred layout (film → text + facts → images) ---- */
#detail.detail--commercial .det-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#detail.detail--commercial .det-eye    { order: 1; margin-bottom: 1rem; }
#detail.detail--commercial .det-title  { order: 2; margin-bottom: 2.6rem; }
#detail.detail--commercial .laurels    { order: 3; justify-content: center; }
#detail.detail--commercial .det-video    { order: 4; width: 100%; max-width: 900px; margin-bottom: 0; }
#detail.detail--commercial .det-body     { order: 5; }
#detail.detail--commercial .det-info     { order: 6; }
#detail.detail--commercial .det-companion{ order: 7; width: 100%; max-width: 900px; margin-top: 3.5rem; }
#detail.detail--commercial .det-stills   { order: 8; width: 100%; margin-top: 3rem; margin-bottom: 0; }
#detail.detail--commercial .det-credits  { order: 9; width: 100%; }

/* Companion video label (mirrors the eyebrow styling). */
.det-companion-label {
  font-family: var(--ff-sans);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* Centred, prominent description */
#detail.detail--commercial .det-body {
  display: block;
  max-width: 660px;
  margin: 3rem 0 0;
}

#detail.detail--commercial .det-desc {
  max-width: none;
  text-align: center;
  font-size: 1rem;
  line-height: 1.95;
  color: rgba(240, 236, 229, .82);
}

/* Facts as a centred row beneath the description */
#detail.detail--commercial .det-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 3.5rem;
  width: auto;
  max-width: 760px;
  margin: 2.4rem 0 0;
  padding: 1.6rem 0 0;
  border-bottom: none;
}

#detail.detail--commercial .det-info .ib {
  align-items: center;
  text-align: center;
}

/* ================= FILM DETAIL — editorial layout ================= */
#detail.detail--film .det-inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Simple film layout — stills above/below a centred text block. */
.sf-stills {
  margin: 4rem 0;
}

.sf-still {
  margin: 0;
  overflow: hidden;
  background: #0f0f0f;
}

.sf-still + .sf-still {
  margin-top: 1.4rem;
}

.sf-still img {
  width: 100%;
  height: auto;
  display: block;
}

.sf-body {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.sf-text {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(240, 236, 229, .8);
  margin: 0;
}

.sf-status {
  margin: 1.6rem 0 0;
  font-family: var(--ff-sans);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.fd-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.6rem 2.5rem 7rem;
}

/* Head — title at the top */
.fd-eye {
  font-family: var(--ff-sans);
  font-size: .57rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .9rem;
}

.fd-titlerow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.fd-title {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: .96;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
}

.fd-meta {
  font-family: var(--ff-sans);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Video — contained, below the title */
.fd-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0d0d0d;
  margin-top: 2.2rem;
  overflow: hidden;
}

.fd-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Title-card image standing in for an unreleased film — contained so the
   (transparent) title graphic is never cropped. */
.fd-video--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Synopsis — centred */
.fd-synopsis {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 4.2rem 0 0;
}

.fd-logline {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.1rem);
  line-height: 1.36;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 1.7rem;
}

.fd-desc {
  font-family: var(--ff-sans);
  font-size: .95rem;
  line-height: 1.85;
  color: rgba(240, 236, 229, .66);
  margin: 0;
}

.fd-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem 3rem;
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line);
}

.fd-fact {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.fd-fact-l {
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.fd-fact-v {
  font-size: .88rem;
  color: var(--text);
}

/* Stills — minimal uniform grid */
.fd-stills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 5rem;
}

.fd-still {
  margin: 0;
  overflow: hidden;
  background: #0f0f0f;
}

.fd-still img {
  width: 100%;
  height: auto;          /* natural aspect — never crop (stills vary in ratio) */
  display: block;
}

/* Festival laurel badge */
.fd-festival {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: 5.5rem 0 1rem;
}

.fd-laurel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  color: var(--text);
}

.fd-branch svg {
  width: 32px;
  height: auto;
  display: block;
  opacity: .85;
}

.fd-branch.right svg { transform: scaleX(-1); }

.fd-laurel-text {
  font-family: var(--ff-sans);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  line-height: 1.6;
  max-width: 320px;
}

.fd-badge-img {
  width: 240px;
  max-width: 60%;
  height: auto;
  display: block;
}

/* Behind the scenes */
.fd-bts { padding: 5rem 0 1rem; }

.fd-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--line);
}

.fd-sectionhead h2 {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.fd-note {
  font-family: var(--ff-sans);
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Behind-the-scenes film — smaller, centred, below the photos. */
.fd-bts-video {
  width: 100%;
  max-width: 680px;
  aspect-ratio: 16 / 9;
  background: #0d0d0d;
  overflow: hidden;
  margin: 5.5rem auto 0;
}

.fd-bts-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.fd-bts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.fd-bts-tile {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0f0f0f;
}

.fd-bts-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fd-bts-tile:nth-child(2) { transform: translateY(30px); }
.fd-bts-tile:nth-child(4) { transform: translateY(-18px); }

.fd-bts-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}

.fd-bts-ph span {
  font-family: var(--ff-sans);
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Credits — centred */
.fd-credits {
  padding-top: 5.5rem;
  text-align: center;
}

.fd-credits-head {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 2.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.fd-credit-group { margin-bottom: 2.8rem; }

.fd-credit-lbl {
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.fd-credit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.5rem 2rem;
  max-width: 780px;
  margin: 0 auto;
}

.fd-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}

.fd-credit-role {
  font-size: .52rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.fd-credit-name {
  font-size: .88rem;
  color: var(--text);
}

@media (max-width: 760px) {
  .fd-wrap { padding: 2rem 1.2rem 4rem; }
  .fd-stills { grid-template-columns: 1fr; gap: 1rem; }
  .fd-bts-grid { grid-template-columns: repeat(2, 1fr); }
  .fd-bts-tile:nth-child(2),
  .fd-bts-tile:nth-child(4) { transform: none; }
}

/* ============= DOCUMENTARY DETAIL — custom full-scroll layout ============= */
#detail.detail--doc .det-inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Simple doc layout — centred body text between the two films. */
.doc-text {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(240, 236, 229, .8);
}

.pt-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.6rem 2.5rem 7rem;
}

/* ~80px breathing space between sections; trailer sits ~40px below the head. */
.pt-section { margin-top: 80px; }
.pt-trailer { margin-top: 40px; }

/* Section 1 — header / opening line */
.pt-eye {
  font-family: var(--ff-sans);
  font-size: .57rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .9rem;
}

.pt-title {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
}

.pt-open {
  font-family: var(--ff-sans);
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0;
}

/* Section 2 — full-width trailer */
.pt-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0d0d0d;
  overflow: hidden;
}

.pt-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Sections 3 & 4 — two-column rows (~40% / ~55%) */
.pt-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5%;
}

.pt-col-l { flex: 0 0 40%; }
.pt-col-r { flex: 0 0 55%; }

/* Map row: centre the map vertically against the synopsis text. */
.pt-row--mid { align-items: center; }

/* Section 3 — info block */
.pt-info { display: flex; flex-direction: column; gap: 1.4rem; }
.pt-fact { display: flex; flex-direction: column; gap: .4rem; }
.pt-fact-l {
  font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(240, 236, 229, .62);
}
.pt-fact-v { font-size: .98rem; color: var(--text); }

/* Corner-accent frame — same L-shaped technique as the poster cards. */
.pt-corners { position: relative; }
.pt-corners::before,
.pt-corners::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .3;
  transition: opacity .3s var(--ease);
}
.pt-corners::before {
  background:
    linear-gradient(#fff, #fff) left top / 18px 1px no-repeat,
    linear-gradient(#fff, #fff) left top / 1px 18px no-repeat,
    linear-gradient(#fff, #fff) right top / 18px 1px no-repeat,
    linear-gradient(#fff, #fff) right top / 1px 18px no-repeat;
}
.pt-corners::after {
  background:
    linear-gradient(#fff, #fff) left bottom / 18px 1px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 1px 18px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 18px 1px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 1px 18px no-repeat;
}

/* Section 3 — press quote */
.pt-quote { padding: 2.4rem 2.2rem; margin: 0; }
.pt-quote + .pt-quote { margin-top: 1.6rem; }

.pt-quote-text {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

.pt-quote-src {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--ff-sans);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240, 236, 229, .6);
}

/* Section 4 — map. The image is a white outline + red marker on black;
   matching the container to the page bg + screen-blend makes the black blend
   away so only the outline and marker show. */
.pt-map {
  width: 100%;
  background: var(--bg);
}
.pt-map img {
  width: 100%;
  height: auto;
  display: block;
  /* The map's "black" is a near-black tint. `lighten` clamps every pixel darker
     than the page background straight to the page colour, so the map's black
     merges into the page exactly — no rectangle, and no device-dependent
     screen-blend/filter quirks (which showed a faint box on mobile). */
  mix-blend-mode: lighten;
}

/* Placeholder (shown only until a map image is set) keeps a fixed box. */
.pt-map.pt-ph {
  aspect-ratio: 4 / 3;
  background: #111;
}

/* Section 4 — synopsis */
.pt-synopsis p {
  font-family: var(--ff-sans);
  font-size: 15px;
  line-height: 1.85;
  color: rgba(240, 236, 229, .82);
  margin: 0;
}
.pt-synopsis p + p { margin-top: 1.2rem; }

/* Section 5 — stills in two rows of three. 16:9 tiles so the (16:9) stills
   show uncropped. */
.pt-stills-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pt-still {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.pt-still img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Shared placeholder label (map + title) */
.pt-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}
.pt-map.pt-ph span,
.pt-titleimg.pt-ph span {
  font-family: var(--ff-sans);
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Section 6 — large title image + closing line */
.pt-titleimg {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0d0d;
}
.pt-titleimg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pt-closing {
  max-width: 720px;
  margin: 3rem auto 0;
  text-align: center;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--text);
}

@media (max-width: 760px) {
  .pt-wrap { padding: 2rem 1.2rem 4rem; }
  .pt-section { margin-top: 56px; }
  .pt-row { flex-direction: column; gap: 2rem; }
  .pt-col-l, .pt-col-r { flex: 1 1 auto; width: 100%; }
  .pt-stills-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .det-nav {
    padding: 1.1rem 1.2rem;
  }

  .det-inner {
    padding: 2rem 1.2rem 4rem;
  }

  .det-pager {
    padding: 1.4rem 1.2rem 3rem;   /* match the mobile page gutter */
  }

  .det-stills {
    grid-template-columns: 1fr 1fr;
  }

  .det-body {
    grid-template-columns: 1fr;
  }

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

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}