/* ==========================================================================
   ALEXANDRE AVRAM · PORTFOLIO · STYLES
   --------------------------------------------------------------------------
   Black and white throughout, one pale grey (--paper) for the light blocks.
   Every opening picture (home film, project header, About portrait) stays in
   place and fades to black while the page scrolls up over it; the footer
   sits under the page and is uncovered at the end.

    1. Tokens and base            7. Gallery: rows, films, carousel, 360°,
    2. Header                        before / after, wall, mosaic, texts
    3. Shared pieces              8. About page
       (buttons, rows, chips)     9. Overlays (showreel, image viewer)
    4. Home                      10. Footer
    5. Project lists             11. Reduced motion
    6. Project page

   Prefixes: dk- deck of featured cards · ah- About block of the home page ·
   ab- About page · car- carousel · vc- film controls · ba- before / after ·
   mos- mosaic · lb- image viewer · foot- footer.
   ========================================================================== */

/* ============ 1. TOKENS AND BASE ============ */
:root {
  color-scheme: dark;
  --bg: #000000;
  --fg: #FFFFFF;
  --dim: #6B6B6B;
  --muted: #A3A3A3;
  --line: #262626;
  --paper: #DADAD8;                     /* pale grey of the light blocks: "Let's talk" band, footer of the project and About pages */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --edge: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));   /* left edge of the page content, for blocks that run to the screen edges */
  --r-card: clamp(12px, 1.5vw, 20px);   /* rounded corners of the home deck cards */
  --r-tile: clamp(12px, 1.3vw, 18px);   /* rounded corners of the project tiles in the lists; 0 for square corners */
  --neon: linear-gradient(90deg, #3b6dff 0%, #1ec8d8 20%, #43e27a 40%, #ffb02e 60%, #ff7a2b 78%, #3b6dff 100%);   /* colours of the liquid effect: the Experiments chip and page */
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 0.8, 0.2, 1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.55; margin: 0; overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
h1 { margin: 0; text-wrap: balance; }
h2 { font-size: clamp(32px, 5.4vw, 76px); margin: 0; text-wrap: balance; }
section { padding-block: clamp(56px, 8vw, 112px); }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.muted { color: var(--muted); }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.92; text-transform: uppercase; }
.grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.07; mix-blend-mode: overlay; pointer-events: none; z-index: 3; }
/* Fades up as it comes on screen (js adds .in) */
.rv { opacity: 0.2; transform: translateY(36px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }

/* A cover picture filling its frame, faded in once loaded; .zoom is the layer the hover zoom works on */
.media { position: absolute; inset: 0; overflow: hidden; background: #050505; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.media.has-img img { opacity: 1; }
.zoom { position: absolute; inset: 0; transform: scale(var(--h, 1)); transform-origin: 62% 50%; transition: transform 0.9s var(--ease-out); }
/* Liquid effect layer (WebGL), shown only while it runs */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; }
.fx-on .fx { opacity: 1; }
/* Black veil that darkens an opening picture as the page scrolls (--cov: 0 to 1) */
.pdim { position: absolute; inset: 0; z-index: 5; background: #000; opacity: var(--cov, 0); pointer-events: none; }
.shade2 { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.78)); transition: opacity 0.6s ease; pointer-events: none; }

/* ============ 2. HEADER ============ */
/* Floats over the page with no bar of its own: a soft black-to-clear gradient keeps it readable on bright pictures */
header { position: fixed; left: 0; right: 0; top: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px); pointer-events: none; }
header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + clamp(44px, 6vw, 76px)); z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 46%, rgba(0,0,0,0.16) 80%, rgba(0,0,0,0) 100%); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 22px 12px; flex-wrap: wrap; }
.bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 18px; text-decoration: none; letter-spacing: -0.02em; text-transform: uppercase; }
.logo { display: inline-block; flex: none; width: 30px; height: 30px; background: url("../img/brand/logo.png") center / contain no-repeat; transition: transform 0.6s var(--ease); }
.brand:hover .logo { transform: rotate(180deg); }
nav { display: flex; align-items: center; gap: clamp(12px, 2.6vw, 28px); flex-wrap: wrap; }
nav a { text-decoration: none; font-size: 14px; position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
nav a:hover::after, nav a[aria-current="page"]::after { transform: scaleX(1); }
.lang { display: inline-flex; border: 1px solid var(--line); }
.lang button { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; background: transparent; color: var(--muted); border: 0; padding: 5px 10px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (max-width: 760px) {                                       /* phones: the navigation wraps on two lines, so its backdrop is denser */
  header::before { height: calc(100% + 40px); background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.3) 86%, rgba(0,0,0,0) 100%); }
}

