/* =============================================================================
   The Pilgrim Pathway
   Realm grid  ->  season  ->  the two paths  ->  the full-screen reading
   ============================================================================= */

.pp-wrap { max-width: 1120px; margin: 0 auto; padding: 2.25rem 1rem 3.5rem; }

/* Each stage of the journey is a panel; one is shown at a time. */
.pp-panel { display: none; }
.pp-panel.pp-on { display: block; animation: ppFade 0.45s ease both; }
@keyframes ppFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- shared bits ---------- */

.pp-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 1px solid var(--border); color: var(--muted);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pp-back:hover { color: var(--txt); border-color: var(--realm-accent, var(--sandstone)); }

.pp-crumb { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.pp-crumb-here {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--realm-accent, var(--sandstone));
}

.pp-sound-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--realm-border, var(--border));
  color: var(--realm-accent, var(--sandstone));
  font-size: 0.68rem; letter-spacing: 0.06em;
  padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.pp-sound-btn:hover { background: rgba(255, 255, 255, 0.09); }
.pp-sound-btn:active { transform: scale(0.97); }
.pp-sound-btn.pp-sounding { opacity: 0.65; }

/* =============================================================================
   1. THE SIX REALMS  —  two across
   ============================================================================= */

.pp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
@media (max-width: 720px) { .pp-grid { grid-template-columns: minmax(0, 1fr); } }

.pp-realm {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--realm-border);
  border-radius: 14px;
  /* the welcome page's night-sky wash */
  background: linear-gradient(160deg, #0f0d08 0%, #1a1505 40%, #0a1008 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pp-realm:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 16px 38px rgba(0, 0, 0, 0.6),
              0 0 26px -6px var(--realm-accent);
}
/* The drifting stars sit on the welcome page's own background, untinted —
   only the outline carries the realm's colour. */
.pp-realm canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }

.pp-realm-body {
  position: relative; z-index: 2;
  padding: 1.5rem 1.25rem 1.4rem;
  text-align: center;
}

/* the banner — the same shape as the welcome banner, carrying the realm's name */
.pp-effigy-slot {
  display: flex; align-items: flex-end; justify-content: center;
  height: 40px; margin-bottom: 0.6rem;
}
.pp-effigy { display: block; }
.pp-effigy path, .pp-effigy g { fill: var(--realm-accent); }

.pp-realm-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem; font-weight: 700; line-height: 1.1;
  color: var(--txt);
  text-shadow: 0 0 18px var(--realm-wash), 0 2px 10px rgba(0, 0, 0, 0.7);
  margin-bottom: 0.2rem;
}
.pp-realm-rule {
  width: 74px; height: 1px; margin: 0.55rem auto 0.7rem;
  background: linear-gradient(90deg, transparent, var(--realm-accent), transparent);
}
.pp-realm-desc {
  font-size: 0.79rem; line-height: 1.65; color: var(--muted);
  max-width: 30ch; margin: 0 auto 1.05rem;
  text-align: center !important;
}
.pp-realm-btns { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; }

.pp-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.5rem 1.05rem; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; transition: filter 0.2s, transform 0.1s, background 0.2s;
}
.pp-btn:active { transform: scale(0.97); }
.pp-btn-hear {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--realm-accent);
  color: var(--realm-accent);
}
.pp-btn-hear:hover { background: rgba(0, 0, 0, 0.15); }
.pp-btn-hear[data-speaking="true"] { opacity: 0.6; }
.pp-btn-enter {
  background: linear-gradient(135deg, #7acc4a, #5aaa32);
  color: #050302; font-weight: 700;
}
.pp-btn-enter:hover { filter: brightness(1.08); }

/* =============================================================================
   2. THE FOUR SEASONS
   ============================================================================= */

.pp-stage-head { text-align: center; margin-bottom: 2rem; }
.pp-stage-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--realm-accent); margin-bottom: 0.55rem;
}
.pp-stage-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; color: var(--txt);
  margin-bottom: 0.5rem;
}
.pp-stage-sub {
  font-size: 0.85rem; color: var(--muted); max-width: 54ch; margin: 0 auto;
  line-height: 1.75; text-align: center !important;
}

