:root {
  --font-display: "Bricolage Grotesque", "Heebo", system-ui, sans-serif;
  --font-body: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-logo: "Open Sans", "Heebo", system-ui, sans-serif;
  --s-bg: #F6F7F9; --s-fg: #12141A; --s-muted: #636978; --s-line: #DCDFE6;
  --k-ink: #1B1B2F;
  --pad: 18px; --gap: 10px; --gap-l: 18px; --cols: 2; --wcols: 1; --h1: 38px; --h2: 24px; --body: 15px; --logo: 18px; --nav-gap: 16px; --top: 40px; --sub: 17px; --vcols: 2; --slogan: 22vw;
}
@media (min-width: 600px) { :root { --pad: 36px; --gap: 14px; --gap-l: 24px; --cols: 3; --wcols: 2; --h1: 58px; --h2: 26px; --body: 16px; --logo: 22px; --nav-gap: 22px; --top: 64px; --sub: 19px; --vcols: 3; --slogan: 9vw; } }
@media (min-width: 1000px) { :root { --pad: 56px; --gap: 16px; --gap-l: 28px; --cols: 5; --h1: 76px; --h2: 30px; --body: 17px; --logo: 24px; --nav-gap: 28px; --top: 88px; --sub: 22px; --vcols: 5; } }
@media (min-width: 1700px) { :root { --slogan: 150px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--s-bg); color: var(--s-fg); font-family: var(--font-body); }
a { color: inherit; }
img, video, iframe { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--s-fg); outline-offset: 3px; }
.site-in { max-width: 1700px; margin: 0 auto; }

.s-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--pad); border-bottom: 1px solid var(--s-line); }
.logo { font: 700 var(--logo)/1 var(--font-logo); letter-spacing: .05em; white-space: nowrap; text-decoration: none; }
.logo .o { display: inline-block; transform-origin: 50% 100%; animation: o-hop 6s ease-in-out infinite; }
.logo:hover .o { animation-duration: 1.3s; }
@keyframes o-hop {
  0%, 12%, 100% { transform: none; }
  20% { transform: translateY(-.75em) scale(.92, 1.1); }
  30% { transform: translateY(0) scale(1.25, .72); }
  36% { transform: translateY(-.12em) scale(.96, 1.04); }
  42% { transform: none; }
}
.nav { display: flex; gap: var(--nav-gap); }
.navb { font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.navb:hover { color: var(--s-fg); }
.navb[aria-current="page"] { color: var(--s-fg); border-bottom-color: var(--s-fg); }

.eyebrow { margin: 0; font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.hero { display: grid; gap: 16px; padding: var(--top) var(--pad) calc(var(--top) * .55); }
.hero h1, .page-h h1, .about-text h1 { margin: 0; font: 700 var(--h1)/1.02 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.hero h1.slogan { margin: 0; font: 800 var(--slogan)/.95 var(--font-display); letter-spacing: -.04em; }
.slogan span { display: inline-block; }
@media (max-width: 599px) { .slogan span { display: block; } }
.hero .sub { margin: 4px 0 0; font: 500 var(--sub)/1.35 var(--font-display); letter-spacing: -.01em; color: var(--s-muted); }
@media (min-width: 600px) { .hero .sub { white-space: nowrap; } }
@media (max-width: 599px) { .hero .sub { text-wrap: balance; } }

.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 var(--pad) 14px; }
.sec-h h2 { margin: 0; font: 700 var(--h2)/1.1 var(--font-display); letter-spacing: -.02em; }
.wall-h { padding-top: calc(var(--top) * .9); }
.wall-h h2 { display: inline-flex; align-items: center; gap: 12px; }
.hint { flex: none; display: none; color: var(--s-muted); transform: scaleX(-1); }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) { .hint { display: inline-block; animation: nudge 2.4s ease-in-out infinite; } }
@keyframes nudge { 0%, 60%, 100% { transform: scaleX(-1); } 75% { transform: translate(-5px, 4px) scaleX(-1); } }

.reel-wrap { padding: 0 var(--pad); }
.reel-cap { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font: 400 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--s-muted); }

.r45 { --ar: .8; } .r11 { --ar: 1; } .r916 { --ar: .5625; } .r169 { --ar: 1.7778; }
.tile { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; overflow: hidden; aspect-ratio: var(--ar); background: var(--k-ink); contain: paint; }
.tile video, .tile iframe, .tile img.th { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.reel-tile { border-radius: 10px; }

.wall { padding: 0 var(--pad); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

.facade { cursor: pointer; }
.facade img.th { opacity: 0; transition: opacity .3s; }
.facade img.th.on { opacity: 1; }
.play { position: absolute; left: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: #F4EBD9; transition: transform .2s; }
.play::after { content: ""; position: absolute; left: 16px; top: 12px; border-left: 12px solid var(--k-ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.facade:hover .play { transform: scale(1.1); }

.page-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: var(--top) var(--pad) calc(var(--top) * .6); }
.works { padding: 0 var(--pad); display: grid; grid-template-columns: repeat(var(--wcols), minmax(0, 1fr)); gap: calc(var(--gap-l) * 1.6) var(--gap-l); }
.work { min-width: 0; }
.w-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding-top: 14px; }
.w-meta h3 { margin: 0; font: 700 var(--h2)/1.1 var(--font-display); letter-spacing: -.02em; }
.w-meta .sub { grid-column: 1 / -1; margin: 0; font: 400 12px/1.5 var(--font-mono); letter-spacing: .03em; color: var(--s-muted); }
.out { font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--s-muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--s-line); white-space: nowrap; }
.out:hover { color: var(--s-fg); text-decoration-color: var(--s-fg); }
.verts { margin-top: calc(var(--gap-l) * 1.6); padding: 0 var(--pad); display: grid; grid-template-columns: repeat(var(--vcols), minmax(0, 300px)); gap: calc(var(--gap-l) * 1.4) var(--gap-l); justify-content: start; }
@media (min-width: 1000px) { .verts { grid-template-columns: repeat(4, minmax(0, 300px)); } }
@media (max-width: 599px) { .verts .out { font-size: 9px; letter-spacing: .03em; } }

.about-grid { display: grid; grid-template-columns: 1fr; gap: 28px; padding: var(--top) var(--pad) 0; align-items: start; }
@media (min-width: 600px) { .about-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 36px; } }
@media (min-width: 1000px) { .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.portrait { margin: 0; width: min(100%, 340px); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--s-line); }
@media (min-width: 600px) { .portrait { width: 100%; } }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: grayscale(1); transition: filter .4s; }
@media (hover: hover) and (pointer: fine) { .portrait:hover img { filter: none; } }
.about-text { display: grid; gap: 22px; min-width: 0; }
.about-text h1.about-h { font-size: calc(var(--h1) * .78); }
.copy { display: grid; gap: 1.2em; }
.about-text p { margin: 0; }
.about-text .body { font-size: var(--body); line-height: 1.65; max-width: 58ch; }
.contact { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding-top: 10px; }
.contact .mail { text-decoration: none; color: var(--s-fg); font: 500 13px var(--font-mono); letter-spacing: .02em; }

.s-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: calc(var(--top) * 1.4); padding: 24px var(--pad) 36px; border-top: 1px solid var(--s-line); font: 400 11px var(--font-mono); letter-spacing: .04em; color: var(--s-muted); }
.s-foot .links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.s-foot a { text-decoration: none; }
.s-foot a:hover { color: var(--s-fg); }

@media (prefers-reduced-motion: reduce) { .logo .o, .hint { animation: none; } }