@font-face{font-family:"Alfa Slab One";src:url('../assets/fonts/alfa-slab-one.ttf') format('truetype');font-display:swap}
@font-face{font-family:Roboto;src:url('../assets/fonts/roboto-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url('../assets/fonts/roboto-bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
@font-face{font-family:"Space Mono";src:url('../assets/fonts/space-mono-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url('../assets/fonts/space-mono-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--paper:#f2f1ed;--ink:#141414;--green:#8fd0c4;--cyan:#83c7bd;--muted:#b4b0a8;--line:rgba(242,241,237,.2);--g:clamp(24px,4.4vw,76px);--max:1480px;--display:"Alfa Slab One",Rockwell,serif;--body:Roboto,Arial,sans-serif;--mono:"Space Mono","Courier New",monospace;color-scheme:dark}
html{background:var(--ink);scroll-padding-top:132px}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:18px;line-height:1.65}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.14;background:url('../assets/textures/grain.webp') repeat;background-size:384px;mix-blend-mode:soft-light}
h1,h2,.display{font-family:var(--display);font-weight:400;font-variation-settings:normal;letter-spacing:.012em;text-wrap:balance}
h2{font-size:clamp(34px,4vw,64px);line-height:1.08}
h3{font-family:var(--body);letter-spacing:0;font-weight:700}
.eyebrow,.site-header nav a,.languages button,dt,.text-link,.pill,.selected::before,.flow span,.footer-bottom,.back-portfolio{font-family:var(--mono);font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.075em;text-transform:uppercase}
.eyebrow,.flow span{color:var(--green)}
.site-header{background:rgba(20,20,20,.9);padding-block:18px;align-items:flex-start;gap:32px}
.brand img{width:clamp(142px,14vw,216px);height:auto}
.site-header nav{gap:26px;padding-top:9px;align-items:center}
.site-header nav a{color:var(--muted);background:none}
.site-header nav a:hover{background:none;color:var(--green)}
.languages{border-color:var(--line);margin-top:2px}
.languages button{color:var(--paper);min-width:42px;min-height:40px;padding:10px}
.languages button[aria-pressed=true]{background:var(--green);color:var(--ink)}
.languages button:hover{background:var(--paper);color:var(--ink)}
.hero{padding-top:48px}
.topline{align-items:center;gap:20px;color:var(--muted)}
.back-portfolio{text-decoration:none;color:var(--green)}
.back-portfolio:hover{text-decoration:underline}
.hero h1{font-size:clamp(62px,14.5vw,222px);letter-spacing:.005em;line-height:1.08;margin:36px 0 28px}
.subrow{align-items:end;padding-bottom:36px}
.subtitle{font-size:clamp(26px,4vw,60px);max-width:75%;color:var(--paper)}
.subrow>p:last-child{color:var(--muted);font-size:16px;line-height:1.5}
.film{margin-top:40px;scroll-margin-top:145px}
.film video{border:1px solid var(--line)}
figcaption{font-size:13px;line-height:1.55}
.film figcaption{padding-top:7px}
.facts{border-color:var(--line);margin-top:38px}
.facts dt{font-size:10px;color:var(--muted)}
.facts dd{font-size:19px;font-weight:400}
.facts>div{padding-block:24px 30px}
.dark{background:#0d0d0d;color:var(--paper);--muted:#b4b0a8;--line:rgba(242,241,237,.2)}
.statement{margin-top:22px;padding:110px 0;border-top:1px solid var(--line);background:radial-gradient(ellipse at 95% 100%,rgba(131,199,189,.075),transparent 65%),#0d0d0d}
.statement h2{font-size:clamp(42px,6.4vw,96px);line-height:1.06}
.statement-copy{font-size:21px;color:#c7c4bd}
.section{padding:104px 0}
.rail{top:148px}
.split{grid-template-columns:minmax(160px,1fr) minmax(0,3fr)}
.prose,.subsection>p,.learnings p{color:#c7c4bd}
.intro{color:var(--paper)}
.gallery{gap:24px 20px;margin-top:36px}
.media-button{overflow:hidden}
.media-button img{transition:filter .25s,transform .4s}
.media-button:hover img{filter:brightness(1.06);transform:scale(1.015)}
.selected::before{padding:7px 10px;font-size:9px;background:var(--green)}
.text-link{padding-bottom:6px;text-decoration:none;border-bottom:1px solid var(--green);color:var(--green);font-size:12px}
.text-link:hover{background:none;color:var(--paper);border-color:var(--paper)}
.flow strong{font-size:21px;font-weight:700}
.flow p{font-size:16px;line-height:1.6}
.flow span{font-size:12px}
.timing span{font-family:var(--display);font-size:clamp(28px,3vw,44px);font-weight:400;letter-spacing:0;text-transform:none}
.prompt summary{font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--green)}
.prompt pre{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.tools dt{font-family:var(--body);font-size:19px;letter-spacing:0;text-transform:none}
.tools dd{font-size:17px;line-height:1.6}
.pill{font-size:9px}
.learnings li::before{font-family:var(--mono);color:var(--green)}
.brand-frame{border-radius:0;aspect-ratio:2.81/1;isolation:isolate}
.brand-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 70%);z-index:1}
.brand-frame .signature{position:absolute;left:5%;bottom:12%;width:26%;height:auto;z-index:2}
.end-brand{background:#0d0d0d;padding:72px 0}
.end-brand p{color:var(--muted)}
footer{padding-top:72px}
.credits{font-size:22px;color:#c7c4bd}
.credits strong{color:var(--paper)}
.footer-brand{width:min(460px,65%);margin:70px 0 64px}
.footer-bottom{color:var(--muted);align-items:center;padding-block:24px}
.footer-bottom a{text-decoration:none}
.footer-bottom a:hover{background:none;color:var(--green)}
:focus-visible,.dark :focus-visible{outline:2px solid var(--green);outline-offset:6px}
@media(min-width:1800px){.hero h1{font-size:222px}}
@media(max-width:900px){.split{grid-template-columns:1fr}.rail{position:static}.section{padding:72px 0}.statement{padding:76px 0}.site-header nav{gap:18px}.hero{padding-top:30px}.brand-frame{display:block}.end-brand{padding:40px 0}}
@media(max-width:600px){body{font-size:16px}.site-header{align-items:center;padding-block:14px;gap:12px}.brand img{width:132px}.site-header nav{display:none}.languages{margin-left:auto;margin-top:0}.hero h1{font-size:14vw;margin:28px 0 24px}.topline{font-size:9px;gap:12px}.back-portfolio{font-size:9px}.subrow{align-items:start;gap:18px;padding-bottom:24px}.subtitle{max-width:100%;font-size:8vw}.subrow>p:last-child{font-size:14px}.film{margin-top:24px;scroll-margin-top:108px}.facts{margin-top:25px}.facts dd{font-size:16px}.facts dt{font-size:9px}.facts>div{padding-block:18px}.statement h2{font-size:10vw}.statement-copy{font-size:18px}.section{padding:60px 0}h2{font-size:9vw}.gallery{margin-top:28px}.flow strong{font-size:20px}.timing span{font-size:34px}.credits{font-size:19px;flex-direction:column}.footer-brand{width:75%;margin-block:48px}.footer-bottom{font-size:9px;gap:22px}.brand-frame{aspect-ratio:16/9}.brand-frame .signature{width:37%}.end-brand p{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.media-button img{transition:none}}