/* ── Gate Screen ────────────────────────────────────────── */
.screen-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--screen-padding);
  text-align: center;
  gap: var(--stack-gap);
  background: var(--ink);
}
.gate-title {
  font-size: var(--title-size);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  max-width: 16ch;
}
.gate-subtitle {
  font-size: var(--small-size);
  letter-spacing: 0.15em;
  color: var(--papyrus-dim);
}
.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 300px;
}
.gate-input {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  background: rgba(235,226,211,0.04);
  /* Stronger hairline gold border at rest so the input reads as a vessel,
     not a hole punched in the dark. */
  border: 1px solid rgba(201,166,89,0.45);
  border-radius: 3px;
  color: var(--papyrus);
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 0.2em;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}
.gate-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
}
.gate-input.shake {
  animation: shake 0.4s var(--ease);
  border-color: var(--terracotta);
}
@keyframes shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
.gate-error {
  font-size: var(--small-size);
  color: var(--terracotta);
  min-height: 1.2em;
}

/* ── Home Hub ───────────────────────────────────────────── */
.screen-home {
  padding: var(--screen-padding);
  padding-top: calc(var(--screen-padding) + env(safe-area-inset-top, 0px));
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 4vw, 1.8rem);
  position: relative;
  /* Establish a stacking context so the .home-sky-overlay (position: fixed)
     paints under the home content without escaping into other layers. */
  isolation: isolate;
}

/* The home hub paints over a warm-ink ground note so the sky overlay's
   eclipse colour reads as actual dark NIGHT rather than blending into the
   navy body bg used by every other screen.

   We do this on a fixed pseudo-element layered between body bg (navy) and
   the home content, so the overlay (z-index:-1) sits above this dark base
   and tints it; non-home screens still inherit the navy default. */
.screen-home::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--ink);
  pointer-events: none;
}

/* Sky-tint overlay — paints at the top of the viewport while the user
   scrolls. JS sets `background` to a gradient whose top colour follows the
   sun's journey (light predawn → eclipse dusk → daytime blue → sunset
   amber → navy night). Gradient fades to transparent below 60% so the
   lower viewport stays pure ink and body text never washes out.
   z-index: -1 places it at the floor of the .screen-home stacking context
   so EVERY sibling (including .home-sun-wrap with position: sticky) paints
   above it without needing any z-index gymnastics on the children. */
.home-sky-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* JS-set background. Default to transparent so SSR / before-paint state
     doesn't flash a tint. */
  background: transparent;
  /* Smooth handoff between adjacent scroll-driven updates without animating
     the rAF-driven repaints (which already run at frame rate). */
  will-change: background;
}
/* Sticky sun / moon */
.home-sun-wrap {
  position: sticky;
  top: 1rem;
  z-index: 10;
  display: flex;
  justify-content: center;
  pointer-events: none;
  /* negative margin so it doesn't push header down too much */
  margin-bottom: -0.5rem;
}
.home-sun-svg {
  width: clamp(64px, 16vw, 88px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(201,166,89,0.3));
  transform-origin: 50% 50%;
  /* Scroll-driven values are written by JS; the only transition is on
     filter so the brightness shift across phases reads as a glow rather
     than a step. transform/opacity stay hard-coupled to scroll position
     so reverse-scroll retraces the exact same path. */
  transition: filter 280ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}
@media (prefers-reduced-motion: reduce) {
  .home-sun-svg { transition: none; }
}

.home-header {
  text-align: center;
  padding: clamp(0.5rem, 3vw, 1rem) 0 clamp(0.5rem, 2vw, 1rem);
}
.home-header .eyebrow { margin-bottom: 0.5rem; }
/* Dates row beneath the title — Cormorant Italic at body size, so the
   dateline reads as the same editorial voice as the title above
   instead of switching to a sans-serif "metadata" tone. */
.home-dates {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.home-arcs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.home-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.home-secondary .arc-card {
  padding: clamp(0.9rem, 3vw, 1.2rem) clamp(0.7rem, 2.5vw, 1rem);
}

/* ── Home footer: Solar Barque + Ozymandias ─────────────── */
.home-footer {
  margin-top: clamp(1.2rem, 3.5vw, 1.8rem);
  padding-top: clamp(0.8rem, 2.5vw, 1.2rem);
  border-top: 1px solid rgba(201,166,89,0.15);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.barque-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto 0.5rem;
  filter: drop-shadow(0 0 16px rgba(201,166,89,0.12));
}
.home-footer .eyebrow { margin-bottom: 0.3rem !important; }
.ozymandias {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.82rem, 2.6vw, 0.92rem);
  line-height: 1.55;
  color: var(--papyrus-dim);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  text-align: left;
}
.ozymandias p { margin: 0; }
.ozymandias .ozy-emphasis {
  color: var(--papyrus);
  font-style: italic;
}
.ozy-attribution {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--tiny-size);
  letter-spacing: 0.25em;
  color: var(--gold);
  text-transform: uppercase;
}
.ozy-attribution .dim { color: var(--papyrus-dim); opacity: 0.7; }

/* ── Day Screen ─────────────────────────────────────────── */
.screen-day { padding: 0; }

.day-hero {
  position: relative;
  min-height: clamp(260px, 50vw, 360px);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Reserve room at top for the absolutely-positioned back button so the
     eyebrow can never wrap into it (e.g., Day 3 "Wednesday, May 27 · Aswan
     & Philae"). */
  padding: calc(var(--screen-padding) + 56px) var(--screen-padding) var(--screen-padding);
}
.day-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Stronger middle-band darkening so italic taglines stay legible over
     bright hero images (balloons, palms). */
  background:
    linear-gradient(180deg,
      rgba(13,9,7,0.45) 0%,
      rgba(13,9,7,0.25) 35%,
      rgba(13,9,7,0.78) 75%,
      rgba(13,9,7,0.94) 100%);
}
.day-hero-back {
  position: absolute;
  top: var(--screen-padding);
  left: var(--screen-padding);
  z-index: 3;
}
.day-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.day-hero-eyebrow {
  color: var(--papyrus-dim);
  /* Slight letter-spacing reduction lets long location strings
     ("ASWAN · PHILAE") fit on one line at 320–375px. */
  letter-spacing: 0.18em;
}
.day-hero-title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.day-hero-under {
  margin-top: 0.2rem;
}
.day-hero-tagline {
  font-size: var(--h3-size);
  color: var(--papyrus);
  margin-top: 0.4rem;
  max-width: 32ch;
  /* Subtle shadow keeps tagline readable across any photo region. */
  text-shadow: 0 1px 6px rgba(13,9,7,0.6);
}
.day-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 16vw, 7rem);
  font-style: italic;
  font-weight: 300;
  line-height: 0.85;
  color: var(--gold);
  opacity: 0.85;
}
.day-arc-word {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 4vw, 1.4rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--papyrus);
  font-weight: 500;
}
.day-body {
  padding: var(--screen-padding);
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 5vw, 2rem);
  width: 100%;
}

/* collapsible sections */
.day-section details { }
.day-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(201,166,89,0.15);
  -webkit-tap-highlight-color: transparent;
}
.day-section summary::-webkit-details-marker { display: none; }
.day-section summary .section-title {
  font-family: var(--font-mono);
  font-size: var(--small-size);
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
}
.day-section summary::after {
  /* Hairline chevron in place of generic +/− — closer to the rest of
     the app's typographic system. */
  content: '▾';
  color: var(--gold);
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.55;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.day-section summary:hover::after { opacity: 1; }
.day-section details[open] summary::after {
  content: '▾';
  transform: rotate(180deg);
  opacity: 1;
}
.day-section .section-body {
  padding: 1rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Know / Bring two-up: only goes side-by-side on tablet+. At phone
   widths (the entire 67-guest target audience) the cards stack so body
   copy isn't chopped into 3-word lines. */
.know-bring-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 600px) {
  .know-bring-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Neturu Quiz ─────────────────────────────────────────── */
.screen-neturu {
  padding: var(--screen-padding);
  max-width: 640px;
  margin: 0 auto;
}
.neturu-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--stack-gap);
  padding: clamp(2rem, 8vw, 3rem) 0;
}
.quiz-question {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1.5rem);
  /* Push the question down so it lives in the visual centre of the
     remaining viewport (after the back-btn + progress + question-label
     header). Doesn't force min-height — that would push the header
     off-screen. */
  padding: clamp(2.5rem, 12vw, 5rem) 0 clamp(2rem, 8vw, 4rem);
}
.quiz-prompt {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 1.55rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--papyrus);
  text-align: center;
  max-width: 28ch;
  margin: 0 auto 0.5rem;
}
.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.quiz-header {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
}
.neturu-results {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  padding: 1rem 0 2rem;
}
.neturu-results-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
}
.primary-symbol {
  font-size: 4rem;
  line-height: 1;
}

/* ── Intro · Ozymandias (step 1) ──────────────────────────── */
.intro-step-ozymandias {
  position: relative;
  /* Tall scroll runway: 5 viewports of vertical scroll for the
     block-by-block reveal (Zone A → Block 1 → Block 2 → Block 3 → Block 4). */
  min-height: 600vh;
  padding: 0;
  display: block;
  overflow-x: hidden;
}
.oz-hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.oz-hero-img {
  position: absolute;
  inset: 0;
  /* The fallen-pharaoh figure sits on the right of the image; on narrow
     viewports we crop toward the right so the silhouette stays visible
     while only part of the foot remains in frame on the left. */
  background-position: 78% 32%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(20%) contrast(1.0) brightness(0.62) sepia(0.12);
  transform: scale(1.04);
  animation: oz-pan 22s ease-out forwards;
}
@media (min-width: 720px) {
  /* On wider screens we can pull back toward centre — both the figure and
     the foot fit comfortably. */
  .oz-hero-img { background-position: 60% 35%; }
}
.oz-hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 25%,
      rgba(13, 9, 7, 0.35) 0%,
      rgba(13, 9, 7, 0.78) 55%,
      rgba(13, 9, 7, 0.94) 100%),
    linear-gradient(180deg,
      rgba(13, 9, 7, 0.45) 0%,
      rgba(13, 9, 7, 0.0) 25%,
      rgba(13, 9, 7, 0.0) 70%,
      rgba(13, 9, 7, 0.85) 100%);
}
@keyframes oz-pan {
  from { transform: scale(1.04) translateY(0);   }
  to   { transform: scale(1.10) translateY(-2%); }
}
@media (prefers-reduced-motion: reduce) {
  .oz-hero-img { animation: none; transform: none; }
}
.oz-skip {
  position: relative;
  z-index: 2;
}
/* Zone A — the title + cycles (visible at scroll=0). */
.oz-zone-a {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 9vh, 5rem) var(--screen-padding);
  opacity: var(--oz-A, 1);
  transform: translateY(calc((1 - var(--oz-A, 1)) * -64px));
  pointer-events: var(--oz-A-pe, auto);
  transition: none;
}
.oz-zone-a-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
  max-width: 38rem;
  pointer-events: auto;
}
.oz-sun-disk {
  margin-bottom: 0.4rem;
}
.oz-river-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.2rem);
  font-style: normal;
  line-height: 1.15;
  color: var(--papyrus);
  margin: 0;
  text-shadow: 0 1px 24px rgba(13, 9, 7, 0.92);
  text-wrap: balance;
}
.oz-river-italic {
  font-style: italic;
  color: var(--gold);
}
.oz-river-dates {
  font-family: var(--font-mono);
  letter-spacing: 0.24em;
  font-size: var(--small-size);
  color: var(--gold);
  text-shadow: 0 0 16px rgba(13, 9, 7, 0.85);
}
.oz-rule {
  width: 2rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.55;
  margin: 0.4rem auto;
}
.oz-cycles {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--papyrus-dim);
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
  line-height: 1.7;
  margin: 0;
  max-width: min(46ch, 92vw);
  text-shadow: 0 1px 18px rgba(13, 9, 7, 0.92);
}
.oz-cycle-line {
  display: block;
}
.oz-cycle-preamble {
  font-size: 0.82em;
  opacity: 0.6;
  margin-bottom: 0.2em;
}
.oz-cycle-turn {
  color: var(--papyrus);
  opacity: 0.95;
  margin-top: 0.15em;
}
.oz-cycles-attr {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.78rem, 2.2vw, 0.9rem);
  color: var(--gold);
  opacity: 0.65;
  text-align: right;
  max-width: min(46ch, 92vw);
  margin: 0.5rem 0 0;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 12px rgba(13, 9, 7, 0.9);
}
@media (min-width: 480px) {
  .oz-cycle-line { white-space: nowrap; }
}
.oz-scroll-hint {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 1.4rem;
  margin-top: clamp(1.2rem, 6vh, 3rem);
  opacity: calc(0.6 - var(--oz-t, 0) * 0.6);
  animation: oz-scroll-bob 2.4s ease-in-out infinite;
}
@keyframes oz-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .oz-scroll-hint { animation: none; }
  .oz-zone-a { transform: none; transition: none; }
}

/* Pinned chapter header — sits above the centered blocks during the poem. */
.oz-poem-header {
  position: fixed;
  top: clamp(3.5rem, 10vh, 5.5rem);
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  opacity: var(--oz-H, 0);
  pointer-events: none;
  text-align: center;
}

/* Each block is fixed-centered. JS sets --oz-1, --oz-2, --oz-3, --oz-4. */
.oz-block {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  padding: 0 var(--screen-padding);
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: min(56ch, 92vw);
  margin: 0 auto;
}
.oz-block-1 { opacity: var(--oz-1, 0); }
/* Block 2 — both halves share the fixed block. The first wave (2a) stays
   visible while 2b enters so they read as one stanza, but dims to a
   trace once 2b is up so attention pulls forward. */
.oz-block-2 .oz-2a {
  opacity: calc(var(--oz-2, 0) * (1 - 0.65 * var(--oz-2b, 0)));
}
.oz-block-2 .oz-2b-line { opacity: var(--oz-2b, 0); }
/* Block 3 — container drives entry/exit; children stagger inside it. */
.oz-block-3 { opacity: var(--oz-3, 0); }
.oz-block-4 { opacity: var(--oz-4, 0); }

/* Block 1 (narrator): sand-colored, italic */
.oz-block-1 .oz-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  color: var(--sand);
  line-height: 1.5;
}

/* Block 2 (poem body): papyrus, balanced lines */
.oz-block-2 {
  max-width: min(48ch, 92vw);
}
.oz-block-2 .oz-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 3.4vw, 1.32rem);
  color: var(--papyrus);
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 18px rgba(13,9,7,0.95);
}

/* Block 3 preface — "And on the pedestal these words appear:" lands
   alone first, then dims as the BOOM quote arrives so the king's
   words feel like a reveal, not a competition. */
.oz-block-3 .oz-pedestal-preface {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 3.5vw, 1.22rem);
  color: var(--sand);
  /* Full opacity until --oz-3q rises (the quote BOOM), then drop to ~0.45 */
  opacity: calc(1 - 0.55 * var(--oz-3q, 0));
  line-height: 1.5;
  margin: 0 0 0.7rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 18px rgba(13,9,7,0.95);
  transition: none;
}

/* Block 3 (BIG quote): gold, large, glowing — punches in via opacity +
   slight scale for the BOOM. */
.oz-block-3 .oz-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  color: var(--gold);
  line-height: 1.2;
  margin: 0.4rem 0;
  letter-spacing: 0.01em;
  text-shadow:
    0 0 28px rgba(201,166,89,0.4),
    0 1px 24px rgba(13,9,7,0.95);
  opacity: var(--oz-3q, 0);
  transform: scale(calc(0.94 + 0.06 * var(--oz-3q, 0)));
  transform-origin: center;
  will-change: opacity, transform;
}

/* Block 4 (terrible ending): faded, dust-of-time, stays */
.oz-block-4 {
  max-width: min(46ch, 92vw);
}
.oz-block-4 .oz-final-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  color: var(--papyrus-dim);
  line-height: 1.55;
  margin: 0.25rem 0;
  text-shadow: 0 1px 22px rgba(13,9,7,0.95);
}
/* Final coda inherits the same treatment as the other final lines —
   no special color or letter-spacing, so it doesn't read as a different
   block of UI. */

/* Sticky CTA · appears with the terrible ending and remains */
.oz-cta-dock {
  position: fixed;
  left: var(--screen-padding);
  right: var(--screen-padding);
  bottom: max(env(safe-area-inset-bottom, 1rem), 1.5rem);
  z-index: 5;
  display: flex;
  justify-content: center;
  opacity: var(--oz-CTA, 0);
  pointer-events: var(--oz-CTA-pe, none);
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1);
}
.oz-cta-btn {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  width: 100%;
  max-width: 26rem;
}
.oz-poem-super {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: rgba(201, 166, 89, 0.55);
  letter-spacing: 0.06em;
  margin-bottom: 0.1rem;
}
.oz-poem-title {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  text-shadow: 0 0 22px rgba(13, 9, 7, 0.92);
}
.oz-poem-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: rgba(189, 176, 160, 0.65);
  letter-spacing: 0.04em;
}
.oz-poem {
  margin: 0.6rem auto 0;
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--papyrus);
  line-height: 1.7;
  /* Slightly larger for readability — the poem is the point. */
  font-size: clamp(1.08rem, 3vw, 1.32rem);
  max-width: min(52ch, 92vw);
  text-shadow: 0 1px 18px rgba(13, 9, 7, 0.92), 0 0 2px rgba(13, 9, 7, 1);
  text-wrap: pretty;
}
.oz-line {
  display: block;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
/* The opening lines ("I met a traveller / Who said:") are the framing —
   the narrator. Sand colour to set them apart from the words of the king. */
.oz-line-sand {
  color: var(--sand);
  opacity: 0.85;
}
.oz-line-strong {
  font-style: normal;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.02em;
  text-shadow: 0 0 22px rgba(201, 166, 89, 0.35), 0 1px 18px rgba(13, 9, 7, 0.95);
}
.oz-line-final {
  color: var(--papyrus-dim);
  letter-spacing: 0.04em;
}
@keyframes oz-line-in {
  to { opacity: 1; transform: translateY(0); }
}
.oz-attribution-simple {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  letter-spacing: 0.04em;
  margin-top: 0.6rem;
}
.oz-next {
  margin-top: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: oz-line-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 320ms + 600ms);
}
@media (prefers-reduced-motion: reduce) {
  .oz-line, .oz-attribution, .oz-coda, .oz-next {
    animation: none; opacity: 1; transform: none;
  }
}

