/* ═══════════════════════════════════════════════════════════════════
   TELPURNAR — Visual Identity v6
   Telpur Productions "sticker-poster" theme — playful, chunky, bold
   Luckiest Guy + Fredoka · mint / raspberry / gold / cream
   Layout & scroll motion unchanged from v5 — skin only.
═══════════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Reference palette (exact hexes) — Blái / Guli / Bleiki */
  --bg:          #B0FFEC;   /* Blái — main background */
  --surface:     #FFF8E6;   /* cream — cards */
  --gold:        #FFE274;   /* Guli — gallery band, accents, play buttons */
  --crimson:     #CC4D72;   /* Bleiki — brand, headings, borders */
  --crimson-deep:#AF4067;   /* deeper bleiki — music rows */

  /* Kept token names so existing rules resolve; remapped to the new roles */
  --surface-soft:#FFE274;   /* gallery band = guli */
  --surface-2:   #9DEDD2;   /* slightly deeper blái (empty-media tint) */

  --ink:         #CC4D72;   /* headings / nav / brand = bleiki */
  --ink-soft:    #3E1B2A;   /* dark plum — body copy */
  --ink-faint:   #8A5A66;   /* muted plum — captions / tertiary */

  --moss:        #FFE274;   /* generic accent = guli */
  --line:        #CC4D72;   /* borders = bleiki */
  --line-soft:   #CC4D72;

  --font-serif:  'Luckiest Guy', cursive;          /* chunky display */
  --font-body:   'Fredoka', system-ui, sans-serif; /* rounded body */

  /* Signature chunky sticker shadow (hard offset, no blur) */
  --sticker:     5px 6px 0 var(--crimson);
  --sticker-lg:  8px 9px 0 var(--crimson);

  /* Long, gentle easings for "smooth" motion */
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-glide:  cubic-bezier(0.65, 0, 0.35, 1);
  /* Bouncy easing for the playful hover pops */
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem;
  --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;
  --sp-32:8rem; --sp-40:10rem;

  --max-w: 1280px;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
}

/* ─── RESET ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* No rubber-band at the ends and no pull-to-refresh at the top. Both fight
     Lenis's inertia on a phone: the browser's own overscroll runs on top of
     the smooth-scroll and the page ends up feeling loose at the bottom. */
  overscroll-behavior-y: none;
}
body {
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,video { display: block; max-width: 100%; }
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--ink-soft); }

/* Display headings all use the chunky font — never faux-italic */
.hero-title, .film-heading, .music-heading, .director-name,
.footer-brand, .loader-mark, .nav-logo,
.detail-value, .still-num, .tl-num, .dp-initial {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

/* ─── LENIS smooth scroll ─────────────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ─── DRIFTING DUST overlay (ambient particles) ──────────────────── */
.dust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 400;
}

/* ─── LOADER ─────────────────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease-soft);
}
.loader.done { opacity: 0; pointer-events: none; }
.loader-mark {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--crimson);
  text-shadow: 3px 4px 0 var(--gold);
  opacity: 0;
  animation: loader-breathe 1.6s var(--ease-soft) infinite alternate;
}
@keyframes loader-breathe {
  from { opacity: 0.35; transform: rotate(-2deg) scale(0.98); }
  to   { opacity: 1;    transform: rotate(2deg) scale(1.02); }
}

/* ─── NAV ────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: var(--sp-5) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.5s var(--ease-soft), border-color 0.5s ease, padding 0.4s ease;
  border-bottom: 3px solid transparent;
}
.nav.scrolled {
  background: rgba(176,255,236,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--crimson);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.nav-logo {
  font-size: 1.7rem;
  color: var(--crimson);
  transition: transform 0.3s var(--ease-pop);
}
.nav-logo:hover { transform: rotate(-3deg) scale(1.04); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav-links a {
  font-family: var(--font-serif);
  /* Bigger tap targets per the confirmed change list ("Stækka takkana efst") */
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--gold);
  text-shadow:
    -1.5px -1.5px 0 var(--crimson),
     1.5px -1.5px 0 var(--crimson),
    -1.5px  1.5px 0 var(--crimson),
     1.5px  1.5px 0 var(--crimson);
  transition: color 0.3s ease;
  position: relative;
  padding: var(--sp-2) var(--sp-2);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-soft);
}
.nav-links a:hover { color: var(--surface); }
.nav-links a:hover::after { transform: scaleX(1); }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--crimson);
  padding: var(--sp-2) var(--sp-4);
  border: 3px solid var(--crimson);
  border-radius: 100px;
  background: var(--surface);
  min-height: 44px;
  transition: transform 0.3s var(--ease-pop), box-shadow 0.3s ease;
}
.lang-toggle:hover { transform: translateY(-2px); box-shadow: 3px 4px 0 var(--crimson); }
.lt-dot { opacity: 0.45; }
.lt-is, .lt-en { opacity: 0.4; transition: opacity 0.3s ease; }
.lt-is.active, .lt-en.active { opacity: 1; }

.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* ─── SECTION EYEBROW — default: small gold pill ─────────────────── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  background: var(--gold);
  border: 2px solid var(--crimson);
  border-radius: 100px;
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
}

/* ─── HERO ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--sp-32) var(--pad-x) var(--sp-24);
  overflow: hidden;
  background: var(--bg);   /* flat mint — photo-ready (slides sit behind) */
}

/* WebGL displacement canvas — behind scrim, above bg (only when photos added) */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.9s var(--ease-soft);
}
.hero.gl-active .hero-canvas { opacity: 1; }
.hero.gl-active .hero-slides { display: none; }

