/* Everyhuman Studio: site-wide variables, first-paint background, entrance motion.
   Linked from the <head> of every page so it applies before anything renders.
   All tunable values live in :root below. See EDITING.md > Typography / Motion. */

:root {
  /* ---- Typography (Latin: EN, ES, NL) ---- */
  --eh-lh-display: 1.12;    /* large serif statements and headlines */
  --eh-lh-marquee: 1;       /* scrolling hero headline */
  --eh-lh-caption: 1.25;    /* project captions, accordion titles, medium serif text */
  --eh-lh-body: 1.5;        /* sans body text */
  --eh-ls-serif: -0.01em;   /* letter-spacing for serif text */
  --eh-ls-marquee: -0.01em;

  /* Font sizes: every size in the templates is written as calc(<size> * var(--eh-fs-...)). One number scales the whole site, so
     headings, statements, body, nav and captions keep their relationship. 1 = the original sizes; 0.92 is about 8% smaller. */
  --eh-fs-scale: 0.92;
  --eh-fs-serif: var(--eh-fs-scale);    /* serif headlines, statements, captions */
  --eh-fs-marquee: var(--eh-fs-scale);  /* scrolling hero headline */
  --eh-fs-sans: var(--eh-fs-scale);     /* nav and body */

  /* ---- Motion ---- */
  --reveal-distance: 50px;                      /* content rises from this far below */
  --reveal-duration: 1100ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-delay: 200ms;                        /* content starts this long after the header */
  --reveal-stagger: 120ms;                      /* gap between items in a row or grid */
  --reveal-scale: 0.96;                         /* images start at this scale */
  --reveal-brightness: 0.4;                     /* images start this dark */
  --header-fade: 700ms;
  --exit-duration: 220ms;                       /* whole page fades to black before the next page loads */
  --exit-ease: ease-out;
  --lang-fade: 160ms;                           /* text crossfade when switching language */
  --reveal-fallback: 1.5s;                      /* if scripts fail, everything shows after this */
  --eh-home-hero-dim: 0.4;                            /* Home hero: how dark the even overlay over the photo is (0 = none, 1 = black); the gradient under the header comes on top of it. Separate from --eh-hero-dim */
  --eh-home-hero-focus-x: 72%;                        /* Home hero: which part of the photo stays in view when a narrow screen crops the sides (0% left edge, 100% right edge) */
  --eh-home-hero-focus-x-narrow: 90%;                 /* same, on phones, where a portrait crop of the right side is used */
  --eh-hero-dim: 0.35;                                /* project heroes: how dark the even overlay over the video or image is (0 = none, 1 = black). Per project: "dim" in the hero block */
  --z-header: 1000;                                   /* above every other layer on every page (players, controls, full-bleed media) */
  --header-h: clamp(84px, calc(6vw + 44px), 124px);   /* height of the fixed header row; pages reserve this much room at the top */
  --header-shadow: 0 0 18px rgba(10,10,9,0.6), 0 0 6px rgba(10,10,9,0.5), 0 1px 2px rgba(10,10,9,0.55);   /* keeps text legible over light photos, no bar behind it */
  --header-logo-shadow: drop-shadow(0 0 12px rgba(10,10,9,0.6)) drop-shadow(0 0 4px rgba(10,10,9,0.55)) drop-shadow(0 1px 1px rgba(10,10,9,0.5));
  --statement-duration: 1400ms;                 /* .reveal-statement: dim to bright, small to full size */
  --statement-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --statement-from-color: #3b3b38;              /* starting colour (very dark grey) */
  --statement-from-opacity: 0.6;
  --statement-from-scale: 0.965;                /* starts marginally smaller, no vertical movement */
  --marquee-seconds: 70s;                       /* hero headline: time for one copy of the text to pass. Higher = slower */
}

/* Japanese keeps more open leading and slightly smaller type. */
:root:lang(ja) {
  --eh-fs-serif: calc(0.76 * var(--eh-fs-scale));      /* serif headlines and statements */
  --eh-fs-marquee: calc(0.6 * var(--eh-fs-scale));     /* scrolling hero headline */
  --eh-fs-sans: 0.88;       /* nav and body (kept a little larger than a straight 8% cut so small Japanese text stays readable) */
  --eh-lh-display: 1.5;
  --eh-lh-marquee: 1.15;
  --eh-lh-caption: 1.6;
  --eh-lh-body: 1.8;
  --eh-ls-serif: 0.04em;
  --eh-ls-marquee: 0.03em;
  --eh-ls-sans: 0.04em;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--header-h); }
html, body { margin: 0; background: #0a0a09; color: #ecebe6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: #ecebe6; }
a:hover { color: #ffffff; }
a:focus-visible, button:focus-visible { outline: 1px solid #ecebe6; outline-offset: 5px; }
::selection { background: #dcdcd3; color: #0a0a09; }
[hidden] { display: none !important; }

/* ---- Hover states (kept out of the HTML) ---- */
.hv-dim:hover { opacity: 0.65 !important; }
.hv-dim-soft:hover { opacity: 0.75 !important; }
.hv-zoom:hover { transform: scale(1.035) !important; }
.hv-btn:hover { background: #f1f0ea !important; color: #0a0a09 !important; }
.hv-white:hover { background: #ffffff !important; }
.hv-cream:hover { background: #f1f0ea !important; }

/* ---- Header: desktop nav and language dropdown vs. mobile menu button (same 900px breakpoint as before) ---- */
.eh-desktop { display: contents; }
.eh-mobile { display: none; }
@media (max-width: 899.98px) {
  .eh-desktop { display: none; }
  .eh-mobile { display: contents; }
}
.eh-chevron { transition: transform .3s; }
[aria-expanded="true"] > .eh-chevron { transform: rotate(180deg); }

/* ---- Images and video stay invisible until loaded (no grey boxes), then fade in ---- */
.eh-img { opacity: 0; transition: opacity 700ms ease; }
.eh-img.is-loaded { opacity: 1; }
/* A failed or not-yet-loaded image stays invisible, so its alt text is never drawn over the black page. */

/* ---- 16:9 media slot (Home approach blocks): the wrapper owns the ratio, the image or video inside covers it ---- */
.eh-slot-16x9 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; min-width: 0; }

/* Image or video beside text: media gets the wider column; stacked on tablet and phone. */
.eh-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 4vw, 72px); row-gap: clamp(24px, 4vw, 40px); }
.eh-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.eh-split--flip > :first-child { order: 2; }
.eh-split-text { display: flex; flex-direction: column; gap: 24px; max-width: 460px; }
.eh-split--flip .eh-split-text { justify-self: end; }
@media (max-width: 899.98px) { .eh-split, .eh-split--flip { grid-template-columns: minmax(0, 1fr); } .eh-split--flip > :first-child { order: 0; } .eh-split--flip .eh-split-text { justify-self: start; } }

/* ---- Background video (src/partials/bgvideo.html, js/bgvideo.js) ---- */
:root { --bgv-icon-ms: 800ms; }
.eh-bgv { position: absolute; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.eh-bgv:not([role="button"]) { cursor: default; }
.eh-bgv:focus-visible { outline: 1px solid #ecebe6; outline-offset: -6px; }
/* The poster image is always underneath. The video fades in only once it is really playing, so there is no jump and a failed video leaves the poster. */
.eh-bgv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 500ms ease; pointer-events: none; }
.eh-bgv.is-live .eh-bgv-video { opacity: 1; }
.eh-bgv-icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; color: #ecebe6; background: rgba(10,10,9,0.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: scale(0.92); transition: opacity 300ms ease, transform 300ms ease; pointer-events: none; }
.eh-bgv-icon.is-on { opacity: 1; transform: none; }
.eh-bgv-icon svg { grid-area: 1 / 1; }
@media (prefers-reduced-motion: reduce) { .eh-bgv-video { transition: none; } .eh-bgv-icon { transition: opacity 150ms ease; transform: none; } }

/* ---- Selected work carousel: infinite loop, N full slides plus a peek of the neighbours at both edges ---- */
:root { --car-visible: 3; --car-peek: 0.22; --car-gap: clamp(16px, 1.6vw, 28px); --car-duration: 700ms; --car-ease: ease-in-out; }
@media (max-width: 1099.98px) { :root { --car-visible: 2; --car-peek: 0.14; } }
@media (max-width: 639.98px) { :root { --car-visible: 1; --car-peek: 0.1; } }
.eh-car { position: relative; outline: none; container-type: inline-size; --car-w: calc((100cqw - var(--car-gap) * (var(--car-visible) + 1)) / (var(--car-visible) + 2 * var(--car-peek))); }
.eh-car:focus-visible .eh-car-viewport { outline: 1px solid rgba(236,235,230,0.4); outline-offset: -1px; }
.eh-car-viewport { overflow: hidden; touch-action: pan-y; padding-bottom: 8px; }
.eh-car-viewport.is-drag { cursor: grabbing; }
/* Before JS runs the first slide already sits where the loop puts it (a peek of the previous slide would show at the left). */
.eh-car-track { display: flex; gap: var(--car-gap); will-change: transform; user-select: none; -webkit-user-select: none; transform: translate3d(calc(var(--car-peek) * var(--car-w) + var(--car-gap)), 0, 0); }
/* Slide width: viewport = visible slides + 2 peeks + gaps, so slivers of the neighbours show at both page edges. */
.eh-car-slide { flex: 0 0 var(--car-w); color: #ecebe6; -webkit-user-drag: none; }
.eh-car-slide img { -webkit-user-drag: none; }
.eh-car-btn { position: absolute; z-index: 3; top: calc(var(--car-w) / 2); transform: translateY(-50%); width: clamp(48px, 4vw, 64px); height: clamp(48px, 4vw, 64px); border-radius: 50%; border: 1px solid rgba(236,235,230,0.25); background: rgba(236,235,230,0.22); color: #ecebe6; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .3s, color .3s; }
.eh-car-btn:hover { background: rgba(236,235,230,0.85); color: #0a0a09; }
.eh-car-prev { left: clamp(20px, 3vw, 48px); }
.eh-car-next { right: clamp(20px, 3vw, 48px); }
@media (max-width: 639.98px) { .eh-car-btn { width: 44px; height: 44px; } .eh-car-prev { left: 12px; } .eh-car-next { right: 12px; } }

/* ---- Work page grid: 3 per row on desktop, 2 on tablet, 1 on phone. The grid starts below the header space reserved by the header partial. ---- */
.eh-work-grid { padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 64px) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 1.8vw, 32px); row-gap: clamp(56px, 6vw, 96px); }
@media (max-width: 1099.98px) { .eh-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .eh-work-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Fixed header: floats over the content, no background. Only the items themselves take clicks. ---- */
.eh-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); pointer-events: none; text-shadow: var(--header-shadow); }
.eh-header a, .eh-header button, .eh-header [data-lang-wrap], .eh-header #site-menu { pointer-events: auto; }
.eh-header-logo img { filter: var(--header-logo-shadow); }
.eh-header #site-menu { text-shadow: none; }
.eh-header #site-menu img { filter: none; }
.eh-header .eh-chevron { filter: drop-shadow(0 0 6px rgba(10,10,9,0.5)); }

/* Players, loops, bleed media and the carousel keep their inner z-indexes to themselves: nothing inside them can rise above the header. */
.eh-slot-16x9, .eh-film, .eh-bgv, .eh-intro-img, .eh-car { isolation: isolate; }

/* ---- Header scrim: barely-there dark gradient so the logo and nav stay readable on a light photo (Home hero) ---- */
.eh-header-scrim { position: absolute; top: 0; left: 0; right: 0; height: clamp(110px, 13vw, 190px); pointer-events: none; background: linear-gradient(180deg, rgba(10,10,9,0.34) 0%, rgba(10,10,9,0.14) 55%, rgba(10,10,9,0) 100%); }
@media (prefers-reduced-motion: reduce) { video.eh-img { display: none; } }

/* ---- "Email copied" note beside the footer email icon ---- */
.eh-copy-note { position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 5; padding: 7px 14px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 300ms ease, transform 300ms ease; background: #0a0a09; border: 1px solid #2a2a27; color: #cfcec7; font-size: calc(13px * var(--eh-fs-sans, 1)); letter-spacing: 0.01em; line-height: 1.3; }
.eh-copy-note.is-on { opacity: 1; transform: none; }
.eh-copy-note:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .eh-copy-note { transition: none; transform: none; } }

/* ---- Services accordion: calm height + fade, plus becomes minus when open ---- */
.eh-acc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 600ms var(--reveal-ease), opacity 450ms ease; }
.eh-acc-inner { min-height: 0; overflow: hidden; }
h2:has([aria-expanded="true"]) + .eh-acc { grid-template-rows: 1fr; opacity: 1; }
[data-plus] { transition: transform 450ms var(--reveal-ease), opacity 450ms ease; }
[aria-expanded="true"] [data-plus] { transform: scaleY(0); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .eh-acc, [data-plus] { transition: none; } }

/* ---- Entrance ---- */
@keyframes eh-show { to { opacity: 1; } }

/* Without js/motion.js everything still appears after --reveal-fallback. */
[data-reveal], [data-reveal-header] { opacity: 0; animation: eh-show .6s ease var(--reveal-fallback) forwards; }

html.eh-motion [data-reveal], html.eh-motion [data-reveal-header] { animation: none; }
html.eh-motion [data-reveal-header] { transition: opacity var(--header-fade) ease; }
html.eh-motion [data-reveal] {
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease), filter var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-d, 0ms);
}
html.eh-motion [data-reveal][data-media] {
  transform: translate3d(0, var(--reveal-distance), 0) scale(var(--reveal-scale));
  filter: brightness(var(--reveal-brightness));
}
html.eh-motion [data-reveal] [data-media] {
  transform: scale(var(--reveal-scale));
  filter: brightness(var(--reveal-brightness));
  transition: transform var(--reveal-duration) var(--reveal-ease), filter var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-d, 0ms);
}
/* data-reveal="fade": no movement (full-bleed backgrounds, overlay controls). */
html.eh-motion [data-reveal="fade"], html.eh-motion [data-reveal="fade"][data-media] { transform: none; }

html.eh-motion [data-reveal-header].is-in,
html.eh-motion [data-reveal].is-in,
html.eh-motion [data-reveal][data-media].is-in,
html.eh-motion [data-reveal].is-in [data-media] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html.eh-motion [data-reveal], html.eh-motion [data-reveal][data-media], html.eh-motion [data-reveal] [data-media] {
    transform: none !important; filter: none !important; transition: opacity 400ms ease !important; transition-delay: 0ms !important;
  }
}