/* ============ 3. SHARED PIECES ============ */
/* Buttons: outlined, filled from below on hover; .solid is the reverse */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; font-weight: 600; font-size: 16px; font-family: var(--font-body); text-decoration: none; color: var(--fg); background: transparent; border: 1px solid var(--fg); position: relative; overflow: hidden; isolation: isolate; cursor: pointer; transition: color 0.4s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s var(--ease); z-index: -1; }
.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--bg); }
.btn.solid { background: var(--fg); color: var(--bg); }
.btn.solid::before { background: var(--bg); }
.btn.solid:hover { color: var(--fg); }
/* Section heads, with a short rule above every title and subtitle */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 48px); }
.sec-head h2::before, .ptitle::before, #v-project.nohead .pname::before, .gal-h::before, .sub > .mono::before { content: ""; display: block; width: 56px; height: 2px; background: var(--fg); margin-bottom: clamp(14px, 1.5vw, 22px); }
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); margin-bottom: clamp(20px, 3vw, 36px); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.kicker { display: block; color: var(--muted); margin-bottom: 14px; }
/* Large rows that wipe to white on hover (home types, next project, start a project) */
.row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; border-top: 1px solid var(--line); isolation: isolate; overflow: hidden; transition: color 0.4s var(--ease); }
.row::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--ease); z-index: -1; }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row:hover, .row:focus-visible { color: var(--bg); }
.row .nm { transition: transform 0.45s var(--ease); display: block; }
.row:hover .nm { transform: translateX(clamp(8px, 1.4vw, 20px)); }
.row .ar { flex: none; transition: transform 0.45s var(--ease); display: inline-block; }
.row:hover .ar { transform: translate(-6px, 0) rotate(45deg); }
.rows .row { padding: clamp(16px, 2.2vw, 30px) clamp(8px, 1.2vw, 18px); }
.rows .row:last-child { border-bottom: 1px solid var(--line); }
.rows .nm { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.95; font-size: clamp(30px, 6.6vw, 96px); min-width: 0; }
.rows .cnt { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 0.36em; letter-spacing: 0; vertical-align: top; white-space: nowrap; }
.rows .row:hover .cnt { color: var(--bg); }
.rows .side { display: flex; align-items: center; gap: 24px; color: var(--muted); max-width: 24em; text-align: right; flex: none; }
.rows .row:hover .side { color: var(--bg); }
.rows .ar { font-size: clamp(28px, 4.4vw, 64px); line-height: 1; }
.rows .row.all { border-top-color: var(--fg); }
/* Chips: filters of the lists, tools and agencies of the About page */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px); padding: 0; list-style: none; }
.chip { display: inline-flex; gap: 8px; border: 1px solid var(--line); padding: 9px 16px; text-decoration: none; font-size: 15px; font-weight: 500; transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease; }
a.chip:hover { border-color: var(--fg); }
.chip[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip .n { opacity: 0.6; font-variant-numeric: tabular-nums; }
.chips .apart { margin-left: auto; padding-left: 24px; }
/* The Experiments chip stands apart, in neon: a black block with a border in the colours of the liquid effect flowing round it and a
   soft glow of the same colours breathing behind it. On hover a second, stronger glow fades in and the word fades into the colours. */
.chips .apart { transform: translateY(0); transition: transform 0.5s var(--ease-out); }   /* the transform keeps the glows just behind the chip */
.chips .apart:hover, .chips .apart:focus-within { transform: translateY(-2px); }
.chips .apart .chip { position: relative; border: 1.5px solid transparent; border-radius: 12px; padding: 11px 20px; font-weight: 600;
  background: linear-gradient(#000, #000) padding-box, var(--neon) border-box; background-size: 100% 100%, 200% 100%; animation: flow 6s linear infinite; }
.chips .apart .chip::before, .chips .apart .chip::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--neon) 0 0 / 200% 100%; }
.chips .apart .chip::after { inset: -3px; border-radius: 15px; filter: blur(14px); animation: flow-1 6s linear infinite, breathe 2.8s ease-in-out infinite alternate; }
.chips .apart .chip::before { inset: -5px; border-radius: 17px; filter: blur(18px); opacity: 0; animation: flow-1 6s linear infinite; transition: opacity 0.6s ease; }
.chips .apart .chip:hover::before, .chips .apart .chip:focus-visible::before { opacity: 0.8; }
.chips .apart .chip span { color: #fff; background: var(--neon) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: flow-1 3s linear infinite; transition: color 0.6s ease; }
.chips .apart .chip:hover span, .chips .apart .chip:focus-visible span { color: rgba(255, 255, 255, 0); }   /* the white fades and the colours under it show */
@keyframes flow { to { background-position: 0 0, -200% 0; } }
@keyframes flow-1 { to { background-position: -200% 0; } }
@keyframes breathe { from { opacity: 0.28; transform: scale(0.97); } to { opacity: 0.6; transform: scale(1.05); } }
/* Pale band "Let's talk" */
.band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--paper); color: var(--bg); text-decoration: none; padding: clamp(28px, 5vw, 72px) var(--gutter); }
.band .t { font-size: clamp(40px, 10vw, 152px); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase; line-height: 0.9; }
.band .s { display: block; max-width: 22em; margin-bottom: 18px; font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); }
.band .ar { font-size: clamp(56px, 10vw, 140px); line-height: 1; transition: transform 0.6s var(--ease); display: inline-block; }
.band:hover .ar { transform: rotate(45deg); }
.band:focus-visible { outline-color: var(--bg); outline-offset: -8px; }
/* Round arrow at the foot of an opening picture: brings the rest of the page up */
.pdown { position: absolute; z-index: 4; right: var(--edge); bottom: clamp(18px, 2.4vw, 32px); width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.9); border-radius: 50%; background: rgba(0,0,0,0.12); color: #fff; cursor: pointer; transition: background 0.35s ease, color 0.35s ease; }
.pdown svg { display: block; animation: nudge 1.8s var(--ease) infinite; }
.pdown:hover, .pdown:focus-visible { background: #fff; color: #000; }
@keyframes nudge { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@keyframes slide { to { transform: translateX(-50%); } }        /* every text loop: the line is written twice (or more) and slides by half */
@media (max-width: 760px) { .pdown { width: 44px; height: 44px; } }
@media (max-width: 820px) { .rows .side .mono { display: none; } .rows .side { max-width: none; } }
@media (max-width: 600px) { .chips .apart { margin-left: 0; padding-left: 0; } }

/* ============ 4. HOME ============ */
/* Stage: the film fills the screen behind the opening title, stays in place and fades to black as the page scrolls (--cov) */
#v-home { --hh: 100vh; }
@supports (height: 100svh) { #v-home { --hh: 100svh; } }
.stage { position: sticky; top: 0; z-index: 0; height: var(--hh); isolation: isolate; overflow: hidden; background: #050505; }
.stage-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.24) 30%, rgba(0,0,0,0.32) 46%, rgba(0,0,0,0.88) 100%); pointer-events: none; }
.hfront { position: relative; z-index: 1; margin-top: calc(-1 * var(--hh)); }
.hcover, .pcover { position: relative; z-index: 1; }
.stage-ui { position: relative; z-index: 4; width: 100%; min-height: var(--hh); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-block: calc(var(--nav-h, 64px) + clamp(10px, 1.6vw, 22px)) clamp(24px, 4vw, 48px); }
.top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tc { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; }
.rec { width: 7px; height: 7px; border-radius: 50%; background: var(--fg); animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.15; } }
.hero-t { font-size: clamp(38px, 9.6vw, 148px); margin-bottom: clamp(20px, 3vw, 40px); }
.mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.05em 0.04em 0.1em; margin: -0.05em -0.04em -0.1em; }   /* each word rises from behind its own mask */
.mask > span { display: inline-block; animation: up 1s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 120ms); }
@keyframes up { from { transform: translateY(112%); } to { transform: none; } }
.lede { font-size: clamp(18px, 1.8vw, 22px); max-width: 22em; margin: 0 0 26px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 820px) { .stage { min-height: 620px; } }

/* Featured projects. Without .on (reduced motion) they are full-width panels stacked one under the other. */
section:has(.panels) { padding-bottom: 0; }
.panels { border-top: 1px solid var(--line); }
.pj { position: relative; display: flex; align-items: flex-end; min-height: clamp(340px, 64vh, 640px); text-decoration: none; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.pj:hover .shade2, .pj:focus-visible .shade2 { opacity: 0.55; }
.pj:hover .zoom, .pj:focus-visible .zoom { --h: 1.08; }
.over { position: relative; z-index: 4; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding-block: clamp(18px, 2.4vw, 32px); gap: 24px; }
.over .meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.over .meta span:last-child { color: var(--muted); text-align: right; }
.pj .nm { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.9; font-size: clamp(40px, 11vw, 176px); transition: transform 0.6s var(--ease); }
.pj:hover .nm { transform: translateX(clamp(6px, 1.2vw, 18px)); }
.pj .ar { flex: none; font-size: 0.42em; line-height: 1; transition: transform 0.6s var(--ease); padding-bottom: 0.2em; }
.pj:hover .ar { transform: rotate(45deg); }
@media (max-width: 820px) { .over .meta span:last-child { display: none; } }
/* The deck (.on): the cards stand one behind the other and the scroll walks through them (js sets their place); the card under
   the pointer rises; a soft glow behind the top of the pile, like a backlight */
.dk-bar, .dk-edge, .dk-dim { display: none; }
.dk.on { position: relative; }
.dk.on .dk-scene { position: sticky; top: var(--nav-h, 54px); height: var(--dk-h, 100vh); overflow: hidden; perspective: 1500px; perspective-origin: 50% 44%; }
.dk.on .dk-scene::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 35% at 50% 37%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.16) 40%, rgba(255,255,255,0.06) 72%, rgba(255,255,255,0) 100%); }
.dk.on .dk-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; position: absolute; left: 0; right: 0; top: clamp(12px, 2.2vh, 24px); z-index: 3; color: var(--muted); }
.dk.on .dk-bar #dk-count { color: var(--fg); }
.dk.on .panels { position: absolute; inset: 0; border: 0; transform-style: preserve-3d; pointer-events: none; }
.dk.on .dk-card { position: absolute; left: 50%; top: var(--dk-top, 25%); width: var(--dk-w, 80vw); height: var(--dk-ch, 50vh); margin-left: calc(var(--dk-w, 80vw) / -2); transform-style: preserve-3d; transform-origin: 50% 100%; will-change: transform, opacity; pointer-events: auto; }
.dk.on .dk-lift { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%; transition: transform 0.6s var(--ease-out); }
.dk.on .dk-card:hover .dk-lift, .dk.on .dk-card:focus-within .dk-lift { transform: translate3d(0, calc(-16px - var(--back, 0) * 52px), 44px) rotateX(calc(var(--rx, 0deg) * -0.6)); }
.dk.on .pj { position: absolute; inset: 0; min-height: 0; border-radius: var(--r-card); border: 1px solid rgba(255,255,255,0.16); border-top-color: rgba(255,255,255,0.45); box-shadow: 0 -34px 70px rgba(0,0,0,0.6), 0 44px 90px rgba(0,0,0,0.7); }
.dk.on .dk-card:last-child .pj { box-shadow: none; }            /* the card at the back casts no shadow: only the glow behind it */
.dk.on .pj .over { max-width: none; padding: clamp(14px, 2vw, 26px) clamp(16px, 2.4vw, 34px); }
.dk.on .pj .nm { font-size: calc(clamp(27px, var(--dk-w, 80vw) * 0.084, 104px) * var(--fit, 1)); }   /* --fit shrinks a long name so it stays on one line */
.dk.on .dk-edge { display: block; position: absolute; left: var(--r-card); right: var(--r-card); top: 100%; height: 34px; transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(180deg, #9a9a9a, #2a2a2a 30%, #0d0d0d); }   /* the thickness of the card */
.dk.on .dk-dim { display: block; position: absolute; inset: 0; z-index: 6; background: #000; opacity: 0; pointer-events: none; }

/* Brands in outlined letters running across the page */
.marq { border-block: 1px solid var(--line); overflow: hidden; padding-block: clamp(14px, 2vw, 26px); }
.track { display: flex; width: max-content; animation: slide 88s linear infinite; }
.marq:hover .track { animation-play-state: paused; }
.track span { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(44px, 8vw, 112px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--fg); padding-right: 0.5em; white-space: nowrap; transition: color 0.3s ease; }
.track span::after { content: "/"; padding-left: 0.5em; color: var(--dim); -webkit-text-stroke: 0; }
.track span:hover { color: var(--fg); }

/* "By type of project": smaller than the other big rows */
#type-rows .row { padding-block: clamp(13px, 1.6vw, 22px); }
#type-rows .nm { font-size: clamp(24px, 4.2vw, 60px); }
#type-rows .ar { font-size: clamp(22px, 3vw, 42px); }

/* About block: the portrait fills the block, face on the left, the text on the right over the plain backdrop of the photo.
   Sizes follow the width of the text column (cqw). Narrow screens: the portrait on top, the text under it on black. */
.about-home { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(64px, 7vw, 108px); background: #8c8c8c; }
.ah-bg { position: absolute; inset: 0; z-index: 0; }
.ah-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 26%; }
.about-home .wrap { position: relative; z-index: 1; }
.ah-txt { width: 50%; margin-left: auto; container-type: inline-size; }
.about-home .sec-head { margin-bottom: clamp(14px, 1.8vw, 26px); }
.statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.4vw, 50px); font-size: clamp(24px, 8.2cqw, 50px); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 clamp(26px, 3vw, 42px); }
.statement .s { display: block; text-wrap: balance; }           /* one sentence per line */
.statement .w { color: rgba(255, 255, 255, 0.42); transition: color 0.35s ease; }
.statement .w.on { color: #fff; }                               /* the words light up one by one with the scroll */
.ah-row { --ln: rgba(255, 255, 255, 0.5); display: grid; grid-template-columns: auto auto minmax(0, 1fr); border-top: 1px solid var(--ln); margin-bottom: clamp(26px, 3vw, 40px); }
.ah-row > * { margin: 0; padding: clamp(14px, 4.4cqw, 26px) clamp(10px, 3.4cqw, 20px) 0 0; }
.ah-row > * + * { padding-left: clamp(10px, 3.4cqw, 20px); border-left: 1px solid var(--ln); }
.ah-n b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 68px); font-size: clamp(32px, 11.5cqw, 68px); line-height: 0.85; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.ah-n .mono { display: block; margin-top: 8px; font-size: 11px; letter-spacing: 0.08em; line-height: 1.35; }
.ah-list { list-style: none; padding-right: 0; }
.ah-list li { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.5vw, 21px); font-size: clamp(15px, 3.5cqw, 21px); letter-spacing: -0.03em; line-height: 1.15; padding: 0.42em 0; border-bottom: 1px solid var(--ln); }
.ah-list li:first-child { padding-top: 0; }
@container (max-width: 480px) {                                   /* tight column: the two figures side by side, the list under them */
  .ah-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ah-n { padding-bottom: 16px; }
  .ah-n b { font-size: clamp(40px, 15cqw, 68px); }
  .ah-row > .ah-list { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ln); padding: 0; }
  .ah-list li:first-child { padding-top: 0.42em; }
}
@media (max-width: 860px) {
  .about-home { padding-top: 0; background: #000; }
  .ah-bg { position: relative; inset: auto; height: min(78vw, 64svh); }
  .ah-bg img { object-position: 0% 30%; }
  .ah-txt { width: 100%; margin-top: 30px; }
}

/* ============ 5. PROJECT LISTS ============ */
#v-list { padding-top: var(--nav-h, 64px); }                      /* no picture at the top: the page starts under the navigation */
.page-head { padding-block: clamp(28px, 4vw, 56px) clamp(8px, 1.5vw, 20px); }
.ptitle { font-size: calc(clamp(44px, 11vw, 168px) * var(--fit, 1)); margin-bottom: clamp(16px, 2vw, 28px); }   /* --fit shrinks a title made of one very long word */
.plede { max-width: 30em; color: var(--muted); font-size: clamp(18px, 1.7vw, 22px); margin: 0; }
/* Mosaic of tiles across the full width of the window, with rounded corners and a gutter. Six columns: a small tile takes two,
   a large one four (over two rows), a half three. The side margins equal the gutter (--gg); widths are measured on the box
   itself (cqw), so a scrollbar does not eat into them. */
.mosaic-box { container-type: inline-size; }
.mosaic { --gg: clamp(8px, 1vw, 14px); --w: 100vw; --u: calc((var(--w) - 4 * var(--gg)) / 3); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc(var(--u) * 0.66); gap: var(--gg); padding: 0 var(--gg) clamp(40px, 6vw, 88px); }
@supports (width: 1cqw) { .mosaic { --w: 100cqw; } }
.card { position: relative; display: block; grid-column: auto / span 2; min-width: 0; overflow: hidden; border-radius: var(--r-tile); text-decoration: none; color: #fff; isolation: isolate; background: #050505; }
.card.big { grid-column: 1 / span 4; grid-row: span 2; }
.card.big.right { grid-column: 3 / span 4; }
.card.left { grid-column: 1 / span 2; }
.card.half { grid-column: auto / span 3; }
.card.full { grid-column: 1 / -1; grid-row: span 2; }
.thumb { position: absolute; inset: 0; overflow: hidden; background: #050505; }
.thumb::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.8) 100%); transition: opacity 0.5s ease; }
.thumb .zoom { transform-origin: 50% 50%; }
.card:hover .zoom, .card:focus-visible .zoom { --h: 1.07; }
.card:hover .thumb::after, .card:focus-visible .thumb::after { opacity: 0.6; }
.tag { position: absolute; right: clamp(12px, 1.3vw, 18px); top: clamp(12px, 1.3vw, 18px); z-index: 3; padding: 8px 11px; border: 1px solid rgba(255,255,255,0.9); border-radius: 7px; font-size: 11px; line-height: 1; white-space: nowrap; background: rgba(0,0,0,0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.35s ease, color 0.35s ease; }
.card:hover .tag, .card:focus-visible .tag { background: #fff; color: #000; }
.cap { position: absolute; left: clamp(14px, 1.7vw, 24px); right: clamp(14px, 1.7vw, 24px); bottom: clamp(12px, 1.4vw, 20px); z-index: 3; display: flex; flex-direction: column; gap: 7px; }
.cn { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.1vw, 30px); letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.cap .mono { font-size: 11px; color: rgba(255,255,255,0.75); }
.card.big .cap, .card.full .cap { left: clamp(18px, 2.4vw, 34px); right: clamp(18px, 2.4vw, 34px); bottom: clamp(16px, 2.1vw, 30px); }
.card.big .cn, .card.full .cn { font-weight: 800; font-size: clamp(32px, 4.7vw, 72px); letter-spacing: -0.045em; line-height: 0.92; text-transform: uppercase; }
.card.big .tag, .card.full .tag { right: clamp(14px, 1.7vw, 24px); top: clamp(14px, 1.7vw, 24px); }
@media (max-width: 980px) {                                       /* two columns: the large tiles take the whole width */
  .mosaic { --u: calc((var(--w) - 3 * var(--gg)) / 2); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc(var(--u) * 0.7); grid-auto-flow: dense; }
  .card, .card.left, .card.half { grid-column: auto / span 1; }
  .card.big, .card.big.right, .card.full { grid-column: 1 / -1; }
  .cn { font-size: clamp(18px, 3vw, 26px); } .card.big .cn, .card.full .cn { font-size: clamp(30px, 7vw, 60px); }
}
@media (max-width: 600px) {                                       /* phones: one column, every tile the same size */
  .mosaic { --u: calc(var(--w) - 2 * var(--gg)); grid-template-columns: minmax(0, 1fr); grid-auto-rows: calc(var(--u) * 0.66); }
  .card, .card.left, .card.half, .card.big, .card.big.right, .card.full { grid-column: 1; grid-row: span 1; }
  .cn, .card.big .cn, .card.full .cn { font-weight: 700; font-size: 24px; letter-spacing: -0.03em; line-height: 1.05; text-transform: none; }
  .card.big .cap, .card.full .cap { left: 16px; right: 16px; bottom: 14px; } .card.big .tag, .card.full .tag { right: 14px; top: 14px; }
}
/* Banner to Behance under the lists: a picture behind it (behanceImage), or until there is one, brand names running in outlined letters */
.more { display: block; position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; background: #000; }
.more-bg { position: absolute; inset: 0; z-index: 0; }
.more-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.2s var(--ease), filter 0.6s ease; filter: brightness(0.9); }
.more-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.46) 50%, rgba(0,0,0,0.72) 100%), linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0) 60%); }
.more:hover .more-bg img, .more:focus-visible .more-bg img { transform: scale(1.07); filter: brightness(1.08); }
.more-names { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1vw, 16px); overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
.more.has-img .more-names { display: none; }
.more-track { display: flex; flex: none; width: max-content; animation: slide 80s linear infinite; will-change: transform; }
.more-track.back { animation-direction: reverse; animation-duration: 96s; }
.more-track span { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 11.5vw, 190px); line-height: 0.92; letter-spacing: -0.04em; text-transform: uppercase; white-space: nowrap; padding-right: 0.42em; color: transparent; -webkit-text-stroke: 1px #474747; transition: -webkit-text-stroke-color 0.5s ease; }
.more:hover .more-track span, .more:focus-visible .more-track span { -webkit-text-stroke-color: #7c7c7c; }
.more-names::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.75) 100%); }
.more-in { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 26em); justify-content: space-between; align-items: end; gap: clamp(28px, 4vw, 64px); max-width: 1280px; margin-inline: auto; padding: clamp(40px, 6vw, 84px) var(--gutter); }
.more-l { display: flex; flex-direction: column; gap: clamp(28px, 4.4vw, 64px); }
.more-big { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.6vw, 22px); }
.more-big b { font-family: var(--font-display); font-weight: 800; font-size: clamp(120px, 19vw, 290px); letter-spacing: -0.06em; line-height: 0.74; }
.more-big .mono { line-height: 1.5; white-space: nowrap; }
.more-r { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.more-t { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 44px); letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.more-s { color: #cfcfcf; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; }
.more .btn { margin-top: 6px; }
.more:hover .btn::before, .more:focus-visible .btn::before { transform: scaleY(1); }
.more:hover .btn, .more:focus-visible .btn { color: var(--bg); }
.more:focus-visible { outline-offset: -6px; }
@media (max-width: 860px) { .more-in { grid-template-columns: minmax(0, 1fr); } }

/* ============ 6. PROJECT PAGE ============ */
/* The header picture fills the screen, stays in place and fades to black with the scroll (--cov); the title, the arrow and the
   rest of the page scroll over it */
#v-project { --hh: 100vh; }
@supports (height: 100svh) { #v-project { --hh: 100svh; } }
.phero { position: sticky; top: 0; z-index: 0; height: var(--hh); overflow: hidden; isolation: isolate; }
.pfront { position: relative; z-index: 1; margin-top: calc(-1 * var(--hh)); }
.phead { position: relative; min-height: var(--hh); display: flex; align-items: flex-end; }
.phead .over { padding-top: calc(var(--nav-h, 64px) + clamp(8px, 1.2vw, 16px)); }
.pname { font-size: calc(clamp(40px, 10.4vw, 164px) * var(--fit, 1)); }   /* --fit shrinks a name whose longest word would not fit */
@media (max-width: 760px) { .phead .pname { padding-right: 58px; } }
/* A project without a header picture (Experiments) opens on its title and its text, like a list */
#v-project.nohead .phero { display: none; }
#v-project.nohead .pfront { margin-top: 0; }
#v-project.nohead .phead { min-height: 0; display: block; }
#v-project.nohead .phead .over { display: block; padding-block: calc(var(--nav-h, 64px) + clamp(28px, 4vw, 56px)) 0; }
#v-project.nohead .pname { margin: 0; }
#v-project.nohead .pbody { grid-template-columns: minmax(0, 1fr); padding-block: clamp(16px, 2vw, 28px) clamp(32px, 4.5vw, 64px); }
/* Facts on the left, text and credits on the right */
.pbody { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); padding-block: clamp(40px, 6vw, 88px); }
.pbody.solo { grid-template-columns: minmax(0, 1fr); }
.pbody.solo .facts { max-width: 640px; }
.facts, .credits { margin: 0; }
.facts div, .credits div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.credits { margin-top: clamp(24px, 3vw, 40px); max-width: 640px; }
.credits div { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding: 12px 0; }
.facts div:last-child, .credits div:last-child { border-bottom: 1px solid var(--line); }
.facts dt, .credits dt { color: var(--muted); padding-top: 4px; }
.facts dd, .credits dd { margin: 0; font-weight: 500; }
.pdesc { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.4; max-width: 30em; margin: 0; white-space: pre-line; }
.facts a.ext, .credits a, .pdesc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pdesc a { text-underline-offset: 5px; }
.facts a.ext:hover, .credits a:hover, .pdesc a:hover { text-decoration-thickness: 2px; }
@media (max-width: 820px) { .pbody { grid-template-columns: minmax(0, 1fr); } }
/* Progress line down the left edge: starts at the information block, stops at the footer. Drawn in "difference" so it shows over
   pictures and white bands alike. Not on phones. */
.prog { position: fixed; left: clamp(14px, 1.7vw, 28px); top: 0; height: 0; width: 3px; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.2s linear; mix-blend-mode: difference; overflow: hidden; }
.prog::before { content: ""; position: absolute; left: 1px; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.34); }
.prog i { position: absolute; left: 0; top: 0; width: 3px; height: var(--ph, 80px); background: #fff; transform: translateY(var(--py, 0px)); will-change: transform; }
body[data-view="project"] .prog { opacity: var(--po, 0); }
@media (max-width: 760px) { .prog { display: none; } }

/* The Experiments page (body.lab) and its block on the home page (.lab-home) take the colours of the liquid effect, to mark the
   personal work as apart: a faint cloud of colour, the rule above the title, the progress line, a neon edge on the piece under the
   pointer and neon buttons. */
.lab-home::before, body.lab #v-project::before { content: ""; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, #3b6dff 0%, #1ec8d8 20%, #43e27a 40%, #ffb02e 60%, #ff7a2b 78%, #3b6dff 100%) 0 0 / 200% 100%;   /* one cloud (a straight gradient, so the repeat has no seam): the flowing colours, faded out from its heart to its edges */
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.15) 75%, transparent 100%); mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.15) 75%, transparent 100%);
  animation: flow-1 14s linear infinite, drift 16s ease-in-out infinite alternate; }
