/* Layout concept: a screening programme. A letterboxed reel opens the page, original films get the big frames,
   commercial work reads as a credits index, everything sits on black so the films carry the colour. */
:root {
  color-scheme: dark;
  --black: #000;
  --ink: #eeece7;
  --dim: #a19e98;
  --faint: #75726c;
  --rule: rgba(238, 236, 231, 0.09);
  --panel: #0b0b0a;

  --display: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* motion tokens */
  --enter: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint: entrances */
  --expo: cubic-bezier(0.16, 1, 0.3, 1);     /* ease-out-expo: type reveals */
  --exit: cubic-bezier(0.7, 0, 0.84, 0);     /* ease-in-expo: exits, about half as long */

  --gutter: clamp(20px, 4vw, 64px);
  --max: 1680px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--black); color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.container { max-width: var(--max); margin-inline: auto; }
.label { font: 500 11px/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--ink); }
.link span { border-bottom: 1px solid var(--rule); transition: border-color 150ms var(--enter); }
.link:hover span { border-color: var(--ink); }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 50; background: var(--ink); color: var(--black); padding: 8px 14px; }
.skip:focus { left: 16px; }

/* ---------- header: lives in the top letterbox bar ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--black); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--black); border-bottom: 1px solid transparent; transition: border-color 300ms var(--enter); }
.top.is-scrolled { border-bottom-color: var(--rule); }
.top .container { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { font: 400 16px/1 var(--display); letter-spacing: 0; }
.nav { display: flex; gap: 32px; font-size: 14px; color: var(--dim); }
.nav a { padding-block: 12px; transition: color 150ms var(--enter); }
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }
.menu-btn { display: none; font-size: 14px; min-height: 44px; }

/* ---------- hero ---------- */
.screen { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; background: var(--panel); width: min(calc(100% - 2 * max(var(--gutter), 6vw)), 1440px); margin: clamp(24px, 4vw, 64px) auto 0; }
.screen img, .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen video { opacity: 0; transition: opacity 600ms var(--enter); }
.screen video.is-playing { opacity: 1; }
.band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; width: min(calc(100% - 2 * max(var(--gutter), 6vw)), 1440px); margin-inline: auto; padding: clamp(22px, 2.6vw, 36px) 0 0 !important; }
.name { font: 400 clamp(22px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -0.005em; }
.name .ch { display: inline-block; white-space: pre; }
.role { margin-top: 10px; font-size: 14px; color: var(--dim); }
.role .city { color: var(--faint); margin-left: 1.4em; }
.reel-meta { display: grid; justify-items: end; gap: 2px; padding-bottom: 0; text-align: right; font-size: 13px; color: var(--dim); }
.timecode { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--ink); }
.timecode .of { color: var(--faint); }
.reel-toggle { min-height: 44px; font-size: 13px; color: var(--dim); }
.reel-toggle:hover { color: var(--ink); }

/* ---------- sections ---------- */
.section { padding-top: clamp(104px, 12vw, 184px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 3.4vw, 52px); }
.section-head h2 { font: 400 clamp(18px, 1.5vw, 21px)/1.2 var(--display); letter-spacing: 0; }
.section-head p { color: var(--faint); font-size: 13px; max-width: 40ch; text-align: right; }

.frame { position: relative; overflow: hidden; background: var(--panel); }
.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; }
.frame > video.preview { position: absolute; inset: 0; opacity: 0; transition: opacity 180ms var(--exit); }
.frame > video.preview.is-playing { opacity: 1; transition: opacity 360ms var(--enter); }
.play-hint { position: absolute; left: 16px; bottom: 14px; font: 500 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity 180ms var(--exit); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.tile:hover .play-hint, .tile:focus-visible .play-hint, .feature-frame:hover .play-hint { opacity: 1; transition: opacity 300ms var(--enter) 120ms; }

/* featured film */
.feature { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 56px); align-items: end; }
.feature-frame { display: block; aspect-ratio: 16 / 9; }
.feature-info h3 { font: 400 clamp(22px, 1.9vw, 27px)/1.15 var(--display); letter-spacing: 0; margin-bottom: 18px; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 24px; font-size: 13.5px; border-top: 1px solid var(--rule); padding-top: 18px; }
.facts dt { color: var(--dim); }
.feature-actions { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 22px; }

/* shorts: an uneven programme, 7 + 5, then rows of three */
.shorts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(44px, 5vw, 80px) clamp(16px, 2vw, 28px); margin-top: clamp(80px, 9vw, 140px); }
.shorts-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 0; margin-bottom: calc(-1 * clamp(20px, 3vw, 40px)); }
.shorts-head h3 { font: 400 16px/1.2 var(--display); letter-spacing: 0; }
.shorts-head p { font-size: 13px; color: var(--faint); }
.tile { grid-column: span 4; display: block; min-width: 0; }
.tile.w7 { grid-column: span 7; }
.tile.w5 { grid-column: span 5; }
.tile .frame { aspect-ratio: 16 / 9; }
.tile.w7 .frame, .tile.w5 .frame { aspect-ratio: auto; height: min(calc((100vw - 2 * var(--gutter)) * 0.328), 551px); }
.tile h4 { font: 500 clamp(16px, 1.2vw, 18px)/1.3 var(--display); letter-spacing: -0.005em; margin: 14px 0 2px; }
.tile p { font-size: 13px; color: var(--dim); }

/* ---------- commercial: credits index ---------- */
.credits-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.credits-cols, .credit-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: 20px; }
.credits-cols { padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.credit-row { padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; color: var(--dim); font-size: 14px; transition: color 150ms var(--enter); }
.credit-row .client { font: 500 16px/1.35 var(--display); letter-spacing: -0.005em; color: var(--ink); }
.credit-row .client small { display: block; margin-top: 4px; font: 400 12px/1.4 var(--body); letter-spacing: 0; color: var(--faint); }
.credit-row:hover, .credit-row:focus-visible, .credit-row.is-active { color: var(--ink); }
.credit-row .thumb { display: none; }
.credit-row .ext { white-space: nowrap; }
.monitor { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); }
.monitor .frame { aspect-ratio: 16 / 9; }
.monitor .frame img { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms var(--exit); }
.monitor .frame img.is-on { opacity: 1; transition: opacity 420ms var(--enter); }
.monitor figcaption { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--dim); }
.monitor figcaption b { font-weight: 500; color: var(--ink); }