/* ---- Statement reveal (.reveal-statement): already in place, dim and slightly smaller, then brightens to off-white at full size.
   Plays once when scrolled into view (js/motion.js). Without scripts, or with reduced motion, the text is simply shown. ---- */
html.eh-motion .reveal-statement {
  color: var(--statement-from-color); opacity: var(--statement-from-opacity); transform: scale(var(--statement-from-scale)); will-change: transform, opacity;
  transition: color var(--statement-duration) var(--statement-ease), opacity var(--statement-duration) var(--statement-ease), transform var(--statement-duration) var(--statement-ease);
}
html.eh-motion .reveal-statement.is-in { color: #ecebe6; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.eh-motion .reveal-statement, html.eh-motion .reveal-statement.is-in { color: #ecebe6; opacity: 1; transform: none; transition: none; }
}

/* ---- Arriving from a language switch: no entrance, just a quick text crossfade ---- */
html.eh-instant [data-reveal], html.eh-instant [data-reveal-header], html.eh-instant .reveal-statement, html.eh-instant [data-reveal] [data-media] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
html.eh-lang-in [data-page] :is(h1, h2, h3, p, nav, button, [data-marquee]) { opacity: 0; animation: eh-show var(--lang-fade) ease var(--reveal-fallback) forwards; }
html.eh-lang-in.eh-lang-go [data-page] :is(h1, h2, h3, p, nav, button, [data-marquee]) { opacity: 1; animation: none; transition: opacity var(--lang-fade) ease; }

