:root{--night:#1d2347;--night-deep:#141832;--window:#f3b95f;--concrete:#e6e7e2;--stone:#c9cbc4;--ink:#1b1f2b;--ink-soft:#4a4f5c;--font:"Archivo", "Roboto Flex", system-ui, "Segoe UI", sans-serif;--gutter:clamp(16px, 5vw, 72px);--measure:34rem;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--font);color:var(--ink);background:var(--concrete);-webkit-font-smoothing:antialiased;font-size:18px;line-height:1.55}*,:before,:after{box-sizing:border-box}body{background:var(--concrete);margin:0}img,video{max-width:100%;display:block}h1,h2,h3,p,ol{margin:0}a{color:inherit}:focus-visible{outline:3px solid var(--window);outline-offset:3px}h1,h2{letter-spacing:-.02em;text-wrap:balance;font-weight:300;font-stretch:125%;line-height:1.04}h3{font-size:1.25rem;font-weight:600;font-stretch:112%;line-height:1.25}.hero{color:#fff;background:var(--night-deep);flex-direction:column;justify-content:space-between;min-height:100svh;display:flex;position:relative;overflow:hidden}.hero-frames,.hero-frames img{position:absolute;inset:0}.hero-frames img{object-fit:cover;object-position:58% 40%;width:100%;height:100%}.hero:after{content:"";pointer-events:none;background:linear-gradient(#1418328c,#0000 22%),linear-gradient(90deg,#14183273,#0000 60%),linear-gradient(#0000 30%,#14183259 55%,#141832e6);position:absolute;inset:0}.hero h1,.hero-copy>p{text-shadow:0 1px 18px #14183273}.topbar,.hero-copy{z-index:1;padding-inline:var(--gutter);position:relative}.topbar{justify-content:space-between;align-items:center;padding-block:22px;display:flex}.wordmark{letter-spacing:.01em;font-size:1.15rem;font-weight:700;font-stretch:125%;text-decoration:none}.topbar-right{align-items:center;gap:clamp(12px,3vw,28px);display:flex}.langs{gap:2px;display:flex}.langs button{font:inherit;letter-spacing:.04em;color:#ffffffb3;cursor:pointer;background:0 0;border:0;border-radius:999px;min-width:40px;min-height:36px;padding:0 8px;font-size:.8rem;font-weight:600}.langs button:hover{color:#fff}.langs button[aria-pressed=true]{color:var(--night-deep);background:#ffffffe6}.topbar-link{border-bottom:1px solid #ffffff80;padding:8px 2px;font-weight:500;text-decoration:none}.topbar-link:hover{border-bottom-color:var(--window)}.hero-copy{max-width:64rem;padding-bottom:clamp(28px,6vh,64px)}.hero h1{max-width:17ch;font-size:clamp(2.1rem,6vw,5.4rem)}.hero-copy>p{max-width:var(--measure);color:#ffffffe0;margin-top:20px;font-size:clamp(1rem,1.6vw,1.15rem)}.hour{cursor:pointer;grid-template-columns:auto 1fr;align-items:baseline;column-gap:16px;max-width:30rem;margin-top:clamp(24px,4vh,40px);display:grid}.hour-clock{font-variant-numeric:tabular-nums;color:var(--window);min-width:4.2ch;font-size:2rem;font-weight:300;font-stretch:125%}.hour-hint{color:#ffffffb3;font-size:.85rem}.hour input{appearance:none;cursor:pointer;background:0 0;grid-column:1/-1;width:100%;height:32px;margin:10px 0 0}.hour input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#f6c27a,#e46d55 40%,#6d5ba8 70%,#2b3470);height:2px}.hour input::-moz-range-track{background:linear-gradient(90deg,#f6c27a,#e46d55 40%,#6d5ba8 70%,#2b3470);height:2px}.hour input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--window);border:3px solid #fff;border-radius:50%;width:22px;height:22px;margin-top:-10px;box-shadow:0 0 0 6px #f3b95f40}.hour input::-moz-range-thumb{background:var(--window);border:3px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 6px #f3b95f40}.hour input:focus-visible{outline:none}.hour input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--window)}.hour input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 6px var(--window)}main{padding-inline:var(--gutter)}.section-title{max-width:18ch;font-size:clamp(1.8rem,4vw,3.2rem)}.work{max-width:82rem;margin-inline:auto;padding-block:clamp(64px,12vw,140px) clamp(40px,8vw,96px)}.piece{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:clamp(20px,4vw,56px);margin-top:clamp(48px,8vw,104px);display:grid}.piece img,.piece video{aspect-ratio:16/9;object-fit:cover;background:var(--stone);border-radius:4px;width:100%}.piece-flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.piece-flip>img{order:2}.piece-text{max-width:var(--measure);padding-bottom:8px}.piece-text p{color:var(--ink-soft);margin-top:12px}.button{background:var(--night);color:#fff;border-radius:999px;margin-top:24px;padding:13px 22px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background-color .16s ease-out;display:inline-block}.button:hover{background:#2c3466}.steps{border-top:1px solid var(--stone);max-width:82rem;margin-inline:auto;padding-block:clamp(40px,8vw,96px) clamp(72px,12vw,140px)}.steps ol{counter-reset:step;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(32px,5vw,56px);padding:0;list-style:none;display:grid}.steps li{counter-increment:step}.steps li:before{content:counter(step);color:var(--night);margin-bottom:16px;font-size:3rem;font-weight:200;font-stretch:125%;line-height:1;display:block}.steps li p{color:var(--ink-soft);margin-top:8px;font-size:.95rem}.contact{color:#fff;background:linear-gradient(to bottom, var(--night-deep) 0%, #14183299 45%, #141832d9), url(/img/nightcity.webp) center 30% / cover no-repeat, var(--night-deep);position:relative}.contact-inner{max-width:82rem;padding:clamp(80px, 14vw, 180px) var(--gutter) 40px;margin-inline:auto}.contact h2{max-width:16ch;font-size:clamp(2rem,5vw,4.2rem)}.contact-inner>p{max-width:var(--measure);color:#ffffffd9;margin-top:18px}.contact-links{flex-wrap:wrap;gap:12px;margin-top:8px;display:flex}.button-lit{background:var(--window);color:var(--night-deep)}.button-lit:hover{background:#f7cb84}.button-ghost{background:0 0;box-shadow:inset 0 0 0 1px #fff9}.button-ghost:hover{background:#ffffff1a}.contact .contact-small{color:#fff9;margin-top:clamp(72px,10vw,120px);font-size:.85rem}@media (width<=860px){.piece,.piece-flip{grid-template-columns:1fr}.piece-flip>img{order:0}.steps ol{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=520px){.steps ol{grid-template-columns:1fr}}@media (height<=520px){.topbar{padding-block:12px}.hero-copy{padding-bottom:16px}.hero h1{max-width:22ch;font-size:clamp(1.7rem,4.6vw,2.6rem)}.hero-copy>p{margin-top:10px;font-size:.9rem}.hour{margin-top:12px}.hour-clock{font-size:1.5rem}.hour input{margin-top:4px}}@media (prefers-reduced-motion:reduce){.button{transition:none}}
