/* LizSomething: plum and midnight velvet, antique gold, soft ivory. Serif headlines, Century Gothic body. */
:root {
  --onyx: #0e1131;
  --aubergine: #1d1438;
  --plum-sheen: #26306b;
  --champagne: #c6a76c;
  --gold-deep: #8c6d3f;
  --pearl: #f3ecdf;
  --taupe: #b5aec3;
  --rose: #b993a8;

  --gold-foil: linear-gradient(100deg, #8c6d3f 0%, #d2b57e 24%, #a8874f 44%, #e4cf9f 60%, #9a7a48 80%, #c9ab72 100%);

  --font: "Century Gothic", CenturyGothic, "Didact Gothic", AppleGothic, "Futura", sans-serif;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --symbols: "Noto Sans Symbols", "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif;

  --gutter: clamp(1rem, 5vw, 4rem);
  --measure: 34rem;
  --hair: 1px solid rgba(198, 167, 108, .22);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--onyx);
  color: var(--pearl);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(1rem, 0.3vw + .95rem, 1.0875rem);
  line-height: 1.8;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Black velvet: crushed shadow, a low plum sheen where light catches the pile, fine nap grain */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background:
    radial-gradient(110% 65% at 12% 0%, rgba(98, 48, 104, .48), transparent 62%),
    radial-gradient(80% 55% at 94% 34%, rgba(38, 56, 138, .42), transparent 65%),
    radial-gradient(120% 70% at 30% 110%, rgba(86, 42, 96, .38), transparent 60%),
    radial-gradient(90% 60% at 85% 100%, rgba(30, 44, 118, .35), transparent 62%),
    radial-gradient(60% 45% at 55% 22%, rgba(4, 3, 16, .5), transparent 70%),
    radial-gradient(70% 55% at 6% 66%, rgba(4, 3, 16, .45), transparent 70%),
    linear-gradient(165deg, #1e1339 0%, #0e1131 50%, #1a1236 100%);
}
body::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .82  0 0 0 0 .72  0 0 0 0 .7  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .7  0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 240px 240px, cover;
  background-repeat: repeat, no-repeat;
  mix-blend-mode: soft-light;
  opacity: .6;
}

#sky, #fireflies {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#sky { z-index: 0; opacity: .8; }
#fireflies { z-index: 1; }

.site-header, main, .site-footer { position: relative; z-index: 2; }

a { color: var(--champagne); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--pearl); }

:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  background: var(--pearl);
  color: var(--onyx);
  padding: .5rem 1rem;
}
.skip:focus { top: 1rem; }

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem var(--gutter);
}
.wordmark {
  font-size: 1.0625rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--pearl);
  text-decoration: none;
}
.site-header nav { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; }
.site-header nav a {
  color: var(--taupe);
  text-decoration: none;
  font-size: .8125rem;
  letter-spacing: .14em;
}
.site-header nav a:hover { color: var(--pearl); }
.site-header .nav-book { color: var(--champagne); }

/* Hero */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gutter);
  min-height: calc(100vh - 6.5rem);
  min-height: calc(100svh - 6.5rem);
  padding: 1rem var(--gutter) 6rem;
}

/* Soft champagne light veils in place of the aurora */
.aurora {
  position: absolute;
  inset: -8rem 0 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
}
.aurora span {
  position: absolute;
  width: 60vw;
  height: 40vh;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: drift 38s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) {
  background: radial-gradient(closest-side, rgba(214, 186, 132, .55), transparent);
  top: 0; left: -12%;
  opacity: .22;
}
.aurora span:nth-child(2) {
  background: radial-gradient(closest-side, rgba(199, 163, 159, .5), transparent);
  top: 14%; left: 48%;
  opacity: .16;
  animation-duration: 46s;
  animation-delay: -12s;
}
.aurora span:nth-child(3) {
  background: radial-gradient(closest-side, rgba(232, 214, 176, .5), transparent);
  top: 30%; left: 18%;
  width: 40vw; height: 26vh;
  opacity: .1;
  animation-duration: 52s;
  animation-delay: -20s;
}
@keyframes drift {
  0%   { translate: 0 0; }
  50%  { translate: 5vw 2vh; }
  100% { translate: -3vw -1vh; }
}

.hero-text { max-width: 40rem; }

