/* ──────────────────────────────────────────────
   BASE — reset, design tokens, page container
   ────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg-page: #000;
  --bg-hero: #e0d5c8;
  --bg-footer: #f0ebe4;
  --bg-section-01: #2e3a4a;
  --bg-section-02: #252f3c;
  --bg-section-03: #1c2530;
  --bg-section-04: #141c26;
  --bg-section-05: #0e131b;
  --bg-section-06: #080b10;

  /* Type on light surfaces */
  --text-strong: #2c2520;
  --text-body: #5a5045;
  --text-muted: #8a7f72;
  --text-footer: #6b5f52;
  --text-footer-soft: #9a8d7e;
  --text-footer-faint: #b5a99a;
  --rule-light: #c8c0b6;

  /* Accents — the colored words running through the text */
  --c-dusk: #c4956e;
  --c-dark: #6b8aad;
  --c-light: #e2c87a;
  --c-candle: #d4a45a;
  --c-glow: #b8d0e8;
  --c-red: #c97a7a;
  --c-green: #7ab89a;

  /* Links */
  --link: #7a9cc0;
  --link-underline: rgba(122, 156, 192, 0.4);
  --link-underline-strong: rgba(122, 156, 192, 0.5);

  /* Lines and layers on dark surfaces */
  --hairline: rgba(255, 255, 255, 0.08);

  /* Layout */
  --col-width: 620px;
  --col-padding: 28px;
  --col-padding-sm: 20px;

  /* Stacking order, in one place so layers can't drift apart */
  --z-hover-preview: 100;
  --z-lang-switch: 800;
  --z-player-expanded: 900;
  --z-lightbox: 1000;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: var(--bg-page);
}

.col {
  max-width: var(--col-width);
  margin: 0 auto;
  padding: 0 var(--col-padding);
}

@media (max-width: 600px) {
  .col {
    padding: 0 var(--col-padding-sm);
  }
}