/* =========================================================
   PoPaCi Pictures — black & white cinema
   ========================================================= */

:root {
  --bg: #060606;
  --bg-2: #0d0d0d;
  --ink: #f4f1ec;
  --ink-mut: #8a8783;
  --line: rgba(244, 241, 236, 0.14);
  --line-2: rgba(244, 241, 236, 0.32);
  --accent: #f4f1ec;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(.7,.05,.1,1);
  --ease-soft: cubic-bezier(.4,.1,.1,1);

  --pad-x: clamp(20px, 5vw, 80px);
}

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

html {
  scroll-behavior: smooth;
  background: var(--bg);
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* hide scrollbars on every element, on every browser */
*, *::before, *::after { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; }
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* lock scroll when menu open */
body.nav-open { overflow: hidden; touch-action: none; }

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

/* ---------- film grain ---------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: soft-light;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grainShift 1.2s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-2%,1%); }
  40%  { transform: translate(1%,-1%); }
  60%  { transform: translate(-1%,2%); }
  80%  { transform: translate(2%,-2%); }
  100% { transform: translate(0,0); }
}

/* ---------- custom cursor (desktop) ---------- */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  display: none;
}
.cursor span {
  display: block;
  width: 100%; height: 100%;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.cursor.is-hover span {
  transform: scale(1.8);
  background: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, .strip, label, input, select, textarea { cursor: none; }
  .cursor { display: block; }
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad-x);
  mix-blend-mode: difference;
  color: var(--ink);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.brand-mark {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 4px 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.brand-mark.big {
  font-size: 20px;
  padding: 8px 14px;
}
.brand-name { letter-spacing: 0.22em; }

/* ---------- brand logo image ---------- */
.brand-logo {
  height: 56px;
  width: auto;
  display: block;
  pointer-events: none;
  /* logo PNG has a transparent background and white pixels;
     header uses mix-blend-mode: difference so it stays crisp on any bg */
}
@media (max-width: 720px) {
  .brand-logo { height: 42px; }
}

/* ---------- intro animation overlay ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.footer-logo {
  height: 96px;
  width: auto;
  display: block;
  margin-bottom: 16px;
  mix-blend-mode: difference;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f4f1ec;
  overflow: hidden;
  transform-origin: center;
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.intro-overlay::before {
  /* subtle cinematic vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.intro-overlay.is-leaving {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.intro-stage {
  position: relative;
  width: min(720px, 84vw);
  aspect-ratio: 8 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.94);
  animation: introStageIn 0.7s var(--ease-soft) 0.05s forwards;
}
@keyframes introStageIn {
  to { opacity: 1; transform: scale(1); }
}

/* SVG frame with corner brackets — drawn in like a viewfinder locking on */
.intro-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.intro-bracket {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transform-box: fill-box;
  transform-origin: center;
  animation: introDraw 0.95s var(--ease) forwards;
}
.intro-bracket.b1 { animation-delay: 0.55s; }
.intro-bracket.b2 { animation-delay: 0.70s; }
.intro-bracket.b3 { animation-delay: 0.85s; }
.intro-bracket.b4 { animation-delay: 1.00s; }
@keyframes introDraw {
  to { stroke-dashoffset: 0; }
}

/* central wordmark */
.intro-text {
  position: relative;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  padding: 0 8%;
}
.intro-popaci {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(46px, 9.5vw, 108px);
  line-height: 1;
  letter-spacing: 0;
  display: inline-flex;
  margin-bottom: 0.22em;
}
.intro-popaci span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(6px);
  animation: introLetterIn 0.6s var(--ease) forwards;
}
.intro-popaci span:nth-child(1) { animation-delay: 1.30s; }
.intro-popaci span:nth-child(2) { animation-delay: 1.36s; }
.intro-popaci span:nth-child(3) { animation-delay: 1.42s; }
.intro-popaci span:nth-child(4) { animation-delay: 1.48s; }
.intro-popaci span:nth-child(5) { animation-delay: 1.54s; }
.intro-popaci span:nth-child(6) { animation-delay: 1.60s; }
@keyframes introLetterIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.intro-pictures {
  font-family: var(--mono);
  font-size: clamp(11px, 1.4vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  animation: introTrackOut 0.8s var(--ease) 1.95s forwards;
}
@keyframes introTrackOut {
  0%   { opacity: 0; letter-spacing: 0.05em; }
  40%  { opacity: 1; }
  100% { opacity: 1; letter-spacing: 0.55em; }
}

/* outro: brackets push outward as overlay leaves (frame opens up) */
.intro-overlay.is-leaving .intro-bracket {
  transition: transform 0.65s var(--ease), opacity 0.65s var(--ease);
  opacity: 0.4;
}
.intro-overlay.is-leaving .intro-bracket.b1 { transform: translate(-14px, -14px); }
.intro-overlay.is-leaving .intro-bracket.b2 { transform: translate(14px, -14px); }
.intro-overlay.is-leaving .intro-bracket.b3 { transform: translate(-14px, 14px); }
.intro-overlay.is-leaving .intro-bracket.b4 { transform: translate(14px, 14px); }

/* lock body scroll during intro */
body.intro-lock {
  overflow: hidden;
  touch-action: none;
}

/* reduced motion: skip the show, brief static beat then fade */
@media (prefers-reduced-motion: reduce) {
  .intro-stage,
  .intro-bracket,
  .intro-popaci span,
  .intro-pictures,
  .intro-scan {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    stroke-dashoffset: 0 !important;
  }
  .intro-scan { opacity: 0 !important; }
}

/* ---------- menu toggle ---------- */
.menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: currentColor;
}
.menu-toggle .mt-dot {
  width: 8px; height: 8px;
  background: currentColor;
  border-radius: 50%;
  transition: transform .4s var(--ease), border-radius .4s var(--ease);
}
.menu-toggle .mt-text {
  position: relative;
  display: inline-block;
}
.menu-toggle .mt-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease);
}
.menu-toggle:hover .mt-text::after { transform: scaleX(1); }
.menu-toggle:hover .mt-dot { transform: scale(1.4); }

