/* ==========================================================================
   PAGE — Thermana Savna 2026 specific glue.
   Only content-level decisions live here (which section is dark/raised,
   one-off spacing). Everything reusable belongs in components.css.
   ========================================================================== */

.page-section:nth-of-type(odd) { background: var(--color-bg); }
.page-section:nth-of-type(even) { background: var(--color-bg-raised); }

/* Light-section modifier — flips the whole token set to dark-on-warm-white
   for one editorial breather (used on the Quote section). Every component
   inside reads its colors from these custom properties, so nothing else
   needs a light-mode variant written by hand. */
.page-section.page-section--light {
  --color-bg: #f6f2ea;
  --color-bg-raised: #efe9dc;
  --color-ink: #1b1712;
  --color-ink-dim: #635d51;
  --color-ink-faint: #948d7d;
  --color-line: rgba(27, 23, 18, 0.14);
  --color-line-strong: rgba(27, 23, 18, 0.3);
  background: var(--color-bg);
}

.c-showcase__parallax { will-change: transform; }

/* Photography rhythm: generous air between the four frames instead of a
   tight stack — was reading as cluttered at --space-sm. */
.c-showcase__frame + .c-showcase__grid,
.c-showcase__grid + .c-showcase__frame {
  margin-top: var(--space-lg) !important;
}
.c-showcase__frame:first-child { margin-bottom: var(--space-lg) !important; }

/* Number badge used in section eyebrows, e.g. "01 — PHOTOGRAPHY" */
.u-eyebrow__num { color: var(--color-ink-faint); margin-right: var(--space-3xs); }

/* Behind-the-scenes split layout (image + editorial text) */
.c-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-section) var(--container-pad);
}

.c-split__frame { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.c-split__frame img { width: 100%; height: 100%; object-fit: cover; }

.c-split__body .u-eyebrow { margin-bottom: var(--space-sm); }

.c-split__title {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.c-split__text { color: var(--color-ink-dim); font-size: var(--size-lead); max-width: 46ch; }

@media (max-width: 860px) {
  .c-split { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* Render row — the 3 raw Thermana renders that started the whole project,
   shown as visual proof for the Behind the Scenes narrative. */
.c-render-row {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad) var(--space-section);
}

.c-render-row__label {
  font-family: var(--font-display);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-sm);
}

.c-render-row__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.c-render-row__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-raised);
}

.c-render-row__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(0.96);
  transition: filter var(--dur-base) var(--ease-out);
}

.c-render-row__item:hover img { filter: saturate(1) contrast(1); }

@media (max-width: 640px) {
  .c-render-row__grid { grid-template-columns: 1fr; }
}

/* Preload spinner (removed once fonts/hero image are ready) */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}

.page-loader__mark {
  font-family: var(--font-display);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.page-loader.is-hidden { opacity: 0; visibility: hidden; }

/* ==========================================================================
   V2 EDITION — Thermana glue for the shared edition.css language.
   All edition blocks in index.html are <div>, NOT <section> — this page
   relies on .page-section:nth-of-type alternation, and extra <section>
   elements would silently shift every section's background parity.
   ========================================================================== */

/* Edition cover typography lives INSIDE the pinned scrub hero (.c-hero) —
   same pattern as Isokon N°002; must paint above the video + its scrim. */
.c-hero .ed-cover__masthead, .c-hero .ed-cover__title, .c-hero .ed-cover__meta { z-index: 2; }