/* The one bold gesture: a high-fashion serif in antique gold */
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.25rem, 8vw, 7rem);
  line-height: .98;
  letter-spacing: .02em;
  margin: 0 0 2.5rem;
}
.hero h1 span {
  display: block;
  background: var(--gold-foil);
  background-size: 160% 100%;
  background-position: 30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  translate: 0 .2em;
  animation: rise 1.8s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero h1 span:nth-child(2) { animation-delay: .35s; padding-left: .6em; }
.hero h1 span:nth-child(3) { animation-delay: .7s; padding-left: 1.2em; }
@keyframes rise { to { opacity: 1; translate: 0 0; } }


.lede {
  max-width: 28rem;
  color: var(--taupe);
  font-size: 1.0625em;
  margin: 0 0 2.75rem;
}

.button {
  display: inline-block;
  font-family: var(--font);
  font-size: .8125rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pearl);
  background: transparent;
  border: 1px solid var(--champagne);
  border-radius: 0;
  padding: 1.05rem 2.4rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .5s ease, border-color .5s ease;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-foil);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.6,.05,.2,1);
  z-index: -1;
}
.button:hover { color: var(--onyx); border-color: #d8be8c; }
.button:hover::before { transform: scaleX(1); }

/* Live sky chart */
.sky-figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 2rem;
}
#wheel {
  width: min(100%, 27rem);
  height: auto;
  overflow: visible;
  opacity: 0;
  animation: wheelrise 2.6s ease-out .2s forwards;
  filter: drop-shadow(0 0 50px rgba(198, 167, 108, .12));
}
@keyframes wheelrise {
  from { opacity: 0; rotate: -10deg; scale: .97; }
  to { opacity: 1; rotate: 0deg; scale: 1; }
}
.w-ring { fill: none; stroke: rgba(198, 167, 108, .55); stroke-width: .6; }
.w-inner { fill: rgba(14, 12, 38, .55); stroke: rgba(198, 167, 108, .35); }
.w-sign { stroke: rgba(198, 167, 108, .3); stroke-width: .5; }
.w-fire, .w-air  { fill: rgba(198, 167, 108, .045); }
.w-earth, .w-water { fill: rgba(198, 167, 108, .015); }
.w-sign-glyph {
  font-family: var(--symbols);
  font-size: 14px;
  fill: var(--champagne);
  text-anchor: middle;
  dominant-baseline: central;
}
.w-tick { stroke: rgba(198, 167, 108, .35); stroke-width: .5; }
.w-aspect { stroke-width: .6; opacity: .6; }
.w-soft { stroke: var(--champagne); }
.w-hard { stroke: var(--rose); stroke-dasharray: 2 3; }
.w-ptick { stroke: var(--pearl); stroke-width: 1; }
.w-leader { stroke: rgba(198, 167, 108, .22); stroke-width: .5; }
.w-dot { fill: var(--pearl); }
.w-planet-glyph {
  font-family: var(--symbols);
  font-size: 20px;
  fill: var(--pearl);
  text-anchor: middle;
  dominant-baseline: central;
}
.w-planet { cursor: default; outline: none; }
.w-planet:hover .w-planet-glyph, .w-planet:focus-visible .w-planet-glyph { fill: #e8d6b0; }

/* Sun and Moon twinkle */
.twinkle-sun .w-planet-glyph { fill: #e2c890; }
.twinkle-moon .w-planet-glyph { fill: #fbf7f1; }
.twinkle .w-planet-glyph,
.pl-glyph.twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 3.4s ease-in-out infinite;
}
.pl-glyph.twinkle { display: inline-block; }
.pl-glyph.twinkle-sun { color: #e2c890; }
.pl-glyph.twinkle-moon { color: #fbf7f1; }
@keyframes twinkle {
  0%, 100% { opacity: .75; scale: 1; filter: drop-shadow(0 0 1px #e2c890); }
  45%      { opacity: 1; scale: 1.16; filter: drop-shadow(0 0 5px #fff4dc) drop-shadow(0 0 12px rgba(214, 186, 132, .6)); }
  55%      { opacity: .9; scale: 1.07; }
}
@keyframes twinkle-moon {
  0%, 100% { opacity: .75; scale: 1; filter: drop-shadow(0 0 1px #fbf7f1); }
  45%      { opacity: 1; scale: 1.14; filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 12px rgba(244, 238, 230, .55)); }
}
.twinkle-moon .w-planet-glyph, .pl-glyph.twinkle-moon {
  animation-name: twinkle-moon;
  animation-duration: 4.2s;
  animation-delay: -1.3s;
}

.sky-figure figcaption { width: min(100%, 27rem); }
.sky-title {
  font-size: 1.0625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
  text-align: center;
  color: var(--champagne);
}
.sky-stamp {
  margin: 0 0 1.5rem;
  text-align: center;
  color: var(--taupe);
  font-size: .875rem;
  line-height: 1.6;
}
.placements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  font-size: .8125rem;
  line-height: 1.4;
}
.placements li {
  display: grid;
  grid-template-columns: 1.4rem auto 1fr;
  align-items: baseline;
  gap: .45rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(198, 167, 108, .14);
}
.pl-glyph { font-family: var(--symbols); color: var(--champagne); font-size: 1rem; text-align: center; }
.pl-name { color: var(--pearl); white-space: nowrap; letter-spacing: .04em; }
.pl-pos { color: var(--taupe); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-sign { font-family: var(--symbols); color: var(--champagne); }
.pl-rx { color: var(--rose); text-decoration: none; font-family: var(--symbols); }

/* Sections */
main section:not(.hero) {
  padding: clamp(5rem, 11vw, 9rem) var(--gutter);
}

h2 {
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  color: var(--pearl);
}
h3 {
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: .06em;
  margin: 0 0 .75rem;
  color: var(--champagne);
}
.section-intro {
  max-width: var(--measure);
  color: var(--taupe);
  margin: 0 0 4rem;
}

/* Offerings */
.offerings { position: relative; max-width: 76rem; margin: 0 auto; }
.offering-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 7vw, 6rem);
}
.offering-list li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 1.5rem;
  padding: 2.5rem 0;
  border-top: var(--hair);
}
.offering-list li > :not(.glyph) { grid-column: 2; }
.offering-list p { margin: 0; color: var(--taupe); max-width: 30rem; }
.glyph {
  grid-row: 1 / span 2;
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: var(--champagne);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* About */
.about { max-width: 44rem; margin: 0 auto; text-align: center; }
.about p { margin: 0 auto 1.4rem; color: var(--pearl); max-width: 38rem; }
.about p + p { color: var(--taupe); }


/* Booking */
.book {
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.book-intro p { color: var(--taupe); max-width: 24rem; }
.book-form {
  background: rgba(14, 12, 38, .6);
  backdrop-filter: blur(8px);
  border: var(--hair);
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  display: grid;
  gap: 1.75rem;
  position: relative;
}
.book-form::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198, 167, 108, .1);
  pointer-events: none;
}
.field { display: grid; gap: .35rem; margin: 0; }
.field label, .birth label {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne);
}
input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--pearl);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(198, 167, 108, .35);
  border-radius: 0;
  padding: .6rem 0 .7rem;
  transition: border-color .3s;
}
input::placeholder, textarea::placeholder { color: rgba(169, 172, 196, .6); }
input:focus, select:focus, textarea:focus { border-bottom-color: #e8d6b0; outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 1px 0 0 #e8d6b0; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d9c4a0' stroke-width='1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .2rem center; padding-right: 2rem; }
select option { background: var(--aubergine); color: var(--pearl); }
input[type="date"], input[type="time"] { color-scheme: dark; }
textarea { resize: vertical; min-height: 7rem; border: 1px solid rgba(198, 167, 108, .35); padding: .8rem .9rem; }

.birth {
  border: 0;
  border-left: 1px solid rgba(198, 167, 108, .35);
  padding: .25rem 0 .25rem 1.25rem;
  gap: 1.1rem;
}
.birth[hidden] { display: none; }
.birth legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: .25rem;
  font-size: .9375rem;
  letter-spacing: .04em;
  color: var(--pearl);
}
.birth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.birth-row > div, .birth > div { display: grid; gap: .35rem; }
.book-form .button { justify-self: start; margin-top: .5rem; }
.hidden { position: absolute; left: -9999px; }

/* Footer */
.site-footer {
  padding: 3rem var(--gutter) 3.5rem;
  border-top: var(--hair);
  color: var(--taupe);
  font-size: .8125rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.site-footer p { margin: 0; }
.site-footer p:first-child { letter-spacing: .2em; text-transform: uppercase; }
.footnote { max-width: 34rem; }

/* Thank-you page */
.notice {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 4rem var(--gutter);
}
.notice p { color: var(--taupe); max-width: 30rem; margin: 0 auto 2.5rem; }

/* Crystal clusters */
.crystals { display: block; height: auto; overflow: visible; pointer-events: none; }
.crystals-quartz {
  position: absolute;
  right: var(--gutter);
  top: clamp(2rem, 5vw, 4rem);
  width: clamp(11rem, 17vw, 15rem);
  filter: drop-shadow(0 0 28px rgba(220, 228, 255, .16));
}
.crystals-crown {
  width: min(100%, 25rem);
  margin-top: 2.5rem;
  filter: drop-shadow(0 0 36px rgba(233, 222, 200, .18));
}
.cr-edge { fill: none; stroke: rgba(255, 248, 235, .5); stroke-width: .6; stroke-linejoin: round; }
.cr-shine { stroke: rgba(255, 250, 240, .55); stroke-width: 1.2; stroke-linecap: round; }
.cr-spark {
  fill: #fffaf0;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: glint 5.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #fff4dc);
}
@keyframes glint {
  0%, 70%, 100% { opacity: 0; scale: .3; }
  80% { opacity: 1; scale: 1; }
  90% { opacity: 0; scale: .5; }
}

/* Responsive */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 2rem;
    gap: 1rem;
  }
  .sky-figure { order: 2; margin-top: 3.5rem; }
  #wheel { width: min(100%, 24rem); }
  .offering-list { grid-template-columns: 1fr; }
  .book { grid-template-columns: 1fr; }
  .crystals-quartz { width: 8rem; top: 3rem; }
  .crystals-crown { width: min(85%, 19rem); margin: 2rem auto 0; }
}
@media (max-width: 560px) {
  .site-header { padding-top: 1.4rem; padding-bottom: 1.4rem; }
  .wordmark { letter-spacing: .24em; font-size: .9375rem; }
  .site-header nav a:not(.nav-book) { display: none; }
  .hero h1 { letter-spacing: .1em; }
  .birth-row { grid-template-columns: 1fr; }
  .placements { grid-template-columns: 1fr; font-size: .875rem; }
  .crystals-quartz { width: 6rem; top: 3.5rem; opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora span, .hero h1 span, #wheel { animation: none; opacity: 1; translate: none; rotate: none; scale: none; }
  .aurora span:nth-child(1) { opacity: .2; }
  .aurora span:nth-child(2) { opacity: .14; }
  .aurora span:nth-child(3) { opacity: .1; }
  .twinkle .w-planet-glyph, .pl-glyph.twinkle { animation: none; filter: drop-shadow(0 0 5px rgba(241, 217, 166, .7)); }
  .cr-spark { animation: none; opacity: .8; scale: .7; }
  .button::before { transition: none; }
}
.notice h1 {
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 1.5rem;
}
@media (min-width: 861px) { .book-intro h2 { white-space: nowrap; font-size: clamp(1.5rem, 2.6vw, 2.75rem); } }

/* ---------- Booking section, matched to the mockup ---------- */


main h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  letter-spacing: .04em;
  line-height: 1.05;
}
.book { position: relative; align-items: center; }
.book-intro { position: relative; text-align: center; padding-left: clamp(0rem, 4vw, 3rem); }
.book-intro h2 { margin-bottom: .75rem; }
@media (min-width: 861px) { .book-intro h2 { white-space: nowrap; font-size: clamp(1.9rem, 3.3vw, 3.5rem); } }
.book-intro p { color: var(--pearl); opacity: .88; margin: 1.25rem auto 0; max-width: 26rem; text-align: left; }

.flourish { display: block; width: min(80%, 20rem); height: auto; margin: 0 auto; overflow: visible; }
.fl-line { stroke: rgba(198, 167, 108, .75); stroke-width: .8; }
.fl-line-r { stroke: rgba(198, 167, 108, .75); stroke-width: .8; }
.fl-dot { fill: var(--champagne); }
.fl-star { fill: #e4cc98; filter: drop-shadow(0 0 4px rgba(232, 214, 176, .8)); }

.book-ornament {
  position: absolute;
  left: max(.25rem, calc(var(--gutter) - 2.75rem));
  top: clamp(3rem, 8vw, 6rem);
  width: 3.25rem;
  height: auto;
  overflow: visible;
  opacity: .9;
}
.orn-line { stroke: rgba(198, 167, 108, .55); stroke-width: .8; }
.orn-dot { fill: var(--champagne); }
.orn-ring { fill: none; stroke: rgba(198, 167, 108, .6); stroke-width: .8; }
.orn-ring-sm { fill: none; stroke: var(--champagne); stroke-width: .8; }
.orn-moon { fill: #dcc08a; filter: drop-shadow(0 0 6px rgba(236, 214, 168, .6)); }
.orn-star { fill: #e4cc98; filter: drop-shadow(0 0 5px rgba(232, 214, 176, .9)); }

.crown-photo {
  display: block;
  margin: 1.5rem auto 0;
  width: min(118%, 40rem);
  margin-left: 50%;
  translate: -50% 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 50%, transparent 100%);
  mix-blend-mode: lighten;
}
.crown-photo img { display: block; width: 100%; height: auto; }

/* Ornate form frame */
.book-form {
  background: linear-gradient(180deg, rgba(14, 18, 44, .82), rgba(8, 11, 30, .88));
  border: 1px solid rgba(198, 167, 108, .6);
  border-radius: 22px;
  padding: clamp(4rem, 6vw, 4.75rem) clamp(1.5rem, 4.5vw, 3.5rem) clamp(3.5rem, 5vw, 4rem);
  gap: 1.6rem;
  margin-top: 3.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 0 60px rgba(198, 167, 108, .04);
}
.book-form::before {
  inset: 7px;
  border: 1px solid rgba(198, 167, 108, .16);
  border-radius: 16px;
}
.corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(198, 167, 108, .9);
  border-radius: 50%;
  background: var(--onyx);
  pointer-events: none;
}
.corner::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(198, 167, 108, .4);
}
.corner-tl { top: -13px; left: -13px; clip-path: inset(12px 0 0 12px); }
.corner-tr { top: -13px; right: -13px; clip-path: inset(12px 12px 0 0); }
.corner-bl { bottom: -13px; left: -13px; clip-path: inset(0 0 12px 12px); }
.corner-br { bottom: -13px; right: -13px; clip-path: inset(0 12px 12px 0); }

.form-medallion {
  position: absolute;
  left: 50%;
  top: 0;
  width: 10rem;
  translate: -50% -58%;
  pointer-events: none;
}
.form-medallion svg, .form-foot svg { display: block; width: 100%; height: auto; overflow: visible; }
.md-line { stroke: rgba(198, 167, 108, .6); stroke-width: .8; }
.md-dot { fill: var(--champagne); }
.md-ray { stroke: rgba(240, 222, 186, .55); stroke-width: .6; }
.md-disc { fill: var(--onyx); }
.md-ring { fill: none; stroke: rgba(198, 167, 108, .85); stroke-width: 1; }
.md-ring-in { fill: none; stroke: rgba(198, 167, 108, .3); stroke-width: .7; }
.md-moon { fill: #dcc08a; filter: drop-shadow(0 0 7px rgba(236, 214, 168, .65)); }
.md-star { fill: #e4cc98; filter: drop-shadow(0 0 5px rgba(232, 214, 176, .9)); }
.form-foot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1.75rem;
  translate: -50% 50%;
  pointer-events: none;
}

/* Boxed fields */
.book-form .field label, .book-form .birth label {
  color: var(--pearl);
  opacity: .85;
  font-size: .75rem;
  letter-spacing: .2em;
}
.book-form input, .book-form select {
  border: 1px solid rgba(198, 167, 108, .45);
  border-radius: 3px;
  background-color: rgba(12, 10, 32, .55);
  padding: .8rem 1rem;
}
.book-form select { background-position: right 1rem center; padding-right: 2.5rem; }
.book-form textarea { border-radius: 3px; background: rgba(12, 10, 32, .55); border-color: rgba(198, 167, 108, .45); padding: .85rem 1rem; }
.book-form input:focus, .book-form select:focus, .book-form textarea:focus {
  border-color: #f0dfba;
  box-shadow: 0 0 0 3px rgba(198, 167, 108, .12), 0 0 18px rgba(198, 167, 108, .12);
}

/* Glowing send button */
.button-send {
  justify-self: stretch !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  width: 100%;
  margin-top: .75rem;
  padding: 1.15rem 1.5rem;
  border-radius: 3px;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, rgba(40, 36, 46, .95), rgba(18, 18, 36, .95) 50%, rgba(46, 38, 40, .95)) padding-box,
    var(--gold-foil) border-box;
  box-shadow: 0 0 24px rgba(198, 167, 108, .18), inset 0 0 22px rgba(198, 167, 108, .1);
  font-size: .875rem;
  letter-spacing: .26em;
}
.btn-star { width: 1.4rem; height: 1.4rem; fill: #e4cc98; filter: drop-shadow(0 0 4px rgba(232, 214, 176, .9)); transition: fill .4s; }
.button-send:hover .btn-star { fill: var(--onyx); filter: none; }
.button-send::before { border-radius: 2px; }

@media (max-width: 860px) {
  .book-ornament { display: none; }
  .book-intro { padding-left: 0; }
  .book-form { margin-top: 4.5rem; }
}
@media (max-width: 560px) {
  .form-medallion { width: 8rem; }
}
@media (max-width: 860px) { .crown-photo { width: 100%; margin-left: auto; translate: none; } }
.book { overflow-x: clip; }

/* ---------- Brand refinements ---------- */
main h2 { font-weight: 400; text-transform: none; letter-spacing: .02em; }
.book-intro h2, .about h2 { text-transform: uppercase; letter-spacing: .06em; }
.offerings h2 { text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
.sky-title { font-family: var(--serif); font-size: 1.375rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: .01em; color: var(--pearl); }
.wordmark { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .28em; font-weight: 500; }
.notice h1 { font-family: var(--serif); font-weight: 400; letter-spacing: .06em; }
.flourish-left { margin: 0 0 1.75rem; width: min(70%, 16rem); }
.about .flourish { margin-bottom: 2rem; }
.offerings .section-intro { margin-top: 0; }

/* Subtle celestial linework */
.celestial {
  position: absolute;
  inset: -6rem 0 0;
  width: 100%;
  height: calc(100% + 6rem);
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.cl-orbit { fill: none; stroke: rgba(198, 167, 108, .22); stroke-width: .7; }
.cl-dash { stroke-dasharray: 1 7; stroke: rgba(198, 167, 108, .3); }
.cl-const { fill: none; stroke: rgba(198, 167, 108, .28); stroke-width: .6; }
.cl-node { fill: rgba(243, 236, 223, .75); }

/* Soft atmospheric light: plum and ivory veils */
.aurora span:nth-child(1) { background: radial-gradient(closest-side, rgba(150, 96, 150, .6), transparent); opacity: .2; }
.aurora span:nth-child(2) { background: radial-gradient(closest-side, rgba(90, 110, 200, .5), transparent); opacity: .16; }
.aurora span:nth-child(3) { background: radial-gradient(closest-side, rgba(243, 236, 223, .5), transparent); opacity: .08; }

/* Calmer sparkle */
.cr-spark { animation-duration: 8s; }

/* ---------- Booking section as a full scene (matches the mockup) ---------- */
@media (min-width: 861px) {
  main section.book {
    max-width: none;
    margin: 0;
    padding: 0 0 4vw;
    display: grid;
    grid-template-columns: 12.4vw 37.2vw 3.9vw 36.7vw 1fr;
    gap: 0;
    align-items: start;
    min-height: 56.3vw;
    overflow: visible;
    isolation: isolate;
  }
  main section.book::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 56.3vw;
    z-index: -1;
    background: url("book-scene.jpg") top center / 100% auto no-repeat;
    background-image: image-set(url("book-scene.webp") type("image/webp"), url("book-scene.jpg") type("image/jpeg"));
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 88%, transparent 100%);
  }
  .book .book-ornament, .book .crown-photo { display: none; }

  .book .book-intro {
    grid-column: 2;
    padding: 11.1vw 0 0;
    text-align: center;
  }
  .book .book-intro h2 {
    font-size: 4.3vw;
    letter-spacing: .005em;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    color: var(--pearl);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
  }
  .book .flourish { width: 19.2vw; margin: .5vw auto 0; }
  .book .book-intro p {
    font-size: max(1rem, 1.26vw);
    line-height: 1.62;
    max-width: 29.5vw;
    margin: 1.1vw 0 0 1.55vw;
    text-align: left;
    color: var(--pearl);
    opacity: .95;
    text-shadow: 0 1px 16px rgba(0, 0, 0, .6);
  }

  .book .book-form {
    grid-column: 4;
    margin: 4.95vw 0 0;
    min-height: 46.4vw;
    padding: 6.3vw 3.45vw 4vw;
    gap: 0;
    align-content: start;
    border-radius: 1.3vw;
    background: linear-gradient(160deg, rgba(24, 24, 52, .95), rgba(13, 14, 34, .96) 55%, rgba(16, 15, 36, .96));
  }
  .book .book-form > .field, .book .book-form > .birth { margin-bottom: 1.55vw; }
  .book .book-form .field { gap: .75vw; }
  .book .book-form .field label, .book .book-form .birth label {
    font-size: max(.7rem, .8vw);
    letter-spacing: .2em;
    opacity: .9;
  }
  .book .book-form input, .book .book-form select {
    height: 3.05vw;
    min-height: 2.6rem;
    padding: 0 1.05vw;
    font-size: max(.9rem, 1vw);
    border-color: rgba(214, 196, 160, .6);
  }
  .book .book-form select { padding-right: 2.6vw; background-position: right 1.3vw center; }
  .book .book-form textarea {
    height: 8.4vw;
    min-height: 6rem;
    padding: .9vw 1.05vw;
    font-size: max(.9rem, 1vw);
    border-color: rgba(214, 196, 160, .6);
  }
  .book .button-send {
    height: 3.6vw;
    min-height: 3rem;
    margin-top: 0;
    padding: 0 1.5vw;
    font-size: max(.75rem, .95vw);
  }
  .book .btn-star { width: 1.6vw; height: 1.6vw; min-width: 1.1rem; min-height: 1.1rem; }
  .book .form-medallion { width: 10vw; }
  .book .form-foot { width: 2vw; }
}

/* Tagline: The stars reveal. The soul remembers. */
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 5.25rem); line-height: 1.08; }
.hero h1 span:nth-child(2) { padding-left: 1.4em; }
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); letter-spacing: .01em; }
  .hero h1 span:nth-child(2) { padding-left: .8em; }
}

