/* ART DIRECTION
   Concept: the screening room. Lights go down, the work plays under a warm light, the type does the talking.
   Emotion on first look: "these people have taste, and they ship". Archetype: dark immersive, warm, one light.
   Type: Bricolage Grotesque only (its width and weight axes give the contrast), Geist Mono for labels.
   Colour: warm near-black, warm off-white room for the beliefs, one accent that is a light, not a paint colour.
   Signature move: the tungsten spotlight that follows the cursor over every piece of work.
   Motion story: lights down (loader) -> the claim rises -> the work takes over the screen -> a lit room for the beliefs -> the ask. */
:root {
  --bg: oklch(0.145 0.009 70); --bg-2: oklch(0.19 0.01 70); --bg-3: oklch(0.24 0.012 70);
  --room: oklch(0.955 0.009 85); --room-ink: oklch(0.17 0.012 70); --room-2: oklch(0.45 0.015 70);
  --ink: oklch(0.95 0.007 85); --ink-2: oklch(0.7 0.01 80); --ink-3: oklch(0.6 0.01 80); --ink-4: oklch(0.34 0.01 80);
  --light: oklch(0.9 0.11 84); --line: oklch(0.95 0.007 85 / 0.1);
  --sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --gl: max(22px, env(safe-area-inset-left, 0px)); --gr: max(22px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
@property --x { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

* { box-sizing: border-box }
html { background: var(--bg); overflow-x: clip }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--sans); font-optical-sizing: auto; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; overflow-x: hidden }
h1, h2, h3, p { margin: 0 }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer }
a { color: inherit }
:focus-visible { outline: 2px solid var(--light); outline-offset: 5px; border-radius: 2px }
.wrap { padding-left: var(--gl); padding-right: var(--gr) }
.lab { font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3) }
.word { font-weight: 600; letter-spacing: -0.045em; font-variation-settings: "wdth" 92; white-space: nowrap }
.word .g { display: inline-block; width: 0.34em }
.m { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em }
.m > * { display: inline-block; will-change: transform }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none }

/* loader */
.loader { position: fixed; inset: 0; z-index: 90; background: var(--room); color: var(--room-ink); display: grid; place-items: center; }
.loader .lw { font-size: clamp(34px, 6vw, 72px); display: grid; gap: 16px; justify-items: start }
.loader .rule { display: block; width: 100%; height: 2px; background: var(--room-ink); transform: scaleX(0); transform-origin: left }
.loader .lab { color: var(--room-2) }

/* grain + progress + cursor */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.055; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite }
@keyframes grain { 0% { background-position: 0 0 } 20% { background-position: -40px 25px } 40% { background-position: 30px -50px } 60% { background-position: -55px -10px } 80% { background-position: 45px 40px } 100% { background-position: 0 0 } }
.prog { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2px; z-index: 70; background: var(--light); transform: scaleX(0); transform-origin: left; pointer-events: none }
.cur { position: fixed; left: 0; top: 0; z-index: 80; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); pointer-events: none; opacity: 0; mix-blend-mode: difference;
  transition: width 300ms var(--ease-out), height 300ms var(--ease-out), margin 300ms var(--ease-out), opacity 200ms }
.cur.on { opacity: 1 } .cur.big { width: 72px; height: 72px; margin: -36px 0 0 -36px }
.cur::after { content: attr(data-l); position: absolute; inset: 0; display: grid; place-items: center; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg); opacity: 0; transition: opacity 200ms }
.cur.big::after { opacity: 1 }

/* nav */
.nav { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding-block: 20px; transition: transform 500ms var(--ease-out), color 400ms; mix-blend-mode: difference; color: #F2EEE6 }
.nav.hide { transform: translateY(-110%) }
.nav .word { font-size: 22px }
.nav .right { display: flex; gap: 28px; align-items: center; font: 500 12.5px var(--mono); letter-spacing: 0.04em }
.nav .right a { text-decoration: none; opacity: .75; transition: opacity 200ms; padding: 14px 4px; margin: -14px -4px } .nav .right a:hover { opacity: 1 }
.clock { font-variant-numeric: tabular-nums; opacity: .75 }
.clock i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; animation: blink 2s steps(1) infinite }
@keyframes blink { 50% { opacity: .25 } }

