/* ==========================================================================
   WREN — base.css
   Reset, typography roles, focus styles, grain overlay.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--concrete) var(--tunnel);
}

body {
  background: var(--tunnel);
  color: var(--tile);
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--leading-ui);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--sodium);
  color: var(--tunnel);
}

/* ---- Typography roles -------------------------------------------------- */

/* Display / wayfinding — Archivo Expanded, all-caps station signage */
.t-display {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-sign);
  line-height: var(--leading-tight);
}

/* Editorial — Newsreader, her storytelling voice */
.t-editorial {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--text-ed);
  line-height: var(--leading-ed);
  max-width: var(--measure-ed);
  color: var(--tile);
}

.t-editorial em,
.t-editorial i {
  font-style: italic;
}

/* Utility — Space Mono, metadata only */
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--concrete);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-sign);
  line-height: var(--leading-tight);
}

/* Links that represent her (content links) draw a sodium underline */
.link-voice {
  color: var(--sodium);
  background-image: linear-gradient(var(--sodium), var(--sodium));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left 100%;
  transition: background-size 0.35s var(--ease-house);
  padding-bottom: 2px;
}

.link-voice:hover,
.link-voice:focus-visible {
  background-size: 100% 1px;
}

/* ---- Focus ------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--sodium);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: calc(var(--z-nav) + 1);
  background: var(--sodium);
  color: var(--tunnel);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ---- Layout helpers ----------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--page-max));
  margin-inline: auto;
}

main {
  display: block;
}

/* ---- Grain overlay ------------------------------------------------------ */
/* Fixed full-viewport film grain: SVG turbulence tile, ~4% opacity,
   blend overlay. Jitters between 8 positions; static under reduced motion. */
body::after {
  content: "";
  position: fixed;
  inset: -100px;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: grain-jitter 0.9s steps(8) infinite;
}

/* Hover-intensified grain hook (used by media tiles later):
   .grain-boost momentarily raises grain via a duplicate layer */

@keyframes grain-jitter {
  0%   { transform: translate(0, 0); }
  12.5% { transform: translate(-24px, 18px); }
  25%  { transform: translate(16px, -30px); }
  37.5% { transform: translate(-30px, -12px); }
  50%  { transform: translate(22px, 26px); }
  62.5% { transform: translate(-14px, 32px); }
  75%  { transform: translate(30px, -18px); }
  87.5% { transform: translate(-20px, -26px); }
  100% { transform: translate(0, 0); }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}