/* ==========================================================================
   Sniezhkov — light, Apple-grey portfolio
   Home: showreel scroll scene (reel grows and blurs, About pins over it,
   Work and Contact slide over About). Project pages: poster beside details.
   Breakpoints: 600px (phone), 760px (small tablet), 1000px (desktop).
   ========================================================================== */

/* Inter, served with the theme (OFL, assets/fonts/OFL.txt). Apple devices use
   their own SF first and never download it. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--bg: #f5f5f7;            /* Apple page grey */
	--surface: #ffffff;
	--fill: #e8e8ed;          /* controls, segmented track */
	--line: #d2d2d7;
	--text: #1d1d1f;
	--text-2: #6e6e73;
	--text-3: #86868b;
	--link: #0066cc;
	--red: #d70015;           /* Apple's accessible system red */
	--blue: #0071e3;
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--wrap: 1100px;
	--header-h: 60px;
	--sbw: 0px;               /* scrollbar width, set by main.js; keeps full-bleed blocks aligned */
	--gutter: clamp(20px, 5vw, 44px);
	--radius-lg: 28px;
	--radius: 18px;
	--radius-sm: 12px;
	--pill: 980px;            /* fully rounded ends */
	--fill-hover: #dcdce1;
	--text-hover: #424245;
	--ease: cubic-bezier(0.28, 0.11, 0.32, 1);   /* Apple's standard curve */
	--shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 18px 40px rgba(0, 0, 0, 0.08);
	--shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.06), 0 28px 60px rgba(0, 0, 0, 0.14);
	color-scheme: light;
}
@media (min-width: 1600px) { :root { --wrap: 1240px; } }

*, *::before, *::after { box-sizing: border-box; }

/* The scrollbar's room stays when an overlay locks the page, so nothing shifts. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 17px/1.47 var(--font);
	letter-spacing: -0.022em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: rgba(0, 113, 227, 0.2); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }

.screen-reader-text, .hp {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--text); color: #fff; }
.skip-link:focus { left: 8px; }
/* A section focused by a link (main.js) needs no ring around the whole of it. */
[tabindex="-1"]:focus { outline: none; }

/* Page transitions ------------------------------------------------------ */
/* Moving between pages, the new page slides up over the current one while
   the header stays put. Browsers without cross-document view transitions
   simply load the page. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 0.7s var(--ease) both vt-sink; }
::view-transition-new(root) { animation: 0.7s var(--ease) both vt-rise; box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.14); }
@keyframes vt-rise { from { transform: translateY(100%); } }
@keyframes vt-sink { to { filter: brightness(0.94); } }
/* On the home page, the name glides between the reel and the header at the same pace. */
::view-transition-group(*) { animation-duration: 0.7s; animation-timing-function: var(--ease); }
/* The name stays put between pages (on the home page, the docked title stands in for it). */
.brand { view-transition-name: snz-brand; }
::view-transition-group(snz-brand), ::view-transition-new(snz-brand) { animation: none; }
::view-transition-old(snz-brand) { display: none; }
::view-transition-old(snz-brand):only-child { display: block; } /* no name on the next page: fade it out */
/* Back: the page slides away to the right, revealing the one before.
   Forward: it comes back in from the right. */
.vt-prev::view-transition-old(root) { z-index: 1; animation: 0.7s var(--ease) both vt-to-right; box-shadow: -24px 0 60px rgba(0, 0, 0, 0.14); }
.vt-prev::view-transition-new(root) { animation: 0.7s var(--ease) both vt-lift; box-shadow: none; }
.vt-next::view-transition-old(root) { animation: 0.7s var(--ease) both vt-sink; }
.vt-next::view-transition-new(root) { animation: 0.7s var(--ease) both vt-from-right; box-shadow: -24px 0 60px rgba(0, 0, 0, 0.14); }
@keyframes vt-to-right { to { transform: translateX(100%); } }
@keyframes vt-from-right { from { transform: translateX(100%); } }
@keyframes vt-lift { from { filter: brightness(0.94); } }
/* The name in the header, from any other page: the page drops away down the
   window over the home page's zoomed reel (main.js moves the name with its
   top edge, at the same pace). */
.vt-down::view-transition-old(root) { z-index: 1; animation: 0.95s cubic-bezier(0.45, 0, 0.55, 1) both vt-to-bottom; box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.14); }
.vt-down::view-transition-new(root) { animation: none; box-shadow: none; }
@keyframes vt-to-bottom { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}
/* Arriving via a transition or a #section link: skip the intro and reveal animations. */
.no-intro .intro, .no-intro .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.no-intro .scene-title { animation: none; }

/* Motion ---------------------------------------------------------------- */
/* Intro: plays once on load. Reveal: plays when scrolled into view. */
.js .intro { opacity: 0; transform: translateY(18px); animation: rise 1.2s var(--ease) forwards; }
.js .intro:nth-child(2) { animation-delay: 0.12s; }
.js .intro:nth-child(3) { animation-delay: 0.24s; }
.js .intro:nth-child(4) { animation-delay: 0.36s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js .intro, .js .reveal { opacity: 1; transform: none; animation: none; transition: none; }
}

/* Shared ---------------------------------------------------------------- */
.section, .section--narrow { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: clamp(72px, 11vw, 140px); }
/* Breaks out of the centred column to the window edges. */
.full-bleed { width: calc(100vw - var(--sbw)); margin-left: calc(50% - 50vw + var(--sbw) / 2); }
/* Small uppercase labels: About, facts, credits. */
.label { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.section__intro { margin-bottom: clamp(28px, 4vw, 48px); }
.section__title { margin: 0; font-size: clamp(40px, 6vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.section__lede { margin: 12px 0 0; max-width: 40ch; font-size: clamp(19px, 2vw, 24px); line-height: 1.3; font-weight: 500; color: var(--text-2); letter-spacing: -0.02em; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 11px 22px; border-radius: var(--pill);
	background: var(--fill); color: var(--text);
	font-size: 17px; font-weight: 400; line-height: 1;
	transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { background: var(--fill-hover); }
.btn:active { transform: scale(0.97); }
.btn--solid { background: var(--text); color: #fff; }
.btn--solid:hover { background: var(--text-hover); }

/* Header: Apple-style translucent bar ------------------------------------ */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 50;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	height: var(--header-h); padding: 0 var(--gutter);
	background: rgba(245, 245, 247, 0.72);
	backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
	transition: box-shadow 0.4s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header::before { content: ""; }  /* keeps the nav on the right */
.brand {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: flex; flex-direction: column; align-items: center; gap: 5px; text-transform: uppercase; line-height: 1;
}
.brand__name { font-size: 17px; font-weight: 600; letter-spacing: 0.14em; white-space: nowrap; }
.brand__role { font-size: 9px; font-weight: 600; letter-spacing: 0.62em; margin-right: -0.62em; color: var(--red); }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav__list a { display: block; padding: 14px 0; margin: -14px 0; font-size: 13px; color: var(--text); opacity: 0.8; transition: opacity 0.3s; }  /* 44px to tap, same look */
.nav__list a:hover { opacity: 1; }
.nav__reel { font-size: 12px; padding: 5px 12px; border-radius: var(--pill); background: var(--text); color: #fff; transition: background 0.3s; }
.nav__reel:hover { background: var(--text-hover); }

.nav-toggle { display: none; width: 44px; height: 44px; margin-right: -6px; position: relative; z-index: 60; }
.nav-toggle__bar { position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 2px; background: var(--text); transition: transform 0.4s var(--ease), top 0.4s var(--ease); }
.nav-toggle__bar:nth-child(2) { top: 18px; }
.nav-toggle__bar:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { top: 22px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 760px) {
	.nav-toggle { display: block; }
	/* The header's blur makes the header the panel's containing block, so the
	   panel takes the window's height itself rather than inset: 0. */
	.nav {
		position: fixed; inset: 0 0 auto; height: 100vh; height: 100dvh; overflow-y: auto; z-index: 55; flex-direction: column; align-items: flex-start; justify-content: flex-start;
		gap: 28px; padding: 88px 36px;
		background: var(--bg); /* solid: inside the header's blur, a blur of its own would see nothing */
		opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
	}
	.nav.is-open { opacity: 1; visibility: visible; }
	/* Open, the panel covers the home page's travelling name too. */
	.has-nav-open .site-header { z-index: 70; }
	.nav__list { flex-direction: column; gap: 10px; }
	.nav__list a { padding: 4px 0; margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; opacity: 1; }
	.nav__reel { font-size: 15px; padding: 10px 18px; }
}

/* Hero (sketch 1) ------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: calc(var(--header-h) + 12px) var(--gutter) 16px;
	text-align: center;
}
/* Name, reel and title share one width. The page's white frames the reel at
   --matte (2.39:1) like a matte box; the reel itself keeps its own shape (--ar)
   behind it. The reel is as large as fits under the header with the name and
   title once the matte has opened, up to 30% wider than the content column. */
.hero__stack {
	--ar: 1.7778;
	--matte: 2.39;
	--gap: clamp(10px, 1.4vw, 18px);
	--role-size: clamp(10px, 1.1vw, 14px);
	position: relative;
	display: flex; flex-direction: column; gap: var(--gap);
	width: min(100%, calc(var(--wrap) * 1.3), calc((100svh - var(--header-h) - 110px) * var(--ar)));
}
.hero__name { margin: 0; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

.hero__frame { position: relative; width: 100%; aspect-ratio: var(--matte); isolation: isolate; }
/* The reel at its own shape, centred on the frame and cropped to it; main.js
   opens the crop as the scene starts. A reel wider than the matte shows whole. */
.hero__media {
	position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: var(--ar); translate: 0 -50%;
	overflow: hidden; background: #000;
	clip-path: inset(max(0px, calc(50% - 50% * var(--ar) / var(--matte))) 0);
}
.js .hero__frame.intro { transform: scale(0.97); animation-name: settle; animation-duration: 1.6s; }
@keyframes settle { to { opacity: 1; transform: none; } }
/* The opening (main.js): the matte shut, the name waits in the middle with a
   wheel under it while the reel loads, then the matte opens to 2.39. It
   replaces the intro above. */
.hero.has-unveil .intro { opacity: 1; transform: none; animation: none; }
.hero__wait {
	position: absolute; left: 50%; top: var(--wait-top, 58%); z-index: 2;
	width: 22px; height: 22px; margin-left: -11px; box-sizing: border-box;
	border: 1.5px solid rgba(29, 29, 31, 0.12); border-top-color: rgba(29, 29, 31, 0.55); border-radius: 50%;
	opacity: 0; transition: opacity 0.4s var(--ease);
	animation: spin 0.9s linear infinite; pointer-events: none;
}
.hero__wait.is-on { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__video, .hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.hero__slide.is-active { opacity: 1; }

.hero__play {
	position: absolute; right: 14px; bottom: 14px; z-index: 2;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 16px 8px 8px; border-radius: var(--pill);
	background: rgba(255, 255, 255, 0.78); color: var(--text);
	backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
	font-size: 14px; font-weight: 500;
	opacity: var(--shown, 1);
	transition: transform 0.4s var(--ease), background 0.3s;
}
.hero__play:hover { transform: scale(1.04); background: rgba(255, 255, 255, 0.92); }
.hero__play-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--text); }
.hero__play-icon::before { content: ""; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }

/* Letters spread edge to edge under the reel. */
.hero__role {
	display: flex; justify-content: space-between; margin: 0;
	font-size: var(--role-size, 14px); font-weight: 600; line-height: 1; text-transform: uppercase;
	color: var(--red);
}
/* Scroll arrow, sitting on the reel. */
.hero__chevron {
	position: absolute; left: 50%; bottom: calc(var(--role-size) + var(--gap) + 6px); z-index: 2; margin-left: -22px;
	display: grid; place-items: center; width: 44px; height: 44px;
	color: rgba(255, 255, 255, 0.85); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35)) opacity(var(--fade, 1));
	transition: color 0.3s;
}
.hero__chevron:hover { color: #fff; }
.hero__chevron svg { animation: bob 2.6s var(--ease) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero__chevron svg { animation: none; } }
/* Faded out as the matte opens (main.js): gone, still and not in the way. */
.hero__chevron.is-gone { visibility: hidden; }
.hero__chevron.is-gone svg { animation: none; }

/* Scroll scene: the hero sticks while the reel grows to full screen and a
   blur veil fades in over it, then About slides up over it. The name and
   title draw together, ride up on About and stay docked in the header.
   main.js adds .is-fx and drives the values. */
.scene__spacer, .hero__veil { display: none; }
.scene.is-fx { position: relative; }
.scene.is-fx .hero {
	position: sticky; top: 0; z-index: 0;
	height: 100vh; min-height: 0; overflow: hidden;
	/* As tall as the window with a phone's toolbar tucked away, so the reel
	   and the blur still reach the bottom then; the name and the frame stay
	   centred in the window as it is with the toolbar showing. */
	height: 100lvh; padding-bottom: calc(16px + 100lvh - 100svh);
}
/* main.js keeps the scene in place itself when the window changes size. */
.has-scene-title { overflow-anchor: none; }
.scene.is-fx .scene__spacer { display: block; height: 70vh; }
.scene.is-fx .hero__frame { will-change: translate, scale; }
.scene.is-fx .hero__veil {
	display: block; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
}
.scene.is-fx .hero__stack > .hero__name, .scene.is-fx .hero__stack > .hero__role { opacity: 0 !important; } /* still read out as the page's heading; !important beats the intro animation */

/* The travelling name + title. Sticky between the header (top) and the middle
   of the window (bottom), so the browser moves it with the page: no lag. */
.scene-title {
	position: sticky; z-index: 60;
	top: var(--dock-top, 8px); bottom: var(--title-bottom, 40vh);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	width: max-content; max-width: 100%; margin: 0 auto;
	transform-origin: 50% 0; will-change: transform;
	animation: title-in 1.2s var(--ease) both;
}
@keyframes title-in { from { opacity: 0; } }
.scene-title > * { will-change: transform; transition: color 0.5s var(--ease), text-shadow 0.5s var(--ease); }
.scene-title .hero__role { width: var(--role-w, auto); transform-origin: 50% 0; }
.scene-title.is-light .hero__name { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }
.scene-title.is-carried > * { transition-duration: 0s; }
.has-scene-title .site-header .brand { visibility: hidden; view-transition-name: none; }
.scene.is-fx .about {
	position: sticky; z-index: 1;
	min-height: 100vh; min-height: 100svh;
	padding-top: var(--title-space, 160px); padding-bottom: clamp(32px, 5vh, 72px);
	display: flex; flex-direction: column;
	background: rgba(245, 245, 247, 0.3);
}
/* The frame sits in the middle of the pinned About screen, the quote at its bottom. */
.scene.is-fx .about__row { width: 100%; padding-top: 0; margin-block: auto; }
.scene.is-fx .about__quote.section { width: 100%; margin-top: 0; padding-top: clamp(28px, 4.5vh, 56px); }
.scene.is-fx .about__quote figcaption { color: var(--text); }
/* Work and Contact slide up over the pinned About, on their own full-width background. */
.scene.is-fx > .work, .scene.is-fx > .contact { position: relative; z-index: 2; }
.scene.is-fx > .work::before, .scene.is-fx > .contact::before {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
	left: calc(50% - 50vw + var(--sbw) / 2); right: calc(50% - 50vw + var(--sbw) / 2);
	background: var(--bg);
}
.scene.is-fx > .work::before { box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.12); }
/* Contact fills the window, so landing on it shows none of Work above. */
.scene.is-fx > .contact { min-height: 100vh; min-height: 100svh; padding-bottom: clamp(72px, 11vw, 140px); }
.scene.is-fx .about__body { color: var(--text); }
/* Over the blurred reel the text sits on a pale panel the photos fade into. */
.scene.is-fx .about__frame { background: rgba(245, 245, 247, 0.8); }
.scene.is-fx .about__label { color: var(--text); }

/* About: photo | text | photo inside a thin 2.39:1 frame, quote underneath -- */
.about__row { display: flex; justify-content: center; }
/* 30% larger than the text column (or than what fits under the docked title
   on short screens), never wider than the window, never so small the text
   cannot fit. The picture area inside the grey border is 2.39:1, and the
   text scales with it (cqw). */
.about__frame {
	--frame-b: clamp(6px, 0.6vw, 12px);
	container-type: inline-size;
	display: grid; grid-template-columns: 26% minmax(0, 1fr) 26%; align-items: center;
	box-sizing: content-box; flex: none;
	width: min(100vw - var(--sbw) - 32px - 2 * var(--frame-b), 1.3 * min(var(--wrap), max(860px, (100vh - var(--title-space, 160px) - 240px) * 2.39)));
	aspect-ratio: 2.39; overflow: hidden;
	border: var(--frame-b) solid var(--bg);
}
.about__photo { margin: 0; height: 100%; }
.about__photo img, .about__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.about__placeholder { background: var(--fill); }
/* The edges facing the text fade out. */
.about__photo--left > * { -webkit-mask-image: linear-gradient(to right, #000 50%, transparent); mask-image: linear-gradient(to right, #000 50%, transparent); }
.about__photo--right > * { -webkit-mask-image: linear-gradient(to left, #000 50%, transparent); mask-image: linear-gradient(to left, #000 50%, transparent); }
.about__text { padding: 0 clamp(12px, 2.6cqw, 48px); }
.about__label { font-size: clamp(12px, 1.1cqw, 16px); }
.about__title { margin: 0 0 clamp(10px, 1.4cqw, 24px); font-size: clamp(22px, 3cqw, 52px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.about__body { font-size: clamp(14px, 1.5cqw, 22px); line-height: 1.5; color: var(--text-2); }
.about__body p { margin: 0 0 1em; }
.about__body p:last-child { margin-bottom: 0; }
.about__quote.section { margin-top: clamp(40px, 6vh, 72px); padding-top: 0; text-align: center; }
.about__quote blockquote { margin: 0 auto; max-width: 30em; }
.about__quote p { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.about__quote figcaption { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
/* Phones and portrait tablets: the two photos side by side, fading into each
   other, text under them. Phones on their side keep photo | text | photo. */
@media (max-width: 760px) and (min-height: 501px), (max-width: 1000px) and (orientation: portrait) {
	.about__frame { grid-template-columns: 1fr 1fr; grid-template-areas: "left right" "text text"; box-sizing: border-box; width: 100%; aspect-ratio: auto; }
	.about__photo { height: auto; aspect-ratio: 2 / 3; }
	.about__photo--left { grid-area: left; }
	.about__photo--right { grid-area: right; }
	.about__text { grid-area: text; padding: 20px 18px 24px; }
	.about__title { font-size: 26px; }
	.about__body { font-size: 16px; }
	.about__photo--left > * { -webkit-mask-image: linear-gradient(to right, #000 60%, transparent); mask-image: linear-gradient(to right, #000 60%, transparent); }
	.about__photo--right > * { -webkit-mask-image: linear-gradient(to left, #000 60%, transparent); mask-image: linear-gradient(to left, #000 60%, transparent); }
}

/* Short landscape windows: the frame grows as tall as the text needs. */
@media (orientation: landscape) and (max-height: 500px) {
	.about__frame { aspect-ratio: auto; }
	.about__text { padding-block: 18px; }
}

/* Work: segmented control + panels (sketch 3) --------------------------- */
/* No heading: the control leads, close under the header, and pins there
   while a panel taller than the window scrolls under it (main.js adds
   .is-pinnable). */
.work.section { padding-top: calc(var(--header-h) + clamp(28px, 4vw, 48px)); }
.work .segmented { z-index: 3; }
.work .segmented.is-pinnable {
	position: sticky; top: calc(var(--header-h) + 12px);
	background: rgba(232, 232, 237, 0.82);
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	transition: box-shadow 0.4s var(--ease), opacity 1s var(--ease), transform 1s var(--ease);
}
.work .segmented.is-stuck { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.segmented {
	position: relative; display: flex; width: fit-content; max-width: 100%;
	margin: 0 auto clamp(40px, 6vw, 72px); padding: 4px; border-radius: var(--pill);
	background: var(--fill);
}
.segmented__thumb {
	position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0;
	border-radius: var(--pill); background: var(--surface);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
	transition: left 0.5s var(--ease), width 0.5s var(--ease);
}
.segmented__item {
	position: relative; z-index: 1; padding: 9px clamp(14px, 3vw, 26px); border-radius: var(--pill);
	font-size: clamp(14px, 1.5vw, 15px); font-weight: 500; color: var(--text-2); white-space: nowrap;
	transition: color 0.3s;
}
.segmented__item[aria-selected="true"] { color: var(--text); }
.segmented__item:hover { color: var(--text); }
html:not(.js) .segmented__item[aria-selected="true"] { background: var(--surface); }

.tab-panel.is-active { animation: fade-in 0.7s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.posters {
	list-style: none; margin: 0; padding: 0; align-items: start;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 40vw), 240px)); justify-content: center;
	gap: 40px clamp(16px, 2.4vw, 28px);
}
@media (max-width: 600px) {
	.posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.posters > :only-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
.poster a { display: flex; flex-direction: column; gap: 4px; }
.poster__img {
	margin-bottom: 14px; overflow: hidden; aspect-ratio: 2 / 3;
	background: #fff; box-shadow: var(--shadow);
	transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.poster__img img { width: 100%; height: 100%; object-fit: cover; }
/* A poster of another shape (or a still standing in for one) sits on white
   inside the same frame, so every card, title and line below lines up. */
.poster__img.is-matted { padding: 9%; }
.poster__img.is-matted img { object-fit: contain; }
/* Music Video, Corporate and Ads: 16:9 frames on wider cards, one per row on phones. */
.posters--wide { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 400px)); }
.posters--wide .poster__img { aspect-ratio: 16 / 9; }
.posters--wide .poster__img.is-matted { padding: 5%; }
@media (max-width: 600px) {
	.posters--wide { grid-template-columns: minmax(0, 1fr); }
	.posters--wide > :only-child { justify-self: stretch; width: auto; }
}
/* Projects come grouped by category, each under a small label. */
.posters-group + .posters-group { margin-top: clamp(56px, 7vw, 88px); }
.posters-group__title { margin: 0 0 clamp(20px, 2.6vw, 28px); text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }
.poster a:hover .poster__img { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-hover); }
.poster__title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.poster__meta { margin: 0; font-size: 13px; color: var(--text-2); letter-spacing: -0.01em; }

/* Stills and photographs run edge to edge of the window, two large columns. */
.stills-grid { columns: 2 520px; column-gap: 6px; padding: 0 6px; }
.tile {
	display: block; margin: 0 0 6px; break-inside: avoid;
	aspect-ratio: var(--ar); overflow: hidden; background: var(--fill);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tile:hover img { transform: scale(1.04); }
@media (max-width: 600px) { .stills-grid { columns: 1; padding: 0; } .tile { margin-bottom: 4px; } }

.empty { margin: 0; padding: 80px 20px; text-align: center; color: var(--text-2); font-size: 19px; border-radius: var(--radius-lg); background: var(--surface); }

/* Contact --------------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: stretch; }
.contact__details { display: flex; flex-direction: column; gap: 20px; }
.contact__email { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--link); word-break: break-word; }
.contact__email:hover { text-decoration: underline; }
.contact__phone, .contact__loc { margin: 0; font-size: 17px; color: var(--text-2); }

.socials { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.socials a { color: var(--link); }
.socials a:hover { text-decoration: underline; }

.plaque {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: var(--surface); border-radius: var(--radius); padding: 18px 22px;
}
.plaque__name { margin: 0; display: flex; flex-direction: column; gap: 5px; font-size: 26px; line-height: 1; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.plaque__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.32em; }
.plaque--rental .plaque__tag { color: var(--red); }
.plaque--films .plaque__tag { color: var(--blue); }
.plaque__soon {
	flex: none; padding: 7px 12px; border-radius: var(--pill); background: var(--fill);
	font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2);
}

.contact__form { display: grid; gap: 16px; align-content: start; background: var(--surface); border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 40px); }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 500; color: var(--text-2); letter-spacing: -0.01em; }
.field input, .field textarea {
	width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
	border: 1px solid var(--line); background: var(--surface); color: var(--text);
	font: 400 17px/1.35 var(--font); letter-spacing: -0.02em;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18); }
.field input::placeholder { color: var(--text-3); }
.contact__form .btn { justify-self: start; margin-top: 6px; }
.form-notice { margin: 0; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 15px; }
.form-notice--ok { background: #e3f4e6; color: #0f5a1f; }
.form-notice--err { background: #fde8e7; color: #8a1c14; }

@media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } }

/* Footer ---------------------------------------------------------------- */
.site-footer { margin-top: clamp(72px, 11vw, 140px); border-top: 1px solid var(--line); }
.site-footer__inner {
	max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 22px var(--gutter);
	display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
	font-size: 12px; color: var(--text-2); letter-spacing: -0.01em;
}
.site-footer p { margin: 0; }
.site-footer .socials { font-size: 12px; }
.to-top { display: inline-block; padding: 13px 0; margin: -13px 0; }
.to-top:hover { color: var(--text); }

/* Single film: text column on the left, poster on the right ------------ */
.film-top {
	display: grid; grid-template-columns: var(--poster-w, minmax(0, 400px)) minmax(0, 1fr);
	grid-template-areas: "poster head" "poster info";
	grid-template-rows: auto 1fr;
	gap: 28px clamp(32px, 5vw, 72px); align-items: start;
	padding-top: calc(var(--header-h) + 40px);
}
.film-top--no-poster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "info"; }
.film-head { grid-area: head; }
/* main.js sizes the poster so its height matches the text beside it. */
.film-top__poster { grid-area: poster; margin: 0; }
.film-top__poster img { width: 100%; box-shadow: var(--shadow); }
.film-top__info { grid-area: info; display: flex; flex-direction: column; gap: 28px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; margin: -12px 0 10px; font-size: 14px; color: var(--link); }
.back-link:hover { text-decoration: underline; }
.film-head__title { margin: 0; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.film-head__tagline { margin: 12px 0 0; font-size: clamp(19px, 2vw, 24px); font-weight: 500; color: var(--text-2); letter-spacing: -0.02em; }
.laurels { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.laurel { padding: 7px 14px; border-radius: var(--pill); background: var(--fill); color: var(--text-2); font-size: 13px; font-weight: 500; }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px 28px; margin: 0; }
.facts div { padding-top: 14px; border-top: 1px solid var(--line); }
.facts dt { margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.prose { font-size: 19px; line-height: 1.5; color: var(--text-2); max-width: 62ch; }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--link); }
.film-credits ul { list-style: none; margin: 0; padding: 0; }
.film-credits li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.film-credits li span:first-child { color: var(--text-2); }
@media (max-width: 760px) {
	.film-top { grid-template-columns: 1fr !important; grid-template-areas: "head" "poster" "info"; padding-top: calc(var(--header-h) + 24px); }
	.film-top__poster { max-width: 320px; }
	.film-credits li { grid-template-columns: 1fr; gap: 2px; }
}

/* The video: its cover and a play button until played, then the player. */
.film-video { margin-top: 20px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }
.video-frame__play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-frame__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), filter 0.4s var(--ease); }
.video-frame__cover.is-letterboxed { object-fit: contain; }
.video-frame__icon {
	position: relative; width: 76px; height: 76px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.82); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
	backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
	transition: transform 0.4s var(--ease), background 0.3s;
}
.video-frame__icon::before {
	content: ""; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -6px;
	border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--text);
}
.video-frame__play:hover .video-frame__cover { transform: scale(1.02); filter: brightness(0.9); }
.video-frame__play:hover .video-frame__icon { transform: scale(1.06); background: #fff; }
.video-frame__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
@media (max-width: 600px) { .video-frame__icon { width: 60px; height: 60px; } }

.film-stills { margin-top: clamp(64px, 9vw, 110px); }
.film-stills__title { margin: 0 0 28px; font-size: clamp(32px, 4.4vw, 48px); font-weight: 600; letter-spacing: -0.03em; }
.stills-grid--film { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stills-grid--film .tile { margin: 0; }
.tile--wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .stills-grid--film { grid-template-columns: 1fr; gap: 4px; } }

.next-film {
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center;
	margin-top: clamp(64px, 9vw, 110px); overflow: hidden;
	background: var(--surface); transition: box-shadow 0.6s var(--ease), transform 0.6s var(--ease);
}
.next-film:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.next-film__media { overflow: hidden; }
.next-film__media img { width: 100%; transition: transform 1.2s var(--ease); }
.next-film:hover .next-film__media img { transform: scale(1.04); }
.next-film__text { display: flex; flex-direction: column; gap: 6px; padding: 28px clamp(24px, 3.4vw, 44px); }
.next-film__label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.next-film__title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.next-film__title::after { content: " ›"; color: var(--link); }
@media (max-width: 760px) { .next-film { grid-template-columns: 1fr; } }

/* Pages ----------------------------------------------------------------- */
.page-spacer { height: var(--header-h); }
.page-body { padding-top: calc(var(--header-h) + 60px); }
.page-title { margin: 0 0 32px; font-size: clamp(40px, 6vw, 72px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.page-body__cover { margin: 0 0 32px; overflow: hidden; }
.post-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius-lg); }
.post-list a { display: flex; justify-content: space-between; gap: 20px; padding: 20px 28px; border-bottom: 1px solid var(--line); }
.post-list li:last-child a { border-bottom: 0; }
.post-list__title { font-size: 19px; font-weight: 600; }
.post-list time { color: var(--text-2); font-size: 14px; }
.not-found { min-height: 70vh; }

/* Lightbox & reel ------------------------------------------------------- */
.lightbox, .reel-modal {
	position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
	padding: 64px clamp(12px, 6vw, 90px);
	opacity: 0; transition: opacity 0.45s var(--ease);
}
.lightbox {
	background: rgba(245, 245, 247, 0.9);
	backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px);
}
.reel-modal { background: rgba(0, 0, 0, 0.92); }
.lightbox[hidden], .reel-modal[hidden] { display: none; }
.lightbox.is-open, .reel-modal.is-open { opacity: 1; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 100%; transform: scale(0.97); transition: transform 0.6s var(--ease); }
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__figure img { max-height: calc(100vh - 150px); width: auto; object-fit: contain; box-shadow: var(--shadow-hover); }
.lightbox__figure figcaption { font-size: 14px; color: var(--text-2); }
.lightbox__close {
	position: absolute; top: 16px; right: 16px; display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%; background: var(--fill); color: var(--text-2);
	font-size: 22px; line-height: 1; transition: background 0.3s, color 0.3s;
}
.lightbox__close:hover { background: var(--fill-hover); color: var(--text); }
.reel-modal .lightbox__close { background: rgba(255, 255, 255, 0.16); color: #fff; }
.lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--fill); color: var(--text-2); font-size: 18px; transition: background 0.3s, color 0.3s;
}
.lightbox__nav:hover { background: var(--fill-hover); color: var(--text); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
@media (max-width: 600px) { .lightbox__nav { top: auto; bottom: 14px; transform: none; } }
@media (max-height: 500px) {
	.lightbox { padding: 12px 64px; }
	.lightbox__figure { gap: 8px; }
	.lightbox__figure img { max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
}
.reel-modal__frame { position: relative; width: min(100%, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.reel-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.is-locked { overflow: hidden; }
.eyebrow { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: -0.01em; }