/* davide.studio — one stylesheet for the whole site.
   Everything fits one screen on desktop: the wall (home), film pages, About,
   Imprint. Phone (<810px) gets its own touch-first layouts at the bottom. */

@font-face { font-family: Switzer; src: url(/assets/fonts/Switzer-Medium.7393d1abac.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Switzer; src: url(/assets/fonts/Switzer-Semibold.d6497c264d.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --gap: 4px;
  --r: 6px;
  --r-sm: 8px;
  --r-xs: 5px; /* small controls: player buttons, the AI badge */
  /* Two grays for secondary text: one on flat backgrounds, one on footage. */
  --muted: rgba(255, 255, 255, 0.5); /* 5:1 on the page gray and on black */
  --muted-on-film: rgba(255, 255, 255, 0.6);
  --line: rgba(255, 255, 255, 0.12);
  --bg: #0b0b0b; /* one dark gray behind everything: wall, panels, pages */
  --panel: var(--bg);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html[data-theme='black'] { --bg: #000; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* The full-screen pages (wall, film, hidden film) are screens, not documents: no pull-to-refresh
   or rubber-band bounce. Only the vertical direction is held, so sideways stays free for the
   browser's swipe back and forward. About fits one phone screen, so it is held too (a very short
   phone can still scroll it, just without the bounce). Imprint scrolls on phones and keeps its bounce. */
html:has(> body:is([data-page='wall'], [data-page='film'], [data-page='hidden'], [data-page='about'])),
body:is([data-page='wall'], [data-page='film'], [data-page='hidden'], [data-page='about']) { overscroll-behavior-y: none; }
body {
  margin: 0; background: var(--bg); color: #fff;
  font: 500 14px/1.3 Switzer, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, p, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
/* Links, pictures and films are never picked up and dragged. Browsers start a drag when the mouse
   moves 4 px or more during a click, and the click is then lost: a tile, the X or About would
   simply not respond. Navigation text isn't selectable either, for the same reason. */
a, img, video, svg { -webkit-user-drag: none; }
.tile, .close, .mlink, .mwatch, .bar-logo, .panel-logo, .imprint-link, .scroller-arrow, .player button { -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; }
img, video, svg { display: block; }
video, img { width: 100%; height: 100%; object-fit: cover; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1.5px solid #fff; outline-offset: 2px; }
/* A focused tile gets the same white outline the current film has (and its name, below). */
.tile:focus-visible { outline: none; }

/* ——— Shared pieces ——— */
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: #111; -webkit-tap-highlight-color: transparent; }
.tile video { filter: grayscale(1); opacity: 0.42; transition: opacity 0.45s var(--ease), filter 0.45s var(--ease); }
.tile.is-on video, .tile.is-current video { filter: none; opacity: 1; }
.tile.is-current::after, .tile:focus-visible::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px #fff; pointer-events: none;
}

.ai-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2; height: 16px; padding: 0 5px; border-radius: var(--r-xs);
  background: #f2f2f2; color: #000; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; pointer-events: none;
}
.ai-badge[hidden] { display: none; }
/* A tile shows it's a film by coming to life under the pointer. Its title and my part in it sit
   at its foot on hover or keyboard focus, always on touch screens; wall tiles have none (the big
   screen says it). The current film in the strip says "Now playing" instead. */
.thumb-name, .tile-cta--now, .tile-hint {
  position: absolute; left: 9px; bottom: 7px; z-index: 2; font-size: 13px; pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.thumb-name {
  left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 22px 9px 7px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); opacity: 0; transition: opacity 0.2s ease;
}
.thumb-name b { font-weight: 600; }
.thumb-role { color: var(--muted-on-film); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Touch screens, wall: the tile picked with the first tap says what the second one does. */
.tile-hint { display: none; }
.wall .tile.is-armed .tile-hint { display: block; }
.tile:focus-visible .thumb-name { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .tile:hover .thumb-name { opacity: 1; } }
.tile.is-current .thumb-name { display: none; }
.tile-cta--now { display: flex; align-items: center; gap: 6px; }
.tile-cta--now svg { width: 11px; height: 11px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); }

.close { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); flex: none; }
.close span, .close span::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; margin: -0.75px 0 0 -11px; background: #fff;
}
.close { transition: background-color 0.15s ease; }
.close span { transform: rotate(45deg); }
.close span::after { left: 0; top: 0; margin: 0; transform: rotate(90deg); }
.close:hover, .close:focus-visible { background: rgba(255, 255, 255, 0.16); }
.close:active { background: rgba(255, 255, 255, 0.26); }

.imprint-link {
  position: fixed; right: 12px; bottom: 8px; z-index: 20;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.28);
  transition: color 0.2s ease;
}
.imprint-link:hover { color: rgba(255, 255, 255, 0.85); }