/* hero */
.hero { position: relative; min-height: 100svh; display: grid; align-content: end; padding-top: calc(80px + env(safe-area-inset-top, 0px)); padding-bottom: 34px; overflow: hidden }
.hero .stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1400px; pointer-events: none }
.hero .frame { position: relative; width: min(66vw, calc((100svh - 220px) * 1.6)); aspect-ratio: 16 / 10; translate: 9vw -6vh; pointer-events: auto }
.hero .in { position: relative; display: grid; gap: clamp(18px, 3vh, 30px); pointer-events: none }
.hero .in > * { pointer-events: auto }
.hero h1 { font-size: clamp(3.4rem, 11.2vw, 12.4rem); line-height: 0.88; letter-spacing: -0.05em; font-weight: 700; font-variation-settings: "wdth" 100, "opsz" 96; max-width: 9ch }
.hero h1 .thin { font-weight: 250; font-variation-settings: "wdth" 76, "opsz" 96; letter-spacing: -0.03em }
.hero .sub { display: grid; grid-template-columns: minmax(0, 36ch) auto; justify-content: space-between; align-items: end; gap: 20px }
.hero .sub p { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); line-height: 1.45 }
.hints { display: grid; gap: 10px; justify-items: end; font: 500 12px var(--mono); letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase }
.hints .sc { display: inline-flex; align-items: center; gap: 10px } .hints .sc i { width: 36px; height: 1px; background: var(--ink-3); transform-origin: left; animation: sc 1.8s var(--ease-io) infinite }
@keyframes sc { 0% { transform: scaleX(0); transform-origin: left } 50% { transform: scaleX(1); transform-origin: left } 51% { transform-origin: right } 100% { transform: scaleX(0); transform-origin: right } }
kbd { font: 500 11px var(--mono); color: var(--ink); border: 1px solid var(--ink-4); border-bottom-width: 3px; border-radius: 7px; padding: 4px 26px 3px; background: var(--bg-2) }
@media (hover: none) { .hints .k { display: none } }

/* the lit frame (shared by hero and panels) */
.frame { overflow: hidden; border-radius: 6px; corner-shape: squircle; background: var(--bg-2); box-shadow: 0 60px 120px -50px oklch(0 0 0 / 0.9), 0 0 0 1px oklch(1 0 0 / 0.05);
  transition: --x 500ms var(--ease-out), --y 500ms var(--ease-out); --x: 50%; --y: 50% }
.frame .shot, .frame .lit { position: absolute; inset: 0; background: var(--img) center / cover no-repeat }
.frame .shot { filter: grayscale(0.65) brightness(0.4) contrast(1.05) }
.frame .lit { -webkit-mask-image: radial-gradient(circle 26vw at var(--x) var(--y), #000 0%, oklch(0 0 0 / 0.5) 40%, transparent 72%); mask-image: radial-gradient(circle 26vw at var(--x) var(--y), #000 0%, oklch(0 0 0 / 0.5) 40%, transparent 72%) }
.frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 30vw at var(--x) var(--y), oklch(0.9 0.11 84 / 0.16), transparent 70%); mix-blend-mode: screen }
.frame:not(.hov) { animation: drift 11s ease-in-out infinite alternate }
html.lights .frame .shot { filter: none } html.lights .frame .lit, html.lights .frame::after, html.lights .grain { opacity: 0 }
@media (hover: none) { .hov-only { display: none } } @media (hover: hover) { .touch-only { display: none } }
@keyframes drift { from { --x: 36%; --y: 40% } to { --x: 64%; --y: 60% } }