/* ---------- news ---------- */
.news-list { border-top: 1px solid var(--rule); }
.news-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 180px); gap: clamp(16px, 3vw, 48px); padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.news-item time { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--dim); font-size: 14px; padding-top: 4px; }
.news-item h3 { font: 500 clamp(17px, 1.4vw, 20px)/1.25 var(--display); letter-spacing: -0.005em; margin: 6px 0 6px; }
.news-item p { font-size: 14px; color: var(--dim); max-width: 60ch; }
.news-item .frame { aspect-ratio: 4 / 3; }
.news-item .link { margin-top: 6px; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: clamp(180px, 18vw, 260px) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.portrait { aspect-ratio: 4 / 5; }
.portrait img { object-position: center 30%; }
.bio { display: grid; gap: 1em; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.65; max-width: 62ch; }
.bio p { color: #d7d4ce; }
.cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-top: 48px; }
.cols .label { margin-bottom: 14px; }
.cols li { font-size: 13.5px; line-height: 1.85; }
.cols em { font-style: normal; color: var(--faint); }
.contact { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px; }
.email { font: 500 clamp(20px, 2vw, 28px)/1.2 var(--display); letter-spacing: -0.0075em; border-bottom: 1px solid var(--rule); padding-bottom: 4px; transition: border-color 150ms var(--enter); overflow-wrap: anywhere; }
.email:hover { border-color: var(--ink); }
.socials { display: flex; gap: 28px; font-size: 14px; color: var(--dim); }
.socials a { padding-block: 12px; }
.socials a:hover { color: var(--ink); }

details.more { margin-top: 40px; border-top: 1px solid var(--rule); }
details.more + details.more { margin-top: 0; }
details.more summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; font: 500 15px/1.2 var(--display); letter-spacing: -0.0075em; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font: 300 22px/1 var(--body); color: var(--dim); transition: transform 300ms var(--enter); }
details.more[open] summary::after { transform: rotate(45deg); }
.timeline li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.timeline .when { color: var(--dim); font-variant-numeric: tabular-nums; }
.timeline b { font: 500 16px/1.4 var(--display); }
.timeline .where { color: var(--dim); }
.timeline p { color: var(--dim); margin-top: 4px; }
.loves { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 32px; }
.loves li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.loves li span { color: var(--dim); text-align: right; }

.foot { padding-block: clamp(96px, 10vw, 160px) 40px; }
.foot .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 20px; font-size: 13px; color: var(--dim); }

/* ---------- film player ---------- */
dialog.player { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--black); color: var(--ink); }
dialog.player::backdrop { background: var(--black); }
dialog.player[open] { animation: fade 280ms var(--enter); }
.player-inner { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
.player-top { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.player-close { min-height: 44px; font-size: 14px; color: var(--dim); }
.player-close:hover { color: var(--ink); }
.player-stage { position: relative; display: grid; place-items: center; min-height: 0; }
.player-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--black); }
.player-fallback { display: grid; gap: 8px; justify-items: center; text-align: center; color: var(--dim); font-size: 14px; }
.player-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: end; }
.player-info h2 { font: 500 clamp(24px, 2.6vw, 36px)/1.1 var(--display); letter-spacing: -0.0125em; }
.player-info p { color: var(--dim); font-size: 14px; margin-top: 6px; max-width: 70ch; }
.player-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--dim); }
.player-nav button { min-height: 44px; }
.player-nav button:hover { color: var(--ink); }
.player-nav .count { font-variant-numeric: tabular-nums; color: var(--faint); }

/* ---------- about: partners ---------- */
.partners { margin-top: clamp(64px, 7vw, 104px); display: grid; grid-template-columns: clamp(180px, 18vw, 260px) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.partners-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; align-items: center; }
.partner { display: flex; align-items: center; justify-content: center; min-height: 64px; opacity: 0.62; transition: opacity 200ms var(--enter); }
.partner:hover, .partner:focus-visible { opacity: 1; }
.partner img { width: 100%; max-width: 128px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); }
.partner .logo-google { max-width: 100px; height: 32px; }
.partner .logo-elevenlabs { height: 22px; }

/* ---------- contact: the one larger line on the page ---------- */
.contact-band { margin-top: clamp(96px, 10vw, 160px); }
.contact-band .container { border-top: 1px solid var(--rule); padding-block: clamp(48px, 6vw, 88px); display: grid; gap: 18px; }
.contact-band .email { justify-self: start; font: 400 clamp(28px, 3.6vw, 52px)/1.1 var(--display); letter-spacing: -0.01em; border-bottom: 1px solid var(--rule); padding-bottom: 6px; transition: border-color 200ms var(--enter); overflow-wrap: anywhere; }
.contact-band .email:hover { border-color: var(--ink); }
.contact-links { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 6px; }

/* ---------- experience, films and books ---------- */
.extras { padding-top: clamp(40px, 5vw, 72px); }
.extras details.more { margin-top: 0; }
.extras details.more:last-child { border-bottom: 1px solid var(--rule); }
.experience-list { padding-bottom: 24px; }
.experience-entry { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 24px; padding: 16px 0; border-top: 1px solid var(--rule); }
.experience-entry > * { grid-column: 2; margin: 0; }
.experience-entry .timeline-date { grid-column: 1; grid-row: 1 / span 3; color: var(--dim); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.experience-entry .timeline-title { font: 500 15px/1.4 var(--display); }
.experience-entry .timeline-company { color: var(--dim); font-size: 13.5px; }
.experience-entry .timeline-desc { color: var(--dim); font-size: 13.5px; margin-top: 4px; max-width: 70ch; }
.ribbon-label { margin: 8px 0 18px; }
.ribbon { overflow: hidden; margin-bottom: 40px; }
.ribbon-track { display: flex; gap: 28px; width: max-content; animation: drift 160s linear infinite; }
.ribbon.books .ribbon-track { animation-duration: 180s; }
.ribbon:hover .ribbon-track, .ribbon:focus-within .ribbon-track, details:not([open]) .ribbon-track { animation-play-state: paused; }
.ribbon-group { display: flex; gap: 28px; flex-shrink: 0; }
.poster { width: 150px; flex: 0 0 150px; }
.poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; object-position: bottom; background: var(--black); }
.ribbon.books .poster img { padding: 8% 6% 0; }
.poster figcaption { margin-top: 12px; display: grid; gap: 4px; }
.poster b { font-weight: 500; font-size: 13px; line-height: 1.35; }
.poster span { font-size: 11.5px; color: var(--dim); line-height: 1.4; }
@keyframes drift { to { transform: translateX(calc(-50% - 14px)); } }

/* ---------- Fanal: a play button that is always there ---------- */
.play-btn { position: absolute; left: 24px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(238, 236, 231, 0.85); background: rgba(0, 0, 0, 0.28); transition: transform 200ms var(--enter), background 200ms var(--enter); }
.play-btn::after { content: ""; position: absolute; left: 22px; top: 18px; border-left: 15px solid var(--ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.feature-frame:hover .play-btn, .feature-frame:focus-visible .play-btn { transform: scale(1.06); background: rgba(0, 0, 0, 0.45); }

@media (max-width: 680px), (prefers-reduced-motion: reduce) {
  .ribbon { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .ribbon-track { animation: none; }
  .ribbon-group[aria-hidden="true"] { display: none; }
  .poster { scroll-snap-align: start; }
}
@media (max-width: 680px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 220px; }
  .partners { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .partners-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
  .experience-entry { grid-template-columns: minmax(0, 1fr); }
  .experience-entry > *, .experience-entry .timeline-date { grid-column: 1; grid-row: auto; }
  .poster { width: 120px; flex-basis: 120px; }
}

/* ---------- film grain over everything, barely there ---------- */
body::after { content: ""; position: fixed; inset: -50%; z-index: 40; pointer-events: none; background: url("assets/grain.png") repeat; opacity: 0.045; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------- choreography ----------
   Load: the reel fades in and settles for 8 s, then the name arrives letter by letter, 35 ms apart.
   Scroll: each block fades in once (no slide), its image settles from 103%, text follows 120 ms later. */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes settle-sm { from { transform: scale(1.03); } to { transform: scale(1); } }
.screen > * { animation: fade 1200ms var(--enter) both, settle 8000ms var(--enter) both; }
.js .name .ch { animation: fade 900ms var(--expo) both; animation-delay: var(--d, 0ms); }
.js .band .role, .js .band .reel-meta { animation: fade 900ms var(--enter) 1000ms both; }
.js [data-reveal].is-pending { opacity: 0; }
.js [data-reveal].is-in { animation: fade 800ms var(--enter) both; }
.js [data-reveal].is-in .frame > img { animation: settle-sm 1600ms var(--enter) both; }
.js [data-reveal].is-in.text-after { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal].is-pending { opacity: 1; }
}

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .credits-wrap { grid-template-columns: minmax(0, 1fr); }
  .monitor { display: none; }
  .credit-row { grid-template-columns: 112px minmax(0, 1fr); gap: 4px 18px; align-items: start; }
  .credits-cols { display: none; }
  .credit-row .thumb { display: block; grid-row: 1 / span 4; aspect-ratio: 16 / 9; }
  .credit-row > :not(.thumb) { grid-column: 2; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 240px; }
}

/* ---------- phone ---------- */
@media (max-width: 680px) {
  html { scroll-padding-top: 72px; }
  .top .container { height: 60px; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 60px; flex-direction: column; gap: 0; padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) 20px max(var(--gutter), env(safe-area-inset-left, 0px)); background: var(--black); border-bottom: 1px solid var(--rule); font-size: 18px; }
  .nav.is-open { display: flex; }
  .screen { aspect-ratio: 16 / 9; width: calc(100% - 2 * var(--gutter)); margin-top: 8px; }
  .band { width: calc(100% - 2 * var(--gutter)); }
  .band { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .reel-meta { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: space-between; align-items: center; border-top: 1px solid var(--rule); padding-top: 4px; }
  .role .city { display: block; margin: 4px 0 0; }
  .section-head { flex-direction: column; gap: 8px; }
  .section-head p { text-align: left; }
  .shorts { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .tile, .tile.w7, .tile.w5 { grid-column: 1 / -1; }
  .tile.w7 .frame, .tile.w5 .frame { height: auto; aspect-ratio: 16 / 9; }
  .shorts-head { flex-direction: column; gap: 4px; margin-bottom: -20px; }
  .news-item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .news-item .frame { max-width: 100%; aspect-ratio: 16 / 9; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .loves { grid-template-columns: minmax(0, 1fr); }
  .player-info { grid-template-columns: minmax(0, 1fr); }
}
/* press screenshots: show the whole page, never cropped */
.news-item .frame.doc { aspect-ratio: 876 / 800; background: #fff; }
.news-item .frame.doc > img { object-fit: contain; }
@media (max-width: 720px) { .news-item .frame.doc { aspect-ratio: 876 / 800; max-width: 420px; } }

/* ---------- arrows: drawn, never emoji ---------- */
.arr { width: 0.72em; height: 0.72em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--enter); }
.link:hover .arr, .credit-row:hover .arr { transform: translate(1px, -1px); }
.link.save:hover .arr { transform: translateX(2px); }
.credit-row .ext { display: inline-flex; align-items: center; gap: 6px; }

/* links read as text plus arrow, no underline rules */
.link span { border-bottom: 0; transition: color 150ms var(--enter); }
.link:hover span { color: var(--dim); }

/* contact: save on its own line, socials together on the next */
.contact-links { display: grid; gap: 0; justify-items: start; }
.social-links { display: flex; flex-wrap: nowrap; gap: 0 28px; }

/* ---------- phone: fewer lines, centred heads ---------- */
@media (max-width: 680px) {
  .reel-meta { border-top: 0; padding-top: 0; }
  .news-list { border-top: 0; }
  .news-item { border-bottom: 0; padding: 0 0 48px; }
  .partners { justify-items: center; text-align: center; }
  .partners-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; max-width: 320px; }
  .partner { min-height: 44px; }
  .partner img { width: auto; max-width: 84px; height: 20px; }
  .partner .logo-google { max-width: 70px; height: 22px; }
  .partner .logo-elevenlabs { height: 15px; }
  .extras details.more, .extras details.more:last-child { border: 0; }
  .experience-entry { border-top: 0; padding: 12px 0; }
  .loves li { border-top: 0; }
  .contact-band .container { border-top: 0; padding-top: 24px; }
  .contact-band .email { border-bottom: 0; padding-bottom: 0; font-size: clamp(26px, 7.4vw, 34px); }
  .social-links { gap: 0 22px; font-size: 14px; }
  .foot .container { border-top: 0; padding-top: 0; }
}
@media (max-width: 680px) {
  .credit-row { border-bottom: 0; padding: 0 0 28px; }
}

/* ---------- creative partners, small, right under the reel ---------- */
.partners-top { width: min(calc(100% - 2 * max(var(--gutter), 6vw)), 1440px); margin: clamp(40px, 4.4vw, 64px) auto 0; display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.partners-top .label { flex: none; font-size: 10.5px; color: var(--faint); }
.partners-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(22px, 2.6vw, 40px); }
.partners-row .partner { min-height: 36px; opacity: 0.5; }
.partners-row .partner img { width: auto; max-width: 84px; height: 16px; }
.partners-row .partner .logo-google { max-width: 62px; height: 19px; }
.partners-row .partner .logo-elevenlabs { height: 12px; }
@media (max-width: 680px) {
  .partners-top { width: calc(100% - 2 * var(--gutter)); flex-direction: column; gap: 10px; margin-top: 40px; }
  .partners-row { justify-content: center; gap: 4px 22px; max-width: 300px; }
  .partners-row .partner img { max-width: 70px; height: 14px; }
  .partners-row .partner .logo-google { max-width: 52px; height: 16px; }
  .partners-row .partner .logo-elevenlabs { height: 10.5px; }
}

/* ---------- the name docks into the corner as you scroll ----------
   At the top of the page the only name is the one under the reel. As it reaches the header,
   the header's wordmark takes over from that exact spot and size, and slides up into the corner,
   scrubbed by the scroll (so scrolling back reverses it). */
.wordmark { display: inline-block; transform-origin: 0 0; will-change: transform, opacity; }
.js .wordmark.is-docking { visibility: hidden; }

/* reel: no hairline at the edges. The poster underneath was peeking through sub-pixel gaps
   around the playing video, so the video bleeds 1px past the frame and the poster hides once it plays. */
.screen video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.screen:has(video.is-playing) > img { visibility: hidden; transition: visibility 0s linear 700ms; }

/* Machina Collective: the white logo on a dark plate, like a still */
.news-item .logo-frame { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--panel); }
.news-item .logo-frame img { width: 62%; height: auto; object-fit: contain; opacity: 0.88; transition: opacity 200ms var(--enter); }
.news-item .logo-frame:hover img { opacity: 1; }

/* partners: under the reel on larger screens, at the end of About on phones */
.partners-mobile { display: none; }
@media (max-width: 680px) {
  .partners-top { display: none; }
  .partners-mobile { display: grid; justify-items: center; gap: 12px; margin-top: 64px; text-align: center; }
  .partners-mobile .label { font-size: 10.5px; color: var(--faint); }
  .about-city { display: none; }
  .about { justify-items: center; }
  .portrait { width: 168px; max-width: none; aspect-ratio: 1; border-radius: 50%; }
  .portrait img { object-position: center 28%; }
  .news-item .logo-frame { aspect-ratio: 16 / 9; }
}

/* ---------- audit pass ---------- */
/* email reads like the other links: no resting underline, a quiet one on hover */
.contact-band .email { border-bottom-color: transparent; }
.contact-band .email:hover { border-bottom-color: var(--rule); }
/* small laptops and tablets: the credits index needs the full width before it gets cramped */
@media (max-width: 1180px) {
  .credits-wrap { grid-template-columns: minmax(0, 1fr); }
  .monitor { display: none; }
  .credit-row { grid-template-columns: 112px minmax(0, 1fr); gap: 4px 18px; align-items: start; }
  .credits-cols { display: none; }
  .credit-row .thumb { display: block; grid-row: 1 / span 4; aspect-ratio: 16 / 9; }
  .credit-row > :not(.thumb) { grid-column: 2; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .credit-row { grid-template-columns: 160px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr); gap: 4px 24px; align-items: baseline; }
  .credit-row .thumb { grid-row: auto; align-self: start; }
  .credit-row > :not(.thumb) { grid-column: auto; }
}
/* phones: every section opens the same way, centred */
@media (max-width: 680px) {
}

/* ---------- readability pass ----------
   Faint grey was 4.4:1 on black, under the 4.5:1 minimum for small text; lifted to about 5.7:1.
   On phones nothing reads smaller than 13px, body copy sits at 16px, labels at 11.5px. */
:root { --faint: #8b8882; }
@media (max-width: 680px) {
  .name { font-size: 30px; }
  .role { font-size: 15px; }
  .label { font-size: 11.5px; }
  .section-head h2 { font-size: 21px; }
  .section-head p, .shorts-head p { font-size: 14px; }
  .tile h4 { font-size: 17px; }
  .tile p, .credit-row, .reel-meta, .reel-toggle { font-size: 14px; }
  .credit-row .client { font-size: 17px; }
  .credit-row .client small { font-size: 13px; }
  .facts { font-size: 14.5px; }
  .news-item time { font-size: 14px; }
  .news-item h3 { font-size: 19px; }
  .news-item p { font-size: 15px; }
  .bio { font-size: 16px; }
  .experience-entry .timeline-title { font-size: 16px; }
  .experience-entry .timeline-date, .experience-entry .timeline-company, .experience-entry .timeline-desc { font-size: 14.5px; }
  .poster b { font-size: 14px; }
  .poster span { font-size: 13px; }
  .partners-mobile .label, .partners-top .label { font-size: 11.5px; }
  .link, .social-links { font-size: 15px; }
  .foot .container { font-size: 14px; }
}

/* player: no ring around the dialog itself; Close shows focus as a quiet underline */
dialog.player:focus { outline: none; }
.player-close:focus-visible { outline: none; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
/* Machina logo sits straight on the page black, no plate */
.news-item .logo-frame { background: transparent; }

/* about: a small round portrait on every screen */
.about { grid-template-columns: 168px minmax(0, 1fr); align-items: center; }
.portrait { width: 168px; aspect-ratio: 1; border-radius: 50%; }
.portrait img { object-position: center 28%; }
@media (max-width: 1000px) { .about { grid-template-columns: 168px minmax(0, 1fr); } .portrait { max-width: none; } }
@media (max-width: 680px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  /* hero: role and city on one line, city to the right and dimmer */
  .role { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .role .city { display: inline; margin: 0; color: var(--faint); }
  .reel-meta { justify-content: space-between; }
}
/* portrait size: 148px on larger screens, 120px centred on phones */
.about { grid-template-columns: 148px minmax(0, 1fr); }
.portrait { width: 148px; }
@media (max-width: 1000px) { .about { grid-template-columns: 148px minmax(0, 1fr); } }
@media (max-width: 680px) {
  .about { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .portrait { width: 120px; margin-inline: auto; }
  .bio { justify-self: stretch; }
}
/* name: larger on desktop */
@media (min-width: 681px) { .name { font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -0.01em; } .role { font-size: 15px; } }

/* ---------- reel: pause as a small drawn icon on the frame ----------
   Shows on hover with a mouse; on touch screens it stays faintly visible, since there is no hover.
   The whole frame is also a tap target. Keeping a pause control matters: moving images that play
   on their own for more than a few seconds must be stoppable (accessibility, motion sensitivity). */
.screen { cursor: pointer; }
.screen picture { position: absolute; inset: 0; }
.screen:has(video.is-playing) picture img { visibility: hidden; transition: visibility 0s linear 700ms; }
.reel-toggle { position: absolute; z-index: 3; right: 14px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; min-height: 0; color: var(--ink); opacity: 0; transition: opacity 250ms var(--enter); }
.reel-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(0,0,0,.5)); }
.reel-toggle .i-play { display: none; fill: currentColor; stroke: none; }
.reel-toggle.is-paused .i-play { display: block; }
.reel-toggle.is-paused .i-pause { display: none; }
.screen:hover .reel-toggle, .reel-toggle:focus-visible, .reel-toggle.is-paused { opacity: 0.85; }
@media (hover: none) { .reel-toggle { opacity: 0.6; } }
.reel-meta { gap: 0; }

/* ---------- phones, option C: a tall reel edge to edge, the name set over its lower edge ---------- */
@media (max-width: 680px) {
  .hero { position: relative; }
  .screen { width: 100%; margin: 0; aspect-ratio: 4 / 5; }
  .screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 24%, rgba(0,0,0,.18) 42%, rgba(0,0,0,0) 56%); }
  .band { position: absolute; left: 0; right: 0; top: calc(100vw * 1.25 - 128px); width: auto; padding: 0 var(--gutter) !important; z-index: 3; pointer-events: none; }
  .name { font-size: 34px; }
  .reel-meta { display: none; }
  .reel-toggle { top: 10px; bottom: auto; }
}
/* platform screenshots: whole image, on the page black */
.news-item .frame.shot { aspect-ratio: 971 / 804; background: transparent; }
.news-item .frame.shot > img { object-fit: contain; }
@media (max-width: 680px) { .news-item .frame.shot { aspect-ratio: 971 / 804; } }

/* desktop: the time sits just under the reel's right edge */
@media (min-width: 681px) {
  .reel-meta { align-self: start; margin-top: calc(-1 * clamp(22px, 2.6vw, 36px) + 12px); }
}

/* phones: the reel runs all the way up; Menu floats on it until the reel scrolls away */
@media (max-width: 680px) {
  .top { transition: background-color 300ms var(--enter), border-color 300ms var(--enter); }
  .top.over-reel { background: transparent; border-bottom-color: transparent; }
  .hero { margin-top: -60px; }
  .screen::after { background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 17%, rgba(0,0,0,0) 46%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.6) 76%, rgba(0,0,0,.88) 100%); }
  .reel-toggle { top: 70px; }
}
/* desktop: the reel framed like a print in a mount, the space above it roughly equal to the space at its sides */
@media (min-width: 681px) { .screen { margin-top: clamp(8px, 1.4vw, 22px); } }
/* Shorts uses the same size as the section titles */
.shorts-head h3 { font: 400 clamp(18px, 1.5vw, 21px)/1.2 var(--display); letter-spacing: 0; }
@media (max-width: 680px) { .shorts-head h3 { font-size: 21px; } }
/* phones: the round portrait aligns left with the About title and bio */
@media (max-width: 680px) { .about { justify-items: start; } .portrait { margin-inline: 0; } }