/* ---------- Ornate chart wheel ---------- */
#wheel { width: min(100%, 31rem); filter: drop-shadow(0 0 60px rgba(150, 120, 200, .22)); }
.wh-gold { fill: none; stroke: #c6a76c; stroke-width: 1.1; }
.wh-gold-thin { fill: none; stroke: rgba(214, 186, 132, .7); stroke-width: .6; }
.wh-gold-faint { fill: none; stroke: rgba(198, 167, 108, .45); stroke-width: .6; }
.wh-tick { stroke: rgba(240, 222, 186, .8); stroke-width: .6; }
.wh-tick-in { stroke: rgba(198, 167, 108, .5); stroke-width: .5; }
.wh-fleck { fill: #e8cf98; }
.wh-div { stroke: rgba(198, 167, 108, .55); stroke-width: .6; }
.wh-sign {
  font-family: var(--symbols);
  font-size: 21px;
  fill: #d8bc84;
  text-anchor: middle;
  dominant-baseline: central;
  filter: drop-shadow(0 0 3px rgba(216, 188, 132, .45));
}
.wh-cusp { stroke: rgba(198, 167, 108, .38); stroke-width: .55; }
.wh-axis { stroke: rgba(232, 214, 176, .8); stroke-width: .8; }
.wh-angle {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .06em;
  fill: var(--pearl);
  text-anchor: middle;
  dominant-baseline: central;
}
.wh-house {
  font-family: var(--serif);
  font-size: 10px;
  fill: rgba(243, 236, 223, .7);
  text-anchor: middle;
  dominant-baseline: central;
}
.wh-asp { stroke-width: .7; opacity: .85; }
.wh-trine { stroke: #9fb3ff; }
.wh-sextile { stroke: #8fd0ff; stroke-dasharray: 3 2; }
.wh-square { stroke: #c79cf0; }
.wh-opposition { stroke: #e4b6e8; }
.wh-ptick { stroke: var(--pearl); stroke-width: 1; }
.wh-pdot { fill: #f3ecdf; }
.wh-star { fill: #f0dcae; filter: drop-shadow(0 0 4px rgba(240, 220, 174, .9)); }
.wh-core-star { filter: drop-shadow(0 0 8px #fff3d2) drop-shadow(0 0 16px rgba(232, 201, 138, .8)); }
.wh-ray { stroke: rgba(240, 220, 174, .75); stroke-width: .6; }
.wh-dot { fill: #e2c890; }
.wh-crescent { fill: url(#wh-moon); filter: drop-shadow(0 0 8px rgba(255, 240, 210, .75)); }
#wheel .w-planet-glyph { font-size: 19px; fill: #f3ecdf; }
.pl-ac { font-family: var(--serif); font-size: .7rem; letter-spacing: .04em; }
.placements .pl-angle .pl-name { color: var(--champagne); }
.wh-angle-bg { fill: #121032; }
.hero h1 span { white-space: nowrap; }
.hero h1 { font-size: clamp(2.4rem, 4.5vw, 4.75rem); }
.hero h1 span:nth-child(2) { padding-left: .9em; }
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2rem, 9.2vw, 2.75rem); }
  .hero h1 span:nth-child(2) { padding-left: .45em; }
}

/* Jewelled frame */
#wheel { width: min(100%, 34rem); filter: drop-shadow(0 0 50px rgba(140, 120, 210, .2)); }
.wh-chain { stroke: rgba(214, 186, 132, .8); stroke-width: .6; }
.wh-cstar { fill: #e8dcc0; }
.wh-cline { fill: none; stroke: rgba(232, 214, 176, .22); stroke-width: .45; }
.wh-sign { font-size: 23px; }

/* Placements in a framed gold panel */
.sky-figure figcaption {
  position: relative;
  width: min(100%, 25rem);
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid rgba(198, 167, 108, .6);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(20, 18, 46, .7), rgba(12, 11, 32, .78));
}
.sky-figure figcaption::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(198, 167, 108, .2);
  pointer-events: none;
}
.sky-figure figcaption::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 18px;
  height: 18px;
  translate: -50% 0;
  background: #f0dcae;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 4px rgba(240, 220, 174, .9));
}
.placements { grid-template-columns: 1fr; font-size: .9rem; }
.placements li {
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  padding: .42rem 0;
  border-bottom: 0;
}
.pl-name {
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pearl);
}
.pl-pos { font-family: var(--serif); font-size: 1.02rem; color: var(--pearl); letter-spacing: .01em; }
.pl-glyph { font-size: 1.1rem; }
.placements .pl-angle:first-of-type, .placements li.pl-angle { border-top: 0; }
.placements li.pl-angle:nth-last-child(2) {
  margin-top: .85rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(198, 167, 108, .35);
}
.pl-pos { font-variant-numeric: lining-nums tabular-nums; }

/* Wide screens: tagline left, wheel centre, placements panel right (as in the reference) */
@media (min-width: 1180px) {
  .hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.75fr); gap: 2rem; }
  .hero h1 { font-size: clamp(2.4rem, 3.5vw, 4.25rem); }
  .sky-figure { grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); align-items: center; gap: 2.25rem; }
  .sky-figure figcaption { width: 100%; padding: 1.75rem 1.4rem 1.5rem; }
  .sky-title { font-size: 1.2rem; }
  .sky-stamp { font-size: .8rem; }
  .placements { font-size: .85rem; }
  .placements li { padding: .32rem 0; }
}
@media (min-width: 1180px) {
  .hero h1 { font-size: clamp(2.2rem, 3.05vw, 4rem); }
  .hero h1 span:nth-child(2) { padding-left: .6em; }
}
.pl-ac { font-size: .6rem; letter-spacing: 0; }

/* Moonstones that glow, bigger planet symbols */
#wheel .w-planet-glyph { font-size: 27px; filter: drop-shadow(0 0 3px rgba(243, 236, 223, .35)); }
.wh-jewel image { filter: drop-shadow(0 0 5px rgba(214, 226, 255, .85)) drop-shadow(0 0 14px rgba(170, 190, 255, .55)); }
.wh-jewel-halo { fill: rgba(200, 214, 255, .35); filter: blur(7px); }
.wh-jewel { animation: stoneglow 5s ease-in-out infinite alternate; }
.wh-jewel-r { animation-delay: -1.6s; }
.wh-jewel-b { animation-delay: -3.1s; }
.wh-jewel-top { animation-duration: 6s; }
@keyframes stoneglow {
  from { opacity: .9; }
  to { opacity: 1; filter: brightness(1.04) drop-shadow(0 0 9px rgba(205, 218, 255, .65)); }
}
.wh-band-glow { filter: drop-shadow(0 0 4px rgba(210, 222, 255, .5)); }
@media (prefers-reduced-motion: reduce) { .wh-jewel { animation: none; } }

/* Quieter ring: no glow on the band, softer pearls */
.wh-band-glow { filter: none; }
#wheel { filter: drop-shadow(0 0 40px rgba(140, 120, 210, .12)); }

/* Finished goldwork: engraved rope band and leaf filigree */
.wh-rope { fill: none; stroke: rgba(160, 128, 74, .55); stroke-width: 1.4; stroke-linecap: round; }
.wh-rope-hi { fill: none; stroke: rgba(255, 238, 200, .28); stroke-width: .5; stroke-linecap: round; transform: translate(-.4px, -.4px); }
.wh-vine { fill: none; stroke: url(#wh-goldg); stroke-width: 1.1; stroke-linecap: round; }
.wh-leaf { fill: url(#wh-goldg); stroke: rgba(255, 240, 205, .5); stroke-width: .3; }
.wh-ring-img { filter: drop-shadow(0 0 6px rgba(190, 180, 230, .25)); }

/* ---------- The collective sky ---------- */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.text-link { color: var(--champagne); font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(198, 167, 108, .45); padding-bottom: .2rem; }
.text-link:hover { color: var(--pearl); border-color: var(--pearl); }

main section.collective { max-width: 80rem; margin: 0 auto; }
.cs-header { text-align: center; margin-bottom: 3.5rem; }
.cs-header h2 { text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
.cs-header .flourish { margin: 0 auto 1rem; }
.cs-date { font-family: var(--serif); font-size: 1.25rem; color: var(--champagne); margin: 0 0 1rem; letter-spacing: .04em; }
.cs-header .section-intro { margin: 0 auto; }

.cs-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 4rem; }
.cs-card {
  position: relative;
  padding: 1.75rem 1.6rem 1.6rem;
  border: 1px solid rgba(198, 167, 108, .5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(22, 19, 50, .72), rgba(12, 11, 32, .8));
  min-width: 0;
}
.cs-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(198, 167, 108, .14); pointer-events: none; }
.cs-card h3 { font-size: 1.45rem; margin: 0 0 .9rem; color: var(--pearl); text-wrap: balance; }
.cs-card p { margin: 0 0 .75rem; color: var(--pearl); opacity: .9; font-size: .95rem; line-height: 1.7; }
.cs-card .cs-quiet { color: var(--taupe); opacity: 1; }
.cs-card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .25rem; }
.cs-card-head h3 { margin-bottom: .5rem; }
.cs-kicker { font-size: .7rem !important; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne) !important; margin: 0 0 .35rem !important; opacity: 1 !important; }
.cs-meta { font-size: .85rem !important; color: var(--taupe) !important; opacity: 1 !important; }
.cs-sign { font-family: var(--symbols); color: var(--champagne); font-size: .9em; }
.cs-bigglyph { font-family: var(--symbols); font-size: 2.6rem; line-height: 1; color: #e2c890; width: 3.25rem; text-align: center; filter: drop-shadow(0 0 8px rgba(226, 200, 144, .45)); flex: none; }
.cm-moon { width: 3.25rem; height: 3.25rem; flex: none; filter: drop-shadow(0 0 8px rgba(243, 236, 223, .35)); }
.cm-dark { fill: #1c1a3d; }
.cm-lit { fill: #f1e8d6; }
.cm-rim { fill: none; stroke: rgba(198, 167, 108, .6); stroke-width: 1; }

.cs-list { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .9rem; }
.cs-list li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .6rem; font-size: .92rem; }
.cs-list strong { font-family: var(--serif); font-weight: 500; font-size: 1.08rem; color: var(--pearl); }
.cs-li-glyph { color: #e2c890; font-family: var(--symbols); padding-top: .15rem; }
.cs-deg { color: var(--taupe); font-size: .85rem; font-variant-numeric: tabular-nums; }
.cs-when { display: block; color: var(--taupe); font-size: .84rem; }

.cs-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.cs-col-title { font-family: var(--serif); font-size: 1.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pearl); margin: 0 0 .4rem; }
.cs-col-intro { color: var(--taupe); margin: 0 0 1.5rem; font-size: .95rem; }

.cs-influences { list-style: none; margin: 0; padding: 0; }
.cs-influence { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; padding: 1.4rem 0; border-top: 1px solid rgba(198, 167, 108, .22); }
.cs-influence h4, .cs-ahead h4 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--pearl); margin: 0 0 .3rem; }
.cs-influence p, .cs-ahead p { margin: 0 0 .4rem; color: var(--pearl); opacity: .88; font-size: .93rem; line-height: 1.7; }
.cs-influence .cs-meta { margin-bottom: .5rem; }
.cs-inf-glyphs { font-family: var(--symbols); font-size: 1.5rem; color: #e2c890; display: flex; align-items: center; gap: .2rem; line-height: 1; padding-top: .2rem; filter: drop-shadow(0 0 6px rgba(226, 200, 144, .35)); }
.cs-inf-glyphs span { font-size: 1rem; color: var(--taupe); }
.cs-inf-glyphs .cs-rx { font-size: 1.1rem; color: var(--rose); }

.cs-ahead { list-style: none; margin: 0; padding: 0; position: relative; }
.cs-ahead::before { content: ""; position: absolute; left: 4.6rem; top: .5rem; bottom: .5rem; width: 1px; background: linear-gradient(180deg, transparent, rgba(198, 167, 108, .5) 8%, rgba(198, 167, 108, .5) 92%, transparent); }
.cs-ahead li { display: grid; grid-template-columns: 4rem 1.3rem minmax(0, 1fr); gap: 0 1rem; padding: 1rem 0; }
.cs-ahead time { text-align: right; font-family: var(--serif); color: var(--champagne); line-height: 1.2; }
.cs-ahead time span { display: block; font-size: 1.05rem; letter-spacing: .03em; }
.cs-ahead time small { display: block; font-family: var(--font); color: var(--taupe); font-size: .72rem; margin-top: .2rem; }
.cs-ahead-glyph { position: relative; z-index: 1; font-family: var(--symbols); color: #e2c890; text-align: center; background: var(--onyx); border-radius: 50%; width: 1.3rem; height: 1.3rem; line-height: 1.3rem; font-size: .9rem; margin-top: .1rem; box-shadow: 0 0 0 3px var(--onyx); }

@media (max-width: 1000px) {
  .cs-now { grid-template-columns: 1fr; }
  .cs-columns { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cs-influence { grid-template-columns: 3.4rem minmax(0, 1fr); gap: .9rem; }
  .cs-inf-glyphs { font-size: 1.2rem; }
  .cs-ahead li { grid-template-columns: 3.3rem 1.3rem minmax(0, 1fr); gap: 0 .7rem; }
  .cs-ahead::before { left: 3.95rem; }
}
.cs-influence { align-items: start; }
@media (min-width: 861px) { .offering-list li:last-child:nth-child(odd) { grid-column: 1 / -1; } .offering-list li:last-child:nth-child(odd) p { max-width: 40rem; } }

/* ---------- Hero as a full scene (the natal chart artwork) ---------- */
@media (min-width: 1100px) {
  .page-home .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
  main section.hero {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    min-height: 0;
    padding: 0;
    isolation: isolate;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("hero-scene.jpg") center / 100% 100% no-repeat;
    background-image: image-set(url("hero-scene.webp") type("image/webp"), url("hero-scene.jpg") type("image/jpeg"));
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 90%, transparent 100%);
  }
  .hero .aurora, .hero .celestial { display: none; }

  .hero .hero-text {
    position: absolute;
    left: 3.6%;
    top: 15%;
    width: 24%;
    max-width: none;
  }
  .hero h1 { font-size: 2.55vw; line-height: 1.12; margin-bottom: 1.6vw; }
  .hero h1 span { white-space: normal; }
  .hero h1 span:nth-child(2) { padding-left: 0; }
  .hero .lede { font-size: max(.9rem, 1.02vw); line-height: 1.7; margin-bottom: 1.8vw; max-width: none; }
  .hero .hero-actions { gap: 1rem 1.5rem; }
  .hero .button { padding: .9rem 1.6rem; }

  .hero .sky-figure { display: contents; }
  .hero #wheel {
    position: absolute;
    left: 17.78%;
    top: -2.59%;
    width: 64.39%;
    max-width: none;
    height: auto;
    animation: heroWheelFade 2.2s ease-out .2s forwards;
    filter: none;
  }
  .hero .sky-figure figcaption {
    position: absolute;
    left: 75.4%;
    top: 11%;
    width: 21.8%;
    padding: 1.4rem 1.2rem 1.2rem;
    background: linear-gradient(180deg, rgba(14, 11, 30, .72), rgba(10, 8, 24, .8));
  }
  .hero .sky-title { font-size: 1.05rem; }
  .hero .sky-stamp { font-size: .74rem; margin-bottom: .9rem; }
  .hero .placements { font-size: .8rem; }
  .hero .placements li { padding: .22rem 0; }
  .hero .pl-name { font-size: .7rem; }
  .hero .pl-pos { font-size: .92rem; }
}
@keyframes heroWheelFade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) { .hero #wheel { animation: none; opacity: 1; } }
@media (min-width: 1100px) { .site-header nav a, .wordmark { text-shadow: 0 1px 10px rgba(5, 4, 16, .9); } }

/* ---------- Personal transit chart ---------- */
main section.transits { max-width: 80rem; margin: 0 auto; }
.tr-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.25rem 1.5rem;
  align-items: start;
  padding: 2rem clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid rgba(198, 167, 108, .55);
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(24, 22, 52, .85), rgba(13, 12, 34, .9));
  margin-bottom: 3.5rem;
}
.tr-form::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(198, 167, 108, .14); border-radius: 3px; pointer-events: none; }
.tr-field { display: grid; gap: .45rem; position: relative; min-width: 0; }
.tr-field label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pearl); opacity: .9; }
.tr-field .tr-opt { text-transform: none; letter-spacing: .02em; color: var(--taupe); }
.tr-form input[type="text"], .tr-form input[type="date"], .tr-form input[type="time"] {
  border: 1px solid rgba(198, 167, 108, .5);
  border-radius: 3px;
  background: rgba(10, 9, 28, .6);
  padding: .75rem .9rem;
  color-scheme: dark;
}
.tr-form input:disabled { opacity: .45; }
.tr-check { display: flex !important; align-items: center; gap: .5rem; text-transform: none !important; letter-spacing: .01em !important; font-size: .85rem !important; color: var(--taupe) !important; cursor: pointer; }
.tr-check input { width: 1rem; height: 1rem; accent-color: #c6a76c; }
.tr-city-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: .3rem 0 0;
  padding: .3rem 0;
  list-style: none;
  background: #14112f;
  border: 1px solid rgba(198, 167, 108, .55);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  max-height: 18rem;
  overflow-y: auto;
}
.tr-city-list li { padding: .55rem .9rem; cursor: pointer; font-size: .92rem; color: var(--pearl); }
.tr-city-list li[aria-selected="true"], .tr-city-list li:hover { background: rgba(198, 167, 108, .16); }
.tr-submit { grid-column: 1 / -1; justify-self: center !important; width: auto !important; min-width: 16rem; margin-top: .5rem !important; }
.tr-error { grid-column: 1 / -1; margin: 0; text-align: center; color: #f0c6c6; font-size: .9rem; }

.tr-results { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; scroll-margin-top: 2rem; }
.tr-results[hidden] { display: none; }
.tr-wheel { display: block; width: 100%; max-width: 40rem; height: auto; margin: 0 auto; overflow: visible; }
.tr-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: .75rem 0 1.5rem; font-size: .8rem; color: var(--taupe); }
.tr-key::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; vertical-align: .05em; }
.tr-key-n::before { background: #f3ecdf; }
.tr-key-t::before { background: #b9a4ff; box-shadow: 0 0 6px #b9a4ff; }
.tr-natal { max-width: 30rem; margin: 0 auto; }
.tr-house { display: inline-block; min-width: 2.2rem; margin-left: .6rem; font-family: var(--font); font-size: .72rem; color: var(--taupe); text-align: right; }
.tr-summary { margin-bottom: 2rem; }
.tr-summary h3 { font-size: 1.35rem; }
.tr-side .cs-col-title { font-size: 1.35rem; margin-bottom: .5rem; }
.tr-ac { font-family: var(--serif); font-size: .85rem; letter-spacing: .03em; }
.tr-cta { margin-top: 2rem; color: var(--taupe); }
.tr-cta .text-link { margin-left: .5rem; }

#tr-wheel .w-transit-glyph {
  font-family: var(--symbols);
  font-size: 19px;
  fill: #cbbaff;
  text-anchor: middle;
  dominant-baseline: central;
  filter: drop-shadow(0 0 4px rgba(185, 164, 255, .7));
}
.wh-ttick { stroke: #b9a4ff; stroke-width: 1; opacity: .85; }
.wh-tr-asp { stroke-width: 1.1; opacity: .95; stroke-dasharray: 4 2; }
.wh-asp-faint { opacity: .28; }

@media (max-width: 1000px) {
  .tr-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tr-results { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tr-form { grid-template-columns: 1fr; }
  .tr-submit { min-width: 0; width: 100% !important; }
}

/* ---------- Read more and expandable readings ---------- */
.more { margin-top: .35rem; }
.more summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  list-style: none;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champagne);
  padding: .3rem 0;
}
.more summary::-webkit-details-marker, .reading summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: "";
  width: .4rem;
  height: .4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s ease;
}
.more[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.more[open] summary { color: var(--pearl); }
.more summary:hover { color: var(--pearl); }
.more-body {
  margin-top: .4rem;
  padding: .2rem 0 .2rem 1rem;
  border-left: 1px solid rgba(198, 167, 108, .4);
  animation: moreIn .4s ease;
}
.more-body p { margin: 0 0 .6rem !important; font-size: .9rem !important; color: var(--pearl); opacity: .85; }
.more-body strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.02rem; letter-spacing: .02em; color: var(--champagne); margin-bottom: .1rem; }
@keyframes moreIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.readings-list > li { display: block; padding: 0; }
.reading summary {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem;
  gap: 1.5rem;
  align-items: start;
  padding: 2.25rem 0;
  cursor: pointer;
  list-style: none;
}
.reading summary .glyph { grid-row: auto; }
.reading-head h3 { margin: 0 0 .35rem; }
.reading-tag { display: block; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--champagne); line-height: 1.4; }
.reading-toggle { position: relative; width: 1.5rem; height: 1.5rem; margin-top: .35rem; border: 1px solid rgba(198, 167, 108, .6); border-radius: 50%; transition: transform .35s ease, background-color .3s; }
.reading-toggle::before, .reading-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: .6rem; height: 1px; background: var(--champagne); translate: -50% -50%; }
.reading-toggle::after { rotate: 90deg; transition: rotate .35s ease; }
.reading[open] .reading-toggle::after { rotate: 0deg; }
.reading summary:hover .reading-toggle { background: rgba(198, 167, 108, .14); }
.reading-body { padding: 0 2.75rem 2.25rem 4.25rem; animation: moreIn .45s ease; }
.reading-body p { color: var(--taupe); margin: 0 0 1.1rem; max-width: 34rem; }
.reading-body h4 { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pearl); margin: 1.25rem 0 .5rem; }
.reading-body ul { margin: 0 0 .75rem; padding: 0; list-style: none; }
.reading-body ul li { position: relative; padding: .2rem 0 .2rem 1.2rem; color: var(--taupe); font-size: .95rem; border: 0; display: block; }
.reading-body ul li::before { content: "✦"; position: absolute; left: 0; top: .28rem; font-size: .6rem; color: var(--champagne); }
.reading-book { display: inline-block; margin-top: .75rem; }
@media (min-width: 861px) { .readings-list { align-items: start; } }
@media (max-width: 560px) {
  .reading summary { grid-template-columns: 2.25rem minmax(0, 1fr) 1.4rem; gap: 1rem; }
  .reading-body { padding: 0 0 2rem 3.25rem; }
}
@media (prefers-reduced-motion: reduce) { .more-body, .reading-body { animation: none; } }


