/* ---------------------------------------------------------------------------
   Solstaria — design system
   Flat colour, hairline rules, one accent. The chart is the only loud thing
   on the site; everything here stays quiet on purpose.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* Krakow, Koln and the rest of the place names that need their own letters */
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink-void:   #0E0B1F;
  --ink-deep:   #16122E;
  --ink-mid:    #211C40;
  --line:       #2E2851;

  --paper:      #F0EAE0;
  --paper-dim:  #A79FB8;
  --paper-mute: #837C9C;   /* rules say #6E6689, which is 3.6:1 and fails AA */

  /* --line is decorative hairline; form fields need a 3:1 boundary */
  --line-field: #645C90;

  --sol:        #E0A24A;
  --sol-lift:   #F2BB6B;
  --sol-deep:   #8C6228;

  --p-sun:#E6C34D; --p-moon:#C4D3E8; --p-mercury:#8FC7B5;
  --p-venus:#D89BB0; --p-mars:#C9584F; --p-jupiter:#C99A5B;
  --p-saturn:#8B8AA3; --p-uranus:#79A9C4; --p-neptune:#7B8FC7;
  --p-pluto:#9B7BA8;

  /* The four elements, and the quality of an aspect. On a drawing colour says
     what something is; gold still says which one is chosen. */
  --el-fire:   #CF7552;
  --el-earth:  #8FA764;
  --el-air:    #9FC3D6;
  --el-water:  #6C7FD0;
  --asp-soft:  #5FB3A1;
  --asp-hard:  #D1586A;
  --asp-joint: #D9B55B;

  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.42rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3:  clamp(1.95rem, 1.62rem + 1.65vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.82rem + 2.9vw, 4.1rem);

  --gap: 1.5rem;
  --rule: 1px solid var(--line);

  /* native controls and scrollbars follow the page, not the OS */
  color-scheme: dark;
}

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

/* The browser hides [hidden] with a rule weak enough that any author rule
   setting display beats it, which quietly breaks every hidden button on the
   site. Said once here rather than remembered at each call site. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink-void);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p, ul, ol { margin: 0; }

a {
  color: var(--paper);
  text-decoration-color: var(--paper-mute);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 120ms linear, text-decoration-color 120ms linear;
}

a:hover { color: var(--sol-lift); text-decoration-color: var(--sol-deep); }

:focus-visible {
  outline: 2px solid var(--sol-lift);
  outline-offset: 3px;
  border-radius: 2px;
}

img, svg, canvas { max-width: 100%; height: auto; display: block; }

/* --- layout ------------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 42rem); }
/* A wrap inside a wrap already has its margin from the outer one; taking
   the 2.5rem off again pushed narrow columns in from the rest of the page. */
.wrap .wrap { width: 100%; }
.wrap .wrap--narrow { width: min(100%, 42rem); }

.grid { display: grid; gap: var(--gap); }
.cols {
  /* Sixteen rems rather than eighteen: three short boxes at eight hundred
     pixels fell to two and a widow, which is worse than three narrow ones. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  counter-reset: panel;
}

.section { padding-block: clamp(3rem, 8vw, 6rem); }

/* A section is a flow like any other and its blocks need air between them.
   The prose block has had this rhythm from the start; everything outside one
   was relying on each component to bring its own margin, and most of them did
   not — which is why a heading could sit directly on the paragraph under it.
   Said once, here, rather than remembered at every new section. */
.section > * + * { margin-top: 1.25rem; }
.section > * + h2 { margin-top: 2.75rem; }
.section > * + h3 { margin-top: 2rem; }

/* Where two sections meet, the hairline is graduated: short ticks every dozen
   pixels and a long one every six of those, which is the scale on the rim of
   the chart wheel and on the dial at the foot of the screen. The site is an
   instrument, and this is the instrument saying so in the one place every
   page has. */
.section + .section,
.site-foot { position: relative; }

.section + .section { border-top: var(--rule); }

.section + .section::before,
.site-foot::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 9px;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 72px)
      0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 12px)
      0 0 / 100% 4px no-repeat;
}

/* the hero already carries its own breathing room below */
.hero + .section { padding-block-start: clamp(1.5rem, 4vw, 2.75rem); }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink-mid);
  border: var(--rule);
}

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

.site-head { border-bottom: var(--rule); }

.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.15rem;
}

.mark {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.mark:hover { color: var(--sol-lift); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--step--1);
}
.nav a {
  position: relative;
  color: var(--paper-dim);
  text-decoration: none;
}
/* A hairline drawn under the word on the way in, the way a division is
   marked, rather than an underline switched on. */
.nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -0.35em;
  height: 1px;
  background: var(--sol-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover { color: var(--sol-lift); }
.nav a[aria-current="page"] { color: var(--paper); }
.nav a[aria-current="page"]::after { background: var(--sol); }

@media (prefers-reduced-motion: reduce) {
  .nav a::after { transition: none; }
}

.site-foot {
  border-top: var(--rule);
  margin-top: clamp(3rem, 8vw, 6rem);
  color: var(--paper-dim);
  font-size: var(--step--1);
}

.site-foot__inner {
  display: grid;
  gap: 1rem;
  padding-block: 2.5rem 3rem;
}

.site-foot__note { max-width: 44ch; color: var(--paper-mute); }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-foot__nav a { color: var(--paper-dim); text-decoration: none; }
.site-foot__mark { color: var(--paper-mute); }

/* --- the mark behind the title --------------------------------------------
   The same drawing that labels the section on the dial, standing behind the
   page it belongs to at twenty times the size and the same hairline weight.
   Behind, not under: it sits on its own layer below the text and takes no
   clicks.
   ------------------------------------------------------------------------- */

main { position: relative; }

.page-mark__field {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: -1;
  pointer-events: none;
}
.page-mark__field .wrap { display: flex; justify-content: flex-end; }

.page-mark {
  width: min(20rem, 40vw);
  height: auto;
  margin-block-start: clamp(1.5rem, 5vw, 3.5rem);
  color: var(--line);
  fill: none;
  stroke: var(--line);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A hairline stays a hairline however large the mark is drawn. Set on the
   shapes rather than on the root, because this one does not inherit. */
.page-mark > * { vector-effect: non-scaling-stroke; stroke-width: 1; }

/* --- prose -------------------------------------------------------------- */

.prose { max-width: 66ch; }
.prose > * + * { margin-top: 1.15em; }
.prose > * + h2 { margin-top: 2.4em; }
.prose > * + h3 { margin-top: 1.9em; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4em; }
.prose strong { font-weight: 600; color: var(--paper); }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--paper-dim);
  max-width: 52ch;
}

.muted { color: var(--paper-mute); }

/* A remark that belongs to the thing above it rather than to the page: set
   against a hairline in the margin, the way a note is written beside a line in
   a book rather than underneath it. */
.note {
  border-inline-start: 1px solid var(--sol-deep);
  padding-inline-start: 1rem;
  max-width: 62ch;
  margin-top: var(--gap);
}

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

.hero { padding-block: clamp(3.5rem, 10vw, 7rem) clamp(2.5rem, 6vw, 4rem); }
.hero h1 { max-width: 16ch; }
.hero .lead { margin-top: 1.5rem; }

/* An ordinary bordered box. It was called .card until the tarot arrived with
   cards of its own further down this file and quietly handed every one of
   these the proportions of a playing card. Two things cannot share a name. */
.panel {
  position: relative;
  background: var(--ink-deep);
  border: var(--rule);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  counter-increment: panel;
}

/* Numbered like plates in a book, in the display face, at the weight of the
   rules rather than of the text. */
.panel::before {
  content: counter(panel, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  color: var(--sol-deep);
  margin-bottom: 0.8rem;
}
.panel h3 { margin-bottom: 0.5rem; }
.panel p { color: var(--paper-dim); }

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--sol-deep);
  background: transparent;
  color: var(--sol-lift);
  font: inherit;
  font-size: var(--step-0);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms linear, border-color 120ms linear,
              color 120ms linear, transform 120ms ease;
}
/* It gives under the thumb by a pixel. Nothing else, and nothing that has to
   be waited for. */
.btn:active { transform: translateY(1px); }
.btn:hover {
  background: var(--sol);
  border-color: var(--sol);
  color: var(--ink-void);
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:disabled:hover { background: transparent; color: var(--sol-lift); border-color: var(--sol-deep); }

.btn--quiet {
  border-color: var(--line);
  color: var(--paper);
}
.btn--quiet:hover { background: var(--ink-mid); border-color: var(--paper-mute); color: var(--paper); }

/* --- forms -------------------------------------------------------------- */

.form-block { display: grid; gap: var(--gap); max-width: 34rem; }

.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset > legend { padding: 0; font-size: var(--step--1); color: var(--paper-dim); }

.field { display: grid; gap: 0.4rem; }
.field > label { font-size: var(--step--1); color: var(--paper-dim); }

.field input,
.field select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--ink-void);
  border: 1px solid var(--line-field);
  color: var(--paper);
  font: inherit;
  font-size: var(--step-0);
  border-radius: 0;
  appearance: none;
}
.field input:hover, .field select:hover { border-color: var(--paper-dim); }
.field input::placeholder { color: var(--paper-mute); }

.field-row { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); }

/* day and month share a line, year takes its own until there is room */
.field-row--date { grid-template-columns: 1fr 1fr; }
.field-row--date > :last-child { grid-column: 1 / -1; }

@media (min-width: 30rem) {
  .field-row--date { grid-template-columns: 0.8fr 1.5fr 1fr; }
  .field-row--date > :last-child { grid-column: auto; }
}

.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  color: var(--paper-dim);
}
.check input {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  accent-color: var(--sol);
}

.hint { font-size: var(--step--1); color: var(--paper-mute); max-width: 56ch; }

.actions { margin-top: 2rem; }

/* a heading followed by its content block */
.section > h2 + .grid,
.section > h2 + .prose { margin-top: 2rem; }

/* --- placeholder while a phase is unfinished ---------------------------- */

.pending {
  border: 1px dashed var(--line);
  padding: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
  color: var(--paper-mute);
}

/* --- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- place lookup -------------------------------------------------------- */

.combo { position: relative; }

.combo__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 17rem;
  overflow-y: auto;
  background: var(--ink-deep);
  border: 1px solid var(--line-field);
  border-top: 0;
}