body.nav-open .menu-toggle .mt-dot {
  border-radius: 0;
  transform: rotate(45deg);
}
body.nav-open .menu-toggle .mt-text::after { transform: scaleX(1); }

/* ---------- innovative split-strip nav ---------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.nav-overlay .strip {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 var(--pad-x);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  transform: translateX(-100%);
  transition: transform .9s var(--ease);
  pointer-events: auto;
}
.nav-overlay .strip:nth-child(2) { transform: translateX(100%); }
.nav-overlay .strip:nth-child(3) { transform: translateX(-100%); }
.nav-overlay .strip:nth-child(4) { transform: translateX(100%); }

body.nav-open .nav-overlay .strip { transform: translateX(0); }
body.nav-open .nav-overlay .strip:nth-child(1) { transition-delay: .05s; }
body.nav-open .nav-overlay .strip:nth-child(2) { transition-delay: .15s; }
body.nav-open .nav-overlay .strip:nth-child(3) { transition-delay: .25s; }
body.nav-open .nav-overlay .strip:nth-child(4) { transition-delay: .35s; }

.strip-bg {
  position: absolute; inset: 0;
  background: var(--g, linear-gradient(120deg, #0a0a0a, #2a2a2a));
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
  z-index: 0;
}
.strip-num {
  position: relative; z-index: 2;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--ink-mut);
  min-width: 40px;
}
.strip-title {
  position: relative; z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* trailing space so italic glyphs (e.g. trailing 'e') aren't clipped */
  padding-right: 0.12em;
  transition: transform .6s var(--ease), letter-spacing .6s var(--ease);
}
.strip-sub {
  position: relative; z-index: 2;
  margin-left: auto;
  padding-left: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-mut);
  opacity: 0.4;
  transform: translateX(20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .4s var(--ease);
  white-space: nowrap;
}

.nav-overlay .strip:hover .strip-bg {
  opacity: 1;
  transform: scale(1);
}
.nav-overlay .strip:hover .strip-title {
  transform: translateX(10px);
}
.nav-overlay .strip:hover .strip-sub {
  opacity: 1;
  transform: translateX(0);
  color: var(--ink);
}

.nav-overlay .strip.current .strip-title {
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

/* ---------- typography helpers ---------- */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mut);
  display: inline-flex; align-items: center; gap: 12px;
}
.kicker .dot {
  width: 6px; height: 6px;
  background: var(--ink);
  border-radius: 50%;
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.6); }
}

.section-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mut);
}