/* ---- Exit (internal link clicked): one fade of the whole page, header included ---- */
html.eh-leaving [data-page] { opacity: 0 !important; transition: opacity var(--exit-duration) var(--exit-ease) !important; pointer-events: none; }

/* =====================================================================================================
   Project pages (/work/<slug>/): one template, built from blocks. See EDITING.md > Project pages.
   ===================================================================================================== */
:root { --gutter: clamp(20px, 4vw, 64px); --block-gap: clamp(48px, 6vw, 100px); --credits-gap: clamp(32px, 4vw, 67px); }
.eh-pg { padding-left: var(--gutter); padding-right: var(--gutter); }
.eh-blk { margin-top: var(--block-gap); }
.reveal-statement--left { transform-origin: 0 50%; }

/* Hero loop: full screen under the fixed header, title card in the centre */
.eh-hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
/* Which part of the picture stays in view when a narrow or portrait screen crops the sides (per project: "focusX" in the hero block). */
.eh-hero .eh-bgv-video, .eh-hero .eh-bgv img { object-position: var(--eh-hero-focus-x, 50%) 50%; }
.eh-home-hero-pic { display: block; position: absolute; inset: 0; }
.eh-home-hero-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--eh-home-hero-focus-x) 50%; display: block; }
@media (max-width: 700px) { .eh-home-hero-pic img { object-position: var(--eh-home-hero-focus-x-narrow) 50%; } }
.eh-home-hero-shade { position: absolute; inset: 0; pointer-events: none; background: rgba(10,10,9,var(--eh-home-hero-dim)); }   /* even dark overlay over the Home hero photo */
.eh-hero-shade { position: absolute; inset: 0; pointer-events: none; background: rgba(10,10,9,var(--eh-hero-dim)); }   /* even dark overlay over the hero media (project pages only); the title and the header sit above it */
.eh-hero-title { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--gutter); pointer-events: none; text-align: center; }
.eh-hero-title h1 { margin: 0; font-family: 'Cormorant Garamond','Noto Serif JP',Georgia,serif; font-weight: 300; font-size: calc(clamp(52px, 9vw, 150px) * var(--eh-fs-serif, 1)); line-height: var(--eh-lh-display, 1.12); letter-spacing: var(--eh-ls-serif, normal); text-wrap: balance; text-shadow: 0 2px 34px rgba(10,10,9,0.45); }
.eh-hero-title img { display: block; width: clamp(200px, 34vw, 560px); height: auto; filter: drop-shadow(0 2px 24px rgba(10,10,9,0.45)); }
html.eh-motion .eh-hero-title[data-reveal] { transition-duration: 1800ms; transition-delay: 500ms; }

