/* LARP.Paris — dark, monochrome, mobile-first. */
@view-transition { navigation: auto; }

:root {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --fg: #ecebe8;
  --fg-2: #a3a29e;
  --fg-3: #6f6e6a;
  --line: rgba(236, 235, 232, .14);
  --f: "proxima-nova", system-ui, -apple-system, sans-serif; /* Adobe Fonts web project dry2ghs (index.html); Proxima has no width axis, so font-stretch below is a no-op */
  --ease: cubic-bezier(.16, 1, .3, 1);     /* expo-out: fast start, long soft landing */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gut: 16px;
  --grain: .045;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gut: 32px; } }
@media (min-width: 1280px) { :root { --gut: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.55 var(--f); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
::selection { background: var(--fg); color: var(--bg); }

/* Photos are monochrome everywhere */
.ph { filter: grayscale(1) contrast(1.06) url(#ca); }
/* Chromatic aberration. A page-wide SVG filter re-rendered every scroll frame, and even per photo the CPU-only SVG filter made
   hover zooms and parallax stutter. So the photos on the page are baked: <img class="ph b"> points at assets/NAME-SIZE-caVW.webp,
   already grayscale + contrast + red/cyan fringe, where VW is the width (vw) the photo is shown at (sets the fringe strength).
   Baked files must get no grayscale() (it would wipe the colour) and no url(#ca). Only the lightbox and the portraits still use
   the live filter. Text and the logo get their fringe from shadows. */
.ph.b { filter: none; }

/* Grain */
.grain {
  position: fixed; inset: -160px 0; pointer-events: none; z-index: 200; will-change: transform; /* film grain, drifts at half scroll speed (main.js); also dithers the dark gradients */
  /* noise tile is generated once in main.js (canvas); SVG turbulence tiles showed seams on retina */
  background-size: 160px 160px;
  opacity: var(--grain);
}

/* Glow: soft halo in the text's own colour (cheap, replaces the blur that was in the #ca filter) */
/* Chromatic fringe (red 1px left + 0.5px up, cyan 1px right + 0.5px down) on white text only; grey and dark text get just the glow */
:root { --fringe: -1px -.5px 0 rgba(255,60,60,.6), 1px .5px 0 rgba(0,225,255,.6);
        --glow: 0 0 3px color-mix(in srgb, currentColor 40%, transparent), 0 0 12px color-mix(in srgb, currentColor 28%, transparent); }
body { text-shadow: var(--fringe), var(--glow); }
.menu p, .timeline li span, .teams p:not(.hook):not(.label), .person span, .faq .a p, .contact .links, .foot, .show .facts span, .show .next span { text-shadow: var(--glow); }
.menu-btn svg, .menu .close svg, .show .x svg { filter: drop-shadow(0 0 3px rgba(236,235,232,.4)) drop-shadow(0 0 10px rgba(236,235,232,.25)); }
.hero-logo img, .logo-slot img { filter: drop-shadow(-1px -.5px 0 rgba(255,60,60,.6)) drop-shadow(1px .5px 0 rgba(0,225,255,.6)) drop-shadow(0 0 3px rgba(236,235,232,.4)) drop-shadow(0 0 10px rgba(236,235,232,.25)); }
/* Header: a soft dark halo under the small logo, menu links and burger so they stand off whatever scrolls beneath */
.hdr nav a { text-shadow: var(--fringe), var(--glow), 0 0 10px rgba(0,0,0,.75), 0 0 24px rgba(0,0,0,.55); }
.logo-slot img { filter: drop-shadow(-1px -.5px 0 rgba(255,60,60,.6)) drop-shadow(1px .5px 0 rgba(0,225,255,.6)) drop-shadow(0 0 3px rgba(236,235,232,.4)) drop-shadow(0 0 10px rgba(236,235,232,.25)) drop-shadow(0 0 10px rgba(0,0,0,.75)) drop-shadow(0 0 20px rgba(0,0,0,.5)); }
.menu-btn svg { filter: drop-shadow(0 0 3px rgba(236,235,232,.4)) drop-shadow(0 0 10px rgba(236,235,232,.25)) drop-shadow(0 0 8px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(0,0,0,.5)); }

/* ---------- Motion primitives ---------- */
/* Text appears as a whole block: short fade and lift, no per-line or per-word motion */
.split, .rise { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.split.in, .rise.in { opacity: 1; transform: none; }

/* Image frames: no entrance animation, only the quiet hover */
.frame { overflow: hidden; }
.frame img { transition: filter .9s ease, opacity .9s ease; }

/* ---------- Top strip: solid semi-transparent black under logo and menu (solid, not a gradient: gradients banded on dark) ---------- */
.top-fade { position: fixed; inset: 0 0 auto; height: 80px; -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent); mask-image: linear-gradient(#000 calc(100% - 48px), transparent); z-index: 99; pointer-events: none; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .6s ease; }
@media (min-width: 900px) { .top-fade { height: 86px; } }
.top-fade.on { opacity: 1; } /* appears together with the small header logo (main.js); solid part = half the header (32/38px) + 48px feathered edge */

/* ---------- Header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 100; height: 64px; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; }
.hdr .logo img { height: 28px; width: auto; }
.hdr nav { display: none; gap: 28px; font-size: 14px; font-weight: 500; font-stretch: 110%; }
.hdr nav a { text-decoration: none; opacity: .7; transition: opacity .5s ease; }
.hdr nav a:hover { opacity: 1; }
.menu-btn { padding: 14px 0 14px 14px; display: flex; align-items: center; }
@media (min-width: 900px) { .hdr { height: 76px; } .hdr .logo img { height: 32px; } .hdr nav { display: flex; } .menu-btn { display: none; } }

.menu { position: fixed; inset: 0; z-index: 150; background: var(--bg); padding: 88px var(--gut) 32px; display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-io); visibility: hidden; }
.menu.open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu .close { position: absolute; top: 9px; right: var(--gut); padding: 14px 3px 14px 14px; display: flex; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a { display: inline-block; text-decoration: none; font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(26px, 8.6vw, 64px); line-height: 1.08; padding: 6px 0; }
.menu p { margin: 0; color: var(--fg-2); font-size: 15px; }

/* ---------- Logo: big one scrolls away with the hero; small one fades in once it's gone ---------- */
.logo-slot { display: block; height: 28px; width: calc(28px * 970 / 624); pointer-events: none; }
.logo-slot img { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.logo-slot.on { pointer-events: auto; }
.logo-slot.on img { opacity: 1; }
@media (min-width: 900px) { .logo-slot { height: 32px; width: calc(32px * 970 / 624); } }
.hero-logo { margin-bottom: 28px; }
.hero-logo img { display: block; height: auto; width: 120px; max-width: 400px; } /* width comes from main.js (headline width); capped so it never outgrows the hero on wide screens */

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.hero .bg { position: absolute; inset: 0; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,.4); pointer-events: none; }
.hero .copy { position: relative; z-index: 1; padding: 0 var(--gut) calc(40px + env(safe-area-inset-bottom)); width: 100%; }
.hero h1 { margin: 0; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.015em; line-height: .94;
  /* Four fixed lines at every width: sized so the longest ("where the audience") fills the column, stops at 72px; on short windows shrinks so logo + headline fit */
  font-size: clamp(20px, min(calc((100vw - 2 * var(--gut)) / 11.3), calc(10.4vh - 21px)), 72px); }
.hero h1 .ln { display: block; white-space: nowrap; }

/* ---------- Sections ---------- */
.sec { padding: 96px var(--gut); }
@media (min-width: 900px) { .sec { padding: 160px var(--gut); } }
/* Section labels: dark text on a light bar that runs off the left edge of the page */
.sec .label { display: inline-block; font-size: 13px; font-weight: 600; font-stretch: 110%; line-height: 1.2; letter-spacing: .01em;
  color: var(--bg); background: var(--fg); text-shadow: var(--fringe);
  margin: 0 0 28px calc(-1 * var(--gut)); padding: 3px 7px 3px var(--gut);
  box-shadow: var(--fringe), 0 0 3px rgba(236, 235, 232, .4), 0 0 12px rgba(236, 235, 232, .28); } /* plate glows with the same red/cyan fringe */

.about .intro { margin: 0 0 48px; font-weight: 300; font-size: clamp(21px, 2.6vw, 32px); line-height: 1.35; max-width: 38ch; }
@media (min-width: 900px) { .about .intro { margin-bottom: 72px; } }
.about .manifesto { margin: 0; font-weight: 300; font-size: clamp(27px, 5.2vw, 60px); line-height: 1.14; letter-spacing: -.01em; max-width: 22ch; }
.about .manifesto strong { font-weight: 700; }

/* ---------- Performances ---------- */
.shows { padding-left: 0; padding-right: 0; }
.shows .head { padding: 0 var(--gut); }
.show-list { display: grid; gap: 4px; }
.card { position: relative; display: block; text-decoration: none; overflow: hidden; background: var(--bg); height: min(76svh, 100vw); min-height: 320px; }
.card .img { position: absolute; inset: 0; }
/* The chromatic fringe is baked into these photos (assets/*-ca.webp: grayscale + contrast + red/cyan offset) instead of the #ca SVG
   filter. That filter runs on the CPU and cannot be composited, so with a full-width photo that also fades and zooms on hover it made
   the scroll stutter. Only cheap contrast is left here; never add grayscale() (it would wipe the baked colour) or url(#ca) back. */
.card .img img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: none; will-change: opacity, scale; }
.card:hover .img img, .card:focus-visible .img img { opacity: .75; filter: contrast(1.09); } /* 1.16 / 1.06 baked */
.card::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,.3); pointer-events: none; } /* top edge melts into the page, bottom darkens under the text */
.card .txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 var(--gut) 36px; }
.card h3 { margin: 0 0 16px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .86; letter-spacing: -.015em; font-size: clamp(28px, 10.4vw, 168px); }
.card .log { margin: 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.35; max-width: 32ch; }
.card.noimg { height: auto; min-height: min(56svh, 100vw); display: flex; }
.card.noimg::after { display: none; }
.card.noimg .txt { position: relative; margin-top: auto; }
@media (min-width: 900px) {
  .show-list { grid-template-columns: 1fr 1fr; }
  .card { height: min(88vh, calc(50vw - 2px)); }
  .card.wide { grid-column: 1 / -1; height: min(92vh, 100vw); }
  .card:not(.wide) h3 { font-size: 5.2vw; }
  .card.noimg { height: auto; min-height: min(60vh, 50vw); }
}

/* ---------- Timeline ---------- */
.timeline ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.timeline li b { font-weight: 700; font-stretch: 115%; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.2; }
.timeline li span { color: var(--fg-2); font-size: 16px; max-width: 60ch; }
@media (min-width: 900px) { .timeline li { grid-template-columns: 2fr 7fr; gap: 48px; align-items: baseline; } .timeline li span { font-size: 17px; } }

/* ---------- For teams ---------- */
.teams .hook { color: var(--fg); margin: 0; font-weight: 300; font-size: clamp(26px, 4.4vw, 52px); line-height: 1.15; max-width: 24ch; }
.teams .cols { display: grid; gap: 48px; margin-top: 16px; }
.teams h3 { margin: 0 0 14px; font-size: 22px; font-weight: 700; font-stretch: 115%; text-transform: uppercase; letter-spacing: .01em; }
.teams p { margin: 0 0 1em; color: var(--fg-2); max-width: 50ch; }
.teams p.meta { color: var(--fg); margin-top: 1.4em; }
.teams ul { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.teams li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.teams .photo { margin: 56px calc(-1 * var(--gut)) 0; aspect-ratio: 16/10; } /* full bleed, no hover zoom */
.teams .photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .teams .cols { grid-template-columns: 1fr 1fr; gap: 64px; } .teams .photo { aspect-ratio: 21/9; } }

/* ---------- Team ---------- */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; }
.person .img { aspect-ratio: 4/5; background: var(--bg-2); }
.person .img img { width: 100%; height: 100%; object-fit: cover; opacity: .85; filter: grayscale(1) contrast(1.06); } /* portraits stay clean: no chromatic aberration */
.person:hover .img img { opacity: 1; filter: grayscale(1) contrast(1.14); }
.person b { display: block; margin-top: 14px; font-weight: 700; font-stretch: 115%; font-size: 18px; line-height: 1.2; }
.person span { display: block; color: var(--fg-2); font-size: 14px; margin-top: 4px; }
@media (min-width: 900px) { .people { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

/* ---------- FAQ ---------- */
.faq .q { border-top: 1px solid var(--line); }
.faq .q:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 20px 0; font-weight: 600; font-stretch: 110%; font-size: clamp(18px, 2vw, 22px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 14px; height: 14px; position: relative; top: 2px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .6s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq .a { overflow: hidden; }
.faq .a p { margin: 0; padding: 0 0 24px; color: var(--fg-2); max-width: 60ch; }
details::details-content { block-size: 0; overflow: hidden; transition: block-size .7s var(--ease), content-visibility .7s allow-discrete; }
details[open]::details-content { block-size: auto; }
:root { interpolate-size: allow-keywords; }

/* ---------- Contact ---------- */
.contact { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.contact .ask { margin: 0 0 40px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; font-size: clamp(34px, 8vw, 104px); line-height: .95; letter-spacing: -.015em; max-width: 14ch; }
/* Contacts: plain text, same style as the address, one under another */
.contact .links { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--fg-2); }
.contact .links a { color: inherit; }
.foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 96px; color: var(--fg-3); font-size: 13px; }

/* ---------- Show overlay ---------- */
.show { position: fixed; inset: 0; z-index: 120; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.show[hidden] { display: none; }
.show .x { position: fixed; top: 9px; right: var(--gut); z-index: 130; padding: 14px 3px 14px 14px; display: flex; mix-blend-mode: difference; }
/* Same top fade inside the show overlays, sticky to their own scroll */
.show::before { content: ""; position: sticky; top: 0; display: block; height: 80px; margin-bottom: -80px; z-index: 125; -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent); mask-image: linear-gradient(#000 calc(100% - 48px), transparent); pointer-events: none; background: rgba(0,0,0,.5); }
.show .top { position: relative; height: 88svh; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; }
.show .top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.show .top::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,.4); }
.show .top .t { position: relative; z-index: 1; padding: 0 var(--gut) 36px; }
.show h2 { margin: 0 0 18px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .86; letter-spacing: -.015em; font-size: clamp(30px, 11.2vw, 200px); }
.show .log { margin: 0; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.3; max-width: 30ch; }
.show .body { padding: 64px var(--gut) 40px; display: grid; gap: 40px; }
.show .body .story p { margin: 0 0 1.1em; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.55; max-width: 56ch; }
.show .facts { display: grid; gap: 0; border-top: 1px solid var(--line); align-content: start; }
.show .facts div { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.show .facts span { display: block; color: var(--fg-3); font-size: 13px; margin-bottom: 2px; }
.show .gal { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 4px; }
.show .gal .frame { aspect-ratio: 4/5; }
.show .gal .frame:first-child { grid-column: 1 / -1; aspect-ratio: 16/10; }
.show .gal img { width: 100%; height: 100%; object-fit: cover; }
.show .next { display: block; text-decoration: none; padding: 96px var(--gut) calc(96px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); margin-top: 96px; }
.show .next span { display: block; color: var(--fg-3); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.show .next b { font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(30px, 10vw, 120px); line-height: .9; opacity: .5; transition: opacity .7s ease; }
.show .next:hover b { opacity: 1; }
/* Galleries of any length close their last row: a lone last photo spans the row (photos only: "of .frame" skips the Failure card) */
.show .gal .frame:nth-last-child(1 of .frame):nth-child(2n of .frame):not(:first-child) { grid-column: 1 / -1; aspect-ratio: 16/10; }
@media (min-width: 900px) {
  .show .body { grid-template-columns: 7fr 4fr; gap: 64px; padding-top: 96px; }
  .show .gal { grid-template-columns: repeat(3, 1fr); }
  .show .gal .frame:first-child { grid-column: span 2; aspect-ratio: auto; }
  /* first photo takes two cells, so rows close when count + 1 is a multiple of 3 */
  .show .gal .frame:nth-last-child(1 of .frame):nth-child(2n of .frame):not(:first-child) { grid-column: auto; aspect-ratio: 4/5; }
  .show .gal .frame:nth-last-child(1 of .frame):nth-child(3n+1 of .frame):not(:first-child) { grid-column: span 2; aspect-ratio: auto; }
  .show .gal .frame:nth-last-child(1 of .frame):nth-child(3n of .frame):not(:first-child) { grid-column: 1 / -1; aspect-ratio: 21/9; }
}

/* Failure: one of the play's cards lies across the corner where four photos meet (position from main.js) */
.show .gal { position: relative; }
.show .gal .drop { position: absolute; left: 0; top: 0; z-index: 2; width: 30%; aspect-ratio: 944 / 1417; visibility: hidden;
  transform: translate(-50%, -50%) rotate(-7deg); box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.6); }
.show .gal .drop.placed { visibility: visible; }
.show .gal .drop img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .show .gal .drop { width: 17%; } }

/* Gallery photos (and Inbox letters) open in the viewer */
.show .gal .frame, .show .gal .drop, .letters img { cursor: zoom-in; }
.show .gal .frame:focus-visible, .show .gal .drop:focus-visible { outline-offset: -3px; }

/* ---------- Photo viewer ---------- */
.lb { position: fixed; inset: 0; z-index: 140; background: rgba(10,10,10,.96); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; touch-action: pan-y; }
.lb.open { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.lb img { max-width: calc(100vw - 2 * var(--gut)); max-height: calc(100svh - 136px); width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) contrast(1.06) url(#ca); transition: opacity .35s ease; }
.lb.color img { filter: contrast(1.06); } /* Qualia keeps its colour here, without the fringe */
.lb img.fade { opacity: 0; }
.lb .prev, .lb .next { position: absolute; top: 64px; bottom: 64px; width: 22%; display: flex; align-items: center; padding: 0 var(--gut); opacity: .7; transition: opacity .5s ease; }
.lb .prev { left: 0; justify-content: flex-start; }
.lb .next { right: 0; justify-content: flex-end; }
.lb .x { position: absolute; top: 9px; right: var(--gut); padding: 14px 3px 14px 14px; display: flex; transition: opacity .5s ease; }
.lb svg { filter: drop-shadow(0 0 3px rgba(236,235,232,.4)) drop-shadow(0 0 8px rgba(0,0,0,.8)); }
.lb .count { position: absolute; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 13px; color: var(--fg-3); text-shadow: var(--glow); }
@media (hover: hover) { .lb .prev:hover, .lb .next:hover { opacity: 1; } .lb .x:hover { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .lb, .lb img { transition: none; } }

/* Qualia gallery: colour comes back on hover. main.js puts a colour copy of each photo under the grayscale one
   and the grayscale one fades out (plain opacity: a mix-blend-mode "saturation" layer failed on composited images) */
.gal.hue .frame { position: relative; }
.gal.hue .frame img { position: absolute; inset: 0; }
.gal.hue .frame img.col { filter: none; } /* the colour copy is baked too: NAME-SIZE-col.webp (contrast only, no fringe) */
.gal.hue .frame img.ph:not(.col) { transition: opacity .9s ease, scale 1.4s var(--ease); }
@media (hover: hover) { .gal.hue .frame:hover img.ph:not(.col) { opacity: 0; } }

/* Inbox letters: a loose pile, each sheet turned up to ±10°, lower sheets lie on top (positions from main.js).
   It slides up over the end of the gallery and is cut off flat at the bottom, on the line above Next. */
/* Full bleed: edge sheets run off the sides of the page. overflow-x: clip cuts them without a sideways scroll;
   clip-path cuts the bottom and leaves the top free to overhang the gallery. */
.letters { position: relative; z-index: 1; margin: calc(-1 * clamp(80px, 18vw, 260px)) 0 0; height: 120vw;
  overflow-x: clip; clip-path: inset(-400px 0 0 0); }
.letters + .next { margin-top: 0; }
.letters img { position: absolute; left: 0; top: 0; width: var(--w, 46%); height: auto; aspect-ratio: 900 / 1273; object-fit: cover;
  filter: brightness(.86) contrast(1.05); box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 14px 40px rgba(0,0,0,.5);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); transition: filter .6s ease; }
.letters img[hidden] { display: none; } /* spare sheets that would leave a half-filled row */
@media (hover: hover) { .letters img:hover { filter: brightness(1) contrast(1.05); } }
html.locked, html.locked body { overflow: hidden; }

/* ---------- Parallax boxes: the image is taller than its box and slides inside it ---------- */
.px { position: relative; overflow: hidden; }
.px > img.ph { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: translate; }
.teams .photo.px { position: relative; }

/* ---------- Hover zoom: the photo grows slightly inside the same box ---------- */
.frame img { transition: scale 1.4s var(--ease), filter .9s ease, opacity .9s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .frame:hover img, .card:hover .img img, .person:hover .img img { scale: 1.05; }
}

/* ---------- Hover: calm, opacity and a drawn underline, never movement ---------- */
.hdr nav a, .ul, .menu li a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease), opacity .5s ease;
}
/* Hovering one card darkens the others: a dark layer over photo AND text, the text itself stays opaque */
.card::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(10,10,10,.5); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.faq summary { transition: opacity .5s ease; }
.menu-btn, .menu .close, .show .x { transition: opacity .5s ease; }
.card h3 { transition: opacity .6s ease; }
.person b { transition: opacity .5s ease; }
@media (hover: hover) {
  .hdr nav a:hover, .ul:hover, .menu li a:hover { background-size: 100% 1px; opacity: 1; }
  .contact .links a:hover { color: var(--fg); }
  .menu-btn:hover, .menu .close:hover, .show .x:hover { opacity: .6; }
  .menu ul:hover a:not(:hover) { opacity: .4; }
  .faq summary:hover { opacity: .7; }
  .show-list:hover .card:not(:hover)::before { opacity: 1; }
}
.contact .links a { transition: color .5s ease, background-size .6s var(--ease); }
.ul { text-decoration: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .split, .rise { transition: none !important; transform: none !important; opacity: 1 !important; }
  .menu { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* View transition timing for the card -> show hand-off */
::view-transition-group(*) { animation-duration: .8s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }