@font-face{font-family:Inter;src:url('./assets/fonts/inter-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('./assets/fonts/inter-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('./assets/fonts/inter-extra-bold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('./assets/fonts/ibm-plex-mono.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#f7f7f3;--ink:#050505;--white:#fff;--cobalt:#0b35d6;--acid:#72ff00;--violet:#7a00ff;--accent:var(--violet);--gutter:clamp(1.25rem,4.444cqw,4rem);--section-gap:clamp(2rem,3.333cqw,3rem);--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
body,p,h1,h2,h3,h4,figure,dl,dd{margin:0}
a{color:inherit;text-underline-offset:.3em}
button{font:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
::selection{background:var(--violet);color:white}
img{display:block;max-width:100%}
.page{max-width:100rem;margin-inline:auto}
.mono,.eyebrow,.source,.metadata,.credits{font-family:var(--mono);font-weight:400}
.eyebrow{font-size:.875rem;line-height:1.5;letter-spacing:.025em;color:var(--accent)}
.body-copy{font-size:clamp(1rem,1.39cqw,1.25rem);line-height:1.5;letter-spacing:-.01em}
.skip-link{position:fixed;top:.75rem;left:1rem;z-index:10;transform:translateY(-180%);background:var(--acid);padding:1rem;color:var(--ink)}
.skip-link:focus{transform:translateY(0)}
.nav{display:grid;grid-template-columns:minmax(0,3.8fr) repeat(3,minmax(0,1fr));gap:.75rem;background:var(--paper)}
.nav a{display:flex;justify-content:center;align-items:center;min-height:3rem;text-decoration:none;color:white;background:var(--ink);font: .875rem/1.4 var(--mono);padding:.5rem 1rem;transition:color .2s}
.nav .brand{justify-content:flex-start;padding-left:2rem;color:var(--acid)}
.nav a:hover{color:var(--acid)}
.hero{display:grid;grid-template-columns:minmax(0,65fr) minmax(0,35fr)}
.hero-main{padding:var(--gutter);display:flex;flex-direction:column;gap:2rem;min-height:39.375rem}
h1{font-size:clamp(6rem,12.22cqw,11rem);line-height:.932;letter-spacing:-.057em;font-weight:800}
.hero-dek{max-width:47.5rem;font-size:clamp(1.875rem,3.194cqw,2.875rem);line-height:1.087;letter-spacing:-.035em;font-weight:700}
.capabilities{display:grid;gap:1rem;padding-top:1.5rem}
.short-rule{width:10.25rem;height:3px;background:var(--accent)}
.capabilities p{font-size:.875rem;line-height:1.6}
.hero-facts{padding:clamp(1.5rem,3.333cqw,3rem);color:white;background:var(--cobalt);--accent:var(--acid);display:flex;flex-direction:column;gap:2rem}
.hero-facts h2{font-size:clamp(1.875rem,2.78cqw,2.5rem);line-height:1.1;letter-spacing:-.04em}
.facts{border-top:1px solid white;padding-top:2rem;display:grid;gap:1.5rem;font:.8125rem/1.5 var(--mono)}
.fact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);gap:1rem}
.fact dt{color:var(--acid);overflow-wrap:anywhere}
.explore{display:flex;justify-content:space-between;gap:1rem;font:.875rem/1.5 var(--mono);color:var(--acid);text-decoration:none;padding-block:.5rem}
.explore span:last-child{transition:transform .2s}
.explore:hover span:last-child{transform:translateY(5px)}
.hero-art{background:var(--ink)}
.hero-art img{width:100%;aspect-ratio:9/4;object-fit:cover;object-position:50% 50%}
.ticker{display:flex;align-items:center;gap:clamp(1rem,2.22cqw,2rem);padding:.75rem 2rem;overflow:hidden;white-space:nowrap;background:var(--ink);color:white;font:.8125rem/1.4 var(--mono)}
.ticker b{color:var(--acid);font-weight:400}
.section{padding:var(--gutter);display:grid;gap:var(--section-gap)}
.section h2{font-size:clamp(2.5rem,5cqw,4.5rem);line-height:1.056;letter-spacing:-.053em;font-weight:700}
.context{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
.context-index{padding:4.5rem 3rem}
.context-body{padding:var(--gutter);display:grid;gap:3rem}
.context h2{font-size:clamp(2.5rem,5cqw,4.5rem);line-height:1.056;letter-spacing:-.053em}
.two-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}
.copy-block{border-top:1px solid currentColor;padding-top:1rem;display:flex;flex-direction:column;gap:1rem}

@media(max-width:1000px){.hero{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.hero-main{min-height:34rem}.fact{grid-template-columns:1fr;gap:.4rem}.hero-facts{gap:1.5rem}.facts{gap:1.25rem}.context{grid-template-columns:1fr}.context-index{padding:var(--gutter) var(--gutter) 0}.context-body{gap:2rem}.two-columns{gap:2rem}}
@media(max-width:700px){.nav{gap:2px;grid-template-columns:1.3fr repeat(3,1fr)}.nav a{font-size:.75rem;padding:.5rem .35rem}.nav .brand{padding-left:1.25rem}.hero{grid-template-columns:1fr}.hero-main{min-height:0;gap:1.5rem;padding-block:2.5rem}.hero-facts{padding:2rem var(--gutter)}.hero-facts h2 br{display:none}.facts{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:1.5rem;gap:1.5rem}.hero-art img{aspect-ratio:4/3}.two-columns{grid-template-columns:1fr}.section{padding-block:2.75rem}.ticker{padding-inline:1.25rem;font-size:.75rem}.context-body{padding-block:2rem 2.75rem}.capabilities{padding-top:.5rem}.hero-dek{max-width:28rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Case-study layout: fluid columns, intrinsic media ratios, no fixed canvas widths. */
h1,h2,h3,p,dd,a{overflow-wrap:break-word}
.section-marker{display:flex;justify-content:space-between;gap:1rem}
.idea{background:var(--acid);--accent:var(--ink);gap:3rem}
.idea h2{font-size:clamp(3.25rem,8.06cqw,7.25rem);line-height:.932;letter-spacing:-.052em;font-weight:800}
.large-copy{font-size:clamp(1.5rem,2.222cqw,2rem);line-height:1.25;letter-spacing:-.025em}
.section-intro{display:grid;grid-template-columns:minmax(0,720fr) minmax(0,528fr);gap:4rem}
.intro-copy{display:grid;gap:1.5rem}
.media-grid{display:grid;align-items:start}
.holiday-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;border-top:1px solid;padding-top:2.5rem}
.media-card{min-width:0;display:grid;gap:1rem}
.media-trigger{display:block;position:relative;overflow:hidden;background:var(--ink);color:var(--white);text-decoration:none;aspect-ratio:421/282}
.media-trigger img{width:100%;height:100%;object-fit:contain;transition:transform .4s cubic-bezier(.2,.65,.3,1)}
.portrait .media-trigger{aspect-ratio:9/16}
.feature .media-trigger{aspect-ratio:8/9}
.portrait .media-trigger img,.feature .media-trigger img{object-fit:cover}
.action-badge{position:absolute;top:1rem;left:1rem;min-width:7.375rem;min-height:2.25rem;padding:.5rem .625rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--ink);color:var(--white);font:.8125rem/1.45 var(--mono);transition:background .2s,color .2s}
.media-trigger:hover img{transform:scale(1.035)}
.media-trigger:hover .action-badge,.media-trigger:focus-visible .action-badge{background:var(--acid);color:var(--ink)}
.media-card h3,.upload-slot h3{font-size:1.5rem;line-height:1.25;letter-spacing:-.025em}
.metadata{font-size:.8125rem;line-height:1.55;color:var(--accent);letter-spacing:.025em}
.views{white-space:nowrap}
.source{display:inline-flex;align-items:center;gap:.4rem;justify-self:start;font-size:.8125rem;line-height:1.45;min-height:2.75rem;text-decoration:none}
.source:hover{text-decoration:underline}
.source span[aria-hidden]{transition:transform .2s}
.source:hover span[aria-hidden]{transform:translate(2px,-2px)}
.credits{font-size:.8125rem;line-height:1.65;color:var(--accent)}
.section-notes{display:grid;gap:.5rem}
.snapshot-note{font: .75rem/1.5 var(--mono);color:#535353}
.liminals{background:var(--ink);color:var(--white);--accent:var(--acid)}
.liminal-films{padding-top:2rem;border-top:1px solid #858585}
.liminal-film figcaption{display:grid;gap:1rem}
.still-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.moving-grid{display:grid;grid-template-columns:minmax(0,.916fr) repeat(3,minmax(0,1fr));gap:2rem;border-top:1px solid #858585;padding-top:3rem;align-items:start}
.moving-intro{display:grid;gap:1.5rem}
.moving-intro h3{font-size:2.5rem;line-height:1.1;letter-spacing:-.04em;color:var(--acid)}
.quest-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.credit-rule{border-top:1px solid var(--ink);padding-top:2rem}
.soap{background:var(--cobalt);color:white;--accent:var(--acid)}
.soap-grid{display:grid;grid-template-columns:minmax(0,608fr) minmax(0,640fr);gap:4rem}
.soap-copy{display:flex;flex-direction:column;gap:2rem}
.soap-film video,.liminal-film video{display:block;width:100%;height:auto;max-height:36rem;object-fit:contain;background:var(--ink);color-scheme:dark}
.soap-grid>.soap-film{width:100%;max-width:22.5rem;justify-self:center}
.soap-films{padding-top:2rem;border-top:1px solid #6b85e0}
.soap-film .source,.liminal-film .source{color:var(--acid)}
.upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.upload-slot{min-width:0}
.upload-placeholder{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center;background:var(--ink);border:1px dashed var(--violet);padding:1.5rem;color:white}
.upload-placeholder .eyebrow,.upload-placeholder .metadata{color:white}
.upload-plus{font-size:4.5rem;line-height:1;color:var(--acid)}
.upload-slot figcaption{display:grid;gap:1rem;padding-top:1rem}
.methods{padding-top:0}
.methods>.eyebrow{border-top:2px solid var(--ink);padding-top:2.5rem}
.methods-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.toolkit>div{display:grid;grid-template-columns:minmax(0,192fr) minmax(0,1040fr);gap:2rem;padding:1.5rem;border-top:1px solid}
.next-project{background:var(--violet);color:white;--accent:var(--acid);min-height:22.25rem;align-content:space-between}
.next-project h2{font-size:clamp(4rem,8.06cqw,7.25rem);line-height:.932;letter-spacing:-.052em;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.next-project h2 span{color:var(--acid)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.player-open{overflow:hidden}
.media-dialog{--accent:var(--acid);width:min(56rem,calc(100% - 2rem));max-height:calc(100svh - 2rem);padding:0;border:1px solid #555;background:var(--ink);color:white;overflow:auto}
.media-dialog::backdrop{background:#050505e8;backdrop-filter:blur(6px)}
.player-header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.25rem 1.5rem;border-bottom:1px solid #444;position:sticky;top:0;z-index:2;background:var(--ink)}
.player-header h2{font-size:1.25rem;line-height:1.25;letter-spacing:-.025em}
.close-player{display:flex;align-items:center;gap:1rem;border:0;background:none;color:var(--acid);font:.8125rem/1.5 var(--mono);min-width:5.5rem;min-height:2.75rem;padding:.5rem}
.close-player span{font-size:1.5rem}
.player-body{display:grid;place-items:center;min-height:12rem;padding:1rem;max-width:100%}
.player-body>div{max-width:100%;width:100%;display:grid;justify-items:center}
.player-body img{max-height:72svh;width:auto;max-width:100%;object-fit:contain}
.player-body iframe{border:0;max-width:100%;display:block}
.player-body .tiktok-player{width:min(100%,24rem);aspect-ratio:9/16;height:auto;min-height:0}
.player-body blockquote{margin:0!important;max-width:100%!important;min-width:0!important}
.player-footer{padding:0 1.5rem 1.25rem}
.player-footer p{font:.75rem/1.6 var(--mono);color:#b5b5b5}
.player-footer .player-status{color:var(--acid)}
.player-source{color:var(--acid)}
@media(max-width:1000px){.section-intro{gap:2rem}.moving-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.moving-intro{grid-column:1/-1;grid-template-columns:1fr 2fr;align-items:start}.moving-intro h3{font-size:2rem}.moving-intro h3 br{display:none}.moving-intro h3 br::after{content:' '}.quest-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}.soap-grid{gap:2rem}.methods-grid{grid-template-columns:1fr;gap:2rem}.methods-grid .copy-block{display:grid;grid-template-columns:1fr 2fr;gap:2rem}.media-card h3,.upload-slot h3{font-size:1.25rem}}
@media(max-width:700px){h1{font-size:clamp(4.75rem,23cqw,8rem);overflow-wrap:anywhere}.section-marker{flex-direction:column;gap:.75rem}.section-intro{grid-template-columns:1fr;gap:1.5rem}.holiday-grid{grid-template-columns:1fr;gap:2.5rem;padding-top:2rem}.media-card h3,.upload-slot h3{font-size:1.5rem}.media-card{gap:.75rem}.moving-grid{grid-template-columns:1fr;gap:2.5rem;padding-top:2rem}.moving-intro{grid-column:auto;grid-template-columns:1fr;gap:1rem}.moving-intro h3 br{display:initial}.moving-intro h3{font-size:2rem}.moving-intro h3 br::after{content:none}.still-grid{grid-template-columns:1fr;gap:2.5rem}.soap-grid,.upload-grid{grid-template-columns:1fr;gap:2.5rem}.soap-copy{gap:1.5rem}.methods-grid .copy-block{grid-template-columns:1fr;gap:1rem}.toolkit>div{grid-template-columns:1fr;gap:1rem;padding:1.5rem 0}.idea{gap:2rem}.next-project{min-height:17rem}.media-dialog{width:calc(100% - 1rem);max-height:calc(100svh - 1rem)}.player-header{gap:.5rem;padding:.75rem}.player-header h2{font-size:1rem}.player-body{padding:.5rem}.player-footer{padding:0 1rem 1rem}.upload-placeholder{gap:1rem}.upload-plus{font-size:3rem}.snapshot-note{max-width:28ch}}
@media(max-width:520px){.quest-grid{grid-template-columns:1fr;gap:2.5rem}.portrait .media-trigger{aspect-ratio:9/14}.portrait .media-trigger img{object-fit:contain}.feature .media-trigger{aspect-ratio:4/5}}
@media print{.nav,.ticker,.media-dialog,.action-badge{display:none}.page{max-width:none}.section,.hero-main,.hero-facts{padding:1.5rem}.media-card,.copy-block,.upload-slot{break-inside:avoid}a{text-decoration:none}.section h2{font-size:2.5rem}}