/* «γυάλα» / Κωνσταντίνος Φραγκούλης
   ---------------------------------------------------------------------------
   Aesthetic, not a design system: bone ground, ink type, no accent hue.
   Every previous version had an accent competing with the film stills. This
   one does not: the photographs are the only colour on the page.

   Type      Syne (display, wide) + Commissioner (text). Both carry Greek.
   Ground    #f6f2e5, a warm cream.
   Accent    none. Emphasis is weight, contrast and underline.
   Radius    0 everywhere.
   Motion    CSS scroll-driven animation. No library, reduced-motion for free.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../assets/font/syne-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../assets/font/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../assets/font/commissioner-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Commissioner"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../assets/font/commissioner-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper:   #f6f2e5;
  --paper-2: #ece7d6;
  --card:    #f0ebdb;

  --ink:     #111214;
  --ink-2:   #4e5057;
  --ink-3:   #63666d;
  --line:    #d9d5cb;

  /* there is no accent hue. "mark" is pure ink: emphasis comes from weight,
     contrast and underlines, so the photographs are the only colour here. */
  --mark:    #111214;

  --display: "Syne", "Trebuchet MS", system-ui, sans-serif;
  --text:    "Commissioner", system-ui, -apple-system, sans-serif;

  --page: 1620px;
  --gut:  clamp(18px, 4vw, 80px);
  --beat: clamp(100px, 14vw, 240px);
  --bar:  60px;
  --ease: cubic-bezier(.2, .9, .25, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 20px); scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--text);
  font-size: 18px;
  font-weight: 350;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, never hidden: hidden makes body a scroll container, which silently
     kills position:sticky and every view-timeline on the page. */
  overflow-x: clip;
}

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

:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }
::selection { background: var(--mark); color: var(--paper); }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--mark); color: var(--paper);
  padding: 10px 18px; font-family: var(--display); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: .8rem;
}
.skip:focus { transform: none; }

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

/* ------------------------------------------------------------------ type */

.h1, .h2, .h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  line-height: .96;
  letter-spacing: -.018em;
  text-wrap: balance;
  /* long Greek compounds must break rather than push the page sideways */
  overflow-wrap: break-word;
}
.h1 { font-size: clamp(1.9rem, 6.4vw, 6.4rem); font-weight: 800; }
.h2 { font-size: clamp(2rem, 4.4vw, 4.2rem); }
.h3 { font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 600; letter-spacing: -.01em; }

.lede { color: var(--ink); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 46ch; font-weight: 350; }
.fine { font-size: .82rem; color: var(--ink-3); line-height: 1.5; }
.prose { max-width: 60ch; }
.prose p + p { margin-top: .9em; }

.stat {
  font-family: var(--display); font-weight: 700;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- masthead */

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--bar);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.bar-in {
  width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.mark {
  font-family: var(--display); font-weight: 800;
  font-size: .95rem; letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); }
.nav a {
  font-family: var(--display); font-weight: 600;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.tongue { display: flex; gap: 7px; font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .1em; }
.tongue a { color: var(--ink-3); }
.tongue a[aria-current] { color: var(--mark); }

.burger { display: none; width: 38px; height: 38px; margin-right: -8px; position: relative; }
.burger i { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.burger i:nth-child(1) { top: 14px; }
.burger i:nth-child(2) { top: 22px; }
body.open .burger i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.open .burger i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 1000px) { .burger { display: block; margin-left: auto; } .nav, .bar .tongue { display: none; } }

.sheet {
  position: fixed; inset: 0; z-index: 80; background: var(--paper);
  padding: calc(var(--bar) + 30px) var(--gut) 40px;
  display: grid; align-content: start; gap: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
body.open .sheet { opacity: 1; visibility: visible; }
body.open { overflow: hidden; }
.sheet a {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 7vw, 2.8rem); color: var(--ink); padding-block: 7px;
}
.sheet a[aria-current] { color: var(--mark); }
.sheet .tongue { margin-top: 26px; font-size: .85rem; gap: 12px; }
@media (min-width: 1001px) { .sheet { display: none; } }

/* ============================================================= 1. CREED
   Name lockup over a full-bleed frame. The bio still arrives late, after the
   work: this is a masthead, not an About section. */

.creed {
  position: relative; min-height: 100dvh;
  display: grid; align-content: end;
  padding-top: calc(var(--bar) + 4rem);
  padding-bottom: clamp(34px, 5vw, 70px);
  isolation: isolate; overflow: clip;
}
.creed-media { position: absolute; inset: 0; z-index: -2; }
.creed-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1; filter: contrast(1.03);
}
.creed::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 38%,
      color-mix(in srgb, var(--paper) 40%, transparent) 58%,
      color-mix(in srgb, var(--paper) 82%, transparent) 78%,
      var(--paper) 97%);
}
.name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.name span { display: inline; }
.name .given { margin-right: .32em; }
.name .given,
.name .family {
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.creed-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.act {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--mark); color: var(--paper);
  padding: 15px 28px; white-space: nowrap;
  transition: gap .25s var(--ease), filter .2s;
}
.act::after { content: "→"; }
.act:hover { gap: 16px; filter: brightness(1.08); color: var(--paper); }
.act:active { transform: translateY(1px); }
.act--bare {
  background: none !important; color: var(--ink); padding: 15px 0;
  border-bottom: 2px solid var(--mark);
}
.act--bare:hover { color: var(--ink); }

/* =========================================================== 2. THE BAND
   One marquee on the page. The film carries three titles in three
   territories, so the band is the fact, not filler. */

.band {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: clamp(14px, 1.6vw, 22px);
  overflow-x: clip;
  overflow-y: clip;
  display: flex;
  max-width: 100vw;
}
.band ul {
  display: flex; flex: none; align-items: center; gap: clamp(28px, 4vw, 70px);
  padding-right: clamp(28px, 4vw, 70px);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.1rem, 2.1vw, 1.9rem);
  letter-spacing: -.01em; color: var(--ink-2);
  white-space: nowrap;
}
.band li { display: flex; align-items: center; }
.band em { font-style: normal; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .band ul { animation: crawl 34s linear infinite; }
  .band:hover ul { animation-play-state: paused; }
}
@keyframes crawl { to { transform: translate3d(-100%, 0, 0); } }

/* ============================================================ 3. THE FILM
   Bento. Exactly seven cells for seven pieces of content, and the cells
   carry real images and tints, not seven text boxes. */

.film { padding-block: var(--beat); }
/* The poster used to span two rows, which forced both rows to its height and
   stretched the little text tiles into 334x505 voids. Now the poster sits in
   its own column at its natural height and the side column stacks, so nothing
   is stretched to fill a row it does not need. */
.bento {
  display: grid; gap: clamp(10px, 1vw, 16px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(30px, 4vw, 56px);
}
@media (min-width: 900px) {
  .bento { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); }
}
.bento-art { overflow: clip; background: var(--paper-2); }
.bento-art img { width: 100%; }
.bento-side { display: grid; gap: clamp(10px, 1vw, 16px); align-content: start; }
.bento-pair { display: grid; gap: clamp(10px, 1vw, 16px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .bento-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cell { position: relative; overflow: clip; background: var(--paper-2); display: grid; }
.cell--art { padding: 0; }
.cell--art img { width: 100%; height: 100%; object-fit: cover; }
/* content sits at the top: these boxes are as tall as what is in them */
.cell--pad { padding: clamp(20px, 2vw, 32px); align-content: start; gap: 8px; overflow-wrap: break-word; }
.cell--edge { background: var(--card); box-shadow: inset 3px 0 0 var(--mark); }
.cell--deep { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.cell--shot img { filter: saturate(.78) contrast(1.02); transition: filter .5s, transform .8s var(--ease); }
.cell--shot:hover img { filter: none; transform: scale(1.04); }
.cell--shot img { aspect-ratio: 16 / 11; }
/* interactive bento cells */
a.cell, .cell--interactive {
  display: grid;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s ease, box-shadow .25s ease;
}
a.cell:hover, .cell--interactive:hover {
  background-color: var(--line);
  transform: translateY(-2px);
}
a.cell--edge:hover, .cell--edge.cell--interactive:hover {
  background-color: var(--line);
  box-shadow: inset 3px 0 0 var(--mark);
}
a.cell--deep:hover, .cell--deep.cell--interactive:hover {
  background-color: var(--line);
  box-shadow: inset 0 0 0 1px var(--ink-3);
}
a.cell:focus-visible, .cell--interactive:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: -2px;
}
.cell-cue {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  margin-left: 6px;
  color: var(--ink-3);
  transition: transform .25s var(--ease), color .25s ease;
}
a.cell:hover .cell-cue, .cell--interactive:hover .cell-cue {
  transform: translateX(4px);
  color: var(--ink);
}
.cell-note {
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

/* the credit list inside a bento cell */
.credits { display: grid; gap: 11px; }
.credits div { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .credits div { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; } }
.credits dt {
  font-family: var(--display); font-weight: 600;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.credits dd { color: var(--ink); overflow-wrap: break-word; }

.play { position: relative; cursor: pointer; display: block; }
.play img { width: 100%; height: 100%; object-fit: cover; }
.play::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--paper) 80%, transparent), transparent 60%);
  transition: opacity .35s;
}
.play:hover::after { opacity: .6; }
.play span {
  position: absolute; left: clamp(14px, 1.4vw, 22px); bottom: clamp(14px, 1.4vw, 22px); z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--mark); color: var(--paper);
  padding: 10px 17px;
  font-family: var(--display); font-weight: 700;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}