body.lab #v-project::before { position: fixed; left: 50%; top: 0; width: min(1500px, 115vw); height: 100vh; margin-left: calc(min(1500px, 115vw) / -2); opacity: calc(0.42 * var(--cloud, 1)); }   /* stays put behind the page; js fades it (--cloud) as the footer comes up */
@keyframes drift { from { transform: translate3d(-3%, 0, 0) rotate(-4deg) scale(1); } to { transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.07); } }
.lab-home .sec-head h2::before, body.lab #v-project .pname::before { background: var(--neon) 0 0 / 200% 100%; animation: flow-1 6s linear infinite; box-shadow: 0 0 14px rgba(60, 170, 255, 0.55); }
body.lab .prog { mix-blend-mode: normal; }
body.lab .prog i { background: linear-gradient(180deg, #3b6dff, #1ec8d8 30%, #43e27a 55%, #ffb02e 80%, #ff7a2b); }
.lh-it::after, body.lab .mos-it::after { content: ""; position: absolute; inset: 0; z-index: 6; padding: 1.5px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  background: var(--neon) 0 0 / 200% 100%; animation: flow-1 6s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lh-it:hover::after, body.lab .mos-it:hover::after, body.lab .mos-it:focus-within::after { opacity: 1; }
.btn.neon, body.lab .gal-cta .btn { border: 1.5px solid transparent; border-radius: 12px; background: linear-gradient(#000, #000) padding-box, var(--neon) border-box; background-size: 100% 100%, 200% 100%; animation: flow 6s linear infinite; box-shadow: 0 0 26px -6px rgba(60, 170, 255, 0.5); transition: box-shadow 0.6s ease, color 0.4s var(--ease); }
.btn.neon::before, body.lab .gal-cta .btn::before { display: none; }
.btn.neon:hover, body.lab .gal-cta .btn:hover { color: var(--fg); box-shadow: 0 0 40px -4px rgba(120, 220, 160, 0.7); }

/* Experiments block of the home page: a strip of the pieces, in a new random order at each visit, running slowly across the page; it
   stops under the mouse and can be dragged (mouse or finger). Any click leads to the top of the Experiments page. */
.lab-home { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); }
.lab-home::before { position: absolute; left: -10vw; right: -10vw; top: -12%; bottom: -12%; opacity: 0.42; }
.lab-home .sec-head { margin-bottom: clamp(20px, 2.4vw, 32px); }
.lh-k { display: block; color: var(--muted); margin-bottom: 18px; }
.lh-strip { display: block; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; margin-bottom: clamp(26px, 3vw, 40px); }
.lh-strip.grabbing { cursor: grabbing; }
.lh-track { display: flex; gap: var(--gap, 12px); width: max-content; height: clamp(230px, 28vw, 400px); will-change: transform; }
.lh-it { flex: none; height: 100%; position: relative; overflow: hidden; border-radius: var(--r-tile); background: #111; }
.lh-it img, .lh-it video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.lh-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; }
.lh-t { margin: 0; max-width: 28em; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; color: #e6e6e6; }

/* ============ 7. GALLERY ============ */
.gal { --gap: clamp(8px, 1vw, 14px); display: grid; gap: var(--gap); padding-bottom: clamp(40px, 6vw, 88px); }
/* Subtitle, paragraph, button to another site */
.gal-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 44px); letter-spacing: -0.03em; line-height: 1.05; text-transform: none; margin: clamp(32px, 5vw, 72px) 0 clamp(6px, 1vw, 14px); text-wrap: balance; }
.gal-p { max-width: 46em; display: grid; gap: 12px; color: var(--muted); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; margin-bottom: clamp(10px, 1.6vw, 22px); }
.gal-p p { margin: 0; }
.gal-p strong { color: var(--fg); font-weight: 600; }
.gal-cta { margin: 0 0 clamp(10px, 1.6vw, 22px); }

/* Row: pictures or loops side by side (--n per line) */
.grow { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: var(--gap); }
.gcell { position: relative; overflow: hidden; background: #0a0a0a; max-width: 100%; }
.gcell img, .gcell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.grow.narrow { width: min(100%, 720px); margin-inline: auto; }
.grow.narrow .gcell { background: #000; }
.grow.sized, .vid.sized { width: var(--w, 100%); margin-inline: auto; }
.grow.fit .gcell img { object-fit: contain; }                     /* the whole image, never cropped */
.grow.bare .gcell { background: transparent; }                    /* a cut-out with no panel behind */
.grow.float { margin-block: clamp(18px, 2.4vw, 36px); }           /* a cut-out that drifts slowly up and down, tilting a little */
.grow.float .gcell { animation: hover-float 7s ease-in-out infinite; will-change: transform; }
@keyframes hover-float { 0%, 100% { transform: translate3d(0, 12px, 0) rotate(-0.9deg); } 50% { transform: translate3d(0, -14px, 0) rotate(0.9deg); } }
.gcell.zoomable { cursor: zoom-in; }
.gcell.zoomable img { transition: transform 0.6s var(--ease-out); }
.gcell.zoomable:hover img, .gcell.zoomable:focus-visible img { transform: scale(1.05); }
@media (max-width: 600px) { .grow { grid-template-columns: minmax(0, 1fr); } .grow.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grow.sized { width: 100%; } }

/* Film: its still with a play button, then the site's own player (or YouTube's) */
.vid { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #0a0a0a; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vid > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease, transform 0.9s var(--ease-out); }
.vid.has-still > img { opacity: 0.82; }
.vid.held > img { opacity: 1; }
.vid:hover > img { transform: scale(1.03); }
.vid-held { position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 7px 10px; background: rgba(0,0,0,0.72); color: #fff; font-size: 11px; line-height: 1.5; }   /* preview only */
.vid-play { position: relative; z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 14px; background: transparent; border: 0; color: var(--fg); cursor: pointer; padding: 16px; }
.vid-ico { width: clamp(64px, 8vw, 104px); height: clamp(64px, 8vw, 104px); border: 1px solid var(--fg); border-radius: 50%; display: grid; place-items: center; padding-left: 5px; transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease); }
.vid-play:hover .vid-ico { background: var(--fg); color: var(--bg); transform: scale(1.06); }
.vid.tried .vid-play { display: none; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.vid-note { position: relative; z-index: 2; max-width: 36em; margin: 0; padding: 24px; text-align: center; line-height: 1.7; }
.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 3; cursor: pointer; }
.vid:fullscreen { aspect-ratio: auto !important; width: 100vw; height: 100vh; max-width: none; background: #000; }
.vid:-webkit-full-screen { aspect-ratio: auto !important; width: 100vw; height: 100vh; max-width: none; background: #000; }
/* Player controls; they hide while the film plays and the pointer rests */
.vc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); padding: 36px clamp(10px, 1.6vw, 22px) 8px; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); transition: opacity 0.35s ease; }
.vid.idle .vc { opacity: 0; pointer-events: none; }
.vid.idle video { cursor: none; }
.vc button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: transparent; border: 0; color: var(--fg); cursor: pointer; min-width: 44px; min-height: 44px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; opacity: 0.86; transition: opacity 0.2s ease; }
.vc button:hover { opacity: 1; }
.vc-time { flex: none; font-variant-numeric: tabular-nums; }
.vc-time b { font-weight: inherit; opacity: 0.6; }
.vc-bar { position: relative; flex: 1; min-width: 40px; height: 44px; cursor: pointer; touch-action: none; }
.vc-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.35); }
.vc-bar i { position: absolute; left: 0; top: calc(50% - 1px); height: 3px; width: 0; background: var(--fg); }
/* Small players (upright, in a wall or a mosaic): tighter bar, no total time */
.vid.sized .vc, .wall .vid .vc, .mos .vid:not(.full) .vc { gap: 4px; padding-inline: 6px; }
.vid.sized .vc button, .wall .vid .vc button, .mos .vid:not(.full) .vc button { min-width: 38px; padding: 0 4px; }
.vid.sized .vc-time b, .wall .vid .vc-time b, .mos .vid:not(.full) .vc-time b { display: none; }
@media (max-width: 600px) { .vid.sized { width: 100%; } .vc-time b { display: none; } }
/* White band behind a film, edge to edge of the screen, with a word running behind in very pale grey */
.plate { width: 100vw; margin-left: calc(50% - 50vw); margin-block: clamp(10px, 1.6vw, 24px); padding: clamp(40px, 7vw, 100px) var(--edge); background: #fff; min-width: 0; position: relative; overflow: hidden; }
.plate > .vid { position: relative; z-index: 1; }
.grow + .plate { margin-top: calc(-1px - var(--gap)); }           /* a picture just above sits right on the band */
.plate-run { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
.plate-track { display: flex; flex: none; width: max-content; animation: slide 46s linear infinite; will-change: transform; }
.plate-track span { font-family: var(--font-display); font-weight: 800; font-size: clamp(170px, 30vw, 520px); line-height: 0.8; letter-spacing: -0.045em; text-transform: uppercase; white-space: nowrap; color: #efefef; padding-right: 0.2em; }
@media (max-width: 600px) { .plate-run { display: none; } }

/* Carousel: runs to both edges of the window, its first image lined up with the page */
.car-wrap { width: 100vw; margin-left: calc(50% - 50vw); padding-block: clamp(4px, 1vw, 12px) clamp(16px, 2vw, 28px); min-width: 0; }
.car { display: flex; gap: var(--gap); overflow-x: auto; padding-inline: var(--edge); scroll-padding-inline: var(--edge); scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.car::-webkit-scrollbar { display: none; }
.car.free { scroll-snap-type: none; }
.car.grabbing { cursor: grabbing; }
.car-cell { flex: none; width: min(74vw, 1040px); position: relative; overflow: hidden; background: #0a0a0a; scroll-snap-align: start; }
.car.tall .car-cell { width: min(56vw, 500px); }
.car.sq .car-cell { width: min(42vw, 580px); }
.car.byh .car-cell { width: auto; height: min(41.6vw, 585px); }   /* images of different shapes: same height */
.car.tall.byh .car-cell { height: min(78vw, 690px); }
.car-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.car-bar { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); padding-inline: var(--edge); padding-top: 16px; }
.car-count { font-variant-numeric: tabular-nums; flex: none; }
.car-line { position: relative; flex: 1; height: 1px; background: var(--line); min-width: 40px; }
.car-line i { position: absolute; left: 0; top: 0; height: 1px; background: var(--fg); transition: width 0.2s ease; }
.car-hint { flex: none; }
.car-nav { display: inline-flex; gap: 6px; flex: none; }
.car-nav button { font: inherit; width: 40px; height: 40px; background: transparent; color: var(--fg); border: 1px solid var(--line); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease; }
.car-nav button:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.car-nav button:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 600px) { .car-cell { width: 84vw; } .car.tall .car-cell { width: 72vw; } .car.sq .car-cell { width: 80vw; } .car.byh .car-cell { width: auto; height: 47.25vw; } .car.tall.byh .car-cell { height: 100vw; } .car-hint { display: none; } }

/* 360° view: turns by itself; the visitor grabs it and turns it. With a mouse a thin ring with a label follows the pointer,
   drawn in "difference" so it stays readable on dark and light alike; on a touch screen a small label says what to do. */
.spin { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: #000; }
.spin.grabbing { cursor: grabbing; }
.spin video { pointer-events: none; }
.spin-hint { position: absolute; left: clamp(10px, 1.4vw, 18px); bottom: clamp(10px, 1.4vw, 18px); z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; color: var(--fg); background: rgba(0, 0, 0, 0.6); border: 1px solid var(--line); pointer-events: none; transition: opacity 0.5s ease; }
.spin.used .spin-hint { opacity: 0; }
.spin-cur { position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; pointer-events: none; opacity: 0; transform: translate(var(--x, 50%), var(--y, 50%)); transition: opacity 0.25s ease; display: none; mix-blend-mode: difference; color: #fff; }
.spin-cur i { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: transform 0.3s var(--ease-out); }
.spin-cur span { position: absolute; left: 32px; top: -12px; white-space: nowrap; padding: 4px 8px; font-size: 10px; border: 1px solid currentColor; transition: opacity 0.25s ease; }
.spin-cur.flip span { left: auto; right: 32px; }
.spin.over .spin-cur { opacity: 1; }
.spin.grabbing .spin-cur i { transform: scale(0.78); }
.spin.grabbing .spin-cur span { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .spin, .spin.grabbing { cursor: none; } .spin-cur { display: block; } .spin-hint { display: none; } }

/* Before / after: the "before" picture is clipped at the bar (--x) */
.ba { --x: 50%; cursor: col-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba img { pointer-events: none; -webkit-user-drag: none; }
.ba-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba-bar { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; z-index: 2; pointer-events: none; }
.ba-bar i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); transition: transform 0.25s var(--ease-out); }
.ba:hover .ba-bar i, .ba.grabbing .ba-bar i { transform: scale(1.1); }
.ba-tag { position: absolute; top: clamp(10px, 1.3vw, 18px); z-index: 2; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 7px; font-size: 11px; line-height: 1; color: #fff; background: rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; transition: opacity 0.25s ease; }
.ba-tb { left: clamp(10px, 1.3vw, 18px); } .ba-ta { right: clamp(10px, 1.3vw, 18px); }
.ba.no-b .ba-tb, .ba.no-a .ba-ta { opacity: 0; }

/* Wall of upright films: three per row, two on tablets and phones; a row that is not full sits in the middle */
.wall { --gx: clamp(8px, 1vw, 14px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(26px, 3vw, 44px) var(--gx); }
.wall-it { margin: 0; min-width: 0; flex: 0 0 calc((100% - (var(--n, 3) - 1) * var(--gx)) / var(--n, 3)); }
.wall-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; }
.wall-cap b { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: -0.02em; line-height: 1.15; }
.wall-cap .mono { color: var(--muted); font-size: 11px; text-align: right; }
.wall-note { margin: clamp(14px, 1.6vw, 22px) 0 0; color: var(--muted); font-size: 11px; }   /* preview only */
@media (max-width: 860px) { .wall { --n: 2 !important; } }
@media (max-width: 600px) { .wall .vid .vc-time { display: none; } .wall-cap { display: block; } .wall-cap .mono { display: block; text-align: left; margin-top: 4px; } }

/* Mosaic of pieces of every shape: each piece gets a width in proportion to its shape (--r), so a row has one height and fills the
   width. Wide screens: the rows written in the content (.mos-br ends one). Phones: the pieces wrap around a target height (--h). */
.mos { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: var(--gap); margin-bottom: calc(-1 * var(--gap)); }
.mos-it { flex-grow: calc(var(--r) * 100); flex-shrink: 1; flex-basis: 0px; min-width: 0; margin: 0 0 var(--gap); position: relative; overflow: hidden; background: #0a0a0a; }
.mos .mos-it.full { flex-basis: 100%; }
.mos-br { flex: 0 0 100%; height: 0; }
.mos.pop .mos-it { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 0.9s var(--ease-out) var(--d, 0ms), transform 1.1s var(--ease-out) var(--d, 0ms); }   /* js: fades up as it comes on screen */
.mos.pop .mos-it.in { opacity: 1; transform: none; }
.mos-loop video, .mos-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mos-pic { cursor: zoom-in; }
.mos-pic img { transition: transform 0.6s var(--ease-out); }
.mos-pic:hover img, .mos-pic:focus-visible img { transform: scale(1.05); }
.mos .vid-play { position: absolute; inset: 0; justify-content: center; padding: 0; }   /* the whole piece starts its film, with a smaller sign */
.mos .vid:not(.full) .vid-ico { width: clamp(44px, 4.4vw, 60px); height: clamp(44px, 4.4vw, 60px); padding-left: 3px; background: rgba(0,0,0,0.28); }
.mos .vid:not(.full) .vid-ico svg { width: 14px; height: 16px; }
@media (max-width: 600px) {
  .mos { --h: 230px; } .mos-br { display: none; }
  .mos .mos-it { flex-basis: calc(var(--r) * var(--h)); max-width: none; }
  .mos .mos-it.full { flex-basis: 100%; }
  .mos .vid:not(.full) .vc-time { display: none; }
}

/* ============ 8. ABOUT PAGE ============ */
/* The portrait fills the screen behind the opening text, stays in place and fades to black with the scroll (--ab) */
#v-about { --ab: 0; --abh: 100vh; }
@supports (height: 100svh) { #v-about { --abh: 100svh; } }
.ab-bg { position: sticky; top: 0; height: var(--abh); z-index: 0; overflow: hidden; background: #000; }
.ab-bg .fx { z-index: 0; }
.ab-bg.fx-on .fx { opacity: calc(1 - var(--ab)); transform: scale(calc(1 + var(--ab) * 0.05)); }
.ab-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 28%; opacity: calc(1 - var(--ab)); transform: scale(calc(1 + var(--ab) * 0.05)); }
.ab-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 36%, rgba(0,0,0,0.52) 100%), linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.84) 100%); }
.ab-front { position: relative; z-index: 1; margin-top: calc(-1 * var(--abh)); }
.ab-hero { position: relative; min-height: var(--abh); display: flex; }
.ab-in { width: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding-block: calc(var(--nav-h, 64px) + clamp(8px, 1.2vw, 16px)) clamp(28px, 4.4vw, 64px); }
.ab-txt { align-self: flex-end; width: min(100%, 47%); }
.ab-txt .ptitle { font-size: clamp(40px, 6.6vw, 104px); margin: 0 0 clamp(14px, 1.8vw, 26px); }
.about-txt p { max-width: 32em; margin: 0 0 18px; }
.about-txt .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.ab-txt .ab-p { color: #d6d6d6; }
.stats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px clamp(18px, 3vw, 54px); margin-top: clamp(14px, 2vw, 26px); }   /* 20+ years, then how they split */
.stat { min-width: 92px; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 7.2vw, 108px); line-height: 0.85; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat .mono { display: block; width: 0; min-width: 100%; margin-top: 8px; line-height: 1.35; }   /* the label wraps under its figure, it never widens the column */
@media (min-width: 861px) {                                       /* wide screens: the text at mid-height, the breadcrumb at the top */
  .ab-in { position: relative; justify-content: center; padding-block: clamp(96px, 12vh, 140px); }
  .ab-in > .crumbs { position: absolute; left: var(--gutter); top: calc(var(--nav-h, 64px) + clamp(8px, 1.2vw, 16px)); margin: 0; }
}
@media (max-width: 860px) {                                       /* narrow screens: the portrait keeps to the top, the text sits under the face */
  .ab-bg img, .ab-bg .fx { height: 68%; } .ab-bg img { object-position: 27% 30%; }
  .ab-bg::after { background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 44%, #000 68%); }
  .ab-txt { width: 100%; }
  .ab-txt .ptitle { font-size: clamp(32px, 9vw, 56px); margin-bottom: 10px; }
  .about-txt.ab-txt .big { font-size: clamp(19px, 5vw, 28px); margin-bottom: 10px; }
  .ab-txt .ab-p { font-size: 15px; margin-bottom: 0; }
  .stat b { font-size: clamp(44px, 12.5vw, 84px); }
  .stat .mono { font-size: 11px; }
}
/* The sections under the opening */
.sub { padding-block: clamp(32px, 5vw, 64px) 0; }
.sub > .mono { display: block; color: var(--muted); margin-bottom: 20px; }
.sub > .mono::before { margin-bottom: 14px; }
.sub-lede { margin: 0 0 clamp(20px, 2.6vw, 32px); max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; }
.skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.skills li { border-top: 1px solid var(--fg); padding-top: 18px; }
.skills strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.03em; line-height: 1.02; text-transform: uppercase; white-space: pre-line; margin-bottom: 12px; }
.skills span { color: var(--muted); }
.names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 3.6vw, 50px); letter-spacing: -0.035em; line-height: 1.08; }
.names li:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--fg); }   /* every other brand in outline */
.taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 820px) { .skills { grid-template-columns: minmax(0, 1fr); } }

