/* Ilia Gerber · site styles.
   Show, don't tell. Black on white, nothing else: the pictures carry the colour. The site opens on the reel as a
   square in the middle of a white page; behind it, a short selection of films shown large and whole, the rest
   behind "See more". Type in two voices only: very big, compressed and black, and very small, extended and quiet. */

:root {
  /* Roc Grotesk (Kostic) is the reference; Archivo, a grotesque with the same compressed-to-wide range, stands in. */
  --font: 'roc-grotesk', 'Archivo', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --font-mono: var(--font);
  --wide: 100%;
  --x-cond: 62%; /* the big voice: compressed */
  --x-ext: 125%; /* the small voice: extended */
  --t-meta: .6875rem;
  --t-small: .875rem;
  --t-body: 1rem;
  --t-title: 1.25rem;
  --t-lead: clamp(1.375rem, 1.1rem + .6vw, 1.75rem);
  --t-head: clamp(2.5rem, 1rem + 4vw, 5rem);
  --t-big: clamp(3.5rem, 1rem + 8vw, 9rem);
  --t-giant: clamp(5rem, 2rem + 17vw, 22rem);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --mood-dur: 1.4s;
  --ease-mood: cubic-bezier(.45, 0, .25, 1);
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --sec: clamp(120px, 5rem + 8vw, 240px);
  --bar-h: 64px;
  --gap: 8px;
  --rgap: clamp(16px, 2vw, 32px); /* between films side by side */
  --vgap: clamp(64px, 3rem + 5vw, 144px); /* between rows of films */
  --r: 0px;
  --rule: color-mix(in srgb, var(--ink) 14%, transparent);
  --rule-strong: var(--ink);
  --grain: none;
  /* Black and white. The secondary voice is the same black, lighter. */
  --bg: #ffffff;
  --ink: #0a0a0a;
  --neon: var(--ink); /* what is lit or current: black, like everything else */
  --green: var(--bg);
  --soft: color-mix(in srgb, var(--ink) 52%, var(--bg));
  --dim: color-mix(in srgb, var(--ink) 30%, transparent);
  --tone: #f1f1f1; /* only behind a picture while it loads */
  --tone-2: #e8e8e8;
  --solid: var(--ink);
  --on-solid: var(--bg);
  --accent: var(--ink);
  --screen: #000000;
  --glass: rgba(255, 255, 255, .86);
  --edge: color-mix(in srgb, var(--ink) 10%, transparent);
  --glow-g: transparent;
  --glow-o: transparent;
  --halo: none;
  color-scheme: light;
}
@media (min-width: 600px) { :root { --gut: max(28px, env(safe-area-inset-left, 0px)); --gut-r: max(28px, env(safe-area-inset-right, 0px)); } }
@media (min-width: 900px) { :root { --gut: max(40px, env(safe-area-inset-left, 0px)); --gut-r: max(40px, env(safe-area-inset-right, 0px)); } }
@media (max-width: 760px) { :root { --sec: 128px; --bar-h: 0px; --rgap: 12px; --vgap: 56px; } }
/* Square, everywhere: the structure is a title block. Only the dots stay round. */
*, *::before, *::after { border-radius: 0 !important; } /* taste-skill-ignore: the one rule of the structure */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-color: color-mix(in srgb, var(--ink) 38%, transparent) transparent; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-body); line-height: 1.5; font-weight: 400; font-kerning: normal; font-optical-sizing: auto; overflow-x: clip; font-synthesis: none; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
/* The two voices. Big: compressed, black, capitals, tight. Small: extended, quiet, capitals, spaced. */
.big { font-family: var(--font-display); font-stretch: var(--x-cond); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: .84; }
.tiny, .lbl { font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; line-height: 1.35; }
p, dd { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1[tabindex="-1"]:focus { outline: none; } /* focus lands on the title after a page change, for screen readers */
a, button, label, summary, [role="button"] { touch-action: manipulation; }
.btn, .chip, .pb, .playbtn, .player-big, .bar a, .pick, .tag, .ix-row, .pj-ic { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.gut { padding-left: var(--gut); padding-right: var(--gut-r); }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--solid); color: var(--on-solid); text-decoration: none; transform: translateY(-160%); transition: transform 200ms var(--ease-out); }
.skip:focus-visible { transform: none; }

/* Display type: the expanded cut, light, sentence case. */
.ix-name, .k h1, .legal h1, .nf h1, .k-sent h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.05em; line-height: .98;
}
/* Figures: proportional in the drawn formats (the tabular 1 of this face carries a foot), tabular in the player's clock. */
.ar-t, .fg-n, .pj-ic-n { font-variant-numeric: lining-nums proportional-nums; }
.pt { font-variant-numeric: lining-nums tabular-nums; }

/* The material */
.glass {
  background-color: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); /* taste-skill-ignore: the client asked for glass; one bar and one caption card */
  border: 1px solid var(--rule); /* taste-skill-ignore: the one edge of the glass (client asked for glass) */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background-color: color-mix(in srgb, var(--bg) 92%, transparent); } }
@media (prefers-reduced-transparency: reduce) { .glass { background-color: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 46px; padding: 0 22px; border: 0; background: var(--solid); color: var(--on-solid); font: 500 var(--t-body)/1 var(--font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 160ms var(--ease-out), opacity 160ms ease, background-color 200ms ease; }
.btn { font-stretch: var(--x-ext); font-size: var(--t-meta) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .08em; }
.btn:active { transform: scale(.97); }
.btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.line-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; transition: text-decoration-thickness 160ms ease; }
.line-link:active { opacity: .7; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); background: transparent; text-decoration: none; color: var(--ink); font-size: var(--t-small); font-weight: 500; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease; vertical-align: middle; }
.chip:active { transform: scale(.97); }
.playbtn { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); min-height: 52px; padding: 0 24px; border: 0; font-weight: 500; cursor: pointer; color: var(--ink); transition: transform 160ms var(--ease-out); }
.playbtn:active { transform: translate(-50%, -50%) scale(.97); }
.playbtn.glass { box-shadow: none; } /* taste-skill-ignore: removes the glass edge */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-color: color-mix(in srgb, var(--solid) 82%, var(--bg)); }
  .line-link:hover { text-decoration-thickness: 2px; }
  .chip:hover { background-color: var(--tone); border-color: var(--ink); }
}

/* A film's shape, drawn: an outlined rectangle at its true proportions (--k = width / height). */
.ar { flex: none; display: inline-grid; place-items: center; overflow: hidden; border: 1px solid var(--rule-strong); } /* taste-skill-ignore: a drawn format, not a divider */
.ar-none { border-style: dashed; }
/* The ratio, written inside the shape. */
.ar-t { font-size: .6875rem; font-weight: 600; line-height: 1; letter-spacing: 0; white-space: nowrap; color: var(--ink); } /* taste-skill-ignore: a ratio set inside a drawn format */
.ar.up .ar-t { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .625rem; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pictures without a file: a designed stand-in, never a broken box */
.ph { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; background: var(--tone); color: var(--soft); }
.ph .ph-logo { width: 48px; height: auto; }
.ph-words { padding: 24px; text-align: center; }
.ph-words span { font-size: var(--t-lead); font-weight: 600; letter-spacing: -.02em; color: var(--ink); opacity: .8; }

/* Credits-style captions: a label in soft ink, its value in ink, figures in tabular numerals. */
.credits-line { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 4px 0 0; font-size: var(--t-small); }
.credits-line div { display: flex; gap: 10px; }
.credits-line dt { color: var(--soft); }
.credits-line dd { margin: 0; font-variant-numeric: lining-nums tabular-nums; }

/* Entrances: each part rises a little as it comes into view (scroll timeline, off the main thread).
   Content is never hidden: the start state is only lowered and faded. */
@keyframes rise { from { opacity: .4; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  html.motion .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 6%) entry calc(70% + var(--i, 0) * 6%); }
}

/* Arrival: each page's opening text settles in once, within the first second. */
@keyframes arrive { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
html.motion .k-side > *, html.motion .legal > h1, html.motion .nf-lang { animation: arrive 800ms var(--ease-out) backwards; animation-delay: 120ms; }
html.motion .k-side > :nth-child(2) { animation-delay: 190ms; } html.motion .k-side > :nth-child(3) { animation-delay: 260ms; } html.motion .k-side > :nth-child(4) { animation-delay: 330ms; }

/* ================= The bar: small words, at the top ================= */
.bar { position: fixed; z-index: 40; top: 0; left: 0; right: 0; min-height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 28px; padding: env(safe-area-inset-top, 0px) var(--gut-r) 0 var(--gut); border-width: 0; view-transition-name: bar; transition: opacity 300ms ease, transform 300ms var(--ease-out); }
.bar-home { display: flex; align-items: center; gap: 12px; margin-right: auto; padding: 6px 0; text-decoration: none; }
.mini-mark { width: 30px; height: auto; color: var(--neon); overflow: visible; transition: transform 300ms var(--ease-out); transform-origin: 46% 69%; }
/* The mark draws itself, branch after branch, out of the fork; then its branches move like branches in a light
   wind, and every few seconds they draw themselves again. Pointing at it redraws it. */
.mini-mark path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.mini-mark path, .mini-mark circle { transform-box: view-box; transform-origin: 45.8% 69.3%; }
html.motion .mini-mark.draw path { animation: draw-a 1100ms var(--ease-out) calc(150ms + var(--b) * 170ms) both, regrow 9s var(--ease-in-out) calc(4s + var(--b) * 160ms) infinite, branch 4.6s ease-in-out calc(var(--b) * -1.6s) infinite alternate; }
html.motion .mini-mark.draw circle { animation: fork-in 600ms var(--ease-out) both, pulse 9s var(--ease-in-out) 4s infinite; }
@keyframes regrow { 0%, 80% { stroke-dashoffset: 0; } 87% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes branch { from { rotate: -7deg; } to { rotate: 6deg; } }
@keyframes pulse { 0%, 80%, 100% { scale: 1; } 86% { scale: .4; } 92% { scale: 1.25; } }
@keyframes draw-a { from { stroke-dashoffset: 1; } }
@keyframes draw-b { from { stroke-dashoffset: 1; } }
@keyframes fork-in { from { transform: scale(0); } }
@media (hover: hover) and (pointer: fine) { html.motion .bar-home:hover .mini-mark path, html.motion .w-name:hover .mini-mark path { animation: draw-b 700ms var(--ease-out) calc(var(--b) * 90ms) both, branch 1.2s ease-in-out calc(var(--b) * -.4s) infinite alternate; } }
.bar-name, .bar-links, .bar-cta { font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.bar-name { white-space: nowrap; }
.bar-links { display: flex; align-items: center; gap: 26px; }
.bar-links a { text-decoration: none; padding: 10px 0; white-space: nowrap; }
.bar-home { flex: none; }
.bar-cta { white-space: nowrap; }
.bar-links a[aria-current="page"], .bar-links a[data-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; }
.bar-cta.btn { flex: none; min-height: 32px; padding: 0 14px; background: var(--neon); color: var(--on-solid); }
.bar-cta.btn::before { display: none; }
.bar-cta .short { display: none; }
.bar.tight .bar-cta .long { display: none; }
.bar.tight .bar-cta .short { display: inline; }
.bar-home:active .mini-mark { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .bar-links a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; } }
.bar.glass { background-color: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 0; } /* taste-skill-ignore: the one bar */
.watching .bar, .at-menu .bar:not(.ix-top) { opacity: 0; transform: translateY(-8px); pointer-events: none; }
@media (max-width: 760px) {
  .bar { top: auto; bottom: 0; min-height: calc(56px + env(safe-area-inset-bottom, 0px)); padding: 0 var(--gut-r) env(safe-area-inset-bottom, 0px) var(--gut); gap: 14px; }
  .watching .bar, .at-menu .bar:not(.ix-top) { transform: translateY(8px); }
  .bar-name { display: none; }
  .bar-links { gap: 16px; }
  .bar-links a { padding: 14px 0; }
  .bar-cta.btn { min-height: 40px; }
}
@media (max-width: 360px) { .bar-links a[href*="about"], .bar-links a[href*="a-propos"] { display: none; } }

/* ================= The work: a selection, then See more ================= */
/* The name, very big; one line of small words; then a few films shown large and whole, each with a small
   caption under it; the rest behind "See more", in three groups. Everything breathes. */
.menu { position: relative; min-height: 100svh; isolation: isolate; color: var(--ink); background: var(--bg); }
.menu.returning { background: var(--bg); }
.menu:not(.is-home) { margin-top: calc(var(--sec) + 56px); }
.ix-top { view-transition-name: none; }
.is-home .ix-top { view-transition-name: bar; }
.ix-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(72px, 3rem + 4vw, 136px); min-height: 100svh; padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); padding-bottom: 32px; transform-origin: 50% 30%; }
/* No name over the work: it is in the bar already. The page opens on the selection. */
.ix-list { display: grid; gap: var(--sec); padding-top: clamp(32px, 7svh, 88px); }
/* Films side by side, one height, each whole at its own shape. */
.sel, .arc { display: grid; gap: var(--vgap); }
.sel-h, .arc-h { padding-top: 14px; border-top: 1px solid var(--ink); margin-bottom: calc(clamp(24px, 3vw, 44px) - var(--vgap)); }
.wk-row { display: flex; align-items: flex-start; justify-content: center; gap: var(--rgap); }
.wk { flex: none; width: calc((100% - (var(--n) - 1) * var(--rgap)) * var(--k) / var(--s)); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; color: var(--ink); text-decoration: none; }
.wk-pic { position: relative; display: block; }
.wk-img { position: relative; display: block; aspect-ratio: var(--k); overflow: hidden; background: var(--tone); container-type: inline-size; }
/* The index behind See more: three columns; each film whole, its foot on the same line as its neighbours'. */
.arc-g { display: grid; gap: clamp(48px, 2rem + 3vw, 96px) var(--rgap); }
.arc-g .wk { width: auto; }
.arc-g .wk-pic { display: flex; align-items: center; justify-content: center; }
.arc-g .wk-cap { justify-self: center; }
/* Wide films two by two in 16:9 frames; upright films five in a row in 9:16 frames. */
.arc-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arc-wide > .wk:only-child { grid-column: 1 / -1; } /* a group's one wide film takes the whole row */
.arc-wide .wk-pic { aspect-ratio: 16 / 9; }
.arc-wide .wk-img, .arc-wide .wk-cap { width: min(100%, 56.25% * var(--k)); }
.arc-tall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.arc-tall .wk-pic { aspect-ratio: 9 / 16; }
.arc-tall .wk-img, .arc-tall .wk-cap { width: min(100%, 177.78% * var(--k)); }
.wk-img img, .cd-v { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: scale 1200ms var(--ease-out); }
.cd-v { opacity: 0; transition: opacity 600ms ease, scale 1200ms var(--ease-out); }
.cd-v.on { opacity: 1; }
.cd-none { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: var(--ink); color: var(--bg); text-align: center; }
.cd-none .big { font-size: clamp(1.25rem, 15cqw, 4.5rem); overflow-wrap: anywhere; }
.wk-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.wk-cap b { font-weight: 600; }
.wk-cap i { font-style: normal; color: var(--soft); }
@media (hover: hover) and (pointer: fine) {
  .wk:hover .wk-img img, .wk:hover .cd-v { scale: 1.025; }
  .wk:hover .wk-cap b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
}
.wk:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
html.motion .is-home .sel .wk-row { animation: tile-in 1000ms var(--ease-out) backwards; animation-delay: 250ms; }
/* Back from the end of a page: the index is already on screen, so nothing arrives a second time. */
html.motion[data-arrive="quiet"] .is-home .sel .wk-row, html.motion[data-arrive="quiet"] .more[open] .more-in { animation: none; }
html.motion[data-arrive="quiet"] .mini-mark.draw path { animation: regrow 9s var(--ease-in-out) calc(4s + var(--b) * 160ms) infinite, branch 4.6s ease-in-out calc(var(--b) * -1.6s) infinite alternate; }
html.motion[data-arrive="quiet"] .mini-mark.draw circle { animation: pulse 9s var(--ease-in-out) 4s infinite; }
@keyframes tile-in { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
/* See more: one black button; behind it the rest, in its groups. */
.more { display: grid; }
.more-b { justify-self: center; display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 26px; background: var(--ink); color: var(--bg); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.more-b::-webkit-details-marker { display: none; }
.more-b:active { transform: scale(.97); }
.more-x { position: relative; width: 11px; height: 11px; }
.more-x::before, .more-x::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: currentColor; transition: transform 300ms var(--ease-out); }
.more-x::after { transform: rotate(90deg); }
.more[open] .more-x::after { transform: rotate(0deg); }
.more-c, .more[open] .more-o { display: none; }
.more[open] .more-c { display: inline; }
@media (hover: hover) and (pointer: fine) { .more-b:hover { background-color: color-mix(in srgb, var(--ink) 82%, var(--bg)); } }
.more-in { display: grid; gap: var(--sec); padding-top: var(--sec); }
html.motion .more[open] .more-in { animation: arrive 700ms var(--ease-out) both; }
.arc-h { font-size: clamp(2rem, 1rem + 3vw, 4rem); }
/* The way to start a project: a black band at the end. */
.mz-go { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: clamp(20px, 3vw, 36px); background: var(--ink); color: var(--bg); text-decoration: none; }
.mz-go .big { font-size: clamp(2.75rem, 1rem + 6vw, 7.5rem); color: var(--bg); }
.mz-go .big:last-child { transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mz-go:hover .big:last-child { transform: translateX(14px); } }
.ix-legal { margin-top: auto; color: var(--soft); }
.ix-legal a { color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ix-legal a:hover { text-decoration: underline; } }
@media (max-width: 1100px) and (min-width: 761px) { .arc-tall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Tablets: the same rows, smaller. Phones: one film after the other, each across the width (upright ones narrower). */
@media (max-width: 760px) {
  .ix-in { padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .wk-row { flex-direction: column; align-items: center; gap: var(--vgap); }
  .wk { width: 100%; }
  .wk.up { width: 72%; }
  .wk-row.ups { flex-direction: row; align-items: flex-start; gap: var(--rgap); } /* two upright films stay side by side */
  .wk-row.ups .wk { width: calc((100% - (var(--n) - 1) * var(--rgap)) * var(--k) / var(--su)); }
  .arc-wide { grid-template-columns: minmax(0, 1fr); }
  .arc-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc-g .wk.up { width: 100%; }
  .wk-cap { gap: 2px 10px; }
  .more-b { justify-self: stretch; justify-content: center; }
}
/* The chain (on a film): idea, image, edit, delivery: the steps Ilia took. */
.chain { display: flex; flex-wrap: wrap; gap: 3px; }
.ch { position: relative; padding-top: 7px; color: var(--ink); font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; line-height: 1.2; }
.ch::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); }
.chain .ch { flex: 1 1 auto; min-width: max-content; }
.chain.big { gap: 6px; }
.chain.big .ch { flex: 1 1 0; padding-top: 12px; }
@keyframes fill-in { from { transform: scaleX(0); } }
/* The four steps with their know-how (About). */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.st { display: grid; align-content: start; min-width: 0; }
.st-n { position: relative; padding-top: 14px; font-family: var(--font-display); font-stretch: var(--x-cond); font-weight: 900; font-size: clamp(2.25rem, 1rem + 3vw, 4rem); text-transform: uppercase; line-height: .9; }
.st-n::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); }
html.motion .st-n::before { transform-origin: 0 50%; animation: fill-in 700ms var(--ease-out) both; animation-delay: calc(300ms + var(--n, 0) * 140ms); }
.st-k { display: grid; gap: 3px; padding-top: 12px; color: var(--soft); font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; line-height: 1.35; }
@media (max-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } }
/* The rectangle a film opens from becomes the film's page (a shared view transition). */
::view-transition-group(pj-box) { animation-duration: 520ms; animation-timing-function: var(--ease-in-out); }
html[data-morph][data-vt]::view-transition-old(root) { animation: 260ms ease both vt-fade-out; }
html[data-morph][data-vt]::view-transition-new(root) { animation: 360ms ease 160ms both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
::view-transition-old(pj-box), ::view-transition-new(pj-box) { height: 100%; object-fit: cover; }
/* The return, at the end of every page: the page recedes and the mosaic comes in over it. */
.menu.returning { position: fixed; inset: 0; z-index: 35; margin: 0; height: 100svh; overflow: hidden; opacity: 0; pointer-events: none; }
.menu.returning:not(.near) { display: none; }
.menu.returning.here { pointer-events: auto; }
.menu.returning .ix-in { will-change: transform, opacity; }
/* The page stops at its end; once it is still there, this says one more scroll goes back to the index. */
/* It sits under the page's last line, so it never covers the film or its formats. */
.ret-go { position: relative; z-index: 1; display: flex; width: max-content; max-width: calc(100% - 32px); align-items: center; gap: 10px; margin: clamp(20px, 4svh, 40px) auto calc(24px + env(safe-area-inset-bottom, 0px)); padding: 11px 16px 11px 18px; color: var(--ink); text-decoration: none; white-space: nowrap; opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity 260ms ease, translate 360ms var(--ease-out), visibility 0s linear 360ms; }
.ret-go svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.at-end:not(.at-menu) .ret-go { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
html.motion.at-end .ret-go svg { animation: ret-nudge 1600ms var(--ease-in-out) 400ms infinite; }
@keyframes ret-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } }
.ret-go:active { scale: .97; }
@media (max-width: 760px) { .ret-go { margin-bottom: calc(56px + 20px + env(safe-area-inset-bottom, 0px)); white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .ret-go { transition: opacity 200ms ease, visibility 0s linear 200ms; translate: 0 0; } }

/* ================= The front page: white, the reel in the middle, in the shape of each film ================= */
body:has(.wall) { background: var(--bg); }
.wall { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 100svh; height: 100svh; background: var(--bg); }
.w-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.w-name { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start; }
.w-role { color: var(--soft); text-align: center; }
.w-nav { justify-self: end; display: flex; gap: 24px; }
.w-nav a { text-decoration: none; padding: 10px 0; }
.w-enter { color: var(--ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .w-nav a:hover { text-decoration: underline; text-underline-offset: .5em; } }
html.motion .w-top { animation: arrive 900ms var(--ease-out) 400ms backwards; }
.w-stage { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; padding: clamp(8px, 2svh, 24px) var(--gut-r) calc(clamp(24px, 5svh, 56px) + env(safe-area-inset-bottom, 0px)) var(--gut); }
/* The frame takes the shape of each clip in turn (16:9, 9:16, 2:1, 1:1…): it is sized by the script to fill
   the stage at that shape, and moves from one shape to the next. Under it: the film passing, its format,
   and one mark per clip. */
.wreel { position: relative; margin: 0 auto; width: min(100%, 1240px); height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
.wreel-area { position: relative; min-height: 0; min-width: 0; display: grid; place-items: center; }
.wreel-box { position: relative; overflow: hidden; height: 100%; max-width: 100%; aspect-ratio: var(--k, 1.7778); background: var(--screen); transition: width 900ms var(--ease-in-out), height 900ms var(--ease-in-out); }
.wreel.sizing .wreel-box { transition: none; }
html.motion .wreel-box { animation: frame-in 1100ms var(--ease-out) backwards; }
@keyframes frame-in { from { clip-path: inset(10% 10% 10% 10%); opacity: 0; } }
.wreel-v { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; cursor: pointer; opacity: 0; transition: opacity 450ms ease; }
.wreel-v.on { opacity: 1; }
.wreel.full { width: 100%; height: 100%; padding: 16px 24px; background: #000; color: #fff; --ink: #fff; --soft: rgba(255, 255, 255, .62); }
.wreel-ui { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; }
.wreel-now { display: inline-flex; align-items: baseline; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.wreel-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wreel-c { color: var(--soft); white-space: nowrap; }
.wreel-r { flex: none; padding: 1px 5px 0; border: 1px solid currentColor; font-variant-numeric: lining-nums proportional-nums; white-space: nowrap; } /* taste-skill-ignore: the format of the clip, drawn like the format shapes */
html.motion .wreel-now.flip .wreel-t, html.motion .wreel-now.flip .wreel-c, html.motion .wreel-now.flip .wreel-r { animation: flip-in 520ms var(--ease-out) both; }
html.motion .wreel-now.flip .wreel-c { animation-delay: 60ms; }
html.motion .wreel-now.flip .wreel-r { animation-delay: 120ms; }
@keyframes flip-in { from { opacity: 0; transform: translate3d(0, 60%, 0); } }
.wreel-acts { display: flex; gap: 0; margin-right: -10px; }
.wreel-b { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; color: var(--ink); cursor: pointer; transition: opacity 160ms ease, transform 140ms var(--ease-out); }
.wreel-b:active { transform: scale(.92); }
.wreel-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wreel-b .i-play, .wreel-b .i-pause { fill: currentColor; stroke: none; }
.wreel:not(.playing) .i-pause, .wreel.playing .i-play { display: none; }
.wreel-segs { grid-column: 1 / -1; grid-row: 1; display: flex; gap: 3px; }
.wreel-segs li { flex: var(--g) 1 0; min-width: 0; }
.wreel-segs button { display: block; width: 100%; height: 14px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.wreel-segs .f { position: relative; display: block; height: 1px; overflow: hidden; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.wreel-segs .f::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (hover: hover) and (pointer: fine) { .wreel-now:hover .wreel-t { text-decoration: underline; text-underline-offset: .4em; } .wreel-b:hover { opacity: .6; } .wreel-segs button:hover .f { height: 3px; } }
@media (prefers-reduced-motion: reduce) { .wreel-box { transition: none; } }
@media (max-width: 760px) {
  .w-top { grid-template-columns: 1fr auto; }
  .w-role { display: none; }
  .wreel { width: 100%; }
  .w-stage { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .wreel-c { display: none; }
}

/* ================= A film: the film and its whole campaign on one screen ================= */
/* The whole film lives in one rectangle: on a computer the film to the left at its own shape, as large as
   the rectangle allows, one quiet line under it (what is playing, and the campaign's other formats as small
   drawn shapes), and to the right what it is, in a few lines. */
.pj { --card: clamp(300px, 26vw, 380px); --strip: 52px; height: 100svh; min-height: 620px; padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12px) var(--gut-r) 24px var(--gut); }
.pj-box { display: grid; grid-template-columns: minmax(0, 1fr) var(--card); gap: clamp(36px, 4vw, 64px); height: 100%; view-transition-name: pj-box; }
.pj-stage { container-type: size; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 0; min-width: 0; }
.pj-screen { display: grid; place-items: start center; }
.player { --ink: #ffffff; --bg: #000000; --soft: rgba(255, 255, 255, .72); --rule: rgba(255, 255, 255, .2); color: var(--ink); position: relative; width: min(100cqw, (100cqh - var(--strip) - 14px) * var(--k, 1.7778)); aspect-ratio: var(--k, 1.7778); background: var(--screen); overflow: hidden; isolation: isolate; transition: width 500ms var(--ease-in-out); }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--screen); }
.player:not(.started) video { object-fit: cover; cursor: pointer; }
.player-frame { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; border: 0; background: var(--screen); }
.player-ph { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; background: var(--tone); }
.player-ph span { font-size: var(--t-lead); font-weight: 600; letter-spacing: -.02em; opacity: .55; }
.player.embedded .player-bar, .player.embedded .player-msg { display: none; }
.pj-play { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .55em; min-height: 52px; padding: 0 22px; color: var(--ink); font: 500 var(--t-body)/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: opacity 240ms ease, transform 160ms var(--ease-out); }
.pj-play:active { transform: translate(-50%, -50%) scale(.97); }
.pj-play svg { width: 18px; height: 18px; fill: currentColor; }
.pj-play .dur { opacity: .7; font-variant-numeric: tabular-nums; }
.player.started .pj-play, .player.showing-stills .pj-play { opacity: 0; pointer-events: none; }
.player-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--ink); transition: opacity 240ms ease, transform 240ms var(--ease-out); }
.player.idle .player-bar, .player.showing-stills .player-bar { opacity: 0; transform: translateY(6px); pointer-events: none; }
.player.idle { cursor: none; }
.pb { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; transition: transform 140ms var(--ease-out), background-color 160ms ease; }
.pb:active { transform: scale(.94); }
.pb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pb .i-play, .pb .i-pause { fill: currentColor; stroke: none; }
.player:not(.playing) .i-pause, .player.playing .i-play { display: none; }
.pb[aria-pressed="true"] .i-wave, .pb[aria-pressed="false"] .i-x { display: none; }
@media (hover: hover) and (pointer: fine) { .pb:hover { background-color: color-mix(in srgb, var(--ink) 10%, transparent); } }
.pt { font-size: var(--t-small); color: var(--ink); min-width: 4ch; text-align: center; }
.scrub { position: relative; flex: 1; height: 44px; display: grid; align-items: center; }
.scrub-track { position: relative; height: 4px; background: color-mix(in srgb, var(--ink) 18%, transparent); overflow: hidden; }
.scrub-buf, .scrub-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); }
.scrub-buf { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.scrub-fill { background: var(--ink); }
.scrub input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scrub:has(input:focus-visible) .scrub-track { outline: 2px solid var(--ink); outline-offset: 4px; }
.player-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; width: max-content; padding: 12px 16px 12px 18px; max-width: calc(100% - 24px); font-size: var(--t-small); text-align: center; }
.player:fullscreen { max-height: none; width: 100%; }
/* The stills, in the same place as the film. */
.pj-stills { position: absolute; inset: 0; z-index: 5; background: var(--screen); color: var(--ink); }
.pj-stills img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pj-stills-ui { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 2px 6px; }
/* Under the film: what is playing, then the other formats of the campaign, small, each drawn at its shape. */
.pj-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: var(--strip); min-width: 0; font-size: var(--t-small); }
.pj-now { min-width: 0; font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.pj-now-t { color: var(--ink); }
.soft { color: var(--soft); font-weight: 400; }
.dim { color: var(--dim); }
.pj-fmt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; }
.pj-fmt-l { color: var(--soft); font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.pj-fmt-l b { font-weight: 600; }
.pj-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.pj-ic { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 5px; border: 0; background: none; color: var(--soft); font: inherit; font-size: var(--t-meta); text-decoration: none; cursor: pointer; transition: color 200ms ease; } /* taste-skill-ignore: the ×count beside a drawn format */
.pj-ic .ar { height: 32px; width: calc(32px * var(--k)); border-color: color-mix(in srgb, var(--ink) 36%, transparent); transition: border-color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out); }
.pj-ic .ar.up { height: 36px; width: calc(36px * var(--k)); }
.pj-ic-n { font-size: .75rem; font-weight: 500; color: var(--soft); }
.pj-ic.on { color: var(--ink); }
.pj-ic.on .ar { border-color: var(--ink); background: var(--ink); }
.pj-ic.on .ar .ar-t { color: var(--bg); }
.pj-ic:active .ar, .pj-ic:active .pj-st-g { transform: scale(.92); }
.pj-out::after { content: "↗"; font-size: var(--t-meta); margin-left: -1px; }
.pj-off { cursor: default; opacity: .6; }
.pj-off .ar { border-style: dashed; }
/* The stills: a small pile of frames. */
.pj-st-g { position: relative; display: block; width: 42px; height: 30px; transition: transform 160ms var(--ease-out); }
.pj-st-g span { position: absolute; width: 32px; height: 22px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: var(--bg); transition: border-color 200ms ease; } /* taste-skill-ignore: drawn frames: the stills */
.pj-st-g span:nth-child(1) { left: 0; top: 8px; } .pj-st-g span:nth-child(2) { left: 5px; top: 4px; } .pj-st-g span:nth-child(3) { left: 10px; top: 0; }
.pj-st.on .pj-st-g span:nth-child(3) { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 14%, var(--bg)); }
/* Each shape names itself on pointing: its name, length and where it was published. */
.pj-ic[data-tip]::before { content: attr(data-tip); position: absolute; z-index: 6; right: 0; bottom: calc(100% + 6px); width: max-content; max-width: 280px; padding: 7px 10px; background: var(--ink); color: var(--bg); font-size: var(--t-meta); line-height: 1.3; white-space: normal; text-align: left; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 120ms ease, transform 120ms var(--ease-out); } /* taste-skill-ignore: a tooltip */
.pj-icons li:first-child .pj-ic[data-tip]::before { right: auto; left: 0; }
.pj-ic:focus-visible::before { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .pj-ic:hover { color: var(--ink); }
  .pj-ic:hover .ar, .pj-ic:hover .pj-st-g span { border-color: var(--ink); }
  .pj-ic.on:hover .ar { border-color: var(--ink); }
  .pj-ic:hover::before { opacity: 1; transform: none; transition-delay: 160ms; }
  .pj-icons:hover .pj-ic:hover::before { transition-delay: 60ms; }
}
/* The card: everything else, on one card. */
.pj-card { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 0; scrollbar-width: thin; }
.pj-top { display: flex; justify-content: space-between; align-items: center; margin: -8px -10px 4px 0; font-size: var(--t-small); }
.pj-cat { color: var(--ink); text-decoration: none; font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.pj-close { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); }
.pj-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) and (pointer: fine) { .pj-cat:hover { text-decoration: underline; text-underline-offset: .4em; } .pj-close:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); } }
.pj-card { container-type: inline-size; }
/* The title as large as the card allows, its longest word always whole on one line. */
.pj-card h1 { font-stretch: var(--x-cond); font-size: min(clamp(3rem, 1rem + 3.6vw, 5.5rem), calc(100cqi / (var(--lw, 8) * .68))); font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; line-height: .86; }
.pj-client { margin-top: 2px; font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.pj-ch { margin-top: 2px; }
.pj-story { margin-top: 10px; max-width: none; font-size: var(--t-small); line-height: 1.55; color: var(--ink); text-wrap: wrap; hyphens: manual; }
/* The credits: one column of roles as wide as the longest (never more than about half the card), the names beside them. */
.pj-facts { display: grid; grid-template-columns: fit-content(48%) minmax(0, 1fr); column-gap: 16px; margin: 10px 0 0; font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; line-height: 1.45; }
.pj-facts div { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(min-content, 11em) minmax(0, 1fr); column-gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule); } /* taste-skill-ignore: credits are a real table */
@supports (grid-template-columns: subgrid) { .pj-facts div { grid-template-columns: subgrid; } }
.pj-facts dt, .pj-facts dd { min-width: 0; overflow-wrap: break-word; }
.pj-facts div:last-child { border-bottom: 1px solid var(--rule); } /* taste-skill-ignore: credits are a real table */
.pj-facts dt { color: var(--soft); }
.pj-facts dd { margin: 0; }
.pj-link { font-size: var(--t-small); }
.pj-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 6px; }
.pj-nl { display: grid; gap: 2px; min-width: 0; text-decoration: none; }
.pj-nl-l { color: var(--soft); font-stretch: var(--x-ext); font-size: var(--t-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.pj-prev .pj-nl-l::before { content: "← "; }
.pj-next { text-align: right; }
.pj-next .pj-nl-l::after { content: " →"; }
.pj-nl-t { font-stretch: var(--x-cond); font-size: var(--t-title); font-weight: 800; text-transform: uppercase; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .pj-nl:hover .pj-nl-t { text-decoration: underline; text-underline-offset: .25em; } }
html.motion .pj-card { animation: arrive 700ms var(--ease-out) 160ms backwards; }
html.motion .pj-under { animation: arrive 700ms var(--ease-out) 260ms backwards; }
/* Short or narrow screens: the same parts, one after the other. */
@media (max-width: 900px), (max-height: 600px) {
  /* The same rectangle, its parts one after the other: the film, the formats, then what it is. */
  .pj { height: auto; min-height: 0; padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12px) var(--gut-r) 32px var(--gut); }
  .pj-box { display: flex; flex-direction: column; gap: 14px; height: auto; padding: 0 0 20px; }
  .pj-stage, .pj-card { display: contents; }
  .pj-screen { order: 1; }
  .pj-under { order: 2; margin: 0 4px 16px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .pj-top { order: 3; } .pj-card h1 { order: 4; } .pj-client, .pj-ch { order: 5; } .pj-story { order: 6; }
  .pj-facts { order: 7; } .pj-link { order: 8; } .pj-nav { order: 9; margin-top: 16px; }
  .pj-top, .pj-card h1, .pj-client, .pj-ch, .pj-story, .pj-facts, .pj-link, .pj-nav { margin-left: 4px; margin-right: 4px; }
  .pj-top { margin-top: 0; margin-bottom: -4px; margin-right: -4px; }
  .pj-card h1 { font-size: min(clamp(3rem, 14vw, 4.5rem), calc((100vw - 40px) / (var(--lw, 8) * .68))); }
  .pj-screen { padding: 0; }
  .player { width: min(100%, 64svh * var(--k, 1.7778)); }
  .pj-fmt { flex-direction: column; align-items: flex-start; gap: 2px; margin-left: -6px; }
  .pj-fmt-l { margin-left: 6px; }
}
@media (max-width: 760px) { .pj { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); } }
@media (pointer: coarse) { .pj-ic { height: 48px; padding: 0 5px; } }

/* The stills under the film: a justified mosaic, every picture at its own shape. */
.pj-mz { display: grid; gap: 20px; padding-top: var(--vgap); padding-bottom: 12px; }
.pj-mz-l { color: var(--soft); }
.pj-mz-g { display: flex; flex-wrap: wrap; gap: var(--rgap); }
.pj-mz-g li { flex: var(--k) 1 calc(var(--k) * clamp(160px, 22vw, 340px)); aspect-ratio: var(--k); overflow: hidden; background: var(--tone); }
.pj-mz-g::after { content: ""; flex: 999 1 0; }
.pj-mz-g img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pj-mz-g li:hover img { scale: 1.03; } }
.pj-mz-b { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pj-mz-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.pj-mz-b:active img { scale: .985; transition-duration: 160ms; }
.pj-stills img { cursor: zoom-in; }

/* The stills, full screen: the picture on the dark, nothing else but where you are and the way out. */
.lb { position: fixed; inset: 0; z-index: 80; color: var(--bg); touch-action: none; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; }
.lb[hidden] { display: none; }
.lb-bg { position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity 280ms ease; }
.lb.on .lb-bg { opacity: var(--lb-a, 1); }
.lb-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(64px + env(safe-area-inset-top, 0px)) max(88px, env(safe-area-inset-right, 0px)) calc(64px + env(safe-area-inset-bottom, 0px)) max(88px, env(safe-area-inset-left, 0px)); cursor: zoom-out; }
.lb-img { display: block; max-width: none; transform-origin: 0 0; background: color-mix(in srgb, var(--bg) 6%, transparent); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; will-change: transform; }
.lb.drag .lb-img { cursor: grabbing; }
.lb.drag .lb-bg { transition: none; }
.lb-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(8px, calc(var(--gut-r) - 14px)) 0 var(--gut); pointer-events: none; }
.lb-top > * { pointer-events: auto; }
.lb .lb-n { color: color-mix(in srgb, var(--bg) 70%, transparent); font-variant-numeric: tabular-nums; }
.lb-acts { display: flex; gap: 2px; }
.lb-b { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: none; color: color-mix(in srgb, var(--bg) 80%, transparent); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: color 160ms ease, scale 160ms var(--ease-out); }
.lb-b svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lb-b:active { scale: .94; }
@media (hover: hover) and (pointer: fine) { .lb-b:hover { color: var(--bg); } }
.lb-b:focus-visible { outline: 2px solid var(--bg); outline-offset: -4px; }
.lb-side { position: absolute; top: 50%; width: 72px; height: 112px; margin-top: -56px; }
.lb-side svg { width: 34px; height: 34px; stroke-width: 1.25; }
.lb-prev { left: max(8px, env(safe-area-inset-left, 0px)); }
.lb-next { right: max(8px, env(safe-area-inset-right, 0px)); }
.lb .lb-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; display: grid; place-items: center; min-height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 var(--gut-r) env(safe-area-inset-bottom, 0px) var(--gut); color: color-mix(in srgb, var(--bg) 66%, transparent); text-align: center; text-wrap: balance; pointer-events: none; }
.lb-top, .lb-side, .lb-cap { opacity: 0; transition: opacity 220ms ease; }
.lb.on .lb-top, .lb.on .lb-side, .lb.on .lb-cap { opacity: 1; transition-delay: 140ms; }
.lb.drag .lb-top, .lb.drag .lb-side, .lb.drag .lb-cap { opacity: 0; transition-delay: 0s; }
.lb.full .lb-stage { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 760px), (pointer: coarse) {
  .lb-side { display: none; }
  .lb-stage { padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .lb-bg, .lb-top, .lb-side, .lb-cap { transition-duration: 1ms; transition-delay: 0s; } }

/* ================= About ================= */
/* The minimum: the name giant, one photo beside the claim, the steps, the brands, the way to start. */
.ab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 64px); padding-top: calc(var(--bar-h) + clamp(40px, 6svh, 80px) + env(safe-area-inset-top, 0px)); }
.ab-pic { margin: 0; display: grid; align-content: start; }
.ab-pic img { width: 100%; max-width: none; height: auto; background: var(--tone); }
.ab-txt { display: grid; align-content: start; gap: clamp(32px, 4vw, 56px); padding-bottom: 28px; }
.ab-claim { font-size: var(--t-head); color: var(--ink); max-width: 15ch; text-wrap: balance; }
.ab-say { display: grid; gap: 1em; }
.ab-intro { font-size: var(--t-body); line-height: 1.6; max-width: none; color: var(--ink); text-wrap: wrap; }
.ab-facts { display: grid; }
.ab-facts div { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); } /* taste-skill-ignore: facts set like credits, a real table */
.ab-facts dt { color: var(--soft); }
.ab-facts dd { margin: 0; color: var(--ink); }
.ab-facts a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
@media (hover: hover) and (pointer: fine) { .ab-facts a:hover { text-decoration: underline; text-underline-offset: .25em; } }
.ab-how { padding-top: var(--sec); }
.ab-brands { padding-top: var(--sec); display: grid; gap: clamp(28px, 4vw, 48px); }
.ab-brands > h2 { color: var(--soft); }
/* The brands, passing slowly: logos (white files, turned black) and names in the big voice, one line, no end.
   Still, they simply wrap. */
.mq { display: flex; flex-wrap: wrap; overflow: hidden; }
.mq-track { display: flex; flex-wrap: wrap; align-items: center; gap: 28px clamp(48px, 6vw, 96px); }
.mq-track[aria-hidden] { display: none; }
.mq-l img { display: block; width: auto; height: var(--h, 36px); max-width: none; object-fit: contain; filter: invert(1); } /* the logos are white on transparent */
.mq-n { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); line-height: 1; white-space: nowrap; }
html.motion .mq { flex-wrap: nowrap; margin: 0 calc(var(--gut-r) * -1) 0 calc(var(--gut) * -1); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
html.motion .mq-track { flex: none; flex-wrap: nowrap; padding-right: clamp(48px, 6vw, 96px); animation: mq 26s linear infinite; }
html.motion .mq-track[aria-hidden] { display: flex; }
@keyframes mq { to { transform: translate3d(-100%, 0, 0); } }
@media (hover: hover) and (pointer: fine) { html.motion .mq:hover .mq-track { animation-play-state: paused; } }
.ab-end { padding-top: var(--sec); padding-bottom: 28px; display: grid; gap: 28px; }
html.motion .ab-pic, html.motion .ab-txt { animation: arrive 800ms var(--ease-out) backwards; animation-delay: 80ms; }
html.motion .ab-pic { animation-delay: 200ms; }
html.motion .ab-txt { animation-delay: 300ms; }
@media (max-width: 900px) { .ab { grid-template-columns: minmax(0, 1fr); } .ab-txt { padding-bottom: 0; } }
@media (max-width: 760px) {
  .ab { padding-top: calc(40px + env(safe-area-inset-top, 0px)); }
  .ab-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mq-l img { height: calc(var(--h, 36px) * .74); }
  html.motion .mq-track { animation-duration: 20s; }
}
.lead-p { font-size: var(--t-lead); line-height: 1.32; letter-spacing: -.012em; max-width: 40ch; }
.open-media { position: relative; overflow: hidden; background: var(--screen); }
.open-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.names span { white-space: nowrap; }
.names .dot, .a-more .dot { display: inline-block; width: .12em; height: .12em; border-radius: 50% !important; background: currentColor; vertical-align: .2em; margin: 0 .18em 0 .3em; }

/* ================= Start a project page: nothing to fill in ================= */
.contactp { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }
.kk { display: grid; align-content: center; justify-items: start; gap: clamp(24px, 3vw, 40px); padding-top: calc(var(--bar-h) + clamp(48px, 10svh, 120px) + env(safe-area-inset-top, 0px)); padding-bottom: clamp(48px, 10svh, 120px); }
.kk-t { font-size: var(--t-big); }
.kk-p { font-size: var(--t-lead); line-height: 1.3; max-width: 30ch; }
.kk-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.kk-a { font-family: var(--font-display); font-stretch: var(--x-cond); font-weight: 900; font-size: clamp(1.875rem, .8rem + 5.6vw, 6rem); line-height: 1; letter-spacing: -.01em; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .kk-a:hover { text-decoration-thickness: .1em; } }
.kk-end { padding-bottom: 28px; }
html.motion .kk > * { animation: arrive 800ms var(--ease-out) backwards; }
html.motion .kk > :nth-child(2) { animation-delay: 100ms; } html.motion .kk > :nth-child(3) { animation-delay: 200ms; }
@media (max-width: 760px) { .kk { padding-top: calc(48px + env(safe-area-inset-top, 0px)); } .kk-end { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

.k h1, .legal h1, .nf h1 { font-family: var(--font-display); font-stretch: var(--x-cond); font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; line-height: .86; font-size: var(--t-big); }
.k { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; padding-top: calc(var(--bar-h) + 64px + env(safe-area-inset-top, 0px)); align-items: start; }
.k-side { display: grid; gap: 28px; align-content: start; position: sticky; top: calc(var(--bar-h) + 40px); }
.k-direct { display: grid; gap: 8px; justify-items: start; }
.k-direct h2 { font-size: var(--t-small); font-weight: 600; letter-spacing: 0; }
.k-direct small { color: var(--soft); font-size: var(--t-small); }
.email.big { font-size: var(--t-lead); letter-spacing: -.01em; }
.k-pic { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); }
.k-main { position: relative; }
.k-form { display: grid; gap: 28px; padding: 0; background: none; }
.k-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-weight: 500; font-size: var(--t-body); padding: 0; }
.opt { color: var(--soft); font-weight: 400; }
.hint { font-size: var(--t-small); color: var(--soft); margin-top: -4px; max-width: 60ch; }
.field input:not([type="radio"]), .field textarea, .field select { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--rule-strong); background: var(--bg); color: var(--ink); font: 400 max(16px, var(--t-body))/1.4 var(--font); caret-color: var(--soft); transition: border-color 160ms ease, box-shadow 160ms ease; -webkit-appearance: none; appearance: none; }
.field textarea { resize: vertical; min-height: 148px; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }
.err { font-size: var(--t-small); color: var(--ink); font-weight: 600; }
.chips { gap: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; display: inline-flex; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--bg); border: 1px solid var(--rule-strong); font-size: var(--t-small); font-weight: 500; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); } /* taste-skill-ignore: form choice, a real field */
.pick input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pick input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pick:active span { transform: scale(.97); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: hidden spam trap, never seen */
.k-send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.k-privacy { font-size: var(--t-small); color: var(--soft); max-width: 44ch; }
.k-privacy a { color: var(--ink); }
.k-status { padding: 16px 18px; background: var(--tone); font-size: var(--t-small); line-height: 1.45; }
.k-status a { color: var(--ink); }
.k-sent { padding: 48px 32px; display: grid; gap: 16px; justify-items: start; }
.k-sent h2 { font-size: var(--t-big); outline: none; }
.k-sent p { font-size: var(--t-lead); line-height: 1.32; max-width: 30ch; }

/* ================= Legal, 404 ================= */
.legal { padding-top: calc(var(--bar-h) + 64px + env(safe-area-inset-top, 0px)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; align-items: start; }
.legal-body { display: grid; gap: 14px; max-width: 64ch; }
.legal-body h2 { font-size: var(--t-lead); font-weight: 700; letter-spacing: -.015em; margin-top: 24px; }
.legal-body h2:first-child { margin-top: 0; }
.nf { min-height: 80svh; display: grid; align-content: center; padding-top: calc(var(--bar-h) + 64px); padding-bottom: 64px; }
.nf-lang { display: grid; gap: 24px; justify-items: start; }
.nf-links { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: var(--t-lead); }

/* ================= Toasts ================= */
.toaster { position: fixed; z-index: 60; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(420px, calc(100% - 24px)); pointer-events: none; }
.toaster ol { display: grid; gap: 8px; justify-items: center; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 20px; font-weight: 500; touch-action: none; transition: transform 400ms var(--ease-out), opacity 400ms var(--ease-out); }
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50% !important; background: currentColor; }
@starting-style { .toast { opacity: 0; transform: translate3d(0, 100%, 0); } }
.toast.out { opacity: 0; transform: translate3d(0, 100%, 0); }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { transition: opacity 200ms ease; } @starting-style { .toast { transform: none; } } .toast.out { transform: none; } }