.combo__option {
  display: block;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-top: var(--rule);
  background: transparent;
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.combo__option:first-child { border-top: 0; }
.combo__option:hover,
.combo__option:focus-visible { background: var(--ink-mid); }
.combo__option small {
  display: block;
  color: var(--paper-mute);
  font-size: var(--step--1);
}

.form-error {
  color: var(--p-mars);
  font-size: var(--step--1);
}

/* --- chart readout ------------------------------------------------------- */

.chart-output { display: grid; gap: 2rem; }

.chart-head {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
}

.chart-note {
  border-left: 2px solid var(--sol-deep);
  padding-left: 1rem;
  color: var(--paper-dim);
  max-width: 60ch;
}

.chart-choice {
  border: var(--rule);
  background: var(--ink-deep);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 1rem;
  justify-items: start;
  max-width: 44rem;
}
.chart-choice p { color: var(--paper-dim); }

/* Wide tables scroll inside their own box rather than the page. */
.table-scroll { overflow-x: auto; }

table.data {
  border-collapse: collapse;
  width: 100%;
  min-width: 22rem;
  font-variant-numeric: tabular-nums;
}
table.data caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  padding-bottom: 0.75rem;
}
table.data th,
table.data td {
  text-align: left;
  padding: 0.55rem 0.9rem 0.55rem 0;
  border-bottom: var(--rule);
}
table.data th {
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--paper-mute);
}
table.data td.num { font-variant-numeric: tabular-nums; }
table.data tr.is-angle td { color: var(--sol-lift); }

.chart-working { border-top: var(--rule); padding-top: 1rem; }
.chart-working summary {
  cursor: pointer;
  color: var(--paper-dim);
  font-size: var(--step--1);
}
.chart-working summary:hover { color: var(--sol-lift); }
.chart-working dl {
  display: grid;
  grid-template-columns: minmax(10rem, auto) 1fr;
  gap: 0.35rem 1.5rem;
  margin: 1.25rem 0 0;
  font-size: var(--step--1);
}
.chart-working dt { color: var(--paper-mute); }
.chart-working dd { margin: 0; font-variant-numeric: tabular-nums; }

@media (max-width: 30rem) {
  .chart-working dl { grid-template-columns: 1fr; gap: 0 }
  .chart-working dd { margin-bottom: 0.75rem; }
}

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

.chart-wheel { margin-block: 0.5rem; }

.wheel {
  display: block;
  width: min(100%, 38rem);
  margin-inline: auto;
  height: auto;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

.wheel__planet { cursor: pointer; }
.wheel__planet:focus-visible { outline: none; }

/* --- picking a planet out of the web -------------------------------------
   The wheel carries forty-odd aspect lines. Left alone they are a texture;
   pointed at, one planet's own threads should be the only ones lit.
   ------------------------------------------------------------------------- */

.wheel__aspect,
.wheel__planet path,
.wheel__planet circle {
  transition: stroke-opacity 160ms linear, opacity 160ms linear,
              stroke-width 160ms linear;
}

.wheel.is-picking .wheel__aspect { stroke-opacity: 0.05 !important; }
.wheel.is-picking .wheel__aspect.is-lit {
  stroke-opacity: 0.85 !important;
  stroke-width: 1.4;
}

.wheel.is-picking .wheel__planet { opacity: 0.28; }
.wheel.is-picking .wheel__planet.is-lit { opacity: 1; }
.wheel__planet:hover path,
.wheel__planet:focus-visible path { stroke-width: 3.4; }

@media (prefers-reduced-motion: reduce) {
  .wheel__aspect, .wheel__planet path, .wheel__planet circle { transition: none; }
}

/* --- the shareable picture ------------------------------------------------ */

.share { display: grid; gap: 1rem; justify-items: start; }

.share__frame {
  border: var(--rule);
  padding: 0.75rem;
  background: var(--ink-deep);
  min-height: 8rem;
  display: grid;
  place-items: center;
  width: fit-content;
}

.share__preview {
  display: block;
  width: 15rem;
  max-width: 100%;
  height: auto;
}

/* --- compatibility ------------------------------------------------------- */

.person { align-content: start; }
.hint--spaced { margin-top: 1.5rem; }

.axes {
  display: grid;
  gap: 1.75rem;
  margin-top: 2rem;
}

.axis {
  border-top: var(--rule);
  padding-top: 1.25rem;
  display: grid;
  gap: 0.6rem;
  max-width: 46rem;
}

.axis__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.axis__head h3 { margin: 0; }

.axis__score {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--sol-lift);
  font-variant-numeric: tabular-nums;
}

/* One colour for all five. Colouring by value would turn a description into
   a verdict, which is exactly what the five axes exist to avoid. */
.axis__meter {
  height: 6px;
  background: var(--line);
}
.axis__meter span {
  display: block;
  height: 100%;
  background: var(--sol);
}

.axis__blurb { color: var(--paper-mute); font-size: var(--step--1); }

.axis__contacts {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  color: var(--paper-mute);
  font-size: var(--step--1);
}
.axis__contacts li + li { margin-top: 0.25rem; }

/* --- cluster pages -------------------------------------------------------- */

.tool-block { margin-top: 1.5rem; }

.handoff {
  border: var(--rule);
  background: var(--ink-deep);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.disclosure {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--paper-mute);
  max-width: 58ch;
}

.faq { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.faq__item { display: grid; gap: 0.4rem; max-width: 62ch; }
.faq__item h3 { font-size: var(--step-1); }
.faq__item p { color: var(--paper-dim); }

.linkset {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 46rem;
}
.linkset li { border-top: var(--rule); }
.linkset li:last-child { border-bottom: var(--rule); }
.linkset a,
.topiclist a {
  position: relative;
  transition: padding-inline-start 180ms cubic-bezier(0.2, 0.9, 0.3, 1),
              color 120ms linear;
}

/* The row answers with a division mark, drawn in the same gold as the
   principal divisions on every scale here, sliding out of the margin and
   taking the line with it. */
.linkset a::before,
.topiclist a::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--sol);
  transition: width 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.linkset a:hover,
.linkset a:focus-visible,
.topiclist a:hover,
.topiclist a:focus-visible { padding-inline-start: 1.7rem; }

.linkset a:hover::before,
.linkset a:focus-visible::before,
.topiclist a:hover::before,
.topiclist a:focus-visible::before { width: 1.1rem; }

.linkset a {
  display: block;
  padding: 0.9rem 0;
  text-decoration: none;
  color: var(--paper);
}
.linkset a:hover { color: var(--sol-lift); }

/* --- topics index --------------------------------------------------------- */

.topiclist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.topiclist li { border-top: var(--rule); }
.topiclist li:last-child { border-bottom: var(--rule); }
.topiclist a {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 0;
  text-decoration: none;
  color: var(--paper);
}
.topiclist a span { font-family: var(--font-display); font-size: var(--step-1); }
.topiclist a small { color: var(--paper-mute); font-size: var(--step--1); }
.topiclist a:hover span { color: var(--sol-lift); }

/* --- the corner key --------------------------------------------------------
   A small dial face that opens the index. It carries the mark of the section
   you are in, so it says where you are before it says what it does. Fixed in
   the corner at every width: on a phone it is the navigation, on a wide screen
   it is the way to everything the header has no room for.
   ------------------------------------------------------------------------- */

@media (max-width: 46rem) {
  body { padding-bottom: 6rem; }
}
@media (display-mode: standalone) {
  body { padding-bottom: 6rem; }
}

.dial {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 40;
}

/* Opening turns the bezel and swaps the mark for a cross. The ring moves and
   the index mark does not, which is the difference between a bezel and a
   spinner. A moat in the colour of the ground keeps the key off whatever it
   happens to be sitting over, without a glow. */
.dial__key {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--ink-deep);
  color: var(--sol);
  text-decoration: none;
  box-shadow: 0 0 0 5px var(--ink-void);
  transition: transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.2), color 150ms linear;
}
.dial__key > svg { grid-area: 1 / 1; }
.dial__key:active { transform: scale(0.94); }
.dial__key:hover { color: var(--sol-lift); }

.dial__bezel { width: 3.5rem; height: 3.5rem; overflow: visible; }
.dial__ring,
.dial__ticks,
.dial__index {
  fill: none;
  stroke: var(--sol-deep);
  stroke-width: 1;
  stroke-linecap: round;
  transition: stroke 150ms linear;
}
.dial__ticks { opacity: 0.8; }
.dial__index { stroke: var(--sol); stroke-width: 1.8; }
/* Turned by script, with the page as it scrolls and by a hand on the key. */
.dial__cog { transform-origin: 0 0; }
.dial__key { touch-action: none; }
.dial__key:hover .dial__ring,
.dial__key:hover .dial__ticks { stroke: var(--sol); }

.dial__here,
.dial__shut {
  width: 22px;
  height: 22px;
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dial__here {
  stroke: currentColor;
  transition: opacity 150ms linear, transform 240ms ease;
}
.dial__shut {
  stroke: var(--paper);
  stroke-width: 1.5;
  opacity: 0;
  transform: scale(0.6) rotate(-40deg);
  transition: opacity 150ms linear,
              transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.dial[data-open] .dial__here { opacity: 0; transform: scale(0.7); }
.dial[data-open] .dial__shut { opacity: 1; transform: scale(1) rotate(0deg); }

.dial__key-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* --- the index -------------------------------------------------------------
   Every section in its group, with its mark, its name and one line about it.
   Without JavaScript it is simply the last thing on every page. With it, the
   same markup becomes a sheet that rises from the foot of the screen.
   ------------------------------------------------------------------------- */

.index {
  border-top: var(--rule);
  padding-block: 2.5rem 3rem;
}

.index__inner { display: grid; gap: 1.75rem; }

.index__grip { display: none; }
.index__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
}

.index__group { display: grid; gap: 0.7rem; }
.index__label {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--sol);
}

.index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.index__list a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: center;
  min-height: 3.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 140ms linear, background-color 140ms linear;
}
.index__mark {
  grid-row: 1 / span 2;
  justify-self: center;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--sol);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.index__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
}
.index__line {
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--paper-mute);
}
.index__list a:hover,
.index__list a:focus-visible {
  border-color: var(--sol-deep);
  background: var(--ink-mid);
}
.index__list a[aria-current="page"] { border-color: var(--sol-deep); }
.index__list a[aria-current="page"] .index__name { color: var(--sol-lift); }

/* --- the index as a sheet ------------------------------------------------- */

html.is-locked { overflow: hidden; }

.index.is-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  max-height: min(88vh, 54rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-deep);
  border-top: 1px solid var(--line-field);
  /* room at the foot for the key, which stays above the sheet as its close */
  padding-block: 0 6.5rem;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 360ms cubic-bezier(0.2, 0.9, 0.3, 1),
              visibility 0s linear 360ms;
}
.index.is-sheet.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s, 0s;
}

.index.is-sheet .index__head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 0.6rem 1rem;
  background: var(--ink-deep);
  touch-action: none;
  cursor: grab;
}
/* the same graduated rule every section join carries, under the title */
.index.is-sheet .index__head::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 9px;
  border-top: var(--rule);
  background:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 72px)
      0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 12px)
      0 0 / 100% 4px no-repeat;
}
.index.is-sheet .index__grip {
  display: block;
  width: 2.75rem;
  height: 4px;
  margin: 0 auto 0.85rem;
  border-radius: 2px;
  background: var(--line-field);
}