/* ---------- news images open larger ---------- */
.news-item .frame.zoomable { cursor: zoom-in; }
.news-item .frame.zoomable img { transition: opacity 200ms var(--enter); }
.news-item .frame.zoomable:hover img { opacity: 0.88; }
dialog.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.97); display: none; place-items: center; cursor: zoom-out; }
dialog.lightbox[open] { display: grid; animation: fade 280ms var(--enter); }
dialog.lightbox::backdrop { background: transparent; }
dialog.lightbox:focus { outline: none; }
dialog.lightbox img { max-width: min(92vw, 1400px); max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lightbox-close { position: fixed; top: max(16px, env(safe-area-inset-top, 0px)); right: var(--gutter); min-height: 44px; font-size: 14px; color: var(--dim); }
.lightbox-close:hover { color: var(--ink); }

/* the gap from the hero to Films matches the rhythm of the page, a little tighter than between sections */
#films.section { padding-top: clamp(72px, 7vw, 112px); }

/* phones: the reel takes about three quarters of the screen; the name sits low on it */
@media (max-width: 680px) {
  .screen { aspect-ratio: auto; height: 76vh; height: 76svh; min-height: 420px; }
  .band { top: auto; bottom: 26px; }
  .screen::after { background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 58%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.62) 85%, rgba(0,0,0,.9) 100%); }
}

/* ---------- name block: name a touch bolder, Paris, France as a small credit line ---------- */
.name { font-weight: 470; }
.loc { margin: 12px 0 0; font: 500 11.5px/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.loc + .role { margin-top: 8px; }
.js .band .loc { animation: fade 900ms var(--enter) 1000ms both; }
@media (max-width: 680px) { .loc { margin-top: 10px; color: rgba(238,236,231,.7); } .loc + .role { margin-top: 6px; } }
.role + .loc { margin-top: 10px; }
@media (max-width: 680px) { .role + .loc { margin-top: 8px; } }

/* ---------- audit 3 ---------- */
/* one left edge for the whole page: the reel, the name and every section share the same margin */
:root { --gutter: clamp(20px, 6vw, 96px); }
.screen, .band, .partners-top { width: min(calc(100% - 2 * var(--gutter)), 1680px); }
@media (max-width: 680px) { .screen { width: 100%; } .band { width: auto; } }
.news-item .frame.shot { aspect-ratio: 853 / 678; }
@media (max-width: 680px) { .news-item .frame.shot { aspect-ratio: 853 / 678; } }
/* one rule between the last details panel and Contact, not two */
.extras details.more:last-child { border-bottom: 0; }
.contact-band { margin-top: clamp(64px, 7vw, 112px); }
/* Machina logo at a quieter size on phones */
@media (max-width: 680px) { .news-item .logo-frame img { width: 40%; } }
/* the corner name is a comfortable tap target */
.wordmark { padding-block: 14px; }

/* ---------- handwritten name ----------
   Olga's own lettering. On larger screens it sits across the reel's lower edge, as in her layout:
   about 56% of the reel's width, starting just inside its left edge, a little over half on the image. */
.name.hand { margin: 0; line-height: 0; }
.name.hand img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 10px rgba(0,0,0,.28)); }
.wordmark.hand { display: inline-block; line-height: 0; }
.wordmark.hand img { display: block; height: 19px; width: auto; }
.js .name.hand img { animation: write 2200ms var(--expo) 500ms both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@media (min-width: 681px) {
  .band { position: relative; z-index: 2; padding-top: 0 !important;
          --rw: min(calc(100vw - 2 * var(--gutter)), 1680px);
          margin-top: calc(-0.0475 * var(--rw)); }
  .name.hand { width: calc(0.56 * var(--rw)); max-width: 820px; margin-left: calc(0.0165 * var(--rw)); }
  .band .role { margin-top: 14px; }
  .reel-meta { align-self: start; margin-top: calc(0.0475 * var(--rw) + 10px); }
}
@media (max-width: 680px) {
  .name.hand { width: min(82vw, 360px); }
  .wordmark.hand img { height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .js .name.hand img { animation: none; } }

/* ---------- shorts: a new rhythm for six films (7+5, 5+7, 6+6) ---------- */
.tile.w6 { grid-column: span 6; }
.tile.w5, .tile.w7, .tile.w6 { }
.shorts .tile .frame { aspect-ratio: auto; height: min(calc((100vw - 2 * var(--gutter)) * 0.328), 551px); }
@media (max-width: 680px) { .tile.w6 { grid-column: 1 / -1; } .shorts .tile .frame { height: auto; aspect-ratio: 16 / 9; } }

/* ---------- news: every thumbnail in the same 4:3 frame ---------- */
.news-item .frame, .news-item .frame.doc, .news-item .frame.shot, .news-item .logo-frame { aspect-ratio: 4 / 3; background: transparent; }
.news-item .frame.doc > img, .news-item .frame.shot > img { object-fit: contain; }
.news-item .frame.doc > img { opacity: .9; }
@media (max-width: 680px) {
  .news-item .frame, .news-item .frame.doc, .news-item .frame.shot, .news-item .logo-frame { aspect-ratio: 4 / 3; max-width: 100%; }
}

/* ---------- Fanal: the facts sit level with the top of the image ---------- */
.feature { align-items: start; }
.feature-info h3 { margin-top: -4px; }
/* aligned lettering is a little shorter: keep the same overlap with the reel */
@media (min-width: 681px) {
  .band { margin-top: calc(-0.0423 * var(--rw)); }
  .reel-meta { margin-top: calc(0.0423 * var(--rw) + 10px); }
}
/* the O lines up exactly with the reel's left edge, the title below and every section */
@media (min-width: 681px) { .name.hand { margin-left: calc(-0.56 * var(--rw) * 8 / 1449); } }
@media (max-width: 680px) { .name.hand { margin-left: calc(-1 * min(82vw, 360px) * 8 / 1449); } }
/* header: no rule under it; the black bar is enough */
.top, .top.is-scrolled { border-bottom-color: transparent; }

/* ---------- divider audit ----------
   Lines only where they separate rows of a list, never above or below a list, never under a title.
   Kept: between commercial credits (plus the column labels), between news items, between experience entries,
   and one line above each fold-out (Experience, Films and books) because it marks the tap target. */
.facts { border-top: 0; padding-top: 4px; }
.credit-row:last-child { border-bottom: 0; }
.news-list { border-top: 0; }
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: 0; }
.experience-entry:first-child { border-top: 0; }
.loves li { border-top: 0; }
.contact-band .container { border-top: 0; }
.foot .container { border-top: 0; }
.top, .top.is-scrolled { border-bottom-color: transparent; }
@media (max-width: 680px) { .nav { border-bottom: 0; } }

/* phones: the handwritten name straddles the reel's lower edge, as on desktop;
   title and Paris sit below it on the black */
@media (max-width: 680px) {
  .band { position: relative; top: auto; bottom: auto; left: auto; right: auto; z-index: 3;
          padding: 0 var(--gutter) !important; pointer-events: auto;
          --nw: min(82vw, 360px);
          margin-top: calc(-0.55 * var(--nw) * 199 / 1449); }
  .screen::after { background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 80%, rgba(0,0,0,.25) 100%); }
  .band .role { margin-top: 12px; color: var(--dim); }
  .loc { color: var(--faint); }
}
/* Fanal: back to the facts aligned with the bottom of the image */
.feature { align-items: end; }
.feature-info h3 { margin-top: 0; }
/* phones: the handwritten name a little smaller, still across the reel's edge */
@media (max-width: 680px) {
  .band { --nw: min(66vw, 300px); }
  .name.hand { width: var(--nw); margin-left: calc(-1 * var(--nw) * 8 / 1449); }
}