/* Intro: portrait 4:5 image left, big statement right (image first when stacked) */
.eh-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(32px, 6vw, 120px); row-gap: 32px; }
.eh-intro-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.eh-intro-text { font-family: 'Cormorant Garamond','Noto Serif JP',Georgia,serif; font-weight: 300; font-size: calc(clamp(28px, 3.3vw, 54px) * var(--eh-fs-serif, 1)); line-height: var(--eh-lh-display, 1.12); letter-spacing: var(--eh-ls-serif, normal); text-wrap: balance; }
@media (max-width: 899.98px) { .eh-intro { grid-template-columns: minmax(0, 1fr); } }

/* Media + text: 16:9 media, paragraph aligned to the bottom of the media. Side and bleed come from the data file. */
.eh-mt { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: end; column-gap: clamp(28px, 4vw, 72px); row-gap: 24px; }
.eh-mt--right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.eh-mt--right > .eh-mt-media { order: 2; }
.eh-mt--bleed:not(.eh-mt--right) > .eh-mt-media { margin-left: calc(var(--gutter) * -1); }
.eh-mt--bleed.eh-mt--right > .eh-mt-media { margin-right: calc(var(--gutter) * -1); }
.eh-mt-text { max-width: 420px; font-size: calc(clamp(16px, 1.15vw, 18px) * var(--eh-fs-sans, 1)); line-height: var(--eh-lh-body, 1.5); letter-spacing: var(--eh-ls-sans, normal); color: #b9b8b0; text-wrap: pretty; }
@media (max-width: 899.98px) {
  .eh-mt, .eh-mt--right { grid-template-columns: minmax(0, 1fr); }
  .eh-mt--right > .eh-mt-media { order: 0; }
  .eh-mt--bleed > .eh-mt-media, .eh-mt--bleed.eh-mt--right > .eh-mt-media { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
}
.eh-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 48px 20px 16px; pointer-events: none; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: calc(12px * var(--eh-fs-sans, 1)); letter-spacing: 0.04em; line-height: 1.4; color: #ecebe6; background: linear-gradient(0deg, rgba(10,10,9,0.55), rgba(10,10,9,0)); }

/* Statement */
.eh-statement { max-width: 1100px; margin: 0 auto; padding: clamp(24px, 5vw, 96px) 0; text-align: center; font-family: 'Cormorant Garamond','Noto Serif JP',Georgia,serif; font-weight: 300; font-size: calc(clamp(32px, 4.4vw, 72px) * var(--eh-fs-serif, 1)); line-height: var(--eh-lh-display, 1.12); letter-spacing: var(--eh-ls-serif, normal); text-wrap: balance; }

/* Grid: 2 x 2 of 16:9 items, small gap, one column on phones */
.eh-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, 0.8vw, 12px); }
@media (max-width: 639.98px) { .eh-grid4 { grid-template-columns: minmax(0, 1fr); } }

