/* Five apertures cut into one decoded frame, with one continuous print surface. */
:root {
 --page-bg:#141310; --page-secondary:#25231f; --page-ambient:#82725b; --page-highlight:#777873;
 --page-text:#f1eee7; --page-scheme:dark;
 --sky:var(--page-bg); --navy:var(--page-secondary); --cream:var(--page-text);
 --muted:color-mix(in srgb,var(--page-text) 72%,var(--page-bg));
 --warm:color-mix(in srgb,var(--page-text) 84%,var(--page-highlight));
 --line:color-mix(in srgb,var(--page-text) 22%,transparent);
 color-scheme:var(--page-scheme);
}
html,body { background:var(--page-bg); transition:background-color 1.6s cubic-bezier(.22,1,.36,1),color 1s ease; }
.media-atmosphere { position:fixed; inset:0; z-index:-4; pointer-events:none; overflow:hidden; }
.media-atmosphere__light {
 position:absolute; inset:-15%; opacity:0;
 background:radial-gradient(ellipse at 78% 52%,color-mix(in srgb,var(--media-ambient) 20%,transparent),transparent 64%),radial-gradient(ellipse at 23% 47%,color-mix(in srgb,var(--media-highlight) 18%,transparent),transparent 67%);
 transition:opacity 1.6s ease;
}
.media-atmosphere__light.is-active { opacity:1; }
/* Bars, hero wash, contact and footer share the same environment, not a fixed teal. */
.hero-tone { background:color-mix(in srgb,var(--page-bg) 26%,transparent); transition:background-color 1.6s ease; }
.hero-title { background:color-mix(in srgb,var(--page-bg) 80%,transparent); }
.navigation { background:color-mix(in srgb,var(--page-bg) 90%,transparent); border-color:var(--line); }
.hero,.hero-title,.navigation,.nav-social,.menu-toggle,.lead-media,.film-poster,#contact,#contact .contact-line,.site-footer { transition:color 1s ease,background-color 1.6s cubic-bezier(.22,1,.36,1),border-color 1s ease; }
.nav-links a { color:var(--muted); transition:color 1s ease; }
.nav-links a:hover,.nav-links a[aria-current] { color:var(--page-text); }
.nav-links a::after { transition:background-color 1s ease,opacity .18s; }
.navigation.is-enhanced .nav-links { transition:background-color 1.6s ease,border-color 1s ease; }
#biography:fullscreen,#biography:fullscreen .film-poster { background:var(--page-bg); }
body::after { background-image:url('../assets/textures/paper-grain.svg'),url('../assets/textures/print-fibres.svg'); opacity:.065; }
.content-layout { display:block; padding:0; }
.lead-media { --group-gap:clamp(32px,5vw,80px); position:relative; isolation:isolate; padding:54px 6vw 64px; background:transparent; color:var(--cream); }
.lead-media::after { content:none; }
.lead-media .film-poster { container-type:inline-size; padding:0; background:none; width:100%; min-width:0; max-width:100%; }
.lead-media .media-frame {
 --slice-gap:clamp(12px,1.6vw,24px);
 /* Preserve the former left geometry. Only window 4 expands leftward. */
 --left-width:calc((100cqw - var(--group-gap)) * .6875);
 --right-width:calc((100cqw - var(--group-gap)) * .3125);
 --cut-one:calc(var(--left-width) * .27);
 --cut-two:calc(var(--left-width) * .68);
 --cut-three:var(--left-width);
 --cut-four:calc(var(--left-width) + var(--group-gap) + var(--right-width) * .46);
 width:100%; height:calc(var(--left-width) * .75); min-height:0; max-height:none; aspect-ratio:auto; background:none;
 mask-image:linear-gradient(to right,#000 0 var(--cut-one),transparent var(--cut-one) calc(var(--cut-one) + var(--slice-gap)),#000 calc(var(--cut-one) + var(--slice-gap)) var(--cut-two),transparent var(--cut-two) calc(var(--cut-two) + var(--slice-gap)),#000 calc(var(--cut-two) + var(--slice-gap)) var(--cut-three),transparent var(--cut-three) calc(var(--cut-three) + var(--slice-gap)),#000 calc(var(--cut-three) + var(--slice-gap)) var(--cut-four),transparent var(--cut-four) calc(var(--cut-four) + var(--slice-gap)),#000 calc(var(--cut-four) + var(--slice-gap)) 100%);
}
.lead-media .media-frame video,.lead-media .media-frame canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% center; filter:none; mix-blend-mode:normal; }
.lead-media .media-frame video { opacity:1; transition:opacity .6s cubic-bezier(.22,1,.36,1); }
.lead-media .media-frame video.is-loading { opacity:0; }
.lead-media .media-frame canvas { z-index:1; opacity:1; pointer-events:none; transition:opacity .6s cubic-bezier(.22,1,.36,1); }
.lead-media .media-frame canvas.is-fading { opacity:0; }
.lead-media .media-frame::after { content:none; }
.lead-media .media-caption { display:none; }
#contact { margin:24px var(--gutter) 0; padding-bottom:30px; }
@media(max-width:900px) and (min-width:641px) {
 .lead-media { padding-inline:5vw; --group-gap:28px; }
 .lead-media .media-frame { --slice-gap:12px; }
}
@media(max-width:640px) {
 .lead-media { padding:30px 6vw 36px; }
 .lead-media .media-frame { --slice-gap:6px; --cut-one:18cqw; --cut-two:40cqw; --cut-three:60cqw; --cut-four:80cqw; height:75cqw; }
}
@media(prefers-reduced-motion:reduce) { .lead-media .media-frame video,.lead-media .media-frame canvas { transition:none; } }