.play span::before {
  content: ""; width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}

/* ========================================================== 4. SHORT FILMS
   Cinematic showcase with alternating rhythm, interactive video frames,
   and clean metadata. Fluid natural scrolling without sticky locking. */

.stack {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.stack-head {
  padding-block: clamp(60px, 8vw, 100px) clamp(20px, 3vw, 40px);
}
.stack-head .stat {
  margin-bottom: 12px;
}
.short {
  position: relative;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 92px);
  transition: background-color .35s var(--ease);
}
.short:hover {
  background: color-mix(in srgb, var(--card) 45%, var(--paper-2));
}
.short-in {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .short-in {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  .short:nth-child(even) .short-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
  .short:nth-child(even) .short-frame {
    order: 2;
  }
  .short:nth-child(even) .short-meta {
    order: 1;
  }
}

.short-frame {
  position: relative;
  overflow: clip;
  aspect-ratio: 16 / 10;
  background: var(--paper);
  display: block;
  box-shadow: 0 16px 36px -18px rgba(17, 18, 20, 0.12);
  border: 1px solid var(--line);
  cursor: pointer;
}
.short-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.02);
  transition: filter .5s var(--ease), transform .8s var(--ease);
}
.short:hover .short-frame img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.035);
}
.short-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 18, 20, 0.5) 0%, transparent 55%);
  opacity: .5;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.short:hover .short-frame::after {
  opacity: .2;
}

.short-play-tag {
  position: absolute;
  right: clamp(14px, 1.6vw, 22px);
  bottom: clamp(14px, 1.6vw, 22px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mark);
  color: var(--paper);
  padding: 10px 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .25s var(--ease), filter .2s;
}
.short-play-tag::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.short:hover .short-play-tag {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
}

.short-meta {
  display: grid;
  gap: 14px;
  align-content: start;
}
.short-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.short-meta .h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  max-width: 18ch;
}
.short-meta .h2 a {
  color: var(--ink);
  transition: color .2s;
}
.short-meta .h2 a:hover {
  color: var(--ink-2);
}

.short-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 4px;
}
.short-facts span {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--card);
  padding: 5px 12px;
  border: 1px solid var(--line);
}
.short-facts b {
  color: var(--ink);
  font-weight: 700;
}

.short-prize {
  margin-top: 6px;
  padding: 14px 18px;
  background: var(--card);
  border-left: 3px solid var(--mark);
  font-size: .86rem;
  color: var(--ink);
  max-width: 44ch;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.short-prize::before {
  content: "★";
  font-size: .85rem;
  color: var(--mark);
  flex-shrink: 0;
}

.short-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ========================================================= 5. THE MAKER
   The director arrives after the work, not before it. */

.maker { padding-block: var(--beat); border-top: 1px solid var(--line); }
.maker-in { display: grid; gap: clamp(26px, 4vw, 70px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .maker-in { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); } }
.maker-art { position: relative; overflow: clip; }
.maker-art img { width: 100%; filter: saturate(.78) contrast(1.02); }
.maker-body { display: grid; gap: clamp(16px, 2vw, 26px); }
.maker-body .h2 { max-width: 18ch; }

/* =================================================== 6. SELECTIONS + PRIZES
   Merged into one sparse block. Two festivals, two prizes, four rows. */

.roll { padding-block: var(--beat); background: var(--paper-2); border-top: 1px solid var(--line); }
.roll-list { display: grid; gap: clamp(22px, 2.6vw, 38px); margin-top: clamp(28px, 4vw, 52px); }
@media (min-width: 820px) { .roll-list { grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.4vw, 60px); } }
.roll-item { display: grid; gap: 7px; align-content: start; }
.roll-item .h3 { max-width: 24ch; }
.roll-item .where { font-size: .84rem; color: var(--ink-3); }

