/* NX Century v2 : tokens + resets. Light theme is the default appearance. */

:root {
  /* palette : light (default) */
  /* Film grain tile. Inline feTurbulence: no request, resolution-independent,
     and the frequency is tunable in one place. */
  /* Finer, denser tile for the continuously drifting layer. */
  --film-noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='fn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23fn)' opacity='0.6'/%3E%3C/svg%3E");
  --film-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23fg)' opacity='0.55'/%3E%3C/svg%3E");
  --paper: #f6f1e7;
  --paper-2: #ede6d6;
  --ink: #111008;
  --ink-soft: #3d382e;
  --muted: #6f6757;
  --red: #ff2a2a;
  --red-deep: #d11414;
  --line: rgba(17, 16, 8, 0.22);
  --line-strong: rgba(17, 16, 8, 0.55);
  --card-bg: #f9f5ec;
  --shadow: 0 18px 50px rgba(17, 16, 8, 0.12);

  /* type */
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;

  /* scale */
  --text-xs: 0.72rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.3rem;

  /* space */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 7rem;

  --radius-card: 26px;
  --radius-pill: 999px;
  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --header-h: 84px;
}

html[data-theme="dark"] {
  --paper: #0e0d0a;
  --paper-2: #171511;
  --ink: #f2ecdf;
  --ink-soft: #cfc8b8;
  --muted: #99917f;
  --line: rgba(242, 236, 223, 0.22);
  --line-strong: rgba(242, 236, 223, 0.55);
  --card-bg: #14120e;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }

/* No smooth scrolling on the root. It animates every programmatic scroll,
   and while that animation is running any real scroll input fights it, which
   reads as the page jumping or snapping back. Anchor links landing instantly
   is a fair trade for a page that never argues with the wheel. */
html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

h1, h2, h3, h4, p { margin: 0; }

ul[role="list"] { list-style: none; margin: 0; padding: 0; }

address { font-style: normal; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 200;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

::selection { background: var(--red); color: #fff; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

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