/* ==========================================================================
   Magic Narwhal — design tokens
   "Electric Ocean": a bright, saturated, high-contrast palette. Navy is the
   only ink colour; acid yellow is the scarcest colour on the page and marks
   the magic (the tusk glint, the hidden hint).
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------------ */
  --paper:  #FBF9F4;  /* warm white canvas */
  --ink:    #0B1030;  /* deep navy — every glyph, every stroke */
  --cyan:   #00F0FF;  /* shallow water */
  --blue:   #1B4DFF;  /* deep water, narwhal body */
  --coral:  #FF7E68;  /* tusk stripes, belly rim, the highlight slab */
  --cream:  #FDF3E3;  /* the narwhal's belly */
  --acid:   #EAFF00;  /* the magic. use sparingly */
  --abyss:  #041B3D;  /* the dive (easter egg only) */
  --abyss-2:#00202E;

  /* --- type -------------------------------------------------------------- */
  --display: 'Sora', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;

  /* fluid display: 44px → 112px */
  --t-display: clamp(2.75rem, 7vw, 7rem);
  --t-body:    clamp(1.0625rem, 1.35vw, 1.375rem);
  --t-mono:    clamp(0.6875rem, 0.85vw, 0.8125rem);

  /* --- space ------------------------------------------------------------- */
  --margin: clamp(1.25rem, 4.5vw, 4rem);
  --stack:  clamp(1.25rem, 2.5vw, 2rem);
  --rule:   3px;
  --water:  clamp(6.5rem, 15vh, 10rem);  /* depth of the wave band */

  /* --- motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --snap:     cubic-bezier(.34, 1.56, .64, 1);

  /* pointer parallax, written by scripts/parallax.js (range -1 … 1) */
  --px: 0;
  --py: 0;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--acid); color: var(--ink); }

:focus-visible {
  outline: var(--rule) solid var(--ink);
  outline-offset: 3px;
}

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

.skip {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 100; padding: .75rem 1.25rem;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}