/* ---------- HOME hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 0 var(--pad-x) 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* allow .hero-bars to extend past the hero on mobile (where hero is 90vh
     but bars must reach the full 100vh of the opening viewport); horizontal
     clipping of the photo is handled by .hero-media's own overflow:hidden */
  overflow: visible;
  background: #000;
}
.hero-bars {
  position: absolute; inset: 0;
  background:
    /* leftmost vertical line that the repeating gradient doesn't cover */
    linear-gradient(to right, var(--line) 0 1px, transparent 1px),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(100% / 12 - 1px),
      var(--line) calc(100% / 12 - 1px),
      var(--line) calc(100% / 12)
    );
  opacity: .45;
  pointer-events: none;
  z-index: 1;
}

/* hero background photo — cinematic B&W, fades into bg behind hero text */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  --hero-media-opacity: 0.78;
}
.hero-media img {
  position: absolute;
  /* shifted further right (parent overflow-hidden clips a small slice on the right);
     natural aspect so the left side of the photo is never cropped */
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: 72%;
  height: auto;
  max-height: 100%;
  filter: grayscale(1) brightness(1.18) contrast(1.08);
  opacity: var(--hero-media-opacity);
  /* long fade-out only on the left side of the photo */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.45) 8%,
    rgba(0,0,0,0.85) 20%,
    #000 32%,
    #000 100%);
          mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.45) 8%,
    rgba(0,0,0,0.85) 20%,
    #000 32%,
    #000 100%);
  animation: heroMediaFade 1.6s var(--ease) .35s both;
}
@keyframes heroMediaFade {
  from { opacity: 0; }
  to   { opacity: var(--hero-media-opacity); }
}
/* subtle bg-side darken for title readability — much lighter than before since the mask does the work */
.hero-media::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(6,6,6,0.35) 0%,
      rgba(6,6,6,0.18) 10%,
      rgba(6,6,6,0.05) 22%,
      transparent 35%);
  z-index: 1;
}
/* vertical soft mask — fades the photo region into pure black at top and bottom */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      #000 0%,
      transparent 12%,
      transparent 78%,
      #000 100%);
  z-index: 1;
}
/* legacy top beige band disabled — hero bg is now pure black */
.hero::before { display: none; }
/* cross-fade between the black hero and the beige section that follows;
   sits at the very bottom of the hero, transparent at the top so it doesn't
   disturb content, fading to the page bg colour at the very edge. Height is
   tuned per breakpoint: shorter on PC (less vertical space), softer on mobile */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 8vh;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  z-index: 3;
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; max-width: 1400px; }
.hero-inner .kicker { margin-bottom: 14px; }

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(48px, 10vw, 175px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;            /* no extra flex gap; words sit close */
}
.hero-title .word {
  display: inline-block;
  overflow: visible;
  /* generous padding so italic terminals / ascenders aren't clipped,
     fully cancelled by negative margins so flow size is unchanged */
  padding: 0.22em 0.3em 0.28em;
  margin: -0.22em -0.3em -0.28em;
}
.hero-title .word > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.16em);
  animation: titleFadeUp .9s var(--ease) forwards;
  padding-right: 0.12em;
}
/* "Pictures" on its own line, smaller and lighter — leaves the photo's faces visible */
.hero-title .word.amp {
  flex-basis: 100%;
  margin-left: 0;
  margin-top: 0.12em;
  font-size: 0.34em;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-left: 0.35em;
}
.hero-title .word:nth-child(1) > span { animation-delay: .1s; }
.hero-title .word:nth-child(2) > span { animation-delay: .25s; }
.hero-title .word:nth-child(3) > span { animation-delay: .4s; }
.hero-title .word:nth-child(4) > span { animation-delay: .55s; font-style: normal; font-weight: 300; }
@keyframes titleFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  max-width: 540px;
  color: var(--ink);
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp .9s var(--ease) .9s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-cta {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .9s var(--ease) 1.05s forwards;
}

.btn-line {
  position: relative;
  display: inline-block;
  padding: 16px 28px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
}
.btn-line span { position: relative; z-index: 2; transition: color .4s var(--ease); }
.btn-line::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
  z-index: 1;
}
.btn-line:hover::before { transform: translateY(0); }
.btn-line:hover span { color: var(--bg); }
.btn-line.wide { padding: 20px 32px; }

.btn-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 4px;
  transition: border-color .3s, letter-spacing .4s var(--ease);
}
.btn-text:hover { border-color: var(--ink); letter-spacing: 0.36em; }

