@font-face { font-family: Anton; src: url('/assets/fonts/anton-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Satoshi; src: url('/assets/fonts/satoshi-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Satoshi; src: url('/assets/fonts/satoshi-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root { --ink: #f0efe8; --black: #0a0a09; --edge: 3.2vw; color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--black); scroll-padding-top: 24px; }
body { margin: 0; background: var(--black); color: var(--ink); font-family: Satoshi, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; background: var(--ink); color: var(--black); padding: 12px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.site-header { position: absolute; z-index: 12; inset: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; gap: 24px; padding: 28px var(--edge); background: var(--black); }
.signature { font-weight: 700; font-size: 19px; letter-spacing: -.035em; }
.site-header p { font-size: 13px; line-height: 1.4; margin: 0; }
.work-link { font-size: 13px; padding-top: 4px; }
.work-link span { font-size: 10px; margin: 0 16px 0 8px; }
.site-header a:hover, .variant-switch a:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: .25em; }

.hero { position: relative; height: 390svh; }
.hero-stage { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; background: var(--black); }
.hero-word {
  position: absolute;
  z-index: 6;
  left: var(--edge);
  top: 27%;
  margin: 0;
  color: var(--ink);
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  font-size: 12.5vw;
  line-height: .99;
  letter-spacing: -.025em;
  text-transform: uppercase;
  pointer-events: none;
}
.hero-word span { display: block; }
.hero-word span + span { margin-top: .055em; }
.composition {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42%;
  right: var(--edge);
  overflow: clip;
  clip-path: inset(17% 0 18%);
  perspective: 1400px;
  transform-style: preserve-3d;
}
.photo-plane {
  position: absolute;
  width: 150%;
  aspect-ratio: 1.5;
  left: 50%;
  top: 42%;
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}
.photo-plane img { width: 100%; height: 100%; max-width: none; object-fit: fill; }
.depth-offset { width: 100%; height: 100%; will-change: transform; }
.sky { z-index: 1; }
.architecture { z-index: 2; opacity: 0; }
.original { z-index: 3; }
.car { z-index: 5; opacity: 0; transform-origin: 45% 73%; }
.car img { position: absolute; width: 50%; height: auto; left: 19.7%; top: 58.4%; object-fit: contain; }

.hero-bottom { position: absolute; z-index: 8; left: 0; right: 0; bottom: 35px; padding: 16px var(--edge); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; background: var(--black); }
.project-link { border: 0; padding: 0; background: none; text-align: left; display: flex; gap: 24px; align-items: flex-end; font-size: 13px; font-weight: 700; line-height: 1.35; }
.project-link > span:last-child { font-size: 28px; line-height: 1; }
.scroll-note, .depth-count { font-size: 10px; letter-spacing: .045em; }
.scroll-note > span { display: inline-block; font-size: 24px; margin-left: 12px; }
.hero-progress { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: 1px; background: #ffffff18; }
.hero-progress span { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.variant-switch { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 32px; background: var(--black); padding: 12px 20px; font-size: 10px; line-height: 1.2; letter-spacing: .035em; }
.variant-switch a { opacity: .5; }
.variant-switch [aria-current] { opacity: 1; }
.site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 0 3.5vw 100px; font-size: 13px; }
.site-footer nav { display: flex; gap: 24px; }
.no-script { padding: 32px; }

.static-motion .hero { height: 100svh; }
.static-motion .sky, .static-motion .car, .static-motion .architecture { display: none; }
.static-motion .scroll-note, .static-motion .depth-count { display: none; }

@media (max-width: 700px) {
  :root { --edge: 20px; }
  .site-header { grid-template-columns: 1fr auto; gap: 12px; padding-top: 22px; padding-bottom: 18px; }
  .signature { font-size: 17px; }
  .site-header p { grid-column: 1; font-size: 11px; }
  .work-link { grid-column: 2; grid-row: 1; font-size: 11px; }
  .work-link span { margin: 0 5px; font-size: 9px; }
  .hero { height: 340svh; }
  .hero-word { top: 15%; font-size: 31vw; line-height: .96; }
  .hero-word span + span { margin-top: .025em; }
  .composition { top: 46%; bottom: 18%; left: 0; right: 0; clip-path: inset(0); }
  .photo-plane { width: 185vw; top: 28%; }
  .hero-bottom { bottom: 36px; height: 96px; padding: 16px var(--edge); align-items: flex-start; }
  .project-link { font-size: 12px; gap: 18px; }
  .scroll-note { position: absolute; bottom: 12px; left: var(--edge); font-size: 8px; }
  .scroll-note > span { font-size: 16px; margin-left: 8px; }
  .depth-count { font-size: 9px; }
  .variant-switch { font-size: 9px; gap: 24px; padding: 14px 12px; }
  .site-footer { padding: 0 var(--edge) 100px; font-size: 11px; flex-direction: column; }
  .site-footer nav { gap: 18px; }
}

@media (max-height: 600px) and (min-width: 701px) {
  .site-header { padding-top: 18px; padding-bottom: 12px; }
  .signature { font-size: 15px; }
  .site-header p { font-size: 11px; }
  .work-link { font-size: 11px; }
  .hero-word { top: 26%; font-size: 11.8vw; line-height: .97; }
  .composition { clip-path: inset(19% 0 20%); }
  .photo-plane { width: 136%; top: 38%; }
  .hero-bottom { bottom: 34px; padding: 8px var(--edge); }
  .project-link { font-size: 10px; }
  .project-link > span:last-child { font-size: 22px; }
  .scroll-note, .depth-count { font-size: 8px; }
  .scroll-note > span { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .sky, .car, .architecture { display: none; }
  .scroll-note, .depth-count { display: none; }
  .photo-plane, .depth-offset { will-change: auto; }
}