/* Entries rise in behind the sheet, a beat apart. The invisible state lives
   only inside the keyframes, so an entry that never animates is in place. */
@keyframes solstaria-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.index.is-sheet.is-open .index__list li {
  animation: solstaria-rise 320ms cubic-bezier(0.2, 0.9, 0.3, 1) var(--rise, 0ms) both;
}

.index-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  border: 0;
  padding: 0;
  background: rgba(8, 6, 20, 0.74);
  opacity: 0;
  transition: opacity 240ms linear;
}
.index-scrim[data-shown] { opacity: 1; }

.nav__all { color: var(--sol-lift); }

@media (prefers-reduced-motion: reduce) {
  .dial__key, .dial__cog, .dial__here, .dial__shut,
  .index.is-sheet, .index-scrim { transition: none; }
  .index.is-sheet.is-open .index__list li { animation: none; }
}

/* --- the header on a phone -----------------------------------------------
   The dial carries navigation on narrow screens, so the header links are a
   second copy of it costing a row of height on the first screen somebody
   sees. The wordmark stays; the rest goes.
   ------------------------------------------------------------------------- */

@media (max-width: 46rem) {
  .site-head .nav { display: none; }
  .site-head__inner { padding-block: 0.9rem; }
}

/* --- the section scale ----------------------------------------------------
   On a wide screen the column of text sits in the middle with a great deal
   of nothing either side. A long piece gets a graduated scale in that space:
   one division per section, the one you are reading marked. Built from the
   headings already in the page, so it cannot describe an article that is not
   there.
   ------------------------------------------------------------------------- */

.scale { display: none; }

@media (min-width: 75rem) {
  .scale {
    display: block;
    position: fixed;
    left: max(1.5rem, calc(50% - 32rem));
    top: 50%;
    transform: translateY(-50%);
    width: 13rem;
    z-index: 5;
  }
}

.scale ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

/* Fixed row height with the label taken out of the flow. A hidden label that
   still occupies space would make the scale as tall and as ragged as the
   headings happen to be, which is the opposite of a scale. */
.scale a {
  position: relative;
  display: block;
  height: 1.15rem;
  text-decoration: none;
  color: var(--paper-mute);
  font-size: var(--step--1);
  line-height: 1.3;
}

/* The division mark. Longer and gold for the section in view, the way the
   principal divisions are longer on the chart's degree ring. */
.scale a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 0.9rem;
  background: var(--line);
  transition: width 160ms ease, background-color 160ms linear;
}

.scale a span {
  position: absolute;
  left: 2.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 10rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms linear;
}

.scale a:hover::before,
.scale a:focus-visible::before { width: 2.25rem; background: var(--paper-mute); }
.scale a:hover span,
.scale a:focus-visible span { opacity: 1; color: var(--paper-dim); }

.scale li[data-here] a::before { width: 2.25rem; background: var(--sol); }
.scale li[data-here] a span { opacity: 1; color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .scale a::before, .scale a span { transition: none; }
}

/* --- the personal line ----------------------------------------------------
   The one place colour is allowed outside the chart, because it is the chart
   speaking: the planet's own colour on the planet's own name.
   ------------------------------------------------------------------------- */

.personal {
  max-width: 60ch;
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--sol-deep);
  color: var(--paper-dim);
  font-size: var(--step--1);
}
.personal__body { font-weight: 400; }

/* --- the chart arriving ---------------------------------------------------
   The single moment of movement the design allows: the rings draw themselves
   and the planets settle onto them, then nothing moves again.

   Nothing here animates opacity. A background tab freezes an animation on
   its first frame, so anything starting from invisible would stay invisible
   for somebody who switched tabs while the chart drew. Frozen halfway, this
   version is a slightly small glyph on an undrawn ring: not what was
   intended, and perfectly readable.
   ------------------------------------------------------------------------- */

@keyframes solstaria-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Scale only, never opacity. A paused animation holds its first frame, and
   a first frame of opacity zero means an invisible chart on any tab that was
   in the background while it drew. Held at the first frame of this one, the
   glyphs are merely a little small, which nobody would even notice. */
@keyframes solstaria-settle {
  from { transform: scale(0.68); }
  to   { transform: scale(1); }
}

.wheel__ring { stroke-dasharray: 1; stroke-dashoffset: 0; }
.wheel.is-arriving .wheel__ring {
  animation: solstaria-draw 900ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

.wheel__planet { transform-box: fill-box; transform-origin: 50% 50%; }
.wheel.is-arriving .wheel__planet {
  animation: solstaria-settle 520ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@media (prefers-reduced-motion: reduce) {
  .wheel.is-arriving .wheel__ring,
  .wheel.is-arriving .wheel__planet { animation: none; }
}

table.data tr.is-linked { cursor: default; }
table.data tr.is-linked:hover td { color: var(--paper); background: var(--ink-deep); }

.wheel-readout {
  margin-top: 0.75rem;
  text-align: center;
  font-size: var(--step--1);
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}
.wheel-readout.is-reading { color: var(--paper); }

/* --- the cover ------------------------------------------------------------
   The first screen belongs to the instrument. The words sit beside it and say
   what the site does; the dial shows it, on a face of its own, with the date it
   is showing read out underneath, a scale to move time along, and a key to
   pick up any one of the ten bodies. On a phone the words come first, because
   that is what somebody arriving needs to read, and the instrument straight
   after, because that is what they came to look at.
   ------------------------------------------------------------------------- */

.cover { padding-block: clamp(1.75rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem); }

.cover__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .cover {
    display: grid;
    align-items: center;
    min-height: calc(100svh - 4.65rem);
    padding-block: 1.25rem 1.75rem;
  }
  .cover__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.cover__words h1 {
  font-size: clamp(2.55rem, 1.5rem + 4.4vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  max-width: 14ch;
}
.cover__words .lead { margin-top: 1.6rem; max-width: 38ch; text-wrap: pretty; }
.cover__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cover__promise {
  margin-top: 1.1rem;
  max-width: 40ch;
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-wrap: pretty;
}
.cover__back { margin-top: 1.75rem; color: var(--paper-dim); text-wrap: pretty; }
.cover__back a { color: var(--sol-lift); }

/* The one filled button on the site: the action the first screen is for. */
.btn--solid { background: var(--sol); border-color: var(--sol); color: var(--ink-void); }
.btn--solid:hover { background: var(--sol-lift); border-color: var(--sol-lift); color: var(--ink-void); }

.cover__instrument { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }

/* The dial itself. Two canvases in one square: the engraved plate, which is
   drawn once, and the live layer, which is redrawn on every frame of a drag. */
.orrery {
  position: relative;
  width: min(100%, 40rem);
  aspect-ratio: 1;
}

/* On a wide screen the whole instrument, dial, date, scale and key, stands
   inside the first screen: the dial gives up size to the height of the window
   rather than pushing its own controls below the fold. */
@media (min-width: 60rem) {
  .orrery { width: min(100%, 40rem, max(26rem, calc(100svh - 22rem))); }
}

/* The face the dial is engraved on: one flat tone and a hairline edge, the
   way an instrument has a face, not a light behind it. */
.orrery::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ink-deep);
  box-shadow: 0 0 0 1px var(--line);
}

.orrery__plate,
.orrery__live { position: absolute; left: 0; top: 0; }

/* Vertical scrolling still belongs to the page; only sideways is ours. */
.orrery__live {
  touch-action: pan-y;
  cursor: grab;
  border-radius: 50%;
}
.orrery__live.is-picking { cursor: pointer; }
.orrery__live.is-dragging { cursor: grabbing; }

/* Room kept for the date and a line under it whatever they say, so nothing
   below the dial moves when a planet is picked up. */
.orrery__foot {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  text-align: center;
  min-height: 4.6em;
}
.orrery__dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem 1rem;
}
.orrery__date {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.35rem);
  line-height: 1.1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.orrery__readout {
  min-height: 1.65em;
  font-size: var(--step--1);
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}

.orrery__now {
  font: inherit;
  font-size: var(--step--1);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line-field);
  background: transparent;
  color: var(--paper-dim);
  cursor: pointer;
}
.orrery__now:hover { border-color: var(--sol-deep); color: var(--sol-lift); }

/* The scale: a day to a tick, a month to a long one, today in white and the
   day shown in gold. */
.orrery__ruler {
  width: min(100%, 36rem);
  height: 58px;
  touch-action: pan-y;
  cursor: ew-resize;
  border-radius: 4px;
}
.orrery__ruler:focus { outline: none; }
.orrery__ruler:focus-visible { outline: 2px solid var(--sol-lift); outline-offset: 4px; }
.ruler__svg { display: block; max-width: none; }
.ruler__base,
.ruler__fine { fill: none; stroke: var(--line-field); stroke-width: 1; }
.ruler__bold { fill: none; stroke: var(--paper-mute); stroke-width: 1.2; }
.ruler__today { stroke: var(--paper); stroke-width: 1.5; }
.ruler__label {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 12px;
}
.ruler__needle path { stroke: var(--sol); stroke-width: 2; }
.ruler__needle circle { fill: var(--sol); }

/* The key: ten bodies, five to a row on a phone and all ten abreast wider. */
.orrery__key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 2.6rem);
  gap: 0.3rem;
  justify-content: center;
}
@media (min-width: 32rem) {
  .orrery__key { grid-template-columns: repeat(10, 2.6rem); }
}
.orrery__body {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--body);
  cursor: pointer;
  transition: border-color 120ms linear, background-color 120ms linear, transform 120ms ease;
}
.orrery__body svg { width: 1.35rem; height: 1.35rem; }
.orrery__body:hover { border-color: var(--line-field); }
.orrery__body:active { transform: translateY(1px); }
.orrery__body[aria-pressed="true"] { border-color: var(--sol); background: var(--ink-mid); }

/* --- cards ----------------------------------------------------------------
   Portrait plates with an engraved back. The flip is a real rotation of a
   two-sided element rather than a swap of two pictures, which is what makes
   it feel like a card rather than a slideshow.
   ------------------------------------------------------------------------- */

.card {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 150;
  perspective: 1100px;
}

.card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(0.3, 0.8, 0.25, 1);
}
.card.is-face-up .card__inner { transform: rotateY(180deg); }

.card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 1px solid var(--line);
  background: var(--ink-deep);
  display: grid;
  place-items: center;
}
.card__face svg { width: 100%; height: 100%; display: block; }

.card__front {
  transform: rotateY(180deg);
  grid-template-rows: auto 1fr auto auto;
  padding: 0.75rem 0.5rem 0.6rem;
  color: var(--sol);
  gap: 0.25rem;
}

.card__emblem { width: 78%; height: auto; justify-self: center; }

.card__roman,
.card__name {
  font-family: var(--font-display);
  line-height: 1.1;
  text-align: center;
}
/* paper-dim, not paper-mute: on the card's own ground the muted tone was just
   under 4.5:1 for text this small */
