:root {
  --bg: oklch(98% 0.004 240);
  --surface: oklch(100% 0 0);
  --fg: oklch(15% 0.02 100);
  --muted: oklch(40% 0.02 100);
  --border: oklch(15% 0.02 100);
  --accent: oklch(60% 0.22 25);
  --font-display: 'Times New Roman', 'Iowan Old Style', Georgia, serif;
  --font-body: ui-monospace, 'IBM Plex Mono', 'JetBrains Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
a { color: inherit; }
button { font: inherit; }

.topbar { height: 72px; border-bottom: 2px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; position: relative; z-index: 2; background: var(--bg); }
.brand { font: 600 26px/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; }
.status { font-size: 12px; letter-spacing: .08em; display: flex; gap: 10px; align-items: center; }
.status i { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; animation: blink 1.5s steps(2) infinite; }

.hero { min-height: calc(100svh - 72px); display: grid; grid-template-columns: minmax(260px, .7fr) minmax(320px, 1.3fr); grid-template-rows: 1fr auto; border-bottom: 2px solid var(--border); }
.headline { padding: clamp(28px, 4vw, 72px) 3vw; border-right: 2px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.headline p, .manifesto span { margin: 0; font-size: 12px; letter-spacing: .08em; }
.headline h1 { font: 400 clamp(66px, 9vw, 170px)/.78 var(--font-display); letter-spacing: -.04em; margin: 8vh 0 0; }

.video-stage { position: relative; display: block; padding: 0; border: 0; background: var(--fg); overflow: hidden; cursor: pointer; touch-action: none; min-height: 62vh; color: var(--surface); }
.video-stage video { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.08); transition: filter .16s linear, transform .16s linear; }
.video-stage::after { content: ""; position: absolute; inset: 0; border: 0 solid var(--accent); pointer-events: none; transition: border-width .12s; }
.video-stage.is-pressing::after { border-width: 10px; }
.video-stage.is-pressing video { filter: grayscale(0) contrast(1.04); transform: scale(1.012); }
.hold-label, .sound-label { position: absolute; background: var(--surface); color: var(--fg); border: 2px solid var(--border); padding: 12px 15px; font-weight: 600; letter-spacing: .08em; font-size: 12px; }
.hold-label { left: 18px; bottom: 18px; }
.sound-label { right: 18px; top: 18px; }
.is-pressing .hold-label { background: var(--accent); color: var(--surface); }
.instruction { grid-column: 1 / -1; margin: 0; padding: 18px 3vw; border-top: 2px solid var(--border); text-align: center; font-weight: 600; letter-spacing: .08em; font-size: 13px; }

.manifesto { min-height: 52vh; display: grid; grid-template-columns: 30% 70%; border-bottom: 2px solid var(--border); }
.manifesto span { padding: 32px 3vw; border-right: 2px solid var(--border); }
.manifesto p { margin: 0; padding: clamp(34px, 6vw, 100px); font: 400 clamp(36px, 5vw, 84px)/.98 var(--font-display); letter-spacing: -.025em; max-width: 20ch; }

footer { padding: 3vw; background: var(--fg); color: var(--surface); }
.banner { position: relative; width: 100%; aspect-ratio: 3 / 1; overflow: hidden; border: 2px solid var(--surface); background: var(--muted); }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.1) brightness(.72); }
.banner-copy { position: absolute; inset: 0; padding: 3vw; display: flex; flex-direction: column; justify-content: space-between; }
.banner-copy b { font: 400 clamp(52px, 10vw, 160px)/.8 var(--font-display); letter-spacing: -.04em; }
.banner-copy span { align-self: flex-end; font-size: 12px; letter-spacing: .08em; background: var(--surface); color: var(--fg); padding: 9px 12px; }
.socials { display: grid; grid-template-columns: .65fr .8fr 1.55fr; margin-top: 18px; border: 2px solid var(--surface); }
.socials a { min-height: 64px; display: grid; place-items: center; text-decoration: none; font-weight: 600; letter-spacing: .08em; border-right: 2px solid var(--surface); transition: background .12s, color .12s; }
.socials a:last-child { border-right: 0; }
.socials a:hover, .socials a:focus-visible { background: var(--surface); color: var(--fg); outline: 0; }
.socials a:focus-visible, .video-stage:focus-visible { box-shadow: inset 0 0 0 4px var(--accent); }

@keyframes blink { 50% { opacity: .2; } }
@media (max-width: 760px) {
  .topbar { height: 62px; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .headline { min-height: 36vh; border-right: 0; border-bottom: 2px solid var(--border); }
  .headline h1 { margin-top: 50px; font-size: clamp(62px, 22vw, 105px); }
  .video-stage { min-height: 58vh; }
  .instruction { grid-column: 1; line-height: 1.5; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto span { border-right: 0; border-bottom: 2px solid var(--border); }
  .manifesto p { padding: 48px 6vw 70px; font-size: clamp(36px, 12vw, 58px); }
  footer { padding: 18px; }
  .banner-copy b { font-size: 14vw; }
  .banner-copy span { display: none; }
  .socials { grid-template-columns: 1fr; }
  .socials a { border-right: 0; border-bottom: 2px solid var(--surface); }
  .socials a:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }