/* Ivory Celestial theme. Light is the deliberate product default; dark is
   an explicit saved choice, keeping colour behaviour predictable. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --color-bg-deep: #f6f3ec;
  --color-bg-soft: #edf2f8;
  --color-surface: rgba(255,255,255,.86);
  --color-surface-solid: #fff;
  --color-surface-raised: #f8fbff;
  --color-gold: #b58732;
  --color-gold-light: #8e6420;
  --color-text: #14233d;
  --color-text-muted: #637086;
  --color-accent: #315d9b;
  --color-accent-soft: #dbe7f6;
  --color-success: #3e7d58;
  --color-warning: #a35b37;
  --color-border: rgba(28,67,116,.14);
  --color-border-strong: rgba(181,135,50,.42);
  --gradient-gold: linear-gradient(135deg,#f2d995 0%,#d7a844 100%);
  --gradient-aurora: radial-gradient(circle at 12% 8%,rgba(65,103,161,.12),transparent 31%),radial-gradient(circle at 88% 28%,rgba(202,158,70,.12),transparent 29%);
  --shadow-soft: 0 24px 70px rgba(22,48,82,.13);
  --shadow-gold: 0 18px 55px rgba(170,126,43,.16);
  --color-on-gold: #17243a;
  --theme-header: rgba(250,248,243,.88);
  --theme-canvas-start: #fbfaf7;
  --theme-canvas-end: #eef3f9;
  --theme-input: rgba(255,255,255,.92);
  --theme-subtle-fill: rgba(38,78,130,.045);
  --theme-overlay: rgba(15,29,51,.58);
  --card-back-image: url("../images/card-back-celestial-light.webp");
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-deep: #080b18;
  --color-bg-soft: #101528;
  --color-surface: rgba(24,30,54,.82);
  --color-surface-solid: #181e36;
  --color-surface-raised: rgba(37,44,75,.9);
  --color-gold: #d6b36a;
  --color-gold-light: #f2d79a;
  --color-text: #f7f4ed;
  --color-text-muted: #aaaabd;
  --color-accent: #9b9ee8;
  --color-accent-soft: #c6b7ef;
  --color-success: #9bc5a3;
  --color-warning: #e0a67d;
  --color-border: rgba(224,198,136,.19);
  --color-border-strong: rgba(224,198,136,.42);
  --gradient-gold: linear-gradient(135deg,#f2d79a 0%,#c99a46 100%);
  --gradient-aurora: radial-gradient(circle at 15% 15%,rgba(100,88,176,.2),transparent 31%),radial-gradient(circle at 85% 30%,rgba(196,150,82,.12),transparent 27%);
  --shadow-soft: 0 24px 70px rgba(0,0,0,.32);
  --shadow-gold: 0 18px 55px rgba(211,171,94,.15);
  --color-on-gold: #080b18;
  --theme-header: rgba(8,11,24,.76);
  --theme-canvas-start: #090c1b;
  --theme-canvas-end: #090c18;
  --theme-input: rgba(8,11,24,.62);
  --theme-subtle-fill: rgba(255,255,255,.025);
  --theme-overlay: rgba(10,12,24,.72);
  --card-back-image: url("../images/card-back-celestial-dark.webp");
}

.card-back-art {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--color-bg-soft) var(--card-back-image) center / cover no-repeat;
}
.hero-card .card-back-art { width: 100%; height: 100%; }
.deck-stack .card-back-art { width: 100%; }

body { background: var(--color-bg-deep); }
.public-shell { background-image: var(--gradient-aurora),linear-gradient(180deg,var(--theme-canvas-start) 0%,var(--theme-canvas-end) 100%); }
.public-shell::before {
  opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='12' cy='19' r='.6' fill='%23315d9b' opacity='.22'/%3E%3Ccircle cx='101' cy='41' r='.5' fill='%23b58732' opacity='.28'/%3E%3Ccircle cx='59' cy='112' r='.6' fill='%23315d9b' opacity='.18'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .public-shell::before {
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='8' cy='16' r='.6' fill='%23fff' opacity='.45'/%3E%3Ccircle cx='88' cy='36' r='.4' fill='%23fff' opacity='.3'/%3E%3Ccircle cx='48' cy='94' r='.5' fill='%23d8b56b' opacity='.35'/%3E%3C/svg%3E");
}

.site-header { background: var(--theme-header); box-shadow: 0 1px 0 rgba(255,255,255,.72),0 10px 32px rgba(24,55,94,.055); }
html[data-theme="dark"] .site-header { box-shadow: none; }
.brand-sigil { background: rgba(255,255,255,.52); }
html[data-theme="dark"] .brand-sigil { background: transparent; }
.language-switcher { background: var(--theme-subtle-fill); }
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 7px 20px rgba(28,67,116,.08);
  transition: color var(--transition-standard),border-color var(--transition-standard),transform var(--transition-standard),background var(--transition-standard);
}
.theme-toggle:hover { transform: translateY(-1px); color: var(--color-gold-light); border-color: var(--color-border-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.theme-toggle__sun,.theme-toggle__moon { position: absolute; transition: opacity var(--transition-standard),transform var(--transition-standard); }
.theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle__moon { opacity: 0; transform: rotate(-35deg) scale(.6); }
html[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(35deg) scale(.6); }
html[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }

.btn-primary { color: var(--color-on-gold); }
.btn-ghost { background: var(--theme-subtle-fill); }
.btn-ghost:hover { background: var(--color-bg-soft); }
.card-surface { box-shadow: inset 0 1px 0 rgba(255,255,255,.72),var(--shadow-soft); }
.card-thumb { background: linear-gradient(145deg,#e8eef7,#dce5f1); box-shadow: 0 15px 38px rgba(23,49,84,.15); }
html[data-theme="dark"] .card-thumb { background: linear-gradient(145deg,#171d35,#0b0f20); box-shadow: 0 15px 35px rgba(0,0,0,.28); }
.field input[type="text"],.field input[type="password"],.field input[type="email"],.field input[type="number"],.field textarea,.field select { background: var(--theme-input); }
.alert { background: var(--color-surface); }
.purpose-card::after { background: radial-gradient(circle,rgba(49,93,155,.1),transparent 68%); }
html[data-theme="dark"] .purpose-card::after { background: radial-gradient(circle,rgba(155,158,232,.13),transparent 68%); }

.celestial-orbit { border-color: rgba(49,93,155,.16); }
.hero-card { box-shadow: 0 30px 70px rgba(25,52,87,.18),0 0 0 1px rgba(255,255,255,.72); }
html[data-theme="dark"] .hero-card { box-shadow: var(--shadow-soft),0 0 70px rgba(214,179,106,.12); }
.pathway-card { background: rgba(255,255,255,.58); box-shadow: 0 12px 34px rgba(22,51,88,.055); }
html[data-theme="dark"] .pathway-card { background: rgba(22,28,50,.38); box-shadow: none; }
.home-closing { background: radial-gradient(circle at 50% 120%,rgba(49,93,155,.1),transparent 57%); }
html[data-theme="dark"] .home-closing { background: radial-gradient(circle at 50% 120%,rgba(214,179,106,.14),transparent 55%); }

.spread-preview { background: var(--color-surface); }
.spread-preview--featured { background: radial-gradient(circle at 50% 50%,rgba(49,93,155,.1),transparent 58%),rgba(255,255,255,.68); }
html[data-theme="dark"] .spread-preview--featured { background: radial-gradient(circle at 50% 50%,rgba(155,158,232,.1),transparent 58%),rgba(8,11,24,.48); }
.reading-board-shell { background: radial-gradient(circle at 50% 48%,rgba(49,93,155,.09),transparent 36%),linear-gradient(145deg,rgba(255,255,255,.94),rgba(237,243,250,.88)); box-shadow: inset 0 1px 0 #fff,0 35px 90px rgba(25,54,92,.13); }
.reading-board-shell::after { opacity: .18; background-image: radial-gradient(circle,rgba(49,93,155,.45) 0 1px,transparent 1.2px); }
.reading-board-aura { border-color: rgba(49,93,155,.12); background: radial-gradient(circle,rgba(72,111,168,.1),transparent 63%); box-shadow: 0 0 100px rgba(49,93,155,.07); }
.reading-board-aura::before,.reading-board-aura::after,.reading-board-aura span { border-color: rgba(181,135,50,.14); }
.reading-card__label strong { color: var(--color-text); }
html[data-theme="dark"] .reading-board-shell { background: radial-gradient(circle at 50% 48%,rgba(130,112,196,.13),transparent 34%),linear-gradient(145deg,rgba(25,31,57,.82),rgba(8,11,25,.78)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 35px 100px rgba(0,0,0,.32); }
html[data-theme="dark"] .reading-board-shell::after { opacity: .28; background-image: radial-gradient(circle,rgba(255,255,255,.38) 0 1px,transparent 1.2px); }
html[data-theme="dark"] .reading-board-aura { border-color: rgba(224,198,136,.09); background: radial-gradient(circle,rgba(115,105,190,.12),transparent 63%); }

.ritual-breath { background: radial-gradient(circle,rgba(214,179,106,.58) 0 7%,rgba(214,179,106,.17) 28%,rgba(49,93,155,.08) 52%,transparent 72%); }
.deck-stack::before { background: radial-gradient(circle,rgba(181,135,50,.2),transparent 70%); }
.card-popup { background: var(--color-surface-solid); border: 1px solid var(--color-border); }
.card-popup::backdrop,.card-popup[data-fallback="true"]::before { background: var(--theme-overlay); }
.card-popup__nav,.toast { background: var(--color-surface-solid); }
.reading-summary > section:not(.pair-section) p { color: var(--color-text); }
.pair-section { background: var(--color-surface); }
.site-footer { background: rgba(255,255,255,.32); }
html[data-theme="dark"] .site-footer { background: transparent; }

@media (max-width: 520px) {
  .site-header__inner { gap: .75rem; }
  .site-nav { gap: .45rem; }
  .theme-toggle { width: 34px; height: 34px; flex-basis: 34px; }
}

@media print { .theme-toggle { display: none !important; } }

/* -------------------------------------------------------------------------
   Celestial atelier — angular edition

   The public shell remains light and editorial, while artwork is presented
   on a permanent midnight-blue stage.  Gold/black cards therefore feel
   mounted and intentional instead of floating on white.  Decorative lines
   are gradients rather than extra DOM, keeping the pattern lightweight and
   avoiding competing stacking contexts around the reading dialog.
   ------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --atelier-ink: #0b1730;
  --atelier-blue: #142c53;
  --atelier-blue-soft: #234a78;
  --atelier-gold: #c59a47;
  --atelier-gold-soft: rgba(197,154,71,.34);
  --atelier-ivory: #faf7ef;
  --atelier-stage:
    radial-gradient(circle at 50% 42%,rgba(224,185,103,.16),transparent 34%),
    radial-gradient(circle at 16% 18%,rgba(69,111,169,.2),transparent 28%),
    linear-gradient(145deg,#172b4d 0%,#0b1730 52%,#080f20 100%);
  --filigree-frame: url("../images/ui/celestial-filigree-frame.svg");
}

html[data-theme="dark"] {
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --atelier-ink: #070d1c;
  --atelier-blue: #132746;
  --atelier-blue-soft: #263b64;
  --atelier-gold: #d6b36a;
  --atelier-gold-soft: rgba(214,179,106,.31);
  --atelier-ivory: #f7f4ed;
  --atelier-stage:
    radial-gradient(circle at 50% 42%,rgba(214,179,106,.13),transparent 34%),
    radial-gradient(circle at 16% 18%,rgba(103,91,181,.16),transparent 29%),
    linear-gradient(145deg,#17233f 0%,#0b1124 54%,#070b17 100%);
  --filigree-frame: url("../images/ui/celestial-filigree-frame.svg");
}

/* Angular controls: small precise corners replace pills and soft capsules. */
.btn,
.badge,
.language-switcher,
.language-switcher a,
.theme-toggle,
.skip-link,
.brand-sigil,
.purpose-card__symbol,
.pathway-card span {
  border-radius: 2px;
}