.scroll-hint {
  position: absolute;
  bottom: 30px;
  right: var(--pad-x);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.scroll-hint i {
  display: block;
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--ink), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-hint i::after {
  content: "";
  position: absolute; top: -40px; left: 0;
  width: 1px; height: 40px;
  background: var(--ink);
  animation: scrollDot 2s var(--ease) infinite;
}
@keyframes scrollDot {
  0% { top: -40px; }
  100% { top: 100%; }
}

/* ---------- generic sections ---------- */
.section {
  padding: clamp(80px, 12vw, 160px) var(--pad-x);
  position: relative;
}
.section + .section { border-top: 1px solid var(--line); }

.section-head { margin-bottom: 64px; max-width: 900px; }
.section-head .section-tag { display: block; margin-bottom: 16px; }
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.section-title.small {
  font-size: clamp(28px, 3.2vw, 44px);
}
.section-lede {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 22px);
  color: var(--ink-mut);
  margin-top: 18px;
  max-width: 600px;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}
.col-3 { grid-column: span 3; }
.col-9 { grid-column: span 9; }

.about-blurb-text .lead {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.35;
  margin-bottom: 24px;
}
.about-blurb-text p:not(.lead) {
  color: var(--ink-mut);
  max-width: 640px;
}
.about-blurb-text em { font-style: italic; color: var(--ink); }

/* ---------- news (horizontal carousel) ---------- */
.news-rail {
  position: relative;
  margin: 0 calc(var(--pad-x) * -1);    /* bleed to viewport edges */
  padding: 8px 0 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.news-track {
  display: flex;
  gap: 24px;
  padding: 32px var(--pad-x);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-left: var(--pad-x);
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.news-track:active { cursor: grabbing; }
.news-track::-webkit-scrollbar { display: none; }

.news-card {
  flex: 0 0 clamp(260px, 32vw, 380px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s var(--ease);
}
.news-card:hover {
  border-color: var(--ink);
  transform: translateY(-6px);
}
.news-card--inactive {
  cursor: default;
}
.news-card--inactive:hover {
  border-color: var(--line);
  transform: none;
}
.news-cover {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.news-cover::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,0.02) 6px 7px),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
}
.news-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: none;
  transition: transform .8s var(--ease), filter .5s var(--ease);
}
.news-card:hover .news-cover img {
  transform: scale(1.05);
}
/* Festival card: slightly desaturated */
.news-card[data-tone="a"] .news-cover img {
  filter: saturate(0.65);
}
/* PoPaCi SNC card: keep B&W */
.news-card[data-tone="d"] .news-cover img {
  filter: grayscale(1) brightness(1.15) contrast(1.08);
}
.news-card[data-tone="d"]:hover .news-cover img {
  filter: grayscale(1) brightness(1.18) contrast(1.1);
}
/* Nothing But Flesh news cover: anchor image at its bottom so the lower part
   of the full poster is visible (image is shifted up to the maximum within
   the 4:3 cover crop) */
.news-card[href*="nothing-but-flesh"] .news-cover img { object-position: center bottom; }
.news-card[data-tone="a"] .news-cover { background: linear-gradient(160deg, #1f1f1f, #050505); }
.news-card[data-tone="b"] .news-cover { background: linear-gradient(20deg, #2a2a2a, #0a0a0a); }
.news-card[data-tone="c"] .news-cover { background: linear-gradient(220deg, #1a1a1a, #0d0d0d 60%, #2a2a2a); }
.news-card[data-tone="d"] .news-cover { background: linear-gradient(110deg, #050505, #2f2f2f); }

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.news-tag {
  border: 1px solid var(--line-2);
  padding: 4px 10px;
}
.news-body { padding: 12px 20px 24px; }
.news-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  margin-bottom: 10px;
  padding-right: 0.12em;
}
.news-excerpt {
  color: var(--ink-mut);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
}
.news-rail-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--pad-x) 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.news-rail-hint .rail-arrows { display: inline-flex; gap: 8px; }
.news-rail-hint .rail-arrow {
  width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: border-color .3s, background .3s, color .3s;
}
.news-rail-hint .rail-arrow:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* ---------- partners marquee ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  animation: marquee 45s linear infinite;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 4vw, 56px);
}
.m-item { display: inline-block; }
.m-sep {
  color: var(--ink-mut);
  font-family: var(--mono);
  font-style: normal;
  font-size: 24px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 80px var(--pad-x) 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
}
.footer-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mut);
  margin-bottom: 18px;
}
.site-footer ul li { margin-bottom: 8px; }
.site-footer ul a {
  font-family: var(--serif);
  font-size: 18px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s, padding-left .3s var(--ease);
}
.site-footer ul a:hover { border-color: var(--ink); padding-left: 8px; }
.muted { color: var(--ink-mut); font-size: 12px; line-height: 1.7; margin-top: 14px; }
.colophon {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-mut);
  margin-top: 32px;
  text-align: center;
}

/* ---------- inner page hero ---------- */
.page-hero {
  padding: 180px var(--pad-x) 80px;
  border-bottom: 1px solid var(--line);
}
.page-hero .kicker { margin-bottom: 30px; }
.page-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(80px, 16vw, 240px);
  line-height: 1;          /* room for italic descenders (e.g. j of Projects) */
  letter-spacing: -0.04em;
  padding-bottom: 0.18em;  /* clearance below the descender */
}
.page-lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--ink-mut);
  max-width: 700px;
  margin-top: 40px;        /* bumped from 24px */
}

