/* ==========================================================================
   Daena Agency — Base: reset, elements, typography primitives, utilities
   After dark. See tokens.css for the direction.
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
  background: var(--bg);
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Film grain over the entire page. This is the single most important rule
   in the system — it is what stops the dark washes reading as flat CSS
   gradients. Fixed, so the grain belongs to the screen, not the content. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background-image: var(--grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

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

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

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

ul, ol { list-style: none; padding: 0; }

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

hr {
  border: 0;
  height: 1px;
  background: var(--gradient-hairline);
}

::selection {
  background: var(--sodium-500);
  color: var(--stock-950);
}

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

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

/* Bebas Neue is uppercase-only and condensed. Headings are set in it and
   inherit that character; body copy never is. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h3 { font-size: var(--text-xl); }

/* h4–h6 drop back to the body face — at small sizes a condensed all-caps
   display face stops being legible and starts being decoration. */
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  text-wrap: balance;
}
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-subtle);
}

p { text-wrap: pretty; }

strong, b { font-weight: var(--weight-semibold); color: var(--text); }

small { font-size: var(--text-sm); }

code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }

code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  color: var(--sodium-400);
}

/* Display headline — marquee lettering */
.display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Type-specimen helper: looks like a heading without being one */
.as-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  max-width: 56ch;
}

/* The lit words in a headline */
.text-gradient { color: var(--sodium-500); }
.text-teal { color: var(--teal-400); }

/* ---------- Night marks ---------- */

/* Marquee bulb rail — put it under a header or around a panel */
.bulbs {
  height: 14px;
  background-image: var(--bulbs);
  background-size: var(--bulbs-size);
  opacity: 0.85;
}

/* Small uppercase mono caption */
.stub-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-subtle);
  display: block;
}

/* ---------- Prose ---------- */
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose p, .prose li { color: var(--text-muted); }
.prose ul { display: grid; gap: var(--space-2); }
.prose ul li { padding-left: var(--space-5); position: relative; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sodium-500);
}
.prose a {
  color: var(--sodium-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--sodium-500); }

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); position: relative; }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* A section lit by the room lamps. Grain from body::after sits over it. */
.section--lit { position: relative; isolation: isolate; }
.section--lit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wash-room);
  pointer-events: none;
}

.stack { display: grid; gap: var(--space-4); }
.stack-sm { display: grid; gap: var(--space-2); }
.stack-lg { display: grid; gap: var(--space-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.center { text-align: center; }
.center .lede, .center .section-head__text { margin-inline: auto; }

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.mono { font-family: var(--font-mono); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

.full-bleed-divider {
  height: 1px;
  background: var(--gradient-hairline);
  border: 0;
}

.visually-hidden {
  position: absolute !important;
  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: var(--space-4);
  top: -100px;
  z-index: var(--z-toast);
  background: var(--sodium-500);
  color: var(--stock-950);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* Grid helpers */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
  }
  .grid--split-wide { grid-template-columns: 0.9fr 1.1fr; }
}

/* ---------- Scroll reveal ----------
   Opt-IN. Content is visible by default and only hidden once main.js has
   confirmed the element starts below the fold and armed it. Hiding
   everything up front means one JS failure blanks the hero.
   -------------------------------------------------------------------- */
.reveal[data-reveal-armed] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal[data-reveal-armed].is-visible { opacity: 1; transform: none; }

@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;
    scroll-behavior: auto !important;
  }
  .reveal[data-reveal-armed] { opacity: 1; transform: none; }
}