/*
 * Celestial Haute Couture
 * A restrained luxury layer: proportion, typography and light do the work;
 * gold and filigree remain accents rather than decoration on every surface.
 */

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .004em;
}
html,body,.public-shell { max-width:100%; overflow-x:clip; }

/* Champagne-metal treatments shared by small, deliberate accents. */
.eyebrow,
.display-title em,
.brand-copy small,
.booklet-chapter__subtitle,
.pair-section h2,
.card-popup__angel {
  color: var(--color-gold-light);
  background-image: linear-gradient(110deg,#89601d 0%,#d6ad5b 43%,#f1d895 55%,#a87525 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .display-title em,
html[data-theme="dark"] .brand-copy small,
html[data-theme="dark"] .booklet-chapter__subtitle,
html[data-theme="dark"] .pair-section h2,
html[data-theme="dark"] .card-popup__angel {
  background-image: linear-gradient(110deg,#c39440 0%,#f4dca3 48%,#fff0c3 57%,#b9842f 100%);
}

h1,h2,h3,.display-title {
  font-weight: 500;
  letter-spacing: -.035em;
}
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] .display-title {
  letter-spacing: -.025em;
}
.eyebrow {
  font-size: .68rem;
  letter-spacing: .24em;
}

/* Header: a quiet jewellery-case edge, not a heavy navigation bar. */
.site-header {
  padding-block: .72rem;
  border-bottom: 1px solid rgba(181,135,50,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.8),0 18px 52px rgba(25,50,82,.055);
}
.site-header__inner { min-height: 46px; width:100%; }
.site-header__brand { gap: .9rem; }
.brand-sigil {
  width: 28px;
  height: 28px;
  border-color: rgba(181,135,50,.48);
  box-shadow: inset 0 0 0 4px rgba(181,135,50,.035),0 5px 16px rgba(47,70,105,.08);
}
.brand-copy strong { font-size: 1.02rem; letter-spacing: .015em; }
.brand-copy small { font-size: .61rem; letter-spacing: .2em; }
.site-nav { gap: clamp(.9rem,2.3vw,1.8rem); }
.site-nav > a {
  position: relative;
  font-size: .82rem;
  letter-spacing: .025em;
}
.site-nav > a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: -.42rem;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--color-gold),transparent);
  transition: left var(--transition-standard),right var(--transition-standard);
}
.site-nav > a:hover::after,.site-nav > a:focus-visible::after { left: 0; right: 0; }

/* Hero: editorial proportions and a halo of light around the artwork. */
.hero {
  min-height: min(900px,calc(100svh - 72px));
  gap: clamp(3rem,8vw,8rem);
}
.hero__copy { position: relative; z-index: 2; }
.hero__copy::before {
  content: "";
  position: absolute;
  left: -3rem;
  top: -4rem;
  width: 17rem;
  aspect-ratio: 1;
  border: 1px solid rgba(181,135,50,.08);
  transform: rotate(45deg);
  pointer-events: none;
}
.hero .display-title {
  max-width: 11ch;
  font-size: clamp(2.9rem,4.35vw,4.65rem);
  line-height: 1.14;
  letter-spacing: -.038em;
}
html[lang="th"] .hero .display-title { font-weight:400;line-height:1.27;letter-spacing:-.018em; }
.hero__lead {
  max-width: 55ch;
  font-size: clamp(1rem,1.25vw,1.13rem);
  line-height: 1.95;
}
.hero__visual::before {
  content: "";
  position: absolute;
  width: min(560px,96%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(235,211,156,.24),rgba(55,91,145,.07) 42%,transparent 70%);
  filter: blur(8px);
}
.hero-deck { width: 250px; height: 405px; }
.hero-card {
  border-width: 1px;
  transition: transform 700ms cubic-bezier(.18,.8,.2,1),filter 500ms ease;
}
.hero__visual:hover .hero-card--1 { transform: rotate(-14deg) translate(-80px,11px); }
.hero__visual:hover .hero-card--2 { transform: translateY(-22px); }
.hero__visual:hover .hero-card--3 { transform: rotate(14deg) translate(80px,11px); }

/* Buttons: tailored, crisp and tactile. */
.btn {
  min-height: 50px;
  padding-inline: 1.65rem;
  font-size: .84rem;
  letter-spacing: .045em;
}
.btn-primary {
  border: 1px solid #14233d;
  color:#faf7ef;
  background:
    linear-gradient(110deg,rgba(255,255,255,.07),transparent 34% 68%,rgba(197,154,71,.08)),
    #14233d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09),0 12px 30px rgba(20,35,61,.17);
}
.btn-primary:hover {
  transform: translateY(-3px);
  border-color:#c59a47;
  background-color:#1b3154;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11),0 18px 40px rgba(20,35,61,.23);
}
html[data-theme="dark"] .btn-primary {
  border-color:rgba(214,179,106,.48);
  color:#f7f4ed;
  background:linear-gradient(110deg,rgba(255,255,255,.06),transparent 38%,rgba(214,179,106,.08)),#17233f;
}
.btn-ghost { border-color: rgba(181,135,50,.26); }

/* Sections breathe like an art book; decorative rules provide rhythm. */
.section { padding-block: clamp(5rem,10vw,9rem); }
.section + .section { position: relative; }
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(460px,58vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,transparent,rgba(181,135,50,.44),transparent);
}
.section-heading { gap: clamp(2rem,7vw,6rem); }
.section-heading h2 { max-width: 15ch; }
.section-heading--center h2 { margin-inline: auto; }
.page-intro h1 { font-size:clamp(2.25rem,3.5vw,3.55rem);font-weight:400;line-height:1.3; }

/* Cards and content panels: less dashboard, more collectible folio. */
.card-surface,
.purpose-card,
.question-form,
.pair-section,
.about-manifesto {
  border-color: rgba(181,135,50,.28);
  box-shadow: 0 24px 65px rgba(22,48,82,.08),inset 0 1px 0 rgba(255,255,255,.72);
}
.purpose-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(1.15rem,2vw,1.7rem);
}
.purpose-card {
  min-height: 350px;
  padding: clamp(1.5rem,2.7vw,2.25rem);
  background-color: rgba(255,255,255,.72);
  transition: transform 380ms cubic-bezier(.2,.8,.2,1),box-shadow 380ms ease,border-color 380ms ease;
}
.purpose-card::before { display:none; }
html[data-theme="dark"] .purpose-card { background-color: rgba(18,25,47,.76); }
.purpose-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 28px 72px rgba(21,48,82,.15),0 0 0 1px rgba(181,135,50,.16);
}
.purpose-card h2 { font-size: clamp(1.65rem,2.5vw,2.25rem); }
.purpose-card__symbol {
  width: 42px;height:42px;
  background: linear-gradient(145deg,rgba(255,255,255,.7),rgba(224,207,169,.1));
  box-shadow: inset 0 0 0 4px rgba(181,135,50,.035);
}
.purpose-card__count { font-size: .65rem; letter-spacing: .13em; }
.purpose-card .spread-preview--small {
  min-height:112px;
  background:rgba(230,237,246,.52);
  border-color:rgba(49,93,155,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.purpose-card .spread-preview--small .spread-preview__slot span {
  border-color:rgba(181,135,50,.7);
  background:rgba(255,255,255,.3);
  color:#14233d;
  box-shadow:none;
}
.purpose-card .spread-preview--small .spread-preview__slot small { color:#637086; }
html[data-theme="dark"] .purpose-card .spread-preview--small {
  background:rgba(8,17,36,.25);
  border-color:rgba(214,179,106,.16);
}
html[data-theme="dark"] .purpose-card .spread-preview--small .spread-preview__slot span {
  background:rgba(8,17,36,.4);
  color:#f2d79a;
}
.purpose-card .btn-primary {
  min-height:auto;
  padding:.35rem 0;
  border:0;
  border-bottom:1px solid rgba(181,135,50,.65);
  color:#14233d;
  background:transparent;
  box-shadow:none;
}
.purpose-card .btn-primary::before,.purpose-card .btn-primary::after { display:none; }
.purpose-card .btn-primary:hover {
  transform:none;
  color:#8e6420;
  background:transparent;
  box-shadow:none;
}
html[data-theme="dark"] .purpose-card .btn-primary { color:#f2d79a;background:transparent;border-color:rgba(214,179,106,.55); }

.deck-gallery { gap: clamp(1rem,2.5vw,1.8rem); }
.deck-card .card-thumb { transition-duration: 420ms; }
.deck-card:hover .card-thumb {
  transform: translateY(-11px) scale(1.012);
  box-shadow: 0 26px 58px rgba(15,36,68,.2),0 0 0 1px rgba(181,135,50,.2);
}
.deck-card__caption { padding-top: .25rem; gap: .12rem; }
.deck-card__caption strong { font-family: var(--font-th-display); font-weight: 500; }

.pathway-grid { gap: 1.15rem; }
.pathway-card {
  min-height: 108px;
  padding: 1.3rem 1.45rem;
  border-color: rgba(181,135,50,.23);
  background-color: rgba(255,255,255,.5);
}
html[data-theme="dark"] .pathway-card { background-color: rgba(17,24,45,.58); }
.pathway-card strong { font-size: .93rem; letter-spacing: .01em; }

/* Forms: quiet paper surfaces and precise focus states. */
.question-form { padding: clamp(1.7rem,5vw,3.25rem); }
.field label { font-size: .84rem; letter-spacing: .025em; }
.field input[type="text"],.field input[type="password"],.field input[type="email"],.field input[type="number"],.field textarea,.field select {
  border-color: rgba(55,82,120,.19);
  border-bottom-color: rgba(181,135,50,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
}

/* Ritual: a more ceremonial focus without theatrical language. */
.ritual-experience { max-width: 720px; }
.ritual-experience h1 { font-size: clamp(2.7rem,6vw,5rem); }
.ritual-breath {
  width: 164px;height:164px;
  border-color: rgba(181,135,50,.28);
  box-shadow: inset 0 0 0 18px rgba(181,135,50,.025),0 0 70px rgba(181,135,50,.11);
}
.deck-stack__card { border-radius: 2px; }

/* Reading summary: an editorial chapter rather than a stack of boxes. */
.reading-summary { max-width: 1080px; }
.reading-summary > header { padding-bottom: clamp(2.5rem,6vw,4.5rem); }
.reading-summary > section:not(.pair-section) {
  position: relative;
  max-width: 800px;
  padding: clamp(1.4rem,3vw,2.15rem) clamp(.25rem,2vw,1.4rem);
}
.reading-summary > section:not(.pair-section) h2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  border: 0;
  padding: 0;
  font-size: clamp(1.4rem,2.4vw,2rem);
  text-align: center;
}
.reading-summary > section:not(.pair-section) h2::before,
.reading-summary > section:not(.pair-section) h2::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--color-border-strong));
}
.reading-summary > section:not(.pair-section) h2::after { transform: scaleX(-1); }
.reading-summary > section:not(.pair-section) p { font-size: 1.02rem; line-height: 2; }
.pair-section { max-width: 860px; margin-inline:auto; padding:clamp(1.7rem,4vw,3rem); }

/* Popup becomes a collectible illuminated-page presentation. */
.card-popup {
  border-radius: 3px;
  border: 1px solid rgba(181,135,50,.48);
  box-shadow: 0 50px 130px rgba(5,11,24,.52),0 0 0 1px rgba(245,221,167,.08);
}
.card-popup__header,.card-popup__nav {
  border-color: rgba(181,135,50,.24);
  background: linear-gradient(90deg,var(--color-surface-solid),var(--color-bg-soft),var(--color-surface-solid));
}
.card-popup__close,.card-popup__nav button { border-radius: 2px; }
.card-popup__body { gap: 1.3rem clamp(2rem,4vw,4rem); padding: clamp(1.25rem,3vw,2.4rem); }
.card-popup__art { border-radius: 2px; }
.card-popup__title { font-size: clamp(2rem,4vw,3.3rem); }
.card-popup__field { border-color: rgba(181,135,50,.2); padding-top: 1.15rem; }
.card-popup__field h3 { font-family:var(--font-th-display);font-size:1.04rem;font-weight:500; }
.card-popup__field p { line-height:1.9; }

/* Footer ends with a fine illuminated rule. */
.site-footer { padding-block: 3.4rem; border-color: rgba(181,135,50,.22); }

@media (max-width: 900px) {
  .hero .display-title { max-width: 13ch; margin-inline:auto; }
  .hero__lead { margin-inline:auto; }
  .hero__copy::before { display:none; }
  .purpose-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .purpose-card { min-height: 300px; }
}

@media (max-width: 600px) {
  .site-header { padding:.62rem .8rem; }
  .site-header__inner {
    display:block;
    position:relative;
    align-items:center;
    gap:.45rem;
    width:100%;
    max-width:calc(100vw - 1.6rem);
  }
  .site-header__brand { min-width:0;width:calc(100% - 108px);gap:.45rem;overflow:hidden;min-height:32px; }
  .site-header__brand .brand-sigil { width:27px;height:27px;flex:0 0 27px; }
  .brand-copy { min-width:0; }
  .brand-copy strong { display:block;overflow:hidden;text-overflow:ellipsis;font-size:.8rem;white-space:nowrap; }
  .brand-copy small { display:none; }
  .site-nav { position:fixed;right:.8rem;top:.62rem;z-index:calc(var(--z-header) + 1);display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:.28rem;margin:0;min-width:0; }
  .language-switcher { flex:0 0 auto;padding:2px; }
  .language-switcher a { min-width:27px;min-height:27px;font-size:.66rem; }
  .theme-toggle { width:32px;height:32px;flex:0 0 32px; }
  .section { padding-block: 4.6rem; }
  .hero { width:100%; max-width:100%; overflow:hidden; }
  .hero__copy { width:100%; max-width:100%; padding-inline:.15rem; }
  .hero .display-title { width:100%;max-width:100%;font-size:clamp(2rem,8.4vw,2.65rem);overflow-wrap:normal; }
  html[lang="th"] .hero .display-title { line-height: 1.24; }
  .hero__visual { min-height:285px; }
  .hero-deck { width:150px;height:243px; }
  .hero-card--1 { transform:rotate(-9deg) translate(-36px,7px); }
  .hero-card--3 { transform:rotate(9deg) translate(36px,7px); }
  .hero__visual:hover .hero-card--1 { transform:rotate(-10deg) translate(-38px,7px); }
  .hero__visual:hover .hero-card--2 { transform:translateY(-13px); }
  .hero__visual:hover .hero-card--3 { transform:rotate(10deg) translate(38px,7px); }
  .hero__actions { width:calc(100% - 1.5rem);margin-inline:auto;padding:0; }
  .purpose-grid { grid-template-columns:1fr; }
  .purpose-card { min-height:auto; padding:1.65rem; }
  .reading-summary > section:not(.pair-section) h2 { grid-template-columns:1fr; gap:.55rem; }
  .reading-summary > section:not(.pair-section) h2::before,
  .reading-summary > section:not(.pair-section) h2::after { width:64px;margin-inline:auto; }
  .card-popup:not([data-fallback="true"]) { border-radius: 2px 2px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .hero-card,.purpose-card,.deck-card .card-thumb { transition:none; }
}

@media print {
  .reading-summary > section:not(.pair-section) h2 { display:block; }
  .reading-summary > section:not(.pair-section) h2::before,
  .reading-summary > section:not(.pair-section) h2::after { display:none; }
}

/* --------------------------------------------------------------------------
   Celestial polish — restrained depth, engraved detail and gallery lighting.
   This final layer deliberately avoids adding more ornamental assets: light,
   proportion and one-pixel metalwork provide the sense of luxury.
   -------------------------------------------------------------------------- */

.public-shell {
  position: relative;
  background-attachment: fixed;
}

.public-shell > .site-header,
.public-shell > #main-content,
.public-shell > .site-footer,
.public-shell > .skip-link,
.public-shell > .toast-region {
  position: relative;
  z-index: 1;
}

/* Daybreak: pearl-blue sky, distant cloud light and a warm horizon. */
:root:not([data-theme="dark"]) .public-shell,
html[data-theme="light"] .public-shell {
  background-image:
    radial-gradient(ellipse at 78% 6%, rgba(255,224,151,.3), transparent 27%),
    radial-gradient(ellipse at 18% 12%, rgba(173,207,237,.35), transparent 35%),
    linear-gradient(180deg, #eef6fc 0%, #f8f8f4 29%, #f4f1e9 66%, #edf3f8 100%);
}

:root:not([data-theme="dark"]) .public-shell::after,
html[data-theme="light"] .public-shell::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(ellipse at 15% 17%, rgba(255,255,255,.8) 0 8%, transparent 24%),
    radial-gradient(ellipse at 33% 12%, rgba(255,255,255,.68) 0 7%, transparent 21%),
    radial-gradient(ellipse at 78% 22%, rgba(255,255,255,.7) 0 8%, transparent 25%),
    radial-gradient(ellipse at 91% 16%, rgba(255,255,255,.55) 0 6%, transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.3) 42%, transparent 70%);
  filter: blur(14px);
  mask-image: linear-gradient(#000 0 58%, transparent 86%);
}

#main-content {
  position: relative;
  isolation: isolate;
}

#main-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(1160px, 96vw);
  height: 760px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255,255,255,.88), transparent 48%),
    radial-gradient(ellipse at 18% 18%, rgba(49,93,155,.07), transparent 34%),
    radial-gradient(ellipse at 82% 14%, rgba(181,135,50,.08), transparent 31%);
  mask-image: linear-gradient(#000 0 72%, transparent);
}

html[data-theme="dark"] #main-content::before {
  opacity: .72;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(107,126,194,.1), transparent 47%),
    radial-gradient(ellipse at 18% 18%, rgba(82,69,153,.12), transparent 34%),
    radial-gradient(ellipse at 82% 14%, rgba(214,179,106,.08), transparent 31%);
}

/* A fine engraved baseline gives headings a deliberate editorial finish. */
.display-title em,
.section-heading h2,
.page-intro h1 {
  text-wrap: balance;
}

.hero__lead,
.page-intro > p:last-child,
.section-heading > p {
  text-wrap: pretty;
}

.hero__principle {
  position: relative;
  width: fit-content;
  margin-top: .7rem;
  padding: .8rem 1rem .72rem;
  border-block: 1px solid rgba(181,135,50,.2);
  color: var(--color-text-muted);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}

.hero__principle span {
  color: var(--color-text);
  font-family: var(--font-th-display);
  font-size: .82rem;
}

.hero__principle i {
  color: var(--color-gold);
  opacity: .64;
}

html[data-theme="dark"] .hero__principle {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.025), transparent);
}

/* Hero cards sit in a luminous vitrine rather than floating over empty space. */
.hero__visual {
  isolation: isolate;
}

.hero__visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 8%;
  width: min(460px, 94%);
  height: 18%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(18,38,68,.22), transparent 69%);
  filter: blur(13px);
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.18), transparent 22% 74%, rgba(214,179,106,.08));
  mix-blend-mode: screen;
}

/* Gallery captions become museum labels; cards receive controlled depth. */
.deck-card {
  position: relative;
  padding-bottom: 1rem;
}

.deck-card::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: .2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181,135,50,.38), transparent);
  transform: scaleX(.45);
  transition: transform 420ms ease;
}

.deck-card:hover::after { transform: scaleX(1); }

.deck-card__caption small {
  color: var(--color-gold-light);
  font-size: .61rem;
  letter-spacing: .18em;
}

.deck-card__caption span {
  max-width: 24ch;
  color: var(--color-text-muted);
  font-size: .75rem;
  line-height: 1.55;
}

/* Purpose cards read as seven illustrated chapters rather than UI widgets. */
.purpose-grid { counter-reset: purpose; }

.purpose-card {
  counter-increment: purpose;
  overflow: hidden;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.43)),
    radial-gradient(circle at 100% 0, rgba(181,135,50,.1), transparent 34%);
}

.purpose-card::after {
  content: "0" counter(purpose);
  position: absolute;
  z-index: -1;
  right: 1.05rem;
  top: .15rem;
  color: rgba(31,66,111,.045);
  font-family: var(--font-en-title);
  font-size: 6.8rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
}

html[data-theme="dark"] .purpose-card {
  background-image:
    linear-gradient(135deg, rgba(24,31,57,.9), rgba(14,20,40,.72)),
    radial-gradient(circle at 100% 0, rgba(214,179,106,.08), transparent 34%);
}

html[data-theme="dark"] .purpose-card::after { color: rgba(242,215,154,.045); }

.purpose-card__top {
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(181,135,50,.14);
}

.purpose-card h3 {
  position: relative;
  margin-top: .15rem;
  padding-bottom: .65rem;
}

.purpose-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 1px;
  background: var(--gradient-gold);
  transition: width 380ms ease;
}

.purpose-card:hover h3::after { width: 76px; }

.purpose-card__spread {
  color: var(--color-text-muted);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Content pathways gain a quiet wing-like rhythm on hover. */
.pathway-card {
  overflow: hidden;
  transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.pathway-card::after {
  content: "";
  position: absolute;
  right: -3rem;
  top: 50%;
  width: 8rem;
  height: 8rem;
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid rgba(181,135,50,.09);
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.pathway-card:hover { transform: translateY(-4px); }
.pathway-card:hover::after { transform: translate(-1rem,-50%) rotate(45deg); }

/* The reading board receives a subtle inner spotlight and cleaner labels. */
.reading-board-shell {
  position: relative;
  background-image:
    radial-gradient(ellipse at 50% 42%, rgba(214,179,106,.105), transparent 35%),
    radial-gradient(ellipse at 50% 120%, rgba(58,77,139,.18), transparent 52%),
    linear-gradient(145deg,#17233f 0%,#0b1124 54%,#070b17 100%);
}

.reading-board-shell .reading-card__label {
  text-shadow: 0 2px 12px rgba(0,0,0,.72);
}

/* More precise focus treatment — visible, elegant and consistent. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px rgba(181,135,50,.12);
}

@media (max-width: 900px) {
  .purpose-card::after { font-size: 5.4rem; }
  #main-content::before { height: 560px; }
}

@media (max-width: 600px) {
  .public-shell { background-attachment: scroll; }
  .hero__principle { width: 100%; justify-content: center; padding-inline: .35rem; }
  .hero__principle span { font-size: .72rem; }
  .purpose-card::after { right: .75rem; font-size: 4.8rem; }
  .purpose-card__top { padding-bottom: .7rem; }
  .deck-card::after { left: 24%; right: 24%; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-card::after,
  .purpose-card h3::after,
  .pathway-card,
  .pathway-card::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Midnight Cathedral — a purpose-built dark composition, not an inversion.
   Ink-blue depth, smoked glass and restrained champagne highlights keep the
   richly dark card artwork integrated with the interface.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 50% -12%, rgba(70,82,145,.15), transparent 34%),
    #060914;
}

html[data-theme="dark"] .public-shell {
  background-image:
    radial-gradient(ellipse at 50% 0, rgba(67,82,148,.17), transparent 34%),
    radial-gradient(circle at 8% 22%, rgba(135,91,166,.085), transparent 25%),
    radial-gradient(circle at 90% 18%, rgba(191,143,61,.075), transparent 24%),
    linear-gradient(180deg, #0b1021 0%, #080c19 46%, #060914 100%);
}

html[data-theme="dark"] .public-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  background-image:
    radial-gradient(circle at 11% 13%, rgba(255,255,255,.9) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 8%, rgba(242,215,154,.86) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 31%, rgba(190,201,255,.72) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 36% 39%, rgba(255,255,255,.58) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 62% 67%, rgba(242,215,154,.48) 0 .7px, transparent 1.2px),
    radial-gradient(ellipse at 50% 17%, rgba(78,83,166,.1), transparent 38%);
  background-size: 173px 173px, 251px 251px, 197px 197px, 139px 139px, 223px 223px, 100% 100%;
  background-position: 0 0, 31px 17px, 73px 47px, 19px 91px, 101px 23px, center;
  mask-image: linear-gradient(#000 0 82%, transparent 100%);
}

html[data-theme="dark"] .site-header {
  border-bottom-color: rgba(214,179,106,.2);
  background:
    linear-gradient(90deg, rgba(11,16,34,.94), rgba(15,21,43,.86), rgba(11,16,34,.94));
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.018),
    0 22px 60px rgba(0,0,0,.2);
  backdrop-filter: blur(24px) saturate(120%);
}

html[data-theme="dark"] .brand-sigil {
  color: #f1d58e;
  border-color: rgba(214,179,106,.48);
  background:
    radial-gradient(circle, rgba(214,179,106,.13), transparent 66%),
    rgba(9,14,30,.72);
  box-shadow:
    inset 0 0 0 4px rgba(214,179,106,.025),
    0 0 24px rgba(214,179,106,.08);
}

html[data-theme="dark"] .site-nav > a { color: rgba(224,224,235,.68); }
html[data-theme="dark"] .site-nav > a:hover { color: #f5e6bd; }

html[data-theme="dark"] .language-switcher,
html[data-theme="dark"] .theme-toggle {
  border-color: rgba(214,179,106,.2);
  background: rgba(8,13,29,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.18);
}

html[data-theme="dark"] .language-switcher a[aria-current="true"] {
  color: #0a0e1c;
  background: linear-gradient(135deg, #f2d99d, #bd8731);
  box-shadow: 0 3px 12px rgba(214,179,106,.15);
}

html[data-theme="dark"] .hero .display-title {
  color: #f5f1e8;
  text-shadow: 0 8px 38px rgba(0,0,0,.28);
}

html[data-theme="dark"] .hero__lead { color: rgba(218,219,230,.76); }

html[data-theme="dark"] .hero__copy::before {
  border-color: rgba(214,179,106,.13);
  box-shadow: 0 0 90px rgba(72,77,145,.07);
}

html[data-theme="dark"] .hero__visual::before {
  background:
    radial-gradient(circle, rgba(238,206,133,.13), rgba(91,86,169,.09) 35%, transparent 69%);
  filter: blur(4px);
}

html[data-theme="dark"] .hero__visual::after {
  background: radial-gradient(ellipse, rgba(0,0,0,.72), transparent 69%);
}

html[data-theme="dark"] .hero-card {
  border-color: rgba(234,201,127,.62);
  box-shadow:
    0 0 0 3px rgba(7,11,24,.94),
    0 0 0 4px rgba(214,179,106,.3),
    0 28px 70px rgba(0,0,0,.58),
    0 0 55px rgba(95,92,177,.07);
}

html[data-theme="dark"] .hero__principle {
  border-color: rgba(214,179,106,.2);
  color: rgba(197,198,213,.64);
  background:
    linear-gradient(90deg, transparent, rgba(214,179,106,.032), transparent);
}

html[data-theme="dark"] .hero__principle span { color: rgba(245,241,232,.88); }

html[data-theme="dark"] .btn-primary {
  border-color: rgba(226,192,116,.55);
  color: #fbf2dc;
  background:
    linear-gradient(112deg, rgba(255,255,255,.055), transparent 30% 66%, rgba(214,179,106,.09)),
    linear-gradient(180deg, #1c2d50, #111e38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.34),
    0 14px 38px rgba(0,0,0,.3),
    0 0 28px rgba(78,84,156,.07);
}

html[data-theme="dark"] .btn-primary:hover {
  border-color: rgba(242,215,154,.82);
  background:
    linear-gradient(112deg, rgba(255,255,255,.07), transparent 30% 66%, rgba(214,179,106,.12)),
    linear-gradient(180deg, #243960, #152542);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 20px 48px rgba(0,0,0,.38),
    0 0 32px rgba(214,179,106,.08);
}

html[data-theme="dark"] .btn-quiet,
html[data-theme="dark"] .btn-ghost {
  color: rgba(224,224,235,.74);
  border-color: rgba(214,179,106,.2);
  background: rgba(11,17,35,.44);
}

html[data-theme="dark"] .section + .section::before {
  background: linear-gradient(90deg, transparent, rgba(214,179,106,.34), transparent);
  box-shadow: 0 0 22px rgba(214,179,106,.04);
}

html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .page-intro h1 {
  color: #f3efe7;
  text-shadow: 0 8px 32px rgba(0,0,0,.25);
}

html[data-theme="dark"] .deck-card .card-thumb {
  border-color: rgba(226,192,116,.52);
  background: #080d1c;
  box-shadow:
    0 0 0 3px rgba(7,11,24,.95),
    0 0 0 4px rgba(214,179,106,.27),
    0 24px 58px rgba(0,0,0,.46);
}

html[data-theme="dark"] .deck-card:hover .card-thumb {
  box-shadow:
    0 0 0 3px rgba(7,11,24,.95),
    0 0 0 4px rgba(242,215,154,.43),
    0 32px 74px rgba(0,0,0,.55),
    0 0 40px rgba(93,96,181,.09);
}

html[data-theme="dark"] .deck-card__caption strong { color: #f4efe5; }
html[data-theme="dark"] .deck-card__caption span { color: rgba(188,190,207,.65); }

html[data-theme="dark"] .purpose-card {
  border-color: rgba(214,179,106,.2);
  background:
    linear-gradient(145deg, rgba(27,35,65,.9), rgba(11,17,36,.9)),
    radial-gradient(circle at 100% 0, rgba(214,179,106,.08), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 44px rgba(0,0,0,.08),
    0 26px 70px rgba(0,0,0,.24);
}

html[data-theme="dark"] .purpose-card:hover {
  border-color: rgba(226,192,116,.48);
  transform: translateY(-7px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 34px 84px rgba(0,0,0,.34),
    0 0 42px rgba(83,88,164,.07);
}

html[data-theme="dark"] .purpose-card::after { color: rgba(242,215,154,.055); }
html[data-theme="dark"] .purpose-card h3 { color: #f5f0e6; }
html[data-theme="dark"] .purpose-card__top { border-color: rgba(214,179,106,.16); }

html[data-theme="dark"] .purpose-card__symbol {
  color: #f1d58e;
  border-color: rgba(214,179,106,.42);
  background:
    radial-gradient(circle, rgba(214,179,106,.11), transparent 68%),
    rgba(8,13,29,.5);
  box-shadow: inset 0 0 0 4px rgba(214,179,106,.025), 0 8px 24px rgba(0,0,0,.18);
}

html[data-theme="dark"] .purpose-card .spread-preview--small {
  border-color: rgba(214,179,106,.18);
  background:
    radial-gradient(circle at 50% 45%, rgba(84,89,166,.11), transparent 48%),
    rgba(5,10,24,.42);
  box-shadow: inset 0 0 34px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.018);
}

html[data-theme="dark"] .purpose-card .spread-preview--small .spread-preview__slot span {
  border-color: rgba(226,192,116,.6);
  background: linear-gradient(145deg, rgba(29,39,72,.9), rgba(8,14,30,.92));
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
}

html[data-theme="dark"] .pathway-card {
  border-color: rgba(214,179,106,.16);
  background:
    linear-gradient(135deg, rgba(24,32,59,.72), rgba(10,16,33,.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 18px 48px rgba(0,0,0,.16);
}

html[data-theme="dark"] .pathway-card:hover {
  border-color: rgba(214,179,106,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 24px 62px rgba(0,0,0,.25);
}

html[data-theme="dark"] .question-form,
html[data-theme="dark"] .about-manifesto,
html[data-theme="dark"] .pair-section,
html[data-theme="dark"] .card-surface {
  border-color: rgba(214,179,106,.2);
  background-color: rgba(15,22,43,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 28px 76px rgba(0,0,0,.24);
}

html[data-theme="dark"] .site-footer {
  border-top-color: rgba(214,179,106,.18);
  background:
    linear-gradient(180deg, rgba(7,11,23,.4), rgba(5,8,17,.92));
  color: rgba(189,190,204,.62);
}

html[data-theme="dark"] .card-popup {
  border-color: rgba(226,192,116,.5);
  background:
    radial-gradient(circle at 78% 8%, rgba(214,179,106,.06), transparent 30%),
    linear-gradient(145deg, #171f3a, #0b1124 62%);
  box-shadow:
    0 55px 150px rgba(0,0,0,.72),
    0 0 0 1px rgba(242,215,154,.08),
    0 0 70px rgba(78,82,155,.08);
}

html[data-theme="dark"] .card-popup::backdrop {
  background: rgba(2,5,13,.8);
  backdrop-filter: blur(12px) saturate(78%);
}

@media (max-width: 600px) {
  html[data-theme="dark"] .site-header {
    background: rgba(8,12,25,.94);
    box-shadow: 0 12px 34px rgba(0,0,0,.25);
  }
  html[data-theme="dark"] .purpose-card { box-shadow: 0 18px 48px rgba(0,0,0,.22); }
}