/* base.css
 * Reset, typography baseline, deck chrome (top header + bottom nav),
 * focus styles, utility classes.
 */

/* ── reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* ── focus ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* ── deck chrome — top header ──────────────────────────── */
/* The chrome sits in a frosted scrim that follows the active
 * slide's ground tone — paper-translucent on light slides,
 * sumi-translucent on dark slides. body.deck-on-dark is
 * toggled by deck.js when the current slide carries .dark.
 * The color/background change fades on a short transition so
 * the swap doesn't snap as you scroll between treatments. */
.deck-chrome {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) var(--slide-pad-x);
  height: var(--chrome-top);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: lowercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink);
  z-index: 50;
  pointer-events: none;
  background: rgba(251, 250, 246, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition:
    background-color 240ms var(--ease-out),
    color 240ms var(--ease-out);
}
body.deck-on-dark .deck-chrome {
  background: rgba(10, 9, 7, 0.94);
  color: var(--paper);
}

/* extend the scrim to cover the chapter ribbon band underneath */
.deck-chrome::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 28px;
  background: linear-gradient(
    180deg,
    rgba(251, 250, 246, 0.86) 0%,
    rgba(251, 250, 246, 0) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  transition: background-image 240ms var(--ease-out);
}
body.deck-on-dark .deck-chrome::after {
  background: linear-gradient(
    180deg,
    rgba(10, 9, 7, 0.94) 0%,
    rgba(10, 9, 7, 0) 100%
  );
}

.deck-chrome a, .deck-chrome button { pointer-events: auto; }

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
}
.brand-lockup .brand-mark {
  display: inline-block;
  width: 22px; height: 22px;
  background-image: url("../../Assets/ophelia_branding/150_Logo%20White.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
body.deck-on-dark .brand-lockup .brand-mark {
  background-image: url("../../Assets/ophelia_branding/Logo.png");
}
.brand-lockup .brand-x { opacity: 0.6; }
.brand-lockup .sp-icon {
  display: inline-block;
  width: 22px; height: 22px;
  background-image: url("../../Assets/snowpeak%20branding/snow%20peak%20icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* PNG is black — keep it black on light slides. */
}
body.deck-on-dark .brand-lockup .sp-icon {
  /* On dark slides, flip to white to match the Ophelia mark swap. */
  filter: brightness(0) invert(1);
}

.deck-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-mono);
  text-transform: lowercase;
  opacity: 0.85;
}

/* ── deck container ────────────────────────────────────── */
.deck {
  display: block;
  width: 100%;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* loading state shown until deck.js finishes hydrating */
.loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--slide-pad-y) var(--slide-pad-x);
  background: var(--paper);
}
.loading .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
}
.loading h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-2xl);
  letter-spacing: var(--tr-tight);
  margin: 0 0 var(--sp-3);
  color: var(--ink);
}
.loading p {
  color: var(--ink-soft);
  max-width: var(--measure-narrow);
  margin: 0 auto;
}

/* ── nav (bottom bar) ──────────────────────────────────── */
.deck-nav {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--chrome-bottom);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--slide-pad-x);
  background: linear-gradient(to top,
    rgba(244, 239, 230, 0.94) 0%,
    rgba(244, 239, 230, 0.0) 100%);
  z-index: 50;
  pointer-events: none;
}
.deck-nav > * { pointer-events: auto; }

.nav-button {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ink-mute);
  border-radius: 999px;
  background: rgba(244, 239, 230, 0.7);
  transition:
    color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out);
}
.nav-button:hover { border-color: var(--ink); background: var(--paper); }
.nav-button:disabled { opacity: 0.35; cursor: default; }

.slide-count {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 7ch;
  text-align: right;
}

/* hide chrome / nav when printing */
@media print {
  .deck-chrome, .deck-nav { display: none !important; }
}

/* ── utility classes ───────────────────────────────────── */
.u-mono     { font-family: var(--font-mono); }
.u-serif    { font-family: var(--font-serif); }
.u-italic   { font-style: italic; }
.u-lower    { text-transform: lowercase; }
.u-upper    { text-transform: uppercase; }
.u-center   { text-align: center; }
.u-soft     { color: var(--ink-soft); }
.u-mute     { color: var(--ink-mute); }
.u-ember    { color: var(--ember); }
.u-tracked  { letter-spacing: var(--tr-mono); }

.measure-narrow { max-width: var(--measure-narrow); }
.measure-mid    { max-width: var(--measure-mid); }
.measure-wide   { max-width: var(--measure-wide); }