:root {
  /* Color Palette - Dark Celestial Observatory */
  --color-space-black: #0a0a0f;
  --color-midnight-blue: #1a2332;
  --color-deep-navy: #0f1620;
  --color-cream: #f4f1e8;
  --color-cream-dimmed: #c4c1b8;
  --color-copper: #c77d4b;
  --color-copper-bright: #e09664;
  --color-sage: #2d4a3e;
  --color-sage-light: #3d5a4e;

  /* Planet Colors */
  --planet-sun: #FFD700;
  --planet-moon: #FFFFFF;
  --planet-mercury: #87CEEB;
  --planet-venus: #90EE90;
  --planet-mars: #FF6347;
  --planet-jupiter: #9370DB;
  --planet-saturn: #696969;
  --planet-uranus: #40E0D0;
  --planet-neptune: #4169E1;
  --planet-pluto: #8B4513;

  /* Typography */
  --font-display: 'Crimson Pro', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-symbols: 'STIX Two Math', math;
  --font-kufic: 'Reem Kufi', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-space-black);
  color: var(--color-cream);
  position: relative;
}

/* Subtle constellation background pattern */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--color-midnight-blue) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, var(--color-deep-navy) 0%, transparent 50%);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

/* Subtle paper texture */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  z-index: 1;
}

nav {
  background: linear-gradient(180deg, rgba(26, 35, 50, 0.8) 0%, rgba(10, 10, 15, 0.9) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(199, 125, 75, 0.2);
  padding: 0.75rem 1.5rem;
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-copper) transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

nav::-webkit-scrollbar {
  height: 6px;
}

nav::-webkit-scrollbar-track {
  background: transparent;
}

nav::-webkit-scrollbar-thumb {
  background: var(--color-copper);
  border-radius: 3px;
}

nav a {
  color: var(--color-cream-dimmed);
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 2px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 0 0 auto;
  position: relative;
  border: 1px solid transparent;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 1px;
  background: var(--color-copper);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

nav a:hover {
  color: var(--color-cream);
  background: rgba(199, 125, 75, 0.08);
}

nav a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

nav a.active {
  color: var(--color-copper-bright);
  background: rgba(199, 125, 75, 0.15);
  border-color: rgba(199, 125, 75, 0.3);
  font-weight: 600;
}

nav .disabled {
  color: rgba(244, 241, 232, 0.25);
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: not-allowed;
  flex: 0 0 auto;
  font-style: italic;
}

main {
  flex: 1;
  overflow: auto;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  scrollbar-width: thin;
  scrollbar-color: var(--color-copper) transparent;
}

main::-webkit-scrollbar {
  width: 8px;
}

main::-webkit-scrollbar-track {
  background: transparent;
}

main::-webkit-scrollbar-thumb {
  background: var(--color-copper);
  border-radius: 4px;
}

h1 {
  color: var(--color-copper-bright);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(199, 125, 75, 0.3);
}

/* Wide screen layout: sidebar navigation */
@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }

  nav {
    flex-direction: column;
    width: 220px;
    padding: 2.5rem 1.25rem;
    gap: 0.35rem;
    overflow: visible;
    border-bottom: none;
    border-right: 1px solid rgba(199, 125, 75, 0.2);
    background: linear-gradient(90deg, rgba(26, 35, 50, 0.8) 0%, rgba(10, 10, 15, 0.9) 100%);
  }

  nav a {
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
  }

  nav a::after {
    left: 0;
    transform: translateX(0) scaleX(0);
    transform-origin: left;
    width: 3px;
    height: 70%;
    top: 15%;
    bottom: auto;
  }

  nav a:hover::after {
    transform: translateX(0) scaleX(1);
  }

  nav .disabled {
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
  }

  main {
    padding: 1.5rem;
  }
}

/* ======================== */
/* Planet color utilities    */
/* ======================== */

.planet-color--sun { color: var(--planet-sun); }
.planet-color--moon { color: var(--planet-moon); }
.planet-color--mercury { color: var(--planet-mercury); }
.planet-color--venus { color: var(--planet-venus); }
.planet-color--mars { color: var(--planet-mars); }
.planet-color--jupiter { color: var(--planet-jupiter); }
.planet-color--saturn { color: var(--planet-saturn); }
.planet-color--uranus { color: var(--planet-uranus); }
.planet-color--neptune { color: var(--planet-neptune); }
.planet-color--pluto { color: var(--planet-pluto); }

.planet-bg--sun { background-color: var(--planet-sun); }
.planet-bg--moon { background-color: var(--planet-moon); }
.planet-bg--mercury { background-color: var(--planet-mercury); }
.planet-bg--venus { background-color: var(--planet-venus); }
.planet-bg--mars { background-color: var(--planet-mars); }
.planet-bg--jupiter { background-color: var(--planet-jupiter); }
.planet-bg--saturn { background-color: var(--planet-saturn); }
.planet-bg--uranus { background-color: var(--planet-uranus); }
.planet-bg--neptune { background-color: var(--planet-neptune); }
.planet-bg--pluto { background-color: var(--planet-pluto); }

/* Tile symbol part colors — planets reuse planet colors */
.tile-planet--sun { color: var(--planet-sun); }
.tile-planet--moon { color: var(--planet-moon); }
.tile-planet--mercury { color: var(--planet-mercury); }
.tile-planet--venus { color: var(--planet-venus); }
.tile-planet--mars { color: var(--planet-mars); }
.tile-planet--jupiter { color: var(--planet-jupiter); }
.tile-planet--saturn { color: var(--planet-saturn); }
.tile-planet--uranus { color: var(--planet-uranus); }
.tile-planet--neptune { color: var(--planet-neptune); }
.tile-planet--pluto { color: var(--planet-pluto); }
.tile-aspect { color: var(--color-cream); }