/* Slideshow layers (CSS fallback) — kept for when film stills are added */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 1;
  filter: blur(14px);
  clip-path: inset(0 0 0 100%);
  transition:
    opacity 1.5s var(--ease-glide),
    clip-path 1.7s var(--ease-glide),
    filter 1.5s var(--ease-soft);
}
.hero-slide:nth-child(even) { clip-path: inset(0 100% 0 0); }
.hero-slide.is-active {
  opacity: 1;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
  z-index: 2;
}
.hero-slide-img {
  position: absolute;
  inset: -2%;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}
.hero-slide.is-active .hero-slide-img {
  animation: kenburns 8.5s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.13) translate(-1.5%, -1%); }
}

/* Scrim stays transparent on the flat mint hero; add a dark gradient here
   again if real film stills are dropped into .hero-slides later. */
.hero-scrim { position: absolute; inset: 0; z-index: 3; background: none; }

.hero-content {
  position: relative;
  z-index: 4;
  max-width: var(--max-w);
  width: 100%;
  color: var(--ink-soft);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
  background: var(--gold);
  border: 2px solid var(--crimson);
  border-radius: 100px;
  padding: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-6);
  opacity: 0;
  transform: translateY(-10px);
}
.hero-title {
  opacity: 0;
  transform: translateY(28px);
}
.hero-logo {
  width: min(92vw, 720px);
  height: auto;
  margin: 0 auto;
}
.hero-meta {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(12px);
}
.hero-meta-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--crimson);
}

/* Slideshow dots */
.hero-dots {
  position: absolute;
  z-index: 4;
  bottom: var(--sp-8);
  right: var(--pad-x);
  display: flex;
  gap: 10px;
  opacity: 0;
}
.hero-dot {
  width: 28px;
  height: 6px;
  border-radius: 6px;
  border: 2px solid var(--crimson);
  background: transparent;
  transition: background 0.4s ease, width 0.4s var(--ease-soft);
}
.hero-dot.active { background: var(--crimson); width: 44px; }

.hero-scroll {
  position: absolute;
  z-index: 4;
  bottom: var(--sp-8);
  left: var(--pad-x);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  opacity: 0;
  color: var(--crimson);
}
.hero-scroll-line {
  width: 3px;
  height: 34px;
  border-radius: 3px;
  background: var(--crimson);
  animation: scroll-pulse 2.2s ease infinite;
}
@keyframes scroll-pulse {
  0%,100% { opacity: 0.4; transform: scaleY(0.6); }
  50%     { opacity: 1;   transform: scaleY(1); }
}
.hero-scroll-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  rotate: 180deg;
}

/* Hero intro — staggered entrance once page is ready */
.hero.is-ready .hero-eyebrow {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-soft) 0.1s, transform 0.9s var(--ease-pop) 0.1s;
}
.hero.is-ready .hero-title {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--ease-soft) 0.22s, transform 1.1s var(--ease-pop) 0.22s;
}
.hero.is-ready .hero-meta {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-soft) 0.62s, transform 0.9s var(--ease-soft) 0.62s;
}
.hero.is-ready .hero-dots { opacity: 1; transition: opacity 0.9s ease 0.8s; }
.hero.is-ready .hero-scroll { opacity: 1; transition: opacity 0.9s ease 0.9s; }

/* ─── ABOUT (Hanna & Guðríður) ───────────────────────────────────── */
.duo {
  position: relative;
  background: var(--bg);
  padding: clamp(var(--sp-20), 8vw, var(--sp-32)) var(--pad-x);
  border-top: 3px solid var(--crimson);
  text-align: center;
}
/* Wide so the flexible middle column pushes the two directors out to the
   edges — the copy stays narrow and centred between them. */
.duo-inner { max-width: 1560px; margin: 0 auto; }
.duo-heading {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--crimson);
  text-shadow: 3px 4px 0 var(--gold);
  margin: var(--sp-3) 0 var(--sp-6);
}
.duo-bio {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ─── TELPURNAR — film section (poster + info + stills row) ──────── */
.film {
  position: relative;
  background: var(--bg);
  padding: clamp(var(--sp-24), 9vw, var(--sp-40)) var(--pad-x);
  border-top: 3px solid var(--crimson);
}

/* ─── TELPURNAR PROJECT WORLD ────────────────────────────────────── */
/* One quiet outer shape connects Myndin, Stillur, Fólkið and Tónverk.
   It deliberately does not clip: sticky gallery positioning must remain
   relative to the viewport while the outline visually holds the group. */
.film-world {
  --film-world-top-radius: clamp(28px, 4vw, 54px);
  --film-world-bottom-radius: clamp(58px, 7vw, 104px);
  position: relative;
  isolation: isolate;
  width: calc(100% - clamp(20px, 3vw, 52px));
  max-width: 1720px;
  margin: clamp(var(--sp-12), 7vw, var(--sp-24)) auto;
  border-radius:
    var(--film-world-top-radius) var(--film-world-top-radius)
    var(--film-world-bottom-radius) var(--film-world-bottom-radius);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(62, 27, 42, 0.16);
}
.film-world::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 4px solid var(--crimson);
  border-radius: inherit;
  box-shadow: 10px 12px 0 rgba(204, 77, 114, 0.24);
  pointer-events: none;
}
.film-world-label {
  position: absolute;
  top: 0;
  left: clamp(var(--sp-5), 4vw, var(--sp-12));
  z-index: 6;
  transform: translateY(-50%) rotate(-1.5deg);
  padding: 0.55rem 1rem;
  border: 3px solid var(--crimson);
  border-radius: 999px;
  background: var(--gold);
  color: var(--crimson);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 4px 5px 0 var(--crimson);
}
.film-world > .film {
  border-top: 0;
  border-radius:
    var(--film-world-top-radius) var(--film-world-top-radius) 0 0;
}
.film-world > .music {
  border-radius:
    0 0 var(--film-world-bottom-radius) var(--film-world-bottom-radius);
}
.film-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(var(--sp-10), 6vw, var(--sp-24));
  align-items: center;
}
.film-poster-wrap { position: relative; }
.film-poster { display: flex; flex-direction: column; gap: var(--sp-4); }
.poster-caption {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.film-poster-art {
  aspect-ratio: 2/3;
  max-width: 380px;
  border: 4px solid var(--crimson);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: var(--surface);
  box-shadow: var(--sticker-lg);
  transition: transform 0.4s var(--ease-pop), box-shadow 0.4s var(--ease-pop);
}
.film-poster-art:hover { transform: translate(-3px,-3px) rotate(-1deg); box-shadow: 11px 12px 0 var(--crimson); }
.film-poster-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s var(--ease-soft);
}
.film-poster-art:hover .film-poster-img { transform: scale(1.05); }
.film-heading {
  font-size: clamp(2.8rem, 6.5vw, 6rem);
  color: var(--crimson);
  text-shadow: 3px 4px 0 var(--gold);
  margin-bottom: var(--sp-6);
}
.film-description {
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 46ch;
  /* Paragraph rhythm inside the block; only the last one opens the bigger gap
     down to the screening details. */
  margin-bottom: var(--sp-5);
}
.film-description:last-of-type { margin-bottom: var(--sp-10); }
/* The opening line names the film and its authors — it carries more weight
   than the synopsis that follows it. */
.film-lede {
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  font-weight: 600;
  color: var(--crimson);
}
/* Each detail becomes its own cream sticker card */
.film-details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.film-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 3px solid var(--crimson);
  border-radius: 16px;
  box-shadow: var(--sticker);
  transition: transform 0.3s var(--ease-pop);
}
.film-detail:hover { transform: translate(-2px,-2px); }
.detail-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  /* Keep short screening labels such as "Sýnt í" and "dagana" on one line;
     the corresponding value may wrap when space is tight. */
  white-space: nowrap;
}
.detail-value {
  font-size: 1.4rem;
  color: var(--crimson);
}

/* ─── GALLERY (gold band) ────────────────────────────────────────── */
/* Used by BOTH horizontal bands — Framleiðslumyndir and Stillur úr myndinni.
   Base = mobile: a normal vertical section with a native horizontal swipe
   row. The desktop scroll-jack is layered on in the @media block below. */
.gallery {
  position: relative;
  padding: clamp(var(--sp-16), 8vw, var(--sp-24)) 0;
  background: var(--gold);
  border-top: 3px solid var(--crimson);
  border-bottom: 3px solid var(--crimson);
}
.gallery-pin { position: relative; }
.gallery-sticky { display: flex; flex-direction: column; }
.gallery-header {
  width: 100%;   /* fill the sticky column so max-width + margin auto center it */
  max-width: var(--max-w);
  margin: 0 auto var(--sp-8);
  padding: 0 var(--pad-x);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
/* Gallery eyebrow reads as the big section heading (no pill) */
.gallery-header .section-eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--crimson);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  text-shadow: 3px 4px 0 var(--surface);
}
.gallery-heading-group {
  display: grid;
  gap: var(--sp-2);
}
.gallery-view-hint {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--crimson);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gallery-view-hint::before {
  content: '⤢';
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.78rem;
  line-height: 1;
}
.gallery-nav-row { display: flex; align-items: center; }
.gallery-arrows { display: flex; gap: var(--sp-3); }
.gallery-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border: 3px solid var(--crimson);
  border-radius: 50%;
  color: var(--crimson);
  background: var(--surface);
  transition: transform 0.3s var(--ease-pop), background 0.3s ease, color 0.3s ease;
}
.gallery-arrow:hover { background: var(--crimson); color: var(--surface); transform: translateY(-3px); }
.gallery-arrow svg { width: 18px; height: 18px; stroke-width: 2.5; }

.gallery-track {
  display: flex;
  --gallery-gap: clamp(16px, 2vw, 28px);
  gap: var(--gallery-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--pad-x) var(--sp-3);
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item {
  flex: 0 0 clamp(320px, 68vw, 860px);
  scroll-snap-align: start;
}
.gallery-still {
  aspect-ratio: 16/10;
  border: 4px solid var(--crimson);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--sticker-lg);
  transition: transform 0.5s var(--ease-pop), box-shadow 0.5s var(--ease-pop);
}

.gallery-item:hover .gallery-still {
  transform: translate(-3px,-4px);
  box-shadow: 11px 13px 0 var(--crimson);
}
.gallery-still::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(62,27,42,0.28), transparent 55%);
  opacity: 0.7;
  transition: opacity 0.6s ease;
}
.gallery-item:hover .gallery-still::after { opacity: 0.3; }
.still-num {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-5);
  z-index: 1;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  color: var(--crimson);
  text-shadow: 2px 2px 0 var(--surface);
}
.gallery-progress-wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: var(--sp-8) auto 0;
  padding: 0 var(--pad-x);
}
.gallery-progress-track {
  height: 6px;
  background: var(--surface);
  border: 2px solid var(--crimson);
  border-radius: 100px;
  overflow: hidden;
}
.gallery-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ─── STILL/POSTER → LIGHTBOX TRIGGER ────────────────────────────── */
/* Gallery stills and the poster can open in a lightbox. BTS frames retain
   their editorial crop; the finished-film stills are already shown whole. */
.gallery-still.is-zoomable,
.film-poster-art.is-zoomable { cursor: zoom-in; }
.gallery-still.is-zoomable::before,
.film-poster-art.is-zoomable::before {
  content: '⤢';
  position: absolute;
  z-index: 2;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 3px solid var(--crimson);
  border-radius: 50%;
  background: var(--surface);
  color: var(--crimson);
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-pop);
}
.gallery-item:hover .gallery-still.is-zoomable::before,
.gallery-still.is-zoomable:focus-visible::before,
.film-poster-art.is-zoomable:hover::before,
.film-poster-art.is-zoomable:focus-visible::before { opacity: 1; transform: none; }
/* Touch devices have no hover to reveal it, and this is exactly where the
   crop hurts most — so on touch the affordance is simply always there. */
@media (hover: none) {
  .gallery-still.is-zoomable::before,
  .film-poster-art.is-zoomable::before { opacity: 1; transform: none; }
}

/* ─── LIGHTBOX — the whole, uncropped frame ──────────────────────── */
/* Shown/hidden with opacity + visibility rather than a JS-driven animation.
   visibility also takes it out of the tab order and the a11y tree, and both
   directions are pure CSS — so the exit is the exact reverse of the entry
   and can never half-play the way the director card's used to. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: clamp(12px, 3vw, 32px);
  background: rgba(62, 27, 42, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s var(--ease-soft), visibility 0.26s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-figure {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}
.lightbox-img {
  display: block;
  /* contain, never cover — the entire point is that nothing is cropped. */
  object-fit: contain;
  max-width: 100%;
  max-height: 78svh;
  width: auto;
  height: auto;
  border: 4px solid var(--gold);
  border-radius: 16px;
  background: var(--bg);
  transform: scale(0.96);
  transition: transform 0.3s var(--ease-soft);
}
.lightbox.is-open .lightbox-img { transform: none; }
.lightbox-btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-pop);
}
.lightbox-btn:hover { background: var(--gold); color: var(--crimson); }
.lightbox-btn:active { transform: scale(0.94); }
.lightbox-btn[hidden] { visibility: hidden; display: grid; }  /* hold the column width */
.lightbox-close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  z-index: 1;
}
/* Phone: the arrows move under the picture so the frame gets the full width.
   Swipe works too, but a visible control beats a hidden gesture. */
@media (max-width: 700px) {
  .lightbox {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: var(--sp-5);
  }
  .lightbox-figure { grid-column: 1; }
  .lightbox-img { max-height: 66svh; }
  .lightbox-nav-row {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
  }
  .lightbox-btn { width: 60px; height: 60px; }   /* comfortable thumb target */
}
/* Desktop puts the arrows in the side columns flanking the picture, so the
   row wrapper is only a layout device on phones — display:contents dissolves
   it and lets the buttons become grid items themselves.
   Every item is placed on row 1 EXPLICITLY: with auto-placement the browser
   walks the grid forwards only, so once the "next" button had claimed column
   3, the figure could no longer be placed back in column 2 of the same row
   and got pushed onto a second row — which parked both arrows up at the top
   of the screen on top of the close button. */
@media (min-width: 701px) {
  .lightbox-nav-row { display: contents; }
  .lightbox-prev   { grid-area: 1 / 1; }
  .lightbox-figure { grid-area: 1 / 2; }
  .lightbox-next   { grid-area: 1 / 3; }
}

/* Scroll-jack: the sticky viewport holds for the height of
   .gallery-pin (set by JS) while JS translates .gallery-track sideways.
   Pure CSS sticky + live getBoundingClientRect math — no ScrollTrigger,
   so it can't desync with the smooth-scroll or mis-measure under late fonts. */
@media (min-width: 768px) {
  .gallery { padding: 0; }
  .gallery-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    justify-content: center;
    overflow: hidden;
    padding: var(--sp-8) 0;
  }
  /* Trailing space after the last still = exactly one inter-item gap, so the
     rhythm of the filmstrip is unbroken from the first frame to the end
     (it used to be 3x, which read as an empty slot). */
  .gallery-track { padding-right: var(--gallery-gap); }
  .gallery-track {
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
    padding-bottom: 0;
    align-items: center;
  }
  /* Height-driven sizing so each still fills the sticky viewport from
     top to bottom instead of being capped by a width-first aspect-ratio. */
  .gallery-item { flex: 0 0 auto; }
  .gallery-still { height: min(74vh, 760px); width: auto; }
  .gallery-arrows { display: none; }   /* page scroll drives the row */
}

/* ─── GALLERY on phones — vertical scroll drives oversized stills ─── */
@media (max-width: 767px) {
  .gallery { padding: 0; }
  .gallery-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    justify-content: flex-start;
    overflow: hidden;
    /* Clear the fixed navigation and anchor the heading instead of vertically
       centring a stack taller than short phone viewports, which clipped the
       top quarter of “Framleiðslumyndir”. */
    padding: max(88px, calc(env(safe-area-inset-top) + 72px)) 0 var(--sp-4);
  }
  /* Each frame is wider than the phone so the viewport crops into the image
     while vertical scrolling carries the complete filmstrip past it. */
  .gallery-item { flex: 0 0 min(150vw, 780px); }
  .gallery-still {
    width: 100%;
    height: min(64svh, 580px);
    aspect-ratio: auto;
    border-width: 3px;
    border-radius: 16px;
  }
  .gallery-track {
    overflow: visible;
    scroll-snap-type: none;
    align-items: center;
    will-change: transform;
    /* Trailing space = one gap, matching the spacing between the frames. */
    padding: 0 var(--gallery-gap) 0 var(--pad-x);
  }
  .gallery-header {
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
  }
  .gallery-progress-wrap { margin-top: var(--sp-4); }
  .gallery-arrows { display: none; }
}

/* ─── TEYMIÐ — merged into the Um okkur section ──────────────────── */
/* ── Um okkur + Teymið merged: the two directors flank the studio intro ──
   Desktop: [ Hanna ]  [ Um okkur copy ]  [ Guðríður ].
   Card styling below (.director-card etc.) is shared, layout-agnostic. */
.duo-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 320px);
  align-items: start;   /* an expanding card grows alone; siblings hold height */
  gap: clamp(var(--sp-6), 5vw, var(--sp-20));
  margin-top: var(--sp-12);
  text-align: left;     /* keep card internals left; copy re-centres itself */
}
.duo-copy {
  text-align: center;
  align-self: center;   /* centre the intro against the taller card column */
  max-width: 34rem;
  margin: 0 auto;
}
.duo-copy .section-eyebrow { margin-left: auto; margin-right: auto; }
/* Tablet: intro on top spanning full width, the two cards below it side by side */
@media (max-width: 900px) {
  .duo-layout { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
  .duo-copy { grid-column: 1 / -1; order: -1; margin-bottom: var(--sp-8); }
}
/* Phone: one clean column, in reading order — Um okkur, then Hanna, then
   Guðríður (order:-1 on the copy above already puts the intro first). */
@media (max-width: 700px) {
  .duo-layout {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
    gap: var(--sp-8);
    margin-top: var(--sp-8);
  }
  .duo-copy { max-width: none; }
  /* Preserve the complete portrait composition on phones. */
  .duo-layout .director-portrait { aspect-ratio: 7/8; }
  /* No scale-up on phones: a 1.06 card + its offset shadow would push past
     the viewport and create a horizontal scrollbar. Lift + shadow + the
     receding siblings still sell "this one came to the front". */
  .team-card.is-open {
    transform: translateY(-4px);
    box-shadow: 9px 11px 0 var(--crimson);
  }
  .team-card.is-open:hover { transform: translateY(-6px); }
  .duo-layout.has-open .team-card:not(.is-open) { transform: none; }
}
/* Whole card is a cream sticker card */
.director-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 4px solid var(--crimson);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sticker-lg);
  /* opacity MUST be listed: the receding-sibling dim below sets opacity, and
     without it here the other card snapped to 50% in a single frame while the
     chosen card animated smoothly — the tell that broke the whole illusion.
     Easing is the smooth decelerate curve, not the bouncy --ease-pop: an
     overshoot on a card this large reads as a wobble, not as polish. */
  transition:
    transform 0.42s var(--ease-soft),
    box-shadow 0.42s var(--ease-soft),
    opacity 0.42s var(--ease-soft),
    background-color 0.5s ease 0.14s;
}
.director-card:hover { transform: translate(-3px,-4px); box-shadow: 11px 13px 0 var(--crimson); }
.director-portrait {
  width: 100%;
  aspect-ratio: 7/8;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-bottom: 4px solid var(--crimson);
}
.dp-initial {
  font-size: clamp(5rem, 12vw, 10rem);
  color: var(--crimson);
  text-shadow: 3px 4px 0 var(--surface);
}
.director-portrait.has-photo { background: var(--surface); }
.dp-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The source portraits differ slightly from the shared 7:8 card ratio. A
   minimal crop (about 3% for Hanna and 6% for Guðríður) fills the closed card
   cleanly without the blue background frame; the expanded view stays fully
   contained so the complete portraits remain available. */
.team-card:not(.is-featured) .dp-photo { object-fit: cover; }
/* Text sits padded inside the card body */
.director-role {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: var(--sp-5) var(--sp-6) 0;
  margin-bottom: var(--sp-2);
}
.director-name {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  color: var(--crimson);
  padding: 0 var(--sp-6);
  margin-bottom: var(--sp-3);
}
.director-bio {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
  padding: 0 var(--sp-6) var(--sp-6);
}

/* ─── TEAM CARD — click-to-reveal body ───────────────────────────── */
/* Collapsed by default: photo + name only. Opening does three things at
   once: the card scales up and lifts to the FRONT (z-index + big shadow),
   a gold disc BLOOMS OUT IN A CIRCLE from under the "+", and the role/bio
   ride in behind it. Height still animates via the 0fr→1fr grid-row trick
   (auto height, no magic numbers) so layout stays honest. */
.team-card { cursor: pointer; position: relative; z-index: 1; }

/* Open card comes to the front */
.team-card.is-open {
  z-index: 20;
  transform: scale(1.06) translateY(-6px);
  box-shadow: 14px 17px 0 var(--crimson);
}
/* Beats .director-card:hover (0,2,0) so hover can't cancel the lift */
.team-card.is-open:hover { transform: scale(1.06) translateY(-11px); }

/* The selected director becomes a centred feature card. `translate` handles
   centring independently, leaving `transform` free for the FLIP animation
   that carries the card from its grid position into the foreground. */
.team-card.is-featured {
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 1001;
  width: min(880px, calc(100vw - 48px));
  /* Height follows the content. It was a fixed 720px, which left a large empty
     field under four lines of bio — and empty space in the loudest colour of
     the palette is exactly what made this panel feel heavy. */
  height: auto;
  min-height: 360px;
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-columns: minmax(240px, 40%) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  overflow-y: auto;
  transform: none;
  /* Centre origin: the FLIP scales this card about its own centre and
     matches centre-to-centre, so the growth reads as evenly weighted
     rather than unfolding out of the top-left corner. */
  transform-origin: center center;
  /* Cream, not gold. The collapsed card is already a cream sticker card, so
     the open card now reads as the SAME card enlarged instead of a different
     yellow object appearing. Gold drops to an accent — the role pill — where
     it can actually mean something. Cream also lets the photo and the crimson
     name carry the card, which is what you're there to look at. */
  background: var(--surface);
  box-shadow: 16px 19px 0 var(--crimson);
}
.team-card.is-open.is-featured:hover { transform: none; }
/* The photo bleeds to the card's edges and fills whatever height the text
   column asks for — no 520px floor forcing the card taller than its content. */
.team-card.is-featured .director-portrait {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-right: 4px solid var(--crimson);
  border-bottom: 0;
}
.team-card.is-featured .director-name,
.team-card.is-featured .team-card-body { grid-column: 2; }
.team-card.is-featured .director-name {
  align-self: end;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  color: var(--crimson);
  padding: var(--sp-8) var(--sp-8) 0;
  line-height: 1.1;
}
/* Role becomes a small gold pill — the one place gold appears on this card,
   and the same pill language the section eyebrows already use. Dark plum on
   gold rather than crimson on gold: at this size crimson-on-gold sits around
   3.4:1, under the 4.5:1 small-text minimum, while plum clears 9:1. */
.team-card.is-featured .director-role {
  display: inline-block;
  align-self: start;
  background: var(--gold);
  color: var(--ink-soft);
  border: 2px solid var(--crimson);
  border-radius: 100px;
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}
/* One padding owner inside the featured body — the role and bio drop their own
   so the two don't stack into a double inset. */
.team-card.is-featured .team-card-body-inner {
  padding: var(--sp-5) var(--sp-8) var(--sp-8);
}
.team-card.is-featured .director-bio {
  /* ~60ch keeps the measure inside the comfortable reading range instead of
     running the full width of an 880px card. */
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  padding: 0;
}
.team-card-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* Deliberately a flat scrim with NO backdrop-filter.
     The drifting-dust canvas is a full-viewport <canvas> that repaints every
     frame at z-index 400 — directly beneath this element. A backdrop-filter
     has to re-blur everything below it whenever that content changes, so the
     dust was forcing a full-viewport blur recomputation on every single frame
     of the transition. That, not the easing, is what made this feel rough.
     A solid scrim costs one composited layer and nothing per frame. */
  background: rgba(62, 27, 42, 0.72);
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
  /* Matched to the card (380ms open / 280ms close) so scrim and card
     arrive and leave together instead of trailing each other. */
  transition: opacity 0.32s var(--ease-soft), visibility 0.32s;
}
.team-card-backdrop.is-visible { opacity: 1; visibility: visible; }
/* NOTE: no overflow:hidden here on purpose. Scroll locking is done in JS —
   via Lenis's own stop()/start() when it's running, position:fixed otherwise.
   Setting body overflow directly collapses the document's scrollable height,
   which made Lenis clamp its position and then glide back on release. This
   class is now purely a state hook (see the .dust rule below). */
/* Drop the ambient dust layer entirely while a card is open. It's decorative,
   it's invisible behind the scrim anyway, and a full-viewport canvas
   repainting every frame is the last thing this transition needs competing
   with it. The loop also stops drawing (see initDust in script.js). */
body.team-card-open .dust { display: none; }
.team-card-placeholder {
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}

/* …and everything else recedes so "front" actually reads as front */
.duo-layout.has-open .team-card:not(.is-open) {
  opacity: 0.5;
  transform: scale(0.94);
}
.duo-layout.has-open .duo-copy {
  opacity: 0.42;
  transition: opacity 0.5s var(--ease-soft);
}
.duo-copy { transition: opacity 0.5s var(--ease-soft); }
.team-card .director-name {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
/* Keep the action visible in both states: collapsed cards advertise that
   more information exists, and expanded cards name the reverse action. */
.team-card-more {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crimson);
  white-space: nowrap;
}
.team-card-more-open { display: none; }
.team-card.is-open .team-card-more-closed { display: none; }
.team-card.is-open .team-card-more-open { display: inline; }
.team-card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease-soft);
}
.team-card.is-open .team-card-body { grid-template-rows: 1fr; }
.team-card-body-inner {
  overflow: hidden;
  min-height: 0;
}

/* TEARDOWN — the one frame where .is-open comes off.
   The reveal transitions below (0.55s row collapse, 0.28s text fade) only
   START when .is-open is removed — which is the moment the card also drops
   back into normal document flow. Left to run, they played out with the card
   in flow and fully opaque: the bio flashed back into view and Framleiðslumyndir
   got shoved down and pulled back. An exit has to be the reverse of the entry,
   not the entry interrupted. So the card re-enters flow already collapsed:
   kill the transitions for that single frame, then hand them back (see
   closeCard in script.js). */
.team-card.is-closing,
.team-card.is-closing .team-card-body,
.team-card.is-closing .director-role,
.team-card.is-closing .director-bio,
.team-card.is-closing .team-card-more { transition: none !important; }
/* The gold disc that used to bloom here has been removed. It scaled a 26px
   circle by 72x, which the compositor rasterises once at its small size and
   then upscales — the edge arrived visibly soft and pixelated. It was also
   a second, competing motion fighting the card's own flight to the front.
   The feature card already paints itself gold, so the wash is free. */

/* Role + bio settle in just after the card lands, so the eye follows the
   card first and the text second — one idea at a time. The 80ms gap between
   them is a stagger you feel as rhythm; past ~100ms it reads as lag. */