/* ---------- MFF feature card ---------- */
.mff-feature { padding-top: clamp(60px, 8vw, 120px); }
.mff-card {
  position: relative;
  display: block;
  padding: clamp(40px, 6vw, 100px) clamp(32px, 5vw, 80px);
  border: 1px solid var(--line-2);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s var(--ease);
}
.mff-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, #2a2a2a 0%, transparent 60%),
    repeating-linear-gradient(45deg, #0a0a0a 0 2px, transparent 2px 12px);
  z-index: -1;
  opacity: .8;
  transition: transform .9s var(--ease), opacity .6s var(--ease);
}
.mff-card:hover .mff-bg { transform: scale(1.08); opacity: 1; }
.mff-card:hover { border-color: var(--ink); }

.mff-meta { display: flex; gap: 12px; margin-bottom: 32px; }
.tag-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.tag-pill.ghost { background: transparent; color: var(--ink); }

.mff-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 11vw, 200px);
  line-height: 1;             /* avoid descender-of-g / ascender-of-f collision */
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.mff-title span {
  display: inline-block;
  padding-right: 0.12em;      /* italic right-edge breathing room */
}
.mff-title span:nth-child(2) { padding-left: 1.2em; opacity: 0.85; }
.mff-title span:nth-child(3) { padding-left: 2.4em; opacity: 0.65; }

@media (max-width: 700px) {
  .mff-title {
    font-size: clamp(40px, 13vw, 80px);
    line-height: 1.05;
  }
  .mff-title span:nth-child(2) { padding-left: 0.6em; }
  .mff-title span:nth-child(3) { padding-left: 1.2em; }
}

.mff-sub {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--ink-mut);
  margin-top: 24px;
  max-width: 640px;
}
.mff-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.mff-footer .arrow {
  font-size: 24px;
  transition: transform .4s var(--ease);
}
.mff-card:hover .mff-footer .arrow { transform: translateX(12px); }

