/* ============ The Compass Guardians: character layer (Sprint 3) ============
   Per-Guardian palettes arrive as CSS vars set inline from js/guardians.js:
   --g-color (primary) · --g-deep (secondary/text-safe) · --g-soft · --g-accent  */

/* --- Official art in the reveal hero --- */
.guardian-hero .guardian-art {
  display: block; width: min(310px, 68vw); height: auto; margin: 0 auto 18px;
  border-radius: 18px; border: 1.5px solid var(--line);
  box-shadow: 0 10px 30px rgba(30, 27, 46, 0.14);
  background: var(--surface);
}
.guardian-hero .guardian-badge { display: none; }
.guardian-hero.no-art .guardian-art { display: none; }
.guardian-hero.no-art .guardian-badge { display: block; }
.guardian-hero { border-color: color-mix(in srgb, var(--g-color, #6c5ce7) 35%, var(--line)); }

/* --- Lore card: motto + signature item --- */
.guardian-lore .lore-motto {
  font-family: var(--font-display); font-size: 1.25rem; color: var(--g-deep, var(--ink));
  margin: 4px 0 16px;
}
.lore-item { margin-top: 14px; font-size: 0.9rem; color: var(--ink-soft); }

/* --- Homepage showcase: sixteen collectible cards ---
   Fixed at 4 columns rather than auto-fill: with exactly 16 cards, auto-fill
   at this container width settled on 6 per row, leaving a 4-card last row
   with two visibly empty slots. 4x4 fills every row. */
.guardian-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 30px;
}
/* The explainer paragraph now sits below the grid rather than above it, so
   it no longer pushes the 16 cards further down the fold. .section-sub's
   own 10px top margin reads as cramped directly under a grid of cards, so
   this gives it the section's usual heading-to-body spacing instead. */
.guardian-outro { margin-top: 28px; }
.guardian-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 2px; padding: 16px 10px 14px; cursor: pointer;
  font-family: var(--font-body);
  background: linear-gradient(180deg, var(--g-soft, #f4f1ea), var(--surface) 78%);
  border: 1.5px solid color-mix(in srgb, var(--g-color, #6c5ce7) 30%, var(--line));
  border-radius: 16px; box-shadow: 0 1px 4px rgba(30, 27, 46, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.guardian-card:hover, .guardian-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--g-color, #6c5ce7) 22%, rgba(30, 27, 46, 0.10));
  outline: none;
}
.gc-art {
  position: relative; width: 104px; height: 128px; margin-bottom: 10px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--g-color, #6c5ce7) 25%, var(--line));
  background: var(--g-soft, #f4f1ea);
}
.gc-art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.gc-fallback {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  color: var(--g-deep, var(--violet-deep));
  background: linear-gradient(150deg, var(--g-soft, #efeafb), #ffffff);
}
.gc-art.gc-no-art .gc-fallback { display: flex; }
.gc-name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.gc-animal { font-size: 0.8rem; color: var(--ink-soft); }
.gc-virtue {
  margin-top: 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--g-deep, var(--violet-deep));
  background: color-mix(in srgb, var(--g-soft, #efeafb) 70%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--g-color, #6c5ce7) 28%, transparent);
  padding: 3px 10px; border-radius: 999px;
}
.gc-type { margin-top: 5px; font-size: 0.72rem; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.06em; }

/* --- responsive --- */
@media (max-width: 640px) {
  .guardian-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .guardian-hero .guardian-art { width: min(250px, 74vw); }
}
@media (prefers-reduced-motion: reduce) {
  .guardian-card, .guardian-card:hover { transform: none; transition: none; }
}

/* ============ The Compass Kingdom map (Sprint 4A) ============ */
#view-kingdom { padding: 48px 0 72px; }
.kingdom-header { text-align: center; margin-bottom: 26px; }
.kingdom-kicker {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 10px;
}
.kingdom-header h1 { font-size: clamp(2.1rem, 5vw, 3rem); }

/* compass navigation */
.kingdom-nav {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 6px;
}
.k-dir {
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-soft); background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; min-width: 52px;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.k-dir:hover { border-color: var(--violet); color: var(--violet-deep); }
.k-dir.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.kingdom-status { text-align: center; font-size: 0.88rem; color: var(--ink-soft); min-height: 1.5em; margin: 8px 0 4px; }

/* realm panels: placeholder map zones until illustrated map art exists */
.k-realm {
  border: 1.5px solid color-mix(in srgb, var(--r-color) 35%, var(--line));
  background: linear-gradient(165deg, var(--r-soft), var(--surface) 55%);
  border-radius: 22px; padding: 26px 24px 22px; margin-top: 26px;
  transition: opacity 0.25s ease;
}
.k-realm-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.k-realm-head h2 { font-size: 1.45rem; color: var(--r-deep); }
.k-realm-head p { font-size: 0.85rem; color: var(--ink-muted); }
.k-realm.k-dim { opacity: 0.35; }

/* location cards */
.k-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.k-card {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--g-color, #6c5ce7) 28%, var(--line));
  border-radius: 16px; padding: 16px; box-shadow: 0 1px 4px rgba(30, 27, 46, 0.05);
  transition: opacity 0.25s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.k-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--g-color, #6c5ce7) 20%, rgba(30, 27, 46, 0.10));
}
.k-card.k-dim { opacity: 0.28; }
.k-art {
  position: relative; flex-shrink: 0; width: 86px; height: 112px; border-radius: 12px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--g-color, #6c5ce7) 25%, var(--line));
  background: var(--g-soft, #f4f1ea);
}
.k-art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.k-art .gc-fallback { font-size: 2rem; }
.k-body { min-width: 0; }
.k-home { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--g-deep, var(--ink)); }
.k-guardian { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-top: 2px; }
.k-type { color: var(--ink-muted); font-weight: 600; }
.k-title {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--g-deep, var(--violet-deep));
  background: var(--g-soft, #efeafb); border-radius: 999px; padding: 3px 10px; margin: 6px 0 6px;
}
.k-desc { font-size: 0.84rem; color: var(--ink-soft); }
.k-visit { margin-top: 10px; padding: 8px 14px; font-size: 0.84rem; }
.k-point {
  position: absolute; top: 12px; right: 14px; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--g-deep, var(--violet-deep)); opacity: 0.7;
}

@media (max-width: 760px) {
  .k-cards { grid-template-columns: 1fr; }
  .k-realm { padding: 20px 16px 16px; }
  .k-dir { padding: 7px 12px; min-width: 44px; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .k-card, .k-card:hover { transform: none; transition: none; }
  .k-realm, .k-realm.k-dim { transition: none; }
}
.k-art.gc-no-art .gc-fallback { display: flex; }

/* ============ Kingdom map layout (Sprint 4B) ============ */
.kingdom-map-hero { margin: 26px 0 44px; }
.k-ledger-title { margin-top: 10px; }

/* parchment frame: placeholder until painted map art exists */
.kingdom-svg-wrap {
  background:
    radial-gradient(1100px 460px at 50% -8%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(700px 380px at 6% 106%, rgba(178, 148, 88, 0.10), transparent),
    radial-gradient(700px 380px at 96% 104%, rgba(178, 148, 88, 0.10), transparent),
    linear-gradient(160deg, #f9f3e3, #f2e9d1);
  border: 1px solid #d9cba6;
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, 0.4),
    inset 0 0 70px rgba(160, 130, 70, 0.13),
    0 2px 10px rgba(30, 27, 46, 0.06);
  padding: 8px;
}
.kingdom-svg-wrap svg { width: 100%; height: auto; display: block; }

.zone-label {
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 3px; fill: #a3947a;
}
.map-trail {
  stroke: #c5b48c; stroke-width: 1.5; stroke-dasharray: 3 7;
  stroke-linecap: round; opacity: 0.7;
}
.map-deco path, .map-deco line {
  stroke: #b3a888; stroke-width: 2; fill: none; stroke-linecap: round; opacity: 0.55;
}
.map-deco circle { stroke: #b3a888; stroke-width: 2; fill: none; opacity: 0.55; }

/* pins */
.map-pin { cursor: pointer; outline: none; }
.map-pin .pin-dot { transform-box: fill-box; transform-origin: center; transition: transform 0.15s ease; }
.map-pin:hover .pin-dot, .map-pin:focus-visible .pin-dot { transform: scale(1.3); }
.map-pin .pin-ring { opacity: 0; transition: opacity 0.15s ease; }
.map-pin.selected .pin-ring, .map-pin:focus-visible .pin-ring { opacity: 1; }
.pin-label {
  font-family: Inter, sans-serif; font-size: 14.5px; font-weight: 600; fill: #4b4660;
  paint-order: stroke; stroke: #f7f1e0; stroke-width: 4px; stroke-linejoin: round;
  pointer-events: none;
}

/* the castle */
.map-castle { cursor: pointer; outline: none; }
.castle-seal { fill: #fffdf4; stroke: #cbb98d; stroke-width: 1.5; }
.castle-seal-ring { stroke: #cbb98d; stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.9; }
.map-castle.selected .castle-seal-ring, .map-castle:focus-visible .castle-seal-ring {
  stroke: var(--violet); stroke-width: 2.5; stroke-dasharray: none;
}
.castle-keep rect, .castle-keep path { fill: #6b6383; }
.castle-keep line { stroke: #6b6383; stroke-width: 2; }
.castle-keep path { fill: #e8654f; }
.castle-label {
  font-family: 'Playfair Display', Georgia, serif; font-size: 17px; font-weight: 700; fill: #1e1b2e;
  paint-order: stroke; stroke: #f7f1e0; stroke-width: 4px;
}
.castle-sublabel {
  font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.5px; fill: #8b7f65; text-transform: uppercase;
}

/* detail panel (hover/tap target) */
.map-detail { margin-top: 14px; min-height: 158px; }
.md-inner {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--g-color, #6c5ce7) 30%, var(--line));
  border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 1px 5px rgba(30, 27, 46, 0.06);
}
.md-art { width: 84px; height: 108px; }
.md-body { min-width: 0; }
.md-castle .md-rose { width: 84px; height: 84px; flex-shrink: 0; }
.md-castle { border-color: color-mix(in srgb, var(--violet) 30%, var(--line)); }

/* mobile list fallback */
.map-list { display: none; }
.ml-group { margin-top: 14px; }
.ml-head {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 7px;
}
.ml-items { display: flex; flex-wrap: wrap; gap: 7px; }
.ml-item {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--g-color, #6c5ce7) 30%, var(--line));
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
}
.ml-item span { color: var(--ink-muted); font-weight: 500; }
.ml-item.active {
  background: var(--g-soft, var(--violet-soft));
  border-color: var(--g-deep, var(--violet));
  color: var(--g-deep, var(--violet-deep));
}

@media (max-width: 760px) {
  .kingdom-svg-wrap { display: none; }
  .map-list { display: block; }
  .map-detail { min-height: 0; }
  .md-inner { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin .pin-dot, .map-pin .pin-ring { transition: none; }
  .map-pin:hover .pin-dot { transform: none; }
}

/* ============ The Heart Compass Citadel (Sprint 4C) ============
   gold · crystal · ivory · celestial light, Art Nouveau curves */
#view-citadel { padding: 48px 0 72px; }
.citadel-hero { text-align: center; margin-bottom: 44px; }
.citadel-hero h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.citadel-intro { max-width: 640px; margin: 14px auto 24px; color: var(--ink-soft); font-size: 0.98rem; }

/* approved artwork frame + styled placeholder (never generated) */
.citadel-art {
  position: relative; max-width: 720px; margin: 0 auto 26px;
  border-radius: 26px 26px 120px 120px / 26px 26px 46px 46px; /* nouveau curve */
  overflow: hidden; border: 1.5px solid #d9c48c;
  box-shadow: inset 0 0 0 5px rgba(255, 252, 240, 0.6), 0 12px 34px rgba(120, 96, 40, 0.16);
  background:
    radial-gradient(420px 300px at 50% 42%, rgba(212, 175, 55, 0.22), transparent 70%),
    radial-gradient(700px 420px at 50% 110%, rgba(108, 92, 231, 0.14), transparent),
    linear-gradient(180deg, #efe7f6 0%, #fdf8ea 45%, #f7ecd2 100%);
}
.citadel-art img { display: block; width: 100%; height: auto; }
.citadel-placeholder { display: none; padding: 46px 20px 40px; text-align: center; }
.citadel-art.no-art img { display: none; }
.citadel-art.no-art .citadel-placeholder { display: block; }
.cp-rose { width: 190px; height: 190px; filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.55)); }
.citadel-placeholder p {
  margin-top: 14px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #a08a54;
}

/* Hall of Balance: the emotional centre */
.hall-feature {
  display: flex; gap: 30px; align-items: center; margin: 0 auto 48px; max-width: 860px;
  background:
    radial-gradient(360px 260px at 22% 50%, rgba(212, 175, 55, 0.16), transparent 70%),
    linear-gradient(160deg, #fdfaf0, #f6efdc);
  border: 1.5px solid #d9c48c; border-radius: 24px; padding: 30px 32px;
}
.hall-compass { flex-shrink: 0; }
.hall-rose {
  width: 200px; height: 200px;
  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.6));
  animation: hall-glow 5s ease-in-out infinite;
}
@keyframes hall-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.45)); }
  50% { filter: drop-shadow(0 0 26px rgba(212, 175, 55, 0.75)); }
}
.hall-body h2 { font-size: 1.7rem; margin: 4px 0 12px; }
.hall-body p { color: var(--ink-soft); font-size: 0.95rem; }
.hall-law {
  margin-top: 18px; padding: 14px 20px; border-left: 3px solid #c9a94e;
  background: rgba(212, 175, 55, 0.09); border-radius: 0 12px 12px 0;
  font-family: var(--font-display); font-size: 1.12rem; color: var(--ink);
}
.hall-law span { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-muted); }

/* location guide */
.citadel-locations {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px;
}
.loc-card {
  background: var(--surface); border: 1.5px solid #ddd0ac; border-radius: 18px;
  padding: 20px 20px 16px; box-shadow: 0 1px 5px rgba(120, 96, 40, 0.07);
}
.loc-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.loc-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: linear-gradient(150deg, #fbf3dd, #f3e6c3); border: 1px solid #ddc891;
}
.loc-head h3 { font-size: 1.18rem; }
.loc-purpose { font-size: 0.84rem; color: var(--ink-soft); margin-top: 2px; }
.loc-short { font-size: 0.9rem; color: var(--ink-soft); }
.loc-toggle {
  margin-top: 12px; min-height: 44px; padding: 10px 16px; cursor: pointer;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; color: var(--ink);
  background: none; border: 1.5px solid var(--line); border-radius: 999px;
}
.loc-toggle:hover, .loc-toggle:focus-visible { border-color: #c9a94e; color: #8a6d24; outline: none; }
.loc-toggle[aria-expanded="true"] { background: #faf3e0; border-color: #c9a94e; }
.loc-long { margin-top: 14px; display: flex; gap: 16px; align-items: flex-start; }
.loc-long p { font-size: 0.9rem; color: var(--ink-soft); }
.loc-art {
  position: relative; flex-shrink: 0; width: 96px; height: 72px; border-radius: 12px;
  overflow: hidden; border: 1px solid #ddc891;
  background: linear-gradient(150deg, #fbf3dd, #efe2c0);
}
.loc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-art-fallback {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.loc-art.no-art img { display: none; }
.loc-art.no-art .loc-art-fallback { display: flex; }

/* the blessing */
.citadel-blessing { text-align: center; margin: 52px 0 10px; }
.blessing-line { font-family: var(--font-display); font-size: clamp(1.35rem, 3.4vw, 1.8rem); color: #8a6d24; }
.blessing-note { margin-top: 8px; font-size: 0.8rem; color: var(--ink-muted); }

@media (max-width: 760px) {
  .citadel-locations { grid-template-columns: 1fr; }
  .hall-feature { flex-direction: column; text-align: center; padding: 26px 20px; }
  .hall-law { text-align: left; }
  .hall-rose { width: 150px; height: 150px; }
  .loc-long { flex-direction: column; }
  .citadel-art { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hall-rose { animation: none; }
}
.loc-long[hidden] { display: none; }

/* ============ Final character art (headshot + fullbody, transparent) ============ */
/* fullbody: profile pages, reveal heroes, large displays, object-fit: contain,
   floats on the hero gradient (no frame box), grounded by a soft shadow */
.guardian-hero .guardian-art {
  width: auto; max-width: 88%;
  height: min(430px, 58vw);
  object-fit: contain;
  border: none; border-radius: 0; box-shadow: none; background: none;
  filter: drop-shadow(0 14px 22px rgba(30, 27, 46, 0.18));
}
/* headshots: square, never cropped, never stretched */
.gc-art { width: 108px; height: 108px; border-radius: 16px; }
.gc-art img, .k-art img { object-fit: contain; object-position: center; }
.k-art { width: 88px; height: 88px; }
.md-art { width: 84px; height: 84px; }
@media (max-width: 640px) {
  .guardian-hero .guardian-art { height: min(340px, 78vw); max-width: 94%; }
}

/* ============ MASTER REFINEMENT SPRINT ============ */

/* --- Kingdom intro (Part 5) --- */
.kingdom-lede { max-width: 620px; margin-left: auto; margin-right: auto; }
.kingdom-invite { margin-top: 10px; font-size: 0.95rem; color: var(--ink-soft); }
.kingdom-tagline {
  margin-top: 14px; font-family: var(--font-display); font-style: italic;
  font-size: 1.15rem; color: #8C6CFF;
}

/* --- Illustrated map (Part 4): luminous frame replaces parchment --- */
.kingdom-svg-wrap {
  background: #0D1B4C;
  border: 1.5px solid rgba(140, 108, 255, 0.55);
  border-radius: 22px;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.5),
    0 14px 44px rgba(13, 27, 76, 0.28),
    inset 0 0 40px rgba(140, 108, 255, 0.18);
  padding: 0; overflow: hidden;
}
.zone-label {
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 3.5px; fill: #3E3A70;
  paint-order: stroke; stroke: rgba(255,255,255,0.75); stroke-width: 4px;
}
.zone-label.zl-dark { fill: #FFE9BF; stroke: rgba(13,27,76,0.7); }
.pin-label {
  font-size: 13.5px; fill: #2A2550;
  paint-order: stroke; stroke: rgba(255,253,246,0.9); stroke-width: 4px;
}
.map-pin.pin-on-dark .pin-label { fill: #FFFFFF; stroke: rgba(13,27,76,0.85); }
.map-pin .pin-halo { transform-box: fill-box; transform-origin: center; transition: opacity .15s, transform .15s; }
.map-pin:hover .pin-halo, .map-pin:focus-visible .pin-halo { opacity: 0.9; transform: scale(1.6); }
.map-pin .pin-ring { opacity: 0; }
.map-pin.selected .pin-ring, .map-pin:focus-visible .pin-ring { opacity: 1; }
.castle-label {
  font-family: 'Playfair Display', Georgia, serif; font-size: 17px; font-weight: 700; fill: #1e1b2e;
  paint-order: stroke; stroke: rgba(255,253,246,0.9); stroke-width: 4px;
}
.castle-sublabel { fill: #6b5a2e; }
.map-castle:hover, .map-castle:focus-visible { filter: brightness(1.08); outline: none; }
.map-scroll-hint {
  display: none; text-align: center; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 8px;
}

/* mobile: horizontally scrollable map with affordance (replaces the old hide-map rule) */
@media (max-width: 760px) {
  .kingdom-svg-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kingdom-svg-wrap svg { min-width: 860px; }
  .map-scroll-hint { display: block; }
}

/* --- Reveal hierarchy (Part 6): name prominent not oversized; MBTI secondary --- */
.guardian-name { font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: 0.02em; }
.guardian-epithet { font-size: 1.02rem; margin-top: 12px; color: var(--g-deep, var(--ink)); }
.guardian-compass-style {
  margin-top: 12px; font-size: 0.8rem; padding: 4px 14px;
  background: transparent; border: 1.5px solid color-mix(in srgb, var(--g-deep, #4b4660) 40%, transparent);
  color: var(--ink-soft);
}
.reveal-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: -6px 0 24px;
}
.reveal-actions .btn { min-height: 44px; }

/* --- Keepsake share card (Part 3) --- */
.keepsake { display: flex; gap: 22px; align-items: flex-start; margin: 18px 0 22px; }
.card-preview-wrap {
  position: relative; flex-shrink: 0; width: min(300px, 42vw); max-width: 100%;
  border-radius: 14px; overflow: hidden;
  border: 1.5px solid var(--line); background: linear-gradient(160deg, #1a2455, #4a3f8f);
  min-height: 180px;
}
.card-preview-wrap img { display: block; width: 100%; height: auto; }
.card-preview-note {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85); font-size: 0.82rem; opacity: 0; pointer-events: none;
}
.card-preview-wrap.loading .card-preview-note { opacity: 1; }
.card-preview-wrap.loading img { opacity: 0.35; }
.keepsake-controls { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.keepsake-controls .btn { min-height: 44px; }
.format-toggle {
  display: inline-flex; gap: 0; border: 1.5px solid var(--line); border-radius: 999px;
  overflow: hidden; width: fit-content; margin-bottom: 2px;
}
.format-toggle .fmt {
  font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: none; padding: 10px 18px; cursor: pointer; min-height: 44px;
}
.format-toggle .fmt.active { background: var(--ink); color: #fff; }
.format-toggle .fmt:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }

@media (max-width: 640px) {
  .keepsake { flex-direction: column; align-items: center; }
  .card-preview-wrap { width: min(320px, 84vw); }
  .keepsake-controls { width: 100%; align-items: stretch; }
  .format-toggle { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin .pin-halo { transition: none; }
  .map-pin:hover .pin-halo { transform: none; }
}

/* ============ HIGH-IMPACT PRODUCT EXPERIENCE SPRINT ============ */

/* nav: primary CTA + calm active/hover states */
.nav { align-items: center; }
.nav-cta { padding: 8px 18px; font-size: 0.88rem; margin-left: 6px; min-height: 40px; }
.nav a:hover, .nav a:focus-visible { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 4px; outline: none; }

/* homepage guardians intro */
.guardian-intro-line {
  text-align: center; font-family: var(--font-display); font-style: italic;
  font-size: 1.3rem; color: #8C6CFF; margin-bottom: 8px;
}
.diff-cards .info-card h3 { color: var(--violet-deep); }

/* Choose Your Journey */
.anchor-alias { display: block; height: 0; }
.journey-grid { align-items: stretch; }
.journey-card { display: flex; flex-direction: column; }
.journey-card .price-features { flex: 1; }
.journey-kicker {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 6px;
}
.journey-purpose { font-size: 0.88rem; color: var(--ink-soft); margin: 6px 0 12px; }
.journey-card .amp { color: var(--ink-muted); font-weight: 500; }
.availability {
  display: inline-block; align-self: center; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #8a5e1c;
  background: #fdf3e0; border: 1px solid #ecd9ac; border-radius: 999px;
  padding: 3px 12px; margin-bottom: 10px;
}
.journey-card.flagship {
  border: 2px solid #8C6CFF;
  background: linear-gradient(175deg, #f3efff, var(--surface) 45%);
  box-shadow: 0 10px 32px rgba(140, 108, 255, 0.18);
}
.journey-card.flagship .badge { background: #8C6CFF; }
.journey-card .btn { min-height: 44px; }
.journey-card .btn-link { margin-top: 8px; }

/* Peek inside Your Inner Compass */
.peek-inside {
  margin-top: 26px; padding: 28px 30px; text-align: center;
  background:
    radial-gradient(420px 200px at 12% 0%, rgba(140, 108, 255, 0.12), transparent),
    radial-gradient(420px 200px at 88% 100%, rgba(255, 107, 157, 0.10), transparent),
    var(--surface);
  border: 1.5px solid color-mix(in srgb, #8C6CFF 35%, var(--line));
}
.peek-inside h3 { font-size: 1.5rem; margin-bottom: 8px; }
.peek-inside p { color: var(--ink-soft); max-width: 560px; margin: 0 auto 14px; }
.peek-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.peek-chips span {
  font-size: 0.78rem; font-weight: 600; color: var(--violet-deep);
  background: var(--violet-soft); border-radius: 999px; padding: 5px 13px;
}

/* footer */
.footer-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px; text-align: left; max-width: 720px; margin: 0 auto 26px;
}
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-head {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 2px;
}
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--violet-deep); text-decoration: underline; }
.footer-blessing {
  text-align: center; font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; color: #8C6CFF; margin-bottom: 14px;
}

@media (max-width: 720px) {
  .nav { justify-content: center; }
  .nav-cta { margin-left: 0; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* 320px hardening: no fixed min-columns, chips may shrink */
@media (max-width: 380px) {
  .cards.two-col, .cards.three-col, .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .card { min-width: 0; }
  .guardian-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guardian-card { min-width: 0; padding: 12px 6px; }
  .gc-virtue { font-size: 0.62rem; letter-spacing: 0.03em; padding: 3px 8px; max-width: 100%; }
  .gc-art { width: 92px; height: 92px; }
}
@media (max-width: 640px) {
  .hero-v2 { padding-top: 34px; }
}
.nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
@media (max-width: 960px) { .nav { gap: 12px; justify-content: center; } .header-inner { flex-direction: column; gap: 8px; } }

/* ============ YOUR INNER COMPASS PRODUCT EXPERIENCE ============ */
#view-inner-compass { padding: 54px 0 72px; }
.ic-section { margin-top: 64px; }

/* --- hero --- */
.ic-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.ic-hero-text h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.18; margin: 10px 0 14px; }
.ic-sub { color: var(--ink-soft); font-size: 1rem; max-width: 480px; }
.ic-price-row { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; flex-wrap: wrap; }
.ic-price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--ink); }
.ic-price-note { color: var(--ink-muted); font-size: 0.9rem; }
.ic-actions { justify-content: flex-start; margin-top: 16px; }
.ic-facts { justify-content: flex-start; margin-top: 16px; }
.ic-sample-label { text-align: center; font-size: 0.76rem; color: var(--ink-muted); margin-top: 12px; letter-spacing: 0.04em; }

/* --- 3D book --- */
.ic-hero-book { display: flex; flex-direction: column; align-items: center; perspective: 1200px; }
.ic-book { position: relative; width: min(300px, 76vw); transform: rotateY(-12deg) rotateX(2deg); transform-style: preserve-3d; }
@media (prefers-reduced-motion: no-preference) {
  .ic-book { transition: transform 0.35s ease; }
  .ic-hero-book:hover .ic-book { transform: rotateY(-6deg) rotateX(1deg); }
}
.ic-book-cover {
  position: relative; aspect-ratio: 3 / 4.2; border-radius: 10px 16px 16px 10px;
  background:
    radial-gradient(240px 200px at 50% 26%, rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(160deg, var(--g-deep, #2B174F), var(--g-color, #5B3FA3) 78%);
  border: 1.5px solid rgba(255, 215, 0, 0.5);
  box-shadow: 0 24px 50px rgba(13, 27, 76, 0.35), inset 0 0 0 7px rgba(255, 215, 0, 0.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px 22px; text-align: center; color: #fff;
}
.ic-book-edge {
  position: absolute; top: 5px; bottom: 5px; right: -9px; width: 10px;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(180deg, #fffdf6 0 2.5px, #e8e2d2 2.5px 4px);
  transform: translateZ(-12px);
}
.icc-brand { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.28em; color: #FFD700; margin-bottom: 12px; }
.icc-rose { width: 84px; height: 84px; opacity: 0.95; }
.icc-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 12px; }
.icc-owner { font-family: var(--font-display); font-style: italic; font-size: 1rem; margin-top: 2px; }
.icc-guardian { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; margin-top: 2px; }
.icc-animal { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: rgba(255,255,255,0.92); }
.icc-domain { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; color: #FFD700; margin-top: 8px; }
.icc-type { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; margin-top: 8px;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 2px 12px; }
.icc-blessing { font-family: var(--font-display); font-style: italic; font-size: 0.78rem; color: rgba(255,255,255,0.85); margin-top: 14px; }

/* --- chapter journey --- */
.ic-chapter-list { list-style: none; max-width: 700px; margin: 30px auto 0; display: grid; gap: 14px; }
.ic-chapter-list li { display: flex; gap: 16px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.ic-ch-marker {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: #8a6d24; background: #fdf6e2; border: 1.5px solid #e2cd96;
}
.ic-chapter-list h3 { font-size: 1.02rem; margin-bottom: 3px; }
.ic-chapter-list p { font-size: 0.86rem; color: var(--ink-soft); }
.ic-ch-outcome { font-size: 0.78rem !important; color: var(--violet-deep) !important; font-style: italic; margin-top: 4px; }

/* --- Peek Inside carousel --- */
.ic-preview-shell { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.ic-nav-btn {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); font-size: 1.1rem; color: var(--ink);
}
.ic-nav-btn:hover, .ic-nav-btn:focus-visible { border-color: var(--violet); color: var(--violet-deep); outline: none; }
.ic-pages {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 12px 4px 18px; -webkit-overflow-scrolling: touch; outline: none;
}
.ic-pages:focus-visible { box-shadow: 0 0 0 2px var(--violet); border-radius: 12px; }
.ic-page {
  flex: 0 0 auto; width: min(290px, 72vw); aspect-ratio: 3 / 4; scroll-snap-align: center;
  background: linear-gradient(175deg, #fffdf8, var(--g-soft, #f6f2ff) 130%);
  border: 1px solid #e4d9bc; border-radius: 12px; padding: 22px 20px 34px;
  position: relative; overflow: hidden; text-align: left;
  box-shadow: 0 3px 14px rgba(30, 27, 46, 0.07);
}
.icp-kicker { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-deep, var(--violet-deep)); }
.icp-title { font-family: var(--font-display); font-size: 1.12rem; margin-top: 3px; color: var(--ink); }
.icp-rule { display: block; width: 38px; height: 2px; background: #d9bd76; margin: 10px 0 12px; }
.icp-body { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.55; }
.icp-muted { color: var(--ink-muted); }
.icp-quote { font-family: var(--font-display); font-style: italic; font-size: 0.9rem; color: var(--g-deep, var(--ink)); margin-top: 6px; }
.icp-big { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--g-deep, var(--violet-deep)); margin-bottom: 8px; }
.icp-art { width: 72px; height: 72px; border-radius: 12px; object-fit: contain; background: var(--g-soft, #f4f1ea); border: 1px solid var(--line); margin-bottom: 10px; }
.icp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.icp-pills span { font-size: 0.68rem; font-weight: 600; color: var(--g-deep, var(--violet-deep)); background: var(--g-soft, #efeafb); border-radius: 999px; padding: 3px 10px; }
.icp-letter { font-family: var(--font-display); font-style: italic; font-size: 0.84rem; }
.icp-sign { font-family: var(--font-display); font-size: 1.05rem; color: var(--g-deep, var(--ink)); margin-top: 6px; }
.icp-foot { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 0.62rem; color: var(--ink-muted); letter-spacing: 0.06em; }
.icp-coverface { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: 8px; background: linear-gradient(160deg, var(--g-deep, #2B174F), var(--g-color, #5B3FA3)); color: #fff; padding: 18px; }
.icp-coverface .icc-rose { width: 64px; height: 64px; }
.ic-counter { text-align: center; font-size: 0.8rem; color: var(--ink-muted); margin-top: 4px; }

/* --- Guardian personalisation demo --- */
.ic-selector { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.ic-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  font-family: var(--font-body); background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 14px 18px; min-width: 132px;
}
.ic-chip img { width: 62px; height: 62px; object-fit: contain; }
.ic-chip-name { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.ic-chip-sub { font-size: 0.68rem; color: var(--ink-soft); }
.ic-chip.active { border-color: var(--g-deep, var(--violet)); background: var(--g-soft, var(--violet-soft)); }
.ic-chip:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ic-message { max-width: 620px; margin: 0 auto; text-align: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; }
.ic-message p { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: var(--ink); }
.ic-message cite { display: block; margin-top: 10px; font-style: normal; font-size: 0.8rem; color: var(--ink-muted); }

/* --- comparison --- */
.ic-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 28px auto 0; align-items: stretch; }
.ic-compare-card { display: flex; flex-direction: column; }
.ic-compare-card .price-features { flex: 1; }
.ic-compare-flagship { border: 2px solid #8C6CFF; background: linear-gradient(175deg, #f3efff, var(--surface) 45%); }
.ic-compare-plus { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin: 4px 0 8px; }
.ic-compare-card .btn { margin-top: 14px; min-height: 44px; }

/* --- philosophy + waitlist --- */
.ic-philosophy { max-width: 560px; margin: 34px auto 0; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--violet-deep); }
.ic-waitlist-card { max-width: 560px; margin: 0 auto; text-align: center; padding: 34px 30px; }
.ic-waitlist-card h2 { font-size: 1.6rem; margin: 8px 0 8px; }
.ic-waitlist-card > p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 18px; }
.ic-waitlist-form { display: grid; gap: 12px; text-align: left; }
.ic-field span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.ic-field em { color: var(--ink-muted); font-style: normal; font-weight: 500; }
.ic-waitlist-form .btn { min-height: 48px; }
.icw-confirm { padding: 20px 0 6px; }
.icw-confirm-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }

/* --- responsive --- */
@media (max-width: 860px) {
  .ic-hero { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .ic-sub { margin: 0 auto; }
  .ic-actions, .ic-facts { justify-content: center; }
  .ic-price-row { justify-content: center; }
}
@media (max-width: 760px) {
  .ic-compare-grid { grid-template-columns: 1fr; }
  .ic-nav-btn { display: none; }  /* swipe + counter on mobile */
}
@media (prefers-reduced-motion: reduce) {
  .ic-book, .ic-hero-book:hover .ic-book { transition: none; transform: none; }
  .ic-pages { scroll-behavior: auto; }
}

/* ============ mobile navigation drawer ============ */
.menu-btn { display: none; }
.nav-backdrop { display: none; }
/* Desktop: the shell is transparent to layout, so the nav keeps its flex row. */
.nav-shell { display: contents; }
@media (max-width: 760px) {
  .header-inner { flex-direction: row; justify-content: space-between; align-items: center; }
  .menu-btn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 11px; background: var(--surface);
    border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; z-index: 70;
  }
  .menu-btn span { display: block; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
  body.nav-open .menu-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.nav-open .menu-btn span:nth-child(2) { opacity: 0; }
  body.nav-open .menu-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  /* Mobile: the shell is a fixed, full-viewport clip box. Because the drawer
     slides to translateX(100%) (off the right edge) when closed, and a
     position:fixed element cannot be clipped by overflow on html/body, the
     drawer is instead position:absolute INSIDE this overflow:hidden shell.
     That contains the off-canvas box entirely, so it never extends the page
     width (no phantom horizontal scroll, including on iOS Safari). The shell
     is pointer-events:none so it never intercepts taps; only the drawer and
     the separate backdrop are interactive. */
  .nav-shell {
    display: block; position: fixed; inset: 0; overflow: hidden;
    pointer-events: none; z-index: 60;
  }
  .nav {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 84vw); height: 100dvh;
    background: var(--surface); flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 6px; padding: 84px 28px 28px;
    transform: translateX(100%); transition: transform 0.25s ease;
    box-shadow: -14px 0 44px rgba(13, 27, 76, 0.20); pointer-events: auto;
  }
  body.nav-open .nav { transform: translateX(0); }
  .nav a { font-size: 1.05rem; padding: 10px 0; width: 100%; }
  .nav-cta { width: 100%; margin: 14px 0 0; min-height: 46px; }
  body.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(13, 27, 76, 0.38); z-index: 55;
  }
  /* Lock the element that actually scrolls. body is not the scroll
     container here (the viewport is), so hiding body's overflow never held
     the page still while the drawer was open; it only made body a scroll
     container. js/app.js mirrors the nav-open class onto the root element
     for this rule. overflow: hidden stops user scrolling while leaving the
     scroll position untouched, so nothing has to be saved and restored. */
  html.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .menu-btn span { transition: none; }
}
@media (max-width: 760px) {
  .nav { visibility: hidden; transition: transform 0.25s ease, visibility 0s 0.25s; }
  body.nav-open .nav { visibility: visible; transition: transform 0.25s ease; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}
@media (max-width: 760px) {
  html { overflow-x: hidden; }
  /* body must CLIP horizontally, not HIDE.
     `overflow-x: hidden` forces the other axis to compute to `auto`, which
     makes body a scroll container. position: sticky then resolves against
     body's scrollport instead of the viewport, and because body's own
     scrollport never scrolls, the sticky site header and the sticky result
     nav both scrolled away on mobile.
     `overflow-x: clip` clips exactly the same content but leaves overflow-y
     `visible`, so body is not a scroll container and sticky works again.
     Dropping the body rule entirely was rejected: measured with a 200vw
     probe, `visible` let the document widen to 200vw (content silently cut
     off by the viewport), while `clip` contained it at 375px exactly as
     `hidden` did.
     The `hidden` line is a deliberate fallback for engines without `clip`
     (Safari below 16): they keep today's behaviour rather than losing the
     containment, so nothing regresses anywhere. */
  body { overflow-x: hidden; overflow-x: clip; }
}