/* =========================================================
   BASE.CSS — CLEAN BASE
   Vain muuttujat, reset ja yleinen sivupohja.
   Ei taustakuvia, ei fixed-pseudoelementtejä.
   ========================================================= */

:root {
  --font-inter: "Inter", sans-serif;
  --font-vollkorn: "Vollkorn SC", serif;
  --font-yesteryear: "Yesteryear", cursive;
  --font-raleway: "Raleway", sans-serif;
  --font-dimension: "Source Sans Pro", Helvetica, sans-serif;
  --font-cormorant: "Cormorant Garamond", serif;
  --font-cinzel: "Cinzel", serif;

  --text-light: #ffffff;
  --yellow: #faba00;
  --link-hover: var(--yellow);

  --banner-top: 10px;
  --banner-height: 54px;
  --banner-radius: 26px;
  --banner-visual-side-gap: clamp(16px, 4vw, 72px);

  --section-gap: 18px;
  --section-top-safe: calc(var(--banner-top) + var(--banner-height) + 34px);
  --section-bottom-safe: 96px;
  --section-side-safe: clamp(18px, 4vw, 40px);
  --section-content-max: 980px;
  --text-max: 780px;
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: #050608;
}

body {
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--text-light);
  background: #050608;
  font-family: var(--font-inter);
}

body.overlay-open,
body.guide-open,
body.guide-mode-active {
  overflow: hidden;
}

a {
  transition: color 0.18s ease;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
}

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

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

.page-bg-media {
  display: none;
}