/* ---------- Header actions and hamburger menu ---------- */
.site-header { position: relative; z-index: 40; }
.header-actions { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.header-actions .nav-book { color: var(--champagne); text-decoration: none; font-size: .8125rem; letter-spacing: .14em; }
.header-actions .nav-book:hover { color: var(--pearl); }
.menu-toggle {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(198, 167, 108, .6);
  border-radius: 50%;
  background: rgba(14, 12, 36, .45);
  cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.menu-toggle:hover { background: rgba(198, 167, 108, .14); border-color: var(--champagne); }
.menu-toggle span {
  position: absolute;
  left: 50%;
  width: 1.05rem;
  height: 1px;
  background: var(--pearl);
  translate: -50% 0;
  transition: transform .35s ease, opacity .25s ease, top .35s ease;
}
.menu-toggle span:nth-child(1) { top: calc(50% - 5px); }
.menu-toggle span:nth-child(2) { top: 50%; width: .7rem; background: var(--champagne); }
.menu-toggle span:nth-child(3) { top: calc(50% + 5px); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 6rem max(16px, var(--gutter)) 3rem;
  background:
    radial-gradient(90% 60% at 20% 10%, rgba(98, 48, 104, .55), transparent 65%),
    radial-gradient(80% 60% at 90% 90%, rgba(38, 56, 138, .5), transparent 65%),
    rgba(10, 9, 30, .97);
  opacity: 0;
  transition: opacity .35s ease;
  overflow-y: auto;
}
.site-menu.is-open { opacity: 1; }
.site-menu[hidden] { display: none; }
.menu-inner { text-align: center; }
.menu-star { width: 1.6rem; height: 1.6rem; fill: #e4cc98; filter: drop-shadow(0 0 6px rgba(232, 214, 176, .9)); margin-bottom: 2rem; }
.site-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 3vh, 1.75rem); }
.site-menu li { opacity: 0; translate: 0 10px; transition: opacity .5s ease, translate .5s ease; }
.site-menu.is-open li { opacity: 1; translate: 0 0; }
.site-menu.is-open li:nth-child(2) { transition-delay: .06s; }
.site-menu.is-open li:nth-child(3) { transition-delay: .12s; }
.site-menu.is-open li:nth-child(4) { transition-delay: .18s; }
.site-menu a {
  font-family: var(--serif);
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pearl);
  text-decoration: none;
  transition: color .3s;
}
.site-menu a:hover, .site-menu a:focus-visible { color: #e4cc98; }
.site-menu a[aria-current="page"] { color: var(--champagne); }
.site-menu a[aria-current="page"]::after { content: ""; display: block; width: 2.5rem; height: 1px; margin: .4rem auto 0; background: var(--champagne); }
.menu-tag { margin: 2.5rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--taupe); }
body.menu-open { overflow: hidden; }
@media (max-width: 560px) { .header-actions .nav-book { display: none; } }
@media (prefers-reduced-motion: reduce) { .site-menu, .site-menu li, .menu-toggle span { transition: none; } }

/* ---------- Subpages ---------- */
.subpage main > section:first-child { padding-top: clamp(2rem, 6vw, 4rem); }

/* ---------- Home: continue to other pages ---------- */
main section.continue {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 0;
}
.continue-card {
  position: relative;
  display: grid;
  gap: .6rem;
  padding: 2.25rem 2rem;
  border: 1px solid rgba(198, 167, 108, .5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(22, 19, 50, .72), rgba(12, 11, 32, .8));
  text-decoration: none;
  transition: border-color .3s, background-color .3s;
}
.continue-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(198, 167, 108, .14); pointer-events: none; }
.continue-card:hover { border-color: var(--champagne); }
.continue-kicker { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.continue-title { font-family: var(--serif); font-size: 1.6rem; line-height: 1.25; color: var(--pearl); }
.continue-card .text-link { justify-self: start; margin-top: .5rem; }
@media (max-width: 760px) { main section.continue { grid-template-columns: 1fr; } }
@media (min-width: 1100px) { .page-home .site-header { z-index: 40; } }
.site-menu.is-open li:nth-child(5) { transition-delay: .24s; }

/* ---------- Meet the Team ---------- */
main section.tm-hero { text-align: center; max-width: 60rem; margin: 0 auto; padding-bottom: 1rem; }
.tm-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .75rem; color: var(--pearl); }
.tm-hero .flourish { margin: 0 auto 1.25rem; }
.tm-hero .section-intro { margin: 0 auto 2rem; }
.tm-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; }
.tm-jump a { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); text-decoration: none; border-bottom: 1px solid rgba(198, 167, 108, .4); padding-bottom: .2rem; }
.tm-jump a:hover { color: var(--pearl); }