.card__roman { font-size: 0.85rem; color: var(--paper-dim); letter-spacing: 0.06em; }
.card__name { font-size: clamp(0.85rem, 2.2vw, 1.05rem); color: var(--paper); }

/* In the flow, not floated over the name it kept landing on. */
.card__reversed {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--paper-mute);
}

/* --- turning today's card ------------------------------------------------- */

.draw { display: grid; gap: 1.5rem; justify-items: start; }

.draw__stage {
  position: relative;
  width: min(100%, 15rem);
  aspect-ratio: 100 / 150;
}

/* A few backs stacked behind, so the card has somewhere to come from. */
.draw__deck { position: absolute; inset: 0; }
.draw__deck::before,
.draw__deck::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  background: var(--ink-deep);
}
.draw__deck::before { transform: translate(6px, 6px) rotate(2.5deg); }
.draw__deck::after { transform: translate(3px, 3px) rotate(-1.5deg); }

.draw__slot { position: absolute; inset: 0; }
.draw__slot .card { cursor: pointer; }

.card.is-dealing .card__inner { transform: translate(9px, 9px) rotate(4deg); }
.card.is-dealt .card__inner { transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.05); }

.draw__reading { display: grid; gap: 0.9rem; max-width: 60ch; }
.draw__note {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--paper);
}

/* --- the whole deck ------------------------------------------------------- */

.deck {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0.5rem 0 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }
.deck:focus-visible { outline: 2px solid var(--sol-lift); outline-offset: 4px; }

.deck .card {
  flex: 0 0 auto;
  width: 8.5rem;
  scroll-snap-align: center;
  /* 0.85, not 0.5: at half the numerals and names on the cards either side
     fell to about 2:1 against the ground, below what text has to meet */
  opacity: 0.85;
  transform: scale(0.92);
  transition: opacity 200ms linear, transform 220ms ease;
}
.deck .card.is-middle { opacity: 1; transform: scale(1); }

.deck__name {
  margin-top: 0.25rem;
  font-size: var(--step--1);
  color: var(--paper-dim);
  min-height: 1.4em;
}

@media (prefers-reduced-motion: reduce) {
  .card__inner, .deck .card { transition: none; }
  .card.is-dealing .card__inner { transform: none; }
}

/* --- the three card spread ------------------------------------------------
   Three seats laid out by hand: each leans a little and the outer two sit
   slightly higher, the way three cards actually land on a table.
   ------------------------------------------------------------------------- */

.spread { display: grid; gap: 1.75rem; justify-items: center; }

.spread__fan {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  align-items: start;
  justify-content: center;
  width: 100%;
  padding-top: 1.5rem;
}

.seat {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  width: clamp(5.5rem, 27vw, 10rem);
}

.seat .card {
  transform: translateY(calc(var(--lift, 0px) * -1)) rotate(var(--lean, 0deg));
  cursor: pointer;
}

/* Dealt: the cards come up out of the table rather than fading in. */
.spread__fan .card {
  opacity: 0;
  transform: translateY(2.5rem) rotate(0deg) scale(0.9);
  transition: opacity 340ms linear var(--deal, 0ms),
              transform 520ms cubic-bezier(0.2, 0.9, 0.3, 1.06) var(--deal, 0ms);
}
.spread__fan.is-dealt .card {
  opacity: 1;
  transform: translateY(calc(var(--lift, 0px) * -1)) rotate(var(--lean, 0deg)) scale(1);
}

.seat__label {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  line-height: 1.2;
}

.spread__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
#spread-hint { text-align: center; max-width: 48ch; }

.readings { display: grid; gap: 2rem; margin-top: 2.5rem; }

.reading { display: grid; gap: 0.4rem; max-width: 60ch; }
.reading h3 { font-size: var(--step-1); }
.reading__about { color: var(--paper-mute); font-size: var(--step--1); }
.reading__card {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--sol-lift);
}

@media (prefers-reduced-motion: reduce) {
  .spread__fan .card { transition: none; opacity: 1; }
}

/* --- the day index -------------------------------------------------------- */

.day {
  display: grid;
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center;
}
@media (min-width: 40rem) {
  .day { grid-template-columns: auto minmax(0, 1fr); }
}

.day__gauge { width: min(100%, 17rem); }
.gauge { width: 100%; height: auto; display: block; }
.gauge__hand { transform-origin: 130px 132px; }

.day__words { display: grid; gap: 0.5rem; }
.day__number {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 5.5rem);
  line-height: 1;
  color: var(--sol-lift);
  font-variant-numeric: tabular-nums;
}
.day__words p:last-child { color: var(--paper-dim); max-width: 46ch; }

.day__why { margin-top: 2.5rem; display: grid; gap: 0.75rem; }
.day__why h2 { font-size: var(--step-1); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.chip {
  border: var(--rule);
  background: transparent;
  color: var(--paper-mute);
  font: inherit;
  font-size: var(--step--1);
  padding: 0.35rem 0.85rem;
  cursor: pointer;
}
.chip:hover { color: var(--paper); border-color: var(--paper-mute); }
.chip.is-on { color: var(--ink-void); background: var(--sol); border-color: var(--sol); }

/* --- the threshold --------------------------------------------------------
   The same site with the warmth taken out. Colder ground, bone instead of
   gold, hairlines dimmer. Only the tokens change: every component below is
   the one already written.
   ------------------------------------------------------------------------- */

[data-mood="deep"] {
  --ink-void:   #07060D;
  --ink-deep:   #0C0B16;
  --ink-mid:    #131120;
  --line:       #2A2838;
  --line-field: #4A4860;

  --paper:      #E8E6E0;
  --paper-dim:  #9C9AA6;
  --paper-mute: #7E7C8A;

  --sol:        #B9C2CC;
  --sol-lift:   #D9E0E8;
  --sol-deep:   #5C636E;
}

/* The wordmark tightening as it is held, so the door announces itself just
   before it opens. */
.mark { transition: letter-spacing 320ms ease, color 320ms linear; }
.mark.is-opening { letter-spacing: 0.14em; color: var(--sol-lift); }

/* --- casting -------------------------------------------------------------- */

.cast { display: grid; gap: 1.5rem; justify-items: center; }

.cast__ground {
  position: relative;
  width: 100%;
  min-height: 15rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 3vw, 1.75rem);
  border: 1px dashed var(--line);
  padding: 1.5rem 1rem;
}

.stone {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  width: 4.5rem;
  color: var(--paper-mute);
  font-size: 0.7rem;
  transform: translate(var(--x, 0), calc(var(--y, 0) - 1.5rem)) rotate(var(--turn, 0deg));
  opacity: 0;
  transition: transform 520ms cubic-bezier(0.2, 1.1, 0.35, 1) var(--land, 0ms),
              opacity 260ms linear var(--land, 0ms);
}
.cast__ground.is-landed .stone {
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--turn, 0deg));
  opacity: 1;
}

.stone svg {
  width: 100%;
  height: auto;
  color: var(--sol-lift);
}

/* Face down: a blank stone, and nothing to read. */
.stone:not(.is-up)::before {
  content: "";
  display: block;
  width: 3.2rem;
  height: 3.9rem;
  border: 1px solid var(--line);
  background: var(--ink-deep);
}
.stone.is-up { color: var(--paper-dim); }

/* --- all twenty four ------------------------------------------------------ */

.futhark {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.futhark__item {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 0.9rem 0.5rem;
  border: var(--rule);
  text-align: center;
}
.futhark__item svg { width: 2.4rem; height: 2.4rem; color: var(--sol-lift); }
.futhark__item span { font-family: var(--font-display); font-size: var(--step-0); }
.futhark__item small { color: var(--paper-mute); font-size: 0.68rem; line-height: 1.25; }

@media (prefers-reduced-motion: reduce) {
  .stone { transition: none; opacity: 1; }
  .mark { transition: none; }
}

/* --- the Book of Changes --------------------------------------------------
   Six lines built from the bottom as the coins land.
   ------------------------------------------------------------------------- */

.change { display: grid; gap: 1.75rem; justify-items: center; }

.change__table {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  padding: 2rem 1rem;
  border: var(--rule);
  background: var(--ink-deep);
  width: min(100%, 22rem);
}

.change__coins { display: flex; gap: 0.6rem; min-height: 1.6rem; }
.coin {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--sol-deep);
  border-radius: 50%;
  background: transparent;
  animation: solstaria-flip 420ms ease var(--spin, 0ms);
}
.coin.is-heads { background: var(--sol); border-color: var(--sol); }

@keyframes solstaria-flip {
  from { transform: rotateX(0deg) translateY(-8px); }
  60%  { transform: rotateX(540deg) translateY(0); }
  to   { transform: rotateX(720deg) translateY(0); }
}

.change__figure { display: grid; gap: 0.85rem; width: min(100%, 13rem); }

.line {
  position: relative;
  display: flex;
  gap: 1.15rem;
  height: 0.6rem;
  transition: opacity 260ms linear, transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.line.is-waiting { opacity: 0; transform: translateY(6px); }

.line__bar { flex: 1; background: var(--sol); }
.line__bar--half { flex: 0 0 calc(50% - 0.575rem); }

.line__mark {
  position: absolute;
  right: -1.6rem;
  top: -0.3rem;
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--sol-lift);
}
.line.is-changing .line__bar { background: var(--sol-lift); }

@media (prefers-reduced-motion: reduce) {
  .coin { animation: none; }
  .line { transition: none; }
}

/* --- retrogrades ----------------------------------------------------------
   A lane to a planet, a bar to a stretch of backwards motion, and under it
   the road the chosen one actually takes.
   ------------------------------------------------------------------------- */

.states { list-style: none; padding: 0; margin: var(--gap) 0 0; }
.states li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.2rem 1.25rem;
  padding-block: 0.6rem;
  border-top: var(--rule);
  align-items: baseline;
}
.states__body {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--paper);
}
.states__glyph { width: 15px; height: 15px; flex: none; align-self: center; }
.states__what { color: var(--paper-dim); }
.states li.is-retro .states__what { color: var(--paper); }

@media (max-width: 34rem) {
  .states li { grid-template-columns: minmax(0, 1fr); }
}

.retro-chart { margin-top: var(--gap); overflow-x: auto; }
.retro-chart__svg { width: 100%; min-width: 34rem; height: auto; }

.retro-chart__lane { stroke: var(--line); stroke-width: 1; }
.retro-chart__month { stroke: var(--line); stroke-width: 1; opacity: 0.55; }
.retro-chart__label,
.retro-chart__name {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 15px;
}
.retro-chart__name { fill: var(--paper-dim); }
.retro-chart__now { stroke: var(--sol); stroke-width: 1; opacity: 0.75; }
.retro-chart__pip { fill: var(--sol); }

/* A bar is a control, so it answers: it lifts a little and fills. */
.retro-bar { cursor: pointer; }
.retro-bar__body {
  transition: fill-opacity 140ms linear, stroke-width 140ms linear;
}
.retro-bar:hover .retro-bar__body,
.retro-bar:focus-visible .retro-bar__body,
.retro-bar.is-picked .retro-bar__body { fill-opacity: 0.55; stroke-width: 1.6; }
.retro-bar:focus { outline: none; }
.retro-bar:focus-visible .retro-bar__body { stroke: var(--paper); }

.retro-loop { margin: var(--gap) 0 0; }
.retro-loop__svg { width: 100%; height: auto; }
.retro-loop__axis { stroke: var(--line); stroke-width: 1; fill: none; }
.retro-loop__axislabel,
.retro-loop__station {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 15px;
}
.retro-loop__station { fill: var(--paper-dim); }
/* The road is travelled rather than switched on. Held at nothing only while
   the class is there; if the run never happens the whole path is drawn, which
   is the true picture either way. */
.retro-loop__svg.is-running .retro-loop__road {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.retro-loop__svg.is-run .retro-loop__road {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms cubic-bezier(0.3, 0.8, 0.25, 1);
}
.retro-loop__svg.is-running circle,
.retro-loop__svg.is-running text { opacity: 0; }
.retro-loop__svg.is-run circle,
.retro-loop__svg.is-run text {
  opacity: 1;
  transition: opacity 320ms linear 900ms;
}

.retro-loop figcaption {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  color: var(--paper-mute);
}

@media (prefers-reduced-motion: reduce) {
  .retro-bar__body { transition: none; }
  .retro-loop__svg.is-run .retro-loop__road { transition: none; }
  .working.is-writing li { animation: none; }
}

/* --- drawings that answer a hand -----------------------------------------------
   The aspect figure can be turned, the rising ring pointed at, a planet's road
   walked. The styles here are the handles and readouts those need.
   ------------------------------------------------------------------------- */

.aspectfig__handle { cursor: grab; touch-action: none; }
.aspectfig__handle:active { cursor: grabbing; }
.aspectfig__sector { cursor: pointer; }
.aspectfig__reset { justify-self: center; }

.signwheel__svg:focus { outline: none; }
.signwheel__svg:focus-visible,
.risingring__svg:focus-visible {
  outline: 2px solid var(--sol-lift);
  outline-offset: 6px;
  border-radius: 50%;
}

.signwheel__link:hover .housewheel__num,
.signwheel__link:focus-visible .housewheel__num { fill: var(--sol-lift); }

.risingring__svg.is-probed { cursor: crosshair; touch-action: pan-y; }
.risingring__svg:focus { outline: none; }
.risingring__probe {
  margin: 0.75rem auto 0;
  max-width: 40ch;
  text-align: center;
  font-size: var(--step-0);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  min-height: 1.6em;
}

.planet-scrub {
  display: grid;
  gap: 0.6rem;
  width: min(100%, 30rem);
}
.planet-scrub input[type="range"] {
  width: 100%;
  accent-color: var(--sol);
}
.planet-scrub__readout {
  text-align: center;
  font-size: var(--step-0);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  min-height: 1.6em;
}
.planet-scrub__run { justify-self: center; }

/* The key's bezel is turned by script, with the page and by hand, so it has no
   transition of its own; the gold trace round the rim is how far down the
   page you are. */
.dial__progress {
  fill: none;
  stroke: var(--sol);
  stroke-width: 1.5;
  stroke-dasharray: 0 100;
  opacity: 0.9;
}

/* --- the houses and the aspects -----------------------------------------------
   Both reuse the sign wheel and the sign cards. What is theirs is the numbers
   in the house sectors, the four angles, and a figure inside the zodiac.
   ------------------------------------------------------------------------- */

.housewheel__num {
  fill: var(--paper-dim);
  font-family: var(--font-display);
  font-size: 54px;
}
.housewheel__num.is-lit { fill: var(--sol-lift); }
.housewheel__axis {
  fill: var(--sol);
  font-family: var(--font-body);
  font-size: 26px;
  letter-spacing: 0.04em;
}
.housewheel__half {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 22px;
}

.housecard__num {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--sol);
}

/* --- the rising sign --------------------------------------------------------
   The day of a birth as a ring, midnight at the top, each sign's rising drawn
   to the length it lasted at that place.
   ------------------------------------------------------------------------- */

.risingring { margin: var(--gap) 0 0; display: grid; gap: 1rem; justify-items: center; }
.risingring > div { width: min(100%, 32rem); }
.risingring__svg { width: 100%; height: auto; display: block; }
.risingring__sector { stroke: var(--line); stroke-width: 1.5; }
.risingring__sector--a { fill: var(--ink-deep); }
.risingring__sector--b { fill: var(--ink-mid); }
.risingring__sector.is-born { fill: var(--sol-deep); fill-opacity: 0.5; stroke: var(--sol); }
.risingring__hour { stroke: var(--line-field); stroke-width: 1.5; }
.risingring__label {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}
.risingring figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 54ch;
}

/* --- the planets ------------------------------------------------------------ */

.planetcard__live {
  font-size: var(--step--1);
  color: var(--sol-lift);
  line-height: 1.35;
}

/* --- the signs -------------------------------------------------------------
   A wheel of twelve with one lit, and a card to a sign on the index. The
   wheel's sectors are links, so the picture is also the way in.
   ------------------------------------------------------------------------- */

.signwheel { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.signwheel > div { width: min(100%, 30rem); }
.signwheel__svg { width: 100%; height: auto; display: block; }
.signwheel__sector {
  fill: var(--ink-deep);
  stroke: var(--line);
  stroke-width: 1.5;
  transition: fill 140ms linear, stroke 140ms linear;
}
.signwheel__sector.is-lit { fill: var(--ink-mid); stroke: var(--sol-deep); stroke-width: 2.5; }
.signwheel__link:hover .signwheel__sector,
.signwheel__link:focus-visible .signwheel__sector { fill: var(--ink-mid); stroke: var(--sol-deep); }
.signwheel__link:focus { outline: none; }
.signwheel figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 46ch;
}

.signcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  /* 16rem, not 13: at five across the planets' longer notes stood in columns
     a few words wide */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.signcard {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--ink-deep);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 140ms linear, background-color 140ms linear;
}
.signcard:hover,
.signcard:focus-visible { border-color: var(--sol-deep); background: var(--ink-mid); }
.signcard__glyph { grid-row: 1 / span 3; width: 44px; height: 44px; }
.signcard__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.1; }
.signcard__dates,
.signcard__kind { font-size: var(--step--1); color: var(--paper-mute); line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .signwheel__sector, .signcard { transition: none; }
}

/* --- eclipses --------------------------------------------------------------
   A card to an eclipse: the discs drawn from how much is covered, the words,
   and underneath the stages as nested bands from their exact times.
   ------------------------------------------------------------------------- */

.eclipse-list { display: grid; gap: 1rem; margin-top: var(--gap); }

.eclipse {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.9rem 1.25rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--ink-deep);
}
.eclipse--next {
  grid-template-columns: 9rem minmax(0, 1fr);
  padding: 1.4rem;
  border-color: var(--sol-deep);
}

.eclipse__discs { width: 100%; height: auto; display: block; }
.eclipse__body { display: grid; gap: 0.3rem; }
.eclipse__body h3 { font-size: var(--step-1); }
.eclipse--next .eclipse__body h3 { font-size: var(--step-2); }

.eclipse__when { color: var(--paper); font-variant-numeric: tabular-nums; }
.eclipse__where,
.eclipse__near { color: var(--paper-dim); font-size: var(--step--1); }
.eclipse__near:empty { display: none; }
.eclipse__here { color: var(--sol-lift); font-size: var(--step--1); }
.eclipse__here.is-away { color: var(--paper-mute); }

.eclipse__timeline { grid-column: 1 / -1; display: grid; gap: 0.35rem; }
.eclipse__bands { width: 100%; height: auto; display: block; }
.eclipse__band--0 { fill: var(--ink-mid); stroke: var(--line-field); stroke-width: 1; }
.eclipse__band--1 { fill: var(--sol-deep); fill-opacity: 0.55; }
.eclipse__band--2 { fill: var(--sol); fill-opacity: 0.8; }
.eclipse__peak { stroke: var(--paper); stroke-width: 1.2; }
.eclipse__tick {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 14px;
}
.eclipse__phases {
  font-size: var(--step--1);
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 30rem) {
  .eclipse,
  .eclipse--next { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

/* --- transits -------------------------------------------------------------
   The lane chart again, because it is the same question asked of a different
   thing: what is happening, to what, and when. A mark rather than a bar,
   since a contact is a moment.
   ------------------------------------------------------------------------- */

.transit-mark { pointer-events: all; }

.hits { list-style: none; padding: 0; margin: var(--gap) 0 0; }
.hits li {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding-block: 0.7rem;
  border-top: var(--rule);
}
.hits__when {
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hits__what { color: var(--paper); }
.hits__note {
  grid-column: 2;
  font-size: var(--step--1);
  color: var(--paper-dim);
  max-width: 62ch;
}
.hits__empty { color: var(--paper-mute); grid-template-columns: 1fr; }

@media (max-width: 34rem) {
  .hits li { grid-template-columns: minmax(0, 1fr); }
  .hits__note { grid-column: 1; }
  .hits__when { white-space: normal; }
}

/* --- the hours of the day -------------------------------------------------
   Sunrise at the top, running clockwise through twenty four hours of two
   different lengths. The unevenness is drawn to scale and never tidied up.
   ------------------------------------------------------------------------- */

.hours-place { max-width: 26rem; }

.hourdial { margin: 0; display: grid; gap: 1.1rem; justify-items: center; }
.hourdial > div { width: min(100%, 34rem); }
.hourdial__svg { width: 100%; height: auto; }
.hourdial figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 52ch;
}

.hourdial__mark {
  font-family: var(--font-body);
  font-size: 21px;
  fill: var(--sol-lift);
}
.hourdial__mark--quiet { fill: var(--paper-mute); }

.hourlists {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-top: var(--gap);
}
.hourlist { list-style: none; margin: 0; padding: 0; }
.hourlist li {
  display: flex;
  gap: 1rem;
  padding-block: 0.4rem;
  border-top: var(--rule);
  font-variant-numeric: tabular-nums;
}
.hourlist__when { color: var(--paper-mute); min-width: 4.5rem; }
.hourlist li.is-now { border-top-color: var(--sol-deep); }
.hourlist li.is-now .hourlist__when { color: var(--sol-lift); }

/* --- the wheel of the year ------------------------------------------------
   A dial that never changes, with the dates of this turn written on it. The
   arc from the equinox to today is the one line whose length is the message,
   so it is drawn on rather than switched on.
   ------------------------------------------------------------------------- */

.yearwheel { margin: 0; display: grid; gap: 1.1rem; justify-items: center; }
.yearwheel > div { width: min(100%, 34rem); }
.yearwheel__svg { width: 100%; height: auto; }
.yearwheel figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 46ch;
  font-variant-numeric: tabular-nums;
}

.yearwheel__turn,
.yearwheel__cross {
  font-family: var(--font-body);
  font-size: 21px;
  fill: var(--paper-mute);
}
.yearwheel__turn { fill: var(--sol-lift); font-size: 23px; }

/* Held back at nothing, then run round. If the transition never happens the
   arc is simply whole, which is the true picture rather than an empty ring. */
.yearwheel__travelled.is-running { stroke-dasharray: 1; stroke-dashoffset: 1; }
.yearwheel__travelled.is-run {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.3, 0.8, 0.25, 1) 120ms;
}