/* ── Intro tap-through (Barque · Map) ─────────────────────── */
.screen-intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0 2rem;
}
.intro-skip {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem var(--screen-padding);
}
/* Skip is the OPPOSITE of a primary action on the intro — it should
   be available but never compete with the contemplative content. Override
   the gold-glow .btn-ghost styling: text-only, no border, low opacity at
   rest, fade up on hover. */
.btn-skip {
  font-size: var(--tiny-size);
  letter-spacing: 0.18em;
  padding: 0.4rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--papyrus-dim);
  opacity: 0.55;
  box-shadow: none;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-skip:hover {
  background: transparent;
  border: none;
  color: var(--gold);
  opacity: 1;
}
.intro-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0 var(--screen-padding);
}
.intro-body-narrow { max-width: 38rem; margin: 0 auto; width: 100%; }
.intro-h1 {
  font-family: var(--font-display);
  font-size: var(--title-size);
  font-style: italic;
  color: var(--gold);
  margin: 0.4rem 0 0.2rem;
}
.intro-para {
  font-family: var(--font-display);
  font-size: var(--body-size);
  line-height: 1.5;
  color: var(--papyrus);
  opacity: 0;
  transform: translateY(6px);
  animation: intro-fade-in 700ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
  animation-delay: calc(var(--i, 0) * 220ms + 200ms);
}
.intro-h1, .intro-coda, .intro-next {
  opacity: 0;
  transform: translateY(6px);
  animation: intro-fade-in 700ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
  animation-delay: calc(var(--i, 0) * 220ms + 200ms);
}
.intro-coda {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--body-size);
  color: var(--gold);
  text-align: center;
  margin: 0.8rem auto 0.4rem;
  max-width: 32ch;
}
.intro-barque-art {
  display: flex;
  justify-content: center;
  margin: 0.4rem 0 0.6rem;
}
.intro-map-slot {
  margin: 1.4rem 0 1.6rem;
  opacity: 0;
  transform: translateY(6px);
  animation: intro-fade-in 700ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
  animation-delay: calc(var(--i, 0) * 220ms + 200ms);
}
/* Intro/3 — full-canvas map screen. Map is the page; chrome recedes. */
.intro-map-screen {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: clamp(2rem, 8vh, 4rem);
}
.intro-map-screen .intro-map-title {
  margin-top: 0.2rem;
}
.intro-map-screen .intro-map-sub {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}
.intro-step-3 .cruise-map {
  /* Soft gold halo behind the map so the river's silhouette breathes
     against the dark page. Pure CSS — no extra elements needed. */
  filter: drop-shadow(0 0 24px rgba(201,166,89,0.18));
}
@keyframes intro-fade-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-h1, .intro-para, .intro-coda, .intro-next, .intro-map-slot {
    animation: none; opacity: 1; transform: none;
  }
}

/* ── Home: persistent map icon button ─────────────────────── */
.home-map-btn {
  position: absolute;
  top: clamp(0.6rem, 2.5vw, 1rem);
  right: clamp(0.6rem, 2.5vw, 1rem);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--gold) 12%, transparent);
  color: var(--gold);
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.home-map-btn:hover, .home-map-btn:focus-visible {
  background: color-mix(in oklab, var(--gold) 25%, transparent);
  outline: none;
}

/* ── Home solar barque (between Day 3 and Cultural Context) ── */
.home-barque-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: clamp(1.2rem, 5vw, 2.2rem) 0 clamp(0.8rem, 3vw, 1.4rem);
  padding-top: clamp(2.5rem, 7vw, 4rem); /* room for the sun to land here */
  position: relative;
}
.home-barque-svg {
  width: 100%;
  max-width: 22rem;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}
.home-barque-caption {
  text-align: center;
}
.home-barque-caption .eyebrow {
  color: var(--gold);
  letter-spacing: 0.2em;
  font-size: var(--tiny-size);
  opacity: 0.75;
}

/* ── Sacred Art of Offering poem ──────────────────────────── */
.sacred-art-poem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  max-width: 36ch;
  margin: 0.5rem auto 1.4rem;
  text-align: center;
}
.sap-stanza {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: var(--papyrus);
  line-height: 1.55;
  opacity: 0;
  transform: translateY(6px);
  animation: sap-fade-in 700ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
  animation-delay: calc(var(--stanza-i, 0) * 220ms + 200ms);
}
.sap-coda {
  color: var(--gold);
  font-size: var(--body-size);
}
.sap-question {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  font-style: normal;
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  margin-top: 0.4rem;
}
@keyframes sap-fade-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sap-stanza { animation: none; opacity: 1; transform: none; }
}

/* ── Neter glyph (𓊹) frame & motifs ─────────────────────── */
.neter-glyph-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem 1.1rem;
  margin: 0 auto 0.5rem;
  max-width: 24rem;
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  border-radius: 6px;
  background:
    radial-gradient(120% 70% at 50% 0%,
      color-mix(in oklab, var(--gold) 12%, transparent) 0%,
      transparent 65%);
}
.neter-glyph,
.neter-mini-glyph,
.neter-glyph-row,
.hieroglyph {
  font-family: 'Noto Sans Egyptian Hieroglyphs', 'Aegyptus', 'Apple Symbols', system-ui, sans-serif;
}
/* Inline hieroglyphs in body text — bump up so the flagstaff shape is legible */
.hieroglyph {
  font-size: 1.25em;
  color: var(--gold);
  vertical-align: -0.05em;
  letter-spacing: 0.04em;
}
.neter-glyph {
  font-size: clamp(3.2rem, 12vw, 4.4rem);
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 24px var(--gold-glow);
  letter-spacing: 0;
}
.neter-glyph-caption {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.1rem;
}
.neter-glyph-caption .eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.22em;
  color: var(--gold);
  font-size: var(--tiny-size);
}
.neter-glyph-translit {
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  color: var(--papyrus-dim);
  font-style: italic;
}
.neter-glyph-meaning {
  font-family: var(--font-display);
  font-size: var(--small-size);
  font-style: italic;
  color: var(--papyrus);
  text-align: center;
  line-height: 1.45;
  margin: 0.15rem 0 0;
  max-width: 30ch;
}
.neter-glyph-meaning em {
  color: var(--gold);
  font-style: italic;
}
.neter-mini-glyph {
  font-family: var(--font-body);
  color: var(--gold);
  letter-spacing: 0;
  display: inline-block;
  transform: translateY(0.04em);
}
.neter-glyph-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  color: var(--gold);
  text-shadow: 0 0 16px var(--gold-glow);
  margin-bottom: 0.2rem;
}

/* ── Neteru Browse Grid ──────────────────────────────────── */
.neteru-browse {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 4vw, 1.8rem);
  padding: 1rem 0 2rem;
}
.neteru-browse-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.neteru-browse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* ── Ritual Gate (inline password lock) ────────────────── */
.ritual-gate {
  margin: 0.4rem 0 0.2rem;
}
.ritual-gate-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(120% 70% at 50% 0%,
      color-mix(in oklab, var(--gold) 8%, transparent) 0%,
      transparent 70%);
  text-align: center;
}
.ritual-gate-glyph {
  font-size: 1.8rem;
  color: var(--gold);
  text-shadow: 0 0 16px var(--gold-glow);
  line-height: 1;
}
.ritual-gate-prompt {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--small-size);
  line-height: 1.55;
  color: var(--papyrus-dim);
  max-width: 32ch;
  margin: 0;
}
.ritual-gate-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 22rem;
  margin-top: 0.2rem;
}
.ritual-gate-input {
  flex: 1;
  background: var(--ink-3);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  color: var(--papyrus);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  font-size: var(--body-size);
}
.ritual-gate-input:focus {
  outline: none;
  border-color: var(--gold);
}
.ritual-gate-input.shake {
  animation: ritual-shake 0.36s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
@keyframes ritual-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.ritual-gate-error {
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--terracotta);
  margin: 0;
  min-height: 1.2em;
}

/* ── Ceremony Gate (inline password lock for Ceremony Details) ──
   Mirrors the ritual-gate styling so the two surfaces feel like one
   family — different password, different copy, same chrome. */
.ceremony-gate { margin: 0.4rem 0 0.2rem; }
.ceremony-gate-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(120% 70% at 50% 0%,
      color-mix(in oklab, var(--gold) 8%, transparent) 0%,
      transparent 70%);
  text-align: center;
}
.ceremony-gate-glyph {
  font-size: 1.8rem;
  color: var(--gold);
  text-shadow: 0 0 16px var(--gold-glow);
  line-height: 1;
}
.ceremony-gate-prompt {
  /* Inter — operational instructions ("Speak the day's word…"). The
     ceremony tone comes from the framing card and the flag glyph above,
     not from forcing italic Cormorant onto small-body copy. */
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--small-size);
  line-height: 1.55;
  color: var(--papyrus-dim);
  max-width: 36ch;
  margin: 0;
}
.ceremony-gate-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 22rem;
  margin-top: 0.2rem;
}
.ceremony-gate-input {
  flex: 1;
  /* min-width: 0 lets the input shrink below its content size at 320px;
     without it, default min-width:auto on a flex item pushes the Unlock
     button past the viewport edge. See QA report ISSUE-003 (2026-05-06). */
  min-width: 0;
  background: var(--ink-3);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  color: var(--papyrus);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  font-size: var(--body-size);
}
.ceremony-gate-input:focus {
  outline: none;
  border-color: var(--gold);
}
.ceremony-gate-input.shake {
  animation: ritual-shake 0.36s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.ceremony-gate-error {
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--terracotta);
  margin: 0;
  min-height: 1.2em;
}

/* ── Ritual Content (cards listing the user's roles) ──── */
.ritual-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.4rem 0 0.2rem;
}
.ritual-roles {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ritual-role-card {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent);
  border-left: 3px solid var(--gold);
  background: color-mix(in oklab, var(--gold) 5%, transparent);
}
.ritual-role-card.lvl-1 { border-left-color: var(--gold); }
.ritual-role-card.lvl-2 { border-left-color: #7CA0C4; }
.ritual-role-card.lvl-3 { border-left-color: var(--terracotta); }
.ritual-role-card.via-family { border-left-color: var(--papyrus-dim); }
.ritual-role-name {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--papyrus);
  font-size: var(--body-size);
  margin: 0.1rem 0 0.35rem;
  text-transform: uppercase;
}

/* ── Rituals page ──────────────────────────────────────── */
.screen-rituals {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1rem 0 2rem;
}
.rituals-header { display: flex; flex-direction: column; gap: 0.4rem; }
.rituals-grid { display: flex; flex-direction: column; gap: 1rem; }
.ritual-day-card {
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in oklab, var(--gold) 22%, transparent);
  border-radius: 6px;
  background: color-mix(in oklab, var(--gold) 4%, transparent);
}
.ritual-day-card header { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.6rem; }
.ritual-day-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--h3-size);
  color: var(--gold);
  margin: 0.1rem 0;
}
.ritual-home-card {
  border-left: 3px solid var(--gold);
  background: color-mix(in oklab, var(--gold) 6%, transparent);
}

/* ── Day's inline ritual subsection ───────────────────── */
.day-section-inner {
  margin: 0.5rem 0 0.2rem;
  padding: 0.6rem 0.9rem;
  border: 1px dashed color-mix(in oklab, var(--gold) 25%, transparent);
  border-radius: 6px;
}
.day-section-inner > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--small-size);
  color: var(--gold);
  padding: 0.2rem 0;
}

/* ── Retake block (shared) ─────────────────────────────── */
.neteru-retake-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.4rem, 5vw, 2rem);
  padding-top: clamp(1rem, 4vw, 1.4rem);
  border-top: 1px solid color-mix(in oklab, var(--gold) 18%, transparent);
}
.neteru-retake-prompt {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  margin: 0;
}
.neteru-retake-btn {
  max-width: 24rem;
}

/* ── Family sections ──────────────────────────────────── */
.neteru-family-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* family color is passed in via inline --family-color */
}
.neteru-family-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in oklab, var(--family-color, var(--gold)) 35%, transparent);
  border-left: 3px solid var(--family-color, var(--gold));
  background: color-mix(in oklab, var(--family-color, var(--gold)) 6%, transparent);
  border-radius: 6px;
}
.nfh-glyph {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--family-color, var(--gold));
  align-self: center;
}
.nfh-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.nfh-eyebrow {
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--family-color, var(--gold)) 75%, var(--papyrus));
  opacity: 0.9;
}
.nfh-title {
  font-family: var(--font-mono);
  font-size: var(--h3-size);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--family-color, var(--gold));
  margin: 0;
}
.nfh-purpose {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: var(--papyrus);
  opacity: 0.85;
  margin: 0;
  line-height: 1.4;
}
.nfh-count {
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  letter-spacing: 0.06em;
  color: var(--family-color, var(--gold));
  opacity: 0.7;
  align-self: center;
  padding: 0.15rem 0.5rem;
  border: 1px solid color-mix(in oklab, var(--family-color, var(--gold)) 40%, transparent);
  border-radius: 999px;
}
@media (min-width: 480px) {
  .neteru-browse-grid { grid-template-columns: repeat(3, 1fr); }
}
.neteru-browse-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  padding: clamp(0.75rem, 3vw, 1rem) clamp(0.5rem, 2vw, 0.75rem);
  background: rgba(26,20,16,0.5);
  border: 1px solid rgba(201,166,89,0.15);
  border-radius: 2px;
  text-decoration: none;
  position: relative;
  transition: border-color 0.18s, background 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.neteru-browse-card:hover,
.neteru-browse-card:focus-visible {
  border-color: rgba(201,166,89,0.45);
  background: rgba(26,20,16,0.8);
}
.neteru-browse-card.is-mine {
  border-color: rgba(201,166,89,0.5);
  background: rgba(201,166,89,0.07);
}
.nbc-glyph {
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.1;
  color: var(--gold);
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nbc-name {
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 2.4vw, 0.78rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papyrus);
  line-height: 1.2;
}
.nbc-greek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.6rem, 2.2vw, 0.72rem);
  color: var(--papyrus-dim);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.nbc-domain {
  font-size: clamp(0.58rem, 2vw, 0.68rem);
  color: var(--gold);
  opacity: 0.7;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
  margin-top: 0.1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.nbc-mine-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  box-shadow: 0 0 6px rgba(201,166,89,0.6);
}

