/* Night film (Zanir's reference, 2026-10-22): black and white only. A skyline of lit windows, blossoms falling, a letterboxed frame,
   film grain. The only accent is light itself. Loaded after vex.css; overrides tokens, adds the grain and the letterbox. */
html:root {
  --bg: #050505;
  --panel: #0d0d0d;
  --ink: #ecebe7;
  --ink-dim: #9a9995;
  --ink-faint: rgba(236, 235, 231, .2);
  --line: rgba(236, 235, 231, .1);
  --gold: #f4f2ea;            /* "moonlight": the accent everything used to call gold */
  --ok: #cfd8cf;
  --bad: #d9b3ab;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Jost", "Futura", system-ui, sans-serif;
}
body { font-weight: 300; letter-spacing: .01em; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.015em; }
.mark b { color: var(--ink); }
.eyebrow { color: var(--ink-dim); letter-spacing: .34em; }
.lede, .dim { color: var(--ink-dim); }

/* film grain over everything, never in the way */
body::after { content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* buttons: light on night, inverted on hover */
.btn, #intake-go, #order-go { background: var(--ink); border-color: var(--ink); color: #050505; font-weight: 400; letter-spacing: .2em; }
.btn:hover, #intake-go:hover, #order-go:hover { background: transparent; color: var(--ink); }
.btn.ghosted { background: transparent; color: var(--ink); border-color: var(--ink-faint); }

/* cards and choices: lit, not coloured */
.opt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 40px 90px -40px rgba(255, 255, 250, .28); }
.opt:hover { border-color: rgba(236, 235, 231, .45); }
.choice input:checked + span { border-color: var(--ink); background: rgba(236, 235, 231, .08); color: var(--ink); }
#order-box, #ordered { border-color: var(--line); }

/* the letterbox: a 2.39:1 film band, the same frame blurred above and below it (the phone-video look) */
.letterbox { position: relative; overflow: hidden; background: #000; }
.letterbox .blur { position: absolute; inset: -10%; filter: blur(28px) brightness(.55); transform: scale(1.1); }
.letterbox .band { position: relative; aspect-ratio: 2.39 / 1; width: 100%; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 30px 80px -20px #000; }

/* the waiting line and the reveal curtain, in moonlight */
.wait-line i { background: linear-gradient(90deg, transparent, var(--ink)); }
.veil { background: radial-gradient(60% 40% at 50% 44%, rgba(255, 255, 250, .06), transparent 75%), #030303; }
.petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.waiting.dusting { position: relative; }
.waiting.dusting .petals { height: auto; bottom: 0; }