:root {
  --ink: #0e0e0e;
  --paper: #f2efe8;
  --signal: #ff3b2f;
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: rgba(242, 239, 232, .62);
  --line: rgba(242, 239, 232, .22);
  --glass: rgba(14, 14, 14, .55);
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r: 8px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.65, 0, .35, 1);
}
[data-theme="light"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: rgba(14, 14, 14, .62);
  --line: rgba(14, 14, 14, .18);
  --glass: rgba(242, 239, 232, .7);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden; transition: background .3s, color .3s;
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--r);
  font-weight: 600; font-size: 15px; transition: transform .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--paper); color: var(--ink); }
.btn--ghost { border: 1px solid rgba(242, 239, 232, .5); color: var(--paper); }
.btn--ghost:hover { background: rgba(242, 239, 232, .12); }
.btn--pill { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 999px; background: var(--fg); color: var(--bg); }

/* Viewfinder corner brackets (shared by intro + hero) */
.vf-corner { position: absolute; width: 28px; height: 28px; border: 0 solid currentColor; }
.vf-corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vf-corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vf-corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.vf-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.placeholder { min-height: 60vh; display: grid; place-items: center; color: var(--muted); font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}