.team-card .director-role,
.team-card .director-bio {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.28s var(--ease-soft) 0.10s,
    transform 0.28s var(--ease-soft) 0.10s;
}
.team-card .director-bio { transition-delay: 0.16s; }
.team-card.is-open .director-role,
.team-card.is-open .director-bio { opacity: 1; transform: none; }
.team-card .director-role { padding-top: 0; }

@media (max-width: 700px) {
  .team-card.is-featured {
    width: calc(100vw - 24px);
    /* Content height on phones too, capped by the viewport. */
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    transform: none;
    box-shadow: 9px 11px 0 var(--crimson);
    /* Switch to fixed geometry immediately. The Web Animation API supplies
       the only visible phone motion, preventing a down-then-up transition. */
    transition: none;
  }
  .team-card.is-open.is-featured:hover { transform: none; }
  .team-card.is-featured .director-portrait {
    grid-column: 1;
    grid-row: 1;
    height: min(38dvh, 300px);
    min-height: 0;
    border-right: 0;
    border-bottom: 4px solid var(--crimson);
  }
  .team-card.is-featured .director-name,
  .team-card.is-featured .team-card-body { grid-column: 1; }
  .team-card.is-featured .director-name { padding: var(--sp-5) var(--sp-6) 0; }
  .team-card.is-featured .team-card-body-inner {
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
  }
}

/* ─── VERKEFNI — section intro, centred, sits tight above film-world ──── */
.projects {
  position: relative;
  background: var(--bg);
  padding: clamp(var(--sp-24), 9vw, var(--sp-40)) var(--pad-x) var(--sp-4);
  border-top: 3px solid var(--crimson);
  text-align: center;
}
.projects-inner { max-width: var(--max-w); margin: 0 auto; }
/* Section eyebrows that read as the big section heading (no pill) */
.team-inner > .section-eyebrow,
.people-inner > .section-eyebrow,
.contact-inner > .section-eyebrow,
.projects-inner > .section-eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--crimson);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--sp-12);
  text-shadow: 3px 4px 0 var(--gold);
}
.projects-inner > .section-eyebrow { margin-bottom: 0; }

/* ─── FÓLKIÐ & HAFA SAMBAND — role/contact lists ─────────────────── */
.people, .contact {
  position: relative;
  background: var(--bg);
  padding: clamp(var(--sp-24), 9vw, var(--sp-40)) var(--pad-x);
  border-top: 3px solid var(--crimson);
}
.people-inner, .contact-inner { max-width: 860px; margin: 0 auto; }
/* Rows live on one cream sticker card */
.crew-list {
  background: var(--surface);
  border: 4px solid var(--crimson);
  border-radius: 24px;
  box-shadow: var(--sticker-lg);
  padding: var(--sp-4) clamp(var(--sp-5), 3vw, var(--sp-8));
}
.crew-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-bottom: 2px dashed rgba(204, 77, 114, 0.35);
}
.crew-row:last-child { border-bottom: none; }
/* Two row shapes on the same card.
   Fólkið reads person-first: the NAME leads on the left (.crew-person) and
   the credit sits quietly on the right (.crew-job) — you scan a cast list by
   who, not by job title.
   Hafa samband is the other way round: the label leads (.crew-role) and the
   value follows on the right (.crew-name), because there the label is what
   you're looking for. Either way the prominent half is the useful half. */
