/* Luminous contemporary palette: citron, ultramarine, clear ivory and apricot. */
:root{--brand-ink:#182444;--brand-secondary:#475875;--brand-muted:#64758c;--brand-line:#34518a30;--studio-ink:#182444;--studio-paper:#fcfefd;--studio-nude:#eaf5f6;--studio-lavender:#dfe9ff;--studio-rose:#ffe6d9}
body.page-mode{background:#fcfefd}
body.page-mode .topbar{background:#fcfefdf2;border-bottom:1px solid #51759b2b}
body.page-mode .topbar .wordmark-name{font-family:var(--font-display);font-size:1.65rem;font-weight:500}
body.page-mode .btn-solid{background:#2542a6;border-color:#2542a6}
body.page-mode .btn{font-weight:500}
.premium-portfolio .folio-intro{--chapter-colour:#e3ff9a;border-bottom-color:#709b3a50}
.premium-portfolio .folio-intro h2,.editorial-portfolio #connect h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.035em}
.editorial-portfolio #about{--chapter-colour:#ffe6d9}
.editorial-portfolio #connect{--chapter-colour:#fff0d1;border-top-color:#c5a16e50}
.premium-portfolio #the-library{background:#233faf;border-color:#5873c3;border-radius:24px}
.premium-portfolio #the-library .folio-overline{letter-spacing:.12em}
.editorial-portfolio #expertise,.editorial-portfolio #expertise .cinema-story{background:#e3efff}
#expertise .cinema-step-card{background:#ffffff!important;border-radius:20px;border-color:#809ccc55}
#expertise .cinema-scroll-step:nth-child(2) .cinema-step-card{background:#eeffd4!important}
#expertise .cinema-scroll-step:nth-child(3) .cinema-step-card{background:#d9f3f4!important}
#expertise .cinema-pose-controls button{border-radius:999px;background:#ffffff;border-color:#6e89b870}
#expertise .cinema-pose-controls button[aria-pressed=true]{background:#2542a6;color:#fffaf6}
.motion-project{border-radius:22px;overflow:hidden}
.page:where([data-page]:not([data-page=home]):not([data-page=project])){--studio-head:#e3ff9a;--studio-wash:#fcfefd}
.page:is([data-page=about],[data-page=events]){--studio-head:#ffe6d9;--studio-wash:#fcfefd}
.page:is([data-page=library],[data-page=lab],[data-page=making-of]){--studio-head:#dfe9ff;--studio-wash:#fcfefd}
.page[data-page]:not([data-page=home]):not([data-page=project]) .page-head{border-bottom-color:#5273a040}
.page[data-page] .page-head h1{font-weight:400;letter-spacing:-.04em}
.page[data-page] .suite-head-note,.page[data-page] .library-panel{border-radius:18px}
body.page-mode .footer{background:#182444;box-shadow:inset 0 2px 0 #c8ff2e}
.motion-reel-enabled .motion-chapters button{border-radius:999px}
.cinema-journey .green-transit.metro-scroll-region{height:340svh}
.metro-finish20 .metro-ticket-body{display:block}
.cinema-journey .metro-finish20 .green-transit-inner{width:425px;border-radius:18px;bottom:131px;padding:22px 25px 18px;background:#fffaf5f2}
.cinema-journey .metro-finish20 .green-transit-inner h2{font-size:34px;line-height:1.1;letter-spacing:-.025em}
body.page-mode #main .metro-finish20 .metro-ticket-copy p{font-size:16px;line-height:1.55;max-width:none}
.cinema-journey .metro-finish20 .green-destination,.metro-finish20 [data-metro-step]{font-size:12px}
.cinema-journey .metro-finish20 .metro-stations{width:425px;border-radius:18px;bottom:24px}
.metro-finish20 .metro-stations button{font-size:14px;line-height:1.3;min-height:62px;flex-direction:column;gap:5px}
.metro-finish20 .metro-stations button .metro-stop-number{font-size:12px}
.metro-finish20 .metro-ticket-actions{flex-wrap:wrap;gap:4px 14px;margin-top:16px}
.cinema-journey .metro-finish20 .green-project-link,.metro-finish20 .metro-prototype-link{font-size:14px;min-height:44px}
.cinema-journey .metro-finish20 .green-project-link{padding:10px 17px;border:0;border-radius:999px;background:#d5f482;color:#253b25}
body.page-mode #main .metro-finish20 .metro-concept-note{font-size:12px;line-height:1.5}
.metro-finish20 .metro-route-sign,.cinema-journey .metro-finish20 .train-skip{border-radius:999px}
.metro-finish20 .metro-route-sign>div>span{font-size:12px;letter-spacing:.07em}
body.page-mode #main .metro-finish20 .metro-route-sign p{font-size:14px}
.metro-finish20 .metro-travel-note{font-size:14px;border-radius:999px}
[dir=rtl] .metro-finish20 :is(button,p,a,span){letter-spacing:0}
[dir=rtl] .metro-finish20 .metro-stations button{font-family:Arial,sans-serif;font-size:14px;line-height:1.4}
[dir=rtl] .metro-finish20 .metro-route-sign p{font-size:14px}
.cinema-portrait-timeline{display:contents}
@media(min-width:901px) and (min-height:640px){
 .cinema-sequences .cinema-story-stage{position:sticky;top:var(--motion-index-height,88px);height:var(--stage-height);margin-bottom:calc(-1 * var(--stage-height))}
 .cinema-sequences .cinema-person{left:6%;bottom:4.5rem;height:calc(100% - 6.5rem);width:42%;max-width:600px}
 .cinema-sequences .cinema-pose-controls{left:6%;width:42%;bottom:1rem}
 .cinema-sequences .cinema-handwritten{display:none}
 .cinema-sequences .cinema-scroll-step{min-height:125svh;align-items:center;padding:4rem 0}
 .cinema-sequences .cinema-step-card{width:47%;min-height:0}
}
@media(max-width:900px),(max-height:639px){
 .cinema-portrait-timeline{display:block;height:auto;position:relative}
 .cinema-sequences .cinema-portrait-timeline{height:190svh}
 .cinema-sequences .cinema-story-stage{position:sticky;top:var(--motion-index-height,88px);height:min(630px,calc(100svh - var(--motion-index-height,88px)));margin-bottom:0}
 .cinema-sequences .cinema-person{left:10%;width:80%;max-width:none;bottom:4.4rem;height:calc(100% - 8rem)}
 .cinema-sequences .cinema-pose-controls{left:0;width:100%;bottom:1rem}
 .cinema-sequences .cinema-handwritten{display:none}
 .cinema-sequences .cinema-scroll-track{padding:0 5.3% 2rem}
 .cinema-sequences .cinema-scroll-step{min-height:0;padding:0 0 1.2rem}
 .cinema-sequences .cinema-step-card{width:100%;padding:1.6rem}
}
@media(max-width:800px){
 .cinema-journey .green-transit.metro-scroll-region{height:310svh}
 .cinema-journey .metro-finish20 .green-transit-inner{width:calc(100% - 36px);max-width:380px;bottom:125px;padding:17px 19px 14px}
 .cinema-journey .metro-finish20 .metro-stations{width:calc(100% - 36px);max-width:380px;bottom:18px!important}
 .cinema-journey .metro-finish20 .green-transit-inner h2{font-size:29px}
 body.page-mode #main .metro-finish20 .metro-ticket-copy p{font-size:15px;line-height:1.45}
 .metro-finish20 .metro-ticket-actions{gap:3px;margin-top:9px;align-items:flex-start;flex-direction:column}
 .metro-finish20 .metro-stations button{font-size:13px;min-height:69px;min-width:0}.metro-finish20 .metro-stations button span{font-size:inherit}
 .metro-finish20 .metro-route-sign{max-width:calc(100% - 160px);border-radius:14px}
 .metro-finish20 .metro-route-symbol{display:none}
 .metro-finish20 .metro-route-sign>div>span{font-size:10px}
 body.page-mode #main .metro-finish20 .metro-route-sign p{font-size:12px}
 .cinema-journey .metro-finish20 .train-skip{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .cinema-journey .green-transit.metro-scroll-region{height:auto}
 .cinema-portrait-timeline{height:auto}
 .cinema-story-stage{position:relative!important;top:0!important;margin-bottom:0!important;height:550px!important}
}
.cinema-journey.hero-scroll-enabled .scratch-hero-home.motion-hero{height:max(310svh,1800px)}
@media(min-width:1001px) and (min-height:720px){.motion-reel-enabled .motion-projects{height:calc(310svh + min(680px,100svh - 165px) + 96px)}}
@media(max-width:700px){
 .cinema-journey.hero-scroll-enabled .scratch-hero-home.motion-hero{height:calc(max(1040px,100svh) + 130svh)}
 .premium-portfolio #the-library{border-radius:18px}
 .motion-project{border-radius:16px}
}
@media(prefers-reduced-motion:reduce){
 .cinema-journey.hero-scroll-enabled .scratch-hero-home.motion-hero{height:max(820px,100svh)}
 .motion-reel-enabled .motion-projects{height:auto}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.cinema-journey.hero-scroll-enabled .scratch-hero-home.motion-hero{height:max(1040px,100svh)}}

/* In landscape the full ticket remains in normal flow instead of being clipped. */
@media(max-height:550px){
 .cinema-journey .green-transit.metro-scroll-region{height:auto}
 .cinema-journey .metro-finish20 .green-transit-stage{position:relative;top:0;height:620px;min-height:620px}
 .metro-finish20 .metro-travel-note{display:none}
 .cinema-portrait-timeline{height:auto!important}
}

/* Strong, legible colour belongs to the work and clear chapter boundaries. */
.premium-portfolio #the-library .folio-overline{color:#c8ff2e}
body.page-mode .page[data-page] .page-head{background:linear-gradient(115deg,var(--studio-head) 0%,var(--studio-head) 63%,#ffffff 100%)}
body.page-mode .btn-solid:hover{background:#182d75;border-color:#182d75}
body.page-mode :is(a,button):focus-visible{outline:3px solid #365eda;outline-offset:5px}