/* ---------- works grid ---------- */
.works-section.dark { background: var(--bg-2); }
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 48px 32px;
}
.work {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.work-poster {
  position: relative;
  aspect-ratio: 2/3;
  background:
    linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 20px;
  border: 1px solid var(--line);
  transition: transform .6s var(--ease), border-color .4s var(--ease);
}
.work-poster::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      90deg, transparent 0 6px,
      rgba(255,255,255,0.02) 6px 7px
    ),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
}
.work[data-tone="a"] .work-poster { background: linear-gradient(160deg, #1f1f1f, #050505); }
.work[data-tone="b"] .work-poster { background: linear-gradient(20deg, #2a2a2a, #0a0a0a); }
.work[data-tone="c"] .work-poster { background: linear-gradient(220deg, #1a1a1a, #0d0d0d 60%, #2a2a2a); }
.work[data-tone="d"] .work-poster { background: linear-gradient(110deg, #050505, #2f2f2f); }

.work-poster:hover { transform: translateY(-6px); border-color: var(--ink); }
.poster-num {
  position: relative;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 4px 8px;
}

.work-info { display: flex; flex-direction: column; gap: 8px; }
.status {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
}
.status--live {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  position: relative;
  padding-left: 22px;
}
.status--live::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 6px; height: 6px;
  background: var(--bg);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: pulse 1.6s var(--ease) infinite;
}
.status--done { color: var(--ink-mut); }

.work-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  margin-top: 4px;
}
.work-desc {
  color: var(--ink-mut);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
}
.work-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-mut);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ---------- ABOUT ---------- */

/* compact grid for about page overview */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
.founder-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: inherit;
  text-decoration: none;
}
.founder-card-info { display: flex; flex-direction: column; gap: 4px; }
.founder-link {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 4px;
  margin-top: 10px;
  transition: border-color .3s, letter-spacing .4s var(--ease);
}
.founder-card:hover .founder-link { border-color: var(--ink); letter-spacing: 0.36em; }

/* full-bio layout used on dario.html etc. */
.founders-list {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.founder {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 60px;
  align-items: start;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.founder:last-child { border-bottom: 0; }

.founder-portrait,
.member-portrait {
  position: relative;
  aspect-ratio: 3/4;
  background:
    radial-gradient(circle at 30% 30%, #303030 0%, #0a0a0a 70%);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .6s var(--ease);
}
.founder-portrait img,
.member-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* cinematic B&W: desaturated, shadows lifted, gentle contrast.
     keeps the subject clearly readable on already-dim cinema backgrounds */
  filter: grayscale(1) brightness(1.15) contrast(1.08);
  transition: filter .6s var(--ease), transform .6s var(--ease);
}
/* hover: subtle "breath" — slight zoom + lift, stays B&W to keep the team coherent */
.founder-card:hover .founder-portrait,
.founder:hover .founder-portrait,
.member:hover .member-portrait {
  transform: scale(1.01);
}
.founder-card:hover .founder-portrait img,
.founder:hover .founder-portrait img,
.member:hover .member-portrait img {
  filter: grayscale(1) brightness(1.22) contrast(1.1);
  transform: scale(1.04);
}

.founder-info { padding-top: 16px; }
.founder-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-mut);
}
.founder-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  margin: 12px 0 6px;
  letter-spacing: -0.02em;
}
.founder-role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mut);
  margin-bottom: 24px;
}
.founder-bio {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  max-width: 640px;
  color: var(--ink);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 40px 28px;
}
.member { display: flex; flex-direction: column; gap: 16px; }
.member-info { display: flex; flex-direction: column; gap: 4px; }
.member-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
}
.member-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.member-bio {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-mut);
  margin-top: 6px;
}

/* ---------- CONTACT ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.contact-left .section-tag { display: block; margin-bottom: 24px; }
.contact-channels { border-top: 1px solid var(--line); }
.contact-channels li {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.ch-value {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
}
a.ch-value { transition: padding-left .35s var(--ease); border-bottom: 1px solid transparent; }
a.ch-value:hover { padding-left: 12px; border-color: var(--ink); }

.socials-tag { margin-top: 60px; }
.socials { margin-top: 24px; border-top: 1px solid var(--line); }
.socials li { border-bottom: 1px solid var(--line); }
.socials a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  transition: padding .4s var(--ease);
}
.socials a:hover { padding-left: 16px; padding-right: 16px; background: var(--bg-2); }
.s-arrow { font-size: 24px; transition: transform .4s var(--ease); }
.socials a:hover .s-arrow { transform: translateX(8px); }

/* form */
.contact-right .section-tag { display: block; margin-bottom: 16px; }
.contact-right .section-title { margin-bottom: 40px; }
.contact-form { display: flex; flex-direction: column; gap: 36px; }
.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 24px);
  padding: 8px 0 14px;
  outline: none;
  resize: none;
  width: 100%;
  transition: border-color .3s, color .3s;
}
.field select option { background: var(--bg); color: var(--ink); }
.field textarea { font-family: var(--mono); font-size: 14px; line-height: 1.6; padding-top: 12px; }
.field .underline {
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--ink);
  transition: width .5s var(--ease);
}
.field input:focus ~ .underline,
.field select:focus ~ .underline,
.field textarea:focus ~ .underline { width: 100%; }
.field input:focus,
.field select:focus,
.field textarea:focus { color: var(--ink); }

.contact-form .btn-line { align-self: flex-start; }
.form-status { font-family: var(--mono); font-size: 12px; color: var(--ink-mut); }
.form-status.ok { color: var(--ink); }
.form-status.err { color: #ff8585; }

/* ---------- project category cards (projects.html, 3 doors) ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(360px, 52vh, 560px);
  padding: clamp(28px, 3.5vw, 56px);
  border: 1px solid var(--line-2);
  overflow: hidden;
  isolation: isolate;
  color: inherit;
  text-decoration: none;
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.cat-card:hover { border-color: var(--ink); transform: translateY(-6px); }
.cat-card .cat-bg {
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05) brightness(.78);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
/* dark overlay so the title/labels stay readable on top of the photo */
.cat-card .cat-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.75) 0%,
      rgba(0,0,0,0.45) 22%,
      rgba(0,0,0,0.35) 50%,
      rgba(0,0,0,0.60) 80%,
      rgba(0,0,0,0.85) 100%);
}
.cat-card:hover .cat-bg { transform: scale(1.08); filter: grayscale(1) contrast(1.08) brightness(.85); }
.cat-card[data-tone="festival"] .cat-bg {
  background-image: url('../img/mff.jpg');
}
.cat-card[data-tone="fiction"] .cat-bg {
  background-image: url('../img/NOTHING_BUT_FLESH.jpg');
  background-size: auto 165%;
  background-position: center 100%;
}
.cat-card[data-tone="docu"] .cat-bg {
  background-image: url('../img/Hercules_C-130.jpg');
  background-size: auto 140%;
  background-position: center 0%;
}