/* ---------- phone refinements ---------- */
.shorts-track { display: contents; }
@media (max-width: 680px) {
  /* a clear type ladder: section titles lead, film titles follow */
  .section-head h2 { font-size: 24px; }
  .feature-info h3 { font-size: 19px; margin-bottom: 14px; }
  .tile h4 { font-size: 16px; }
  /* shorts: a swipeable row with the next film peeking in, instead of a long stack */
  .shorts { display: block; }
  .shorts-head { margin-bottom: 18px; }
  .shorts-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
                  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .shorts-track::-webkit-scrollbar { display: none; }
  .shorts-track .tile { flex: 0 0 80%; scroll-snap-align: start; }
  .shorts-track .tile .frame { aspect-ratio: 4 / 5; height: auto; }
  /* commercial: client, then one quiet line */
  .credit-row { display: block; position: relative; padding: 0 0 26px 124px; min-height: 90px; }
  .credit-row .thumb { position: absolute; left: 0; top: 2px; width: 108px; aspect-ratio: 16 / 9; }
  .credit-row .client { display: block; margin-bottom: 4px; }
  .credit-row > span:not(.client):not(.thumb) { display: inline; font-size: 13.5px; color: var(--dim); }
  .credit-row > span:not(.client):not(.thumb):empty { display: none; }
  .credit-row > span:not(.client):not(.thumb):not(:empty) + span:not(:empty)::before { content: " · "; color: var(--faint); }
}

/* phones: partners as a quiet logo row under Paris, in the normal flow; it wraps rather than ever widening the page */
.ph { display: none; }
@media (max-width: 680px) {
  .ph { display: block; margin-top: 20px; pointer-events: auto; max-width: 100%; }
  .js .band .ph { animation: fade 900ms var(--enter) 1200ms both; }
  .ph .label { font-size: 10px; color: var(--faint); margin: 0 0 4px; }
  .ph .partners-row { justify-content: flex-start; max-width: 100%; gap: 2px 18px; flex-wrap: wrap; }
  .ph .partners-row .partner { opacity: .45; min-height: 30px; flex: 0 1 auto; min-width: 0; }
  .ph .partners-row .partner img { width: auto; max-width: 54px; height: 12px; }
  .ph .partners-row .partner .logo-google { max-width: 44px; height: 14px; }
  .ph .partners-row .partner .logo-elevenlabs { height: 9px; }
  .partners-mobile { display: none !important; }
}
/* phones: no double-tap zoom, and iPhone never enlarges the text on its own */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
/* mock: title and Paris on one line, Paris pushed to the right */
@media (max-width: 680px) {
  .band > div > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; }
  .band .name, .band .ph { grid-column: 1 / -1; }
  .band .role { grid-column: 1; }
  .band .loc, .role + .loc { grid-column: 2; margin: 0; text-align: right; }
}
/* desktop too: the title on the left and PARIS on the right of the same line, under the time */
@media (min-width: 681px) {
  .band > div > div:first-child { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; }
  .band .name, .band .ph { grid-column: 1 / -1; }
  .band .role { grid-column: 1; }
  .band .loc, .role + .loc { grid-column: 2; margin: 0; text-align: right; }
  .band .reel-meta { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
}

/* ---------- phones: the menu opens as a quiet full page (only exists while open; nothing changes on the page itself) ---------- */
.nav-foot { display: none; }
@keyframes navIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 680px) {
  .nav { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; height: 100vh; height: 100dvh; overflow-y: auto;
         flex-direction: column; counter-reset: m;
         padding: calc(env(safe-area-inset-top, 0px) + 60px + 7vh) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 28px);
         background: var(--black); border: 0; }
  .nav.is-open { display: flex; animation: fade 260ms var(--enter) both; }
  .top .wordmark, .top .menu-btn { position: relative; z-index: 2; }
  .top.menu-open { background: var(--black); }
  .top.menu-open .wordmark { visibility: visible !important; opacity: 1 !important; transform: none !important; }
  .nav > a { display: flex; align-items: baseline; gap: 16px; padding-block: 10px; font: 400 34px/1.1 var(--display); letter-spacing: -0.01em; color: var(--ink); counter-increment: m; }
  .nav > a::before { content: none; }
  .nav.is-open > a { animation: navIn 520ms var(--enter) both; }
  .nav.is-open > a:nth-child(2) { animation-delay: 40ms; } .nav.is-open > a:nth-child(3) { animation-delay: 80ms; }
  .nav.is-open > a:nth-child(4) { animation-delay: 120ms; } .nav.is-open > a:nth-child(5) { animation-delay: 160ms; }
  .nav-foot { display: grid; gap: 14px; margin-top: auto; padding-top: 40px; }
  .nav.is-open .nav-foot { animation: fade 600ms var(--enter) 220ms both; }
  .nav-foot a { padding: 0; font-size: 15px; color: var(--dim); }
  .nav-foot span { display: flex; gap: 22px; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) { .nav.is-open > a { animation: none; } }

/* shorts: seven films, the last row in thirds (7+5, 5+7, 4+4+4) */
.tile.w4 { grid-column: span 4; }
@media (max-width: 680px) { .tile.w4 { grid-column: 1 / -1; } }

/* phones, for now (Olga, 18 Oct): the partner logos back at the bottom, after About; the row under Paris is hidden */
@media (max-width: 680px) {
  .band .ph { display: none !important; }
  .partners-mobile { display: grid !important; }
}

/* phones: a tiny arrow under the name, inviting a scroll; it breathes gently and fades out once you scroll */
.scroll-cue { display: none; }
@keyframes cueBob { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: .9; } }
@media (max-width: 680px) {
  .scroll-cue { display: flex; justify-content: center; width: 44px; height: 36px; margin: 18px auto 0; color: var(--ink); transition: opacity 400ms var(--enter); }
  .scroll-cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; animation: cueBob 2.4s ease-in-out 2.4s infinite both; }
  .scroll-cue.is-gone { opacity: 0; pointer-events: none; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; opacity: .7; } }
/* the arrow takes no room of its own: it sits in the existing gap between the name block and Films */
@media (max-width: 680px) {
  .hero { position: relative; }
  .scroll-cue { position: absolute; left: 50%; top: 100%; margin: 20px 0 0 -22px; z-index: 2; }
}
/* B: a hairline on the left edge, drawing downward */
@keyframes lineDraw { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 680px) {
  .scroll-cue { left: var(--gutter); width: 1px; height: 34px; margin: 18px 0 0 0; justify-content: flex-start; overflow: hidden; }
  .scroll-cue svg { display: none; }
  .scroll-cue::before { content: ""; display: block; width: 1px; height: 100%; background: rgba(238,236,231,.6); animation: lineDraw 2.6s cubic-bezier(.6,0,.2,1) 1.6s infinite both; }
}

/* ---------- phones, editorial pass: one left edge everywhere, one arrow style ---------- */
@media (max-width: 680px) {
  /* partners: aligned to the same left edge as the text, not centred */
  .partners-mobile { justify-items: start !important; text-align: left; gap: 10px; }
  .partners-mobile .partners-row { justify-content: flex-start; max-width: none; gap: 6px 24px; }
  /* commercials: the "Four films" link keeps its thin arrow with breathing room, like every other link */
  .credit-row > span.ext { display: inline-flex !important; align-items: center; gap: 6px; }
  .credit-row .ext .arr { width: 10px; height: 10px; }
  /* the small note under a client reads as a quiet caption line */
  .credit-row .client small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--faint); letter-spacing: 0; }
}
@media (max-width: 680px) {
  .partners-mobile .partners-row { display: grid; grid-template-columns: repeat(4, max-content); column-gap: clamp(10px, calc(100vw - 368px), 22px); row-gap: 4px; align-items: center; }
  .partners-mobile .partners-row .partner { justify-content: flex-start; }
}