/* ============================================================ 7. THE PRESS */

.press { padding-block: var(--beat); border-top: 1px solid var(--line); }
.reads { display: grid; gap: clamp(26px, 3.4vw, 48px); margin-top: clamp(28px, 4vw, 48px); }
.read { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.read .h3 { max-width: 30ch; margin: 7px 0 5px; transition: color .25s; }
.read:hover .h3 { box-shadow: inset 0 -2px 0 var(--ink); }
.read .arrow { font-size: 1.3rem; color: var(--ink-3); transition: transform .3s var(--ease), color .25s; }
.read:hover .arrow { color: var(--mark); transform: translate(3px, -3px); }

/* ============================================================= 8. THE END */

.end { border-top: 1px solid var(--line); padding-block: var(--beat) 34px; background: var(--paper-2); }
.end-call { display: grid; gap: clamp(18px, 2.4vw, 32px); padding-bottom: clamp(48px, 6vw, 86px); }
.end-call .h2 { max-width: 22ch; }
.end-cols { display: grid; gap: clamp(24px, 3vw, 44px); }
@media (min-width: 760px) { .end-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.end-cols h4 { margin-bottom: 12px; }
.end-cols li + li { margin-top: 6px; }
.end-cols a { color: var(--ink-2); transition: color .2s; }
.end-cols a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.end-base { padding-top: clamp(38px, 5vw, 70px); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }

/* ============================================================= lightbox */

.veil {
  position: fixed; inset: 0; z-index: 120;
  background: color-mix(in srgb, #10121a 96%, transparent);
  display: grid; place-items: center;
  padding: clamp(40px, 6vw, 76px) clamp(14px, 4vw, 56px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.veil.on { opacity: 1; visibility: visible; }
.veil img { max-width: 100%; max-height: 80vh; width: auto; object-fit: contain; }
.veil-x, .veil-step { position: absolute; color: #f6f2e5; opacity: .7; transition: opacity .2s; display: grid; place-items: center; }
.veil-x { top: 12px; right: 14px; width: 44px; height: 44px; font-size: 1.7rem; }
.veil-step { top: 50%; transform: translateY(-50%); width: 50px; height: 74px; font-size: 1.4rem; }
.veil-step.prev { left: 4px; }
.veil-step.next { right: 4px; }
.veil-x:hover, .veil-step:hover { opacity: 1; }
.veil-cap {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; padding-inline: 60px;
  font-family: var(--display); font-weight: 600;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, #f6f2e5 66%, transparent);
}
.theatre { width: min(1180px, 100%); aspect-ratio: 16 / 9; background: #000; }
.theatre iframe { width: 100%; height: 100%; border: 0; max-height: none; }

/* ============================================================== reveals */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise { animation: rise both linear; animation-timeline: view(); animation-range: entry 6% entry 52%; }
    .creed-line  { animation: rise .9s var(--ease) .1s both; }
    .creed-under { animation: rise .9s var(--ease) .32s both; }
    .creed-media img { animation: swell linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes swell { from { transform: scale(1.16); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .short { position: static; min-height: 0; }
}

@media print {
  .bar, .sheet, .veil, .band, .play span { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .h1, .h2, .h3, a { color: #000 !important; }
  .short { position: static; min-height: 0; }
}

/* ===================================================== subpage components */

/* a quieter opening for inner pages: no full-bleed frame, just the title */
.page-head { padding-block: calc(var(--bar) + clamp(46px, 7vw, 110px)) clamp(24px, 3.4vw, 46px); }
.page-head .stat { margin-bottom: 14px; }
.page-head .sub { margin-top: clamp(16px, 2vw, 26px); max-width: 44ch; }

/* galleries: deliberately uneven cells, click to enlarge */
.plates {
  display: grid; gap: clamp(9px, 1vw, 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(26px, 3.4vw, 48px);
}
@media (min-width: 760px) { .plates { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plate { overflow: clip; background: var(--card); cursor: zoom-in; }
.plate img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4;
  filter: saturate(.78) contrast(1.02);
  transition: transform .8s var(--ease), filter .5s;
}
.plate:hover img, .plate:focus-visible img { transform: scale(1.05); filter: none; }
@media (min-width: 760px) {
  .plates--lead .plate:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .plates--lead .plate:nth-child(1) img { aspect-ratio: 1; }
}

/* the billing block from the poster, set as one centred run */
.billing {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.68rem, .95vw, .82rem);
  letter-spacing: .08em; text-transform: uppercase; line-height: 2.1;
  text-align: center; color: var(--ink-3);
  max-width: 74ch; margin-inline: auto; text-wrap: balance;
}
.billing b { color: var(--ink); font-weight: 700; }

/* two festival laurels */
.laurels-in { display: grid; gap: clamp(24px, 3.4vw, 52px); grid-template-columns: 1fr; margin-top: clamp(26px, 3.4vw, 48px); }
@media (min-width: 760px) { .laurels-in { grid-template-columns: 1fr 1fr; } }
.laurel { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 20px; align-items: center; }
.laurel img { width: 100%; mix-blend-mode: multiply; }
.laurel .where { font-size: .84rem; color: var(--ink-3); margin-top: 5px; }

/* contact */
.reach { display: grid; gap: clamp(30px, 4.4vw, 76px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .reach { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); } }
.lines { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.lines li { display: grid; gap: 4px; }
.lines .v { overflow-wrap: break-word; font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--ink); }
.lines .v a { box-shadow: inset 0 -1px 0 var(--line); transition: box-shadow .2s, color .2s; }
.lines .v a:hover { color: var(--mark); box-shadow: inset 0 -1px 0 var(--mark); }

.form { display: grid; gap: 20px; max-width: 620px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea {
  background: var(--paper-2); border: 0; border-bottom: 2px solid var(--ink-3);
  padding: 12px 14px; color: var(--ink); font-size: 1rem;
  transition: border-color .2s, background .2s; -webkit-appearance: none;
}
.field textarea { min-height: 154px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--mark); background: var(--card); }
.field .why { font-size: .8rem; color: var(--mark); display: none; }
.field.bad input, .field.bad textarea { border-bottom-color: var(--mark); }
.field.bad .why { display: block; }
.field--captcha { margin-block: 4px 6px; width: 100%; max-width: 100%; }
.cf-turnstile { width: 100% !important; max-width: 100% !important; }
.cf-turnstile iframe { width: 100% !important; }
.form-note { min-height: 1.4em; font-size: .88rem; color: var(--ink-2); }
.form-note.bad { color: var(--mark); font-weight: 500; }
.form-note a { text-decoration: underline; color: inherit; }
.form-done { display: none; padding: clamp(22px, 3vw, 34px); background: var(--paper-2); box-shadow: inset 3px 0 0 var(--mark); }
.form-done.on { display: block; }

/* 404 */
.lost { min-height: 76dvh; display: grid; align-content: center; gap: clamp(18px, 2.4vw, 30px); }

/* ============================================ director gallery
   Mixed portrait and landscape originals, so the grid spans by orientation
   instead of forcing everything to one crop. */
.shots {
  display: grid; gap: clamp(9px, 1vw, 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(28px, 3.6vw, 52px);
}
@media (min-width: 700px)  { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shot { position: relative; overflow: clip; background: var(--paper-2); cursor: zoom-in; }
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.02);
  transition: transform .8s var(--ease), filter .5s;
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.05); }
.shot--wide img { aspect-ratio: 3 / 2; }
.shot--tall img { aspect-ratio: 3 / 4; }
@media (min-width: 700px) { .shot--wide { grid-column: span 2; } }
.shot figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 22px 14px 10px;
  font-size: .74rem; color: var(--paper);
  background: linear-gradient(to top, rgb(0 0 0 / .62), transparent);
  opacity: 0; transition: opacity .3s;
}
.shot:hover figcaption, .shot:focus-visible figcaption { opacity: 1; }
@media (hover: none) { .shot figcaption { opacity: 1; } }

/* ================================================== the detailed biography
   Five labelled entries. Labels sit above the prose in a narrow column and
   move into the left margin once there is room for them. */
.life { display: grid; gap: clamp(22px, 2.8vw, 38px); margin-top: clamp(18px, 2.2vw, 30px); }
.life > div { display: grid; gap: 6px; }
.life dt { color: var(--ink-3); }
.life dd { color: var(--ink-2); max-width: 58ch; }
@media (min-width: 1280px) {
  .life > div {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0 clamp(18px, 2vw, 32px);
    align-items: baseline;
  }
  .life dt { text-align: right; padding-top: .45em; }
}