/* ============ 9. OVERLAYS ============ */
/* Showreel player */
.reel { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px var(--gutter); animation: reel-in 0.4s var(--ease-out); }
@keyframes reel-in { from { opacity: 0; } to { opacity: 1; } }
.reel-bar, .reel-frame { width: min(100%, 1280px, calc((100vh - 150px) * 16 / 9)); }
.reel-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.reel-x { font: inherit; letter-spacing: inherit; text-transform: uppercase; background: transparent; color: var(--fg); border: 1px solid var(--line); padding: 8px 14px; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; }
.reel-x:hover { background: var(--fg); color: var(--bg); }
.reel-frame { position: relative; aspect-ratio: 16 / 9; background: #050505; border: 1px solid var(--line); animation: reel-up 0.5s var(--ease-out); }
@keyframes reel-up { from { transform: scale(0.96); } to { transform: none; } }
.reel-frame .vid { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
/* Image viewer */
.lb { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.97); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 14px var(--gutter) 20px; animation: reel-in 0.3s var(--ease-out); }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-variant-numeric: tabular-nums; }
.lb-stage { min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; cursor: zoom-out; touch-action: pan-y pinch-zoom; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; cursor: default; user-select: none; -webkit-user-select: none; animation: reel-up 0.35s var(--ease-out); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-family: var(--font-mono); font-size: 16px; background: rgba(0,0,0,0.6); color: var(--fg); border: 1px solid var(--line); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease; }
.lb-prev { left: var(--gutter); } .lb-next { right: var(--gutter); }
.lb-nav:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.lb-nav:disabled { opacity: 0.25; cursor: default; }

