/* Shared by every page: tokens, reset, grain, cursor ring, clock, motion helpers, marquee. */

:root {
  color-scheme: dark;
  --bg: #141311;
  --surface: #1d1c19;
  --ink: #efebe2;
  --muted: #9a9486;
  --line: #2f2d28;
  --accent: #f06a3c;
  --paper: #e9e5dc;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }

/* film grain */
body::after { content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06;
  background: 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-3%,2%) } 50% { transform: translate(2%,-3%) } 75% { transform: translate(-2%,-1%) } }

/* cursor */
.cursor { position: fixed; top: 0; left: 0; z-index: 80; pointer-events: none; display: none; }
.cursor.on { display: block; }
.cursor .ring { position: absolute; width: 34px; height: 34px; margin: -17px; border: 1.5px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: transparent;
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s, color .2s; }
.cursor.hover .ring { width: 54px; height: 54px; margin: -27px; border-color: var(--accent); }
.cursor.big .ring { width: 92px; height: 92px; margin: -46px; background: var(--accent); border-color: var(--accent); color: #fff; }
.cursor.big.text .ring { background: none; border-color: transparent; font-size: 13px; }

/* live UK clock */
.clock { font: 400 12px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3fb36b; box-shadow: 0 0 0 0 #3fb36b88; animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px #3fb36b00; } }

/* motion helpers */
@keyframes rise { from { transform: translateY(110%); } }
.fade { animation: fadeUp 1s var(--ease) both; animation-delay: var(--d, .4s); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
.char { display: inline-block; transition: transform .5s var(--ease), color .3s; }
.char:hover { transform: translateY(-.1em) rotate(-6deg); color: var(--accent); }

/* marquee */
.marquee { display: flex; white-space: nowrap; padding: 18px 0; }
.marquee-track { display: flex; flex: none; will-change: transform; }
.marquee span { padding: 0 28px; display: inline-flex; align-items: center; gap: 56px; }
.star { color: var(--accent); font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}