/* Final film heading, credits */
.eh-final-title { margin: 0 0 clamp(28px, 3vw, 48px); text-align: center; font-family: 'Cormorant Garamond','Noto Serif JP',Georgia,serif; font-weight: 300; font-size: calc(clamp(30px, 3.6vw, 60px) * var(--eh-fs-serif, 1)); line-height: var(--eh-lh-display, 1.12); letter-spacing: var(--eh-ls-serif, normal); text-wrap: balance; }
.eh-blk.eh-credits { margin-top: var(--credits-gap); }
.eh-credits { text-align: center; font-family: 'Cormorant Garamond','Noto Serif JP',Georgia,serif; font-weight: 300; }
.eh-credits-title { margin: 0 0 24px; font-weight: 300; font-size: calc(clamp(24px, 2.4vw, 38px) * var(--eh-fs-serif, 1)); }
.eh-credits-list { list-style: none; margin: 0 auto; padding: 0; font-size: calc(clamp(18px, 1.5vw, 24px) * var(--eh-fs-serif, 1)); line-height: 2; letter-spacing: var(--eh-ls-serif, normal); color: #cfcec7; }
.eh-credits-list span { color: #8f8e86; }

/* Previous / next project (last block before the footer, loops) */
.eh-soon { text-align: center; margin-top: calc(var(--block-gap) * 1.1); }
.eh-soon p { margin: 0; font-family: 'Cormorant Garamond','Noto Serif JP',Georgia,serif; font-weight: 300; font-size: calc(clamp(28px, 3.6vw, 60px) * var(--eh-fs-serif, 1)); line-height: var(--eh-lh-display, 1.12); letter-spacing: var(--eh-ls-serif, normal); color: #ecebe6; }
.eh-pn { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 32px; margin-top: calc(var(--block-gap) * 1.1); padding-bottom: var(--block-gap); }
.eh-pn-link { display: block; max-width: 46%; color: #ecebe6; text-decoration: none; transition: opacity .3s; }
.eh-pn-link:hover { opacity: 0.65; color: #ecebe6; }
.eh-pn-next { margin-left: auto; text-align: right; }
.eh-pn-title { display: inline-flex; align-items: center; gap: 0.45em; font-family: 'Cormorant Garamond','Noto Serif JP',Georgia,serif; font-weight: 300; font-size: calc(clamp(28px, 3.6vw, 60px) * var(--eh-fs-serif, 1)); line-height: var(--eh-lh-display, 1.12); letter-spacing: var(--eh-ls-serif, normal); }
.eh-pn-arrow { flex: none; height: 0.8em; width: auto; }
@media (max-width: 639.98px) { .eh-pn { flex-direction: column; align-items: stretch; } .eh-pn-link { max-width: 100%; } .eh-pn-next { margin-left: 0; align-self: flex-end; } }

/* Film size: the whole player, control bar included, fits in the viewport below the fixed header. 16:9, width limited by the available
   height and centred. The "titled" variant (final film) also leaves room for the heading above it. */
:root { --film-room: clamp(16px, 4svh, 48px); --film-heading-h: calc(clamp(30px, 3.6vw, 60px) * var(--eh-fs-serif, 1) * var(--eh-lh-display, 1.12) + clamp(28px, 3vw, 48px)); }
.eh-film-slot { width: min(100%, max(280px, calc((100svh - var(--header-h) - var(--film-room)) * 16 / 9))); margin-left: auto; margin-right: auto; }
.eh-film-slot--titled { width: min(100%, max(280px, calc((100svh - var(--header-h) - var(--film-room) - var(--film-heading-h)) * 16 / 9))); }
.eh-mt-media.eh-film-slot { width: auto; max-width: calc((100svh - var(--header-h) - var(--film-room)) * 16 / 9); }
.eh-blk--film { scroll-margin-top: var(--header-h); }

/* Film player (src/partials/film.html, js/film.js): poster and round play button; own minimal controls once playing */
.eh-film { position: absolute; inset: 0; background: #000; color: #ecebe6; }
.eh-film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; transition: opacity 400ms ease; }
.eh-film.is-started .eh-film-video { opacity: 1; }
.eh-film-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.eh-film-big { --s: clamp(72px, 7vw, 104px); position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); padding: 0; border-radius: 50%; border: 1px solid rgba(236,235,230,0.6); background: rgba(10,10,9,0.28); color: #ecebe6; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; transition: transform .4s var(--reveal-ease), background .3s, color .3s; }
.eh-film-big svg { margin-left: 4px; }
.eh-film-big:hover { background: rgba(236,235,230,0.92); color: #0a0a09; transform: scale(1.06); }
.eh-film.is-started .eh-film-big { display: none; }
.eh-film-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); padding: 36px clamp(12px, 2vw, 24px) clamp(10px, 1.4vw, 18px); background: linear-gradient(0deg, rgba(10,10,9,0.72), rgba(10,10,9,0)); transition: opacity .4s ease; }
.eh-film.is-idle .eh-film-controls { opacity: 0; }
.eh-film.is-idle { cursor: none; }
.eh-film-btn { flex: none; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: inherit; opacity: 0.88; display: grid; place-items: center; cursor: pointer; transition: opacity .2s; }
.eh-film-btn:hover { opacity: 1; }
.eh-film-btn svg { grid-area: 1 / 1; }
.eh-film-time { flex: none; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: calc(12px * var(--eh-fs-sans, 1)); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0.88; }
.eh-film-progress { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; height: 22px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.eh-film-progress::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #ecebe6 var(--p), rgba(236,235,230,0.3) var(--p)); }
.eh-film-progress::-moz-range-track { height: 2px; background: rgba(236,235,230,0.3); }
.eh-film-progress::-moz-range-progress { height: 2px; background: #ecebe6; }
.eh-film-progress::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; margin-top: -4.5px; border-radius: 50%; border: 0; background: #ecebe6; opacity: 0; transition: opacity .2s; }
.eh-film-progress::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; border: 0; background: #ecebe6; opacity: 0; }
.eh-film-controls:hover .eh-film-progress::-webkit-slider-thumb, .eh-film-progress:focus-visible::-webkit-slider-thumb { opacity: 1; }
.eh-film-controls:hover .eh-film-progress::-moz-range-thumb, .eh-film-progress:focus-visible::-moz-range-thumb { opacity: 1; }
.eh-film-progress:focus-visible, .eh-film-btn:focus-visible, .eh-film-big:focus-visible { outline: 1px solid #ecebe6; outline-offset: 3px; }
.eh-film:fullscreen { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .eh-film-video, .eh-film-controls, .eh-film-big { transition: none; } }