main section.tm-group { max-width: 84rem; margin: 0 auto; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: 0; scroll-margin-top: 1rem; }
.tm-group h2 { text-align: center; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.tm-intro { text-align: center; color: var(--taupe); max-width: 36rem; margin: 0 auto 2.5rem; }
.tm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.5rem; align-items: start; }
.tm-grid-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }

.tm-card {
  position: relative;
  text-align: center;
  padding: 1rem 1.25rem 1.5rem;
  border: 1px solid rgba(198, 167, 108, .6);
  border-radius: 7rem 7rem 10px 10px;
  background: linear-gradient(180deg, rgba(22, 19, 50, .8), rgba(10, 9, 28, .9));
  transition: border-color .3s, box-shadow .3s;
}
.tm-card::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(198, 167, 108, .16); border-radius: 6.7rem 6.7rem 7px 7px; pointer-events: none; }
.tm-wide { border-radius: 10px; }
.tm-wide::before { border-radius: 7px; }
.tm-card.is-open { border-color: #e4cc98; box-shadow: 0 0 30px rgba(198, 167, 108, .15); }

.tm-toggle {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 0 .25rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}
.tm-toggle img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
  border-radius: 6.2rem 6.2rem 6px 6px;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, transparent);
  transition: transform .5s ease, filter .4s ease;
}
.tm-wide .tm-toggle img { aspect-ratio: 4 / 1; border-radius: 6px; }
.tm-toggle:hover img, .tm-card.is-open .tm-toggle img { filter: brightness(1.08); transform: scale(1.015); }
.tm-glyph {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: -1.6rem auto 0;
  position: relative;
  border: 1px solid rgba(198, 167, 108, .75);
  border-radius: 50%;
  background: #120f2e;
  font-family: var(--symbols);
  font-size: 1.5rem;
  color: #e4cc98;
  filter: drop-shadow(0 0 8px rgba(228, 204, 152, .35));
  transition: transform .35s ease, background-color .3s;
}
.tm-glyph-txt { font-family: var(--serif); font-size: .95rem; letter-spacing: .04em; }
.tm-toggle:hover .tm-glyph { background: #1c1840; }
.tm-card.is-open .tm-glyph { transform: rotate(360deg); }
.tm-hint {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champagne);
  opacity: .85;
}
.tm-hint::after { content: ""; width: .35rem; height: .35rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s; }
.tm-card.is-open .tm-hint::after { transform: rotate(-135deg); }
.tm-card h3 { font-size: 1.55rem; letter-spacing: .08em; text-transform: uppercase; margin: .6rem 0 .1rem; color: var(--pearl); }
.tm-title { margin: 0 0 .5rem; font-family: var(--serif); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); }
.tm-keys { margin: 0 0 .9rem; font-size: .78rem; color: var(--taupe); letter-spacing: .02em; }
.tm-summary { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--pearl); opacity: .88; }
.tm-more { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(198, 167, 108, .3); text-align: left; animation: moreIn .4s ease; }
.tm-more dl { margin: 0; display: grid; gap: .25rem; }
.tm-more dt { font-family: var(--serif); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--champagne); margin-top: .55rem; }
.tm-more dt:first-child { margin-top: 0; }
.tm-more dd { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--pearl); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .tm-toggle img, .tm-glyph { transition: none; } .tm-more { animation: none; } }