/* Scroll rows with an arrow that appears when there is more to see. */
.scroller { position: relative; overflow: hidden; }
.scroller-track { scrollbar-width: none; overscroll-behavior: contain; }
.scroller-track::-webkit-scrollbar { display: none; }
.scroller-arrow {
  position: absolute; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
  opacity: 0; pointer-events: none; transform: scale(0.85); transition: opacity 0.25s ease, transform 0.3s var(--ease), background-color 0.2s ease;
}
.scroller-arrow:hover { background: rgba(0, 0, 0, 0.78); }
.scroller-arrow svg { width: 18px; height: 18px; }
.scroller.can-back .scroller-arrow--back, .scroller.can-more .scroller-arrow--more { opacity: 1; pointer-events: auto; transform: none; }
.scroller .scroller-arrow:hover { transform: scale(1.08); }
[data-axis='x'] .scroller-arrow { top: calc(50% - 20px - var(--gap) / 2); }
[data-axis='x'] .scroller-arrow--back { left: 12px; }
[data-axis='x'] .scroller-arrow--more { right: 12px; }
[data-axis='x'] .scroller-arrow--back svg { transform: rotate(180deg); }
[data-axis='y'] .scroller-arrow { left: calc(50% - 20px); }
[data-axis='y'] .scroller-arrow--back { top: 12px; }
[data-axis='y'] .scroller-arrow--more { bottom: 12px; }
[data-axis='y'] .scroller-arrow--back svg { transform: rotate(-90deg); }
[data-axis='y'] .scroller-arrow--more svg { transform: rotate(90deg); }

/* ——— Home: the wall ——— */
.wall {
  position: fixed; inset: 0; display: grid; gap: var(--gap); padding: var(--gap);
  grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
}
.monitor { grid-area: 2 / 2 / 4 / 5; position: relative; overflow: hidden; border-radius: var(--r); background: #070707; cursor: pointer; }
.screen { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s var(--ease); }
.screen.is-shown { opacity: 1; }
/* The film plays at full brightness. Only the top and bottom bands, where the text sits, are
   darkened; a light veil over the rest lifts while the pointer is on the screen. */
.monitor::before, .monitor::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.monitor::before { background: linear-gradient(rgba(0, 0, 0, 0.55), transparent 40%), linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 34%); }
.monitor::after { background: rgba(0, 0, 0, 0.14); transition: opacity 0.3s ease; }
.monitor:hover::after { opacity: 0; }

/* Four calm corners, all the same inset: the name top left, About and Contact top right, what's
   showing bottom left, "Watch film" bottom right. */
.monitor { --inset: 24px; }
.monitor-center { position: absolute; left: var(--inset); top: var(--inset); z-index: 2; pointer-events: none; }
.monitor-center h1 { font-size: inherit; }
.monitor-logo { display: block; }
.monitor { --logo: min(24vw, 380px); }
.monitor-logo svg { width: var(--logo); height: auto; }
/* Padding is measured to the D's top left corner: the D starts 2% (6 of 296.6 units) into the
   drawing, so the logo moves left by that much and the Q overhangs a little, as it should. */
.monitor-center { margin-left: calc(var(--logo) * -0.0202); }
/* On desktop the name moves 4 px further in from the corner: a big, heavy logo measured exactly to
   the inset looks pushed into the corner next to the smaller text at the other three. */