/* the open/close mark drawn as a hairline plus, the same weight as the site's thin arrows */
details.more summary::after { content: ""; flex: none; width: 13px; height: 13px; color: var(--dim);
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; }
/* phones: the Machina logo sits on the black at the column's left edge, without an empty frame around it */
@media (max-width: 680px) {
  .news-item .logo-frame { aspect-ratio: auto !important; display: flex; justify-content: flex-start; align-items: center; padding: 28px 0 8px; }
  .news-item .logo-frame img { width: 34%; }
}
/* the hint as a quiet label, in the same small caps as PARIS, with the site's thin arrow */
@keyframes cueFade { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
@media (max-width: 680px) {
  .scroll-cue { width: auto; height: auto; overflow: visible; display: inline-flex; align-items: center; gap: 7px; margin: 26px 0 0 0; text-decoration: none; color: var(--ink); animation: cueFade 2.8s ease-in-out 1.6s infinite both; }
  .scroll-cue::before { content: none; display: none; }
  .scroll-cue span { font: 500 10.5px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; }
  .scroll-cue svg { display: block; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; animation: none; }
  .scroll-cue.is-gone { opacity: 0; animation: none; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; opacity: .6; } }
/* phones (18 Oct): cover: the reel fills the visible screen, name and title sit on it */
@media (max-width: 680px) {
  .scroll-cue { display: none !important; }
  .screen { height: 100vh; height: 100svh; min-height: 480px; }
  .band { position: absolute !important; left: 0; right: 0; top: auto !important; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); margin: 0 !important; width: auto; padding: 0 var(--gutter) !important; z-index: 3; pointer-events: none; }
  .screen::after { background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.75) 86%, rgba(0,0,0,.92) 100%) !important; }
  .band .role { color: rgba(238,236,231,.82); }
  .band .loc { color: rgba(238,236,231,.7); }
}
/* phones: the cover set like a film poster, centred: the same, set like a film poster */
@media (max-width: 680px) {
  .band > div > div:first-child { display: flex !important; flex-direction: column; align-items: center; text-align: center; }
  .band .name.hand { margin-left: 0 !important; width: min(78vw, 340px); }
  .band .role { margin-top: 14px; }
  .band .loc, .role + .loc { margin-top: 10px !important; text-align: center; }
}
/* phones: iPhone Safari's floating address bar covers the bottom of the screen, so the name sits clear above it */
@media (max-width: 680px) {
  .band { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important; }
  .screen::after { background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.72) 76%, rgba(0,0,0,.85) 100%) !important; }
}
/* phones (18 Oct): the reel ends above the name block; the handwritten name, centred, sits across the reel's lower edge, as on desktop;
   title and Paris centred beneath it, all clear of Safari's floating bar */
@media (max-width: 680px) {
  .screen { height: calc(100vh - 225px); height: calc(100svh - 225px); min-height: 380px; }
  .band { position: relative !important; top: auto !important; bottom: auto !important; left: auto; right: auto;
          margin: calc(-0.5 * min(78vw, 340px) * 199 / 1449) 0 0 !important; padding: 0 var(--gutter) !important; z-index: 3; }
  .screen::after { background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 78%, rgba(0,0,0,.25) 100%) !important; }
  .band .role { margin-top: 12px; color: var(--dim); }
  .band .loc { color: var(--faint); }
}
/* phones: under the centred title, a hairline that draws itself downward invites the scroll;
   Films starts a little lower so the first screen ends on the line, not on a half-hidden heading */
@media (max-width: 680px) {
  .scroll-cue { display: block !important; position: absolute; left: 50%; top: 100%; width: 1px; height: 40px; margin: 18px 0 0 0; overflow: hidden; animation: none !important; opacity: 1; }
  .scroll-cue span, .scroll-cue svg { display: none !important; }
  .scroll-cue::before { content: "" !important; display: block !important; width: 1px; height: 100%; background: rgba(238,236,231,.65); animation: lineDraw 2.6s cubic-bezier(.6,0,.2,1) 1.4s infinite both; }
  .scroll-cue.is-gone { opacity: 0; }
  #films.section { padding-top: 190px; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) { .scroll-cue::before { animation: none; } }
@media (max-width: 680px) {
  .screen { height: calc(100vh - 250px); height: calc(100svh - 250px); }
  .scroll-cue { height: 34px; margin-top: 14px; }
}

/* ---------- 4. numbering: sections and shorts read like a table of contents ---------- */
body { counter-reset: sec; }
.section-head { counter-increment: sec; }
.section-head h2::before { content: none; }
.shorts-track .tile p { font: 500 10.5px/1.4 var(--body) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint) !important; margin-top: 6px; }

/* ---------- 5. one spacing rhythm: the same gap between every section, a smaller one inside ---------- */
.section, .contact-band { padding-top: clamp(120px, 11vw, 176px); margin-top: 0; }
#films.section { padding-top: clamp(72px, 7vw, 112px); }
.shorts { margin-top: clamp(96px, 8vw, 128px); }
@media (max-width: 680px) {
  .section, .contact-band { padding-top: 128px; }
  #films.section { padding-top: 190px; }
  .shorts { margin-top: 96px; }
  .partners-mobile { margin-top: 96px !important; }
}

/* v57: Summer Boredom, keep her face in frame on phones */
@media (max-width: 680px) {
  a[data-film="summer"] .frame img, a[data-film="summer"] .frame video { object-position: 12% 50%; }
}

/* v59: credits on phones, keep the " · " separator when an empty column sits between two filled ones */
@media (max-width: 680px) {
  .credit-row > span:not(.client):not(.thumb):not(:empty) ~ span:not(:empty)::before { content: " · "; color: var(--faint); }
}

/* v60: 16:9 banner in news, shown whole */
.news-item .frame.wide { aspect-ratio: 16 / 9; }

/* sound: the reel starts muted (browsers only autoplay silent video); this turns the music on and off */
.reel-sound { position: absolute; z-index: 3; right: 58px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; min-height: 0; color: var(--ink); opacity: 0.7; transition: opacity 250ms var(--enter); }
.reel-sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(0,0,0,.5)); }
.reel-sound .i-on { display: none; }
.reel-sound.is-on .i-on { display: block; }
.reel-sound.is-on .i-off { display: none; }
.screen:hover .reel-sound, .reel-sound:focus-visible { opacity: 1; }
@media (max-width: 680px) { .reel-sound { top: 70px; bottom: auto; opacity: 0.85; } }

/* a second feature film under Fanal */
.feature + .feature { margin-top: clamp(72px, 8vw, 128px); }
/* Elio mirrors Fanal on computers: text on the left, image on the right */
@media (min-width: 1001px) {
  .feature.flip { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .feature.flip .feature-frame { order: 2; }
}