.cat-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.cat-title { text-shadow: 0 2px 14px rgba(0,0,0,0.55); }
.cat-arrow { text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
.cat-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  /* small enough to keep "Documentary" on a single line at every desktop width */
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 24px;
  padding-right: 0.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.cat-title--stack {
  display: flex;
  flex-direction: column;
  white-space: normal;
  overflow: visible;
}
.cat-title--stack span {
  display: block;
}
.cat-arrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.cat-arrow .arrow {
  font-size: 22px;
  transition: transform .4s var(--ease);
}
.cat-card:hover .cat-arrow .arrow { transform: translateX(10px); }
.cat-card--disabled {
  cursor: default;
}
.cat-card--disabled:hover {
  border-color: var(--line-2);
  transform: none;
}
.cat-card--disabled:hover .cat-bg {
  transform: none;
  opacity: .85;
}

/* ---------- single-film detail page ---------- */
.film-detail {
  display: grid;
  grid-template-columns: minmax(280px, 480px) 1fr;
  gap: 60px;
  align-items: start;
}
.film-poster {
  position: relative;
  aspect-ratio: 2/3;
  background: linear-gradient(160deg, #1f1f1f, #050505);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 24px;
  overflow: hidden;
}
.film-poster::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,0.02) 6px 7px),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
}
.film-poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.film-poster .poster-num { position: relative; z-index: 1; }
.film-info .film-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 16px 0 24px;
  padding-right: 0.12em;
}
.film-credits {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px 32px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mut);
}
.film-credits dt {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.film-credits dd { color: var(--ink); font-size: 13px; }
.film-synopsis {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  max-width: 720px;
}
.film-synopsis p + p { margin-top: 18px; }

/* ---------- footer credit (Thomas Zaffalon) ---------- */
.site-credit {
  margin-top: 32px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-mut);
  line-height: 2.2;
}
.site-credit a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: border-color .3s, letter-spacing .3s var(--ease);
}
.site-credit a:hover { border-color: var(--ink); letter-spacing: 0.32em; }