.moments li.is-turn .moments__what { color: var(--sol-lift); }

@media (prefers-reduced-motion: reduce) {
  .yearwheel__travelled.is-run { transition: none; }
}

/* --- numbers --------------------------------------------------------------
   The working is the picture. Every line is a sum with its result set off to
   the right, the way a calculation is set out on paper.
   ------------------------------------------------------------------------- */

.numbers-form { display: grid; gap: 1.25rem; max-width: 34rem; }
.numbers-form__date { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.numbers-form__date label { width: 6rem; }
.numbers-form__date label:last-child { width: 8rem; }
.numbers-form label { display: grid; gap: 0.35rem; }
.numbers-form label span { font-size: var(--step--1); color: var(--paper-mute); }
.numbers-form input {
  font: inherit;
  padding: 0.6rem 0.7rem;
  background: var(--ink-deep);
  border: 1px solid var(--line-field);
  color: var(--paper);
  border-radius: 0;
}
.numbers-form input:focus-visible { border-color: var(--sol); }
.numbers-form__name input { width: 100%; }

.working {
  list-style: none;
  padding: 0;
  margin: var(--gap) 0 0;
  max-width: 42rem;
}
/* One line at a time, in the order the sum is done. A line that never
   animates is simply in place, because the invisible state lives inside the
   keyframes and nowhere else. */
@keyframes solstaria-written {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.working.is-writing li {
  animation: solstaria-written 260ms cubic-bezier(0.2, 0.9, 0.3, 1)
             var(--written, 0ms) both;
}

.working li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.55rem;
  border-top: var(--rule);
}
.working__sum {
  flex: 1;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}
.working__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1;
  color: var(--sol-lift);
  font-variant-numeric: tabular-nums;
}

/* --- the Moon -------------------------------------------------------------
   One disc drawn from the lit fraction, and thirty small ones for the days of
   the lunation. The shape is a path rather than a picture, so the same
   drawing serves at two hundred pixels and at thirty.
   ------------------------------------------------------------------------- */

.moon-now {
  display: grid;
  gap: clamp(1.5rem, 5vw, 2.75rem);
  align-items: center;
}

@media (min-width: 34rem) {
  .moon-now { grid-template-columns: auto minmax(0, 1fr); }
}

.moon-now__disc { margin: 0; display: grid; gap: 0.85rem; justify-items: center; }
.moon-now__disc > div { width: min(68vw, 16rem); }
.moon-now__disc figcaption {
  font-size: var(--step--1);
  color: var(--paper-dim);
  text-align: center;
}

.moon { display: block; width: 100%; height: auto; }
.moon__dark { fill: var(--ink-mid); }
.moon__lit  { fill: var(--p-moon); }
.moon__rim  { fill: none; stroke: var(--line); stroke-width: 1; }

.moon-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
  margin: 0;
}
.moon-facts dt { color: var(--paper-mute); }
.moon-facts dd { margin: 0; color: var(--paper); font-variant-numeric: tabular-nums; }
/* On a phone the label column took the width of its longest label on one
   line ("Next between the Earth and the Sun") and pushed the page sideways.
   There it is held to a share of the width and the labels wrap. */
@media (max-width: 30rem) {
  .moon-facts { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .moon-facts dt, .moon-facts dd { overflow-wrap: break-word; }
}

.lunation {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
  gap: 0.75rem 0.5rem;
  margin-top: var(--gap);
}
/* Each day is a control: running along the row fills and empties the big
   disc above it. A button rather than a figure, so a keyboard can walk the
   month with the arrow keys. */
.lunation__day {
  margin: 0;
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.lunation__day .moon__rim { transition: stroke 140ms linear; }
.lunation__day .moon { transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.lunation__day:hover .moon,
.lunation__day.is-picked .moon { transform: scale(1.12); }
.lunation__day:hover .moon__rim,
.lunation__day.is-picked .moon__rim { stroke: var(--paper-mute); }
.lunation__day:hover span,
.lunation__day.is-picked span { color: var(--paper-dim); }
.lunation__day span {
  font-size: var(--step--1);
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
  transition: color 140ms linear;
}
.lunation__day.is-today .moon__rim { stroke: var(--sol); stroke-width: 3; }
.lunation__day.is-today span { color: var(--sol-lift); }

/* A list of moments: when on the left, what on the right, and the aside that
   belongs to it underneath rather than in brackets. */
.moments {
  list-style: none;
  padding: 0;
  margin: var(--gap) 0 0;
}
.moments li {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  gap: 0.2rem 1.25rem;
  padding-block: 0.6rem;
  border-top: var(--rule);
}
/* A date that wraps in the middle stops being a date and becomes two lines of
   numbers, so the column is cut to fit the longest one there is. */
.moments__when {
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.moments__what { color: var(--paper); }
.moments__note {
  grid-column: 2;
  font-size: var(--step--1);
  color: var(--paper-mute);
}

@media (prefers-reduced-motion: reduce) {
  .lunation__day .moon,
  .linkset a, .topiclist a,
  .linkset a::before, .topiclist a::before { transition: none; }
}

@media (max-width: 34rem) {
  .moments li { grid-template-columns: minmax(0, 1fr); }
  .moments__note { grid-column: 1; }
  .moments__when { white-space: normal; }
}

/* --- colour that carries something ----------------------------------------------
   Four element tones tint the signs, three tones mark the quality of an aspect,
   and gold is kept for the one thing that is chosen. The tint sits under the
   engraving rather than replacing it: the wheels are still ink and hairline,
   with the element showing through. Written last so it wins over the plain
   sector rules above it.
   ------------------------------------------------------------------------- */

.tone-fire  { --tone: var(--el-fire); }
.tone-earth { --tone: var(--el-earth); }
.tone-air   { --tone: var(--el-air); }
.tone-water { --tone: var(--el-water); }

.signwheel__sector[class*="tone-"] {
  fill: var(--ink-deep);
  fill: color-mix(in srgb, var(--tone) 11%, var(--ink-deep));
}
.signwheel__sector[class*="tone-"].is-lit {
  fill: var(--ink-mid);
  fill: color-mix(in srgb, var(--tone) 32%, var(--ink-deep));
  stroke: var(--lit-stroke, var(--sol));
  stroke-width: 3;
}
.signwheel__link:hover .signwheel__sector[class*="tone-"],
.signwheel__link:focus-visible .signwheel__sector[class*="tone-"],
.aspectfig__sector[class*="tone-"]:hover {
  fill: var(--ink-mid);
  fill: color-mix(in srgb, var(--tone) 24%, var(--ink-deep));
}

.risingring__sector[class*="tone-"] {
  fill: var(--ink-deep);
  fill: color-mix(in srgb, var(--tone) 15%, var(--ink-deep));
}
.risingring__sector[class*="tone-"].is-born {
  fill: var(--ink-mid);
  fill: color-mix(in srgb, var(--tone) 42%, var(--ink-deep));
  fill-opacity: 1;
  stroke: var(--sol);
  stroke-width: 3;
}

/* the degree scale every wheel now carries */
.scale__fine { fill: none; stroke: var(--line); stroke-width: 1; }
.scale__bold { fill: none; stroke: var(--line-field); stroke-width: 1.5; }

/* a key to the colours, under the drawings that use them */
.tonekey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.2rem;
  font-size: var(--step--1);
  color: var(--paper-mute);
}
.tonekey li { display: flex; align-items: center; gap: 0.45rem; }
.tonekey i {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--tone);
}

/* --- the middle of a wheel, and lines drawn on ------------------------------------
   The hole in a wheel is its readout: large enough to read at arm's length,
   and saying the same as the line under the drawing, which is the one a
   screen reader hears.
   ------------------------------------------------------------------------- */

.wheelcentre__big {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 72px;
}
.wheelcentre__small {
  fill: var(--sol-lift);
  font-family: var(--font-body);
  font-size: 34px;
  font-variant-numeric: tabular-nums;
}
/* a planet's road starts close to the middle, so its readout is narrower */
.wheelcentre__place { font-size: 32px; }
.wheelcentre__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 56px;
}
.wheelcentre__line {
  font-family: var(--font-body);
  font-size: 32px;
}
.wheelcentre__date {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 50px;
}

/* Held at nothing only while the class is on; if the run never happens the
   whole line is there. */
.drawon.is-running { stroke-dasharray: 1; stroke-dashoffset: 1; }
.drawon.is-run {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--draw, 1200ms) cubic-bezier(0.3, 0.8, 0.25, 1)
    var(--draw-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .drawon.is-run { transition: none; }
}

/* the house in the middle of the house wheel */
.housewheel__big {
  fill: var(--sol-lift);
  font-family: var(--font-display);
  font-size: 130px;
}

/* the month round the Moon */
.moonring__track { fill: none; stroke: var(--line); stroke-width: 2; }
.moonring__tick { fill: none; stroke: var(--line); stroke-width: 2; }
.moonring__travelled {
  fill: none;
  stroke: var(--p-moon);
  stroke-width: 9;
  stroke-linecap: round;
}
.moonring__phase .moon__rim { stroke-width: 3; }
.moonring > g > .moon__rim { stroke-width: 0.5; }
.moonring__today { fill: var(--sol); stroke: var(--ink-void); stroke-width: 5; }
.moonring__probe { fill: none; stroke: var(--paper); stroke-width: 4; }

/* the hour in the middle of the hour dial */
.hourdial__hour { cursor: pointer; }
.hourdial__hour.is-picked { stroke: var(--sol); stroke-width: 3; }
.hourdial__svg:focus { outline: none; }
.hourdial__svg:focus-visible { outline: 2px solid var(--sol); outline-offset: 6px; border-radius: 50%; }
.hourdial__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 64px;
}
.hourdial__ordinal {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 26px;
}