/* ── Neteru Detail ───────────────────────────────────────── */
.neteru-detail {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 4vw, 1.6rem);
  padding: 1rem 0 2rem;
}
.nd-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: clamp(1rem, 5vw, 1.8rem) 0 0.5rem;
}
.nd-glyph {
  font-size: clamp(3.5rem, 16vw, 5.5rem);
  line-height: 1;
  color: var(--gold);
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif;
  filter: drop-shadow(0 0 18px rgba(201,166,89,0.25));
}
.nd-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.nd-primary-name {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--papyrus);
  margin: 0;
}
.nd-greek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  color: var(--papyrus-dim);
}
.nd-domain {
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}
.nd-principle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 4vw, 1.2rem);
  line-height: 1.45;
  color: var(--papyrus);
  text-align: center;
  margin: 0;
  padding: 0 0.5rem;
}
.nd-description {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.15rem);
  line-height: 1.6;
  color: var(--papyrus);
  margin: 0;
}
.nd-ask-block {
  background: rgba(26,20,16,0.5);
  border: 1px solid rgba(201,166,89,0.18);
  border-radius: 2px;
  padding: clamp(0.8rem, 3vw, 1.1rem);
}
.nd-ask {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 3.8vw, 1.1rem);
  color: var(--papyrus);
  margin: 0;
  line-height: 1.45;
}
.nd-guidance {
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 3.6vw, 1.05rem);
  color: var(--papyrus-dim);
  margin: 0;
  line-height: 1.5;
}
.nd-affinity {
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  font-style: italic;
  padding: 0.1rem 0;
}
.nd-affinity .eyebrow {
  font-style: normal;
  color: var(--gold);
  opacity: 0.75;
}
.nd-details {
  border-top: 1px solid rgba(201,166,89,0.15);
  padding-top: 0.75rem;
}
.nd-details summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--small-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-tap-highlight-color: transparent;
}
.nd-details summary::-webkit-details-marker { display: none; }
.nd-details summary::after {
  content: '+';
  font-size: 1.1rem;
  line-height: 1;
}
.nd-details[open] summary::after { content: '−'; }
.nd-details p {
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  line-height: 1.6;
  margin: 0.75rem 0 0.25rem;
}
.nd-present-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nd-present-list li {
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}
.nd-present-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.45rem;
  top: 0.42em;
}
.nd-present-list strong {
  color: var(--papyrus);
  font-weight: 500;
}
/* Attributes collapsible (open by default) */
.nd-details-attributes {
  background: rgba(201,166,89,0.04);
  border: 1px solid rgba(201,166,89,0.18);
  border-radius: 2px;
  padding: 0.75rem clamp(0.75rem, 3vw, 1rem);
}
.nd-details-attributes summary {
  padding: 0;
}
.nd-attributes {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.8rem;
}
.nd-attr-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.nd-attr-label {
  font-family: var(--font-mono);
  font-size: var(--tiny-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
.nd-attr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.nd-attr-list li {
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}
.nd-attr-list li::before {
  content: '·';
  position: absolute;
  left: 0.2rem;
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
  top: 0.15em;
}

/* ── Participate / Form ──────────────────────────────────── */
.screen-participate {
  padding: var(--screen-padding);
  max-width: 640px;
  margin: 0 auto;
}
.form-step {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 4vw, 1.8rem);
  padding: 1rem 0 2rem;
}
/* Form sub-screens — type system matched to .cosmic-guide-card on home:
   step-label  → Cinzel uppercase tracked (eyebrow)
   step-question → Cormorant italic (display question, like .cosmic-guide-title)
   step-sub    → Cormorant non-italic regular (description, like .cosmic-guide-body)
   This keeps the participate / commitments / quiz forms reading as one voice
   with the central screens. */
.step-label {
  font-family: var(--font-mono);
  font-size: var(--tiny-size);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--papyrus-dim);
}
.step-question {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--h3-size);
  font-weight: 400;
  line-height: 1.25;
  color: var(--papyrus);
  margin-top: 0.4rem;
}
.step-sub {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--body-size);
  color: var(--papyrus-dim);
  line-height: 1.55;
  margin-top: 0.6rem;
}
.conditional-reveal {
  display: none;
  padding: 0.75rem 0 0;
}
.conditional-reveal.visible { display: flex; flex-direction: column; gap: 0.5rem; }

.thanks-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--stack-gap);
  padding: clamp(2rem, 8vw, 3rem) 0;
}
.thanks-list {
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.thanks-list li {
  list-style: none;
  padding-left: 1.2rem;
  position: relative;
  font-size: var(--small-size);
  color: var(--papyrus-dim);
}
.thanks-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.5rem;
  top: 0.35em;
}

/* ── Context Screen ──────────────────────────────────────── */
.screen-context {
  padding: var(--screen-padding);
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 5vw, 2rem);
  padding-bottom: 2rem;
}

/* ── CTA Dock ────────────────────────────────────────────── */
#cta-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.75rem var(--screen-padding);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
#cta-dock.visible { pointer-events: all; }
#cta-dock.hidden { display: none; }

.cta-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 400px;
  min-height: 52px;
  padding: 0 1.5rem;
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: var(--small-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(201,166,89,0.35);
  transition: opacity 0.2s, transform 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.cta-pill:hover  { opacity: 0.9; color: var(--ink); }
.cta-pill:active { transform: scale(0.97); }
.cta-pill .cta-sun {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5d98f, #8a6a2e);
  flex-shrink: 0;
}

/* ── Cosmic Guide Card (home hub) ───────────────────────── */
.cosmic-guide-card {
  border: 1px solid rgba(201,166,89,0.3);
  background: rgba(26,20,16,0.6);
  border-radius: 2px;
  padding: clamp(1rem, 3.5vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cosmic-guide-card.is-done {
  border-color: rgba(201,166,89,0.45);
  background: rgba(201,166,89,0.05);
}
.cosmic-guide-title {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 400;
  font-style: italic;
  color: var(--papyrus);
  margin: 0;
  line-height: 1.2;
}
.cosmic-guide-subtitle {
  font-family: var(--font-mono);
  font-size: var(--tiny-size);
  letter-spacing: 0.15em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0;
}
.cosmic-guide-body {
  /* Cormorant Garamond, regular weight, no italics — matches the look of
     the deity ask line ("Remove what weighs you back.") so descriptive
     prose across the home cards reads as one voice. */
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--body-size);
  color: var(--papyrus-dim);
  margin: 0;
  line-height: 1.5;
}
.cosmic-guide-main {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cosmic-guide-name-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.cosmic-glyph {
  font-size: clamp(2rem, 8vw, 2.8rem);
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif;
}
.cosmic-guide-ask {
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  font-style: normal;
  font-weight: 400;
  margin: 0.2rem 0 0;
  line-height: 1.5;
}

/* ── Pre-trip checklist ──────────────────────────────────── */
.prettrip-step-label {
  margin-bottom: 0.6rem;
}
.prettrip-todos {
  border: 1px solid rgba(201,166,89,0.22);
  background: rgba(26,20,16,0.55);
  border-radius: 2px;
  padding: clamp(0.85rem, 3vw, 1.15rem);
}
.prettrip-todos--preview {
  border-color: rgba(201,166,89,0.12);
  background: rgba(26,20,16,0.35);
}
.prettrip-todos-header {
  margin-bottom: 0.5rem;
}
.prettrip-todos-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prettrip-todo-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.4rem;
  min-height: 44px;
  border-bottom: 1px solid rgba(201,166,89,0.1);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
}
.prettrip-todo-item:last-child {
  border-bottom: none;
}
.prettrip-todo-item.is-locked {
  opacity: 0.38;
  pointer-events: none;
  cursor: default;
}
.prettrip-todo-item.is-next {
  /* Highlight only — no margin/padding shift so the icon stays aligned
     with locked siblings below. Previously the negative margin pulled
     this item outward and the icon ended up at a different x than the
     locked items, breaking the column. */
  background: rgba(201,166,89,0.07);
  border-radius: 2px;
}
.prettrip-todo-item.is-done .prettrip-todo-label-main {
  /* No strikethrough — it reads as editorial cross-out. The check icon
     and dimmed color signal "done" without manuscript-like markup. */
  color: var(--papyrus-dim);
  opacity: 0.55;
}
.prettrip-todo-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prettrip-todo-icon--done {
  color: var(--gold);
  font-size: 1rem;
  font-weight: 600;
}
.prettrip-todo-icon--locked {
  color: var(--papyrus-dim);
}
.prettrip-todo-label {
  flex: 1;
  min-width: 0;
}
.prettrip-todo-label-main {
  /* Cormorant Regular at medium weight — same family as the surrounding
     hero/description prose so the home reads as one editorial voice
     rather than "ritual page on top, generic checklist app below."
     We avoid italic here (the original Inter call-out about italic
     readability still applies); upright Cormorant has plenty of
     x-height and clean counters at body size. */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--body-size);
  letter-spacing: 0;
  color: var(--papyrus);
  display: block;
}
.prettrip-todo-label-sub {
  /* Cormorant Regular — sub-text follows the same family as the label
     above so each row reads as one phrase, not two voices. */
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  margin-top: 0.15rem;
  line-height: 1.4;
}
.prettrip-todo-chevron {
  color: var(--gold);
  opacity: 0.65;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.prettrip-complete {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  text-align: center;
  padding: 0.75rem var(--screen-padding);
  opacity: 0.85;
  font-size: var(--body-size);
}
.prettrip-preview-label {
  /* Cormorant italic — this is editorial connective tissue ("two more
     steps await once you've found your Guide:"), not a UI label. The
     italic gives it the soft "narration" voice. */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  letter-spacing: 0.01em;
  margin: 0.6rem 0 0.5rem;
  line-height: 1.5;
}

/* ── Confirm state (deity visited, not yet confirmed) ────── */
.prettrip-todo-item.is-confirm {
  background: rgba(201,166,89,0.06);
  border-radius: 2px;
  margin: 0 -0.4rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
}
.prettrip-todo-item.is-confirm:hover,
.prettrip-todo-item.is-confirm:focus-visible {
  background: rgba(201,166,89,0.12);
  outline: none;
}
.prettrip-todo-confirm-hint {
  font-size: var(--tiny-size);
  color: var(--gold);
  opacity: 0.7;
  flex-shrink: 0;
  letter-spacing: 0.06em;
}
.prettrip-todo-item[data-action="undo-dresscode"] {
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.65rem 0.4rem;
}
.prettrip-todo-item[data-action="undo-dresscode"]:hover .prettrip-todo-label-main {
  opacity: 0.85;
}

/* ── All-done collapsible ────────────────────────────────── */
.prettrip-todos--complete {
  border: 1px solid rgba(201,166,89,0.22);
  background: rgba(26,20,16,0.55);
  border-radius: 2px;
  padding: 0;
}
.prettrip-todos--complete[open] {
  padding-bottom: clamp(0.85rem, 3vw, 1.15rem);
}
.prettrip-complete-summary {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: var(--body-size);
  padding: clamp(0.85rem, 3vw, 1.15rem);
  cursor: pointer;
  list-style: none;
  display: block;
}
.prettrip-complete-summary::-webkit-details-marker { display: none; }
/* Header row: title + chevron */
.prettrip-complete-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.85;
}
.prettrip-complete-title {
  flex: 1;
}
.prettrip-complete-chevron {
  font-style: normal;
  font-size: var(--tiny-size);
  color: var(--gold);
  opacity: 0.55;
  transition: transform 0.2s var(--ease);
  display: inline-block;
}
.prettrip-todos--complete[open] .prettrip-complete-chevron {
  transform: rotate(90deg);
}
/* Subtitle lines — always visible, below the title */
.prettrip-complete-subtitle {
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.prettrip-complete-line {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  line-height: 1.45;
  margin: 0;
}
.prettrip-complete-line strong {
  color: var(--papyrus);
  font-weight: 500;
}
.prettrip-complete-line em {
  font-style: italic;
  color: var(--papyrus);
}
.pcs-label {
  color: rgba(189,176,160,0.7);
}
.prettrip-todos--complete .prettrip-todos-list {
  padding: 0.5rem clamp(0.85rem, 3vw, 1.15rem) 0;
  border-top: 1px solid rgba(201,166,89,0.12);
  margin-top: clamp(0.85rem, 3vw, 1.15rem);
}

/* ── Pack items in deity detail ──────────────────────────── */
.nd-attr-pack {
  border-top: 1px solid rgba(201,166,89,0.15);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}
.nd-attr-pack-text {
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  font-style: italic;
  margin: 0.3rem 0 0;
  line-height: 1.55;
}

/* ── Packing Screen ─────────────────────────────────────── */
.screen-packing {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  padding: var(--screen-padding);
  padding-bottom: calc(var(--cta-dock-height) + env(safe-area-inset-bottom) + 1rem);
}

/* ── Commitments Screen ──────────────────────────────────── */
.screen-commitments {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  /* Constrained max-width so the page doesn't fill a laptop edge-to-edge.
     Centered on the page, with comfortable horizontal padding inside. */
  max-width: 42rem;
  width: 100%;
  margin: 0 auto;
  padding: var(--screen-padding);
  /* The CTA dock is hidden on this route (see participate-cta.js) and
     replaced by .commit-action-bar (sticky below). Reserve enough space
     so the last paragraph isn't covered. */
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 6rem);
}
.commit-header { padding-top: 0.5rem; }
.commit-subtitle {
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}
.commit-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.commit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,166,89,0.3);
  background: transparent;
  transition: background 0.3s, border-color 0.3s;
}
.commit-dot.done { background: var(--gold); border-color: var(--gold); }
.commit-dot.active { border-color: var(--gold); background: rgba(201,166,89,0.3); }
.commit-progress-label {
  font-size: var(--tiny-size);
  color: var(--papyrus-dim);
  letter-spacing: 0.08em;
  margin-left: 0.25rem;
}
.commit-step { display: flex; flex-direction: column; gap: var(--stack-gap); }
.commit-title {
  font-size: var(--h2-size);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  color: var(--papyrus);
  margin: 0;
}
.commit-context-text { display: flex; flex-direction: column; gap: 0.75rem; }
.commit-pledge-card {
  border: 1px solid rgba(201,166,89,0.3);
  background: rgba(201,166,89,0.05);
  border-radius: 3px;
  padding: clamp(1rem, 3.5vw, 1.4rem);
}
.commit-pledge-text {
  /* Bumped from clamp(1rem, 4vw, 1.1rem) — the commitment is the most
     load-bearing line on the page; needs to read like an oath, not a
     caption. */
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 4.8vw, 1.45rem);
  line-height: 1.5;
  color: var(--papyrus);
}
.committed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: var(--small-size);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(201,166,89,0.06);
  pointer-events: none;
  user-select: none;
}
.committed-badge--sm {
  font-size: var(--tiny-size);
  padding: 0.2rem 0.55rem;
  width: auto;
  letter-spacing: 0.1em;
}
.committed-check { font-size: 1.1em; }
.commit-agree-btn { letter-spacing: 0.18em; min-height: 52px; }