.crew-role,
.crew-job {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.crew-name,
.crew-person {
  font-weight: 600;
  color: var(--ink-soft);
}
/* Whichever one lands in the right-hand slot is the one that aligns right. */
.crew-name,
.crew-job { text-align: right; }

/* ─── MUSIC (raspberry band) ─────────────────────────────────────── */
.music {
  position: relative;
  padding: clamp(var(--sp-24), 9vw, var(--sp-40)) var(--pad-x);
  background: var(--crimson);
  border-top: 3px solid var(--ink-soft);
}
.music-inner { max-width: 760px; margin: 0 auto; }
/* Eyebrow pill on crimson: gold pill, crimson text (default) reads well */
.music .section-eyebrow { border-color: var(--ink-soft); }
.music-heading {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  color: var(--gold);
  text-shadow: 3px 4px 0 var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.music-composer {
  font-size: 0.95rem;
  color: var(--surface);
  opacity: 0.85;
  margin-bottom: var(--sp-10);
}
.tracklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
}
.tl-track {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  background: var(--crimson-deep);
  border: 3px solid var(--gold);
  border-radius: 100px;
  transition: transform 0.3s var(--ease-pop), box-shadow 0.3s ease, background 0.3s ease;
}
.tl-track:hover { transform: translateX(4px); box-shadow: 4px 4px 0 var(--gold); }
.tl-num {
  font-size: 1.3rem;
  color: var(--gold);
  min-width: 2rem;
}
.tl-name {
  flex: 1;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 600;
  color: var(--surface);
}
.tl-track.active { background: var(--gold); }
.tl-track.active .tl-num { color: var(--crimson); }
.tl-track.active .tl-name { color: var(--ink-soft); }
.tl-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.tl-track.active .tl-bars { opacity: 1; }
.tl-bar {
  width: 4px;
  height: 4px;
  background: var(--crimson);
  border-radius: 2px;
  transition: height 0.25s ease;
}
.tl-track.active.playing .tl-bar:nth-child(1) { animation: bar-bounce 0.9s ease-in-out infinite; }
.tl-track.active.playing .tl-bar:nth-child(2) { animation: bar-bounce 0.9s ease-in-out 0.2s infinite; }
.tl-track.active.playing .tl-bar:nth-child(3) { animation: bar-bounce 0.9s ease-in-out 0.4s infinite; }
@keyframes bar-bounce { 0%,100% { height: 4px; } 50% { height: 20px; } }
.tl-track.active:not(.playing) .tl-bar { height: 10px; }

.music-credit {
  padding-top: var(--sp-6);
  border-top: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.music-produced { font-size: 0.92rem; color: var(--surface); }
.mc-label { margin-right: var(--sp-2); opacity: 0.8; }
.mc-name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--gold); }
.music-note {
  font-size: 0.68rem;
  color: var(--surface);
  opacity: 0.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ─── FOOTER (mint) ──────────────────────────────────────────────── */
.footer {
  padding: var(--sp-16) var(--pad-x);
  background: var(--bg);
  border-top: 3px solid var(--crimson);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.footer-brand {
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--crimson);
  text-shadow: 3px 4px 0 var(--gold);
}
.footer-meta, .footer-credit {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.footer-credit { color: var(--crimson); font-weight: 600; }
/* Email sits directly under the website credit — underline on hover only,
   so it reads as part of the credit line rather than a loud link. */
/* Contact links sit on the cream card — underline on hover only, so the row
   stays as calm as the crew rows it shares the card with. */
.crew-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.crew-name a:hover { color: var(--crimson); border-bottom-color: var(--crimson); }

/* ─── FOCUS ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── REVEAL HELPER (JS toggles .in) ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-pop);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .film-inner { grid-template-columns: 1fr; gap: var(--sp-12); }
  .film-poster-art { max-width: 300px; }
}
@media (max-width: 600px) {
  :root { --pad-x: 1rem; }

  /* Only two links now — keep them visible on phones: drop the absolute
     centering so they flow to the right of the logo instead of overlapping. */
  .nav-links {
    position: static;
    transform: none;
    gap: 10px;
  }
  /* 1.35rem + the desktop gap wrapped "Um okkur" onto two lines at phone
     widths (confirmed down to 320px with this size + nowrap + tighter gap;
     comfortable from ~355px up). nowrap turns any remaining shortfall into a
     clean overflow instead of an ugly mid-phrase wrap. */
  .nav-links a { font-size: 1rem; white-space: nowrap; }
  .hero { padding: var(--sp-24) var(--pad-x) var(--sp-20); }
  .hero-dots { bottom: var(--sp-6); }

  /* Give the film information the page width and let the unfinished poster
     act as a small chapter marker instead of dominating the phone viewport. */
  .film { padding: var(--sp-20) var(--pad-x) var(--sp-16); }
  .film-inner { gap: var(--sp-10); }
  .film-poster-wrap { display: flex; justify-content: center; }
  .film-poster { width: min(58vw, 220px); }
  .film-poster-art { width: 100%; box-shadow: 5px 6px 0 var(--crimson); }
  .poster-caption { text-align: center; letter-spacing: 0.1em; }
  .film-heading {
    font-size: clamp(2.8rem, 15vw, 4.25rem);
    line-height: 0.95;
    margin-bottom: var(--sp-5);
  }
  .film-description { font-size: 1rem; line-height: 1.65; max-width: none; }
  .film-description:last-of-type { margin-bottom: var(--sp-8); }

  /* The two screening facts belong together, so they become one ticket-like
     unit instead of two heavy cards fighting for attention. */
  .film-details {
    gap: 0;
    padding: var(--sp-2) var(--sp-5);
    background: var(--surface);
    border: 3px solid var(--crimson);
    border-radius: 18px;
    box-shadow: 5px 6px 0 var(--crimson);
  }
  .film-detail {
    display: grid;
    justify-items: start;
    gap: var(--sp-1);
    padding: var(--sp-4) 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .film-detail + .film-detail { border-top: 2px dashed rgba(194, 52, 88, 0.35); }
  .film-detail:hover { transform: none; }
  .detail-label { color: var(--crimson); }
  .detail-value { font-size: clamp(1.25rem, 6vw, 1.6rem); line-height: 1.15; }
  .film-detail:first-child .detail-value { font-size: clamp(1.45rem, 7vw, 1.85rem); }

  /* A phone is too narrow for a two-ended credit table. Each credit becomes
     a clear person-first block with the role directly underneath. */
  .people { padding: var(--sp-16) var(--pad-x); }
  .people-inner > .section-eyebrow { margin-bottom: var(--sp-6); }
  .crew-list {
    display: grid;
    gap: var(--sp-3);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .people .crew-row {
    position: relative;
    display: grid;
    justify-items: start;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--surface);
    border: 3px solid var(--crimson);
    border-radius: 16px;
    box-shadow: 4px 5px 0 var(--crimson);
  }
  .people .crew-person { font-size: 1.1rem; line-height: 1.3; }
  .people .crew-job {
    max-width: 30ch;
    text-align: left;
    line-height: 1.45;
    letter-spacing: 0.1em;
  }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-slide { transition: opacity 0.3s ease; clip-path: none; filter: none; }
  .hero-slide.is-active .hero-slide-img { animation: none; transform: scale(1.02); }
  /* The scroll-driven transform is intentionally disabled in reduced-motion
     mode, so keep every still reachable with a conventional swipe row. */
  /* (--sp-14 does not exist in the scale — that used to silently compute to
     padding: 0 and squash this band flat.) */
  .gallery { padding: var(--sp-12) 0; }
  .gallery-pin { height: auto !important; }
  .gallery-sticky { position: static; height: auto; overflow: visible; }
  .gallery-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none !important;
  }
  .gallery-item { flex: 0 0 min(84vw, 460px); scroll-snap-align: start; }
  .gallery-still { width: 100%; height: auto; aspect-ratio: 4/3; }
}