/* Mercury's landing page (Jes, Telegram #13818). */
:root {
  --mercury: #87CEEB;
  --cream: #f4f1e8;
  --cream-dimmed: #c4c1b8;
  --copper: #d8b265; /* polished brass, not copper: the flat details (Jes, Telegram #14182, picked "B" #14191) */
  --brass-polished: linear-gradient(180deg, #8c5e22 0%, #fbe7b3 30%, #e8bd5a 45%, #c48a2e 62%, #fff0c4 74%, #9a6424 88%, #5c3a12 100%);
  --brass-link: linear-gradient(180deg, #f3dc9c 0%, #c9953e 60%, #9d6a26 100%);
  --space: #0a0a0f;
  --font-display: 'Crimson Pro', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--space); color: var(--cream); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.mercury-page { max-width: 32rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

.mercury-art { margin: 0 auto 1.5rem; }
.mercury-art img { display: block; width: 100%; height: auto; border-radius: 50%; }
.mercury-title { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.15; margin: 0 0 0.75rem; color: var(--copper); }
.mercury-copy { margin: 0 0 2rem; line-height: 1.6; color: var(--cream-dimmed); }

.mercury-orbits h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 0.6rem; }
.mercury-orbits canvas { display: block; width: 100%; background: #000; cursor: pointer; }
.mercury-orbit-top { aspect-ratio: 1; border-radius: 0.9rem 0.9rem 0 0; }
.mercury-orbit-strip { height: 110px; border-top: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 0.9rem 0.9rem; }

/* The current-or-next retrograde card and the retrograde pages (#13844). */
.mercury-retrograde-card { display: grid; justify-items: center; gap: 0.25rem; margin: 0 0 1.75rem; text-align: center; }
.mercury-retrograde-card-kind { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dimmed); }
.mercury-retrograde-card-dates { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }
.mercury-retrograde-card-shadow { font-size: 0.85rem; color: var(--cream-dimmed); }
.mercury-retrograde-card-link { margin-top: 0.15rem; color: var(--mercury); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mercury-back { margin: 0 0 1rem; font-size: 0.9rem; }
.mercury-back a, .mercury-retrograde-nav a { color: var(--copper); text-decoration: none; }
.mercury-retrograde-dates { margin: 0 0 2rem; display: grid; gap: 0.6rem; }
.mercury-retrograde-date { display: grid; gap: 0.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mercury-retrograde-date dt { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dimmed); }
.mercury-retrograde-date dd { margin: 0; font-size: 1rem; }
.mercury-degree { color: var(--mercury); margin-left: 0.4rem; }
.mercury-retrograde-nav { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.mercury-retrograde-next { margin-left: auto; text-align: right; }
.mercury-orbits .mercury-copy { margin-bottom: 1rem; }

/* "By year" (#13865), from the cycles mockup. */
:root { --font-symbols: 'STIX Two Math', math; }
.mercury-by-year { margin-top: 2.5rem; }
.mercury-by-year h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 0.6rem; }
.mercury-calendar-figure { margin: 0; padding: 0.6rem 0.4rem; background: #000; border-radius: 0.9rem; }
.mercury-calendar { display: block; width: 100%; height: auto; }
.mercury-cal-month { font-size: 9px; fill: var(--cream-dimmed); text-anchor: middle; }
.mercury-cal-year { font-size: 10px; fill: var(--cream-dimmed); text-anchor: end; font-variant-numeric: tabular-nums; }
.mercury-cal-year--now { fill: var(--copper); font-weight: 600; }
.mercury-cal-axis { stroke: rgba(255,255,255,0.1); }
.mercury-cal-shadow { opacity: 0.3; }
.mercury-cal-retro--hot { fill: none; stroke: var(--cream); stroke-width: 1.5; }
.mercury-cal-glyph { font-family: var(--font-symbols); font-size: 10px; text-anchor: middle; }
.mercury-cal-now line { stroke: var(--copper); stroke-width: 1; stroke-dasharray: 2 2; } /* dotted, like the first today marker (#13890) */
.mercury-cal-now text { font-size: 7px; font-weight: 600; fill: var(--copper); text-anchor: middle; }
.mercury-orbit-views { border-radius: 0.9rem; }
.mercury-orbit-views:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* The per-cycle page (#13878/#13880). */
.mercury-muted { color: var(--cream-dimmed); }
.mercury-sign { font-family: var(--font-symbols); }
.mercury-cycle-section { margin: 0 0 2rem; }
.mercury-cycle-section h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 0.5rem; }
.mercury-cycle-section h3 { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dimmed); margin: 0.9rem 0 0.35rem; font-weight: 500; }
.mercury-cycle-figure { margin: 0; padding: 0.6rem 0.4rem; background: #000; border-radius: 0.9rem; }
.mercury-cycle-chart { display: block; width: 100%; height: auto; }
.mercury-cycle-chart text { font-family: var(--font-body); }
.mercury-chart-grid { stroke: rgba(255,255,255,0.09); }
.mercury-chart-grid-label { font-size: 8.5px; fill: var(--cream-dimmed); text-anchor: middle; }
.mercury-chart-axis { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--cream-dimmed); }
.mercury-chart-sun { font-size: 15px; fill: #FFD700; text-anchor: middle; }
.mercury-chart-sun-line { stroke: #FFD700; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.75; }
.mercury-chart-shadow { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.3); stroke-dasharray: 3 3; }
.mercury-chart-retro { fill: rgba(255,107,90,0.12); }
.mercury-chart-path { stroke: var(--mercury); stroke-width: 2.4; stroke-linecap: round; }
.mercury-chart-path--retro { stroke: #ff6b5a; }
.mercury-chart-today { stroke: var(--copper); stroke-dasharray: 2 2; }
.mercury-chart-today-label { font-size: 9px; fill: var(--copper); text-anchor: end; letter-spacing: 0.1em; text-transform: uppercase; }
.mercury-chart-leader { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 0.8; }
.mercury-chart-dot { fill: #000; stroke: var(--cream); stroke-width: 1.5; }
.mercury-chart-dot--superior, .mercury-chart-dot--superior-next, .mercury-chart-dot--inferior { fill: #FFD700; stroke: #000; }
.mercury-chart-dot--station-rx, .mercury-chart-dot--station-d { fill: #ff6b5a; stroke: #000; }
.mercury-chart-ingress { stroke-width: 2.5; stroke-linecap: round; }
.mercury-chart-title { font-size: 11px; fill: var(--cream); }
.mercury-chart-date { font-weight: 600; fill: var(--copper); }
.mercury-chart-note { font-size: 9.5px; fill: var(--cream-dimmed); }
/* Five tiles across without wrapping, even on a phone (Jes, Telegram #13972). */
.mercury-chips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; }
.mercury-chips a { display: grid; justify-items: center; gap: 0.1rem; min-width: 0; padding: 0.35rem 0.15rem; border-radius: 0.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--cream); text-decoration: none; white-space: nowrap; }
.mercury-chip-signs { font-size: 1.05rem; line-height: 1; }
.mercury-chip-date { font-size: 0.68rem; color: var(--cream-dimmed); }
.mercury-chip-year { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.mercury-chip-here a { background: rgba(135,206,235,0.16); border-color: var(--mercury); }
.mercury-cycle-section .mercury-copy { margin-bottom: 0.75rem; }
.mercury-title--retrograde { margin-bottom: 0.2rem; }
.mercury-retrograde-span { margin: 0 0 1.25rem; font-family: var(--font-display); font-size: 1.35rem; color: var(--cream); }

/* The cycle on the zodiac (Jes, Telegram #13912). */
/* Three quarters of the column, centred (Jes, Telegram #13916). */
.mercury-cycle-figure--wheel { width: 75%; margin: 0 auto; }
.mercury-cycle-wheel { display: block; width: 100%; height: auto; }
.mercury-wheel-sector { opacity: 0.85; stroke: #000; stroke-width: 0.6; }
.mercury-wheel-glyph { font-family: var(--font-symbols); font-size: 14px; fill: #000; text-anchor: middle; }
.mercury-wheel-spoke { stroke: rgba(255,255,255,0.07); }
.mercury-wheel-shadow { fill: rgba(255,255,255,0.07); stroke: rgba(255,255,255,0.35); stroke-dasharray: 3 3; }
.mercury-wheel-path { stroke: var(--mercury); stroke-width: 2.4; stroke-linecap: round; }
.mercury-wheel-path--retro { stroke: #ff6b5a; }
.mercury-wheel-earth { font-size: 16px; fill: var(--cream); text-anchor: middle; }
.mercury-wheel-date { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--copper); text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.mercury-wheel-date--station-rx { fill: #ff6b5a; }
/* Station direct in the direct-motion blue, on every planet (Jes, Telegram #13973). */
.mercury-wheel-date--station-d { fill: #87CEEB; }

/* Local dates (Jes, Telegram #13921): the zone they are in, and the S-curve's labels as links to that day on planets.at. */
.mercury-zone { margin: -0.9rem 0 1.25rem; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--cream-dimmed); }
.mercury-retrograde-card .mercury-zone { margin: 0.35rem 0 0; }
.mercury-chart-link { cursor: pointer; }
.mercury-chart-link:hover .mercury-chart-title, .mercury-chart-link:focus .mercury-chart-title { text-decoration: underline; }

/* The opposition glyph above "opp." on an outer planet's S-curve (Jes, Telegram #14022). */
.mercury-chart-opposition { font-family: var(--font-symbols); font-size: 14px; fill: var(--cream); text-anchor: middle; }

/* The footer: a box per planet's site (Jes, Telegram #14033). */
.retrograde-sites { margin: 2.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); }
/* Five across (Saturn, #14067), the type a size down to fit a phone. */
.retrograde-sites ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; }
.retrograde-sites li { display: grid; } /* each box the row's full height */
.retrograde-sites a { display: grid; align-content: start; justify-items: center; gap: 0.1rem; padding: 0.55rem 0.1rem 0.5rem; border-radius: 0.6rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--cream); text-decoration: none; text-align: center; }
.retrograde-site--here a { border-color: var(--site); background: color-mix(in srgb, var(--site) 12%, transparent); }
.retrograde-site-symbol { font-family: var(--font-symbols); font-size: 1.35rem; line-height: 1.1; color: var(--site); }
.retrograde-site-name { font-family: var(--font-display); font-size: 0.85rem; }
.retrograde-site-kind { font-size: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream-dimmed); margin-top: 0.15rem; line-height: 1.2; }
.retrograde-site-dates { font-size: 0.62rem; line-height: 1.25; }
/* The ball that runs the cycle wheel's track (Jes, Telegram #14018). */
.mercury-wheel-ball { fill: var(--mercury); stroke: #000; stroke-width: 1.2; }
.mercury-wheel-ball--retro { fill: #ff6b5a; }

/* The signs as diagonal zones on the S-curve (Jes, Telegram #14063, #14066). */
.mercury-chart-zone { opacity: 0.16; }
.mercury-chart-zone-glyph { font-family: var(--font-symbols); font-size: 13px; text-anchor: middle; opacity: 0.8; }

/* The Sun on the wheel's ring (#14103, #14114), and the ball Sun-yellow at a conjunction or opposition. */
.mercury-wheel-sun { font-family: var(--font-symbols); font-size: 17px; fill: #FFD700; stroke: #000; stroke-width: 0.6; paint-order: stroke; text-anchor: middle; }
.mercury-wheel-ball.mercury-wheel-ball--sun { fill: #FFD700; }

/* The retrograde close up (Jes, Telegram #14115): the stickers' pieces on this page's dark ground. */
.retrograde-closeup { width: 100%; height: auto; display: block; }
.closeup-bg { fill: #121217; }
.closeup-wedge { fill: rgba(255,255,255,0.06); }
.closeup-station-line { stroke: rgba(243,239,230,0.35); stroke-width: 0.35; }
.closeup-spoke { stroke-width: 0.4; opacity: 0.7; }
.closeup-tick { stroke: rgba(243,239,230,0.45); stroke-width: 0.25; }
.closeup-rim { fill: none; stroke: rgba(243,239,230,0.45); stroke-width: 0.35; }
.closeup-sign { font-family: var(--font-display); font-size: 3.2px; opacity: 0.9; }
.closeup-sun { fill: #FFD700; opacity: 0.55; }
/* Colour-coded as the S-curve and the wheel (#14119): the planet's colour
   when direct, faint outside the shadow; its retrograde colour between
   the stations (each planet's sheet sets that). */
.closeup-dot { fill: var(--mercury); stroke: none; }
.closeup-dot--outside { opacity: 0.3; }
.closeup-dot--retro { fill: #ff6b5a; }
.closeup-label { font-size: 2.9px; fill: var(--cream); }
.closeup-label-date { fill: var(--cream-dimmed); }
.closeup-caption { font-size: 3.1px; fill: #FFD700; }

/* Today's planet on the close up (#14135): a dot in its colour, a little bigger than the rest, ringed in the copper of the pages' "now" marks (#14147). */
.closeup-today { fill: var(--mercury); stroke: var(--copper); stroke-width: 0.55; }
.closeup-today--retro { fill: #ff6b5a; }

/* The close up's dot at the wheel ball's moment, glowing (#14136). */
.closeup-dot--glow { transform: scale(2.4); transform-box: fill-box; transform-origin: center; opacity: 1; filter: drop-shadow(0 0 1.2px #fff); }

/* retrograde.observer, small and centred at the very top of a planet's home page (#14157). */
/* The planet's name sits just above ".retrograde.observer", the two reading as the site's hostname (#14758). */
.retrograde-observer-top { margin: 0 0 0.8rem; text-align: center; font-size: 0.78rem; letter-spacing: 0.04em; }
.retrograde-observer-name {
  margin: 0 0 -0.15em; padding: 0 0 0.15em; font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; line-height: 1; letter-spacing: 0.01em; /* the padding takes the gradient under the descenders (J, p) */
  /* planets.at's tinted brass, the planet's colour banded across it (Jes, Telegram #14893); planet_tints.css defines it, polished brass the fallback. */
  background: var(--planet-tinted-brass, var(--brass-polished)); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0.4px rgba(50, 30, 8, 0.7);
}
.retrograde-observer-top nav { margin-top: 0.1rem; }
.retrograde-observer-top a { color: var(--copper); text-decoration: none; } /* the name's colour, as the front page's title (#14166); no underline, even tapped (#14171) */
/* The close up's caption glyph, ☌ or ☍, a size up above its word and date (#14160). */
.closeup-caption-glyph { font-family: var(--font-symbols); font-size: 4.4px; }
/* The Sun's dot for the wheel ball's day: fully opaque, not bigger (#14165). */
.closeup-sun--glow { opacity: 1; }

/* A footer box's "retrograde now" in red (#14172), one red for every planet, Mars too (#14174), as the front page's status. */
.retrograde-site-kind--retrograde { color: #FF6B6B; }

/* Polished brass (Jes, Telegram #14182, "B" #14191): the big titles in a
   gradient with two highlight bands, clipped to the letters, a thin dark rim
   round each; the small links in a subtler two-tone brass. SVG details stay
   flat (--copper), as gradients muddy in thin strokes. */
.mercury-title {
  background: var(--brass-polished); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0.4px rgba(50, 30, 8, 0.7);
}
.mercury-back a, .mercury-retrograde-nav a, .retrograde-observer-top a {
  background: var(--brass-link); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* How long each squeezed stretch of the S-curve holds (Jes, Telegram #14250). */
.mercury-chart-elapse { font-size: 9.5px; font-style: italic; fill: var(--cream-dimmed); }

/* The inner planets' strip label, a tap turning it between the Sun and the planet (Jes, Telegram #14255). */
.mercury-orbits--follow { position: relative; }
.mercury-strip-follow { position: absolute; left: 50%; bottom: 0.25rem; transform: translateX(-50%); padding: 0.35rem 0.6rem; background: none; border: 0; color: rgba(244,241,232,0.75); font: 10px 'IBM Plex Sans', sans-serif; text-decoration: underline dotted rgba(244,241,232,0.45); text-underline-offset: 3px; cursor: pointer; }
.mercury-strip-follow:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; border-radius: 4px; }

/* "Dates for…" opens a place picker (Jes, Telegram #14267). */
.mercury-zone-picker { display: block; }
.mercury-zone-button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: underline dotted rgba(244,241,232,0.45); text-underline-offset: 3px; cursor: pointer; }
.mercury-zone-button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 3px; }
.mercury-zone-dialog { width: min(24rem, calc(100vw - 32px)); max-height: 80vh; padding: 1rem; border: 1px solid rgba(216,178,101,0.35); border-radius: 0.9rem; background: #0b0b10; color: var(--cream); letter-spacing: normal; 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 'IBM Plex Sans', sans-serif; padding: 0.55rem 0.7rem; border-radius: 0.5rem; border: 1px solid rgba(244,241,232,0.25); background: #000; color: var(--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 'IBM Plex Sans', sans-serif; color: var(--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(216,178,101,0.18); }
.mercury-zone-message { font-size: 0.85rem; color: var(--cream-dimmed); padding: 0.3rem 0.2rem; }
.mercury-zone-close { text-align: center; background: none; color: var(--cream-dimmed); }

/* "Visit Mars", under the first paragraph, to the planet's page on planets.at
   (Jes, Telegram #14901): as planets.at's planetary-hour "Visit" links, a
   small dotted-underlined link, here in the sites' flat brass. */
.mercury-copy:has(+ .today-retrograde-link-row) { margin-bottom: 0.6rem; }
.today-retrograde-link-row { margin: 0 0 2rem; text-align: center; font-size: 0.9rem; letter-spacing: 0.02em; }
.today-retrograde-link { color: var(--copper); 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; }