@import url('./tokens.css');

:root {
  /* Named stacking order replaces the course's SCSS z() function (5 down to 1). */
  --z-preloader: 5; --z-transition: 4; --z-navigation: 3; --z-content: 2; --z-canvas: 1;
  /* Route and overlap: checked-source note. Hold and timeout: approved proof. */
  --route-duration: 1500ms; --transition-tail: 200ms; --loader-hold: 3000ms; --load-timeout: 6000ms;
  color: var(--color-ink);
  background: var(--color-bg);
  font-family: var(--font-body);
}

/* Design-coordinate sizing from the shipped-source note: 1920 desktop, 750 phone. */
html { font-size: calc(100vw / 1920 * 10); scrollbar-gutter: stable; }
@media (max-width: 767px) { html { font-size: calc(100vw / 750 * 10); } }
* { box-sizing: border-box; }
body { margin: 0; background: transparent; }
body, button, a { -webkit-tap-highlight-color: transparent; }
/* A real-pixel floor keeps body text readable as the design-coordinate root shrinks. */
body { font-size: max(16px, 2rem); line-height: 1.5; }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: var(--space-1); }
button, input { font: inherit; }
img { display: block; width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: var(--space-2); }
.content { position: relative; z-index: var(--z-content); }
.js .content { opacity: 0; visibility: hidden; }
.content:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: var(--space-4); left: var(--space-4); z-index: var(--z-preloader); padding: var(--space-3); background: var(--color-bg); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

/* These are the few Lenis layout rules needed for a normal document-scrolling site. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* A preference change takes effect without a reload. Content always has a native version. */
.reduced-motion .content { opacity: 1 !important; visibility: visible !important; }
.reduced-motion .line-inner { transform: none !important; transition: none !important; }
.boot-failed .content { opacity: 1 !important; visibility: visible !important; }
.boot-failed .line-inner { transform: none !important; transition: none !important; }
.boot-failed .site-canvas { display: none; }
.boot-failed img[data-gl-ready] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .content { opacity: 1 !important; visibility: visible !important; }
  .preloader, .site-canvas { display: none !important; }
  .line-inner { transform: none !important; }
  img[data-gl-ready] { opacity: 1 !important; }
}