@media (min-width: 810px) { .monitor-center { left: calc(var(--inset) + 4px); top: calc(var(--inset) + 4px); } }
/* About and Contact take you somewhere else, so they are buttons, in the same dark see-through
   style as "Turn sound on" on the player. "Watch film" stays a plain line: it opens what you see. */
.mlinks { position: absolute; z-index: 3; right: var(--inset); top: var(--inset); display: flex; gap: 6px; }
.mlink {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 13px; transition: background-color 0.2s ease;
}
.mlink, .player-chip { transition: background-color 0.15s ease; }
/* Like the X: a light, see-through lift on hover, a little more while pressed. */
.mlink:hover, .mlink:focus-visible, .player-chip:hover { background: rgba(255, 255, 255, 0.2); }
.mlink:active, .player-chip:active { background: rgba(255, 255, 255, 0.3); }
.mlink svg { width: 10px; height: 10px; }
/* Trimmed to the capital letters, so the line sits exactly on the inset. */
.mwatch { display: block; color: var(--muted-on-film); transition: color 0.2s ease; text-box: trim-both cap alphabetic; }
.mwatch svg { display: inline-block; width: 10px; height: 10px; margin-left: 5px; vertical-align: 0; }
/* What's showing: title and role, the last line's baseline on the inset. */
.hud { position: absolute; left: var(--inset); bottom: var(--inset); z-index: 2; pointer-events: none; font-size: 15px; text-box: trim-end cap alphabetic; }
.hud-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.hud-role { color: var(--muted-on-film); }
/* "Watch film": bottom right, level with the role's baseline. It lights up while the pointer is on
   the screen or any tile, since that is the film it will open. */
.mwatch { position: absolute; z-index: 3; right: var(--inset); bottom: var(--inset); font-size: 15px; line-height: 1; }
.mwatch::before { content: ''; position: absolute; inset: -17px -12px; }
.mwatch svg { width: 11px; height: 11px; margin-left: 6px; }
.mwatch:hover, .mwatch:focus-visible, .monitor:hover .mwatch, .wall:has(.tile:hover) .mwatch { color: #fff; }
/* While the pointer is on the screen, the words (not the arrow) are underlined like the email on
   About: clicking anywhere on the screen opens this film. */
.mwatch-text { text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.2s ease; }
.monitor:hover .mwatch-text, .mwatch:focus-visible .mwatch-text { text-decoration-color: currentColor; }
.hud .ai-badge { position: static; }

/* ——— Film page ——— */
.film-page {
  --bar: 52px; --strip: clamp(110px, 17vh, 170px); --info: 330px;
  /* The player is exactly the film's shape (--ar, width ÷ height, set per film), as large as fits
     beside the credits and above the strip, pinned to the top. No letterbox, so the scrub bar sits
     on the picture's bottom edge and the title lines up with its top edge. */
  --ar: 1.7778;
  --vh: min(calc((100vw - var(--info) - 2 * var(--gap)) / var(--ar)), calc(100svh - var(--bar) - var(--strip) - 2 * var(--gap)));
  --vw: calc(var(--vh) * var(--ar));
  position: fixed; inset: 0;
}
/* The logo's D starts 0,4 px below the top of its 20 px box, which sits 16 px down the bar:
   16 px from the left keeps the corner as far from both edges. */
.bar { position: absolute; left: 0; right: 0; top: 0; z-index: 10; height: var(--bar); display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 16px; }
.bar-logo svg { width: 210px; height: 20px; }
.stage {
  position: absolute; top: var(--bar); left: var(--gap); width: var(--vw); height: var(--vh);
  overflow: hidden; border-radius: var(--r); background: #000;
  view-transition-name: film;
}
/* The credits start right beside the picture, whatever its width. */
.info {
  position: absolute; top: var(--bar); left: calc(var(--vw) + 2 * var(--gap)); right: 0; bottom: calc(var(--strip) + var(--gap));
  display: flex; flex-direction: column; padding: 0 20px 0 24px;
}
/* Trimmed to the capital letters, so the title's top edge is the picture's top edge. */
.info-title { font-size: 34px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; text-box: trim-both cap alphabetic; }
.info-rows { margin-top: 30px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.row dt { color: var(--muted); }
.row--part dd { font-weight: 600; }
.info-ai { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.info-ai .ai-badge { position: static; }

.strip-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: var(--strip); }
.strip { display: flex; gap: var(--gap); height: 100%; padding: 0 var(--gap) var(--gap); overflow-x: auto; }
.thumb { flex: 0 0 auto; height: 100%; aspect-ratio: 16 / 10; }

/* Wide films (site.js decides): a film too wide to fill the space beside the credits takes the
   full width, and the credits become one row under it. Desktop only; phones keep their stacked page. */
@media (min-width: 1200px), (min-width: 810px) and (orientation: landscape) {
  .film-page.is-wide { --vh: calc((100vw - 2 * var(--gap)) / var(--ar)); }
  .film-page.is-wide .info { top: calc(var(--bar) + var(--vh) + 20px); left: 0; flex-direction: row; align-items: flex-start; gap: 40px; padding: 0 20px 0 16px; }
  .film-page.is-wide .info-head { flex: 0 0 280px; }
  .film-page.is-wide .info-rows { flex: 1; display: flex; gap: 36px; margin: 0; border: 0; }
  .film-page.is-wide .row { display: block; padding: 0; border: 0; }
  .film-page.is-wide .row dt { margin-bottom: 6px; }
}

/* The player */
.player-video { position: absolute; inset: 0; object-fit: contain; background: #000; }
/* A film waiting for its first press shows its still, scaled to fill the frame: no black bars. */
.player-cover { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.player-big {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 104px; height: 104px; margin: -52px 0 0 -52px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: #f2f2f2; color: #000;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35); cursor: pointer;
  transition: transform 0.35s var(--ease), opacity 0.3s ease;
}
.player-big svg { width: 44px; height: 44px; }
.player-big:hover { transform: scale(1.06); }
.player.is-playing .player-big { opacity: 0; pointer-events: none; transform: scale(0.9); }
.player-chip {
  position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px;
  border: 0; border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 13px; cursor: pointer;
  transition: background-color 0.2s ease;
}

.player-chip[hidden] { display: none; }
.player-chip svg { width: 18px; height: 18px; }
.player-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 28px 10px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); transition: opacity 0.35s ease;
}
.player.is-idle .player-bar { opacity: 0; }
/* Only the controls themselves take clicks: the shading above them, and the whole bar while it is
   faded out, pass clicks through to the picture. */
.player-bar { pointer-events: none; }
.player-bar > * { pointer-events: auto; }
.player.is-idle .player-bar > * { pointer-events: none; }
/* Moving through the controls with the keyboard keeps them on screen. */
.player.is-idle:has(.player-bar :focus-visible) .player-bar { opacity: 1; }
.player.is-idle:has(.player-bar :focus-visible) .player-bar > * { pointer-events: auto; }
/* Loading: a quiet ring in the middle while the film waits for data. */
.player.is-waiting::after {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 1; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.player.is-error .player-big { display: none; }
.player.is-idle { cursor: none; }
.pb-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; cursor: pointer; transition: background-color 0.2s ease; }
.pb-btn:hover { background: rgba(255, 255, 255, 0.16); }
.pb-btn:active { background: rgba(255, 255, 255, 0.26); }
.pb-btn svg { width: 20px; height: 20px; }
.i-pause, .player.is-playing .i-play, .i-muted, .player.is-muted .i-sound { display: none; }
.player.is-playing .i-pause, .player.is-muted .i-muted { display: block; }
.pb-time, .pb-dur { min-width: 36px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.pb-track { flex: 1; height: 28px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.pb-rail { position: relative; width: 100%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; transition: height 0.2s var(--ease); }
.pb-track:hover .pb-rail, .pb-track.is-seeking .pb-rail { height: 5px; }
.pb-buffer, .pb-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); }
.pb-buffer { background: rgba(255, 255, 255, 0.3); }
.pb-fill { background: #fff; }
.player.is-placeholder .player-bar, .player.is-placeholder .player-big { display: none; }
.stage:fullscreen { border-radius: 0; }
.stage:-webkit-full-screen { border-radius: 0; }

/* ——— About ——— */
.about {
  position: fixed; inset: 0; display: grid; gap: var(--gap); padding: var(--gap);
  grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
}
.column { grid-area: 1 / 1 / 5 / 2; border-radius: var(--r); }
.column-track { height: 100%; display: flex; flex-direction: column; gap: var(--gap); overflow-y: auto; }
.column-track .tile { flex: 0 0 auto; aspect-ratio: 16 / 9; }
.panel { position: relative; border-radius: var(--r); background: var(--panel); overflow: hidden; }
/* Two square photos stacked: the column is half as wide as the panel is tall. */
.panel--about { grid-area: 1 / 2 / 5 / 6; display: grid; grid-template-columns: min(calc((100svh - 2 * var(--gap)) / 2), 44%) minmax(0, 1fr); }
.panel-photos { min-height: 0; display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap); }
.panel-photos img { min-height: 0; }
/* The name sits as far from the top as the text sits from the left, and the last line of
   the facts (trimmed to its baseline) as far from the bottom. */
.panel-text { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 72px 48px 48px; min-height: 0; }
.panel-logo { display: block; width: max-content; }
/* One line, with letters the same size the two-line logo had. */
.panel-text .panel-logo { max-width: 100%; }
.panel-text .panel-logo svg { width: 338px; max-width: 100%; height: auto; }
.bio { max-width: 31em; font-size: clamp(17px, 1.6vw, 26px); line-height: 1.2; letter-spacing: -0.02em; }
.bio p + p { margin-top: 0.75em; }
.facts { display: flex; gap: 56px; }
.facts > div { text-box: trim-end cap alphabetic; }
.facts dt { color: var(--muted); }
.facts a { text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; }
.facts a:hover, .facts a:focus-visible { text-decoration-color: currentColor; }
/* Same place as on film pages: the X's center 26 px from the top and right edges. */
.panel > .close { position: absolute; top: 2px; right: 2px; z-index: 2; }

/* ——— Hidden film (direct link only) ——— */
.hidden-film { --bar: 52px; --w: min(100%, calc((100svh - var(--bar) - 110px) * 16 / 9)); position: fixed; inset: 0; display: flex; flex-direction: column; }
.hidden-film .bar { position: static; flex: none; }
.hidden-film-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 0 var(--gap) 44px; }
.hidden-film-player { width: var(--w); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: #000; }
.hidden-film-player { position: relative; }
.hidden-film-player iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Vimeo only loads after a press: until then the film's poster stands in. */
.hidden-film-start { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; color: #fff; font: inherit; cursor: pointer; }
.hidden-film-start img { width: 100%; height: 100%; object-fit: cover; }
.hidden-film-start:hover .player-big { transform: scale(1.06); }
.hidden-film-start:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.hidden-film-note { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font-size: 13px; text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); }
.hidden-film-note span { color: rgba(255, 255, 255, 0.7); }
.hidden-film-info { width: var(--w); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hidden-film-sub { color: var(--muted); }

/* ——— Imprint, 404 ——— */
.page { position: fixed; inset: 0; padding: var(--gap); }
/* The logo's corner 16 px from the top and left, as on film pages. */
.panel--page { height: 100%; display: flex; flex-direction: column; padding: 12px 20px 30px 12px; }
.panel--page .panel-logo svg { width: 210px; height: 20px; }
/* Long imprints scroll inside the panel; the logo and the X stay put. */
.page-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.page-title { margin-top: auto; font-size: clamp(56px, 9vw, 140px); line-height: 0.9; font-weight: 500; letter-spacing: -0.04em; }
/* The imprint sits at the bottom like the rest of the page: small type, the contact details on
   the left, the privacy notice in four columns beside them. */
.page--imprint .page-title { font-size: clamp(48px, min(7vw, 9vh), 104px); }
.imprint { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); gap: 40px; font-size: 12px; line-height: 1.4; }
.imprint h2 { font-size: inherit; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.imprint p + p { margin-top: 0.7em; }
/* The privacy notice runs across the whole width, in the same columns. */
.imprint-columns { columns: 4; column-gap: 24px; }
.imprint-section { break-inside: avoid; padding-bottom: 1.2em; }
.imprint h3 { font-size: inherit; font-weight: 600; margin: 0 0 0.4em; }
.imprint a, .page-text a { text-decoration: underline; text-underline-offset: 3px; }
.text-link svg { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.3em; vertical-align: -0.05em; }
.page-text { margin-top: 28px; font-size: 18px; }

/* ——— Moving between pages: the film you click grows into the player while
   the page behind it zooms past; closing shrinks it back into its tile. ——— */
@view-transition { navigation: auto; }
::view-transition { background: var(--bg); }
::view-transition-group(film) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
::view-transition-old(film), ::view-transition-new(film) { height: 100%; object-fit: cover; }
::view-transition-new(film) { animation-duration: 0.28s; animation-delay: 0.27s; }
html[data-vt='in']::view-transition-old(root) { animation: zoom-away 0.55s cubic-bezier(0.7, 0, 0.2, 1) both; transform-origin: var(--vt-x, 50%) var(--vt-y, 50%); }
html[data-vt='in']::view-transition-new(root) { animation: fade-in 0.3s 0.25s ease both; }
/* Back out to the wall: shorter and lighter than the way in (no blur, a smaller zoom), so it stays
   smooth while the wall's films get ready behind it. */
html[data-vt='out']::view-transition-old(root) { animation: fade-out 0.2s ease both; }
html[data-vt='out']::view-transition-new(root) { animation: zoom-back 0.38s cubic-bezier(0.2, 0, 0.2, 1) both; transform-origin: var(--vt-x, 50%) var(--vt-y, 50%); }
html[data-vt='out']::view-transition-group(film) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
html[data-vt='out']::view-transition-new(film) { animation-duration: 0.2s; animation-delay: 0.18s; }
/* Every other change (About, Imprint, film to film): the old page zooms
   slightly while fading to the page gray, then the new one fades in. The two
   pages never show at the same time. */
/* Film to film: the page slides sideways through black, in the strip's direction. Next (a film
   further right): out to the left, the new one in from the right. Previous: the other way. */
html[data-vt='next']::view-transition-old(root) { animation: slide-out-left 0.24s ease-in both; }
html[data-vt='next']::view-transition-new(root) { animation: slide-in-right 0.34s 0.16s cubic-bezier(0.2, 0, 0.2, 1) both; }
html[data-vt='prev']::view-transition-old(root) { animation: slide-out-right 0.24s ease-in both; }
html[data-vt='prev']::view-transition-new(root) { animation: slide-in-left 0.34s 0.16s cubic-bezier(0.2, 0, 0.2, 1) both; }
@keyframes slide-out-left { to { opacity: 0; transform: translateX(-2.5%); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(2.5%); } }
@keyframes slide-out-right { to { opacity: 0; transform: translateX(2.5%); } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-2.5%); } }
html[data-vt='page']::view-transition-old(root) { animation: page-out 0.22s ease-in both; }
html[data-vt='page']::view-transition-new(root) { animation: page-in 0.3s 0.18s cubic-bezier(0.2, 0, 0.2, 1) both; }
html[data-vt='back']::view-transition-old(root) { animation: page-out-back 0.22s ease-in both; }
html[data-vt='back']::view-transition-new(root) { animation: page-in-back 0.3s 0.18s cubic-bezier(0.2, 0, 0.2, 1) both; }
@keyframes page-out-back { to { opacity: 0; transform: scale(0.985); } }
@keyframes page-in-back { from { opacity: 0; transform: scale(1.03); } }
@keyframes page-out { to { opacity: 0; transform: scale(1.03); } }
@keyframes page-in { from { opacity: 0; transform: scale(0.985); } }
@keyframes zoom-away { to { transform: scale(2.2); opacity: 0; filter: blur(8px); } }
@keyframes zoom-back { from { transform: scale(1.6); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ——— Tablet ——— */
@media (max-width: 1199.98px) {
  .film-page { --info: 280px; --strip: 120px; }
  .info { padding: 0 14px 0 18px; }
  .info-title { font-size: 26px; }
  .row { grid-template-columns: 88px 1fr; }
  .panel-text { padding: 28px 56px 28px 28px; }
  .imprint { grid-template-columns: 1fr; gap: 28px; }
  .imprint-columns { columns: 3; }
}

/* ——— Film page stacked: phones, and tablets held upright ——— */
@media (max-width: 809.98px), (max-width: 1199.98px) and (orientation: portrait) {
  .film-page { --strip: 0px; display: flex; flex-direction: column; height: 100%; }
  .bar { position: static; flex: none; }
  .stage { position: relative; inset: auto; flex: none; width: 100%; height: auto; aspect-ratio: var(--ar); border-radius: 0; }
  /* The strip stays at the very bottom, like an app's tab bar; long credits scroll above it. */
  .info { position: static; flex: 1; min-height: 0; width: auto; height: auto; display: flex; flex-direction: column; padding: 18px 18px 12px; overflow-y: auto; }
  .info-rows { margin-top: 22px; }
  .strip-wrap { position: relative; flex: none; height: 150px; }
}

/* Phones on their side: the picture fits the screen's height and the page scrolls down to the
   credits and the strip. */
@media (max-width: 809.98px) and (orientation: landscape) {
  .film-page { height: auto; min-height: 100%; overflow-y: auto; }
  .film-page .stage { width: min(100%, calc((100svh - var(--bar)) * var(--ar))); margin: 0 auto; }
  .info { flex: none; overflow: visible; }
}

/* ——— Phone: touch first ——— */
@media (max-width: 809.98px) {
  :root { --gap: 3px; }

  /* Wall: the whole screen is the contact sheet; the screen sits in the middle. */
  /* 3 × 6: the screen takes two rows, twelve films fill the rest. */
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
  .wall > .tile:nth-of-type(n + 13) { display: none; }
  .monitor { grid-area: 3 / 1 / 5 / 4; }
  .monitor { --logo: 46vw; }
  .monitor { --inset: 14px; }
  .mlinks { gap: 4px; }
  .mlink { height: 30px; padding: 0 11px; font-size: 12px; }
  .hud, .mwatch { font-size: 13px; }
  .tile-cta--now, .tile-hint { left: 7px; bottom: 5px; font-size: 12px; }
  .thumb-name { padding: 18px 7px 5px; font-size: 12px; }
  .ai-badge { top: 5px; right: 5px; }
  .imprint-link { display: none; } /* not shown on phones */

  /* Film page: one column, the strip stays at the bottom. */
  .film-page, .hidden-film { --bar: 48px; }
  .bar { padding: 0 4px 0 16px; }
  .bar-logo svg { width: 170px; height: 16px; }
  .info { padding: 16px 16px 12px; }
  .info-title { font-size: 30px; }
  .info-rows { margin-top: 20px; }
  .row { grid-template-columns: 100px 1fr; padding: 9px 0; }
  .strip-wrap { height: 116px; }
  .strip { padding: 0 var(--gap) calc(var(--gap) + env(safe-area-inset-bottom)); scroll-snap-type: x mandatory; scroll-padding: 0 var(--gap); }
  .thumb { height: 92px; scroll-snap-align: start; }
  /* Center the arrows on the thumbnails, not on the strip (which also holds the home-bar inset). */
  .thumb video { filter: none; opacity: 0.85; }
  .player-big { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .player-big svg { width: 32px; height: 32px; }
  .player-bar { padding: 20px 4px 2px; gap: 2px; }
  .pb-time, .pb-dur { font-size: 12px; min-width: 32px; }

  /* About: panel first, films as a swipeable row at the bottom. */
  .about { position: static; display: flex; flex-direction: column; min-height: 100svh; }
  /* The text panel fills the screen above the films, so the space above the logo and below
     "Based in" is always the 16 px of the sides, and on most phones the page fits without scrolling. */
  .panel--about { order: -1; flex: 1; display: flex; flex-direction: column; container-type: inline-size; }
  .panel-photos { flex: none; aspect-ratio: 2 / 1; grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .panel-text { flex: 1; padding: 16px; gap: 20px; }
  .panel-text .panel-logo svg { width: 262px; }
  .bio { font-size: 14px; line-height: 1.32; letter-spacing: -0.01em; }
  .facts { gap: 32px; }
  /* The X sits level with the logo, below the photos (they are half as tall as the panel is wide;
     the logo is 262 px wide, so 24,6 px tall, 16 px below them). */
  .panel--about > .close { top: calc(50cqw + 16px + 262px * 51.17 / 545.88 / 2 - 20px); right: 1px; }
  .column { height: 100px; flex: none; }
  .column[data-axis] .column-track { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .column-track .tile { height: 100%; aspect-ratio: 16 / 10; }
  .column-track .tile video { filter: none; opacity: 0.85; }
  /* About scrolls on phones: let it run under Safari's toolbar, with room to clear it at the end. */
  .about { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

  .page { position: static; min-height: 100svh; }
  .panel--page { min-height: calc(100svh - 2 * var(--gap)); padding: 13px 16px 28px 13px; }
  .panel--page > .close { top: 1px; right: 1px; }
  .page-body { padding-top: 56px; }
  .imprint { gap: 24px; font-size: 13px; }
  .imprint-columns { columns: 1; }
}

/* Mobile Safari tints its toolbars from fixed elements touching the screen's
   top and bottom edges. The full-screen pages put video there, so two strips
   (5px visible, the minimum Safari samples) keep the toolbars the page color.
   Scrolling pages (About, Imprint) skip them so content runs under the toolbar. */
.edge { display: none; }
@media (hover: none) {
  body:is([data-page='wall'], [data-page='film'], [data-page='hidden']) .edge {
    display: block; position: fixed; left: 0; right: 0; z-index: 90; height: 12px; background: var(--bg); pointer-events: none;
  }
  .edge--top { top: -7px; }
  .edge--bottom { bottom: -7px; }
  .wall { padding-top: 5px; padding-bottom: 5px; }
}

/* Touch screens: names always show, and instead of arrows (which covered the films) a row fades
   out at the edge where there is more to swipe to. */
@media (hover: none) {
  .thumb-name { opacity: 1; }
  .scroller-arrow { display: none; }
  .scroller { --fade-back: 0px; --fade-more: 0px; }
  .scroller.can-back { --fade-back: 28px; }
  .scroller.can-more { --fade-more: 56px; }
  .strip-wrap .scroller-track { mask-image: linear-gradient(to right, transparent, #000 var(--fade-back), #000 calc(100% - var(--fade-more)), transparent); }
  .column .scroller-track { mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-back), #000 calc(100% - var(--fade-more)), transparent); }
}
@media (hover: none) and (max-width: 809.98px) {
  .column .scroller-track { mask-image: linear-gradient(to right, transparent, #000 var(--fade-back), #000 calc(100% - var(--fade-more)), transparent); }
}

/* Smoother, continuous corners (squircles) where the browser can draw them:
   Chrome and Edge today. Others keep the regular rounded corners. A squircle
   looks tighter than a circle arc of the same size, so the radii grow a little. */
@supports (corner-shape: squircle) {
  :root { --r: 10px; --r-sm: 12px; --r-xs: 8px; }
  .tile, .tile.is-current::after, .tile:focus-visible::after, .monitor, .stage, .column, .panel, .hidden-film-player,
  .close, .player-chip, .pb-btn, .ai-badge, .mlink { corner-shape: squircle; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .tile video, .screen { transition: none; }
}