.btn {
  position: relative;
  border-radius: 2px;
  letter-spacing: .025em;
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  pointer-events: none;
}
.btn::before { inset: 4px auto auto 4px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; opacity: .4; }
.btn::after { inset: auto 4px 4px auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .4; }

/* Reusable ornamental surface: fine corner marks and a restrained gold line. */
.card-surface,
.question-form,
.guide-steps li,
.about-manifesto,
.pair-section,
.alert {
  border-radius: 3px;
  background-image:
    linear-gradient(var(--atelier-gold-soft),var(--atelier-gold-soft)),
    linear-gradient(var(--atelier-gold-soft),var(--atelier-gold-soft)),
    linear-gradient(var(--atelier-gold-soft),var(--atelier-gold-soft)),
    linear-gradient(var(--atelier-gold-soft),var(--atelier-gold-soft));
  background-size: 28px 1px,1px 28px,28px 1px,1px 28px;
  background-position: 12px 12px,12px 12px,calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) calc(100% - 12px);
  background-repeat: no-repeat;
}

/* Artwork receives a slim gold mat and a navy shadow instead of rounded UI. */
.card-thumb,
.hero-card,
.reading-card-detail__art,
.booklet-chapter__art,
.card-popup__artwork img {
  border-radius: 2px;
  border-color: rgba(197,154,71,.52);
  box-shadow:
    0 0 0 4px rgba(250,247,239,.86),
    0 0 0 5px rgba(181,135,50,.3),
    0 22px 46px rgba(11,30,58,.22);
}
html[data-theme="dark"] .card-thumb,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .reading-card-detail__art,
html[data-theme="dark"] .booklet-chapter__art,
html[data-theme="dark"] .card-popup__artwork img {
  box-shadow:
    0 0 0 3px rgba(10,17,35,.9),
    0 0 0 4px rgba(214,179,106,.38),
    0 22px 48px rgba(0,0,0,.46);
}

/* The permanent celestial stage. It stays dark in light mode by design. */
.reading-board-shell {
  border-radius: 3px;
  border-color: rgba(214,179,106,.48);
  background: var(--atelier-stage);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 90px rgba(0,0,0,.2),
    0 34px 84px rgba(19,43,77,.2);
}
.reading-board-shell::before {
  inset: 13px;
  border-radius: 0;
  border-color: rgba(214,179,106,.18);
  background:
    linear-gradient(90deg,var(--atelier-gold) 0 34px,transparent 34px) left top/90px 1px no-repeat,
    linear-gradient(180deg,var(--atelier-gold) 0 34px,transparent 34px) left top/1px 90px no-repeat,
    linear-gradient(270deg,var(--atelier-gold) 0 34px,transparent 34px) right bottom/90px 1px no-repeat,
    linear-gradient(0deg,var(--atelier-gold) 0 34px,transparent 34px) right bottom/1px 90px no-repeat;
  opacity: .7;
}
.reading-board-shell::after {
  opacity: .25;
  background-image:
    radial-gradient(circle,rgba(246,228,183,.44) 0 1px,transparent 1.25px),
    linear-gradient(45deg,transparent 49.8%,rgba(214,179,106,.035) 50%,transparent 50.2%);
  background-size: 64px 64px,140px 140px;
}
html[data-theme="dark"] .reading-board-shell {
  background: var(--atelier-stage);
  border-color: rgba(214,179,106,.38);
}

.reading-board-aura {
  border-color: rgba(214,179,106,.14);
  background: radial-gradient(circle,rgba(214,179,106,.11),rgba(56,74,130,.08) 38%,transparent 66%);
}
.reading-board-aura::before,
.reading-board-aura::after,
.reading-board-aura span { border-color: rgba(214,179,106,.12); }

.reading-board-shell .reading-card__label strong { color: rgba(250,247,239,.93); }
.reading-board-shell .reading-card__label small,
.reading-board-shell .reading-hint { color: rgba(226,226,235,.7); }
.reading-board-shell .reading-card--active .reading-card__label strong { color: #f2d79a; }
.reading-board-shell .reading-experience .spread-stage__slot::before,
.reading-experience .spread-stage__slot::before {
  border-radius: 1px;
  background: #0b1730;
}
.reading-experience .reading-card--facedown .card-back-art,
.reading-experience .reading-card--revealed .card-thumb {
  border-radius: 2px;
}

/* Spread previews echo the same midnight mounting board. */
.spread-preview,
.spread-preview--featured,
html[data-theme="dark"] .spread-preview--featured {
  border-radius: 3px;
  border-color: rgba(197,154,71,.42);
  background:
    radial-gradient(circle at 50% 48%,rgba(214,179,106,.13),transparent 38%),
    linear-gradient(145deg,#172b4d,#091329 70%);
  box-shadow: inset 0 0 0 10px rgba(7,15,32,.18),0 18px 42px rgba(22,49,84,.12);
}
.spread-preview__slot span {
  border-radius: 1px;
  background: rgba(8,16,35,.88);
  color: #f2d79a;
}
.spread-preview__slot small { color: rgba(239,237,231,.76); }

/* Section language: engraved rules replace rounded floating panels. */
.section-heading,
.page-intro,
.reading-summary > header,
.booklet-chapter__header {
  position: relative;
}
.section-heading::before,
.page-intro--center::before,
.reading-summary > header::before,
.booklet-chapter__header::before {
  content: "◆";
  display: block;
  width: 100%;
  margin-bottom: .8rem;
  color: var(--color-gold);
  font-size: .52rem;
  letter-spacing: .6em;
  text-align: center;
  background: linear-gradient(90deg,transparent,var(--color-border-strong),transparent) center/100% 1px no-repeat;
}

.purpose-card,
.pathway-card,
.guide-steps li,
.pair-section,
.about-manifesto {
  border-radius: 3px;
}
.purpose-card:hover,
.pathway-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 18px 44px rgba(20,49,84,.1);
}
.purpose-card__symbol,
.pathway-card span { color: var(--color-gold-light); }

/* Original filigree frame, drawn for this interface.  It is mounted as one
   non-interactive overlay per zone, so ornamental corners never add DOM,
   steal pointer events, or interfere with the single-dialog architecture. */
.card-surface,
.purpose-card,
.question-form,
.about-manifesto,
.pair-section,
.pathway-card,
.guide-steps li,
.booklet-chapter {
  position: relative;
  isolation: isolate;
}
.card-surface::before,
.purpose-card::before,
.question-form::before,
.about-manifesto::before,
.pair-section::before,
.pathway-card::before,
.guide-steps li::before,
.booklet-chapter::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 2;
  pointer-events: none;
  background: var(--filigree-frame) center / 100% 100% no-repeat;
  opacity: .38;
}
.purpose-card:hover::before,
.pathway-card:hover::before { opacity: .62; }

/* The reading table already owns ::before for its inset border. Add the
   filigree directly to that same ornamental layer instead of stacking a
   competing pseudo-element. */
.reading-board-shell::before {
  background:
    var(--filigree-frame) center / 100% 100% no-repeat,
    linear-gradient(90deg,var(--atelier-gold) 0 34px,transparent 34px) left top/90px 1px no-repeat,
    linear-gradient(180deg,var(--atelier-gold) 0 34px,transparent 34px) left top/1px 90px no-repeat,
    linear-gradient(270deg,var(--atelier-gold) 0 34px,transparent 34px) right bottom/90px 1px no-repeat,
    linear-gradient(0deg,var(--atelier-gold) 0 34px,transparent 34px) right bottom/1px 90px no-repeat;
  opacity: .72;
}

.spread-preview--featured::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 4;
  pointer-events: none;
  background: var(--filigree-frame) center / 100% 100% no-repeat;
  opacity: .48;
}

@media (max-width: 520px) {
  .card-surface::before,
  .purpose-card::before,
  .question-form::before,
  .about-manifesto::before,
  .pair-section::before,
  .pathway-card::before,
  .guide-steps li::before,
  .booklet-chapter::before { inset: 4px; opacity: .3; }
}

/* Keep mobile corners crisp without sacrificing usable space. */
@media (max-width: 768px) {
  .reading-board-shell { border-radius: 2px; padding: 1.5rem .85rem; }
  .reading-board-shell::before { inset: 8px; }
  .card-surface,
  .question-form,
  .about-manifesto { background-position: 8px 8px,8px 8px,calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px); }
}

/* Subtle archangel symbolic field: a halo, seven rays, abstract wings and a
   central axis. It is intentionally a background watermark, not a literal
   figure, and remains beneath every interactive layer. */
.public-shell::before {
  opacity: .5;
  background-image:
    url("../images/ui/archangel-symbolic-field.svg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='12' cy='19' r='.6' fill='%23315d9b' opacity='.22'/%3E%3Ccircle cx='101' cy='41' r='.5' fill='%23b58732' opacity='.28'/%3E%3Ccircle cx='59' cy='112' r='.6' fill='%23315d9b' opacity='.18'/%3E%3C/svg%3E");
  background-position: center 5.5rem,left top;
  background-size: min(1280px,96vw) auto,140px 140px;
  background-repeat: no-repeat,repeat;
}
html[data-theme="dark"] .public-shell::before {
  opacity: .42;
  background-image:
    url("../images/ui/archangel-symbolic-field.svg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='8' cy='16' r='.6' fill='%23fff' opacity='.45'/%3E%3Ccircle cx='88' cy='36' r='.4' fill='%23fff' opacity='.3'/%3E%3Ccircle cx='48' cy='94' r='.5' fill='%23d8b56b' opacity='.35'/%3E%3C/svg%3E");
  background-position: center 5.5rem,left top;
  background-size: min(1280px,96vw) auto,120px 120px;
  background-repeat: no-repeat,repeat;
}

@media (max-width: 620px) {
  .public-shell::before,
  html[data-theme="dark"] .public-shell::before {
    opacity: .34;
    background-position: center 4.5rem,left top;
    background-size: 165vw auto,120px 120px;
  }
}