/* ================= Page to page ================= */
/* One space: going deeper (menu, branch, film) the old view flies past and the new one comes near;
   going back up it recedes and the old one comes back; pages side by side slide. */
::view-transition-group(*) { animation-duration: 450ms; animation-timing-function: var(--ease-in-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 650ms; animation-timing-function: var(--ease-in-out); }
html[data-vt="dive"]::view-transition-old(root), html[data-vt="dive"]::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: ease; }
html[data-vt="in"]::view-transition-old(root) { animation-name: vt-fly-past; }
html[data-vt="in"]::view-transition-new(root) { animation-name: vt-come-near; }
html[data-vt="out"]::view-transition-old(root) { animation-name: vt-recede; }
html[data-vt="out"]::view-transition-new(root) { animation-name: vt-come-back; }
html[data-vt="side"]::view-transition-old(root) { animation-name: vt-side-out; }
html[data-vt="side"]::view-transition-new(root) { animation-name: vt-side-in; }
@keyframes vt-fly-past { to { opacity: 0; transform: scale(1.16); filter: blur(6px); } }
@keyframes vt-come-near { from { opacity: 0; transform: scale(.9); } }
@keyframes vt-recede { to { opacity: 0; transform: scale(.88); filter: blur(6px); } }
@keyframes vt-come-back { from { opacity: 0; transform: scale(1.12); } }
@keyframes vt-side-out { to { opacity: 0; transform: translateX(-7%); } }
@keyframes vt-side-in { from { opacity: 0; transform: translateX(7%); } }

/* ================= Tablets and phones ================= */
@media (max-width: 900px) {
  .k, .legal { grid-template-columns: minmax(0, 1fr); }
  .k-side { position: static; }
}
@media (max-width: 760px) {
  .player-bar { left: 6px; right: 6px; bottom: 6px; padding: 2px 4px; gap: 2px; }
  .k-sent h2 { font-size: var(--t-big); }
  .pt[data-dur] { display: none; }
  .k, .legal { padding-top: calc(40px + env(safe-area-inset-top, 0px)); }
  .k-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) { .bar-cta { padding: 0 16px; } }