/* ==========================================================================
   Yrsvald — Saga page
   Loaded only by saga.html, after sections.css. Most styling comes from the
   shared css (components.css, sections.css); this file only adds what the
   saga page needs on top: the compact lore hero and the premise column.
   ========================================================================== */

/* ---- Compact hero (~40vh) ------------------------------------------------- */

.saga-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-block: var(--sp-6);
  isolation: isolate;
}

.saga-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  z-index: -2;
}

/* flat, heavy scrim — band-caelador's gold/umber palette sits close to our
   gold text color, so contrast needs a strong dark wash, not a light gradient */
.saga-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(0.16 0.02 265 / 0.78) 0%,
    oklch(0.16 0.02 265 / 0.9) 100%
  );
  z-index: -1;
}

.saga-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-1);
  padding-inline: var(--sp-3);
  max-width: 720px;
  margin-inline: auto;
}

.saga-hero__eyebrow {
  display: block;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  text-shadow: 2px 2px 0 oklch(0 0 0 / 0.55);
}

.saga-hero__title {
  color: var(--gold);
  font-size: clamp(1.75rem, 1.15rem + 3.2vw, 3.25rem);
  text-shadow: 3px 3px 0 oklch(0 0 0 / 0.55);
  max-width: 20ch;
}

/* ---- Premise column --------------------------------------------------------- */

.saga-premise {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 65ch;
  margin-inline: auto;
  color: var(--ink);
}