/* Sticky action bar — the "I agree" decision is always one tap away.
   Sits over a soft fade so text behind it doesn't read as cut off. */
.commit-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem var(--screen-padding) calc(env(safe-area-inset-bottom, 0) + 1rem);
  background: linear-gradient(to bottom, rgba(13,9,7,0) 0%, rgba(13,9,7,0.92) 35%, rgba(13,9,7,0.98) 100%);
  pointer-events: none;
}
.commit-action-bar > * {
  pointer-events: auto;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}

.commit-agreements-preview { display: flex; flex-direction: column; gap: 0.4rem; }
.commit-preview-item {
  /* Each preview is a real button — tappable entry into its agreement. */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(201,166,89,0.2);
  border-radius: 2px;
  background: rgba(26,20,16,0.5);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.commit-preview-item:hover,
.commit-preview-item:focus-visible {
  border-color: rgba(201,166,89,0.5);
  background: rgba(201,166,89,0.06);
}
.commit-preview-item:active { transform: scale(0.99); }
.commit-preview-item.is-agreed {
  border-color: rgba(201,166,89,0.4);
  background: rgba(201,166,89,0.06);
}
.commit-preview-arrow {
  color: var(--papyrus-dim);
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-left: auto;
  transition: color 0.2s, transform 0.2s;
}
.commit-preview-item:hover .commit-preview-arrow { color: var(--gold); transform: translateX(2px); }
.commit-preview-num {
  font-family: var(--font-mono);
  font-size: var(--tiny-size);
  color: var(--papyrus-dim);
  min-width: 1.6rem;
  letter-spacing: 0.1em;
}
.commit-preview-item.is-agreed .commit-preview-num { color: var(--gold); }
.commit-preview-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: var(--papyrus);
  flex: 1;
}
.commit-preview-check { color: var(--gold); font-size: var(--small-size); flex-shrink: 0; }
.commit-done-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  text-align: center;
}
.commit-review-list { display: flex; flex-direction: column; gap: 0.75rem; }
.commit-review-item {
  border: 1px solid rgba(201,166,89,0.2);
  border-radius: 2px;
  padding: clamp(0.8rem, 3vw, 1.1rem);
  background: rgba(26,20,16,0.4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.commit-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.commit-review-item--tap {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: rgba(26,20,16,0.4);
  transition: border-color 0.2s, background 0.2s;
}
.commit-review-item--tap:hover,
.commit-review-item--tap:focus-visible {
  border-color: rgba(201,166,89,0.4);
  background: rgba(201,166,89,0.06);
  outline: none;
}
.commit-review-item--tap:active { opacity: 0.85; }
.commit-review-cta {
  font-size: var(--tiny-size);
  color: var(--gold);
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
}
.commit-review-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--body-size);
  color: var(--papyrus);
  font-weight: 400;
  margin: 0;
}

/* ── Home poem footer (pharaoh photo + full Ozymandias poem) ── */
.home-poem-footer {
  position: relative;
  width: calc(100% + 2 * var(--screen-padding));
  margin: clamp(2rem, 6vw, 3.5rem) calc(-1 * var(--screen-padding)) 0;
  background-image: url('../assets/ozymandias.jpg'), url('../assets/karnak_ruins.jpg');
  background-position: 78% 32%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  overflow: hidden;
  filter: grayscale(20%) sepia(0.1) brightness(0.9);
  isolation: isolate;
}
.home-poem-footer-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 30%,
      rgba(13,9,7,0.45) 0%,
      rgba(13,9,7,0.85) 60%,
      rgba(13,9,7,0.95) 100%),
    linear-gradient(180deg,
      rgba(13,9,7,0.55) 0%,
      rgba(13,9,7,0.10) 35%,
      rgba(13,9,7,0.85) 100%);
  z-index: 0;
}
.home-poem-footer-text {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 8vw, 3.5rem) var(--screen-padding) clamp(2rem, 7vw, 3rem);
  text-align: center;
  max-width: 38rem;
  margin: 0 auto;
}
.home-poem-footer-title {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  text-shadow: 0 0 24px rgba(13,9,7,0.95);
}
.home-poem-footer-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  margin-top: 0.4rem;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 16px rgba(13,9,7,0.92);
}
.home-poem-footer-rule {
  width: 2rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.55;
  margin: 0.9rem auto 1.1rem;
}
.home-poem-footer-poem {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--papyrus);
  margin: 0;
  padding: 0;
  line-height: 1.65;
  font-size: clamp(0.98rem, 3vw, 1.2rem);
  text-shadow: 0 1px 18px rgba(13,9,7,0.95), 0 0 2px rgba(13,9,7,1);
  text-wrap: pretty;
}
.hpf-line {
  display: block;
  margin: 0.1rem 0;
  letter-spacing: 0.005em;
}
.hpf-line-sand {
  color: var(--sand);
  opacity: 0.88;
}
.hpf-line-strong {
  font-style: normal;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.02em;
  text-shadow: 0 0 22px rgba(201,166,89,0.35), 0 1px 18px rgba(13,9,7,0.95);
}
.hpf-line-coda {
  color: var(--papyrus-dim);
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
}