/* Fixed stars on the wheel */
.wh-fstar { animation: fstar 4s ease-in-out infinite; outline: none; cursor: default; }
.wh-fstar-hit { fill: transparent; }
.wh-fstar-shape { fill: #fff6dc; filter: drop-shadow(0 0 3px #fff3d2) drop-shadow(0 0 6px rgba(240, 220, 174, .8)); }
.wh-fstar:hover .wh-fstar-shape, .wh-fstar:focus-visible .wh-fstar-shape { fill: #e4cc98; }
@keyframes fstar {
  0%, 100% { opacity: .45; }
  40% { opacity: 1; }
  55% { opacity: .7; }
  70% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .wh-fstar { animation: none; opacity: .9; } }

/* Cast my chart: optional additions */
.tr-extras { grid-column: 1 / -1; margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid rgba(198, 167, 108, .25); }
.tr-extras legend { float: left; width: 100%; padding: 0; margin-bottom: .75rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pearl); opacity: .9; }
.tr-extra-list { clear: both; display: flex; flex-wrap: wrap; gap: .6rem; }
.tr-extra {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem .45rem .7rem;
  border: 1px solid rgba(198, 167, 108, .4);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--taupe);
  cursor: pointer;
  transition: border-color .25s, color .25s, background-color .25s;
}
.tr-extra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tr-extra-glyph { font-family: var(--symbols); color: var(--champagne); font-size: 1rem; }
.tr-extra:has(input:checked) { border-color: #e4cc98; color: var(--pearl); background: rgba(198, 167, 108, .14); }
.tr-extra:has(input:focus-visible) { outline: 1px solid var(--champagne); outline-offset: 3px; }
.tr-extras-learn { display: inline-block; margin-top: .75rem; font-size: .8rem; color: var(--champagne); }
.tr-stars { margin-top: 2.5rem; }
.tr-starlist { list-style: none; margin: 0; padding: 0; }
.tr-starlist li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid rgba(198, 167, 108, .22); }
.tr-starlist h4 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0 0 .2rem; color: var(--pearl); }
.tr-starlist p { margin: 0 0 .3rem; font-size: .92rem; color: var(--pearl); opacity: .88; }
.tr-star-ico { width: 1.2rem; height: 1.2rem; margin-top: .3rem; background: #fff6dc; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px #fff3d2); animation: fstar 4s ease-in-out infinite; }

/* Sparkle transition */
.sparkle-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
html.arrive body { animation: arrive .7s ease-out both; }
@keyframes arrive { from { opacity: 0; filter: brightness(1.4); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { html.arrive body { animation: none; } }
.tm-toggle img { aspect-ratio: 1 / 1.12; }
.tm-wide .tm-toggle img { aspect-ratio: 5 / 1; }

/* Sign archetype + element line */
.tm-element { margin: -.35rem 0 .6rem; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(228, 204, 152, .62); }

/* Chart options: grouped, with select all */
.tr-extra-tools { float: right; display: flex; gap: 1rem; margin-top: -2.1rem; }
.tr-extra-all { background: none; border: 0; padding: 0; font: inherit; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); cursor: pointer; border-bottom: 1px solid rgba(198, 167, 108, .4); }
.tr-extra-all:hover { color: var(--pearl); }
.tr-extra-head { clear: both; margin: 1rem 0 .5rem; font-family: var(--serif); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(228, 204, 152, .7); }
.tr-extra-head:first-of-type { margin-top: .25rem; }
.tr-extra-txt { font-family: var(--serif); font-size: .85rem; letter-spacing: .02em; }
.tr-extras-note { margin: .9rem 0 0; font-size: .8rem; opacity: .8; }
.tr-extras-note .tr-extras-learn { margin: 0 0 0 .4rem; }
@media (max-width: 560px) { .tr-extra-tools { float: none; margin: 0 0 .25rem; } }
.w-planet-glyph.w-planet-txt { font-family: var(--serif); font-size: 11px; letter-spacing: .02em; }
.tr-extras legend { width: auto; }
.tr-extra-tools { float: right; margin: 0; position: relative; z-index: 1; }
@media (max-width: 560px) { .tr-extras legend { width: 100%; } .tr-extra-tools { float: left; clear: both; margin: 0 0 .25rem; } }
.pl-glyph.pl-glyph-txt { font-family: var(--serif); font-size: .85rem; letter-spacing: .02em; }
.tr-extra { min-height: 2.75rem; }

/* Chart views: who you are / your transits */
.tr-views { grid-column: 1 / -1; display: flex; justify-content: center; gap: .5rem; margin-bottom: -.5rem; }
.tr-view {
  position: relative; padding: .8rem 1.6rem; border: 1px solid rgba(198, 167, 108, .45); border-radius: 999px;
  background: rgba(14, 12, 36, .6); color: var(--champagne); cursor: pointer;
  font-family: var(--serif); font-size: 1rem; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.tr-view:hover { color: var(--pearl); border-color: #e4cc98; }
.tr-view[aria-selected="true"] { background: rgba(198, 167, 108, .16); border-color: #e4cc98; color: var(--pearl); box-shadow: 0 0 24px rgba(198, 167, 108, .14); }
.tr-view:focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; }
.tr-side [role="tabpanel"][hidden] { display: none; }
#view-natal, #view-transits { animation: tr-fade .5s ease; }
@keyframes tr-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #view-natal, #view-transits { animation: none; } }

.tr-portrait { display: grid; gap: 1rem; margin: 0 0 2.5rem; }
.tr-big { padding: 1.1rem 1.25rem 1.2rem; border: 1px solid rgba(198, 167, 108, .28); border-radius: 10px; background: linear-gradient(180deg, rgba(28, 22, 60, .55), rgba(12, 10, 30, .55)); }
.tr-big p { margin: 0; line-height: 1.7; }
.tr-big-k { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem !important; font-family: var(--serif); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); }
.tr-big-g { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(198, 167, 108, .6); border-radius: 50%; font-family: var(--symbols); font-size: 1rem; letter-spacing: 0; }
.tr-el-list { list-style: none; margin: .35rem 0 .9rem; padding: 0; display: grid; gap: .45rem; }
.tr-el { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .75rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.tr-el-bar { height: 6px; border-radius: 3px; background: rgba(243, 236, 223, .08); position: relative; overflow: hidden; }
.tr-el-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; }
.tr-el-fire .tr-el-bar::after { background: linear-gradient(90deg, #b8643c, #e7a865); }
.tr-el-earth .tr-el-bar::after { background: linear-gradient(90deg, #6f7d4f, #b9b07a); }
.tr-el-air .tr-el-bar::after { background: linear-gradient(90deg, #8a93b8, #d6dcef); }
.tr-el-water .tr-el-bar::after { background: linear-gradient(90deg, #3b5c99, #7fa6d9); }
.tr-read-key { font-size: .85rem; color: var(--taupe); font-style: italic; }
.tr-readings { margin-bottom: 2.5rem; }
#tr-aspects { margin-bottom: 2.5rem; }
@media (max-width: 560px) { .tr-view { padding: .7rem 1.1rem; font-size: .85rem; letter-spacing: .1em; } }
.tr-legend[hidden] { display: none; }