:root {
  --bg: #fff;
  --ink: #111;
  --muted: #8c8c8c;
  --gutter: 16px;
  --type: 11px;
  /* corners (set all to 0px for square corners) */
  --radius: 2px;        /* corners of the clips (0px = square) */
  --radius-open: 2px;   /* corners of the open player and the section lists */
  --radius-bar: 2px;    /* corners of the player's control strip */
  --radius-canvas: 4px; /* corners of the canvas itself, at the corners of the window */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--type)/1.35 Manrope, system-ui, -apple-system, sans-serif;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; cursor: pointer; text-transform: inherit; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 45;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-transform: uppercase;
  pointer-events: none;
}
.nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2px; width: 100%; padding: 0 var(--gutter); }

/* Section menu at the bottom: same chips as the top menu */
.sections {
  position: fixed; left: 0; right: 0; bottom: 18px; z-index: 45;
  display: flex; justify-content: center; gap: 2px;
  text-transform: uppercase;
  pointer-events: none;
}
.sections > * { pointer-events: auto; transition: color .2s ease, background-color .2s ease; }
.sections > a[href]:hover, .sections > a.is-current { color: var(--ink); background: rgba(255, 255, 255, .75); }
/* placeholders for now: not clickable, and the grid can be dragged right through them */
.sections > [aria-disabled="true"] { pointer-events: none; cursor: default; }