/* Golden Dawn King Scale zodiac sign colors */
.tile-sign--aries { --sign-color: #C00000; color: var(--sign-color); }
.tile-sign--taurus { --sign-color: #FF6600; color: var(--sign-color); }
.tile-sign--gemini { --sign-color: #FFCC00; color: var(--sign-color); }
.tile-sign--cancer { --sign-color: #FFB347; color: var(--sign-color); }
.tile-sign--leo { --sign-color: #FFDF00; color: var(--sign-color); }
.tile-sign--virgo { --sign-color: #99CC33; color: var(--sign-color); }
.tile-sign--libra { --sign-color: #33CC33; color: var(--sign-color); }
.tile-sign--scorpio { --sign-color: #009999; color: var(--sign-color); }
.tile-sign--sagittarius { --sign-color: #3366CC; color: var(--sign-color); }
.tile-sign--capricorn { --sign-color: #2B2B80; color: var(--sign-color); }
.tile-sign--aquarius { --sign-color: #7744AA; color: var(--sign-color); }
.tile-sign--pisces { --sign-color: #9966CC; color: var(--sign-color); }

/* ======================== */
/* Daily page               */
/* ======================== */

/* Override layout/main constraints for scrollable daily page.
   (body lock removed globally; body override no longer needed.) */
body:has(.daily-page) .layout {
  height: auto;
  min-height: 100vh;
}

body:has(.daily-page) main {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}

.daily-page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

.daily-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .daily-header {
    flex-direction: row;
    align-items: stretch;
  }
}

/* Glassmorphic card base */
.moon-phase-card,
.daily-heading,
.location-card {
  flex: 1;
  background: rgba(26, 35, 50, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(199, 125, 75, 0.15);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Moon phase card */
.moon-phase-visual {
  width: 80px;
  height: 80px;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.moon-svg {
  width: 80px;
  height: 80px;
  display: block;
}

.moon-phase-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.moon-phase-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-cream);
}

.moon-age {
  font-size: 0.85rem;
  color: var(--color-cream-dimmed);
}

.moon-manzil {
  font-size: 0.85rem;
  color: var(--color-copper-bright);
  font-style: italic;
}

.moon-manzil-number {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
}

/* Date heading card */
.daily-heading h1 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

.daily-date-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.daily-date-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date-nav-arrow {
  color: var(--color-copper);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
  line-height: 1;
}

.date-nav-arrow:hover {
  color: var(--color-copper-bright);
  background: rgba(199, 125, 75, 0.15);
}

.date-nav-relative {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  margin-top: 0.15rem;
}

.date-nav-relative--link {
  color: var(--color-copper);
  text-decoration: none;
}

.date-nav-relative--link:hover {
  color: var(--color-copper-bright);
  text-decoration: underline;
}

.daily-date {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-cream);
  margin: 0;
}

.daily-ruler {
  font-size: 1rem;
  color: var(--color-cream-dimmed);
  margin: 0;
  font-family: var(--font-symbols);
}

.daily-ruler span {
  font-size: 1.3rem;
  margin-right: 0.25rem;
}

/* Location card */
.location-card {
  position: relative;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.location-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-cream);
}

.location-coords {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.location-time {
  font-size: 0.85rem;
  color: var(--color-cream-dimmed);
}

.location-birth {
  font-size: 0.85rem;
  color: var(--color-cream);
}

.location-birth--prompt {
  color: var(--color-cream-dimmed);
  font-style: italic;
  opacity: 0.6;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.location-birth--prompt:hover {
  opacity: 0.9;
}

.location-change-btn {
  margin-top: 0.75rem;
  background: transparent;
  border: 1px solid rgba(199, 125, 75, 0.4);
  color: var(--color-copper-bright);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.location-change-btn:hover {
  background: rgba(199, 125, 75, 0.15);
  border-color: var(--color-copper-bright);
}

/* Location modal */
.location-modal {
  border: 1px solid rgba(199, 125, 75, 0.3);
  border-radius: 12px;
  background: var(--color-space-black);
  color: var(--color-cream);
  padding: 0;
  max-width: 400px;
  width: 90vw;
}

.location-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.location-modal-content {
  padding: 1.5rem;
}

.location-modal-content h3 {
  font-family: var(--font-display);
  color: var(--color-copper-bright);
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.location-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.location-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-cream-dimmed);
}

.location-form input {
  background: var(--color-deep-navy);
  border: 1px solid rgba(199, 125, 75, 0.3);
  border-radius: 4px;
  color: var(--color-cream);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.location-form input:focus {
  outline: none;
  border-color: var(--color-copper-bright);
}

.location-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.location-modal-actions button {
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.location-gps-btn {
  background: transparent;
  border-color: rgba(199, 125, 75, 0.3) !important;
  color: var(--color-copper-bright);
  margin-right: auto;
}

.location-gps-btn:hover {
  background: rgba(199, 125, 75, 0.1);
}

.location-save-btn {
  background: var(--color-sage);
  color: var(--color-cream);
  border-color: var(--color-sage-light) !important;
}

.location-save-btn:hover {
  background: var(--color-sage-light);
}

.location-cancel-btn {
  background: transparent;
  color: var(--color-cream-dimmed);
}

.location-cancel-btn:hover {
  color: var(--color-cream);
}

/* ======================== */
/* Moon Positions Bar        */
/* ======================== */

.moon-positions-bar {
  display: flex;
  gap: 1px;
  margin-bottom: 2rem;
  background: rgba(199, 125, 75, 0.1);
  border: 1px solid rgba(199, 125, 75, 0.15);
  border-radius: 8px;
  overflow: hidden;
}

.moon-pos-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  background: rgba(26, 35, 50, 0.5);
  backdrop-filter: blur(8px);
  text-align: center;
}

.moon-pos-tradition {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-copper);
  margin-bottom: 0.25rem;
}

.moon-pos-name {
  font-size: 0.85rem;
  color: var(--color-cream);
}

.moon-pos-translation {
  font-size: 0.65rem;
  color: var(--color-cream-dimmed);
  font-style: italic;
}

.moon-pos-detail {
  font-size: 0.7rem;
  color: var(--color-cream-dimmed);
}

@media (max-width: 767px) {
  .moon-positions-bar {
    flex-direction: column;
  }
}

/* ======================== */
/* Sun Decan Bar             */
/* ======================== */

.sign-bars-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.sun-decan-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sun-decan-bar:last-child {
  margin-bottom: 0;
}

.sun-decan-bar__flank {
  font-family: var(--font-symbols);
  font-size: 1.2rem;
  color: var(--color-cream-dimmed);
  flex-shrink: 0;
  opacity: 0.5;
  width: 1.5rem;
  text-align: center;
}

.sun-decan-bar__track {
  flex: 1;
  position: relative;
  height: 36px;
  background: rgba(26, 35, 50, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(199, 125, 75, 0.15);
  border-radius: 4px;
  overflow: visible;
}

.sun-decan-bar__glyph {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.1rem;
  color: var(--color-cream-dimmed);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

.sun-decan-bar__tick {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  background: var(--color-cream-dimmed);
}

.sun-decan-bar__tick--major {
  width: 1px;
  height: 14px;
  opacity: 0.5;
}

.sun-decan-bar__tick--minor {
  width: 1px;
  height: 6px;
  opacity: 0.2;
}

.sun-decan-bar__tick--edge {
  width: 1px;
  height: 10px;
  opacity: 0.35;
}

.sun-decan-bar__star {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
  cursor: default;
  /* Larger hit area for hover */
  padding: 6px;
}

.sun-decan-bar__star::after {
  content: '';
  display: block;
  width: var(--star-size, 4px);
  height: var(--star-size, 4px);
  background: var(--color-cream);
  border-radius: 50%;
  opacity: var(--star-opacity, 0.5);
}

.sun-decan-bar__star-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-space-black);
  border: 1px solid rgba(199, 125, 75, 0.3);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-cream);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

.sun-decan-bar__star:hover .sun-decan-bar__star-tooltip {
  display: block;
}

.sun-decan-bar__moon-arc {
  position: absolute;
  top: 50%;
  height: 1px;
  background: #fff;
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
}

.sun-decan-bar__moon-endpoint {
  color: #fff !important;
  opacity: 1;
  font-size: 0.9rem !important;
}

.sun-decan-bar__planet {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.1rem;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.sun-decan-bar__natal-planet {
  position: absolute;
  top: 75%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 0.8rem;
  opacity: 0.5;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.sun-decan-bar__sun {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.4rem;
  color: var(--planet-sun);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  z-index: 7;
  pointer-events: none;
}

.sun-decan-bar--moon .sun-decan-bar__track {
  border-color: rgba(192, 192, 192, 0.2);
}

.sign-bar-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
  text-align: center;
  padding: 0.1rem 0;
}

.sign-bar-elision {
  text-align: center;
  font-family: var(--font-symbols);
  font-size: 0.9rem;
  color: var(--color-cream-dimmed);
  opacity: 0.4;
  padding: 0.4rem 0;
  letter-spacing: 0.5em;
}

/* ======================== */
/* Ongoing Events           */
/* ======================== */

.ongoing-events-section {
  margin-bottom: 2rem;
}

.ongoing-events-section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-copper-bright);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.ongoing-events-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.event-tile {
  background: rgba(26, 35, 50, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(199, 125, 75, 0.12);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 160px;
}

.event-tile-symbol {
  font-family: var(--font-symbols);
  font-size: 1.4rem;
}

.event-tile-label {
  font-size: 0.85rem;
  color: var(--color-cream);
}

.event-tile-sign {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  margin-left: auto;
}

.event-tile-remaining {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-copper);
  white-space: nowrap;
}

.event-tile--natal_aspect {
  border: 1px solid rgba(199, 125, 75, 0.2);
}

/* ======================== */
/* Planetary Hours Timeline */
/* ======================== */

.planetary-hours-section {
  margin-bottom: 2rem;
}

.planetary-hours-section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-copper-bright);
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.planetary-hours-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.planetary-hours-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hour-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 4px;
  padding: 1px;
}

.hour-group--sun     { background: rgba(255, 215, 0, 0.15); }
.hour-group--moon    { background: rgba(192, 192, 192, 0.10); }
.hour-group--mercury { background: rgba(135, 206, 235, 0.12); }
.hour-group--venus   { background: rgba(144, 238, 144, 0.12); }
.hour-group--mars    { background: rgba(255, 99, 71, 0.12); }
.hour-group--jupiter { background: rgba(147, 112, 219, 0.12); }
.hour-group--saturn  { background: rgba(105, 105, 105, 0.10); }

.planetary-hour-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

.hour-roman {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  width: 1.5rem;
  text-align: right;
  flex-shrink: 0;
  opacity: 0.6;
}

.hour-planet-symbol {
  font-family: var(--font-symbols);
  font-size: 1.2rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.hour-planet-name {
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.hour-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
  min-width: 65px;
}

.hour-solar-label {
  font-size: 0.75rem;
  color: var(--color-copper);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Aspect rows in timeline */
.aspect-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

.aspect-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
  min-width: 80px;
}

.aspect-notation {
  font-family: var(--font-symbols);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.aspect-glyph {
  color: var(--color-cream-dimmed);
  font-size: 0.9rem;
}

.aspect-description {
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.timeline-empty {
  color: var(--color-cream-dimmed);
  font-style: italic;
  font-size: 0.9rem;
  padding: 1rem;
}

/* Ingress rows in timeline */
.ingress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

.ingress-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
  min-width: 80px;
}

.ingress-notation {
  font-family: var(--font-symbols);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.rise-set-svg {
  width: 18px;
  height: 14px;
  vertical-align: middle;
}

.ingress-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ingress-arrow {
  color: var(--color-cream-dimmed);
  font-size: 0.85rem;
}

.ingress-destination {
  font-size: 1.1rem;
  color: var(--color-cream);
}

.ingress-row--manzil .ingress-destination {
  font-family: var(--font-kufic);
  font-size: 1.2rem;
}

.ingress-description {
  font-size: 0.85rem;
  color: var(--color-cream);
}

.ingress-detail {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  margin-left: auto;
  text-align: right;
}

/* Rarity-based event sizing: rarer events get larger text */
.rarity-1 .ingress-description,
.rarity-1 .aspect-description { font-size: 0.6rem; }
.rarity-1 .ingress-notation,
.rarity-1 .aspect-notation { font-size: 0.75rem; }
.rarity-1 .ingress-detail { font-size: 0.55rem; }
.rarity-1.ingress-row,
.rarity-1.aspect-row { padding-top: 0.25rem; padding-bottom: 0.25rem; opacity: 0.7; }

.rarity-2 .ingress-description,
.rarity-2 .aspect-description { font-size: 0.72rem; }
.rarity-2 .ingress-notation,
.rarity-2 .aspect-notation { font-size: 0.95rem; }
.rarity-2 .ingress-detail { font-size: 0.65rem; }
.rarity-2.ingress-row,
.rarity-2.aspect-row { padding-top: 0.4rem; padding-bottom: 0.4rem; }

/* rarity-3 = base sizes (no override needed) */

.rarity-4 .ingress-description,
.rarity-4 .aspect-description { font-size: 1.3rem; font-weight: 500; }
.rarity-4 .ingress-notation,
.rarity-4 .aspect-notation { font-size: 1.75rem; }
.rarity-4 .ingress-detail { font-size: 1.0rem; }
.rarity-4.ingress-row,
.rarity-4.aspect-row { padding-top: 1.0rem; padding-bottom: 1.0rem; }

.rarity-5 .ingress-description,
.rarity-5 .aspect-description { font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
.rarity-5 .ingress-notation,
.rarity-5 .aspect-notation { font-size: 2.5rem; }
.rarity-5 .ingress-detail { font-size: 1.2rem; }
.rarity-5.ingress-row,
.rarity-5.aspect-row { padding-top: 1.4rem; padding-bottom: 1.4rem; }

/* Expandable detail panels on timeline rows */
.timeline-panel {
  display: none;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem 0.6rem;
  margin-left: calc(80px + 0.75rem);
  border-left: 2px solid var(--color-cream-dimmed);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.is-open + .timeline-panel {
  display: flex;
}

.timeline-panel__keyword {
  color: var(--color-cream);
  font-size: 0.85rem;
  padding-left: 1.6em;
}

.timeline-panel__symbol {
  font-family: var(--font-symbols);
  display: inline-block;
  width: 1.3em;
  margin-left: -1.6em;
  margin-right: 0.3em;
  text-align: center;
  vertical-align: middle;
  transform-origin: center;
  letter-spacing: -0.05em;
}

.timeline-panel__symbol::after {
  content: " ";
  font-size: 0;
}


.bound-ruler {
  margin-bottom: 0.2rem;
}

.bound-ruler-inline {
  vertical-align: middle;
}

.timeline-panel__symbol--wide {
  width: auto;
  min-width: 1.3em;
  white-space: nowrap;
}

.timeline-panel__symbol--kufic {
  font-family: var(--font-kufic);
}

.timeline-panel__planet {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.timeline-panel__sign {
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.now-marker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
}

.now-marker__time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-copper-bright);
  min-width: 80px;
  font-weight: 600;
}

.now-marker__line {
  flex: 1;
  height: 1px;
  background: var(--color-copper-bright);
}

.now-marker__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-copper-bright);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Moon mansion display in moon phase card */
.moon-mansion {
  font-size: 0.8rem;
  color: var(--color-copper-bright);
  font-style: italic;
}

.moon-mansion-script {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  font-style: normal;
}

.moon-mansion-translation {
  font-size: 0.65rem;
  color: var(--color-cream-dimmed);
  font-style: italic;
  margin-top: -0.15rem;
}

.moon-mansion-detail {
  font-size: 0.7rem;
  color: var(--color-cream-dimmed);
}

.pada-syllable {
  font-weight: 600;
  color: var(--color-copper-bright);
}

/* Ecliptic positions table (bottom of /daily) */
.positions-table-wrap {
  max-width: 640px;
  margin: 2.5rem auto 1rem;
  padding: 0 1rem;
  box-sizing: border-box;
  overflow-x: auto;
}

.positions-table__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted, #888);
  margin: 0 0 0.75rem;
}

.positions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.positions-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted, #888);
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.positions-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.positions-table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
}

.positions-row__body {
  font-weight: 500;
}

.positions-row__body .planet-color--sun,
.positions-row__body .planet-color--moon,
.positions-row__body .planet-color--mercury,
.positions-row__body .planet-color--venus,
.positions-row__body .planet-color--mars,
.positions-row__body .planet-color--jupiter,
.positions-row__body .planet-color--saturn,
.positions-row__body .planet-color--uranus,
.positions-row__body .planet-color--neptune,
.positions-row__body .planet-color--pluto {
  font-size: 1.15rem;
  margin-right: 0.4rem;
}

.positions-row__sign {
  margin-left: 0.5rem;
  color: var(--color-muted, #888);
}

.positions-row__missing {
  color: var(--color-muted, #888);
  opacity: 0.5;
}

/* Aspect-event permalink page (/aspects/<type>/<p1>/<p2>/<date>) */

/* main flex-centers its content; when the page is taller than the viewport
   that clips the top above the scroll origin (nav rows become unreachable).
   Opt out like the daily page does. Covers the old conjunction permalink
   page too — it shares the .conjunction-show root. */
body:has(.conjunction-show) .layout,
body:has(.home-show) .layout,
body:has(.aspects-index) .layout {
  height: auto;
  min-height: 100vh;
}

body:has(.conjunction-show) main,
body:has(.home-show) main,
body:has(.aspects-index) main {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}

.conjunction-show {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
}

.aspect-show {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aspect-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(196, 193, 184, 0.2);
  border-radius: 4px;
}

.aspect-nav-row__label {
  color: var(--color-cream-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
}

.aspect-nav-row__links {
  display: flex;
  gap: 1rem;
}

.aspect-nav-row__link {
  color: var(--color-copper-bright);
  text-decoration: none;
}

.aspect-nav-row__link:hover {
  text-decoration: underline;
}

.aspect-info-panel {
  border-left: 2px solid var(--color-cream-dimmed);
  padding: 0.5rem 0.75rem 0.6rem;
}

.aspect-info-panel .timeline-panel {
  display: flex;
  margin-left: 0;
}

.aspect-info-panel__description {
  margin-top: 0.5rem;
  color: var(--color-cream);
  font-size: 0.9rem;
  line-height: 1.6;
}

.aspect-daily-link,
.aspect-gate-link {
  font-size: 0.9rem;
}

.aspect-daily-link a,
.aspect-gate-link a {
  color: var(--color-copper-bright);
  text-decoration: none;
}

.aspect-daily-link a:hover,
.aspect-gate-link a:hover {
  text-decoration: underline;
}

.chart-wheel__aspect--primary {
  stroke-width: 2.5 !important;
  opacity: 1 !important;
}

/* Facts grid on aspect/conjunction show pages (Sign, Ecliptic longitude, etc.) */
.conjunction-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  margin: 0;
  align-items: baseline;
}

.conjunction-facts dt {
  color: var(--color-cream-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  margin: 0;
}

.conjunction-facts dd {
  color: inherit;
  margin: 0;
}


/* ======================== */
/* ======================== */
/* Modern Chart home page (planets.at /)   */
/* ======================== */

.home-show {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.home-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.home-title {
  margin: 0;
}

.home-date {
  margin: 0;
  color: var(--color-cream-dimmed);
  font-size: 0.95rem;
}

.home-time {
  font-family: var(--font-mono);
  color: var(--color-copper-bright);
}

.home-chart {
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
}

.home-section-label {
  margin: 0 0 0.75rem;
  color: var(--color-cream-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-body);
}

.home-positions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1rem;
}

@media (min-width: 480px) {
  .home-positions-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 600px) {
  .home-positions-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home-position {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(26, 35, 50, 0.4);
  border: 1px solid rgba(199, 125, 75, 0.15);
  border-radius: 6px;
  font-size: 0.85rem;
}

.home-position__glyph {
  font-size: 1.1rem;
}

.home-position__name {
  color: var(--color-cream);
  font-weight: 500;
  margin-right: auto;
}

.home-position__sign {
  color: var(--color-cream-dimmed);
  white-space: nowrap;
}

.home-position__degree {
  font-family: var(--font-mono);
  color: var(--color-copper-bright);
  white-space: nowrap;
}

.home-events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.home-event {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(196, 193, 184, 0.2);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

.home-event:hover {
  border-color: var(--color-copper-bright);
}

.home-event__time {
  font-family: var(--font-mono);
  color: var(--color-copper-bright);
  font-size: 0.85rem;
  white-space: nowrap;
}

.home-event__glyphs {
  font-size: 1.05rem;
  white-space: nowrap;
}

.home-event__aspect-glyph {
  color: var(--color-cream-dimmed);
  margin: 0 0.15rem;
}

.home-event__text {
  color: var(--color-cream-dimmed);
  font-size: 0.85rem;
}

.home-events-next {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--color-cream-dimmed);
}

.home-events-next__link,
.home-events-next a {
  color: var(--color-copper-bright);
  text-decoration: none;
}

.home-events-next__link:hover,
.home-events-next a:hover {
  text-decoration: underline;
}

.home-footer-link {
  font-size: 0.9rem;
}

.home-footer-link a {
  color: var(--color-copper-bright);
  text-decoration: none;
}

.home-footer-link a:hover {
  text-decoration: underline;
}

/* ======================== */
/* Chart wheel refinements   */
/* ======================== */

/* STIX renders the astronomical glyphs as consistent line art; without an
   explicit family the browser falls back to whatever serif has coverage. */
.chart-wheel text {
  font-family: var(--font-symbols);
}

/* Sign glyphs tinted by classical element — reference ring, kept muted so
   the planets and aspect lines stay in front. Class fill wins over the
   SVG fill attribute, which remains as a fallback. */
.chart-wheel__sign--fire  { fill: #e08a5e; }
.chart-wheel__sign--earth { fill: #96b47c; }
.chart-wheel__sign--air   { fill: #8fbcd9; }
.chart-wheel__sign--water { fill: #6d8fc9; }
.chart-wheel__sign { opacity: 0.85; }

/* Elemental tints for text-presentation sign glyphs outside the wheel —
   same hues as the chart-wheel__sign--* fills. */
.sign-element--fire  { color: #e08a5e; }
.sign-element--earth { color: #96b47c; }
.sign-element--air   { color: #8fbcd9; }
.sign-element--water { color: #6d8fc9; }

/* ======================== */
/* Upcoming aspects index (planets.at /aspects) */
/* ======================== */

.aspects-index {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.aspects-index .home-section-label {
  margin-top: 0.5rem;
}

.aspects-index .home-events-list {
  margin-bottom: 0.5rem;
}

/* Daily-timeline permalink arrows — without this they render as default
   browser blue links. Dim until the row is hovered. */
.aspect-row__permalink {
  color: var(--color-copper-bright);
  text-decoration: none;
  opacity: 0.45;
  padding: 0 0.4rem;
}
.aspect-row:hover .aspect-row__permalink { opacity: 1; }
.aspect-row__permalink:hover { text-decoration: underline; }

/* Retrograde suffix on the aspect-facts sign rows (app/helpers/aspect_facts_helper.rb) */
.aspect-fact-retrograde {
  color: var(--color-cream-dimmed);
  font-size: 0.9em;
}

/* Today: the first slice of the new front page. */
.today-page {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding: 0 1.5rem 1.5rem;
}

/* Observer summary + "Change location": a line of text, not a button. */
.today-location-line {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-cream-dimmed);
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
}
.today-location-name { color: var(--color-cream); }
.today-location-coordinates,
.today-location-action { white-space: nowrap; }

.today-location-change,
.today-date-jump-link {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0 0.15rem;
  border: 0;
  border-radius: 0.15rem;
  color: var(--color-copper-bright);
  background: none;
  font-size: inherit;
  line-height: 2.75rem;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(199, 125, 75, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.today-location-change:hover, .today-date-jump-link:hover { color: var(--color-copper-bright); text-decoration-color: currentColor; }
.today-location-change:focus-visible, .today-date-jump-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.today-header {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  white-space: nowrap;
  overflow-x: auto;
}

.today-header h1 {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.today-band {
  display: flex;
  flex-basis: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.25em;
  align-items: baseline;
  font-size: clamp(0.5rem, 3.7cqw, 0.875rem);
  background-color: var(--day-color);
  color: var(--color-space-black);
  padding: 0.25rem 0.625rem;
}

.today-band--saturn {
  color: var(--color-cream);
}

body:has(.today-page) main {
  display: block;
  padding-top: 0;
}

.today-decan {
  width: 100%;
  padding: 0.25rem 0.625rem;
  font-size: 0.875rem;
  background-color: var(--sign-color);
  color: var(--color-space-black);
}

.today-decan.tile-sign--aries,
.today-decan.tile-sign--sagittarius,
.today-decan.tile-sign--capricorn,
.today-decan.tile-sign--aquarius {
  color: var(--color-cream);
}

.today-solar-term {
  width: 100%;
  padding: 0.25rem 0.625rem;
  font-size: 0.875rem;
  color: #000;
  background-color: #fff;
}

.today-zodiac-grid {
  --grid-line-color: #4d4d4d;
  border: 1px solid var(--grid-line-color);
  --grid-columns: repeating-linear-gradient(to right,
    transparent 0,
    transparent calc(100% / 12 - 1px),
    var(--grid-line-color) calc(100% / 12 - 1px),
    var(--grid-line-color) calc(100% / 12));
}

.today-zodiac-header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  text-align: center;
  border-bottom: 1px solid var(--grid-line-color);
  background-image: var(--grid-columns);
}

.today-zodiac-header > span {
  padding: 0.25rem 0;
  font-family: var(--font-symbols);
  font-size: 1.25rem;
}

.today-zodiac-row {
  position: relative;
  height: 2rem;
  background-color: color-mix(in srgb, var(--row-color) 50%, #000);
  background-image: repeating-linear-gradient(to right,
    transparent calc(var(--planet-position) - 100% / 24 - 100% / 12),
    transparent calc(var(--planet-position) - 100% / 24 - 1px),
    var(--grid-line-color) calc(var(--planet-position) - 100% / 24 - 1px),
    var(--grid-line-color) calc(var(--planet-position) - 100% / 24));
  color: var(--color-cream);
}

.today-zodiac-planet,
.today-zodiac-aspect {
  position: absolute;
  left: var(--position);
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.25rem;
}

.today-zodiac-row + .today-zodiac-row {
  border-top: 1px solid var(--grid-line-color);
}

.today-zodiac-planet {
  font-weight: 700;
  -webkit-text-stroke: 0.35px currentColor;
}

.today-zodiac-aspect {
  color: #cccccc;
}

.today-zodiac-planet--retrograde {
  color: #ff0000;
}

.today-zodiac-station {
  position: absolute;
  left: var(--position);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.today-zodiac-station--pre-shadow { background-color: #ff0000; }
.today-zodiac-station--retrograde { background-color: #0000ff; }
.today-zodiac-station--post-shadow { background-color: #000000; }

.today-zodiac-row + .today-zodiac-row .today-zodiac-station {
  top: calc(50% - 0.5px);
}

.today-zodiac-node {
  position: absolute;
  left: var(--position);
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.125rem;
  font-weight: 500;
  color: #fff;
}

/* Today Moon/calendar card: keep the shared Moon SVG and zodiac coordinates. */
.today-moon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 1rem;
  padding: 0.5rem 0.625rem;
  align-items: stretch;
}

.today-moon-row .moon-phase-card {
  align-items: flex-start;
  justify-content: flex-start;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}

/* Sized with the rest of the section, not the window: 2.5vw grew to 2rem on
   a desktop, beside 14px text in the same card (Jes, Telegram #14331). */
.today-moon-row .moon-phase-name {
  font-size: 1.25rem;
}

.today-calendar-dates {
  margin: 0;
  padding-left: 1rem;
  border-left: 1px solid #4d4d4d;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  min-width: 0;
}

.today-calendar-dates > div {
  padding: 0.25rem 0;
}

.today-calendar-dates > div + div {
  border-top: 1px solid #4d4d4d;
}

.today-calendar-dates time {
  display: grid;
  /* min-content floors: a column never gets narrower than its longest word. */
  grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1.3fr);
  direction: ltr;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 1.05rem;
  line-height: 1.35;
}

.today-calendar-transliterated {
  text-align: left;
}

/* Day numbers and month-name words are atomic: wrap between words only.
   (overflow-wrap: anywhere here once let iOS Safari size the day track at
   one digit, splitting "10" into "1" / "0".) */
.today-calendar-day,
.today-calendar-word {
  white-space: nowrap;
}

.today-calendar-native {
  text-align: right;
}

@media (max-width: 600px) {
  .today-moon-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0.5rem;
    padding-inline: 0.25rem;
  }

  .today-calendar-dates {
    padding-left: 0.5rem;
  }

  .today-moon-row .moon-phase-name {
    font-size: 1.1rem;
  }

  .today-calendar-dates time {
    gap: 0.35rem;
    font-size: 0.875rem;
  }
}

.today-events { margin-top: 1rem; }
.today-events h2 { margin: 0; font-family: var(--font-display); }
.today-events-zone { margin: 0.25rem 0 0.75rem; color: var(--color-cream-dimmed); font-size: 0.8rem; }
.today-events ol { list-style: none; padding: 0; margin: 0; }
.today-event {
  display: grid;
  grid-template-columns: 5.5rem 4.5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-top: 1px solid #4d4d4d;
}
.today-event time { font-variant-numeric: tabular-nums; }
.today-event-symbol { font-family: var(--font-symbols); }
@media (max-width: 600px) {
  .today-event { grid-template-columns: 4.2rem 3.5rem minmax(0, 1fr); gap: 0.25rem; font-size: 0.8rem; }
}

.today-event[style] {
  background-color: var(--hour-color);
  color: var(--color-space-black);
}
.today-event[data-hour-ruler="saturn"] {
  color: var(--color-cream);
}

.today-event[data-nighttime="true"] {
  background-color: color-mix(in srgb, var(--hour-color) 50%, #000);
  color: var(--color-cream);
}
.today-event[data-nighttime="true"][data-hour-ruler="moon"] {
  color: var(--color-space-black);
}

.today-event { grid-template-columns: 7.5rem 4.5rem minmax(0, 1fr); }
@media (max-width: 600px) {
  .today-event { grid-template-columns: 6.2rem 3.5rem minmax(0, 1fr); }
}

.today-zodiac-grid { position: relative; }
.today-zodiac-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.today-zodiac-connectors line { stroke: #fff; stroke-width: 1; }

.today-moon-row .moon-svg text {
  stroke: #000;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.today-solar-illustration {
  overflow: hidden;
  grid-column: 1 / -1;
  display: block;
  width: min(calc(100% - 1rem), 404px);
  height: auto;
  justify-self: center;
  margin: 0.5rem auto;
  border-radius: 8px;
}

.today-zodiac-phase--new_moon { background-color: #000; }
.today-zodiac-phase--full_moon { background-color: #fff; }

.today-graphics-row { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 0.75rem; row-gap: 0.75rem; }
.today-analemma { width: 112px; flex: 0 0 112px; margin: 0; text-align: center; }
.today-analemma svg { display: block; width: 112px; height: 128px; }
.today-analemma figcaption { font-size: 0.75rem; white-space: nowrap; }

.today-day-clock { width: 212px; max-width: 100%; flex: 0 0 212px; margin: 0 0 0 auto; text-align: center; }
.today-day-clock svg { display: block; width: 160px; height: 128px; margin: 0 auto; }
.today-day-clock figcaption { font-size: 0.65rem; white-space: nowrap; }

.today-day-clock-solar-times { display: block; white-space: normal; }

.today-day-clock-lunar-times { display: block; white-space: nowrap; }
.today-day-clock-lunar-times time { white-space: nowrap; }

.today-date-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; flex-basis: 100%; box-sizing: border-box; gap: 0.25rem 1rem; padding: 0.4rem 0; font-size: 0.8rem; }
.today-date-navigation a { color: inherit; font-size: inherit; padding: 0.25rem 0; white-space: nowrap; }
.today-date-navigation a[rel="prev"] { justify-self: start; }
.today-date-navigation a[rel="next"] { justify-self: end; }
.today-date-reset { justify-self: center; }

.today-date-offset { grid-column: 1 / -1; font-size: 0.8rem; text-align: center; }

@media (max-width: 480px) {
  .today-date-navigation { gap: 0.25rem; min-width: 0; font-size: clamp(0.625rem, 2.9vw, 0.8rem); }
  .today-date-navigation a { min-width: 0; letter-spacing: 0; padding: 0.35rem 0; }
}

.today-event { display: block; }
.today-event-summary { display: grid; grid-template-columns: 7.5rem 4.5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; cursor: pointer; list-style: none; }
.today-event-summary::-webkit-details-marker { display: none; }
.today-event-summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.today-event-information { padding: 0.5rem 0.75rem; }
@media (max-width: 600px) {
  .today-event-summary { grid-template-columns: 6.2rem 3.5rem minmax(0, 1fr); gap: 0.25rem; }
}

.today-event-words { text-align: center; }

.today-graphics-zone { margin-top: 0.75rem; color: var(--color-cream-dimmed); font-size: 0.8rem; }
.today-graphics-zone p { margin: 0.25rem 0; }

.today-analemma-noon { font-size: 0.75rem; white-space: nowrap; }

/* Persistent aspect diagrams, loaded independently of event disclosures. */
.today-moon-venus { margin: 0.8rem auto; width: 100%; max-width: 640px; min-width: 0; text-align: center; }
/* Clip all four artwork corners without changing the SVG coordinate space. */
.today-moon-venus svg { display: block; width: 100%; height: auto; background: #080808; border-radius: 8px; overflow: hidden; }
.today-moon-venus figcaption { font-size: 0.8rem; margin-top: 0.4rem; }
.moon-venus-aspect-glyph { fill: white; stroke: black; stroke-width: 2.5px; paint-order: stroke fill; font-size: 17px; font-weight: bold; }

/* Keep each navigation destination's label and date in one clickable column. */
.today-date-navigation a > span,
.today-date-navigation a > time { display: block; }
.today-date-navigation a > time { font-size: 0.9em; line-height: 1.25; opacity: 0.8; }
.today-date-navigation a[rel="next"] { text-align: right; }
.today-date-navigation .today-date-reset { text-align: center; }

/* Reserve the final SVG footprint while either kind of aspect diagram loads. */
.today-aspect-loader { width: calc(100% - 1rem); max-width: 624px; min-width: 0; margin: 0.5rem auto; }
.today-aspect-diagram { width: 100%; aspect-ratio: 680 / 736; margin: 0; padding: 0; box-sizing: border-box; }
.today-aspect-diagram[data-state="loading"],
.today-aspect-diagram[data-state="error"] { display: grid; place-items: center; text-align: center; font-size: 0.8rem; line-height: 1.3; }
.today-aspect-loader .today-moon-venus { margin: 0; max-width: none; }

/* Same-hour events get an inset rule; retain original borders between hours. */
.today-event[data-hour-continuation="true"] { border-top: 0; }

/* The original .today-event 1px solid #4d4d4d border remains unchanged. */
.today-event { position: relative; }
.today-event[data-hour-continuation="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 1px;
  background: #999;
  pointer-events: none;
}

body:has(.ingress-art-review) .layout { display: block; width: 100%; max-width: none; }
body:has(.ingress-art-review) main { padding: 0.75rem; min-width: 0; }
.ingress-art-review nav { display: flex; flex-direction: row; width: auto; flex-wrap: wrap; gap: 0.25rem; margin-block: 1rem; padding: 0.25rem; }
.ingress-review-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.ingress-review-tile { min-width: 0; background: #222; padding: 0.5rem; border-radius: 8px; overflow-wrap: anywhere; }
.ingress-review-tile h2 { font-size: 1rem; }
.ingress-review-tile p { font-size: 0.8rem; margin-block: 0.5rem; }
.ingress-review-tile .today-solar-illustration { max-width: 404px; }
.ingress-art-review nav a { padding: 0.35rem; font-size: 0.8rem; }
.ingress-review-tile a { color: var(--color-cream); text-underline-offset: 0.15em; }

.today-conditions { width: 100%; margin: 0.75rem 0; }
.today-conditions h2 { font-size: 1rem; margin: 0.5rem; }
.today-condition { border-bottom: 1px solid #4d4d4d; }
.today-condition-summary { cursor: pointer; padding: 0.4rem 0.5rem; font-size: clamp(0.7rem, 2.7vw, 0.9rem); }
.today-condition-range { display: block; padding-top: 0.15rem; font-size: 0.85em; }
.today-condition-summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* Keep the date, weekday, and decan aligned; the longer solar-term line fits independently. */
.today-page { container-type: inline-size; --today-report-font-size: clamp(0.5rem, 3.7cqw, 0.875rem); --today-calendar-font-size: var(--today-report-font-size); }
.today-header { container-type: normal; }
.today-band,
.today-decan { font-size: var(--today-report-font-size); white-space: nowrap; }
.today-solar-term { font-size: var(--today-calendar-font-size); white-space: nowrap; }
.today-band > time,
.today-ruler,
.today-ruler > span,
.today-solar-term > span { font-size: inherit; }

/* Ongoing intervals reuse the moment-event disclosure with a whole colored box. */
.today-condition { background: linear-gradient(to right, var(--condition-left), var(--condition-right)); color: #000; margin: 0; border: 0; }
.today-condition[data-solid="true"] { background: var(--condition-left); }
.today-condition[data-solid="true"][data-color-left="saturn"] { color: #fff; }
.today-condition-summary { grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem; width: 100%; box-sizing: border-box; align-items: baseline; }
.today-condition-range { display: inline; padding: 0; font-size: inherit; white-space: nowrap; }
.today-condition-summary > span:last-child { min-width: 0; overflow-wrap: anywhere; }
/* Opaque black copy sits directly on canonical gradients, without effects. */
.today-condition[data-solid="false"] { color: #000; }

/* Grid and interval disclosures form one contiguous stack. */
.today-zodiac-grid { margin-bottom: 0; border-radius: 8px; overflow: hidden; }
.today-zodiac-grid:has(+ .today-conditions .today-condition) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.today-conditions { display: block; margin: 0; padding: 0; gap: 0; }
.today-conditions .today-condition { display: block; margin: 0; border: 0; border-radius: 0; }
.today-conditions .today-condition:last-child { border-radius: 0 0 8px 8px; overflow: hidden; }

.today-calendar-dates time { row-gap: 0.15rem; }
.today-calendar-translation { grid-column: 1 / -1; text-align: center; font-size: 0.75em; line-height: 1.2; white-space: normal; overflow-wrap: normal; }

.today-lunar-mansions { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); column-gap: 0.5rem; align-items: center; direction: ltr; width: 100%; padding: 0.25rem 0.625rem; box-sizing: border-box; font-size: 0.875rem; }
.today-lunar-mansion { min-width: 0; white-space: nowrap; text-align: left; }
.today-lunar-mansion[data-tradition="vedic"] { text-align: center; }
.today-lunar-mansion:last-child { text-align: right; }

.today-jupiter-ci { width: 100%; box-sizing: border-box; padding: 0.25rem 0.625rem; text-align: left; background: #000; font-size: clamp(0.75rem, 3.8cqw, 0.875rem); white-space: nowrap; }

/* Emphasize boundary labels without inheriting weight into solar artwork or details. */
.today-event[data-event-type="hour"][data-hour-continuation="false"] .today-event-summary > time,
.today-event[data-event-type="hour"][data-hour-continuation="false"] .today-event-summary > span {
  font-weight: 700;
}

/* Compact Today location line: screen-reader-only text. */
.today-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Today zodiac grid: explicit unavailable state when planet positions fail
   to load, instead of seven empty colour rows. */
.today-zodiac-unavailable {
  margin: 0;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--color-cream);
  border-bottom: 1px solid var(--grid-line-color);
}

/* Today: the poem line at the foot of an explicit-observer report
   (doc/today_poem_footer.md). One quiet, centered italic line per load.
   It follows .today-page directly in <main> and, unlike the report, has no
   solid ground: from the bottom date navigation down, the page pattern shows
   through (Telegram #13538). Same column as the report above it. */
.today-poem-footer {
  width: 100%;
  max-width: 44rem;
  margin: 3rem auto 0;
  padding: 0 1.5rem 0.5rem;
  text-align: center;
}
main > .today-poem-footer { background-color: transparent; }
.today-page:has(+ .today-poem-footer) { padding-bottom: 0; }
.today-poem {
  max-width: 28rem;
  margin: 0 auto;
  color: var(--color-cream-dimmed);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* planets.at page background: a seamless star-and-polygon tile (regular
   pentagons, decagons, pentagrams, double decagons), rebuilt geometrically by
   script/build_planets_background.rb into app/assets/images/planets-tile.svg.
   Copper lines at low opacity on the space-black ground. The tile rides on the
   fixed body::after layer (static, no background-attachment, so no iOS jank);
   content columns get the solid ground so text never sits on the lines.
   background-size must match the size the script prints. */
body::after {
  background-image:
    url("/assets/planets-tile-88d24883.svg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
  background-size: 168px 517.05px, 100px 100px;
  background-repeat: repeat;
  background-position: center top, 0 0;
  opacity: 1;
}

/* Solid grounds for everything that holds text. */
main > :where(:not(link, script, style, template, noscript)) {
  background-color: var(--color-space-black);
}
.layout > nav {
  background: linear-gradient(180deg, #171e2b 0%, var(--color-space-black) 100%);
  backdrop-filter: none;
}
@media (min-width: 768px) {
  .layout > nav { background: linear-gradient(90deg, #171e2b 0%, var(--color-space-black) 100%); }
}

/* No pattern where it would cost legibility or ink. */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce), (forced-colors: active) {
  body::after { background-image: none; }
}
@media print {
  body::before,
  body::after { display: none; }
  body,
  main > :where(:not(link, script, style, template, noscript)),
  .layout > nav { background: none; }
}

/* Today: asynchronously loaded report sections (doc/today_async_sections.md).
   Each section is an eager Turbo Frame. While it loads (and if it fails) it
   reserves about the height its content takes, measured at 320, 390 and
   1280 px on a recorded Portland page, so arriving sections shift little. */
turbo-frame.today-section { display: block; }
.today-section:not([data-today-section-state="ready"]) { min-height: var(--today-section-reserve, 3rem); }
.today-section--solar { --today-section-reserve: 39px; }
.today-section--moon { --today-section-reserve: 252px; }
.today-section--sky { --today-section-reserve: 480px; }
.today-section--day { --today-section-reserve: 900px; }
@media (min-width: 375px) {
  .today-section--solar { --today-section-reserve: 44px; }
  .today-section--moon { --today-section-reserve: 202px; }
  .today-section--sky { --today-section-reserve: 465px; }
}
@media (min-width: 600px) {
  .today-section--solar { --today-section-reserve: 52px; }
  .today-section--moon { --today-section-reserve: 320px; }
  .today-section--sky { --today-section-reserve: 495px; }
}
.today-section-placeholder {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.25rem 0.75rem;
  min-height: var(--today-section-reserve, 3rem);
  margin: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-cream-dimmed);
  font-size: 0.8rem;
  text-align: center;
}
.today-section--day > .today-section-placeholder { min-height: calc(var(--today-section-reserve) - 12px); margin-top: 12px; }
.today-section-status { margin: 0; }
.today-section[data-today-section-state="loading"] .today-section-status { animation: today-section-pulse 1.6s ease-in-out infinite; }
@keyframes today-section-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .today-section[data-today-section-state="loading"] .today-section-status { animation: none; }
}
.today-section-unavailable { color: var(--color-cream); }
.today-section-retry {
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--color-copper-bright);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(199, 125, 75, 0.45);
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.today-section-retry:hover { text-decoration-color: currentColor; }
.today-section-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.today-sections-noscript { margin: 0.75rem 0; color: var(--color-cream); font-size: 0.875rem; }
.today-sections-noscript a { color: var(--color-copper-bright); }
@media print {
  .today-section-retry { display: none; }
  .today-section[data-today-section-state="loading"] .today-section-status { animation: none; }
}

/* Today report: one vertical scrolling region (the document), like /daily and
   the splash. The site layout otherwise makes <main> a 100vh inner scroller,
   which on phones nested inside a document that also scrolled. */
body:has(.today-page) .layout {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

body:has(.today-page) main {
  overflow: visible;
  min-width: 0;
}

/* Today: a section being prepared in the background (doc/today_background_fill.md) */
.today-section[data-today-section-state="pending"] .today-section-status { animation: today-section-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .today-section[data-today-section-state="pending"] .today-section-status { animation: none; }
}

/* Today day clock: live current-time hand (on every day's clock, shown only
   while it is that day for the observer; today_clock_hand_controller.js).
   Drawn inside the existing SVG, so no layout shift; no transitions, so
   nothing to reduce for reduced motion. The UA [hidden] rule does not
   apply to SVG elements, hence the explicit one. */
.today-day-clock-hand[hidden] {
  display: none;
}
.today-day-clock-hand-casing {
  stroke: #181818;
  stroke-width: 3;
  stroke-linecap: round;
}
/* Gold, reaching the hour numerals (Jes, Telegram #13710/#13711). */
.today-day-clock-hand-line {
  stroke: #FFD700;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.today-day-clock-hand-hub {
  fill: #FFD700;
  stroke: #181818;
  stroke-width: 0.8;
}

/* Today events: the "now" bar (the planets/daily .now-marker as a
   decorative list item; today_now_bar_controller.js). The copper rule runs
   the full width of the row — flush with the left and right edges of the
   event rows above and below it — and sits behind the time and the NOW
   label, which carry the row's own opaque background so the rule breaks
   cleanly around them instead of striking through. Same reading order and
   same look as the planets/daily marker, only edge to edge. Geometry gated
   by test/browser/today_now_bar_geometry_test.mjs. */
.today-now-bar {
  background: var(--color-space-black);
}
.today-now-bar .now-marker {
  position: relative;
  justify-content: space-between;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
.today-now-bar .now-marker__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  flex: none;
}
.today-now-bar .now-marker__time,
.today-now-bar .now-marker__label {
  position: relative;
  z-index: 1; /* above the rule, which follows the time in the markup */
  background: var(--color-space-black);
}
.today-now-bar .now-marker__time {
  min-width: 0;
  padding-right: 0.5rem;
}
.today-now-bar .now-marker__label {
  padding-left: 0.5rem;
}
@media (max-width: 600px) {
  .today-now-bar .now-marker__time { padding-right: 0.35rem; }
  .today-now-bar .now-marker__label { padding-left: 0.35rem; }
}

/* Natal transit rows (TODAY_NATAL, doc/natal_design.md): a quiet "natal"
   marker after the label, in the location line's muted italic. */
.today-natal-transit figcaption { font-size: 0.75rem; opacity: 0.75; text-align: center; }

/* An opened aspect row's positions at the exact moment, degrees and minutes
   around the sign glyph, either side of the row's symbol (Jes, Telegram
   #13626, #13630): "0♓︎11 ☽ ⚹ ♃ 3♋︎07", one quiet line above the keywords,
   each part kept whole. */
.today-event-positions {
  margin-bottom: 0.3rem;
  font-family: var(--font-symbols);
  font-variant-numeric: tabular-nums;
  text-align: center;
  opacity: 0.85;
}
.today-event-positions > span { white-space: nowrap; }

/* The ongoing-aspects grid's natal row (TODAY_NATAL; Jes, Telegram #13638):
   the visitor's natal bodies as beads on a string at the grid's scale,
   styled as the natal station line's natal stations (NatalTransitIllustration:
   dark fill, cream ring, cream text-presentation glyph), each at its true
   longitude (#13679); overlapping beads stack in DOM order, the Moon on top.
   Beads sit above the connectors, so an in-orb
   transit's line stops at the bead's ring. */
.today-zodiac-natal {
  position: relative;
  height: 2rem;
  background-color: #111116;
  background-image: var(--grid-columns);
  border-bottom: 1px solid var(--grid-line-color);
}
.today-zodiac-natal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.6px);
  height: 1.2px;
  background-color: #c4c1b8;
  opacity: 0.85;
}
.today-zodiac-natal-bead {
  position: absolute;
  z-index: 1;
  left: var(--position);
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.6px solid #f4f1e8;
  background-color: #111116;
  color: #f4f1e8;
  font-family: var(--font-symbols);
  font-size: 0.8125rem;
  line-height: 1;
}
.today-zodiac-natal-bead--angle {
  font-family: inherit;
  font-size: 0.5rem;
  letter-spacing: -0.02em;
}

/* Dignity bars (Jes, Telegram #13655, #13657, #13664): a planet in its
   domicile, exaltation, detriment or fall (ZodiacDignity) gets a thin bar
   spanning that sign's 30° (offset from the row's aspect dividers) along the
   bottom edge of its own row, entirely inside it, with no border: domicile
   green, exaltation gold, detriment grey, fall black (it reads on the rows'
   own lighter, planet-coloured backgrounds). The title names the dignity. */
.today-zodiac-dignity {
  position: absolute;
  left: var(--dignity-left);
  width: var(--dignity-width);
  bottom: 0;
  height: 2px;
}
.today-zodiac-dignity--domicile { background-color: #2fbf4a; }
.today-zodiac-dignity--exaltation { background-color: #ffd700; }
.today-zodiac-dignity--detriment { background-color: #9a9a9a; }
.today-zodiac-dignity--fall { background-color: #000; }

/* The zodiac's direction of motion on the grid's header (Jes, Telegram
   #13658): a grey leftward chevron, as the natal station line's, left of
   Pisces and right of Aries inside their boxes. Absolutely positioned in the
   (now positioned) box: the glyphs' centring, the boxes and the rows are
   untouched. */
.today-zodiac-header > span { position: relative; }
.today-zodiac-chevron {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 1rem;
  transform: translateY(-50%);
  overflow: visible;
  fill: none;
  stroke: #8a8a8a;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.today-zodiac-chevron path { vector-effect: non-scaling-stroke; }
/* Tall and light (Jes, Telegram #13668): about the sign glyph's height, a
   1px stroke, 1px inside Pisces' left edge and Aries' right edge. */
.today-zodiac-chevron--pisces { left: 1px; }
.today-zodiac-chevron--aries { right: 1px; }

/* In-orb lines to the visitor's natal beads at half opacity (Jes, Telegram
   #13671, an experiment); the mundane lines are unchanged. */
.today-zodiac-connectors line.today-zodiac-connector--natal { opacity: 0.5; }

/* Natal beads are buttons (Jes, Telegram #13691): tap to bring a covered
   bead to the front of its overlap stack, or send the front one to the back
   (bead_stack_controller.js). Reset the button chrome; show keyboard focus. */
button.today-zodiac-natal-bead {
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  font-weight: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.today-zodiac-natal-bead:focus { outline: none; }
button.today-zodiac-natal-bead:focus-visible { outline: 2px solid #ffd700; outline-offset: 1px; }

/* Natal beads may overhang the grid's edges (Jes, Telegram #13693): the grid
   no longer clips; each header and planet row clips itself instead, and the
   header and the last row carry the rounded corners the grid's clip drew
   (inside its 1px border: 7px), so only the natal row's beads overhang. */
.today-zodiac-grid { overflow: visible; }
.today-zodiac-header, .today-zodiac-row { overflow: hidden; }
.today-zodiac-header { border-radius: 7px 7px 0 0; }
.today-zodiac-grid > .today-zodiac-row:last-of-type { border-radius: 0 0 7px 7px; }
.today-zodiac-grid:has(+ .today-conditions .today-condition) > .today-zodiac-row:last-of-type { border-radius: 0; }

/* Ongoing conditions as columns (Jes, Telegram #13695): date range, symbol
   cluster and description line up across every row, so each description
   starts at the same x. The list is a three-column grid; each row (details,
   keeping its own background) and its summary are subgrids of it. The
   description wraps within its column. */
/* Elsewhere each row lays out on its own, as before: date, then the
   symbols and the description (not aligned across rows). */
.today-condition-summary { grid-template-columns: max-content max-content minmax(0, 1fr); }
.today-condition-symbol { white-space: nowrap; }
.today-condition-label { min-width: 0; overflow-wrap: anywhere; }
/* Aligned only where <details> can be a grid with a ::details-content box
   (Chromium, Safari 18.4+). */
@supports selector(::details-content) {
  .today-conditions:has(.today-condition) {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    column-gap: 0.5rem;
  }
  .today-conditions > p { grid-column: 1 / -1; }
  .today-conditions .today-condition { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .today-conditions .today-condition::details-content { grid-column: 1 / -1; }
  .today-conditions .today-condition > .today-event-information { grid-column: 1 / -1; }
  .today-conditions .today-condition-summary { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 0.5rem; }
}

/* A little space between the Jupiter mansion line (the Moon section's last
   line) and the aspects grid (Jes, Telegram #13699). On the sky section's
   frame, so its loading placeholder carries it too (no shift on load); on
   the synchronous page, on the grid after the line. */
.today-section--sky { margin-top: 0.5rem; }
.today-jupiter-ci + .today-zodiac-grid { margin-top: 0.5rem; }

/* The date line's "jump" date picker (Jes, Telegram #13700, #13727): a wide
   sheet toward the bottom of the viewport on phones, a large date field, a
   full-width Go button at the bottom (easy for a thumb once iOS's calendar
   closes), and a 44px × close target at the top right. */
/* "jump" renders like the header's "change" (Jes, Telegram #13739): the
   shared .today-location-change rule above, at the location line's size and
   weight; only its tap-target height stays the date line's own. */
.today-date-navigation a.today-date-jump-link { color: var(--color-copper-bright); margin-left: 0.35rem; padding: 0 0.15rem; font-size: 0.875rem; font-weight: 400; line-height: 1.4; min-height: 0; }
.today-date-jump-dialog {
  width: min(92vw, 28rem);
  max-width: none;
  box-sizing: border-box;
  margin: auto auto max(1.5rem, env(safe-area-inset-bottom));
  padding: 3rem 1.25rem 1.25rem;
  border: 1px solid #4d4d4d;
  border-radius: 14px;
  background: #111116;
  color: var(--color-cream);
  font-size: 1.125rem;
}
@media (min-width: 600px) { .today-date-jump-dialog { margin: auto; } }
.today-date-jump-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.today-date-jump-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 1.75rem;
  line-height: 1;
  text-decoration: none;
  border-radius: 50%;
}
.today-date-jump-close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.today-date-jump-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.today-date-jump-label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; min-width: 0; font-size: 1rem; }
/* iOS gives a date input an intrinsic minimum width and ignores width: 100%
   until its native appearance is reset (Jes, Telegram #13742): reset it and
   draw the field ourselves, so it never runs past the dialog's padding. */
.today-date-jump-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 3.25rem;
  margin: 0;
  padding: 0 0.75rem;
  font: inherit;
  font-size: 1.25rem;
  line-height: 3.25rem;
  color-scheme: dark;
  border: 1px solid #777;
  border-radius: 8px;
  background: #1b1b22;
  color: inherit;
}
.today-date-jump-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.today-date-jump-go {
  width: 100%;
  min-height: 3.25rem;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  border: 0;
  border-radius: 10px;
  background: var(--color-cream);
  color: #111;
  cursor: pointer;
}
/* Without JavaScript the link targets the dialog: shown inline, not modal. */
.today-date-jump-dialog:target:not([open]) { display: block; position: relative; margin: 0.75rem auto 0; }

/* Mercury retrograde and Mercury's stations link to mercury.retrograde.observer (Jes, Telegram #13929). */
/* (Venus too, #13944.) */
.today-retrograde-link-row { margin-top: 0.4rem; text-align: center; font-size: 0.85em; }
.today-retrograde-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.today-retrograde-link:hover, .today-retrograde-link:focus-visible { text-decoration-style: solid; }

/* The Jupiter–Saturn cycle, planets.at/jupiter/saturn (Jes, Telegram #14199, #14205). */
.pair-cycle { max-width: 40rem; margin: 0 auto; padding: 0 16px 3rem; }
.pair-header { text-align: center; margin: 1.5rem 0 1rem; }
.pair-title { font-family: var(--font-display); font-weight: 600; font-size: 2.1rem; margin: 0; line-height: 1.15; }
.pair-title-and { color: var(--color-cream-dimmed); font-size: 1.3rem; font-weight: 400; }
.pair-subline { color: var(--color-cream-dimmed); margin: .35rem 0 0; }
.pair-now { border: 1px solid rgba(224, 150, 100, .45); border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0 1.5rem; background: rgba(224, 150, 100, .06); }
.pair-now p { margin: .2rem 0; line-height: 1.45; }
.pair-now-word { color: var(--color-copper-bright); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; margin-right: .35rem; }
.pair-now-passage a { color: var(--color-cream); }
.pair-now-passage a.pair-hit--past { color: var(--color-cream-dimmed); text-decoration: line-through; text-decoration-color: rgba(196, 193, 184, .5); }
.pair-section { margin: 2rem 0; }
.pair-h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; text-align: center; margin: 0 0 .6rem; }
.pair-copy { color: var(--color-cream-dimmed); font-size: .92rem; line-height: 1.5; margin: .5rem auto 0; max-width: 32rem; }
.pair-figure { margin: 0 auto; max-width: 26rem; }
.pair-figure--chart { max-width: 30rem; }
.pair-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.pair-figure text { font-family: var(--font-body); }
.pair-dot { stroke: var(--color-space-black); stroke-width: .8; }
.pair-now-line { stroke: var(--color-copper-bright); stroke-width: .8; stroke-dasharray: 3 2; }
.pair-now-ring { fill: none; stroke: var(--color-copper-bright); stroke-width: 1.4; }
.pair-chart-year-line { stroke: rgba(244, 241, 232, .1); stroke-width: .6; }
.pair-chart-year, .pair-chart-now { fill: var(--color-cream-dimmed); font-size: 9px; text-anchor: end; }
.pair-chart-now { fill: var(--color-copper-bright); }
.pair-chart-label { fill: var(--color-cream); font-size: 8.5px; }
.pair-ring-sector { opacity: .55; }
.pair-ring-sign { fill: var(--color-space-black); font-size: 8px; text-anchor: middle; font-family: var(--font-symbols) !important; }
.pair-ring-path { fill: none; stroke: rgba(244, 241, 232, .35); stroke-width: .8; }
.pair-ring-dot { fill: var(--color-cream); }
.pair-ring-dot--current { fill: var(--color-copper-bright); }
.pair-passages { list-style: none; padding: 0; margin: 0; }
.pair-passage { display: grid; grid-template-columns: 1.4rem 8.5rem 1fr; gap: .3rem; padding: .4rem .2rem; border-bottom: 1px solid rgba(244, 241, 232, .08); font-size: .92rem; }
.pair-passage--current { background: rgba(224, 150, 100, .08); }
.pair-passage-glyph { font-family: var(--font-symbols); text-align: center; }
.pair-passage-dates a, .pair-conjunctions a { color: var(--color-cream); }
.pair-conjunctions { margin: 1rem auto 0; border-collapse: collapse; font-size: .92rem; }
.pair-conjunctions td { padding: .25rem .7rem; border-bottom: 1px solid rgba(244, 241, 232, .08); }
.pair-conjunction--current td { background: rgba(224, 150, 100, .1); }
.pair-element { color: var(--color-cream-dimmed); }
.pair-chart-guide { stroke-width: .7; opacity: .45; }
.pair-chart-glyph { font-family: var(--font-symbols) !important; font-size: 11px; text-anchor: middle; }
.pair-chart-curve { fill: none; stroke: var(--planet-jupiter); stroke-width: 1.3; stroke-linejoin: round; }
.pair-ring-year { fill: var(--color-cream-dimmed); font-size: 6.5px; text-anchor: middle; }
.pair-ring-year--current { fill: var(--color-copper-bright); }
.pair-copy a { color: var(--color-copper-bright); }
.pair-cycle .mercury-zone { text-align: center; font-size: .8rem; color: var(--color-cream-dimmed); margin-top: 2rem; }
@media (max-width: 480px) {
  .pair-passage { grid-template-columns: 1.4rem 1fr; }
  .pair-passage-dates { grid-column: 2; }
}

/* planets.at/jupiter/saturn scrolls the document, not an inner <main>, as
   the aspect and daily pages do: the layout's 100vh box with main
   overflow:auto made an inner scroller that iPhone Safari scrolled badly
   (Jes, Telegram #14209). */
body:has(.pair-cycle) .layout {
  height: auto;
  min-height: 100vh;
}

body:has(.pair-cycle) main {
  display: block;
  overflow: visible;
}

/* The sky today and the cycle as a line, in place of the dial (Jes, Telegram #14216, #14221). */
.pair-figure--wide { max-width: 34rem; }
.pair-sky-tick { stroke-width: 1.4; opacity: .55; }
.pair-sky-tick--next { opacity: 1; stroke-width: 2.2; }
.pair-sky-aspect { font-family: var(--font-symbols) !important; font-size: 8.5px; text-anchor: middle; opacity: .6; }
.pair-sky-aspect--next { opacity: 1; font-size: 11px; }
.pair-sky-gap { fill: none; stroke: var(--color-copper-bright); stroke-width: 1.4; }
.pair-sky-gap-label { fill: var(--color-copper-bright); font-size: 9px; text-anchor: middle; }
.pair-sky-spoke { stroke-width: .8; opacity: .6; }
.pair-sky-spoke--jupiter { stroke: var(--planet-jupiter); }
.pair-sky-spoke--saturn { stroke: #A9A9A9; }
.pair-sky-disc { fill: var(--color-space-black); stroke: rgba(244, 241, 232, .25); stroke-width: .6; }
.pair-sky-planet { font-family: var(--font-symbols) !important; font-size: 11px; text-anchor: middle; fill: currentColor; }
.pair-cycle .planet-color--saturn, .pair-sky-planet.planet-color--saturn { color: #A9A9A9; }
.pair-sky-earth { fill: var(--color-cream-dimmed); }
.pair-line-track { stroke: rgba(244, 241, 232, .22); stroke-width: 3; stroke-linecap: round; }
.pair-line-done { stroke: var(--planet-jupiter); stroke-width: 3; stroke-linecap: round; }
.pair-line-pass { stroke: var(--color-space-black); stroke-width: .8; }
.pair-line-pass--future { fill-opacity: .35; }
.pair-line-glyph { font-family: var(--font-symbols) !important; font-size: 11px; text-anchor: middle; }
.pair-line-half { fill: var(--color-cream-dimmed); font-size: 9px; text-anchor: middle; letter-spacing: .05em; }
.pair-line-year { fill: var(--color-cream-dimmed); font-size: 9px; text-anchor: middle; }
.pair-line-now { fill: var(--color-copper-bright); }
.pair-line-now-label { fill: var(--color-copper-bright); font-size: 8.5px; text-anchor: middle; }

/* The great-conjunction ring under the header (Jes, Telegram #14225). */
.pair-section--top { margin: 0 0 1.5rem; }

/* Dates link to their day on planets.at (Jes, Telegram #14227). */
.pair-conjunctions td { white-space: nowrap; }
.pair-conjunctions .pair-cycle-link a { color: var(--color-cream-dimmed); font-size: .85rem; }

/* A past or future cycle's pointer to the one under way (Jes, Telegram #14235). */
.pair-now--elsewhere a { color: var(--color-copper-bright); }

/* The zodiac on the Jupiter–Saturn diagrams (Jes, Telegram #14279). */
.pair-chart-zone { opacity: .11; }
.pair-chart-zone-glyph { font-family: var(--font-symbols) !important; font-size: 9px; text-anchor: middle; opacity: .75; }
.pair-line-sign { opacity: .55; stroke: #050507; stroke-width: .5; }
.pair-line-sign-glyph { fill: #050507; font-family: var(--font-symbols) !important; font-size: 8.5px; text-anchor: middle; }
.pair-line-sign-planet { font-family: var(--font-symbols) !important; font-size: 10px; text-anchor: middle; fill: currentColor; }

/* The passes and today echoed under the sign rows (Jes, Telegram #14291). */
.pair-line-echo { stroke-width: 1.2; }
.pair-line-echo--now { stroke: var(--color-copper-bright); stroke-width: 1.6; }

/* The "Dates in…" picker on the great-conjunction page, as on the retrograde sites (Jes, Telegram #14285). */
.pair-cycle .mercury-zone-picker { text-align: center; font-size: .8rem; color: var(--color-cream-dimmed); margin-top: 2rem; }
.pair-cycle .mercury-zone-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted rgba(244,241,232,0.45); text-underline-offset: 3px; cursor: pointer; }
.pair-cycle .mercury-zone-button:focus-visible { outline: 2px solid var(--color-copper-bright); outline-offset: 2px; border-radius: 3px; }
.mercury-zone-dialog { width: min(24rem, calc(100vw - 32px)); max-height: 80vh; padding: 1rem; border: 1px solid rgba(224,150,100,0.4); border-radius: 0.9rem; background: #0b0b10; color: var(--color-cream); text-align: left; }
.mercury-zone-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.mercury-zone-form { display: grid; gap: 0.6rem; margin: 0; }
.mercury-zone-dialog-title { margin: 0; font-family: var(--font-display); font-size: 1.2rem; }
.mercury-zone-query { font: 16px var(--font-body); padding: 0.55rem 0.7rem; border-radius: 0.5rem; border: 1px solid rgba(244,241,232,0.25); background: #000; color: var(--color-cream); }
.mercury-zone-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; max-height: 45vh; overflow-y: auto; }
.mercury-zone-place, .mercury-zone-device, .mercury-zone-close { width: 100%; text-align: left; font: 0.9rem var(--font-body); color: var(--color-cream); background: rgba(244,241,232,0.06); border: 0; border-radius: 0.45rem; padding: 0.55rem 0.7rem; cursor: pointer; }
.mercury-zone-place:hover, .mercury-zone-device:hover { background: rgba(224,150,100,0.18); }
.mercury-zone-message { font-size: 0.85rem; color: var(--color-cream-dimmed); padding: 0.3rem 0.2rem; }
.mercury-zone-close { text-align: center; background: none; color: var(--color-cream-dimmed); }

/* The great conjunction's facts, short bits rather than a wall of text (Jes, Telegram #14300). */
.pair-facts { list-style: none; margin: 0 auto 1.1rem; padding: 0; max-width: 32rem; display: grid; gap: .45rem; font-size: .92rem; line-height: 1.4; color: var(--color-cream-dimmed); }
.pair-facts li { padding-left: .8rem; border-left: 2px solid rgba(224, 150, 100, .35); }
.pair-fact-lead { color: var(--color-cream); font-weight: 500; }
.pair-facts .pair-fact-lead.planet-color--jupiter { color: var(--planet-jupiter); }
.pair-facts .pair-fact-lead.planet-color--saturn { color: #A9A9A9; }

/* Natal rows a little dimmer than the sky's, with the natal profile's name
   at the right (Jes, Telegram #14380): a dark wash over the hour colour.
   The ongoing natal transits are boxes (today_natal.css). */
.today-event--natal[style] { background-image: linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)); }
.today-event--natal .today-event-summary > span:last-child { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.today-natal-name { font-style: italic; opacity: 0.8; white-space: nowrap; }
.today-event .today-natal-name { margin-right: 0.75rem; }

/* The lunar and Jupiter mansions at the lunar calendar's size (Jes,
   Telegram #14382): .today-calendar-dates time is 1.05rem, 0.875rem on phones. */
.today-lunar-mansions, .today-jupiter-ci { font-size: 1.05rem; }
@media (max-width: 600px) {
  .today-lunar-mansions, .today-jupiter-ci { font-size: 0.875rem; }
  /* No longer shrunk to fit, so a long Jupiter mansion wraps instead of overflowing. */
  .today-jupiter-ci { white-space: normal; }
}

/* Each dignity bar's one word, in the bar's colour, right above the bar
   (Jes, Telegram #14386, #14387), centred over the bar's sign (#14400). */
.today-zodiac-dignity__word {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.4375rem; /* 7px: a little smaller than 8px, clearer of the glyphs (Jes, Telegram #14405) */
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.today-zodiac-dignity--domicile .today-zodiac-dignity__word { color: #2fbf4a; }
.today-zodiac-dignity--exaltation .today-zodiac-dignity__word { color: #ffd700; }
.today-zodiac-dignity--detriment .today-zodiac-dignity__word { color: #9a9a9a; }
.today-zodiac-dignity--fall .today-zodiac-dignity__word { color: #000; }

/* planets.at/jupiter, a planet's landing page (Jes, Telegram #14709):
   starfield, the planet among its moons, three facts, one word, its chord. */
main:has(> .planet-landing) { padding: 0; display: block; }
.planet-landing {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  padding-block: 18px 28px;
  box-sizing: border-box;
  text-align: center;
  color: #efe6d2;
}
.planet-landing-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.planet-landing > :not(.planet-landing-stars) { position: relative; z-index: 1; }
.planet-landing-home {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: #d8b265;
  text-decoration: none;
  opacity: 0.8;
}
.planet-landing-home:hover, .planet-landing-home:focus-visible { opacity: 1; }
.planet-landing-title {
  margin: 0.6rem 0 0;
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 5.2rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  line-height: 1;
  /* Room under the baseline for the J's descender, inside the clipped
     gradient (Jes, Telegram #14816); the margin keeps the layout. */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  background: linear-gradient(180deg, #fff3d6 0%, #e9c27a 45%, #a8742f 70%, #f1d08c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.planet-landing-sky { width: min(100%, 1100px); height: clamp(220px, min(52vh, 60vw), 620px); display: block; }
.planet-landing-word {
  margin: -0.6rem 0 0.4rem;
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 6.5vw, 3.6rem);
  letter-spacing: 0.04em;
  color: #f3dfb2;
  text-shadow: 0 0 28px rgba(232, 180, 100, 0.35);
}
.planet-landing-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.planet-landing-facts li {
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(216, 178, 101, 0.35);
  border-radius: 999px;
  background: rgba(10, 10, 18, 0.55);
}
.planet-landing-glyph { font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; letter-spacing: 0; line-height: 1; }
.planet-landing-facts li { line-height: 1.3; display: flex; align-items: center; gap: 0.35em; }
.planet-landing-facts .planet-landing-motion--retrograde { color: #FF6B6B; border-color: rgba(255, 107, 107, 0.5); }
.planet-landing-play {
  margin-top: 1.4rem;
  padding: 0.85rem 2.2rem;
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #1a1206;
  background: linear-gradient(180deg, #f6dc9c 0%, #d8a75a 55%, #b9823a 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 230, 170, 0.5) inset, 0 6px 30px rgba(216, 160, 80, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
}
.planet-landing-play:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 230, 170, 0.6) inset, 0 8px 40px rgba(216, 160, 80, 0.45); }
.planet-landing-play:focus-visible { outline: 2px solid #f6dc9c; outline-offset: 4px; }
.planet-landing.is-playing .planet-landing-play { background: linear-gradient(180deg, #3a2a14 0%, #1f160a 100%); color: #f3dfb2; box-shadow: 0 0 0 1px rgba(216, 178, 101, 0.6) inset, 0 0 40px rgba(232, 180, 100, 0.35); }
.planet-landing-tones {
  margin: 0.9rem 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(239, 230, 210, 0.55);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { .planet-landing-play { transition: none; } }

/* planets.at/jupiter: the sign and motion pills are links (Jes, Telegram #14720). */
.planet-landing-facts li:has(> a) { padding: 0; transition: border-color 0.2s ease, background-color 0.2s ease; }
.planet-landing-facts a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.35rem 0.8rem; border-radius: 999px; }
.planet-landing-facts li:has(> a:hover), .planet-landing-facts li:has(> a:focus-visible) { border-color: rgba(216, 178, 101, 0.8); background: rgba(40, 30, 14, 0.7); }
.planet-landing-facts a:focus-visible { outline: 1px solid rgba(216, 178, 101, 0.9); outline-offset: 3px; }

/* planets.at/jupiter: the planet is tappable (Jes, Telegram #14732); no double-tap zoom. */
.planet-landing-sky { touch-action: manipulation; }

/* planets.at/jupiter: the real star field's acknowledgement (Pan-STARRS1, JPL Horizons). */
.planet-landing-credit {
  margin: 0.5rem 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(239, 230, 210, 0.35);
}

/* planets.at/jupiter: a pill per dignity (Jes, Telegram #14788): in it,
   in its debility, or neither (dim, naming where the dignity is). */
.planet-landing-facts .planet-landing-dignity--on { color: #f0c66e; border-color: rgba(240, 198, 110, 0.75); }
.planet-landing-facts .planet-landing-dignity--bad { color: #e8907e; border-color: rgba(232, 144, 126, 0.6); }
.planet-landing-facts .planet-landing-dignity--off { color: rgba(239, 230, 210, 0.42); border-color: rgba(216, 178, 101, 0.18); }

/* planets.at/jupiter: in a lit dignity pill, the signs the planet is not in are grey (Jes, Telegram #14798). */
.planet-landing-dignity .planet-landing-glyph--grey { color: rgba(239, 230, 210, 0.38); }

/* Planet-landing names in tinted brass (Jes, Telegram #14846/#14850): the
   planet's colour as a band of reflected light across the lower brass, on
   the title and the keyword alike. The brass and each planet's tint are
   defined once, in planet_tints.css, shared with the retrograde.observer
   sites (#14893). */
.planet-landing-title,
.planet-landing-word {
  background: var(--planet-tinted-brass, linear-gradient(180deg, #fff3d6 0%, #e9c27a 45%, #a8742f 70%, #f1d08c 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.planet-landing-word {
  /* Room for the italic overhang and descenders inside the clipped
     gradient; the glow moves to a drop-shadow (text-shadow would paint
     through the transparent glyphs). */
  padding: 0 0.1em 0.18em;
  margin-bottom: calc(0.4rem - 0.18em);
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(232, 180, 100, 0.3));
}

/* The planet pages, in Chaldean order, at the foot of each (Jes, Telegram
   #14926): glyph over name, each in its own tinted brass; this page's
   underlined and unlinked; the Sun and Moon faint, as places kept. */
.planet-landing-nav { margin: 2.6rem 0 1.4rem; width: min(100%, 760px); }
.planet-landing-nav ol {
  list-style: none;
  margin: 0;
  padding: 1.1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.9rem 1.9rem;
  border-top: 1px solid rgba(216, 178, 101, 0.18);
}
.planet-landing-nav-item a,
.planet-landing-nav-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-decoration: none;
  padding: 0.2rem 0.3rem 0.35rem;
  border-bottom: 1px solid transparent;
  transition: filter 0.2s ease;
}
.planet-landing-nav-item a:hover,
.planet-landing-nav-item a:focus-visible { filter: brightness(1.25) drop-shadow(0 0 10px rgba(232, 180, 100, 0.35)); }
.planet-landing-nav-current { border-bottom-color: rgba(233, 194, 122, 0.7); }
.planet-landing-nav-glyph,
.planet-landing-nav-name {
  background: var(--planet-tinted-brass, linear-gradient(180deg, #fff3d6 0%, #e9c27a 45%, #a8742f 70%, #f1d08c 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
  padding-bottom: 0.12em;
}
.planet-landing-nav-glyph { font-size: 1.5rem; }
.planet-landing-nav-name {
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
}
.planet-landing-nav-item--luminary { opacity: 0.32; padding-bottom: 1.7rem; }
@media (max-width: 480px) {
  .planet-landing-nav ol { gap: 0.8rem 1.1rem; }
  .planet-landing-nav-name { font-size: 0.92rem; letter-spacing: 0.1em; text-indent: 0.1em; }
}

/* The planet nav sits on the sky, not in the site nav's panel (Jes,
   Telegram, 2026-10-02: "the bg looks bad on my phone"): undo the global
   `nav` and `nav a` rules (gradient, blur, border, padding, scrolling row,
   hover fill and underline) for it. */
nav.planet-landing-nav {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  padding: 0;
  display: block;
  overflow: visible;
}
nav.planet-landing-nav a {
  font: inherit;
  letter-spacing: normal;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0.2rem 0.3rem 0.35rem;
  background: none;
}
nav.planet-landing-nav a::after { content: none; }
nav.planet-landing-nav a:hover { background: none; }
/* Glyphs in plain brass; only the names carry the planet's colour (Jes,
   Telegram, 2026-10-02). The tint resolves on the glyph itself. */
.planet-landing-nav-glyph { --planet-tint: transparent; }

/* No rule above the planet nav (Jes, Telegram, 2026-10-02). */
.planet-landing-nav ol { border-top: 0; padding-top: 0; }

/* sunstarsol.us and mene.ing, the Sun's and Moon's landing pages (Jes,
   Telegram, 2026-10-02; LuminaryController): the planet-landing page, with
   a line under the chord saying what it is. */
.luminary-landing-note {
  margin: 0.35rem auto 0;
  max-width: 34rem;
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(239, 230, 210, 0.5);
}

/* The planet nav's faint box was the global `nav` box-shadow, which the
   reset above missed (#284 review): none on the sky either. */
nav.planet-landing-nav { box-shadow: none; }

/* planets.at/aries … /pisces, a page per sign (Jes, Telegram, 2026-10-02;
   ZodiacSignController): the planet-landing page, with the sign's name
   over its glyph, a strip of its sky, its modality and element, its pills,
   who is in it now, the Sun's dates, and the twelve-sign nav. */
.sign-landing-glyph {
  margin-top: 0.35rem;
  font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  padding-bottom: 0.08em;
  /* Plain brass, as the nav's glyphs. */
  --planet-tint: transparent;
  background: var(--planet-tinted-brass);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The longer names (Sagittarius, Capricorn) fit a phone. */
.sign-landing .planet-landing-title { margin-top: 0.6rem; font-size: clamp(2rem, 7.4vw, 5rem); letter-spacing: 0.24em; text-indent: 0.24em; max-width: 100%; }
.sign-landing .planet-landing-word { margin: -0.2rem 0 0.7rem; font-size: clamp(1.7rem, 5vw, 2.8rem); }
.sign-landing-sky { height: clamp(260px, min(46vh, 58vw), 520px); margin: 0.6rem 0 0.4rem; touch-action: auto; }
.sign-landing-facts { max-width: 920px; }
/* A dignity's pill links only its planet, inside the pill's own padding. */
.sign-landing-facts li.sign-landing-dignity { padding: 0 0 0 0.8rem; }
.sign-landing-facts .sign-landing-dignity a { padding-left: 0.1rem; }
.sign-landing-here { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.sign-landing-label,
.sign-landing-none {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 230, 210, 0.6);
}
.sign-landing-none { font-size: 0.8rem; letter-spacing: 0.1em; color: rgba(239, 230, 210, 0.7); }
.sign-landing-bodies .sign-landing-body { color: #f3dfb2; border-color: rgba(216, 178, 101, 0.55); font-variant-numeric: tabular-nums; }
.sign-landing-bodies .sign-landing-body--retrograde { color: #FF6B6B; border-color: rgba(255, 107, 107, 0.5); }
.sign-landing-sun {
  margin: 1.3rem 0 0;
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.25rem;
  color: #f3dfb2;
}
.sign-landing-sun a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(216, 178, 101, 0.45); }
.sign-landing-sun a:hover, .sign-landing-sun a:focus-visible { border-bottom-color: rgba(216, 178, 101, 0.95); }
.sign-landing-note { margin-top: 0.8rem; }
/* Twelve signs: closer set than the seven planets. */
.sign-landing-nav ol { gap: 0.8rem 1.3rem; }
@media (max-width: 480px) {
  .sign-landing-nav ol { gap: 0.7rem 0.9rem; }
  .sign-landing-nav .planet-landing-nav-name { font-size: 0.8rem; letter-spacing: 0.08em; text-indent: 0.08em; }
}

/* The planet, sign, Sun and Moon pages scroll the document, not an inner
   <main> (Jes, Telegram, 2026-10-02: "two nested scroll areas?"): the
   layout's 100vh box with main overflow:auto made an inner scroller, as it
   did for /today and /jupiter/saturn (#14209). The page still fills the
   screen when it is shorter. */
body:has(.planet-landing) .layout {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}
body:has(.planet-landing) main {
  overflow: visible;
}
body:has(.planet-landing) .planet-landing {
  min-height: 100vh;
  min-height: 100dvh;
}

/* planets.at/aries/1 … /pisces/3, a page per decan (Jes, Telegram,
   2026-10-02; ZodiacDecanController), on the sign page's frame: the
   decan's name over its sign's glyph and degrees, a closer strip of sky
   with its bounds under the line, its face, its rulers and bounds as
   pills, its Golden Dawn card in the sign's tinted brass, who is in it
   now, the Sun's dates, its stars, mansions and nakṣatras, and the
   neighbouring decans over the twelve signs. */
.decan-landing-sign { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; }
.decan-landing-sign:hover .decan-landing-degrees,
.decan-landing-sign:focus-visible .decan-landing-degrees { color: rgba(243, 223, 178, 0.95); }
.decan-landing-degrees {
  margin-top: 0.1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 230, 210, 0.6);
}
.decan-landing-sky { max-width: 1100px; height: clamp(300px, min(52vh, 80vw), 560px); }
.decan-landing-rulers li.decan-landing-bound { padding-right: 0.8rem; }
.decan-landing-span { color: rgba(239, 230, 210, 0.6); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.decan-landing-card { margin: 1.6rem 0 0; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
/* The card's line art (black on clear) as a mask over the tinted brass. */
.decan-landing-card-art {
  width: clamp(150px, 22vw, 210px);
  aspect-ratio: 500 / 878;
  background: var(--planet-tinted-brass);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-mask: var(--decan-card) center / contain no-repeat;
  mask: var(--decan-card) center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(233, 194, 122, 0.18));
}
.decan-landing-card figcaption { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.decan-landing-card-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 230, 210, 0.7);
}
.decan-landing-card-title { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 1.2rem; color: #f3dfb2; }
.decan-landing-overlaps {
  margin: 1.6rem auto 0;
  padding: 0 1rem;
  max-width: 760px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.2rem;
  align-items: baseline;
}
.decan-landing-overlap { display: contents; }
.decan-landing-overlaps dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 230, 210, 0.55);
  text-align: right;
}
.decan-landing-overlaps dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-size: 1.12rem; color: #f3dfb2; }
.decan-landing-item .decan-landing-span { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; margin-left: 0.2rem; }
.decan-landing-number { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: rgba(239, 230, 210, 0.5); }
.decan-landing-item--none { color: rgba(239, 230, 210, 0.5); font-style: italic; }
.decan-landing-nav + .sign-landing-nav { margin-top: 1.2rem; opacity: 0.8; }
.decan-landing-nav-item--previous, .decan-landing-nav-item--following { opacity: 0.7; }
.sign-landing-decans { margin-top: 1.1rem; }
@media (max-width: 480px) {
  .decan-landing-overlaps { grid-template-columns: 1fr; gap: 0.2rem; text-align: center; }
  .decan-landing-overlaps dt { text-align: center; margin-top: 0.6rem; }
  .decan-landing-overlaps dd { justify-content: center; }
}

/* Decan pages on sunstarsol.us (Jes, 2026-10-03): the sign's glyph and the
   face's side by side under the name; the card's two titles, the deck's and
   the Golden Dawn's; the stars, mansions, nakṣatras and xiù a tight line
   each; and a previous/next nav (also on the sign pages), round the zodiac. */
.decan-landing-glyphs { display: flex; justify-content: center; align-items: baseline; gap: 0.7rem; }
.decan-landing-glyph { text-decoration: none; transition: filter 0.2s ease; }
.decan-landing-glyph:hover, .decan-landing-glyph:focus-visible { filter: brightness(1.25) drop-shadow(0 0 10px rgba(232, 180, 100, 0.35)); }
a.decan-landing-degrees { text-decoration: none; }
a.decan-landing-degrees:hover, a.decan-landing-degrees:focus-visible { color: rgba(243, 223, 178, 0.95); }
.decan-landing .decan-landing-sky { height: clamp(320px, min(56vh, 92vw), 600px); }
.decan-landing-card figcaption { gap: 0.2rem; }
.decan-landing-card-title { line-height: 1.25; text-align: center; }
.decan-landing-card-title--golden-dawn { font-size: 1.02rem; color: rgba(243, 223, 178, 0.78); }
.decan-landing-card-source {
  margin-left: 0.3rem;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(239, 230, 210, 0.45);
  white-space: nowrap;
}
.decan-landing-overlaps {
  margin-top: 1.3rem;
  max-width: 640px;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: 5.6rem 1fr;
  gap: 0.35rem 0.8rem;
  text-align: left;
}
.decan-landing-overlaps dt { font-size: 0.6rem; letter-spacing: 0.14em; text-align: right; margin: 0; line-height: 1.9; }
.decan-landing-overlaps dd { gap: 0.05rem 0.9rem; font-size: 1rem; line-height: 1.35; justify-content: flex-start; }
.decan-landing-overlaps .decan-landing-item { white-space: nowrap; }
.decan-landing-overlaps .decan-landing-item .decan-landing-span { font-size: 0.64rem; margin-left: 0.1rem; }
@media (max-width: 480px) {
  .decan-landing-overlaps { grid-template-columns: 4.4rem 1fr; gap: 0.35rem 0.6rem; text-align: left; padding: 0 0.6rem; }
  .decan-landing-overlaps dt { text-align: right; margin-top: 0; }
  .decan-landing-overlaps dd { justify-content: flex-start; font-size: 0.95rem; }
}
/* The step nav sits on the sky: undo the global `nav` and `nav a` rules. */
nav.zodiac-step-nav {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  margin: 2.4rem auto 0;
  padding: 0 0.6rem;
  width: min(100%, 760px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 0.8rem;
}
nav.zodiac-step-nav--up { grid-template-columns: 1fr auto 1fr; }
nav.zodiac-step-nav a {
  font: inherit;
  letter-spacing: normal;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  padding: 0.2rem 0.3rem 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  transition: filter 0.2s ease;
}
nav.zodiac-step-nav a::after { content: none; }
nav.zodiac-step-nav a:hover { background: none; }
nav.zodiac-step-nav a:hover, nav.zodiac-step-nav a:focus-visible { filter: brightness(1.25) drop-shadow(0 0 10px rgba(232, 180, 100, 0.35)); }
.zodiac-step-link--previous { align-items: flex-start; justify-self: start; text-align: left; }
.zodiac-step-link--up { align-items: center; justify-self: center; opacity: 0.85; }
.zodiac-step-link--following { align-items: flex-end; justify-self: end; text-align: right; }
.zodiac-step-glyphs,
.zodiac-step-name {
  background: var(--planet-tinted-brass);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
  padding-bottom: 0.12em;
  white-space: nowrap;
}
.zodiac-step-glyphs { --planet-tint: transparent; font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; font-size: 1.4rem; letter-spacing: 0.1em; }
.zodiac-step-name {
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.zodiac-step-nav + .sign-landing-nav { margin-top: 1.4rem; }
/* A sign's decans as face links: each pill whole, wrapping between pills. */
.sign-landing-decans a { white-space: nowrap; }
@media (max-width: 480px) {
  .zodiac-step-glyphs { font-size: 1.2rem; }
  .zodiac-step-name { font-size: 0.86rem; letter-spacing: 0.08em; }
  .sign-landing-decans { gap: 0.45rem; }
}

/* ── Lunar mansions on mene.ing (PROTOTYPE, LunarMansionController) ── */
.mansion-landing [lang="ar"] { font-family: 'Noto Naskh Arabic', 'Amiri', serif; }
.mansion-landing [lang="sa"], .planet-landing-mansion [lang="sa"] { font-family: 'Noto Serif Devanagari', serif; }
.mansion-landing [lang="zh-Hant"], .planet-landing-mansion [lang="zh-Hant"] { font-family: 'Noto Serif TC', 'Songti TC', serif; }
.planet-landing-mansion [lang="ar"] { font-family: 'Noto Naskh Arabic', 'Amiri', serif; }
/* The three-way system switch: a quiet segmented line, not the site nav. */
nav.mansion-switch {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  margin: 0.9rem auto 0;
  display: inline-flex;
  gap: 0;
  border: 1px solid rgba(216, 178, 101, 0.3);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
nav.mansion-switch .mansion-switch-item { padding: 0.35rem 0.9rem; color: rgba(239, 230, 210, 0.62); text-decoration: none; border: 0; border-radius: 999px; font-family: inherit; font-size: inherit; font-weight: 400; letter-spacing: inherit; }
nav.mansion-switch a.mansion-switch-item::after { display: none; }
nav.mansion-switch a.mansion-switch-item:hover, nav.mansion-switch a.mansion-switch-item:focus-visible { color: #f3dfb2; background: rgba(216, 178, 101, 0.1); }
nav.mansion-switch .mansion-switch-item--current { color: #10121a; background: var(--planet-tint, #c4cede); }
.mansion-landing-script { margin: 1rem 0 0; font-size: clamp(3rem, 13vw, 6rem); line-height: 1.15; font-weight: 500; }
.mansion-landing--manazil .mansion-landing-script { line-height: 1.5; }
.mansion-landing .mansion-landing-title { font-size: clamp(1.5rem, 6vw, 3rem); letter-spacing: 0.16em; text-indent: 0.16em; margin-top: 0.2rem; }
.mansion-landing-number { margin: 0.7rem 0 0; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(239, 230, 210, 0.75); }
.mansion-landing-number a { color: var(--planet-tint, #c4cede); text-decoration: none; font-size: 1.1rem; }
.mansion-landing-of { color: rgba(239, 230, 210, 0.45); }
.mansion-landing-degrees { margin-top: 0.35rem; }
.mansion-landing-sign-glyph { font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; letter-spacing: 0; }
.mansion-landing .mansion-landing-sky { height: clamp(300px, min(52vh, 88vw), 560px); }
.mansion-landing-pills { max-width: 52rem; }
.mansion-landing-pills .mansion-landing-letter { font-size: 1.15rem; line-height: 1; text-transform: none; }
.mansion-landing-pills [lang="sa"], .mansion-landing-pills [lang="zh-Hant"] { text-transform: none; letter-spacing: 0.05em; font-size: 1rem; }
.mansion-landing-pills .decan-landing-span { text-transform: none; }
.mansion-landing-moon { max-width: 40rem; line-height: 1.4; }
.mansion-landing-moon--here { color: #f6efe0; text-shadow: 0 0 18px rgba(196, 206, 222, 0.4); }
.mansion-landing-moon time { white-space: nowrap; }
.mansion-landing-overlaps a.decan-landing-item { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(216, 178, 101, 0.25); }
.mansion-landing-overlaps a.decan-landing-item:hover, .mansion-landing-overlaps a.decan-landing-item:focus-visible { border-bottom-color: rgba(216, 178, 101, 0.9); }
.decan-landing-overlaps a.decan-landing-item { color: inherit; text-decoration: none; }
.decan-landing-overlaps a.decan-landing-item .decan-landing-name { border-bottom: 1px solid rgba(216, 178, 101, 0.3); }
.decan-landing-overlaps a.decan-landing-item:hover .decan-landing-name, .decan-landing-overlaps a.decan-landing-item:focus-visible .decan-landing-name { border-bottom-color: rgba(216, 178, 101, 0.9); }
.mansion-landing-note { max-width: 40rem; }
/* An index: one row per mansion, the Moon's lit. */
.mansion-index-list { list-style: none; margin: 1.6rem auto 0; padding: 0; width: min(100%, 44rem); display: flex; flex-direction: column; gap: 0.15rem; text-align: left; }
.mansion-index-item a {
  display: grid;
  grid-template-columns: 2rem 4.6rem 1fr auto;
  grid-template-areas: "number script name span" "number script meaning span";
  align-items: center;
  column-gap: 0.8rem;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  color: #efe6d2;
  text-decoration: none;
  border: 1px solid transparent;
}
.mansion-index-item a:hover, .mansion-index-item a:focus-visible { background: rgba(40, 30, 14, 0.55); border-color: rgba(216, 178, 101, 0.35); }
.mansion-index-number { grid-area: number; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: rgba(239, 230, 210, 0.5); text-align: right; }
.mansion-index-script { grid-area: script; font-size: 1.6rem; line-height: 1.2; color: #f3dfb2; text-align: center; }
.mansion-index-name { grid-area: name; font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-size: 1.25rem; color: #f3dfb2; line-height: 1.1; }
.mansion-index-meaning { grid-area: meaning; font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 0.95rem; color: rgba(239, 230, 210, 0.6); }
.mansion-index-span { grid-area: span; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: rgba(239, 230, 210, 0.6); white-space: nowrap; text-align: right; }
.mansion-index-moon { grid-area: span; align-self: start; justify-self: end; margin-top: -0.2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #10121a; background: var(--planet-tint, #c4cede); border-radius: 999px; padding: 0.05rem 0.45rem; }
.mansion-index-item--here a { background: rgba(196, 206, 222, 0.1); border-color: rgba(196, 206, 222, 0.5); }
.mansion-index-item--here .mansion-index-span { align-self: end; }
@media (max-width: 480px) {
  .mansion-index-item a { grid-template-columns: 1.4rem 3.2rem 1fr; grid-template-areas: "number script name" "number script meaning" "number script span"; column-gap: 0.6rem; padding: 0.45rem 0.4rem; }
  .mansion-index-script { font-size: 1.3rem; }
  .mansion-index-span { text-align: left; }
  .mansion-index-moon { grid-area: name; }
  .mansion-landing .mansion-landing-title { letter-spacing: 0.1em; text-indent: 0.1em; }
  nav.mansion-switch { font-size: 0.66rem; letter-spacing: 0.08em; }
  nav.mansion-switch .mansion-switch-item { padding: 0.35rem 0.7rem; }
}
/* The Moon's page: its mansions, a pill each. */
.planet-landing-facts .planet-landing-mansion [lang] { text-transform: none; letter-spacing: 0.02em; font-size: 1rem; line-height: 1; }
.planet-landing-facts .planet-landing-mansion a { text-transform: none; letter-spacing: 0.04em; }

/* Lunar mansion indexes (PROTOTYPE): a script column wide enough for the
   longest nakṣatra (उत्तराषाढ़ा) and the two-word manāzil, wrapping if need be. */
.mansion-index-item a { grid-template-columns: 2rem 7.5rem 1fr auto; }
.mansion-index-script { font-size: 1.35rem; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .mansion-index-item a { grid-template-columns: 1.3rem 5.6rem 1fr; }
  .mansion-index-script { font-size: 1.05rem; }
}

/* The mansion system switch (PROTOTYPE) stays one row on wide screens,
   where the global nav turns into a sidebar column. */
nav.mansion-switch { flex-direction: row; width: auto; padding: 0; border-right: 0; border: 1px solid rgba(216, 178, 101, 0.3); background: none; }
nav.mansion-switch .mansion-switch-item { padding: 0.35rem 0.9rem; font-size: inherit; }
@media (max-width: 480px) { nav.mansion-switch .mansion-switch-item { padding: 0.35rem 0.7rem; } }
.mansion-landing .mansion-landing-script { margin-top: 1.5rem; }

/* Lunar mansions (PROTOTYPE), round 2: groupings, pādas, named pills, bodies. */
.mansion-landing-group { margin: 0.5rem 0 0; font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-size: 1.1rem; color: rgba(243, 223, 178, 0.88); line-height: 1.4; max-width: 34rem; }
.mansion-landing-group em { color: rgba(239, 230, 210, 0.7); }
.mansion-landing-group .decan-landing-span { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; white-space: nowrap; }
.mansion-landing-group-item { white-space: nowrap; }
.mansion-landing-group [lang="sa"], .mansion-landing-group [lang="zh-Hant"] { font-size: 1.05rem; }
.mansion-landing-pills .mansion-landing-pill--named { text-transform: none; letter-spacing: 0; gap: 0.4em; flex-wrap: wrap; justify-content: center; }
.mansion-pill-label { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(239, 230, 210, 0.6); }
.mansion-pill-name { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 1.12rem; color: #f3dfb2; letter-spacing: 0.01em; }
.mansion-pill-name a { padding: 0; font-style: italic; }
.mansion-pill-gloss { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-size: 0.98rem; color: rgba(239, 230, 210, 0.66); letter-spacing: 0.01em; }
.mansion-landing-padas { list-style: none; margin: 1.1rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; width: min(100%, 46rem); }
.mansion-landing-pada { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.12rem; padding: 0.55rem 0.4rem 0.5rem; border: 1px solid rgba(216, 178, 101, 0.25); border-radius: 10px; background: rgba(10, 10, 18, 0.5); }
.mansion-landing-pada--rashi { border-left: 2px solid rgba(233, 194, 122, 0.8); }
.mansion-landing-pada--moon { border-color: rgba(222, 228, 240, 0.75); background: rgba(196, 206, 222, 0.12); box-shadow: 0 0 18px rgba(196, 206, 222, 0.18); }
.mansion-landing-pada-rashi { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; color: #f0c66e; white-space: nowrap; }
.mansion-landing-pada-number { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(239, 230, 210, 0.6); }
.mansion-landing-pada-moon { color: #eef2fa; font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; }
.mansion-landing-pada-syllable { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 1.1rem; color: #f3dfb2; white-space: nowrap; }
.mansion-landing-pada-syllable [lang="sa"] { font-style: normal; font-size: 1.25rem; }
.mansion-landing-pada-span { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: rgba(239, 230, 210, 0.62); white-space: nowrap; }
.mansion-landing-pada-navamsa { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(239, 230, 210, 0.55); }
.mansion-landing-pada-navamsa .mansion-landing-sign-glyph { font-size: 0.95rem; color: #f3dfb2; }
@media (max-width: 560px) {
  .mansion-landing-padas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mansion-landing-here { margin-top: 1rem; }
.mansion-index-group { margin: 1.6rem auto 0.2rem; width: min(100%, 44rem); text-align: left; padding: 0 0.8rem 0.25rem; border-bottom: 1px solid rgba(216, 178, 101, 0.22); font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-weight: 500; font-size: 1.2rem; color: #f0c66e; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.45rem; }
.mansion-index-group em { font-size: 1rem; color: rgba(239, 230, 210, 0.66); }
.mansion-index-group-span { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; color: rgba(239, 230, 210, 0.55); }
.mansion-index-group + .mansion-index-list { margin-top: 0.3rem; }
.mansion-index-onward { font-size: 0.85rem; color: rgba(240, 198, 110, 0.85); white-space: nowrap; }
@media (max-width: 480px) {
  .mansion-index-group { padding: 0 0.4rem 0.25rem; font-size: 1.1rem; }
  .mansion-index-group-span { margin-left: 0; width: 100%; }
}

/* Lunar mansions (PROTOTYPE), round 3: "mene.ing/" over the name as the
   address; the script a secondary line under it; the switch under the span. */
.mansion-landing .mansion-landing-title { margin-top: 0.15rem; font-size: clamp(1.9rem, 8vw, 4rem); letter-spacing: 0.2em; text-indent: 0.2em; }
.mansion-landing .mansion-landing-script { margin: 0.55rem 0 0; font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.25; opacity: 0.92; }
.mansion-landing--manazil .mansion-landing-script { line-height: 1.6; }
.mansion-landing .mansion-switch { margin: 0.9rem auto 0.2rem; }
.mansion-landing .mansion-landing-number { margin-top: 0.35rem; }
@media (max-width: 480px) {
  .mansion-landing .mansion-landing-title { letter-spacing: 0.12em; text-indent: 0.12em; }
}
/* A named pill (lord, deity) flows as one line of text, wrapping as prose, not as flex items. */
.mansion-landing-pills li.mansion-landing-pill--named { display: block; text-align: center; line-height: 1.45; border-radius: 18px; max-width: 100%; }
.mansion-landing-pills li.mansion-landing-pill--named .mansion-pill-name a { display: inline; }
.mansion-landing-pada { padding: 0.4rem 0.35rem; gap: 0.05rem; }

/* Lunar mansions (PROTOTYPE), round 4: the deck's glyphs (Jes: "use the glyph
   system from tarot"), one character in a thin brass circle, the ordinal beside. */
.mansion-glyph-group { display: inline-flex; align-items: center; gap: 0.18em; white-space: nowrap; vertical-align: middle; }
.mansion-glyph { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 1.75em; height: 1.75em; border: 1px solid rgba(233, 194, 122, 0.7); border-radius: 50%; font-size: 1em; line-height: 1; color: #f3dfb2; font-style: normal; letter-spacing: 0; text-transform: none; }
.mansion-glyph--manazil { font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', serif; padding-bottom: 0.12em; }
.mansion-glyph--nakshatra { font-family: 'Noto Serif Devanagari', serif; padding-bottom: 0.08em; }
.mansion-glyph--xiu { font-family: 'Noto Serif TC', 'Songti TC', serif; }
.mansion-glyph-ordinal { font-family: 'JetBrains Mono', monospace; font-size: 0.62em; letter-spacing: 0; color: rgba(239, 230, 210, 0.7); font-style: normal; }
.mansion-glyph-group--large { font-size: clamp(2.4rem, 10vw, 3.6rem); gap: 0.12em; }
.mansion-glyph-group--large .mansion-glyph { border-color: rgba(233, 194, 122, 0.8); box-shadow: 0 0 22px rgba(232, 180, 100, 0.18); }
.mansion-glyph-group--large .mansion-glyph-ordinal { font-size: 0.34em; align-self: flex-end; margin-bottom: 0.2em; }
.mansion-glyph-group--small { font-size: 0.86em; }
.mansion-landing-glyphs { margin: 0.7rem 0 0; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.mansion-landing-moon-glyph { font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; font-size: clamp(2rem, 8vw, 3rem); text-decoration: none; line-height: 1; }
.mansion-landing .mansion-landing-script { margin: 0.45rem 0 0; font-size: clamp(1.15rem, 4.5vw, 1.5rem); line-height: 1.3; color: rgba(243, 223, 178, 0.8); opacity: 1; }
.mansion-landing--manazil .mansion-landing-script { line-height: 1.6; }
.mansion-landing .mansion-landing-number { margin-top: 0.3rem; }
.zodiac-step-glyphs .mansion-glyph-group { font-size: 0.85em; }
/* Index rows: the circled glyph and ordinal, then the name; the full script name after the meaning. */
.mansion-index-item a { grid-template-columns: 4.4rem 1fr auto; grid-template-areas: "script name span" "script meaning span"; }
.mansion-index-script { font-size: 1.45rem; text-align: left; }
.mansion-index-native { font-style: normal; font-size: 0.95rem; color: rgba(243, 223, 178, 0.75); }
@media (max-width: 480px) {
  .mansion-index-item a { grid-template-columns: 3.6rem 1fr; grid-template-areas: "script name" "script meaning" "script span"; }
  .mansion-index-script { font-size: 1.2rem; }
}
.planet-landing-facts .planet-landing-mansion .mansion-glyph-group { font-size: 1rem; }
.decan-landing-overlaps .mansion-glyph-group--small, .mansion-landing-overlaps .mansion-glyph-group--small { font-size: 0.78rem; margin-right: 0.1rem; }
.decan-landing-overlaps a.decan-landing-item .mansion-glyph-group .mansion-glyph-ordinal { border: 0; }
.mansion-landing-pada-syllable { display: inline-flex; align-items: center; gap: 0.3em; }
.mansion-landing-pada-syllable .mansion-glyph { font-size: 1.05rem; }
a.mansion-landing-moon-glyph, a.mansion-landing-moon-glyph:visited { color: var(--planet-tint, #c4cede); text-shadow: 0 0 18px rgba(196, 206, 222, 0.35); }
.planet-landing-facts .planet-landing-mansion .mansion-glyph-group { font-size: 0.78rem; }
.planet-landing-facts .planet-landing-mansion a { padding-block: 0.25rem; }
/* planets.at/<sign>: the decans' faces as one pill, "faces ♄ ♃ ♂" (Jes,
   Telegram, 2026-10-03), each glyph a link, the Sun's decan lit. */
.planet-landing-facts li.sign-landing-faces { padding: 0.2rem 0.45rem 0.2rem 0.85rem; gap: 0.1rem; }
.sign-landing-faces-word { margin-right: 0.35rem; }
.planet-landing-facts a.sign-landing-face { padding: 0.15rem 0.5rem; font-size: 1.15em; color: rgba(239, 230, 210, 0.82); }
.planet-landing-facts a.sign-landing-face:hover, .planet-landing-facts a.sign-landing-face:focus-visible { color: #f3dfb2; background: rgba(40, 30, 14, 0.7); }
.planet-landing-facts a.sign-landing-face--on { color: #f0c66e; box-shadow: inset 0 0 0 1px rgba(240, 198, 110, 0.75); }

/* Decan pages: the card caption in four lines (Jes, Telegram, 2026-10-03):
   the deck's title, the card, the Golden Dawn title, and its label. */
.decan-landing-card-title--deck { font-size: 1.3rem; }
.decan-landing-card figcaption .decan-landing-card-name { margin: 0.1rem 0 0.25rem; }
.decan-landing-card figcaption > .decan-landing-card-source { margin-left: 0; }

/* Lunar mansions (PROTOTYPE), round 5: one glyph unit everywhere, the circle
   with its number centred under it (Jes: "the numbers floating centered under
   each one"). */
.mansion-glyph-group { display: inline-flex; flex-direction: column; align-items: center; gap: 0.12em; line-height: 1; }
.mansion-glyph-ordinal { font-size: 0.5em; line-height: 1; }
.mansion-glyph-group--large { gap: 0.08em; }
.mansion-glyph-group--large .mansion-glyph-ordinal { font-size: 0.26em; align-self: center; margin: 0.15em 0 0; }
.mansion-glyph-group--small .mansion-glyph-ordinal { font-size: 0.6em; }
.mansion-landing-glyphs { align-items: flex-start; }
.mansion-landing-moon-glyph { margin-top: 0.35em; }
/* The Moon's page: the three circles in a row, no pills, no names. */
nav.luminary-landing-mansions { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; overflow: visible; padding: 0; width: auto;
  margin: 1rem auto 0.2rem; display: flex; flex-direction: row; justify-content: center; gap: 1.4rem; }
nav.luminary-landing-mansions a.planet-landing-mansion { padding: 0.2rem; border: 0; font-size: 1.35rem; text-decoration: none; color: inherit; border-radius: 12px; }
nav.luminary-landing-mansions a.planet-landing-mansion::after { display: none; }
nav.luminary-landing-mansions a.planet-landing-mansion:hover .mansion-glyph, nav.luminary-landing-mansions a.planet-landing-mansion:focus-visible .mansion-glyph { background: rgba(40, 30, 14, 0.7); border-color: rgba(240, 198, 110, 0.95); }
nav.luminary-landing-mansions a.planet-landing-mansion:hover { background: none; }
.zodiac-step-glyphs .mansion-glyph-group { font-size: 0.8em; }
.mansion-landing-overlaps .mansion-glyph-group--small, .decan-landing-overlaps .mansion-glyph-group--small { vertical-align: middle; margin-right: 0.15rem; }

/* Lunar mansions (PROTOTYPE), round 6: pinyin in Crimson Pro, which sets the
   tone marks Cormorant misplaces; the Kufi alif-hamza nudged down to the
   circle's optical centre. */
.mansion-pinyin { font-family: 'Crimson Pro', Georgia, serif; font-style: normal; font-size: 0.94em; letter-spacing: 0; }
.mansion-glyph--manazil { padding-bottom: 0; }
.mansion-glyph--tall { padding-top: 0.22em; }
.mansion-glyph.mansion-glyph--tall { padding-top: 0.42em; }

/* Glyphs stand upright inside italic names (Jes, Telegram, 2026-10-03:
   "Lord (symbol) looks funny with an italicized symbol"): the planet,
   node and sign glyphs, and the deck's circled characters. */
.mansion-landing .planet-landing-glyph,
.mansion-landing .mansion-landing-sign-glyph,
.mansion-landing .mansion-glyph,
.mansion-index .planet-landing-glyph,
.mansion-index .mansion-glyph { font-style: normal; font-synthesis: none; }
.mansion-pill-name .planet-landing-glyph { font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; margin-right: 0.15em; }

/* PROTOTYPE (2026-10-03): planets.at/rasi/<slug> and /ci/<slug>, the sign
   page's design with the mansion pages' parts (RasiCiController); the
   sidereal line on the sign pages; mene.ing's rāśi and cì labels as links. */
.rasi-ci-glyphs { margin: 0.6rem 0 0; display: flex; align-items: baseline; justify-content: center; gap: 0.7rem; line-height: 1.1; }
.rasi-ci-glyphs .rasi-ci-sign-glyph { font-size: clamp(2.6rem, 11vw, 4rem); margin: 0; font-style: normal; }
.rasi-ci-script { font-family: 'Noto Serif Devanagari', 'Noto Serif TC', serif; font-style: normal; font-weight: 500; font-size: clamp(1.6rem, 7vw, 2.4rem); color: rgba(243, 223, 178, 0.88); }
.rasi-ci-script[lang="zh-Hant"] { font-family: 'Noto Serif TC', serif; }
.rasi-ci-glyphs .rasi-ci-script--hanzi { font-size: clamp(2.6rem, 12vw, 4.2rem); letter-spacing: 0.08em; }
.rasi-ci-meaning { margin: 0.2rem 0 0; font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: clamp(1.1rem, 4.5vw, 1.4rem); color: rgba(239, 230, 210, 0.75); }
.rasi-ci-upright, .rasi-ci-landing .mansion-landing-sign-glyph, .rasi-ci-landing .planet-landing-glyph, .rasi-ci-landing .mansion-glyph,
.rasi-ci-index .rasi-ci-sign-glyph, .rasi-ci-index [lang="zh-Hant"], .rasi-ci-index [lang="sa"] { font-style: normal; font-synthesis: none; }
.rasi-ci-landing .rasi-ci-title .mansion-pinyin { font-size: 1em; }
.rasi-ci-stay { margin-top: 0.35rem; }
.rasi-ci-landing .rasi-ci-stay + .rasi-ci-stay { margin-top: 0.15rem; }
.rasi-ci-overlaps .mansion-landing-sign-glyph { font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; }
.rasi-ci-padas { font-style: normal; }
.zodiac-step-glyphs .rasi-ci-step-script { font-family: 'Noto Serif TC', serif; font-style: normal; }
/* Index rows: the sign glyph or the hanzi, its number under it. */
.rasi-ci-index-glyph { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1em; line-height: 1; }
.rasi-ci-index-glyph .rasi-ci-sign-glyph { font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; font-size: 1.5rem; }
.rasi-ci-index-glyph [lang="zh-Hant"] { font-family: 'Noto Serif TC', serif; font-size: 1.35rem; letter-spacing: 0.04em; }
.rasi-ci-index-glyph .mansion-glyph-ordinal { font-size: 0.6rem; }
.rasi-ci-index .mansion-index-item--here a { background: rgba(216, 178, 101, 0.08); border-color: rgba(216, 178, 101, 0.45); }
.rasi-ci-index .rasi-ci-index-now { font-family: 'Noto Sans Symbols', 'JetBrains Mono', sans-serif; letter-spacing: 0.06em; }
nav.rasi-ci-switch { margin: 0.8rem auto 0; box-shadow: none; }
/* planets.at/<sign>: one small line naming the rāśis it overlaps. */
.sign-landing-sidereal { margin: 0.6rem 0 0; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(239, 230, 210, 0.55); }
.sign-landing-sidereal a { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 1.05rem; letter-spacing: 0; color: #f0c66e; text-decoration: none; }
.sign-landing-sidereal a:hover, .sign-landing-sidereal a:focus-visible { text-decoration: underline; }
/* mene.ing: the rāśi and cì labels open their planets.at pages. */
a.mansion-group-label { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(240, 198, 110, 0.35); }
a.mansion-group-label:hover, a.mansion-group-label:focus-visible { border-bottom-color: rgba(240, 198, 110, 0.9); color: #f3dfb2; }
a.mansion-group-label .mansion-landing-sign-glyph, a.mansion-group-label [lang] { font-style: normal; }

/* planets.at/rasi/<slug>: the Devanāgarī on its own line, the sign glyph
   under it at the nav glyph's size; planets.at/ci/<slug>: the quarter's
   hanzi over its English (Jes, 2026-10-03). */
.rasi-ci-landing .rasi-ci-script--deva { font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1.2; }
.rasi-ci-glyph-line { margin: 0.15rem 0 0; line-height: 1; }
.rasi-ci-glyph-line .rasi-ci-sign-glyph { font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; font-size: 1.5rem; font-style: normal; font-synthesis: none; }
.rasi-ci-symbol-script { margin: 0.6rem 0 0; font-family: 'Noto Serif TC', serif; font-style: normal; font-weight: 500; font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.2; color: rgba(243, 223, 178, 0.88); }
.rasi-ci-landing .rasi-ci-symbol-script + .rasi-ci-symbol { margin-top: 0.1rem; }
.rasi-ci-landing .rasi-ci-script-line { margin-top: 0.35rem; }
.rasi-ci-landing .rasi-ci-glyph-line { margin-top: 0; }
.rasi-ci-landing .rasi-ci-glyph-line .sign-landing-glyph { display: inline-block; margin: 0; font-size: 1.5rem; line-height: 1.1; }
.rasi-ci-landing .rasi-ci-script-line, .rasi-ci-landing .rasi-ci-script--deva { line-height: 1.05; }
.rasi-ci-landing .rasi-ci-script-line { margin-top: 0.7rem; }

/* planets.at/rasi and /ci: who is here now, each named in its own tint
   (Jes, Telegram, 2026-10-03). */
.rasi-ci-index-mark { color: var(--planet-tint, #f3dfb2); margin-right: 0.45em; white-space: nowrap; }
.rasi-ci-index-mark.planet-tint--jupiter { color: #b48fd4; }
.rasi-ci-index-mark .planet-landing-glyph { font-style: normal; }

/* planets.at/signs, /rasi and /ci: the "now" tag on a dark ground with a
   brass edge, so each body's own tint reads (it vanished on the gold pill). */
.rasi-ci-index .mansion-index-moon.rasi-ci-index-now { background: rgba(16, 18, 26, 0.88); color: rgba(239, 230, 210, 0.7); border: 1px solid rgba(216, 178, 101, 0.45); padding: 0.1rem 0.5rem; }
.rasi-ci-index .rasi-ci-index-now .rasi-ci-index-mark { font-weight: 600; }

/* PROTOTYPE (2026-10-03, for Jes): lunisolar months on mene.ing, a page
   per lunation (LunisolarMonthController): "mene.ing/" over the new
   moon's date, the almanac name as a pill, the span in the visitor's
   zone, then a compact row per calendar: label (small mono), the name in
   its own script (upright), its transliteration, the year, and the
   boundary notes. */
.lunisolar-landing { justify-content: flex-start; padding-top: 28px; }
.lunisolar-landing .lunisolar-title { font-size: clamp(2rem, 8.4vw, 4.2rem); letter-spacing: 0.12em; text-indent: 0.12em; font-variant-numeric: lining-nums; }
.lunisolar-landing .lunisolar-title--index { letter-spacing: 0.32em; text-indent: 0.32em; }
.lunisolar-pills { margin-top: 1.1rem; }
.lunisolar-pills .lunisolar-pill--almanac { color: #f3dfb2; border-color: rgba(240, 198, 110, 0.7); }
.lunisolar-pills .lunisolar-pill--blue { color: #a9c4ff; border-color: rgba(169, 196, 255, 0.6); }
.lunisolar-pills .lunisolar-pill--also { color: rgba(239, 230, 210, 0.5); border-color: rgba(216, 178, 101, 0.2); }
.lunisolar-pills .lunisolar-pill--now { color: #f0c66e; border-color: rgba(240, 198, 110, 0.9); }
.lunisolar-landing [lang="zh-Hant"], .luminary-landing-month [lang="zh-Hant"] { font-family: 'Noto Serif TC', serif; font-style: normal; }
.lunisolar-landing [lang="he"] { font-family: 'Noto Serif Hebrew', serif; font-style: normal; unicode-bidi: isolate; }
.lunisolar-landing [lang="ar"] { font-style: normal; unicode-bidi: isolate; }
.lunisolar-landing [lang="sa"] { font-family: 'Noto Serif Devanagari', serif; font-style: normal; }
.lunisolar-credit { margin-top: 1.8rem; max-width: 40rem; }
/* The index: a row per lunation, the current one lit. */
.lunisolar-index-list { list-style: none; margin: 1.8rem auto 0; padding: 0; width: min(100%, 720px); display: flex; flex-direction: column; gap: 0.35rem; text-align: left; }
.lunisolar-index-item a {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  column-gap: 1rem;
  row-gap: 0.1rem;
  align-items: baseline;
  padding: 0.55rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.lunisolar-index-item a:hover, .lunisolar-index-item a:focus-visible { border-color: rgba(216, 178, 101, 0.4); background: rgba(40, 30, 14, 0.45); }
.lunisolar-index-item--here a { border-color: rgba(240, 198, 110, 0.75); background: rgba(40, 30, 14, 0.6); }
.lunisolar-index-date { grid-row: 1 / span 2; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; letter-spacing: 0.06em; color: #e9c27a; font-variant-numeric: tabular-nums; }
.lunisolar-index-almanac { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 1.2rem; color: #f3dfb2; }
.lunisolar-index-now { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #f0c66e; margin-left: 0.4rem; }
.lunisolar-index-names { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.1rem 0.8rem; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.03em; color: rgba(239, 230, 210, 0.65); }
.lunisolar-index-names .mansion-pinyin { font-size: 1.12em; }
@media (max-width: 520px) {
  .lunisolar-index-item a { grid-template-columns: 1fr; }
  .lunisolar-index-date { grid-row: auto; }
  .lunisolar-index-names { grid-column: 1; }
}
/* The Moon page's link to this lunation's page. */
.luminary-landing-month {
  margin-top: 0.9rem;
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #f3dfb2;
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 178, 101, 0.3);
}
.luminary-landing-month:hover, .luminary-landing-month:focus-visible { border-bottom-color: rgba(216, 178, 101, 0.9); }

/* The step nav keeps each link in its own column when one side is missing
   (the lunations' ends, 1900 and 2100): up in the middle, next on the right. */
nav.zodiac-step-nav--up .zodiac-step-link--up { grid-column: 2; }
nav.zodiac-step-nav--up .zodiac-step-link--following { grid-column: 3; }
nav.zodiac-step-nav:not(.zodiac-step-nav--up) .zodiac-step-link--following { grid-column: 2; }

/* mene.ing month pages (Jes, Telegram, 2026-10-03): the almanac name as
   the page's word, its other name small under it; the sovereign hexagram
   on its own line. */
.lunisolar-landing .lunisolar-almanac { margin: 0.1rem 0 0; }
.lunisolar-almanac-also { margin: 0.2rem 0 0; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(239, 230, 210, 0.5); }
/* mene.ing month pages at phone width: the step nav's full-moon names
   ("Hunter's Moon ›") wrap in their columns rather than push the page wide. */
@media (max-width: 480px) {
  .lunisolar-landing nav.zodiac-step-nav { gap: 0.5rem; padding: 0; }
  .lunisolar-landing nav.zodiac-step-nav a { min-width: 0; }
  .lunisolar-landing .zodiac-step-name { white-space: normal; }
}
/* mene.ing: the lunation's phase strip (lunisolar_month/_phase_strip; Jes
   picked it, 2026-10-03): five discs along a thin brass line, placed by
   their times, each with its name, day and clock under it; a NOW tick. */
.phase-strip { --disc: 2.5rem; position: relative; margin: 1.5rem auto 0; padding-top: 1.7rem; width: min(100%, 640px); box-sizing: border-box; }
.phase-strip-track { list-style: none; margin: 0; padding: 0; position: relative; height: 6.6rem; }
.phase-strip-track::before { content: ""; position: absolute; left: calc(var(--disc) / 2); right: calc(var(--disc) / 2); top: calc(var(--disc) / 2); border-top: 1px solid rgba(216, 178, 101, 0.55); }
.phase-strip-phase {
  position: absolute; top: 0;
  left: calc(var(--disc) / 2 + var(--at) * (100% - var(--disc)));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap;
}
.phase-strip-phase:first-child { transform: translateX(calc(var(--disc) / -2)); align-items: flex-start; text-align: left; }
.phase-strip-phase:last-child { transform: translateX(calc(-100% + var(--disc) / 2)); align-items: flex-end; text-align: right; }
.phase-strip-disc { width: var(--disc); height: var(--disc); display: block; margin-bottom: 0.35rem; }
.phase-strip-dark { fill: #12141b; stroke: rgba(196, 206, 222, 0.28); stroke-width: 1; }
.phase-strip-lit { fill: rgba(196, 206, 222, 0.92); }
.phase-strip-name { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 1rem; line-height: 1.15; color: #f3dfb2; }
.phase-strip-day, .phase-strip-clock { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.03em; line-height: 1.45; font-variant-numeric: tabular-nums; color: rgba(239, 230, 210, 0.82); }
.phase-strip-clock { font-size: 0.62rem; color: rgba(239, 230, 210, 0.55); }
.phase-strip-now {
  position: absolute; top: 0;
  left: calc(var(--disc) / 2 + var(--at) * (100% - var(--disc)));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1rem; color: #f0c66e;
  pointer-events: none;
}
.phase-strip-now::after { content: ""; width: 1.5px; height: calc(0.7rem + var(--disc) / 2); background: #f0c66e; }
@media (max-width: 480px) {
  .phase-strip { --disc: 2.2rem; }
  .phase-strip-name { font-size: 0.92rem; }
  .phase-strip-day { font-size: 0.64rem; }
  .phase-strip-clock { font-size: 0.58rem; letter-spacing: 0; }
}
/* mene.ing's Moon page (Jes, 2026-10-03): the phase in words under
   "Mystery"; this lunation's almanac name at the keyword's size over its
   phase strip, one link to its page, above the mansions. */
.luminary-landing-phase { margin: -0.1rem 0 0.9rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(239, 230, 210, 0.66); }
a.luminary-landing-month { display: block; width: min(100%, 640px); margin: 1.3rem auto 0.6rem; border-bottom: 0; text-decoration: none; font-style: normal; font-size: 1rem; }
a.luminary-landing-month:hover, a.luminary-landing-month:focus-visible { filter: brightness(1.15); }
.luminary-landing-month-name {
  display: inline-block;
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: clamp(2rem, 6.5vw, 3.6rem); letter-spacing: 0.04em; line-height: 1.1;
  padding: 0 0.1em 0.18em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(232, 180, 100, 0.3));
}
.luminary-landing-month .phase-strip { margin-top: 0.4rem; }
.luminary-landing-month-name { background: var(--planet-tinted-brass); -webkit-background-clip: text; background-clip: text; }

/* Previous / next chevrons in the margins, level with the title, on the sign,
   rāśi and cì pages (zodiac_sign/_margin_arrows). Absolute in the title's
   row, so they scroll with it; tucked into the page's gutter on a phone. */
.planet-landing > .zodiac-margin-row { align-self: stretch; position: relative; }
.zodiac-margin-row > .planet-landing-title { margin-inline: auto; }
.zodiac-margin-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.62, 1.7);
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 4.4vw, 4.4rem);
  line-height: 1;
  padding: 0.1em 0.3em;
  color: #d8b265;
  opacity: 0.6;
  text-decoration: none;
  transition: opacity 0.2s, filter 0.2s;
}
.zodiac-margin-arrow::after { content: none; }
.zodiac-margin-arrow:hover, .zodiac-margin-arrow:focus-visible {
  opacity: 1;
  background: none;
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(232, 180, 100, 0.45));
}
.zodiac-margin-arrow--previous { left: clamp(-20px, 4vw - 36px, 3vw); }
.zodiac-margin-arrow--following { right: clamp(-20px, 4vw - 36px, 3vw); }

/* mene.ing month pages: the heading in four lines (Jes, Telegram,
   2026-10-03): "mene.ing/", the name big, "moon" small, a gray "/" and
   the year. */
.lunisolar-landing .lunisolar-heading { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0.1rem 0 0; text-transform: none; letter-spacing: 0; text-indent: 0; }
.lunisolar-heading-name { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(2.8rem, 12vw, 5rem); line-height: 1; padding: 0 0.12em 0.1em; }
.lunisolar-heading-moon { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: clamp(1.1rem, 4.4vw, 1.6rem); line-height: 1; color: rgba(243, 223, 178, 0.75); }
.lunisolar-heading-year { margin-top: 0.35rem; font-family: 'JetBrains Mono', monospace; font-size: clamp(1rem, 4vw, 1.35rem); letter-spacing: 0.18em; color: #f3dfb2; font-variant-numeric: lining-nums; }
.lunisolar-heading-slash { color: rgba(239, 230, 210, 0.38); margin-right: 0.15em; }
.lunisolar-landing .lunisolar-heading-year, .lunisolar-landing .lunisolar-heading-moon { -webkit-text-fill-color: currentColor; background: none; text-shadow: none; }
.lunisolar-landing .lunisolar-heading-slash { color: #8a8f99; -webkit-text-fill-color: #8a8f99; }
/* mene.ing month pages: "today is day N" in place of a now pill (Jes,
   Telegram, 2026-10-03). */

/* mene.ing month pages: the step nav on one line and one baseline (Jes,
   Telegram, 2026-10-03: "this nav is weird"): every glyph in a box of the
   same height, every name on one line. */
.lunisolar-landing nav.zodiac-step-nav { align-items: start; }
.lunisolar-landing nav.zodiac-step-nav a { gap: 0.35rem; }
.lunisolar-landing .zodiac-step-glyphs { display: flex; align-items: center; justify-content: center; height: 1.7rem; line-height: 1; font-size: 1.3rem; }
.lunisolar-landing .zodiac-step-name { white-space: nowrap; line-height: 1.2; }
.lunisolar-landing .zodiac-step-link--previous .zodiac-step-glyphs { justify-content: flex-start; }
.lunisolar-landing .zodiac-step-link--following .zodiac-step-glyphs { justify-content: flex-end; }

/* Mansion pages: long names (al-Fargh al-Muqaddam, Pūrva Bhādrapadā) wrap
   in the step nav and the overlaps rather than push the page wide. */
.mansion-landing nav.zodiac-step-nav a { min-width: 0; }
.mansion-landing .zodiac-step-name { white-space: normal; overflow-wrap: anywhere; }
.mansion-landing .decan-landing-overlaps dd { min-width: 0; }
.mansion-landing .decan-landing-item { white-space: normal; overflow-wrap: anywhere; min-width: 0; }

/* Mansion glyphs, ink-centred (LunarMansionHelper::GLYPH_NUDGE, Jes,
   2026-10-04: "let's do ink centered"): mansion_glyph sets --glyph-dy on
   the circle, and only the glyph inside it moves. */
.mansion-glyph-ink { position: relative; top: var(--glyph-dy, 0); }

/* mene.ing month page: the lunation as a week calendar (Jes, 2026-10-04,
   mockup variant E; lunisolar_month/_calendar). A key, then Sunday-first
   weeks: in each square four lanes (Hebrew, Hijri, Hindu, Chinese), each
   month one bar through the squares' borders with rounded ends, its number
   sparse; the mansions entered that day on their system's bar; the day's
   Moon faint behind. Today in brass; days outside the lunation dimmed. */
.lunisolar-cal { --bg: #0a0a0f; --cream: #f3dfb2; --brass: #d8b265; --hot: #f0c66e; --dim: rgba(239, 230, 210, 0.5); --rule: rgba(216, 178, 101, 0.16);
  width: min(100%, 1040px); margin-top: 1.6rem; text-align: center; }
.lunisolar-cal--hebrew { --t: #8fb6ec; }
.lunisolar-cal--islamic { --t: #6cc79b; }
.lunisolar-cal--hindu { --t: #eaa45a; }
.lunisolar-cal--chinese { --t: #ef7d6c; }
/* The key: a line per tradition in lane order, then the mansions, then the phases. */
.lunisolar-cal-key { display: grid; grid-template-columns: 1fr; gap: 0.35rem; max-width: 520px; margin: 0 auto 0.9rem; text-align: left; }
.lunisolar-cal-key-month { display: grid; grid-template-columns: auto auto 1fr; column-gap: 0.6rem; align-items: center; }
.lunisolar-cal-dot { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--t); font-size: 0.72rem; }
.lunisolar-cal-key-native { font-size: 1.05rem; line-height: 1.25; color: #f6e4bb; font-style: normal; }
.lunisolar-cal-key-native[dir="rtl"] { text-align: left; }
.lunisolar-cal-key-native:lang(ar) { font-family: 'Noto Naskh Arabic', serif; }
.lunisolar-cal-key-name { font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 1.05rem; line-height: 1.1; color: var(--cream); }
.lunisolar-cal-key-name .mansion-pinyin { font-size: 0.92em; }
.lunisolar-cal-key-date { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 0.62rem; color: var(--dim); margin-left: 0.3rem; letter-spacing: 0.02em; white-space: nowrap; }
.lunisolar-cal-key-mansions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.1rem; margin: 0 0 1rem; }
a.lunisolar-cal-key-system { display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 1rem; color: var(--cream); text-decoration: none; }
a.lunisolar-cal-key-system .mansion-glyph { font-size: 15px; }
.lunisolar-cal-key-phases { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; margin: -0.4rem 0 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--dim); }
.lunisolar-cal-key-phases > span { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.lunisolar-cal-key-phases sup { color: var(--t); }
.lunisolar-cal-key-phases .lunisolar-cal-disc { width: 13px; height: 13px; }
.lunisolar-cal-disc-dark { fill: #22232b; stroke: rgba(243, 223, 178, 0.85); stroke-width: 1; }
.lunisolar-cal-disc-lit { fill: #f3dfb2; }
/* The circled glyph in its calendar's tint, every one the same size. */
.lunisolar-cal .mansion-glyph { border-color: var(--t); background: var(--bg); color: var(--cream); flex: none; }
/* The grid. */
.lunisolar-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); overflow: hidden; }
.lunisolar-cal-weekday { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(216, 178, 101, 0.75); padding: 0.45rem 0 0.4rem; border-right: 1px solid var(--rule); border-bottom: 1px solid rgba(216, 178, 101, 0.4); }
.lunisolar-cal-weekday-short { display: none; }
.lunisolar-cal-day { position: relative; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: left; }
.lunisolar-cal-day--out { background: rgba(255, 255, 255, 0.012); }
.lunisolar-cal-day--out > * { opacity: 0.42; }
.lunisolar-cal-day--today { z-index: 1; background: rgba(240, 198, 110, 0.075); }
.lunisolar-cal-day--today::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--hot); box-shadow: 0 0 16px rgba(240, 198, 110, 0.22), inset 0 0 12px rgba(240, 198, 110, 0.12); pointer-events: none; z-index: 4; }
.lunisolar-cal-moon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.lunisolar-cal-top, .lunisolar-cal-lanes { position: relative; z-index: 1; }
.lunisolar-cal-top { display: flex; justify-content: space-between; align-items: center; height: 24px; padding: 5px 7px 4px; box-sizing: border-box; }
.lunisolar-cal-date { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: rgba(239, 230, 210, 0.82); letter-spacing: 0.02em; }
.lunisolar-cal-date b { font-weight: 400; color: var(--brass); margin-right: 0.25em; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.08em; }
.lunisolar-cal-day--today .lunisolar-cal-date { color: var(--hot); }
.lunisolar-cal-phase { display: inline-flex; align-items: center; gap: 3px; font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; color: var(--dim); }
.lunisolar-cal-phase .lunisolar-cal-disc { width: 13px; height: 13px; flex: none; }
.lunisolar-cal-lanes { display: flex; flex-direction: column; gap: 4px; padding: 3px 0 7px; }
.lunisolar-cal-lane { display: flex; align-items: center; height: 22px; min-width: 0; }
.lunisolar-cal-bar { position: relative; display: flex; align-items: center; gap: 4px; height: 100%; flex: 1; min-width: 0; margin-right: -1px; padding: 0 5px 0 6px; background: color-mix(in srgb, var(--t) 24%, transparent); }
.lunisolar-cal-bar--other { background: color-mix(in srgb, var(--t) 9%, transparent); }
.lunisolar-cal-bar--other > * { opacity: 0.55; }
.lunisolar-cal-bar--first { margin-left: 4px; border-radius: 11px 0 0 11px; padding-left: 2px; }
.lunisolar-cal-bar--last { margin-right: 4px; border-radius: 0 11px 11px 0; }
.lunisolar-cal-num { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--t) 60%, #fff); }
.lunisolar-cal-num sup { font-size: 0.6em; margin-left: 1px; color: var(--t); }
.lunisolar-cal-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 0.25em; border-radius: 0.75em; background: var(--t); color: #0a0a0f; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 0.72rem; line-height: 1; box-sizing: border-box; }
.lunisolar-cal-label { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 0.92rem; color: color-mix(in srgb, var(--t) 55%, #fff); }
.lunisolar-cal-cont { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 0.78rem; color: var(--t); opacity: 0.5; }
.lunisolar-cal-bar--other > .lunisolar-cal-cont { opacity: 0.5; }
.lunisolar-cal-label .mansion-pinyin, .lunisolar-cal-cont .mansion-pinyin { font-size: 0.92em; }
.lunisolar-cal-glyphs { position: relative; z-index: 3; display: flex; gap: 3px; margin-left: auto; flex: none; font-size: 13.5px; }
a.lunisolar-cal-glyph { display: inline-flex; color: inherit; text-decoration: none; }
a.lunisolar-cal-glyph .mansion-glyph-group { font-size: 1em; }
a.lunisolar-cal-glyph:hover .mansion-glyph, a.lunisolar-cal-glyph:focus-visible .mansion-glyph { border-color: var(--hot); }
@media (max-width: 640px) {
  .lunisolar-cal-key { gap: 0.3rem; }
  .lunisolar-cal-key-native { font-size: 0.95rem; }
  .lunisolar-cal-key-name { font-size: 0.95rem; }
  .lunisolar-cal-key-mansions { gap: 0.7rem; }
  a.lunisolar-cal-key-system { font-size: 0.9rem; }
  .lunisolar-cal-weekday { font-size: 0.56rem; letter-spacing: 0.06em; padding: 0.35rem 0; }
  .lunisolar-cal-weekday-long { display: none; }
  .lunisolar-cal-weekday-short { display: inline; }
  .lunisolar-cal-top { height: 19px; padding: 3px 3px 2px; }
  .lunisolar-cal-date { font-size: 0.66rem; }
  .lunisolar-cal-date b { font-size: 0.5rem; margin: 0 1px 0 0; letter-spacing: 0.02em; }
  .lunisolar-cal-phase span { display: none; }
  .lunisolar-cal-phase .lunisolar-cal-disc { width: 10px; height: 10px; }
  .lunisolar-cal-lanes { gap: 3px; padding: 2px 0 5px; }
  .lunisolar-cal-lane { height: 19px; }
  .lunisolar-cal-bar { padding: 0 2px 0 3px; gap: 2px; }
  .lunisolar-cal-bar--first { margin-left: 2px; padding-left: 1px; border-radius: 10px 0 0 10px; }
  .lunisolar-cal-bar--last { margin-right: 2px; border-radius: 0 10px 10px 0; }
  .lunisolar-cal-num { font-size: 0.64rem; }
  .lunisolar-cal-chip { font-size: 0.58rem; min-width: 1.45em; height: 1.45em; padding: 0 0.15em; }
  .lunisolar-cal-label, .lunisolar-cal-cont { display: none; }
  .lunisolar-cal-glyphs { font-size: 10.5px; gap: 1px; }
  .lunisolar-cal .lunisolar-cal-glyphs .mansion-glyph { width: 1.7em; height: 1.7em; }
  /* Two glyphs in a lane: the number gives way, except on a Sunday, a new
     moon or a month's first day, where it stays and the glyphs sit tight. */
  .lunisolar-cal-bar--two { padding-right: 1px; }
  .lunisolar-cal-bar--two:not(.lunisolar-cal-bar--anchor) .lunisolar-cal-num { display: none; }
  .lunisolar-cal-bar--two.lunisolar-cal-bar--anchor { padding-left: 2px; gap: 1px; }
  .lunisolar-cal-bar--two.lunisolar-cal-bar--anchor .lunisolar-cal-num { letter-spacing: -0.04em; }
  .lunisolar-cal-bar--two.lunisolar-cal-bar--anchor .lunisolar-cal-glyph + .lunisolar-cal-glyph { margin-left: -4px; }
}

/* mene.ing month calendar: a mansion entered before the lunation's new
   moon or after the next, fainter on its bar (mockup variant E). */
a.lunisolar-cal-glyph--outside .mansion-glyph { opacity: 0.45; }

/* mene.ing month calendar: a skipped tithi's day, its number ringed in the
   lane's colour (an outlined 1 chip); the day before it keeps its number. */
.lunisolar-cal-chip--ring { background: none; color: var(--t); box-shadow: inset 0 0 0 1.5px var(--t); }
.lunisolar-cal-key-phases .lunisolar-cal-chip--ring { font-size: 0.62rem; }

/* planets.at/venus/moon: every Moon–Venus aspect in a cycle
   (VenusMoonController). Standalone like /great-conjunction; the document
   scrolls, not an inner <main> (the iPhone trap, #14209). */
body:has(.venus-moon) .layout { height: auto; min-height: 100vh; }
body:has(.venus-moon) main { display: block; overflow: visible; }
.venus-moon { max-width: 46rem; margin: 0 auto; padding: 18px 16px 3rem; box-sizing: border-box; color: var(--color-cream); }
.vm-header { text-align: center; margin: 0 0 1.4rem; }
.vm-title {
  margin: 0.6rem 0 0;
  font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 7.2vw, 3.6rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  line-height: 1.1;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  background: var(--planet-tinted-brass, linear-gradient(180deg, #fff3d6 0%, #e9c27a 45%, #a8742f 70%, #f1d08c 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(232, 180, 100, 0.25));
}
.vm-title-and { font-size: 0.7em; letter-spacing: 0; }
.vm-emblem { margin: 0.5rem 0 0; color: #d8b265; font-family: var(--font-symbols); font-size: 1.05rem; letter-spacing: 0.5em; text-indent: 0.5em; opacity: 0.8; }
.venus-moon .vm-glyph, .vm-venus-text, .vm-emblem { font-style: normal; }
.vm-glyph { font-family: var(--font-symbols); }
.venus-moon a { color: var(--color-cream); }


.vm-section { margin: 2.2rem 0; }
.vm-h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; text-align: center; margin: 0 0 .7rem; }
.vm-h2-years { color: var(--color-cream-dimmed); font-weight: 400; font-size: 1rem; margin-left: .3rem; }
.vm-nowrap { white-space: nowrap; }
/* Each line of the title its own brass, so a phone's second line isn't
   only the lower, tinted band of one gradient. */
.vm-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.vm-title > .vm-nowrap {
  display: inline-block;
  padding-bottom: 0.18em;
  background: var(--planet-tinted-brass, linear-gradient(180deg, #fff3d6 0%, #e9c27a 45%, #a8742f 70%, #f1d08c 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; margin: .6rem 0 0; font-size: .8rem; color: var(--color-cream-dimmed); }
.vm-legend-item { white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }

.venus-moon .mercury-zone-picker, .venus-moon .mercury-zone { text-align: center; font-size: .8rem; color: var(--color-cream-dimmed); margin-top: 2rem; }
.venus-moon .mercury-zone-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted rgba(244,241,232,0.45); text-underline-offset: 3px; cursor: pointer; }
.vm-credit { text-align: center; font-size: .75rem; color: rgba(196, 193, 184, .7); margin: .6rem 0 0; }

/* planets.at/venus/moon, every aspect in a cycle (Jes, Telegram 15491):
   Now (the wheel), the cycle as a line over the Moon's and Venus's signs,
   and the aspect calendar, a row per Moon–Venus cycle. */
.vm-figure { margin: 0 auto; }
.vm-figure svg { display: block; width: 100%; height: auto; }
.vm-figure--wheel { max-width: 380px; }
.vm-figure--line { max-width: 640px; }
.vm-figure text { font-family: var(--font-body); }
.vm-wheel-sector { opacity: .5; }
.vm-wheel-boundary { stroke: rgba(244, 241, 232, .09); stroke-width: .5; }
.vm-wheel-sign { fill: var(--color-space-black, #050507); font-size: 8.5px; text-anchor: middle; font-family: var(--font-symbols) !important; }
.vm-wheel-tick { stroke-width: 1.4; opacity: .75; }
.vm-wheel-glyph { font-family: var(--font-symbols) !important; font-size: 11px; text-anchor: middle; }
.vm-wheel-aspect--passed { opacity: .45; }
.vm-wheel-aspect--next .vm-wheel-tick { opacity: 1; stroke-width: 2.6; }
.vm-wheel-aspect--next .vm-wheel-glyph { font-size: 15px; font-weight: 700; }
.vm-wheel-gap { fill: none; stroke: var(--color-copper-bright); stroke-width: 1.4; }
.vm-wheel-gap-label { fill: var(--color-copper-bright); font-size: 8.5px; text-anchor: middle; }
.vm-wheel-spoke { stroke-width: .8; opacity: .65; }
.vm-wheel-spoke--venus { stroke: var(--planet-venus); }
.vm-wheel-spoke--moon { stroke: var(--planet-moon); }
.vm-wheel-disc { fill: var(--color-space-black, #050507); stroke: rgba(244, 241, 232, .3); stroke-width: .6; }
.vm-wheel-body { font-family: var(--font-symbols) !important; font-size: 11px; text-anchor: middle; fill: currentColor; }
.vm-wheel-earth { fill: var(--color-cream-dimmed); }
.vm-now-lines { list-style: none; margin: .6rem auto 0; padding: 0; display: grid; gap: .3rem; text-align: center; font-size: .95rem; line-height: 1.45; }
.vm-now-word { color: var(--color-copper-bright); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; margin-right: .2rem; }
.vm-now-previous { color: var(--color-cream-dimmed); font-size: .88rem; }
.vm-now-previous a { color: var(--color-cream-dimmed); }
.vm-now-lines a { white-space: nowrap; }
.vm-elsewhere { text-align: center; margin: 1.2rem 0 0; font-size: .95rem; }
.vm-elsewhere a { color: var(--color-copper-bright); }

.vm-cycle-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: -.2rem 0 .6rem; color: var(--color-cream-dimmed); font-size: .92rem; }
.vm-cycle-step { display: inline-block; min-width: 2rem; text-align: center; font-size: 1.4rem; line-height: 1; text-decoration: none; color: #d8b265 !important; }
.vm-line-track { stroke: rgba(244, 241, 232, .28); stroke-width: 1.2; }
.vm-line-done { stroke: var(--color-copper-bright); stroke-width: 1.6; opacity: .7; }
.vm-line-hit { fill: transparent; }
.vm-line-glyph { font-family: var(--font-symbols) !important; font-size: 11px; text-anchor: middle; }
.vm-line-dot { stroke: #050507; stroke-width: .8; }
.vm-line-mon { fill: var(--color-cream-dimmed); font-size: 7.5px; text-anchor: middle; }
.vm-line-dom { fill: var(--color-cream); font-size: 9.5px; text-anchor: middle; }
.vm-line-aspect--past { opacity: .5; }
.vm-line-aspect--next .vm-line-dot { stroke: var(--color-copper-bright); stroke-width: 1.6; }
.vm-line-aspect--next .vm-line-glyph { font-size: 13px; font-weight: 700; }
.vm-line-aspect:hover .vm-line-dom, .vm-line-aspect:focus-visible .vm-line-dom { fill: #d8b265; }
.vm-line-echo { stroke-width: .7; opacity: .55; }
.vm-band-rect { opacity: .5; stroke: #050507; stroke-width: .5; }
.vm-band-glyph { fill: #050507; font-family: var(--font-symbols) !important; text-anchor: middle; }
.vm-band-glyph--moon { font-size: 10px; }
.vm-band-glyph--venus { font-size: 8px; }
.vm-band-body { font-family: var(--font-symbols) !important; font-size: 10px; text-anchor: middle; fill: currentColor; }
.vm-now-line { stroke: var(--color-copper-bright); stroke-width: 1.2; stroke-dasharray: 3 2; }
.vm-now-mark { fill: var(--color-copper-bright); }
.vm-now-label { fill: var(--color-copper-bright); font-size: 8px; text-anchor: middle; }
.vm-cycle-ends { display: flex; justify-content: space-between; gap: 1rem; max-width: 640px; margin: .4rem auto 0; font-size: .85rem; line-height: 1.4; }
.vm-cycle-end { margin: 0; }
.vm-cycle-end--closing { text-align: right; }
.vm-gate { text-decoration: none; }
.vm-gate--descent, a.vm-gate--descent { color: #c9a3c9 !important; }
.vm-gate--ascent, a.vm-gate--ascent { color: #e3c77f !important; }

.vm-cal { max-width: 40rem; margin: 0 auto; display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.vm-cal-groups, .vm-cal-head, .vm-cal-row { display: grid; grid-template-columns: 2.7rem repeat(8, minmax(0, 1fr)); gap: 3px; }
.vm-cal-group { grid-column: span 3; text-align: center; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-cream-dimmed); border-bottom: 1px solid rgba(216, 178, 101, .3); padding-bottom: 1px; }
.vm-cal-colhead { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding-bottom: 2px; }
.vm-cal-colhead .vm-glyph { font-size: 1rem; }
.vm-cal-short { font-size: .62rem; color: var(--color-cream-dimmed); }
.vm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vm-cal-rowhead { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none; border-radius: 5px; background: rgba(244, 241, 232, .04); line-height: 1.1; }
.vm-cal-rowhead .vm-glyph { font-size: 1rem; }
.vm-cal-gate { font-size: .64rem; letter-spacing: .02em; }
.vm-cal-gate--rx { color: var(--color-cream-dimmed); }
.vm-cal-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 0; border-radius: 5px; text-decoration: none; line-height: 1.12; min-width: 0;
  background: color-mix(in srgb, var(--el, transparent) 13%, transparent); }
.vm-cal-cell--empty { background: rgba(244, 241, 232, .02); }
.vm-cal-mon { font-size: .6rem; color: var(--color-cream-dimmed); }
.vm-cal-dd { display: inline-flex; align-items: baseline; gap: 2px; font-size: .8rem; white-space: nowrap; }
.vm-cal-sign { color: var(--el); font-size: .78rem; }
a.vm-cal-cell:hover, a.vm-cal-cell:focus-visible, a.vm-cal-rowhead:hover { box-shadow: inset 0 0 0 1px #d8b265; }
.vm-cal-row--retrograde .vm-cal-cell { background: color-mix(in srgb, var(--el, transparent) 8%, transparent); }
.vm-cal-row--now { outline: 1px solid rgba(224, 150, 100, .55); outline-offset: 1px; border-radius: 6px; background: rgba(224, 150, 100, .07); }
.vm-cal-row--now .vm-cal-rowhead { color: var(--color-copper-bright); }
.vm-cal-row--shown { outline: 1px solid rgba(216, 178, 101, .55); outline-offset: 1px; border-radius: 6px; }
.vm-cal-cell--past { opacity: .5; }
.vm-cal-cell--next { box-shadow: inset 0 0 0 1.5px var(--color-copper-bright); }
@media (min-width: 640px) {
  .vm-cal-groups, .vm-cal-head, .vm-cal-row { grid-template-columns: 3.4rem repeat(8, minmax(0, 1fr)); gap: 4px; }
  .vm-cal { gap: 4px; }
  .vm-cal-dd { font-size: .92rem; gap: 3px; }
  .vm-cal-mon { font-size: .66rem; }
  .vm-cal-short { font-size: .68rem; }
}

/* planets.at/venus/moon: Venus's retrograde as a link to venus.retrograde.observer
   (Jes, Telegram 15516): at a conjunction, under a cycle's dates, on a ℞ month. */
.vm-rx-link { color: #e0705a; text-decoration: none; border-bottom: 1px dotted rgba(224, 112, 90, .6); }
.vm-rx-link:hover, .vm-rx-link:focus-visible { color: #f08c74; border-bottom-style: solid; }
.vm-cycle-rx { margin: .2rem 0 .6rem; text-align: center; font-size: .82rem; }
.vm-cal-rowhead--rx .vm-rx-link { font-size: .7rem; border-bottom: 0; }
.vm-cal-rowlink { text-decoration: none; color: inherit; }
.vm-cal-rowlink:hover, .vm-cal-rowlink:focus-visible { box-shadow: inset 0 0 0 1px #d8b265; border-radius: 4px; }

/* planets.at/venus/moon: the conjunction as seen, back (Jes, Telegram 15518). */
.vm-next { max-width: 26rem; margin-left: auto; margin-right: auto; text-align: center; }
.vm-sight-figure { margin: 0 auto; }
.vm-sight { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(216, 178, 101, .18); }
.vm-sight text { font-family: var(--font-body); font-style: normal; }
.vm-venus { fill: var(--planet-venus); }
.vm-venus-text { color: var(--planet-venus); white-space: nowrap; font-style: normal; }
.vm-next-lines { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .95rem; line-height: 1.4; }
.vm-next-when { font-size: 1.1rem; }
.vm-next-sky { color: var(--color-cream-dimmed); }
.vm-next-sky--glare { color: #e8c98a; }
.venus-moon a.vm-rx-link { color: #e0705a; }
.venus-moon a.vm-rx-link:hover, .venus-moon a.vm-rx-link:focus-visible { color: #f08c74; }
.vm-band-rx { stroke: #e0705a; stroke-width: 2.5; stroke-linecap: round; }

/* planets.at/venus/moon: the conjunction over the horizon at dusk or dawn
   (Jes, Telegram 15527/15529), as the daily's horizon panels: night sky, the
   twilight glow round the Sun's azimuth below the horizon, the ground. */
.vm-horizon-sky { border-radius: 8px; }
.vm-night-top { stop-color: #060a1c; }
.vm-night-low { stop-color: #18264a; }
.vm-glow-core { stop-color: #ffb45e; stop-opacity: .95; }
.vm-glow-horizon { stop-color: #f08a4c; stop-opacity: .78; }
.vm-glow-rose { stop-color: #c97487; stop-opacity: .42; }
.vm-glow-blue { stop-color: #4f6aa8; stop-opacity: .22; }
.vm-glow-edge { stop-color: #1d2b55; stop-opacity: 0; }
.vm-ground { fill: #101827; }
.vm-horizon { stroke: #c2c9d2; stroke-width: 1; }
.vm-compass-tick { stroke: rgba(194, 201, 210, .6); stroke-width: .8; }
.vm-horizon-sky .vm-compass { fill: rgba(232, 236, 242, .62); font-size: 8.5px; text-anchor: middle; letter-spacing: .03em; }
.vm-horizon-sky .vm-compass--major { fill: #fff; font-size: 10px; }
.vm-alt-tick { stroke: rgba(232, 236, 242, .35); stroke-width: .8; }
.vm-horizon-sky .vm-alt-label { fill: rgba(232, 236, 242, .42); font-size: 7.5px; }
.vm-moon--sky .vm-moon-dark { fill: #1a1a2e; fill-opacity: .75; stroke: rgba(170, 170, 170, .4); stroke-width: .5; }
.vm-moon--sky .vm-moon-lit { fill: var(--planet-moon); }
.vm-venus-mark .vm-venus { stroke: #0b1024; stroke-width: .6; }
.vm-horizon-sky .vm-sky-venus { fill: var(--planet-venus); font-size: 12px; }
.vm-below { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; }
.vm-horizon-sky .vm-below-label { fill: rgba(255, 255, 255, .85); font-size: 10px; }
.vm-horizon-sky .vm-sky-sun { fill: #ffd9a0; font-size: 10px; text-anchor: middle; }
.vm-next-where { color: var(--color-cream-dimmed); font-size: .85rem; }

/* Today: the analemma and the 24-hour clock side by side, centred with a set
   gap on wider screens instead of pushed to the row's two ends (Jes, Telegram
   15603: "less wide on desktop"). Phones keep their spread. */
@media (min-width: 640px) {
  .today-graphics-row { justify-content: center; column-gap: 3.5rem; }
  .today-graphics-row .today-day-clock { margin-left: 0; }
}