*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--black); color: var(--white); scrollbar-color: #595959 var(--black); }
body { margin: 0; font: 350 1rem/1.25 var(--font); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { font-weight: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
img,video,canvas { display: block; max-width: 100%; }
img,video { object-fit: cover; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: blue; color: #060606; }
:focus-visible { outline: 2px solid blue; outline-offset: 5px; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip-link:focus { position: fixed; top: 70px; left: 16px; z-index: 500; padding: 12px; background: blue; color: #060606; }
.wrap { width: auto; margin-inline: 16px; }
.t-display,.t-section { font: 300 3rem/1 var(--font-condensed); letter-spacing: -.01em; }
.t-section { font-size: 2.375rem; line-height: 1.1; }
.t-lead { font: 300 1.625rem/1.2 var(--font-condensed); }
.t-label,.t-num { font: 0.6875rem/1 var(--font-mono); text-transform: uppercase; }
.muted { color: var(--muted); }
.bracket { display: inline-flex; gap: 4px; font: 0.6875rem/1 var(--font-mono); text-transform: uppercase; color: var(--muted); }
.bracket::before { content: '['; transition: transform 333ms; }
.bracket::after { content: ']'; transition: transform 333ms; }
.bracket:hover { color: white; }
.bracket:hover::before { transform: translateX(-4px); }
.bracket:hover::after { transform: translateX(4px); }
.btn,.tag-concept { display: inline-flex; gap: 12px; padding: 10px; background: rgb(255 255 255 / .08); border-radius: 2px; font: 0.6875rem/1 var(--font-mono); text-transform: uppercase; }
.btn:hover { background: rgb(255 255 255 / .14); }
.tag-concept { padding: 6px 8px; color: var(--muted); font-size: 0.5625rem; }
/* Header: full navigation at the opening, compact panel after scrolling. */
.nav { position: fixed; top: 16px; left: 16px; z-index: 110; display: flex; align-items: center; height: 48px; overflow: hidden; border-radius: 3px; }
.nav::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: #141414; border-radius: inherit; transition: width 750ms cubic-bezier(.28,0,0,1); }
.nav__brand { position: relative; z-index: 1; display: flex; align-items: center; flex: none; padding: 0 12px; color: blue; }
.wordmark { width: 6rem; height: auto; }
.nav__toggle { position: relative; z-index: 1; display: flex; align-items: center; gap: 60px; height: 48px; padding: 6px 18px 0 12px; overflow: hidden; white-space: nowrap; font: 0.6875rem/1 var(--font-mono); text-transform: uppercase; }
.nav__toggle i { width: 3px; height: 3px; border-radius: 50%; background: #595959; }
.nav__links { display: flex; align-items: center; gap: 36px; padding: 0 30px; overflow: hidden; white-space: nowrap; font: 0.6875rem/1 var(--font-mono); text-transform: uppercase; }
.nav__links a { flex: none; color: #989898; }
.nav__links a:hover { color: white; }
body[data-page='home']:not([data-scrolled]) .nav::before { width: 0; }
@media(min-width:1194px) {
 body[data-page='home'] .nav { width: 15.912rem; transition: width 400ms cubic-bezier(.65,0,.35,1); }
 body[data-page='home']:not([data-scrolled]) .nav { width: 7.5rem; }
 body[data-page='home'] .nav__toggle { position: absolute; top: 0; left: 7.5rem; width: 8.412rem; transition: transform 650ms cubic-bezier(.36,.54,0,.99); }
 body[data-page='home'] .nav__toggle [data-page-label] { opacity: 1; transition: opacity 0ms linear 183ms; }
 body[data-page='home'] .nav__toggle i { transform: scale(1); transition: transform 333ms cubic-bezier(.38,.02,.41,.98) 400ms; }
 body[data-page='home']:not([data-scrolled]) .nav__toggle { transform: translateX(318px); }
 body[data-page='home']:not([data-scrolled]) .nav__toggle [data-page-label] { opacity: 0; transition-delay: 0ms; }
 body[data-page='home']:not([data-scrolled]) .nav__toggle i { transform: scale(0); transition-delay: 0ms; }
 .nav__links { position: fixed; top: 16px; left: 8.5rem; z-index: 110; height: 48px; transform: translateX(0); transition: transform 650ms cubic-bezier(.36,.54,0,.99); }
 .nav__links a { opacity: 1; transition: color 167ms linear,opacity 0ms linear; }
 .nav__links a:nth-child(1) { transition-delay: 0ms,100ms; }
 .nav__links a:nth-child(2) { transition-delay: 0ms,117ms; }
 .nav__links a:nth-child(3) { transition-delay: 0ms,150ms; }
 .nav__links a:nth-child(4) { transition-delay: 0ms,183ms; }
 .nav__links a:nth-child(5) { transition-delay: 0ms,216ms; }
 body[data-scrolled] .nav__links,body:not([data-page='home']) .nav__links { transform: translateX(-255px); pointer-events: none; }
 body[data-scrolled] .nav__links a,body:not([data-page='home']) .nav__links a { opacity: 0; }
}
.nav-tools { position: fixed; top: 16px; right: 16px; z-index: 110; display: flex; align-items: center; height: 48px; gap: 8px; font: 0.6875rem/1 var(--font-mono); color: #989898; }
.nav-clock { padding: 12px; }
.widgets-toggle { padding: 16px 18px; }
.widgets-toggle:hover { color: #fff; background: #141414; border-radius: 3px; }
.menu { position: fixed; inset: 0 auto 0 0; width: 352px; padding: 104px 28px 24px; background: #141414; z-index: 105; display: flex; flex-direction: column; transform: translateX(-100%); visibility: hidden; transition: transform 500ms var(--ease-out), visibility 500ms; }
body[data-menu] .menu { transform: translateX(0); visibility: visible; }
.menu__links { display: flex; flex-direction: column; gap: 20px; }
.menu__links a { font: 300 2.375rem/1 var(--font-condensed); }
.menu__links small { display: block; margin-top: 4px; font: 350 0.875rem/1.25 var(--font); color: #989898; }
.menu__links a:hover { color: blue; }
.menu__bottom { margin-top: auto; color: #595959; font-size: 0.875rem; }
.menu__bottom a { display: inline-block; margin: 12px 0 28px; color: #989898; }
.menu-overlay { position: fixed; inset: 0; background: #060606bb; backdrop-filter: blur(8px); z-index: 102; opacity: 0; pointer-events: none; transition: opacity 500ms; }
body[data-menu] .menu-overlay { pointer-events: auto; opacity: 1; }
#main { transition: transform 500ms var(--ease-out); }
body[data-menu] #main { transform: translateX(176px); }
/* Contact section shared by home and project pages. */
.contact { padding: 172px 28px 24px; }
.contact__grid { display: grid; grid-template-columns: repeat(16,minmax(0,1fr)); gap: 8px; }
.contact__title { grid-column: span 5; font: 300 2.375rem/1.1 var(--font-condensed); }
.contact__rows { grid-column: 8 / 17; }
.contact__row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; border-top: 1px solid var(--rule); padding: 16px 0 48px; }
.contact__row h3 { font-size: 1rem; }
.contact__row a { color: #989898; }
.contact__row a:hover { text-decoration: underline; }
.contact__row p + a { display: inline-block; margin-top: 4px; }
.contact__channels { display: flex; flex-direction: column; gap: 4px; }
.contact__hello { grid-column: span 7; display: flex; align-items: flex-end; padding-top: 52px; }
.contact__hello a { font: 300 clamp(3.5rem,7vw,6.875rem)/1 var(--font-condensed); letter-spacing: -.03em; }
.contact__meta { grid-column: span 9; display: flex; align-items: flex-end; justify-content: space-between; padding: 52px 0 4px; font-size: 0.875rem; color: #595959; }
.contact__meta a:hover { color: white; }
/* Floating cards open from the top-right control and can be moved. */
.widgets { position: fixed; inset: 80px 16px 16px; z-index: 120; pointer-events: none; }
.widget { position: absolute; background: #141414f5; backdrop-filter: blur(24px); width: 20rem; border-radius: 4px; pointer-events: auto; box-shadow: 0 16px 60px #0006; overflow: hidden; }
.widget--studio { top: 0; right: 0; }
.widget--project { top: 280px; right: 40px; }
.widget--notes { top: 80px; right: 380px; }
.widget__header { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 12px; cursor: grab; touch-action: none; font: 0.6875rem/1 var(--font-mono); text-transform: uppercase; color: #989898; }
.widget__header button { padding: 10px; }
.widget__body { padding: 0 12px 16px; }
.widget__body img { width: 100%; aspect-ratio: 16 / 9; border-radius: 3px; margin-bottom: 12px; }
.widget__body p { color: #989898; margin: 4px 0 12px; }
.widget__body a:hover { color: blue; }
.widget__actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.widget__actions button { font: 0.6875rem/1 var(--font-mono); color: #989898; }
@view-transition { navigation: auto; }
::view-transition-group(project-media) { animation-duration: 700ms; animation-timing-function: var(--ease-expo); }
::view-transition-old(project-media),::view-transition-new(project-media) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; }
.page-veil { position: fixed; inset: 0; z-index: 300; background: #060606; pointer-events: none; transform: translateY(100%); transition: transform 500ms var(--ease-out); }
.page-veil[data-state='out'] { transform: translateY(0); }
@media(min-width:1728px) { html { font-size: calc(100vw / 108); } }
@media(max-width:1193px) {
 .nav__links { display: none; }
 body[data-page='home']:not([data-scrolled]) .nav__toggle { display: flex; }
 .nav { background: #141414 !important; }
 .contact { padding: 80px 16px 24px; }
 .contact__grid { display: block; }
 .contact__title { font-size: 1.625rem; margin-bottom: 48px; }
 .contact__hello { padding-top: 16px; }
 .contact__meta { padding-top: 48px; gap: 16px; flex-wrap: wrap; }
}
@media(max-width:833px) {
 body { font-size: 0.9375rem; }
 .nav { top: 12px; left: 12px; }
 .nav__toggle { gap: 32px; padding-right: 16px; }
 .nav-tools { top: 12px; right: 12px; }
 .nav-clock { display: none; }
 .menu { width: 100%; padding-top: 100px; }
 body[data-menu] #main { transform: none; }
 .menu__links { gap: 18px; }
 .menu__links a { font-size: 2rem; }
 .menu__bottom { margin-top: 32px; }
 .menu { overflow-y: auto; }
 .widget { position: relative; width: 100%; top: auto !important; left: auto !important; right: auto !important; margin-bottom: 12px; }
 .widgets { overflow-y: auto; }
 .widget__header { cursor: default; }
 .contact__row { grid-template-columns: 1fr 1fr; padding-bottom: 36px; }
 .contact__row p { display: none; }
 .contact__row h3 { font-size: 0.9375rem; }
 .t-display { font-size: 2.25rem; }
 .t-section { font-size: 1.625rem; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 ::view-transition-group(*) { animation-duration: 0s; }
}

body[data-page='home']:not([data-scrolled]) .nav__links { mix-blend-mode: difference; }
body[data-page='home']:not([data-scrolled]) .nav__links a { color: white; }
body[data-page='home']:not([data-scrolled]) .nav-tools { mix-blend-mode: difference; color: white; }
html:not(.js) .nav__toggle, html:not(.js) .nav-tools { display: none !important; }
html:not(.js) .nav__links { display: flex !important; flex-wrap: wrap; gap: 12px; padding: 12px; }
html:not(.js) .nav { background: #141414 !important; }
@media(max-width:833px) { html:not(.js) .nav__links a:nth-child(n+3) { display: none; } }

@media(min-width:834px) {
 body:not([data-page='home']) .nav { width: 20rem; }
 body:not([data-page='home']) .nav__toggle { flex: 1; justify-content: space-between; gap: 8px; }
}

.nav__mobile-label,.menu__label,.project-back { display: none; }
@media(max-width:833px) {
 body .nav { top: 16px; left: 16px; height: 44px; background: transparent !important; width: auto; }
 body .nav::before { display: none; }
 .nav__brand { padding: 0; }
 .wordmark { width: 6.5rem; }
 body .nav .nav__toggle { position: fixed; top: 16px; right: 64px; width: 80px; height: 44px; justify-content: center; padding: 0; background: #141414; border-radius: 2px; }
 .nav__toggle [data-page-label],.nav__toggle i { display: none; }
 .nav__mobile-label { display: block; }
 body .nav-tools { top: 16px; right: 16px; height: 44px; mix-blend-mode: normal !important; color: white !important; }
 .widgets-toggle { padding: 0; width: 44px; height: 44px; background: #141414; border-radius: 2px; }
 .menu { padding: 100px 16px 24px; }
 .menu__label { display: block; margin-bottom: 24px; }
 .menu__links { gap: 12px; }
 .menu__links a { font-size: 1.625rem; line-height: 1.2; }
 .menu__links small { display: none; }
 .menu__bottom { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 24px; }
 .menu__bottom a { font: 0.6875rem/1 var(--font-mono); text-transform: uppercase; margin-top: 24px; }
 body[data-page='project'] .nav,body[data-page='project'] .nav-tools { display: none; }
 body[data-page='project'] .project-back { position: fixed; top: 16px; left: 16px; z-index: 110; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 2px; background: #141414; font-size: 0.875rem; }
}

/* Project previews keep their image until a video frame is playing. */
.project__media, .gallery-card__media { position: relative; }
.project-thumb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .18s linear; }
.project-thumb-video[data-playing] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .project-thumb-video { display: none; } }

/* Picture sources reserve the existing image box without changing the grid. */
.deferred-media { display: contents; }