/* Passage from one view to another (js: through): a black veil under the navigation, which blurs what it covers while it fades,
   then the new view rises gently into place */
.veil { position: fixed; inset: 0; z-index: 28; background: #000; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.75s var(--ease-out), visibility 0s linear 0.75s; }
.veil.on { opacity: 1; visibility: visible; transition: opacity 0.34s cubic-bezier(0.4, 0, 1, 1), visibility 0s; }
body.arrive .hfront, body.arrive .pfront, body.arrive #v-list > *, body.arrive .ab-front { animation: arrive 1s var(--ease-out) both; }
@keyframes arrive { from { transform: translateY(22px); } to { transform: none; } }

/* ============ 10. FOOTER ============ */
/* Each view is an opaque sheet lying over the footer: reaching the end lifts the sheet and uncovers the footer, which does not move */
#v-home, #v-list, #v-project, #v-about { display: block; position: relative; z-index: 1; background: var(--bg); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55); }
#v-list, #v-project, #v-about { padding-bottom: clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--line); }
footer { position: sticky; bottom: 0; z-index: 0; isolation: isolate; overflow: hidden; background: var(--bg); border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 104px) 0; }
body[data-view="home"] footer { border-top: 0; }
/* Project and About pages: the footer is turned over, dark on pale grey, to close the page with a clear break.
   The home page and the lists keep the black one: they already end on the pale "Let's talk" band. */