/* Frosted-glass chips: they read as plain text on white, and frost the footage behind them */
.nav > *, .now span, .sections > * {
  padding: 8px 9px;
  line-height: 1;
  color: #9d9d9d;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav > * { pointer-events: auto; transition: color .2s ease, background-color .2s ease; }
.nav-name { justify-self: end; }
.nav-info { justify-self: start; }
.nav a:hover, .nav button:hover { color: var(--ink); background: rgba(255, 255, 255, .75); }
.now { display: flex; gap: 2px; opacity: 0; transition: opacity .25s ease; }
.now.is-on { opacity: 1; }

/* ---------- Canvas ---------- */
.canvas {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden; overflow: clip;
  border-radius: var(--radius-canvas);   /* clips passing the corners of the window are rounded off */
  cursor: grab;
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  opacity: 0; transition: opacity .8s ease;
}
.canvas.is-ready { opacity: 1; }
html.is-dragging, html.is-dragging * { cursor: grabbing !important; }

.tile { position: absolute; top: 0; left: 0; padding: 1px; --ih: 0px; }
.tile[data-layer="front"] { z-index: 1; }   /* nearer clips pass over the others while the canvas moves */
.tile.is-open { z-index: 2; }
.tile-media {
  position: relative; height: calc(100% - var(--ih)); overflow: hidden;
  background: #efefef var(--still, none) center / cover no-repeat;   /* the clip's still, until it plays */
  border-radius: var(--radius);
  clip-path: inset(0 round var(--radius));   /* makes sure the video and the Vimeo player are clipped too */
  transition: border-radius .6s ease, clip-path .6s ease;
}
.tile-media video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
/* iPhones: never draw Safari's own play button over a clip (it shows when a clip can't start by itself,
   e.g. in Low Power Mode; the clips then start with the first touch) */
.tile-media video::-webkit-media-controls-start-playback-button,
.li-frame video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.tile-media video::-webkit-media-controls, .li-frame video::-webkit-media-controls { display: none !important; }
.tile-hit { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; border-radius: inherit; }
.tile-hit:focus-visible { outline: 1px solid #fff; outline-offset: -5px; }

.tile.is-open .tile-hit { display: none; }
.tile.is-open .tile-media {
  background: #000; cursor: pointer;
  border-radius: var(--radius-open);
  clip-path: inset(0 round var(--radius-open));
}
.tile.is-open .tile-media::after {
  content: "Loading film";
  position: absolute; left: 10px; bottom: 8px;
  text-transform: uppercase; color: rgba(255, 255, 255, .8);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.tile.is-open:not(.is-playing) .tile-media::after { opacity: 1; transition-delay: 1s; }
.tile.is-playing .tile-media { cursor: auto; }
/* a film that isn't online yet: it opens with its preview playing in the big frame, no player */
.tile.no-film.is-open .tile-media { cursor: auto; }
.tile.no-film.is-open .tile-media::after { content: none; }
.tile.no-film .p-player { display: none; }

.tile-film { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.tile-film iframe { display: block; width: 100%; height: 100%; border: 0; }
.tile.is-playing .tile-film { opacity: 1; pointer-events: auto; }

/* ---------- Custom film player (js/player.js) ---------- */
.tile-film.has-controls iframe { pointer-events: none; }   /* Vimeo's own interface never shows */
/* film ended: hide Vimeo's end screen and let the looping preview show through */
.tile-film.is-ended { background: transparent; }
.tile-film.is-ended iframe { opacity: 0; }

/* subtitles, drawn on the picture in the site's type */
.vp-captions {
  position: absolute; left: 8%; right: 8%; bottom: 6%;
  display: flex; justify-content: center;
  pointer-events: none; text-align: center;
}
.vp-captions[hidden] { display: none; }
.vp-captions span {
  padding: 4px 9px; border-radius: 4px;
  background: rgba(0, 0, 0, .55);
  color: #fff; white-space: pre-line;
  font-size: clamp(12px, 1.25vw, 18px); line-height: 1.4; letter-spacing: 0;
}
.tile-film.is-ended .vp-captions { display: none; }
/* full screen: larger, and above the floating control bar */
.tile-media:fullscreen .vp-captions { bottom: 72px; }
.tile-media:fullscreen .vp-captions span { font-size: clamp(16px, 2vw, 30px); }
.tile-media:-webkit-full-screen .vp-captions { bottom: 72px; }
.tile-media:-webkit-full-screen .vp-captions span { font-size: clamp(16px, 2vw, 30px); }

/* invisible layer over the picture: click to play / pause */
.vp { position: absolute; inset: 0; }
.vp-surface { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.vp.is-idle, .vp.is-idle .vp-surface { cursor: none; }

/* the control strip, just below the picture */
.p-player { height: 32px; margin-bottom: 12px; }
.vp-bar {
  height: 32px;
  display: flex; align-items: center; gap: 22px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: var(--radius-bar);
  background: var(--bg);
  color: var(--ink);
  text-transform: none;
}
.vp-btn { flex: none; width: 16px; height: 16px; display: grid; place-items: center; opacity: .9; transition: opacity .15s; }
.vp-btn:hover { opacity: 1; }
.vp-btn svg { display: none; width: 13px; height: 13px; }
.vp-play svg { width: 12px; height: 12px; }
.vp-bar:not(.is-paused) .vp-play .i-pause,
.vp-bar.is-paused:not(.is-ended) .vp-play .i-play,
.vp-bar.is-ended .vp-play .i-replay { display: block; }
.vp-bar:not(.is-muted) .vp-sound .i-sound,
.vp-bar.is-muted .vp-sound .i-muted { display: block; }
.vp-bar:not(.is-full) .vp-full .i-expand,
.vp-bar.is-full .vp-full .i-shrink { display: block; }
/* resolution (FHD / UHD) and subtitles (CC): black when on, grey when off */
.vp-quality { flex: none; display: flex; gap: 8px; }
.vp-quality[hidden], .vp-quality button[hidden], .vp-cc[hidden] { display: none; }
.vp-quality button, .vp-cc {
  flex: none; padding: 2px 0;
  font-size: 10px; letter-spacing: .04em; white-space: nowrap;
  color: rgba(0, 0, 0, .32); transition: color .15s ease;
}
.vp-quality button:hover, .vp-quality button[aria-pressed="true"],
.vp-cc:hover, .vp-cc[aria-pressed="true"] { color: var(--ink); }
.vp-time { flex: none; min-width: 3.2ch; font-size: 10px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.vp-dur { text-align: right; }

/* scrubber: a hairline that thickens on hover, with a playhead and a time preview */
.vp-track { position: relative; flex: 1; height: 20px; cursor: pointer; touch-action: none; outline: none; }
.vp-rail {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: rgba(0, 0, 0, .18); border-radius: 2px; overflow: hidden;
  transition: height .2s ease, margin .2s ease;
}
.vp-track:hover .vp-rail, .vp-bar.is-seeking .vp-rail { height: 4px; margin-top: -2px; }
.vp-track:focus-visible .vp-rail { outline: 1px solid currentColor; outline-offset: 4px; }
.vp-buffer, .vp-progress { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); }
.vp-buffer { background: rgba(0, 0, 0, .1); }
.vp-progress { background: currentColor; }
.vp-head {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .2s ease;
}
.vp-track:hover .vp-head, .vp-bar.is-seeking .vp-head, .vp-track:focus-visible .vp-head { transform: scale(1); }
.vp-tip {
  position: absolute; bottom: calc(100% + 2px); left: 0; transform: translateX(-50%);
  padding: 3px 6px; border-radius: 3px; background: var(--ink); color: #fff;
  font-size: 10px; white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.vp-track:hover .vp-tip, .vp-bar.is-seeking .vp-tip { opacity: 1; }

/* full screen: square corners, and the strip floats over the film, frosted like the menu */
.tile-media:fullscreen { border-radius: 0; clip-path: none; background: #000; }
.tile-media:-webkit-full-screen { border-radius: 0; clip-path: none; background: #000; }
.vp-bar.is-overlay {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(255, 255, 255, .72);
  border-color: rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: opacity .35s ease, transform .35s ease;
}
.vp-bar.is-overlay.is-idle { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* ---------- Film details, under the open clip ---------- */
body > .panel { display: none; }
.panel {
  position: absolute; left: 1px; bottom: 1px;
  padding: 10px 0 8px;
  background: var(--bg);
  text-transform: uppercase;
  cursor: auto;
  opacity: 0; transition: opacity .15s ease;
}
.panel.is-shown { opacity: 1; transition: opacity .45s ease .55s; }
.panel-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) auto;
  gap: 8px 18px; align-items: start;
}
.p-title h2 { font: inherit; color: var(--ink); }
.p-title span, .p-credit dt { color: var(--muted); }
.p-credit dt { margin-bottom: 2px; }
.p-stack { display: grid; gap: 8px; align-content: start; }   /* production, then distribution under it */
.p-actions { grid-column: 5; grid-row: 1; display: flex; gap: 14px; color: var(--muted); white-space: nowrap; }
.p-actions button:hover { color: var(--ink); }

/* ---------- Info: the bio sits in the canvas, the clips move aside for it ---------- */
.info { position: absolute; top: 0; left: 0; z-index: 3; opacity: 0; transition: opacity .2s ease; }
.info[hidden] { display: none; }
.info.is-open { opacity: 1; transition: opacity .45s ease .5s; }
/* same style as the menu (uppercase, small, slightly spaced), in a darker grey for reading */
.info-body {
  font-size: 12px; line-height: 1.7; letter-spacing: .02em; text-transform: uppercase; color: #333;
  text-align: justify;   /* last line of each paragraph stays left-aligned */
}
.info-body p + p { margin-top: 1em; }
.info-contact { display: flex; justify-content: space-between; gap: 18px; }   /* email on the left, Instagram on the right */
.info-body a { cursor: pointer; }
.info-body a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Section list (Commercial, Narrative): a column of films in the middle of the canvas ---------- */
/* it slides up from the bottom of the page (no fading) */
.li { position: absolute; top: 0; left: 0; z-index: 3; text-transform: uppercase; cursor: auto; }
.li[hidden] { display: none; }
.li-frame {
  position: relative; overflow: hidden;
  background: #efefef var(--still, none) center / cover no-repeat;   /* the clip's still, until it plays */
  border-radius: var(--radius-open); clip-path: inset(0 round var(--radius-open));
}
.li-frame video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.li-hit { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.li-hit:focus-visible { outline: 1px solid #fff; outline-offset: -5px; }
.li.is-loading .li-hit, .li.is-playing .li-hit { display: none; }
.li.no-film .li-hit { cursor: default; }   /* a film that isn't online yet */
.li.is-loading .li-frame::after {
  content: "Loading film";
  position: absolute; left: 10px; bottom: 8px;
  color: rgba(255, 255, 255, .85); pointer-events: none;
}
.li.is-playing .li-frame::after { content: none; }
.li.is-playing .tile-film { opacity: 1; pointer-events: auto; }
.li-frame:fullscreen { border-radius: 0; clip-path: none; background: #000; }
.li-frame:-webkit-full-screen { border-radius: 0; clip-path: none; background: #000; }
/* the player strip appears once the film is started; the credits are always there */
.li-bar { margin-top: 10px; }
.li-bar:empty { display: none; }
.li-info { padding-top: 10px; }
.li .p-credit.is-empty { visibility: hidden; }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
  :root { --gutter: 12px; }
  .nav { grid-template-columns: auto auto auto; justify-content: center; gap: 2px; white-space: nowrap; }
  .nav > *, .now span, .sections > * { padding: 7px 8px; }
  .panel-row { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .p-title { grid-column: 1 / -1; }
  .p-actions { grid-column: 1 / -1; grid-row: auto; }
  .vp-bar { gap: 12px; padding: 0 10px; }
  .info-body { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}