/* Harmony of the World: the instrument. A night sky in deep indigo, a wheel drawn in gold and
   starlight, text set in Cardo for display and Source Sans 3 for everything you read at a glance. */
:root {
  --night: #0C1324;
  --night-2: #121C33;
  --night-3: #1A2744;
  --star: #EFE8D8;
  --star-dim: rgba(239, 232, 216, 0.72);
  --star-faint: rgba(239, 232, 216, 0.45);
  --gold: #D9B55A;
  --gold-deep: #A8842E;
  --sky: #9DB4D9;
  --rose: #C98090;
  --teal: #6FB0A8;
  --line: rgba(239, 232, 216, 0.16);
  --fire: #D9B55A; --earth: #9FB38A; --air: #9DB4D9; --water: #6FB0A8;
  --serif: Cardo, "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --glyph: "Noto Sans Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", "Apple Symbols", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--night); color: var(--star); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 70% 10%, var(--night-3) 0%, var(--night) 55%); }
a { color: var(--sky); text-decoration-color: rgba(157, 180, 217, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--star); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; }
main { flex: 1; }
.g { font-family: var(--glyph); }
.sky-fixed { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.top, main, .foot { position: relative; z-index: 1; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; max-width: 1240px; margin: 0 auto; width: 100%; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--star); text-decoration: none; font-family: var(--serif); font-size: 1.15rem; }
.brand svg { color: var(--gold); flex: none; }
.nav { display: flex; gap: 22px; align-items: center; font-size: 0.95rem; }
.nav a { color: var(--star-dim); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.nav a:hover { color: var(--star); border-bottom-color: var(--gold); }
.nav-lib { color: var(--gold) !important; }

.stage { max-width: 1240px; margin: 12px auto 0; padding: 12px 24px 40px; display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 40px; align-items: start; }
.cast { display: flex; flex-direction: column; gap: 16px; }
.cast-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); max-width: 18ch; }
.cast-lede { margin: 0 0 6px; color: var(--star-dim); }
.f { display: flex; flex-direction: column; gap: 6px; position: relative; }
.f > span { font-size: 0.92rem; color: var(--star-dim); }
.f > span em { font-style: normal; color: var(--star-faint); }
.f input, .f select { font: inherit; color: var(--star); background: var(--night-2); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; width: 100%; color-scheme: dark; }
.f input::placeholder { color: var(--star-faint); }
.f input:focus, .f select:focus { border-color: var(--gold-deep); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--star-dim); cursor: pointer; }
.f-check input { margin-top: 4px; accent-color: var(--gold); }
.f-hint { color: var(--star-faint); font-size: 0.85rem; }
.city-list { list-style: none; margin: 0; padding: 4px 0; position: absolute; left: 0; right: 0; top: calc(100% - 22px); background: var(--night-3); border: 1px solid var(--line); border-radius: 4px; z-index: 5; max-height: 260px; overflow: auto; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
.city-list li { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.city-list li small { color: var(--star-faint); }
.city-list li:hover, .city-list li[aria-selected="true"] { background: rgba(217, 181, 90, 0.14); }
.f-submit { justify-content: flex-end; }
.btn { font: inherit; font-size: 1rem; background: var(--gold); color: var(--night); border: 1px solid var(--gold); border-radius: 4px; padding: 11px 20px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--star); border-color: var(--star); color: var(--night); }
.btn-quiet { background: transparent; color: var(--star); border-color: var(--line); }
.btn-quiet:hover { background: var(--night-3); color: var(--star); border-color: var(--star-faint); }
.f-note { margin: 0; color: var(--rose); font-size: 0.95rem; }

.wheel-wrap { margin: 0; position: sticky; top: 16px; }
.wheel-wrap { perspective: 1400px; }
.wheel { width: 100%; max-width: 760px; margin: 0 auto; --rx: 0deg; --ry: 0deg; transform: rotateY(var(--rx)) rotateX(var(--ry)); transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); transform-style: preserve-3d; }
.wheel svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45)); }
/* arrival: the rings settle, the aspects draw themselves, the planets light up one by one */
.wheel svg:not(.w-still) .w-outer, .wheel svg:not(.w-still) .w-ring, .wheel svg:not(.w-still) .w-seg, .wheel svg:not(.w-still) .w-sign, .wheel svg:not(.w-still) .w-tick, .wheel svg:not(.w-still) .w-cusp, .wheel svg:not(.w-still) .w-cusp-axis, .wheel svg:not(.w-still) .w-hnum, .wheel svg:not(.w-still) .w-axis-label, .wheel svg:not(.w-still) .w-core, .wheel svg:not(.w-still) .w-center, .wheel svg:not(.w-still) .w-center-sub { opacity: 0; transition: opacity 900ms ease; }
.wheel svg:not(.w-still) .w-asp { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1400ms cubic-bezier(0.3, 0.6, 0.2, 1) 500ms, opacity 400ms ease; opacity: 0; }
.wheel svg:not(.w-still) .w-planet, .wheel svg:not(.w-still) .w-pdeg, .wheel svg:not(.w-still) .w-pointer { opacity: 0; transition: opacity 500ms ease calc(700ms + var(--d, 0ms)); }
.wheel svg:not(.w-still) .w-pdeg, .wheel svg:not(.w-still) .w-pointer { transition-delay: 1000ms; }
.wheel svg.w-in .w-outer, .wheel svg.w-in .w-ring, .wheel svg.w-in .w-seg, .wheel svg.w-in .w-sign, .wheel svg.w-in .w-tick, .wheel svg.w-in .w-cusp, .wheel svg.w-in .w-cusp-axis, .wheel svg.w-in .w-hnum, .wheel svg.w-in .w-axis-label, .wheel svg.w-in .w-core, .wheel svg.w-in .w-center, .wheel svg.w-in .w-center-sub, .wheel svg.w-in .w-planet, .wheel svg.w-in .w-pdeg, .wheel svg.w-in .w-pointer { opacity: 1; }
.wheel svg.w-in .w-asp { stroke-dashoffset: 0; opacity: 0.85; }
.wheel svg { transform-origin: 50% 50%; }
.wheel svg.w-in { animation: w-settle 1600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.wheel svg.w-out { animation: w-leave 520ms cubic-bezier(0.6, 0, 0.8, 0.4) both; }
@keyframes w-settle { from { transform: rotate(-24deg) scale(0.94); } to { transform: none; } }
@keyframes w-leave { to { transform: rotate(40deg) scale(0.9); opacity: 0; } }
.w-planet.lit { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(217, 181, 90, 0.9)); }
.w-planet { transition: fill 200ms ease, filter 200ms ease; }
.wheel-cap { text-align: center; color: var(--star-faint); font-size: 0.9rem; margin-top: 10px; }
.w-outer { fill: none; stroke: var(--star-faint); stroke-width: 1; }
.w-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.w-seg { fill: none; stroke: var(--line); stroke-width: 1; }
.w-sign { font-family: var(--glyph); font-size: 22px; text-anchor: middle; dominant-baseline: central; }
.w-sign.fire { fill: var(--fire); } .w-sign.earth { fill: var(--earth); } .w-sign.air { fill: var(--air); } .w-sign.water { fill: var(--water); }
.w-tick { stroke: var(--star-faint); stroke-width: 1; }
.w-tick-10 { stroke: var(--star-dim); stroke-width: 1.2; }
.w-cusp { stroke: var(--line); stroke-width: 1; }
.w-cusp-axis { stroke: var(--gold-deep); stroke-width: 1.6; }
.w-hnum { font-size: 12px; fill: var(--star-faint); text-anchor: middle; dominant-baseline: central; }
.w-axis-label { font-size: 12px; fill: var(--gold); text-anchor: middle; dominant-baseline: central; font-weight: 600; }
.w-planet { font-family: var(--glyph); font-size: 23px; fill: var(--star); text-anchor: middle; dominant-baseline: central; }
.w-planet.retro { fill: var(--sky); }
.w-pdeg { font-size: 10.5px; fill: var(--star-dim); text-anchor: middle; dominant-baseline: central; }
.w-pointer { stroke: var(--star-faint); stroke-width: 0.8; }
.w-asp { stroke-width: 1; opacity: 0.85; }
.w-asp.flow { stroke: var(--gold); } .w-asp.blend { stroke: var(--star-dim); } .w-asp.friction, .w-asp.tension { stroke: var(--rose); } .w-asp.opportunity { stroke: var(--teal); } .w-asp.adjustment { stroke: var(--sky); stroke-dasharray: 3 4; }
.w-core { fill: var(--night); stroke: var(--line); stroke-width: 1; }
.w-center { font-family: var(--serif); fill: var(--star); text-anchor: middle; dominant-baseline: central; }
.w-center-sub { font-size: 11px; fill: var(--star-faint); text-anchor: middle; dominant-baseline: central; }

.reading { max-width: 1240px; margin: 0 auto; padding: 8px 24px 72px; }
.r-head { padding: 28px 0 24px; border-top: 1px solid var(--line); }
.r-for { margin: 0 0 8px; color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.r-big { font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 30ch; }
.r-sub { margin: 12px 0 0; color: var(--star-dim); max-width: 70ch; font-size: 1.05rem; }
.r-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.r-toast { color: var(--gold); font-size: 0.9rem; }
.r-chord-note { margin: 12px 0 0; color: var(--star-dim); font-size: 0.95rem; max-width: 70ch; }
.reading:not([hidden]) { animation: r-rise 700ms ease both; }
@keyframes r-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.r-grid { display: grid; grid-template-columns: 1.1fr 1fr 0.8fr; gap: 28px; margin-top: 12px; }
.r-block h3 { font-size: 1.35rem; margin-bottom: 12px; }
.r-note { margin: -4px 0 12px; color: var(--star-faint); font-size: 0.9rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tbl td, .tbl th { padding: 7px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { color: var(--star-faint); font-weight: 400; font-size: 0.85rem; border-top: 0; padding-top: 0; }
.tbl td.g { font-size: 1.15rem; width: 34px; }
.tbl td.deg { color: var(--star-dim); white-space: nowrap; }
.tbl td.rx { color: var(--sky); font-size: 0.85rem; }
.tbl-houses td:first-child { color: var(--star-faint); width: 36px; }
.bal { display: flex; flex-direction: column; gap: 10px; }
.bal-row { display: grid; grid-template-columns: 70px 1fr 24px; align-items: center; gap: 10px; font-size: 0.92rem; }
.bal-bar { height: 8px; background: var(--night-3); border-radius: 4px; overflow: hidden; }
.bal-bar i { display: block; height: 100%; border-radius: 4px; }
.bal-bar.fire i { background: var(--fire); } .bal-bar.earth i { background: var(--earth); } .bal-bar.air i { background: var(--air); } .bal-bar.water i { background: var(--water); }
.bal-bar.cardinal i, .bal-bar.fixed i, .bal-bar.mutable i { background: var(--star-dim); }
.bal-n { text-align: right; color: var(--star-dim); }
.bal-gap { height: 6px; }
.bal-read { margin: 8px 0 0; color: var(--star-dim); font-size: 0.95rem; }

.r-essay { margin-top: 40px; max-width: 72ch; font-size: 1.07rem; line-height: 1.62; }
.r-essay h3 { font-size: 1.5rem; margin: 1.8em 0 0.5em; }
.r-essay h3:first-child { margin-top: 0; }
.r-essay h3 .g { font-size: 1.3rem; color: var(--gold); margin-right: 8px; }
.r-essay p { margin: 0 0 1.1em; }
.r-essay .lead { font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; color: var(--star); }
.r-essay .where { color: var(--star-faint); font-size: 0.9rem; margin-top: -0.6em; }
.r-essay .note { color: var(--star-dim); font-size: 0.95rem; background: var(--night-2); padding: 12px 16px; border-radius: 4px; }

.r-aspects, .r-numbers { margin-top: 40px; max-width: 72ch; }
.asp-list { list-style: none; margin: 0; padding: 0; }
.asp-list li { padding: 12px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; }
.asp-pair { font-family: var(--glyph); font-size: 1.35rem; white-space: nowrap; }
.asp-pair i { font-family: var(--sans); font-style: normal; font-size: 0.78rem; color: var(--star-faint); display: block; margin-top: 2px; }
.asp-text { font-size: 0.98rem; }
.asp-text b { font-weight: 600; color: var(--star); }
.asp-text .orb { color: var(--star-faint); font-size: 0.85rem; }
.asp-pair .flow { color: var(--gold); } .asp-pair .friction, .asp-pair .tension { color: var(--rose); } .asp-pair .opportunity { color: var(--teal); } .asp-pair .adjustment { color: var(--sky); } .asp-pair .blend { color: var(--star-dim); }
.num-card { padding: 16px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: start; }
.num-big { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--gold); }
.num-big small { display: block; font-family: var(--sans); font-size: 0.8rem; color: var(--star-faint); margin-top: 6px; }
.num-card p { margin: 0; }
.num-card p + p { margin-top: 0.6em; color: var(--star-dim); font-size: 0.95rem; }
.r-pull { margin-top: 48px; padding: 22px 24px; background: var(--night-2); border-radius: 4px; max-width: 72ch; color: var(--star-dim); }
.r-pull p { margin: 0; }

.doc { max-width: 72ch; margin: 0 auto; padding: 24px 24px 72px; font-size: 1.07rem; line-height: 1.6; }
.doc-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.doc h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.doc-lede { color: var(--star-dim); font-size: 1.12rem; margin: 16px 0 0; }
.doc h2 { font-size: 1.55rem; margin: 1.8em 0 0.5em; }
.doc p { margin: 0 0 1.1em; }

.foot { border-top: 1px solid var(--line); margin-top: auto; }
.foot-in { max-width: 1240px; margin: 0 auto; padding: 32px 24px 44px; }
.foot-line { margin: 0; max-width: 80ch; color: var(--star-dim); }
.foot-small { margin: 12px 0 0; color: var(--star-faint); font-size: 0.9rem; max-width: 80ch; }

@media (max-width: 1020px) {
  .stage { grid-template-columns: 1fr; gap: 28px; }
  .wheel-wrap { position: static; }
  .r-grid { grid-template-columns: 1fr 1fr; }
  .r-grid .r-block:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  html { font-size: 16px; }
  .top { padding: 14px 16px; flex-wrap: wrap; }
  .nav { gap: 14px; flex-wrap: wrap; font-size: 0.9rem; }
  .stage, .reading, .foot-in, .doc { padding-left: 16px; padding-right: 16px; }
  .f-row { grid-template-columns: 1fr; }
  .r-grid { grid-template-columns: 1fr; }
  .asp-list li { grid-template-columns: 1fr; gap: 6px; }
  .num-card { grid-template-columns: 70px 1fr; }
  .w-sign { font-size: 26px; } .w-planet { font-size: 26px; } .w-pdeg { font-size: 12px; } .w-hnum { font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .city-list li { transition: background-color 140ms ease, border-color 140ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel { transition: none; transform: none; }
  .wheel svg.w-in, .wheel svg.w-out, .reading:not([hidden]) { animation: none; }
  .wheel svg:not(.w-still) * { transition: none !important; opacity: 1; }
  .wheel svg:not(.w-still) .w-asp { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.85; }
}
@media print {
  html, body { background: #fff; color: #000; }
  .top, .foot, .cast, .r-actions, .r-pull, .wheel-cap, .sky-fixed, .r-chord-note { display: none; }
  .wheel svg { filter: none; opacity: 1; }
  .wheel svg * { opacity: 1 !important; stroke-dasharray: none !important; }
  .stage { grid-template-columns: 1fr; padding: 0; }
  .wheel { max-width: 520px; }
  .w-sign, .w-planet, .w-center, .w-hnum, .w-pdeg, .w-axis-label { fill: #000; }
  .w-outer, .w-ring, .w-seg, .w-tick, .w-cusp { stroke: #555; }
  .w-core { fill: #fff; stroke: #555; }
  .reading, .r-essay, .asp-list li, .num-card { color: #000; }
  .r-sub, .r-essay .where, .asp-text .orb, .tbl th { color: #444; }
  .r-essay .note, .r-pull { background: #f2f2f2; }
}