body[data-view="project"] footer, body[data-view="about"] footer { --bg: var(--paper); --fg: #000; --muted: #585858; --dim: #7a7a7a; --line: #c6c6c4; background: var(--bg); color: var(--fg); border-top: 0; }
body[data-view="project"] .foot-mark, body[data-view="about"] .foot-mark { filter: invert(1); opacity: 0.055; }
.foot-cloud { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; }   /* the live logo (wide screens) */
.foot-mark { position: absolute; z-index: -1; top: 50%; right: clamp(-220px, -9vw, -60px); width: min(78vw, 780px); aspect-ratio: 1; transform: translateY(-46%); background: url("../img/brand/logo-xl.webp") center / contain no-repeat; opacity: 0.07; pointer-events: none; }   /* its still stand-in (phones) */
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(32px, 5vw, 72px) clamp(32px, 8vw, 120px); flex-wrap: wrap; }
.foot-who { display: grid; gap: clamp(14px, 1.6vw, 22px); min-width: 0; }
.foot-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.88; font-size: clamp(44px, 7.2vw, 108px); text-decoration: none; }
.foot-tag { margin: 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); }
.foot-cta { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; margin-top: 6px; }
.copy-link { padding: 8px 0; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 0.3s ease; }
.copy-link:hover, .copy-link:focus-visible { color: var(--fg); }
.foot-cols { display: flex; gap: clamp(32px, 6vw, 96px); flex-wrap: wrap; }
.foot-cols h2 { margin: 0 0 16px; color: var(--muted); font-weight: 400; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-cols a { font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; color: var(--muted); border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 88px); padding-block: 20px; }
.foot-base button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: transparent; border: 0; padding: 8px 0; cursor: pointer; }
.foot-base button:hover { color: var(--fg); }
@media (min-width: 761px) {                                       /* wide screens: text on the left, the live logo on the right */
  footer { padding-top: clamp(64px, 9vw, 136px); }
  .foot-cloud { display: block; } .foot-mark { display: none; }
  .foot-top { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: clamp(40px, 5vw, 72px); max-width: 54%; }
}

/* ============ 11. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; flex-wrap: wrap; width: auto; }
  .plate-track, .more-track, .pdown svg, .grow.float .gcell, .chips .apart .chip, .chips .apart .chip::before, .chips .apart .chip::after, .chips .apart .chip span, body.lab #v-project::before, .lab-home::before, .lh-it::after, body.lab .mos-it::after, .btn.neon, body.lab .gal-cta .btn, .lab-home .sec-head h2::before, body.lab #v-project .pname::before { animation: none; }
  .mask > span, .rec, .reel, .reel-frame, .lb, .lb-stage img, body.arrive .hfront, body.arrive .pfront, body.arrive #v-list > *, body.arrive .ab-front { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .row::before, .row .nm, .row .ar, .btn::before, .band .ar, .zoom, .pj .nm, .pj .ar, .logo, .more-bg img { transition: none; }
  .statement .w { color: #fff; }
}