/* work: pinned horizontal screening */
.work { position: relative; background: var(--bg) }
.track { display: flex; height: 100svh; will-change: transform }
.panel { flex: 0 0 100vw; height: 100%; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(76px + env(safe-area-inset-top, 0px)) var(--gr) 34px var(--gl); gap: 12px }
.panel .pm { display: flex; justify-content: space-between; font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3) }
.panel .frame { position: relative; justify-self: center; align-self: center; width: min(62vw, calc((100svh - 330px) * 1.6)); aspect-ratio: 16 / 10 }
.panel .foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38ch); gap: 24px; align-items: end }
.panel h2 { font-size: clamp(2.6rem, 7vw, 7.2rem); line-height: 0.9; letter-spacing: -0.05em; font-weight: 650; font-variation-settings: "wdth" 96, "opsz" 96; margin-top: -0.5em; position: relative; z-index: 2 }
.panel .pd { display: grid; gap: 12px; justify-items: start; color: var(--ink-2); font-size: 16px }
.open { display: inline-flex; align-items: center; min-height: 44px; font: 500 12.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink-4); border-radius: 99px; padding: 10px 18px; color: var(--ink); transition: background 250ms, color 250ms, border-color 250ms, transform 150ms }
.open:active { transform: scale(0.97) }
.copy:active { opacity: 0.75 }
.open:hover { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.open.muted { color: var(--ink-3); border-style: dashed }
.panel.intro { align-content: center; grid-template-rows: auto; gap: 28px }
.panel.intro h2 { margin: 0; font-size: clamp(3rem, 13vw, 15rem); font-weight: 250; font-variation-settings: "wdth" 76, "opsz" 96; letter-spacing: -0.04em; line-height: 0.85 }
.panel.intro h2 b { font-weight: 700; font-variation-settings: "wdth" 100, "opsz" 96 }
.panel.intro p { color: var(--ink-2); max-width: 40ch; font-size: 18px }
.panel.intro .arrow { font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; gap: 12px; align-items: center }
.panel.intro .arrow i { width: 60px; height: 1px; background: var(--ink-3) }

/* contact */
.contact { position: relative; padding-block: clamp(120px, 20vh, 240px); display: grid; gap: 30px; justify-items: start; overflow: hidden }
.contact::before { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 90%; background: radial-gradient(ellipse at 50% 100%, oklch(0.9 0.11 84 / 0.18), transparent 60%); pointer-events: none }
.copy { position: relative; display: grid; justify-items: start; gap: 18px; padding: 0; user-select: all; will-change: transform; text-align: left; max-width: 100% }
.copy .addr { font-size: clamp(2.2rem, 8.4vw, 9.6rem); line-height: 0.9; letter-spacing: -0.055em; font-weight: 700; font-variation-settings: "wdth" 100, "opsz" 96; overflow-wrap: anywhere; transition: color 250ms }
.copy:hover .addr { color: var(--light) }
.copy .st { font: 500 11.5px var(--mono); color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; display: grid }
.copy .st > * { grid-area: 1 / 1; transition: opacity 160ms } .copy .st .d { opacity: 0 } .copy.ok .st .i { opacity: 0 } .copy.ok .st .d { opacity: 1; color: var(--light) }
.contact .note { color: var(--ink-3); font-size: 14px; max-width: 46ch }

footer { border-top: 1px solid var(--line); padding-block: 26px max(26px, env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font: 500 12px var(--mono); color: var(--ink-3); letter-spacing: 0.04em }
footer .word { font-size: 15px; color: var(--ink) }

@media (max-width: 860px) {
  .hero { min-height: auto; align-content: start; gap: 24px; padding-bottom: 48px }
  .hero .stage { position: relative; inset: auto; order: 2; padding-inline: var(--gl) var(--gr); perspective: none }
  .hero .frame { width: 100%; translate: 0 0 }
  .hero .in { order: 1 } .hero h1 { max-width: none } .hero .sub { grid-template-columns: 1fr }
  .hints { justify-items: start }
  .panel { padding-top: calc(70px + env(safe-area-inset-top, 0px)); padding-bottom: 24px; gap: 14px; grid-template-rows: auto minmax(0, 1fr) auto }
  .panel .frame { width: min(100%, calc((100svh - 300px) * 1.6)) } .panel h2 { margin-top: -0.3em; font-size: clamp(2.2rem, 11vw, 4rem) } .panel .foot { grid-template-columns: 1fr; gap: 12px }
  .panel .pd { font-size: 15px }
  .panel.intro h2 { font-size: clamp(3rem, 18vw, 7rem) }
  .nav .right .hide-sm { display: none }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important }
  .loader { display: none } .frame { --x: 50%; --y: 50% }
}

/* every screen */
.screens { background: var(--bg); padding-block: clamp(90px, 14vh, 170px) 0; display: grid; gap: clamp(34px, 6vh, 72px) }
.screens-head { display: grid; gap: 16px; max-width: 62ch }
.screens h2 { font-size: clamp(2.4rem, 7vw, 7.6rem); line-height: 0.92; letter-spacing: -0.05em; font-weight: 700; font-variation-settings: "wdth" 100, "opsz" 96 }
.screens p { color: var(--ink-2); max-width: 50ch; font-size: 17px }
.cluster { position: relative; aspect-ratio: 16 / 9; margin-inline: var(--gl) var(--gr); border-radius: 8px }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: clamp(90px, 14vh, 170px) }
.strip figure { margin: 0; position: relative; aspect-ratio: 3 / 2 }
.strip figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; font: 500 11.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 1px 8px oklch(0 0 0 / 0.6) }
.frame.no-drift { animation: none }
.wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em } .wd > span { display: inline-block }
.contact::before { animation: breathe 9s ease-in-out infinite alternate }
@keyframes breathe { from { opacity: 0.7; transform: scale(1) } to { opacity: 1; transform: scale(1.08) } }
@media (min-width: 861px) and (max-width: 1180px) {
  .panel .frame { width: min(80vw, calc((100svh - 330px) * 1.6)) }
  .hero .frame { width: min(74vw, calc((100svh - 220px) * 1.6)); translate: 6vw -4vh }
}
@media (max-width: 860px) { .strip { grid-template-columns: 1fr } .screens { gap: 28px } }

/* hero film: loads only on wide screens without reduced motion; the poster is the still */
.hero .frame .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; pointer-events: none }
.hero .frame.playing .vid { opacity: 1 }
.hero .frame.playing .shot, .hero .frame.playing .lit { visibility: hidden }
.hero .frame.playing::after { opacity: 0.6 }

@media (prefers-reduced-motion: reduce) { .track { display: grid; height: auto } .panel { flex: none; height: auto; padding-block: 28px } }