/* ---------- festival page ---------- */
.festival-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-top: 48px;
  margin-top: 48px;
}
.festival-info-item { display: flex; flex-direction: column; gap: 8px; }
.festival-info-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.festival-info-value {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
}
.festival-cta {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.festival-cta .section-tag { display: block; }
.btn-line--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}
.festival-directors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.festival-director { display: flex; flex-direction: column; gap: 4px; }
.festival-director-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
}
.festival-director-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.festival-portal {
  margin-top: 80px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: #481A9D;
  background-image:
    radial-gradient(ellipse at 88% 18%, rgba(255, 255, 255, 0.18), transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(0, 0, 0, 0.35), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: #fff;
}
.festival-portal .section-tag {
  display: block;
  margin-bottom: 18px;
}
.festival-portal-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
}
.festival-portal-status {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 14px 18px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
a.festival-portal {
  color: #fff;
  text-decoration: none;
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
a.festival-portal:hover { border-color: rgba(255, 255, 255, 0.45); transform: translateY(-3px); }
a.festival-portal:hover .festival-portal-status {
  background: #fff;
  color: #481A9D;
  border-color: #fff;
}
.festival-about-side { display: flex; flex-direction: column; gap: 32px; }
.festival-mff-image {
  margin: 0;
  max-width: 280px;
  position: relative;
}
.festival-mff-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid-12 { display: block; }
  .col-3, .col-9 { display: block; margin-bottom: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 48px; }
  .founder { grid-template-columns: 1fr; gap: 32px; }
  .founder-portrait { max-width: 320px; }
  .founders-grid { grid-template-columns: 1fr; }
  .festival-directors { grid-template-columns: 1fr; }
  .festival-portal {
    align-items: flex-start;
    flex-direction: column;
  }
  .contact-grid { grid-template-columns: 1fr; gap: 60px; }
  .strip { gap: 16px; }
  .strip-sub { display: none; }
  .strip-num { min-width: 32px; font-size: 10px; }
  .scroll-hint { display: none; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card { min-height: clamp(280px, 38vh, 380px); }
  /* on mobile, card aspect changes — force full cover so no black corridors appear */
  .cat-card[data-tone="fiction"] .cat-bg {
    background-size: cover;
    background-position: center 75%;
  }
  .cat-card[data-tone="docu"] .cat-bg {
    background-size: cover;
    background-position: center 25%;
  }
  /* breathing space between the [What it is] label and the MFF image on mobile */
  .festival-about-side { gap: 44px; margin-bottom: 24px; }
  .festival-mff-image { margin-top: 12px; max-width: 320px; }
  .film-detail { grid-template-columns: 1fr; gap: 40px; }
  .film-poster { max-width: 360px; }
}

@media (max-width: 900px) {
  /* hero photo on mobile: anchored at top with a slight zoom;
     fades out only at the bottom into the title area */
  .hero-media { --hero-media-opacity: 1; }
  .hero-media img {
    top: 15px;
    /* slight zoom: image wider than the viewport, equal overflow clipped on both sides */
    left: -10.5%;
    right: -10.5%;
    transform: none;
    width: 121%;
    max-width: none;
    height: auto;
    max-height: none;
    object-fit: unset;
    filter: grayscale(1) brightness(1.22) contrast(1.06);
    /* very subtle fade only at the very bottom edge */
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%,
      #000 74%,
      rgba(0,0,0,0.65) 88%,
      transparent 100%);
            mask-image: linear-gradient(180deg,
      #000 0%,
      #000 74%,
      rgba(0,0,0,0.65) 88%,
      transparent 100%);
  }
  /* hero bg is pure black (set on .hero); kill the left-side darken and the
     top/bottom vertical fade so the photo region stays purely black */
  .hero-media::before { background: none; }
  .hero-media::after  { background: none; }
  /* keep bars very thin and faint on mobile; they span the full hero (now 100vh
     on small mobile too — see <560px rule) and end together with the black bg */
  .hero-bars {
    opacity: .45;
    background:
      linear-gradient(to right, rgba(244,241,236,0.10) 0 1px, transparent 1px),
      repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(100% / 12 - 1px),
        rgba(244,241,236,0.10) calc(100% / 12 - 1px),
        rgba(244,241,236,0.10) calc(100% / 12)
      );
  }
  /* softer, more dilated cross-fade on mobile (more vertical room available) */
  .hero::after { height: 14vh; }
  /* allow vertical scroll regardless of where the finger lands. Apply at the
     root so the gesture is established before any descendant element gets a
     chance to capture the touch as a selection / callout / tap. The
     !important guards against any author rule (current or future) flipping
     touch-action back to auto on a child */
  html,
  body,
  .hero,
  .hero * {
    touch-action: pan-y !important;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* prevent text-selection across the hero so a finger drag is always a pan,
     never a selection start (iOS Safari long-press lookup, etc.) */
  .hero,
  .hero * {
    -webkit-user-select: none;
    user-select: none;
  }
}

@media (max-width: 560px) {
  .brand-name { display: none; }
  .menu-toggle .mt-label,
  .menu-toggle .mt-label-close { right: 38px; font-size: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
  /* Use svh and fixed bottom padding so the hero text lands consistently across iPhones. */
  .hero { min-height: 100vh; min-height: 100svh; padding-bottom: 37px; }
  .hero-inner .kicker { margin-bottom: 14px; }
  /* longest cross-fade on phone */
  .hero::after { height: 16vh; }
  .news-card { flex: 0 0 80vw; }
  .hero-media { --hero-media-opacity: 1; }
  /* nudge the hero photo down by ~half a centimeter on small mobile.
     NOTE: at <=900px the photo uses top-anchored layout (top:15px,
     transform:none, width:121%), so we just bump the top value. */
  .hero-media img { top: 75px; }
  /* mobile-only: bigger hero title so it fills more vertical space
     and pushes the "Independent · Ticino…" kicker higher up. Desktop
     keeps the original clamp(48px, 10vw, 175px) / line-height 0.88. */
  .hero-title {
    font-size: clamp(80px, 17vw, 295px);
    line-height: 1.05;
  }
}

/* ---------- reveal (scroll-triggered) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .grain { display: none; }
}