/* Back to the Barque CTA at end of browse */
.neteru-back-to-barque {
  margin-top: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--small-size);
  font-weight: 600;
}

/* ── Quiz: Previous button at top of question ─────────────── */
.quiz-back-btn {
  align-self: flex-start;
  min-height: unset;
  padding: 0.35rem 0.75rem;
  font-size: var(--tiny-size);
  letter-spacing: 0.1em;
  margin-bottom: -0.25rem;
}

/* ── CTA: offering-received state ────────────────────────── */
.cta-pill--received {
  background: rgba(201,166,89,0.15);
  color: var(--papyrus-dim);
  box-shadow: none;
  border: 1px solid rgba(201,166,89,0.3);
  cursor: default;
  pointer-events: none;
}
.cta-pill--received:hover { opacity: 1; }

/* ── Home barque: revisit intro link ─────────────────────── */
.home-barque-revisit {
  display: block;
  font-size: var(--tiny-size);
  color: var(--papyrus-dim);
  letter-spacing: 0.1em;
  margin-top: 0.35rem;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.home-barque-revisit:hover { opacity: 0.9; color: var(--gold); }

/* ── Arc card: bottom collapse button ───────────────────── */
.arc-collapse-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--papyrus-dim);
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0.75rem 0 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
}
.arc-collapse-btn:hover { opacity: 1; color: var(--gold); }

/* ── Packing screen ──────────────────────────────────────── */
.screen-packing {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  padding: var(--screen-padding);
  padding-top: calc(var(--screen-padding) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--screen-padding) + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
}
.packing-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.packing-heading {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 400;
  font-style: italic;
  color: var(--papyrus);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.packing-day-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid rgba(201,166,89,0.3);
  background: rgba(201,166,89,0.03);
}
.packing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.packing-list li {
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--papyrus-dim);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}
.packing-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.6;
}
.packing-list--optional li { opacity: 0.8; }
.packing-pinterest-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}
.packing-optional-badge {
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--papyrus-dim);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  padding: 0.1em 0.4em;
  vertical-align: middle;
  margin-left: 0.4rem;
}

/* ── Rituals empty state ─────────────────────────────────── */
.rituals-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem var(--screen-padding);
  text-align: center;
  max-width: 42ch;
  margin: 0 auto;
}

/* ── Intro · Solar Barque + Upper Nile (merged scroll) ────── */
.intro-step-barque-river {
  position: relative;
  /* 4 viewports of scroll runway: hero → 5 stops → CTA. */
  min-height: 500vh;
  background: var(--ink);
  padding: 0;
  overflow-x: hidden;
}

/* Hero (fixed-centred barque + opening narrative). Fades out as scroll starts. */
.bq-hero {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 9vh, 5rem) var(--screen-padding);
  opacity: var(--bq-hero, 1);
  pointer-events: var(--bq-hero-pe, auto);
  transform: translateY(calc((1 - var(--bq-hero, 1)) * -32px));
  transition: none;
  gap: 0.7rem;
  max-width: 38rem;
  margin: 0 auto;
}
.bq-eyebrow { color: var(--gold); }
.bq-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3rem);
  margin: 0;
  font-weight: 400;
  line-height: 1.1;
  color: var(--papyrus);
}
.bq-narrative {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.0625rem, 4vw, 1.25rem);
  line-height: 1.65;
  color: var(--papyrus-dim);
  max-width: 38ch;
  margin: 0;
}
.bq-narrative-2 {
  color: var(--papyrus);
  font-size: clamp(1.125rem, 4.3vw, 1.32rem);
}
.bq-hero-barque {
  width: min(88vw, 500px);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(201,166,89,0.45));
  margin: 0.4rem 0 0.2rem;
  flex-shrink: 0;
}
.bq-scroll-hint {
  margin-top: clamp(0.6rem, 2.5vh, 1.5rem);
  color: var(--gold);
  font-size: 1.4rem;
  opacity: 0.55;
  animation: oz-scroll-bob 2.4s ease-in-out infinite;
}

/* River timeline · pinned in the viewport during the scroll-driven phase.
   The marker, rail-fill, and stop opacities are all driven by --bq-* vars
   computed from scroll position, so the user sees the barque physically
   travel down the rail without the timeline itself ever leaving the screen. */
/* Phase A — journey introduction with cruise map. Visible from scroll 0,
   fades out as the schedule rail emerges below. */
.bq-intro {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(1.6rem, 5vh, 3rem) var(--screen-padding) clamp(2rem, 6vh, 3.5rem);
  gap: clamp(0.75rem, 2vh, 1.25rem);
  opacity: var(--bq-intro, 1);
  pointer-events: var(--bq-intro-pe, auto);
  transform: translateY(calc((1 - var(--bq-intro, 1)) * -24px));
  transition: none;
  overflow: hidden;
}
.bq-intro-header {
  flex-shrink: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 38rem;
}
.bq-intro-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6.8vw, 2.6rem);
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
  color: var(--papyrus);
}
.bq-intro-sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--papyrus-dim);
  font-size: var(--body-size);
  line-height: 1.5;
  max-width: 36ch;
  margin: 0;
  text-wrap: pretty;
}
.bq-intro-map {
  flex: 1 1 auto;
  width: 100%;
  max-width: 32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.bq-intro-map > .cruise-map {
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.bq-intro-map > .cruise-map .cruise-map-svg {
  height: 100%;
  width: auto;
  max-width: 100%;
}

.bq-river {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.6rem, 5vh, 3rem) 0 clamp(5rem, 14vh, 7rem);
  opacity: var(--bq-river-op, 0);
  pointer-events: var(--bq-river-pe, none);
  transition: none;
}
.bq-river-frame {
  position: relative;
  width: min(560px, 100%);
  /* Frame height tightened — leaves more space between the last card and
     the CTA dock at bottom, and pulls the four cards closer vertically. */
  height: min(500px, 62vh);
  flex: 0 1 auto;
  margin: 0 auto;
}
/* Background rail — full vertical line, dim */
.bq-river-rail {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    rgba(58, 101, 114, 0.5) 0%,
    rgba(58, 101, 114, 0.35) 100%);
}
/* Foreground rail — gold, drawn downward as the barque travels */
.bq-river-rail-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: var(--bq-rail-fill, 0%);
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    rgba(201, 166, 89, 0.85) 0%,
    rgba(201, 166, 89, 0.45) 100%);
  box-shadow: 0 0 16px rgba(201, 166, 89, 0.5);
  transition: none;
}

/* The sliding barque marker */
.bq-marker {
  position: absolute;
  left: 50%;
  top: var(--bq-marker-y, 0%);
  transform: translate(-50%, -50%) scale(var(--bq-marker-scale, 1));
  transform-origin: center;
  width: clamp(56px, 12vw, 88px);
  height: auto;
  z-index: 4;
  opacity: var(--bq-marker-op, 0);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
  pointer-events: none;
  transition: none;
}

/* Stops list — absolute-positioned along the rail at fixed % positions */
.bq-stops {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}
.bq-stop {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  /* Whole stop is always laid out — opacity now applies only to the card so
     the dots remain visible from scroll 0 (the user reads the rail as a map). */
  transform: translateY(-50%);
}
.bq-stop[data-i="0"] { top:  5%; --this-op: var(--bq-stop-0, 0); }
.bq-stop[data-i="1"] { top: 35%; --this-op: var(--bq-stop-1, 0); }
.bq-stop[data-i="2"] { top: 65%; --this-op: var(--bq-stop-2, 0); }
.bq-stop[data-i="3"] { top: 95%; --this-op: var(--bq-stop-3, 0); }

.bq-stop-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: var(--gold);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(13, 9, 7, 1),
    0 0 0 5px rgba(201, 166, 89, 0.4),
    0 0 16px rgba(201, 166, 89, 0.6);
  z-index: 3;
}
/* Card on alternating sides of the rail. Opacity + slide-up driven by
   scroll progress — the card is the "detail" that reveals as the marker
   passes. The dot/glyph stay visible always so the rail reads as a map. */