.pp-seasons {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  max-width: 880px; margin: 0 auto;
}
@media (max-width: 760px) { .pp-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pp-season {
  position: relative; overflow: hidden;
  border: 2px solid var(--realm-border); border-radius: 14px;
  background: linear-gradient(160deg, #0f0d08 0%, #1a1505 40%, #0a1008 100%);
  padding: 1.5rem 0.9rem 1.35rem; cursor: pointer; text-align: center;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.pp-season:hover { transform: translateY(-3px); border-color: var(--realm-accent); }
.pp-season-mark { display: block; width: 52px; height: 52px; margin: 0 auto 0.6rem; }
.pp-season-name {
  font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700;
  color: var(--txt); letter-spacing: 0.02em;
}
.pp-season-note {
  font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.35rem; min-height: 0.9rem;
}

/* the season we are actually in, glowing gently */
.pp-season.pp-now {
  border-color: var(--realm-accent);
  animation: ppNowGlow 4.5s ease-in-out infinite;
}
.pp-season.pp-now .pp-season-note { color: var(--realm-accent); }
@keyframes ppNowGlow {
  0%, 100% { box-shadow: 0 0 10px -4px var(--realm-accent), inset 0 0 22px -18px var(--realm-accent); }
  50%      { box-shadow: 0 0 30px -2px var(--realm-accent), inset 0 0 34px -12px var(--realm-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-season.pp-now { animation: none; box-shadow: 0 0 22px -4px var(--realm-accent); }
}

/* =============================================================================
   3. THE TWO PATHS
   ============================================================================= */

.pp-paths {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem;
  max-width: 940px; margin: 0 auto;
}
@media (max-width: 760px) { .pp-paths { grid-template-columns: minmax(0, 1fr); } }

.pp-path {
  border: 2px solid var(--realm-border); border-radius: 16px; overflow: hidden;
  background: var(--surface); cursor: pointer; text-align: center;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.pp-path:hover {
  transform: translateY(-4px); border-color: var(--realm-accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 26px -8px var(--realm-accent);
}
.pp-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #0a0806; }
.pp-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the title floats on the picture */
.pp-float {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(65% 55% at 50% 50%, rgba(5, 3, 2, 0.62) 0%, rgba(5, 3, 2, 0.18) 70%, transparent 100%);
}
.pp-float span {
  font-family: 'Playfair Display', serif; font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700; color: #fdf8ee; letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.7);
  padding: 0 1rem;
}
.pp-path-caption { padding: 1rem 1rem 1.15rem; }
.pp-path-caption p {
  font-size: 0.85rem; color: var(--muted); line-height: 1.6; text-align: center !important;
}
.pp-path-open {
  display: inline-block; margin-top: 0.7rem;
  font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--realm-accent);
}

/* =============================================================================
   4. THE FULL-SCREEN READING
   ============================================================================= */

.pp-full {
  position: fixed; inset: 0; z-index: 9998;
  display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #050302;
}
.pp-full.pp-on { display: block; animation: ppOpen 0.4s ease both; }
@keyframes ppOpen { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

/* the chosen picture, held behind everything */
.pp-full-bg { position: fixed; inset: 0; z-index: 0; }
.pp-full-bg .pp-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the scrim that buys the text its contrast */
.pp-full-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 3, 2, 0.86) 0%, rgba(5, 3, 2, 0.9) 22%, rgba(5, 3, 2, 0.93) 100%),
    radial-gradient(90% 70% at 50% 0%, var(--realm-wash) 0%, transparent 70%);
}

.pp-full-close {
  position: fixed; top: 1rem; right: 1rem; z-index: 4;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(5, 3, 2, 0.72); border: 1px solid var(--realm-border);
  color: var(--txt); font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.pp-full-close:hover { background: rgba(5, 3, 2, 0.95); border-color: var(--realm-accent); }

.pp-full-inner {
  position: relative; z-index: 2;
  max-width: 780px; margin: 0 auto;
  padding: 4.5rem 1.4rem 5rem;
}

/* --- the headings, each with air around it --- */
.pp-doc-head { text-align: center; margin-bottom: 3.25rem; }
.pp-doc-general {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 4.4vw, 2.4rem); font-weight: 700;
  letter-spacing: 0.04em; color: #fdf8ee;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}
.pp-doc-generalsub {
  font-size: 0.9rem; font-style: italic; color: var(--realm-accent);
  margin-top: 0.85rem; text-align: center !important;
}
/* the gap the realm-and-season line sits in */
.pp-doc-where {
  margin-top: 2.5rem;
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: #e6ddcb;
}
.pp-doc-rule {
  width: 90px; height: 1px; margin: 2.25rem auto 0;
  background: linear-gradient(90deg, transparent, var(--realm-accent), transparent);
}
.pp-doc-season {
  margin-top: 2.25rem; font-size: 0.92rem; line-height: 1.9; color: #d8d0c0;
  max-width: 62ch; margin-left: auto; margin-right: auto;
  text-align: justify !important; text-justify: inter-word; hyphens: auto;
}
.pp-doc-sound { margin-top: 1.6rem; }

/* --- the five topics --- */
.pp-topic { margin-top: 3.5rem; }
.pp-topic:first-of-type { margin-top: 0; }
.pp-topic-head {
  display: flex; align-items: baseline; gap: 0.7rem;
  margin-bottom: 1.5rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pp-topic-num {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700;
  color: var(--realm-accent); opacity: 0.85; line-height: 1;
}
.pp-topic-name {
  font-family: 'Playfair Display', serif; font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 700; color: #fdf8ee;
}

.pp-block { margin-top: 1.9rem; }
.pp-block-label {
  font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--realm-accent); margin-bottom: 0.85rem;
}
.pp-block p {
  font-size: 0.95rem; line-height: 1.95; color: #e8e1d3;
  text-align: justify !important; text-justify: inter-word;
  hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; orphans: 2; widows: 2;
}
.pp-block.pp-blessing {
  border-left: 2px solid var(--realm-accent);
  padding: 0.15rem 0 0.15rem 1.15rem;
}
.pp-block.pp-blessing p { font-style: italic; color: #f2ecdf; }
.pp-block .pp-sound-btn { margin-top: 1rem; }

/* a slot that is waiting for its words */
.pp-empty {
  border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 10px;
  padding: 0.9rem 1.1rem; background: rgba(255, 255, 255, 0.03);
}
.pp-empty p {
  font-size: 0.82rem; font-style: italic; color: #9a9184;
  text-align: center !important; line-height: 1.7;
}

.pp-doc-foot { margin-top: 4rem; text-align: center; }
.pp-doc-foot .pp-doc-rule { margin: 0 auto 1.6rem; }
.pp-doc-foot p {
  font-size: 0.8rem; font-style: italic; color: var(--muted);
  text-align: center !important; margin-bottom: 1.3rem;
}
.pp-doc-switch { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }