/* =========================================================
   BASE — reset, document, typography, accessibility.
   ========================================================= */

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

html {
  scroll-behavior: smooth;
  /* How far short of a target an anchor jump stops. Smaller = scrolls further,
     so the heading ends up nearer the navbar. The section's own top padding
     still sits above the heading, so this can go below the nav height without
     tucking anything underneath it.
     Raise this value if you want MORE space above the heading instead. */
  scroll-padding-top: calc(var(--nav-h) - 2rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

/* Film grain — sits above the page, below the chrome. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  transition: opacity var(--dur) var(--ease-out);
}

/* Typography ---------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

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

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--gold);
  color: var(--accent-contrast);
}

/* Scrollbar ----------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* Accessibility ------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: var(--accent-contrast);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

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

/* Layout utilities ---------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.section {
  position: relative;
  padding: var(--section-y) var(--gutter);
  /* Belt-and-braces with scroll-padding-top, for browsers that land on the
     element rather than the scroll container. Keep the two in step. */
  scroll-margin-top: calc(var(--nav-h) - 2rem);
}

.section--alt {
  background: var(--bg-alt);
}

/* Hairline rule between stacked sections. */
.section--alt::before,
.section--alt::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.section--alt::before {
  top: 0;
}
.section--alt::after {
  bottom: 0;
}

/* Scroll reveal ------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  body::after,
  .site-nav,
  .float-stack,
  .scroll-progress,
  .lightbox {
    display: none !important;
  }
}