.bq-stop-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: rgba(13, 9, 7, 0.85);
  border: 1px solid rgba(201, 166, 89, 0.3);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  max-width: clamp(11rem, 38vw, 17rem);
  opacity: var(--this-op, 0);
  transform: translateY(calc((1 - var(--this-op, 0)) * 8px));
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bq-stop:nth-child(odd) .bq-stop-card {
  grid-column: 1;
  justify-self: end;
  margin-right: clamp(1.2rem, 5vw, 2rem);
  text-align: right;
  flex-direction: row-reverse;
}
.bq-stop:nth-child(even) .bq-stop-card {
  grid-column: 2;
  justify-self: start;
  margin-left: clamp(1.2rem, 5vw, 2rem);
  text-align: left;
}
.bq-stop-glyph {
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}
.bq-stop-text { display: flex; flex-direction: column; gap: 0.15rem; }
.bq-stop-name {
  font-family: var(--font-mono);
  font-size: var(--small-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.bq-stop-day {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--tiny-size);
  color: var(--papyrus-dim);
  letter-spacing: 0.04em;
}
.bq-stop-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: var(--papyrus);
  line-height: 1.45;
  margin-top: 0.2rem;
  text-wrap: pretty;
}

/* On narrow screens: rail and cards both have generous edge padding so the
   layout breathes. The bq-river section gets a horizontal gutter; inside
   that, the rail sits ~0.6rem from the frame edge and the card extends
   to the opposite edge. */
@media (max-width: 540px) {
  .bq-river {
    padding-left: clamp(1.2rem, 5vw, 1.6rem);
    padding-right: clamp(1.2rem, 5vw, 1.6rem);
  }
  .bq-river-frame {
    width: 100%;
  }
  .bq-river-rail,
  .bq-river-rail-fill,
  .bq-marker {
    left: 0.6rem;
  }
  .bq-stop {
    grid-template-columns: 0.6rem 1fr;
  }
  .bq-stop-dot { left: 0.6rem; }
  .bq-stop:nth-child(odd) .bq-stop-card,
  .bq-stop:nth-child(even) .bq-stop-card {
    grid-column: 2;
    justify-self: stretch;
    margin-left: 1rem;
    margin-right: 0;
    text-align: left;
    flex-direction: row;
    max-width: none;
  }
}

/* Final CTA — pinned to bottom, fades in once the marker reaches Aswan */
.bq-cta-dock {
  position: fixed;
  left: 0; right: 0;
  bottom: max(env(safe-area-inset-bottom, 1rem), 1.2rem);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 var(--screen-padding);
  opacity: var(--bq-cta, 0);
  pointer-events: var(--bq-cta-pe, none);
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1);
}
.bq-cta-dock > * { width: 100%; max-width: 26rem; }
.bq-cta-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--papyrus-dim);
  font-size: var(--small-size);
}
.bq-cta-btn {
  width: 100%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   Identity strip (home — below guide card)
   ═══════════════════════════════════════════════════════════════ */

.home-identity-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.3rem var(--screen-padding);
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  font-family: var(--font-body);
}
.home-identity-name {
  font-weight: 500;
  color: var(--papyrus);
}
.home-identity-change {
  background: none;
  border: none;
  padding: 0;
  color: var(--papyrus-dim);
  font-size: var(--tiny-size);
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.7;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}
.home-identity-change:hover { opacity: 1; color: var(--gold); }

/* Bottom-of-page placement: gives the strip breathing room after the
   poem footer so it reads as a quiet sign-out, not a header. */
.home-identity-strip--bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   Challenges card (home secondary section)
   ═══════════════════════════════════════════════════════════════ */

.home-challenges-card {
  margin-top: var(--stack-gap);
  border-color: rgba(184, 105, 69, 0.35);  /* terracotta tint */
}
.home-challenges-card:hover,
.home-challenges-card:focus-visible {
  border-color: rgba(184, 105, 69, 0.7);
}

/* ═══════════════════════════════════════════════════════════════
   Challenges screen
   ═══════════════════════════════════════════════════════════════ */

.screen-challenges {
  min-height: 100dvh;
  padding: var(--screen-padding);
  padding-top: calc(var(--screen-padding) + 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  max-width: 34rem;
  margin: 0 auto;
}

.challenges-heading {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
}

.challenges-card {
  background: rgba(235, 226, 211, 0.06);
  border: 1px solid rgba(201, 166, 89, 0.25);
  border-radius: 0.75rem;
  padding: 1.4rem 1.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.challenges-glyph {
  font-size: 3rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.85;
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif;
}

.challenges-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 4.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--papyrus);
  max-width: 34ch;
  margin: 0;
}

/* Accepted state */
.challenges-accepted-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(201, 166, 89, 0.08);
  border: 1px solid rgba(201, 166, 89, 0.35);
  border-radius: 0.5rem;
}
.challenges-accepted-icon {
  font-size: 1.1rem;
  color: var(--gold);
  font-weight: 600;
}
.challenges-accepted-label {
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--gold);
  margin: 0;
  letter-spacing: 0.05em;
}

/* No-guide state */
.challenges-no-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding-top: 2rem;
}
.challenges-glyph-empty {
  font-size: 3.5rem;
  opacity: 0.25;
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif;
}

/* Dare counter inside card */
.challenges-counter {
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  color: var(--papyrus-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Accepted row — inline accepted + undo */
.challenges-accepted-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(201, 166, 89, 0.08);
  border: 1px solid rgba(201, 166, 89, 0.35);
  border-radius: 0.5rem;
}
.challenges-accepted-icon {
  font-size: 1.1rem;
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
}
.challenges-accepted-label {
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--gold);
  margin: 0;
  letter-spacing: 0.04em;
  flex: 1;
}
/* Inline undo — unobtrusive text button */
.challenges-undo-inline {
  background: none;
  border: none;
  color: var(--papyrus-dim);
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  padding: 0.5rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.challenges-undo-inline:hover { color: var(--papyrus); }

/* ── Reward / certificate screen ──────────────────────────── */
.challenges-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-gap);
  padding-top: 0.5rem;
}
.challenges-reward-glyph {
  font-size: 3.5rem;
  color: var(--gold);
  opacity: 0.85;
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif;
  text-align: center;
}
.challenges-reward-cert {
  width: 100%;
  background: rgba(201, 166, 89, 0.05);
  border: 1px solid rgba(201, 166, 89, 0.4);
  border-radius: 0.75rem;
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.challenges-reward-eyebrow {
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  color: var(--terracotta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.challenges-reward-name {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: 400;
  color: var(--gold);
  margin: 0;
  line-height: 1.2;
}
.challenges-reward-decree {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--body-size);
  color: var(--papyrus);
  margin: 0;
  line-height: 1.55;
}
.challenges-reward-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}
.challenges-reward-dare {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 2px solid rgba(201, 166, 89, 0.35);
  padding-left: 0.75rem;
}
.challenges-reward-dare-num {
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  color: var(--gold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.challenges-reward-dare-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--body-size);
  color: var(--papyrus);
  line-height: 1.45;
}
.challenges-reward-dare-date {
  font-family: var(--font-body);
  font-size: var(--tiny-size);
  color: var(--papyrus-dim);
}
.challenges-reward-seal {
  font-size: 0.9rem;
  color: var(--gold);
  opacity: 0.45;
  letter-spacing: 0.6em;
  margin-top: 0.5rem;
  padding-left: 0.6em; /* optical center for trailing letter-spacing */
}

/* Legacy: keep old .challenges-accepted-state for any stale HTML */
.challenges-accepted-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(201, 166, 89, 0.08);
  border: 1px solid rgba(201, 166, 89, 0.35);
  border-radius: 0.5rem;
}
.challenges-undo-btn {
  font-size: var(--tiny-size);
  opacity: 0.6;
}
.challenges-undo-btn:hover { opacity: 1; }

/* Gate name picker step
   ═══════════════════════════════════════════════════════════════ */

.gate-name-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  animation: fadeUp 0.3s var(--ease) both;
}
.gate-name-count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--small-size);
  color: var(--papyrus-dim);
  text-align: center;
  letter-spacing: 0.04em;
  margin: -0.4rem auto 0;
  max-width: 22rem;
  width: 100%;
}
.gate-name-search-wrap {
  position: relative;
}
.gate-name-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Open list — no card frame. Each name is a guest-book entry,
     not a row in a generic dropdown. */
  border: none;
  background: transparent;
}
.gate-name-option {
  padding: 0.85rem 0.5rem;
  /* Names get the display font — they ARE the thing on this screen. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  letter-spacing: 0.01em;
  color: var(--papyrus);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(201, 166, 89, 0.12);
  transition: color 0.2s, background 0.2s, padding-left 0.25s var(--ease);
}
.gate-name-option:last-child { border-bottom: none; }
.gate-name-option:hover,
.gate-name-option:focus {
  color: var(--gold);
  background: rgba(201, 166, 89, 0.05);
  outline: none;
  padding-left: 1rem;
}
.gate-name-option:active { background: rgba(201, 166, 89, 0.15); }