/* RETROGRADE — tokens locked in .tastemaker/style-lock.md.
   Gold leaf on lapis lazuli: the pigment pairing of illuminated-manuscript zodiacs
   and hand-painted celestial atlases. Signals are celadon and rose — the wash
   colours those charts were tinted with — not terminal green and red. */

:root {
  /* colour ------------------------------------------------------------- */
  --bg: #0a0b18;
  --surface: #14172c;
  --ink: #ece6d9;
  --ink-muted: #9b9cb8;
  --accent: #d4af4f;
  --accent-lit: #ecd08a;
  --on-accent: #0a0b18;
  --rule: #262a48;      /* borders only */
  --rule-dim: #646aa0;  /* borders only — 3.83:1, UI-safe but fails as text */
  --up: #5cc2a4;
  --down: #e07a86;

  /* type ---------------------------------------------------------------- */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--2: 0.72rem;
  --step--1: 0.83rem;
  --step-0: 1rem;
  --step-1: 1.16rem;
  --step-2: clamp(1.35rem, 2.2vw, 1.7rem);
  --step-3: clamp(1.7rem, 3.2vw, 2.4rem);
  --step-4: clamp(2.1rem, 4.6vw, 3.4rem);
  --step-5: clamp(3rem, 8.4vw, 6.1rem);
  /* Long-form serif copy: Cormorant needs a size bump over a sans at the same
     nominal step, because its x-height is much smaller. */
  --step-read: clamp(1.24rem, 1.5vw, 1.42rem);

  /* space --------------------------------------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s6: 24px;  --s8: 32px;  --s12: 48px; --s16: 64px;
  --s24: 96px; --s32: 128px;

  --r-sm: 2px;
  --r-md: 4px;

  --shell: 1200px;
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Starfield: a fixed, tiled field of real points behind everything. Deterministic
   (seeded generator, see public/stars.svg) so it never shimmers between renders. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url('/stars.svg');
  background-size: 900px 900px;
  /* Fade the field toward the bottom so text sections stay clean. */
  -webkit-mask-image: radial-gradient(ellipse 120% 78% at 62% 12%, #000 12%, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 78% at 62% 12%, #000 12%, transparent 78%);
}

/* Plate grain — the tooth of hand-made paper, at the edge of perception. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cormorant has a small x-height and light default weight; headings carry more
   weight and slightly looser tracking than the previous face needed. */
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.06; }
p { margin: 0; }
a { color: var(--accent-lit); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------- pieces */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s6);
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
  transform: scaleX(var(--rule-scale, 1));
  transform-origin: left;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 13px var(--s6);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--accent-lit); color: var(--on-accent); }

.btn--ghost { background: transparent; color: var(--accent); border-color: var(--rule-dim); }
.btn--ghost:hover { background: transparent; color: var(--accent-lit); border-color: var(--accent); }

/* --------------------------------------------------------------- header */

.masthead {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--rule);
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s4);
}
.wordmark {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span { color: var(--accent); letter-spacing: 0; font-size: var(--step-1); }

.status {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.status__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 3px rgba(92, 194, 164, 0.16);
}
.status[data-state='stale'] .status__dot,
.status[data-state='error'] .status__dot { background: var(--down); box-shadow: 0 0 0 3px rgba(224, 122, 134, 0.16); }
.status[data-state='loading'] .status__dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(212, 175, 79, 0.16); }

/* ----------------------------------------------------------------- hero */

.hero { padding-block: clamp(var(--s16), 9vw, var(--s32)) var(--s16); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(var(--s12), 6vw, var(--s24));
  align-items: center;
}

.hero h1 {
  font-size: var(--step-5);
  letter-spacing: -0.005em;
  margin-bottom: var(--s6);
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent-lit);
}

.hero__sub {
  font-size: var(--step-1);
  color: var(--ink-muted);
  max-width: 52ch;
  margin-bottom: var(--s8);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s12); }

/* live readout strip — the one stat row */
.vitals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.vitals__cell { padding: var(--s4) var(--s6); border-right: 1px solid var(--rule); min-width: 0; }
.vitals__cell:last-child { border-right: 0; }
.vitals__k {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s2);
}
.vitals__v {
  font-family: var(--mono);
  font-size: var(--step-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
  display: block;
}
.vitals__note { font-family: var(--mono); font-size: var(--step--2); color: var(--ink-muted); }

/* ---------------------------------------------------------------- wheel */

.wheel { display: flex; flex-direction: column; gap: var(--s4); }
.wheel__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.wheel__stage canvas { display: block; }

.wheel__readout {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: var(--s4) var(--s6);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.readout__hint {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.readout__top {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.readout__glyph { font-size: var(--step-2); color: var(--accent); line-height: 1; }
.readout__name { font-family: var(--serif); font-size: var(--step-1); }
.readout__sym {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.14em; color: var(--ink-muted);
}
.readout__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--s2) var(--s4);
  font-family: var(--mono); font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.readout__grid b { display: block; font-weight: 400; font-size: var(--step--2); color: var(--ink-muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* -------------------------------------------------------------- section */

.section { padding-block: clamp(var(--s16), 8vw, var(--s24)); border-top: 1px solid var(--rule); }
.section__head { max-width: 62ch; margin-bottom: var(--s12); }
.section__head h2 {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  margin-bottom: var(--s4);
  text-wrap: balance;
}
.section__head p { color: var(--ink-muted); max-width: 58ch; }

/* -------------------------------------------------------------- transit */

.transit { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(var(--s8), 5vw, var(--s16)); align-items: start; }

.reading__headline {
  font-family: var(--mono);
  font-size: clamp(1.05rem, 2.3vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-lit);
  line-height: 1.25;
  padding-bottom: var(--s6);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--rule);
}
.reading__body p {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-read);
  line-height: 1.56;
  color: var(--ink);
  margin-bottom: var(--s6);
  max-width: 62ch;
}
.reading__body p:last-child { margin-bottom: 0; color: var(--ink-muted); }

/* the aspect card — shows the geometry rather than describing it */
.aspect-card {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: var(--s6);
}
.aspect-card__label {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s4);
}
.aspect-card svg { display: block; width: 100%; height: auto; margin-bottom: var(--s4); }
.aspect-card__rows { display: grid; gap: var(--s2); font-family: var(--mono); font-size: var(--step--1); }
.aspect-card__row { display: flex; justify-content: space-between; gap: var(--s3); }
.aspect-card__row span:first-child { color: var(--ink-muted); }
.aspect-card__row span:last-child { font-variant-numeric: tabular-nums; }

/* sky strip: ten bodies, direct vs retrograde, at a glance */
.skystrip { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.skystrip__pip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 38px; padding: var(--s2) 0;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.skystrip__pip b { font-size: 13px; font-weight: 400; line-height: 1; }
.skystrip__pip[data-dir='up'] { border-color: rgba(92, 194, 164, 0.45); }
.skystrip__pip[data-dir='up'] b { color: var(--up); }
.skystrip__pip[data-dir='down'] { border-color: rgba(224, 122, 134, 0.45); }
.skystrip__pip[data-dir='down'] b { color: var(--down); }

/* ---------------------------------------------------------------- natal */

.natal { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(var(--s8), 5vw, var(--s16)); align-items: start; }

.natal__form {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface); padding: var(--s8);
}
.field { margin-bottom: var(--s6); }
.field label {
  display: block; font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--s3);
}
.field__row { display: flex; gap: var(--s3); }
.field select {
  flex: 1; min-width: 0;
  appearance: none;
  padding: 11px var(--s4);
  border: 1px solid var(--rule-dim);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--step--1);
  cursor: pointer;
}
.field select:hover { border-color: var(--accent); }

.natal__out { min-height: 240px; }
.natal__empty {
  border: 1px dashed var(--rule-dim); border-radius: var(--r-sm);
  padding: var(--s12) var(--s8); text-align: center;
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: 0.1em; color: var(--ink-muted);
}
.natal__sign {
  display: flex; align-items: center; gap: var(--s4);
  padding-bottom: var(--s6); margin-bottom: var(--s6);
  border-bottom: 1px solid var(--rule);
}
.natal__sign-glyph { font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--accent); line-height: 1; }
.natal__sign h3 { font-size: var(--step-3); }
.natal__sign p { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-muted); letter-spacing: 0.08em; }
.natal__lines p {
  font-family: var(--serif); font-style: italic; font-size: var(--step-read);
  line-height: 1.54; margin-bottom: var(--s4); max-width: 58ch;
}
.natal__lines p:first-child { font-style: normal; font-family: var(--sans); font-size: var(--step-0); color: var(--ink-muted); }

/* ------------------------------------------------------------ ephemeris */

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--step--1); }
thead th {
  position: sticky; top: 0;
  background: var(--surface);
  text-align: left;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--s4) var(--s4);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody td {
  padding: var(--s4);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(212, 175, 79, 0.045); }
.t-body { display: flex; align-items: center; gap: var(--s3); }
.t-body__glyph { color: var(--accent); font-size: var(--step-1); width: 1.2em; text-align: center; }
.t-body__name { font-family: var(--serif); font-style: normal; font-size: var(--step-0); }
.t-num { text-align: right; }
.t-dim { color: var(--ink-muted); }

/* range bar: where price sits between its 24h low and high */
.rangebar { display: flex; align-items: center; gap: var(--s3); min-width: 132px; }
.rangebar__track {
  position: relative; flex: 1; height: 6px;
  border: 1px solid var(--rule-dim); border-radius: 1px; min-width: 72px;
}
.rangebar__fill { position: absolute; inset: 0 auto 0 0; background: rgba(212, 175, 79, 0.22); }
.rangebar__mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent-lit); }
.rangebar__pct { font-size: var(--step--2); color: var(--ink-muted); width: 4ch; text-align: right; }

.tag {
  display: inline-block; padding: 2px 7px;
  border: 1px solid var(--rule-dim); border-radius: var(--r-sm);
  font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.tag[data-rank='2'], .tag[data-rank='1'] { border-color: rgba(92, 194, 164, 0.5); color: var(--up); }
.tag[data-rank='-1'], .tag[data-rank='-2'] { border-color: rgba(224, 122, 134, 0.5); color: var(--down); }

/* aspects list */
.aspects { margin-top: var(--s12); }
.aspects__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--s3); }
.aspects__item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--mono); font-size: var(--step--1);
}
.aspects__glyph { font-size: var(--step-1); color: var(--accent); width: 1.4em; text-align: center; }
.aspects__pair { flex: 1; min-width: 0; }
.aspects__pair b { display: block; font-weight: 500; color: var(--ink); }
.aspects__pair span { font-size: var(--step--2); color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.aspects__orb { font-size: var(--step--2); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.note {
  margin-top: var(--s6);
  font-family: var(--mono); font-size: var(--step--2);
  line-height: 1.7; color: var(--ink-muted); max-width: 74ch;
}

/* --------------------------------------------------------------- footer */

.footer { border-top: 1px solid var(--rule); padding-block: var(--s16); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); }
.footer h3 { font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s4); }
.footer p { font-size: var(--step--1); color: var(--ink-muted); max-width: 56ch; margin-bottom: var(--s3); }
.footer strong { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------- share */

.reading__actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s4); margin-top: var(--s8);
}
.share-note {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.1em; color: var(--up);
}

/* ------------------------------------------------------------- forecast */

.forecast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s3);
}
.fc-day {
  display: flex; flex-direction: column;
  padding: var(--s6);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface);
}
.fc-day--now { border-color: var(--accent); }
.fc-day__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s4);
}
.fc-day__date {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}
.fc-day--now .fc-day__date { color: var(--accent); }
.fc-day__moon { font-size: var(--step-1); color: var(--ink); line-height: 1; }
.fc-day__title {
  font-family: var(--serif); font-size: var(--step-2); font-weight: 600;
  line-height: 1.15; margin-bottom: var(--s3);
}
.fc-day__note {
  font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted);
  margin-bottom: var(--s4);
}
.fc-day__moonsign {
  margin-top: auto;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.12em; color: var(--ink-muted);
  padding-top: var(--s3); border-top: 1px solid var(--rule);
}
.fc-day__more {
  margin: var(--s3) 0 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: var(--step--2); color: var(--ink-muted);
}
.fc-day__more li { padding-left: var(--s3); position: relative; margin-top: 2px; }
.fc-day__more li::before { content: '·'; position: absolute; left: 0; color: var(--accent); }

/* -------------------------------------------------------- natal extras */

.check {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.06em; text-transform: none; color: var(--ink-muted);
  cursor: pointer;
}
.check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

.field input[type='text'], .field input:not([type]) {
  width: 100%;
  padding: 11px var(--s4);
  border: 1px solid var(--rule-dim); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: var(--step--1);
}
.field input:hover { border-color: var(--accent); }
.field__hint {
  margin-top: var(--s2);
  font-family: var(--mono); font-size: var(--step--2); color: var(--ink-muted);
}

.keys { display: grid; gap: var(--s3); margin-bottom: var(--s8); }
.key-card {
  display: grid; gap: var(--s1);
  padding: var(--s6);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface);
}
.key-card__k {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.key-card b {
  font-family: var(--serif); font-size: var(--step-3);
  font-weight: 600; line-height: 1.1; color: var(--ink);
}
.key-card span:last-child { font-size: var(--step--1); color: var(--ink-muted); }

.natal__warn {
  padding: var(--s4) var(--s6); margin-bottom: var(--s6);
  border: 1px solid var(--down); border-radius: var(--r-sm);
  font-size: var(--step--1); color: var(--ink);
}

.t-speed { display: block; font-size: var(--step--2); color: var(--ink-muted); }
.skystrip__pip i { font-style: normal; color: var(--down); font-size: 9px; }
.aspects__orb i {
  display: block; font-style: normal; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s12); }
  .wheel__stage { max-width: 560px; margin-inline: auto; width: 100%; }
  .transit, .natal { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
}

@media (max-width: 620px) {
  .masthead__in { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .vitals { grid-template-columns: minmax(0, 1fr); }
  .vitals__cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .vitals__cell:last-child { border-bottom: 0; }
  .hero__actions .btn { flex: 1; justify-content: center; }
  .field__row { flex-direction: column; }
}

/* Motion is opt-in via [data-reveal]; with reduced motion the starter renders
   final state immediately, so nothing here needs a fallback. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}