/* where the eclipses fall */
.eclipsewheel { margin: var(--gap) 0 0; display: grid; gap: 1rem; justify-items: center; }
.eclipsewheel > div { width: min(100%, 34rem); }
.eclipsewheel svg { width: 100%; height: auto; display: block; }
.eclipsewheel figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 52ch;
}
.eclipsewheel__year { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 2 8; }
.eclipsewheel__yearlabel {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 20px;
  paint-order: stroke;
  stroke: var(--ink-void);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.eclipsewheel__when {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 50px;
}
.eclipsewheel__what {
  fill: var(--paper);
  font-family: var(--font-body);
  font-size: 30px;
}
.eclipsewheel__date {
  fill: var(--sol-lift);
  font-family: var(--font-body);
  font-size: 28px;
}
.eclipsewheel__place {
  font-family: var(--font-body);
  font-size: 28px;
}
.eclipsewheel__dot { cursor: pointer; outline: none; }
.eclipsewheel__halo {
  fill: none;
  stroke: var(--sol);
  stroke-width: 3;
  opacity: 0;
  transition: opacity 160ms linear;
}
.eclipsewheel__dot.is-picked .eclipsewheel__halo,
.eclipsewheel__dot:focus-visible .eclipsewheel__halo { opacity: 1; }

/* The marks arrive in the order the eclipses do. Unseen only inside the
   keyframes: if the animation never runs, every mark is there. */
.eclipsewheel__dot.is-arriving {
  transform-box: fill-box;
  transform-origin: center;
  animation: eclipse-arrive 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  animation-delay: var(--arrive, 0ms);
}
@keyframes eclipse-arrive {
  from { opacity: 0; transform: scale(0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .eclipsewheel__dot.is-arriving { animation: none; }
}

/* --- the sky tonight -----------------------------------------------------------
   The sky unrolled into a strip. The hour dots arrive when the line reaches
   them; unseen only inside the keyframes.
   ------------------------------------------------------------------------- */

.skydome { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.skydome > div { width: 100%; }
.skydome__svg { width: 100%; height: auto; display: block; border-radius: var(--radius, 0.75rem); }
.skydome figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 60ch;
}
.skydome__top { stop-color: var(--ink-void); }
.skydome__low { stop-color: var(--ink-mid); }
.skydome__ground { fill: var(--ink-void); }
.skydome__horizon { stroke: var(--line-field); stroke-width: 2; }
.skydome__grid { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 9; }
.skydome__gridlabel {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 18px;
}
.skydome__dir {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 20px;
  letter-spacing: 0.04em;
}
.skydome__dir.is-cardinal { fill: var(--paper-dim); font-size: 24px; }
.skydome__label {
  font-family: var(--font-body);
  font-size: 20px;
  paint-order: stroke;
  stroke: var(--ink-void);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.skydome__time {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 56px;
  font-variant-numeric: tabular-nums;
}
.skydome__sun {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 22px;
}
.skyscrub { width: min(100%, 40rem); }

.drawon--even.is-run { transition-timing-function: linear; }

.arrives {
  transform-box: fill-box;
  transform-origin: center;
  animation: eclipse-arrive 420ms ease-out both;
  animation-delay: var(--arrive, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .arrives { animation: none; }
}

/* --- the nodes ------------------------------------------------------------------ */

.nodes__axis { stroke: var(--sol); stroke-width: 2; stroke-opacity: 0.85; }
.nodecentre__line {
  font-family: var(--font-body);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.nodecentre__north { fill: var(--sol-lift); }
.nodecentre__south { fill: var(--paper-dim); }

/* --- returns -------------------------------------------------------------------
   A life as four lanes. Wide by nature, so on a narrow screen it scrolls
   inside its own box rather than shrinking the marks to nothing.
   ------------------------------------------------------------------------- */

.lifeline { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.lifeline > div { width: 100%; overflow-x: auto; }
.lifeline__svg { width: 100%; min-width: 36rem; height: auto; display: block; }
.lifeline figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 60ch;
}
.lifeline__lane { stroke: var(--line); stroke-width: 2; }
.lifeline__tick { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.lifeline__name { font-family: var(--font-body); font-size: 22px; }
.lifeline__age {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 18px;
}
.lifeline__now { stroke: var(--sol); stroke-width: 2; }
.lifeline__nowlabel {
  fill: var(--sol-lift);
  font-family: var(--font-body);
  font-size: 18px;
}
.lifeline__read {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 30px;
}
.lifeline__mark { cursor: pointer; outline: none; }
.lifeline__span { stroke-width: 6; stroke-linecap: round; stroke-opacity: 0.45; fill: none; }
.lifeline__halo {
  fill: none;
  stroke: var(--sol);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 160ms linear;
}
.lifeline__mark.is-picked .lifeline__halo,
.lifeline__mark:focus-visible .lifeline__halo { opacity: 1; }
.moments li.is-past .moments__what { color: var(--paper-dim); }

/* --- the Moon sign -------------------------------------------------------------- */

.moonday { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.moonday > div { width: min(100%, 52rem); overflow-x: auto; }
.moonday__svg { width: 100%; min-width: 30rem; height: auto; display: block; }
.moonday figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 60ch;
}
.moonday__grid { stroke: var(--line); stroke-width: 1; }
.moonday__edge { stroke: var(--paper-mute); stroke-width: 1.5; stroke-dasharray: 6 6; }
.moonday__deg,
.moonday__hour {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.moonday__sign { font-family: var(--font-body); font-size: 22px; }
.moonday__tick { stroke: var(--line-field); stroke-width: 1; }
.moonday__change { stroke: var(--paper-dim); stroke-width: 1; stroke-dasharray: 3 5; }
.moonday__birth { stroke: var(--sol); stroke-width: 2; }
.moonday__dot { fill: var(--sol); stroke: var(--ink-void); stroke-width: 3; }
.reading .moon { width: 3.5rem; margin-block: 0.5rem; }

/* --- Venus ----------------------------------------------------------------------- */

.venus__sunring { fill: none; stroke: var(--line-field); stroke-width: 1; stroke-dasharray: 3 7; }
.venus__earth { fill: var(--el-air); stroke: var(--ink-void); stroke-width: 3; }
.venus__sight { stroke: var(--paper-dim); stroke-width: 1.2; stroke-opacity: 0.7; }
.venus__sight--sun { stroke-dasharray: 4 6; }

/* --- signs and constellations ----------------------------------------------------- */

.stars__source {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.stars__source .btn { padding: 0.45rem 1rem; font-size: var(--step--1); }
.stars__source .btn[aria-pressed="true"] { border-color: var(--sol); color: var(--sol-lift); }
.stars__con { fill: var(--ink-mid); stroke: var(--line); stroke-width: 1; }
.stars__con.is-alt { fill: var(--ink-deep); }
.stars__label {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 19px;
  letter-spacing: 0.02em;
}
.stars__pointer { stroke: var(--sol); stroke-width: 2; }
.stars__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 60px;
}
.stars__line {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}
.stars__line--con { fill: var(--sol-lift); }

/* --- the Moon calendar ---------------------------------------------------------- */

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

.mooncal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.mooncal__head h2 { flex: 1 1 10rem; text-align: center; }
.mooncal { overflow-x: auto; }
.mooncal__table {
  width: 100%;
  min-width: 17rem;
  border-collapse: collapse;
  table-layout: fixed;
}
.mooncal__table th {
  padding: 0.4rem 0;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--paper-mute);
}
.mooncal__table td.is-empty { border: 0; }
.mooncal__day {
  position: relative;
  height: 6.4rem;
  padding: 0.35rem;
  vertical-align: top;
  border: 1px solid var(--line);
}
.mooncal__day .moon { width: min(100%, 2.7rem); margin: 0.35rem auto 0; }
.mooncal__day.is-quarter .moon__rim { stroke: var(--paper-dim); stroke-width: 3; }
.mooncal__num {
  font-size: var(--step--1);
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}
.mooncal__sign {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 0.95rem;
  height: 0.95rem;
}
.mooncal__words {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  line-height: 1.25;
  text-align: center;
  color: var(--paper);
}
.mooncal__day.is-today { outline: 2px solid var(--sol); outline-offset: -2px; }
.mooncal__day.is-today .mooncal__num { color: var(--sol-lift); }
.moon.is-south { transform: scaleX(-1); }
.mooncal__back { text-align: center; }

@media (max-width: 34rem) {
  .mooncal__day { height: 4.4rem; padding: 0.2rem; }
  .mooncal__words { display: none; }
  .mooncal__sign { width: 0.7rem; height: 0.7rem; top: 0.25rem; right: 0.25rem; }
}

/* --- the shape of a chart ------------------------------------------------------- */

.sourcepick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.sourcepick .btn { padding: 0.45rem 1rem; font-size: var(--step--1); }
.sourcepick .btn[aria-pressed="true"] { border-color: var(--sol); color: var(--sol-lift); }

.shape__track { fill: none; stroke: var(--line); stroke-width: 1.5; }
.shape__held {
  fill: none;
  stroke: var(--paper-dim);
  stroke-opacity: 0.16;
  stroke-width: 40;
  stroke-linecap: round;
}
.shape__gap { fill: none; stroke: var(--paper-mute); stroke-width: 1.5; stroke-dasharray: 4 7; }
.shape__gaplabel {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 22px;
}
.shape__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 68px;
}
.shape__line {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 26px;
}

.balance { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) {
  .balance { grid-template-columns: 1fr 1fr; }
}
.balance__group { display: grid; gap: 0.5rem; align-content: start; }
.balance__group h3 { font-size: var(--step-0); font-family: var(--font-body); color: var(--paper-dim); }
.balance__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step--1);
}
.balance__label { color: var(--paper-dim); }
.balance__bar {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--ink-mid);
  overflow: hidden;
}
.balance__bar i {
  display: block;
  height: 100%;
  width: var(--share);
  border-radius: inherit;
  background: var(--tone, var(--paper-dim));
}
.balance__count { text-align: right; color: var(--paper); font-variant-numeric: tabular-nums; }

/* --- profections ------------------------------------------------------------------ */

.profection__sector { fill: var(--ink-deep); stroke: var(--line); stroke-width: 1; }
.profection__sector.is-lit { fill: var(--ink-mid); stroke: var(--sol); stroke-width: 2; }
.profection__house {
  fill: var(--paper-dim);
  font-family: var(--font-display);
  font-size: 28px;
}
.profection__age {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.profection__age.is-lived { fill: var(--paper); }
.profection__age.is-now { fill: var(--ink-void); font-weight: 600; }
.profection__nowdot { fill: var(--sol); }
.profection__asc { stroke: var(--sol); stroke-width: 2; stroke-opacity: 0.8; }
.profection__big {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 58px;
}
.profection__line {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 24px;
}
.profection__lord { fill: var(--sol-lift); }

/* --- the solar return ------------------------------------------------------------- */

.sr__moment {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  max-width: 34ch;
}
#sr-out > .chart-wheel { margin-top: 2rem; }
#sr-out > .readings { margin-top: 2rem; }

.srdrift { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.srdrift > div { width: min(100%, 58rem); overflow-x: auto; }
.srdrift__svg { width: 100%; min-width: 36rem; height: auto; display: block; }
.srdrift figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 60ch;
}
.srdrift__grid { stroke: var(--line); stroke-width: 1; }
.srdrift__label,
.srdrift__year,
.srdrift__day {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.srdrift__day { font-size: 14px; }
.srdrift__year.is-picked { fill: var(--sol-lift); }
.srdrift__line { fill: none; stroke: var(--paper-dim); stroke-width: 1.5; stroke-opacity: 0.6; }
.srdrift__dot { cursor: pointer; outline: none; }
.srdrift__dot circle { fill: var(--paper-dim); stroke: var(--ink-void); stroke-width: 3; }
.srdrift__dot:hover circle,
.srdrift__dot:focus-visible circle { fill: var(--paper); }
.srdrift__dot.is-picked circle { fill: var(--sol); }

/* --- aspect patterns ---------------------------------------------------------------- */

.pattern { transition: opacity 160ms linear; }
.pattern.is-dim { opacity: 0.14; }
.pattern__band {
  fill: none;
  stroke: var(--paper-dim);
  stroke-opacity: 0.4;
  stroke-width: 28;
  stroke-linecap: round;
}
.pattern__quincunx { stroke: var(--paper-dim); stroke-dasharray: 7 7; }
.pattern__plate { fill: var(--ink-void); fill-opacity: 0.86; }
.pattern__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 60px;
}
.pattern__line {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 24px;
}

.patternlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.patternlist button {
  width: 100%;
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  text-align: left;
  font: inherit;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 120ms linear, background-color 120ms linear;
}
.patternlist button:hover { border-color: var(--line-field); }
.patternlist button:active { transform: translateY(1px); }
.patternlist button[aria-pressed="true"] { border-color: var(--sol); background: var(--ink-mid); }
.patternlist__name { font-family: var(--font-display); font-size: var(--step-1); }
.patternlist__who { font-size: var(--step--1); color: var(--paper); }
.patternlist__about { font-size: var(--step--1); color: var(--paper-dim); }
.patternlist__none { color: var(--paper-dim); }

/* --- a year of daylight --------------------------------------------------------------- */

.daylight { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.daylight > div { width: min(100%, 62rem); overflow-x: auto; }
.daylight__svg { width: 100%; min-width: 36rem; height: auto; display: block; }
.daylight figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 62ch;
}
.daylight__night { fill: var(--ink-void); stroke: var(--line); stroke-width: 1; }
.daylight__astro { fill: var(--ink-deep); }
.daylight__nautical { fill: var(--ink-mid); }
.daylight__civil { fill: color-mix(in srgb, var(--p-sun) 16%, var(--ink-mid)); }
.daylight__day { fill: color-mix(in srgb, var(--p-sun) 42%, var(--ink-mid)); }
.daylight__grid { stroke: var(--ink-void); stroke-opacity: 0.45; stroke-width: 1; }
.daylight__tick { stroke: var(--line-field); stroke-width: 1; }
.daylight__hour,
.daylight__month {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.daylight__season { stroke: var(--paper-dim); stroke-width: 2.5; }
.daylight__today { stroke: var(--sol); stroke-width: 2; }

.daylight__key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  font-size: var(--step--1);
  color: var(--paper-dim);
}
.daylight__key i {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.4rem;
  vertical-align: -0.1rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line);
}
.daylight__key .is-day i { background: color-mix(in srgb, var(--p-sun) 42%, var(--ink-mid)); }
.daylight__key .is-civil i { background: color-mix(in srgb, var(--p-sun) 16%, var(--ink-mid)); }
.daylight__key .is-nautical i { background: var(--ink-mid); }
.daylight__key .is-astro i { background: var(--ink-deep); }
.daylight__key .is-night i { background: var(--ink-void); }

/* --- the almanac ------------------------------------------------------------------ */

.periodnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.periodnav h2 { flex: 1 1 8rem; text-align: center; }

.almanac { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
.almanac > div { width: 100%; overflow-x: auto; }
.almanac__svg { width: 100%; min-width: 46rem; height: auto; display: block; }
.almanac figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 62ch;
}
.almanac__read {
  min-height: 1.65em;
  text-align: center;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.almanac__grid { stroke: var(--line); stroke-width: 1; }
.almanac__lane { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.almanac__month {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 16px;
}
.almanac__name { font-family: var(--font-body); font-size: 17px; }
.almanac__today { stroke: var(--sol); stroke-width: 2; }
.almanac__mark { cursor: pointer; outline: none; }
.almanac__halo { fill: none; stroke: var(--sol); stroke-width: 2; opacity: 0; }
.almanac__mark.is-picked .almanac__halo,
.almanac__mark:focus-visible .almanac__halo { opacity: 1; }
.almanac__months > h3 { margin-top: 2rem; }
.almanac__months > h3:first-child { margin-top: 0; }
.almanac__months > .moments { margin-top: 0.75rem; }

/* --- the lots ------------------------------------------------------------------------- */

.lots__asc { stroke: var(--sol); stroke-width: 2; stroke-opacity: 0.7; }
.lots__asclabel {
  fill: var(--sol-lift);
  font-family: var(--font-body);
  font-size: 22px;
  letter-spacing: 0.04em;
}
.lots__arc { fill: none; stroke-width: 7; stroke-linecap: round; }
.lots__arc--from { stroke: var(--paper-dim); stroke-opacity: 0.75; }
.lots__arc--to { stroke: var(--sol); }
.lots__arclabel {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.lots__mark { fill: var(--ink-void); stroke: var(--sol); stroke-width: 3; }
.lots__cross { stroke: var(--sol); stroke-width: 2.5; }
.lots__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 54px;
}
.lots__line {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 26px;
}

/* --- the Chinese zodiac --------------------------------------------------------------
   The five Chinese elements are not the four Western ones, so they get tones of
   their own rather than borrowing a meaning from the signs.
   ------------------------------------------------------------------------- */

:root {
  --wx-wood:  #8FA764;
  --wx-fire:  #CF7552;
  --wx-earth: #C49A5A;
  --wx-metal: #C9CED6;
  --wx-water: #6C7FD0;
}

.cz__sector { fill: var(--ink-deep); stroke: var(--line); stroke-width: 1; }
.cz__sector.is-lit { fill: var(--ink-mid); stroke: var(--sol); stroke-width: 2; }
.cz__char {
  fill: var(--paper);
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  font-size: 44px;
}
.cz__animal {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 19px;
}
.cz__dot { stroke: var(--ink-void); stroke-width: 2; }
.cz__dot.is-lit { stroke: var(--sol); stroke-width: 4; }
.cz__dot.is-now { stroke: var(--paper); stroke-width: 3; }
.cz__big {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 56px;
}
.cz__line {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 24px;
}
.cz__hanzi {
  fill: var(--sol-lift);
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  font-size: 34px;
}

/* --- finding a section ---------------------------------------------------------
   The search, the group jumps and the last few sections, at the head of the
   sheet; the line about the reader's name at its foot.
   ------------------------------------------------------------------------- */

.index__search { margin-top: 0.9rem; }
.index__search input {
  width: 100%;
  padding: 0.75rem 0.95rem;
  font: inherit;
  color: var(--paper);
  background: var(--ink-void);
  border: 1px solid var(--line-field);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.index__search input::placeholder { color: var(--paper-mute); }

.index__jump {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.2rem;
}
.index__jump::-webkit-scrollbar { display: none; }
.index__jump a {
  flex: none;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  color: var(--paper-dim);
  text-decoration: none;
  white-space: nowrap;
}
.index__jump a:hover,
.index__jump a:focus-visible { border-color: var(--line-field); color: var(--paper); }

/* Grid items keep their min-content width by default, and the jump row's is
   the width of all seven chips in a line: without this the whole sheet grew
   to fit it and the tiles ran off the side of a phone. */
.index__inner > * { min-width: 0; }
.index__recent { display: grid; gap: 0.7rem; }
.index__empty { color: var(--paper-dim); }
.index__group { scroll-margin-top: 11rem; }

.index__you {
  padding-top: 1.25rem;
  border-top: var(--rule);
  font-size: var(--step--1);
  color: var(--paper-mute);
}

/* a saved birth form folded to one line (sections/saved-form.js) */
.saved-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
}
.saved-line__text { flex: 1 1 16rem; margin: 0; color: var(--paper-dim); }

.linkish {
  padding: 0;
  font: inherit;
  color: var(--sol-lift);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--sol-deep);
  text-underline-offset: 0.22em;
  cursor: pointer;
}

/* --- the way on, at the foot of a section ------------------------------------- */

.onward {
  border-top: var(--rule);
  margin-top: clamp(2.5rem, 7vw, 5rem);
  padding-block: clamp(2rem, 5vw, 3rem) 0.5rem;
}
.onward__inner { display: grid; gap: 1.25rem; }
.onward__title { font-size: var(--step-2); }
.onward__pair {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.onward__card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 140ms linear, background-color 140ms linear, transform 120ms ease;
}
.onward__card:hover,
.onward__card:focus-visible { border-color: var(--sol-deep); background: var(--ink-mid); }
.onward__card:active { transform: translateY(1px); }
.onward__mark {
  grid-row: 1 / span 3;
  width: 34px;
  height: 34px;
  justify-self: center;
  fill: none;
  stroke: var(--sol);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onward__dir { font-size: var(--step--1); color: var(--paper-mute); }
.onward__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.onward__line { font-size: var(--step--1); color: var(--paper-mute); line-height: 1.35; }

.onward__all {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
}
.onward__all a {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  color: var(--paper-dim);
  text-decoration: none;
}
.onward__all a:hover,
.onward__all a:focus-visible { border-color: var(--line-field); color: var(--paper); }
.onward__all a[aria-current="page"] { border-color: var(--sol); color: var(--sol-lift); }
.onward__more { font-size: var(--step--1); }
.onward__more a { color: var(--sol-lift); }

/* --- the map of the site on the front page -------------------------------------- */

.sitemap__lead { color: var(--paper-dim); max-width: 52ch; }
.sitemap__group { display: grid; gap: 0.75rem; }
.section > .sitemap__group { margin-top: 2.25rem; }
.sitemap__label { font-size: var(--step-1); color: var(--sol); }

/* --- the question of a name -----------------------------------------------------
   A panel at the foot of the screen rather than a box in the middle of it:
   the page stays readable behind it, and skipping is one press.
   ------------------------------------------------------------------------- */

@keyframes solstaria-hello {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.hello {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding-block: 1.1rem 1.3rem;
  background: var(--ink-deep);
  border-top: 1px solid var(--line-field);
  animation: solstaria-hello 380ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.hello__inner { display: grid; gap: 0.55rem; }
.hello__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.hello__why { max-width: 60ch; font-size: var(--step--1); color: var(--paper-mute); }
.hello__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.hello__row input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.75rem 0.95rem;
  font: inherit;
  color: var(--paper);
  background: var(--ink-void);
  border: 1px solid var(--line-field);
  border-radius: 0;
}
.hello__row input::placeholder { color: var(--paper-mute); }

@media (prefers-reduced-motion: reduce) {
  .hello { animation: none; }
}