@font-face { font-family: "EB Garamond GP"; src: url(/fonts/EBGaramondGP-Regular.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "EB Garamond GP"; src: url(/fonts/EBGaramondGP-SemiBold.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/GeistMono.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Almagest Glyphs"; src: url(/fonts/DejaVuSans-glyphs.woff2) format("woff2"); font-display: swap; }
:root { --paper:#f6f3ec; --ink:#17160f; --muted:#5d5a4f; --rule:#c9c3b3; --jade:#2f6f5e; --rust:#8a2e1f; --tint:#ebe6d9;
  --serif:"EB Garamond GP",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace; --glyph:"Almagest Glyphs","DejaVu Sans",sans-serif; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; padding-block: 0 48px; padding-inline: 20px; }
main { max-width: 720px; margin: 0 auto; }
header.top { max-width: 720px; margin: 0 auto; display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0 10px; border-bottom: 1.5px solid var(--ink); }
header.top a.brand { font-family: var(--serif); font-size: 22px; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
header.top nav a { color: var(--muted); text-decoration: none; margin-left: 16px; font-size: 14px; }
h1 { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.05; margin: 28px 0 8px; letter-spacing: -.01em; }
h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 36px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
h3 { font-family: var(--serif); font-weight: 600; font-size: 18px; margin: 20px 0 6px; }
p.lede { font-family: var(--serif); font-size: 21px; line-height: 1.35; color: var(--muted); }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rule-line { font-family: var(--mono); font-size: 12px; color: var(--muted); border-left: 3px solid var(--jade); padding: 6px 12px; margin: 12px 0 20px; }
figure { margin: 20px 0; }
figure.wheel { width: min(66%, 440px); margin: 20px auto; }
figure.wheel svg { width: 100%; height: auto; display: block; }
figcaption { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; }
.scroll { overflow-x: auto; border: 1px solid var(--rule); }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; min-width: 560px; }
th { background: var(--tint); text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--ink); font-size: 12px; }
td { padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
td.g, span.g { font-family: var(--glyph); font-size: 16px; }
td.m { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
form.birth { display: grid; gap: 14px; max-width: 480px; }
form.birth label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
form.birth input, form.birth select { font: inherit; padding: 8px 10px; border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: 2px; }
form.birth .row { display: flex; gap: 10px; flex-wrap: wrap; }
button, .button { font: inherit; padding: 9px 16px; background: var(--ink); color: var(--paper); border: 0; border-radius: 2px; cursor: pointer; }
button.quiet { background: transparent; color: var(--rust); border: 1px solid var(--rule); }
.error { color: var(--rust); border-left: 3px solid var(--rust); padding: 6px 12px; }
.note { background: var(--tint); border: 1px solid var(--rule); padding: 10px 14px; font-size: 14px; }
footer { max-width: 720px; margin: 48px auto 0; padding-top: 10px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
/* Motion stays on: the house rule overrides prefers-reduced-motion on GP sites. */
svg.wheel .asp:not(.asp-sextile) { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.4s ease-out forwards; }
svg.wheel .asp-sextile { opacity: 0; animation: fade .6s ease-out .6s forwards; }
svg.wheel text { opacity: 0; animation: fade .6s ease-out .9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { svg.wheel .asp, svg.wheel text { animation-duration: 1.4s, .6s; } }
@media (max-width: 480px) { h1 { font-size: 32px; } figure.wheel { width: 100%; } }