@font-face { font-family: "Antonio"; src: url("fonts/antonio.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* Every size and colour on the site is one of the values named here. docs/DESIGN.md says what each is for. */
:root {
  --ink-rgb: 3, 5, 10;
  --paper-rgb: 242, 236, 226;
  --sun-rgb: 255, 170, 64;
  --warn-rgb: 255, 104, 92;
  --peach-rgb: 255, 203, 153;
  --lilac-rgb: 196, 160, 232;
  --blue-rgb: 140, 168, 255;
  --ink: rgb(var(--ink-rgb));
  --paper: rgb(var(--paper-rgb));
  --sun: rgb(var(--sun-rgb));
  --warn: rgb(var(--warn-rgb));
  --peach: rgb(var(--peach-rgb));
  --lilac: rgb(var(--lilac-rgb));
  --blue: rgb(var(--blue-rgb));
  --well: rgb(19, 22, 34);
  --dim: rgba(var(--paper-rgb), 0.7);
  --line: rgba(var(--paper-rgb), 0.22);
  --line-soft: rgba(var(--paper-rgb), 0.12);
  --fill: rgba(var(--paper-rgb), 0.12);

  --font-display: "Antonio", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --track: 0.045em;
  --bracket: 0.06em;
  --text-xs: 0.75rem;
  --text-sm: 0.9rem;
  --text-md: 1.0625rem;
  --text-lg: 1.35rem;
  --text-xl: 2.1rem;
  --text-mono: 0.82rem;
  --leading: 1.45;
  --leading-tight: 1.1;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --gap: 0.3rem;
  --edge: max(0.5rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --gutter: max(clamp(0.9rem, 0.5rem + 1.6vw, 2rem), env(safe-area-inset-left), env(safe-area-inset-right));

  --control: 2.75rem;
  --round: 999px;
  --corner: 1.75rem;
  --fillet: 1.25rem;
  --spine: 1.25rem;

  --measure: 44rem;
  --page: 128rem;
  --column: 18rem;
  --rail: clamp(13rem, 18vw, 18rem);
  --panel: clamp(17rem, 26vw, 30rem);
  --side: clamp(22rem, 36vw, 40rem);

  --chart-min: min(100vw, 55svh);
  --drawing: min(100vw, 70svh);
  --diagram: 22rem;
  --strip: 10rem;
  --sheet: 33svh;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: clamp(100%, 0.9591rem + 0.1818vw, 125%); -webkit-text-size-adjust: 100%; background: var(--ink); scrollbar-color: var(--lilac) transparent; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 var(--text-md)/var(--leading) var(--font-text); font-variant-numeric: tabular-nums; }
::selection { background: var(--sun); color: var(--ink); }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3, button, th, summary, .mark, .bar nav a, .links a, .fact dt, .tag, .crumb, .state, .ruler label, .dial::before, .cards strong, .find input::placeholder { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
h1 { font-size: var(--text-xl); font-weight: 400; line-height: var(--leading-tight); color: var(--sun); }
h2 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-lg); line-height: var(--leading-tight); color: var(--lilac); }
h2::after { content: ""; flex: 1 1 2rem; height: var(--space-2); background: var(--lilac); border-radius: 0 var(--round) var(--round) 0; }
h3 { font-size: var(--text-md); color: var(--peach); }
strong { font-weight: 500; }
a { color: var(--peach); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
button { min-height: var(--control); padding: 0 var(--space-4); border: 0; border-radius: var(--round); background: var(--peach); color: var(--ink); font-family: var(--font-display); font-weight: 500; cursor: pointer; }
button:disabled { opacity: 0.55; cursor: default; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The first screen: the header and one main, together at least as tall as the window. */
.screen { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 100svh; }

/* Header: a beam of blocks. The wordmark caps its left end and the search box its right. */
.bar { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap); padding: max(var(--space-2), env(safe-area-inset-top)) var(--edge) var(--gap); }
.mark, .bar nav a { display: flex; align-items: flex-end; justify-content: flex-end; min-height: var(--control); color: var(--ink); text-decoration: none; white-space: nowrap; }
.mark { padding: 0 var(--space-3) var(--space-1); border-radius: var(--round) 0 0 var(--round); background: var(--sun); font-size: var(--text-md); }
.find { grid-column: 2; grid-row: 1; display: flex; }
.find input { width: 100%; min-height: var(--control); padding: 0 var(--space-3) 0 var(--space-2); border: 0; border-radius: 0 var(--round) var(--round) 0; background: var(--well); appearance: none; }
.find input::placeholder { color: var(--dim); font-size: var(--text-xs); }
.bar nav { grid-column: 1 / -1; grid-row: 2; display: flex; gap: var(--gap); }
.bar nav a { flex: 1 1 auto; padding: 0 var(--space-2) var(--space-1); background: var(--peach); font-size: var(--text-sm); }
.bar nav a:first-child { border-radius: var(--round) 0 0 var(--round); }
.bar nav a:last-child { padding-right: var(--space-4); border-radius: 0 var(--round) var(--round) 0; }
.bar nav a[aria-current="page"] { background: var(--paper); }
#hits { position: absolute; z-index: 20; left: var(--edge); right: var(--edge); top: calc(max(var(--space-2), env(safe-area-inset-top)) + var(--control) + var(--gap)); max-height: 60svh; overflow: auto; padding: 0; list-style: none; background: var(--well); border: 2px solid var(--sun); border-radius: var(--space-3); }
#hits li { min-height: var(--control); padding: var(--space-2) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--line-soft); }
#hits li[aria-selected="true"] { background: var(--fill); }
#hits small { display: block; font-size: var(--text-sm); color: var(--dim); }

/* Shared pieces */
.crumb, .sub, .note, .legend { font-size: var(--text-sm); color: var(--dim); }
.sub { overflow-wrap: anywhere; }
.fact { padding: var(--space-1) 0; }
.fact dt { font-size: var(--text-sm); color: var(--peach); }
.tag { display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--peach); border-radius: var(--round); font-size: var(--text-xs); line-height: 1.5; color: var(--peach); white-space: nowrap; }
.tag-measured { border-color: var(--blue); background: var(--blue); color: var(--ink); }
.tag-computed { border-color: var(--sun); background: var(--sun); color: var(--ink); }
.tag-derived, .tag-estimated { border-style: dashed; border-color: var(--lilac); color: var(--lilac); }
.derived { font-style: italic; color: var(--dim); }
.bracket { margin-left: var(--bracket); }
.sign { display: block; width: var(--text-lg); height: var(--text-lg); fill: none; stroke: currentColor; }
.fails, .tag-fails { color: var(--warn); border-color: var(--warn); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap) var(--space-2); }
.links a { display: inline-flex; align-items: center; min-height: var(--control); padding: 0 var(--space-4); border-radius: var(--round); background: var(--blue); color: var(--ink); text-decoration: none; }
.links a:first-of-type, .enter { background: var(--sun); }
.links a[aria-current="true"] { background: var(--paper); }
.state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-3); padding: var(--gutter); text-align: center; color: var(--peach); }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-2) var(--space-4) var(--space-2) 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
th { border-bottom: 1px solid var(--line); font-size: var(--text-sm); color: var(--peach); white-space: nowrap; }
td.n, th.n { text-align: right; white-space: nowrap; }
code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--text-mono); }
pre { margin: 0; padding: var(--space-3) var(--space-4); background: var(--well); white-space: pre-wrap; overflow-wrap: anywhere; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column)), 1fr)); gap: var(--gap); padding: 0; list-style: none; }
.cards a { display: block; height: 100%; padding: var(--space-3) var(--space-4); background: var(--peach); color: var(--ink); text-decoration: none; }
.cards strong { display: block; font-size: var(--text-lg); }
.cards span { display: block; font-size: var(--text-sm); }

/* Map page: the chart. One column here; a rail of blocks, the canvas and a panel side by side on a rail screen. */
#chart-view { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(var(--chart-min), 1fr) auto auto auto auto; }
.rail { display: contents; }
.rail::before, .rail::after { content: none; }
.rail > * { grid-column: 1; padding-inline: var(--edge); }
.crumb { grid-row: 1; align-self: center; padding-block: var(--space-2); padding-right: calc(var(--edge) + 3 * var(--control) + 2 * var(--gap) + var(--space-3)); }
.zoom { grid-column: 1; grid-row: 1; justify-self: end; align-self: center; display: flex; gap: var(--gap); margin: var(--gap) var(--edge) var(--gap) 0; }
.zoom button { display: grid; place-items: center; width: var(--control); padding: 0; background: var(--lilac); }
.modes { grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-bottom: var(--gap); }
.modes button, .dial button { display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 var(--space-2) var(--space-1); border-radius: 0; font-size: var(--text-sm); }
.modes button:first-child { border-radius: var(--round) 0 0 var(--round); }
.modes button:last-child { padding-right: var(--space-4); border-radius: 0 var(--round) var(--round) 0; }
.dial button { background: var(--blue); }
button[aria-pressed="true"], .dial button[aria-pressed="true"] { background: var(--paper); }
.stage { grid-column: 1; grid-row: 3; position: relative; overflow: hidden; }
#chart, .figure canvas, .orbits canvas, .sizes canvas, .illus canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#chart { touch-action: none; cursor: grab; }
.dial { grid-row: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-top: var(--space-2); }
.dial::before { content: attr(aria-label); grid-column: 1 / -1; font-size: var(--text-sm); color: var(--peach); }
.ruler { grid-row: 5; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: center; padding-top: var(--space-2); }
.ruler label { font-size: var(--text-sm); color: var(--peach); }
.ruler input { width: 100%; min-height: var(--control); accent-color: var(--sun); }
.ruler output { grid-column: 1 / -1; }
#legend { grid-row: 6; padding-block: var(--space-2) var(--space-3); }
#drawn { grid-row: 7; padding-bottom: var(--space-4); }
#drawn:empty { display: none; }

/* The selected star: a sheet at the foot of the screen here, a panel beside the canvas on a rail screen. */
.panel { position: fixed; z-index: 10; inset: auto 0 0 0; max-height: var(--sheet); overflow-y: auto; padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom)); background: var(--well); border-radius: var(--corner) var(--corner) 0 0; scrollbar-width: thin; }
.panel > * + * { margin-top: var(--space-2); }
.panel .close { display: grid; place-items: center; float: right; min-width: var(--control); margin: 0 0 var(--space-2) var(--space-3); padding: 0; background: var(--lilac); }
.panel h2 { display: block; font-size: var(--text-xl); font-weight: 400; color: var(--sun); }
.panel h2::after { content: none; }

/* Text pages: content up to --page, set from the left. Running text stops at --measure. */
.page { display: grid; grid-template-columns: var(--gutter) minmax(0, var(--page)) minmax(var(--gutter), 1fr); align-content: start; padding-block: var(--space-4) var(--space-7); }
.page > * { grid-column: 2; min-width: 0; }
.page > * + *, .side > * + * { margin-top: var(--space-3); }
.page h2, .side h2 { margin-top: var(--space-6); }
.page h3, .side h3 { margin-top: var(--space-5); }
.page p, .page ul, .side p, .side ul { max-width: var(--measure); }
.page ul, .side ul { padding-left: var(--space-4); }
.page .cards, .side .cards { max-width: none; padding-left: 0; }
.page dl, .side dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column)), 1fr)); gap: var(--space-3) var(--space-5); align-items: start; }
.page h3.illus-head, .side h3.illus-head { font-size: var(--text-lg); letter-spacing: 0.14em; color: var(--sun); }
.page .state { position: static; padding: var(--space-7) 0; }

/* facts in rows: where a star's facts stand two or more to a row, every row is as tall as the tallest. The holder is then 37.5rem wide or more: two --column and the --space-5 between them. */
.facts { container-type: inline-size; }
@container (min-width: 37.5rem) {
  .facts dl { grid-auto-rows: 1fr; }
}

/* Split pages: a full drawing with its text. Stacked here; side by side on a rail screen. */
html[data-layout="split"] .page { display: block; padding: 0; }
.figure { position: relative; height: var(--drawing); overflow: hidden; }
.side { padding: var(--space-4) var(--gutter) var(--space-7); }
.orbits, .sizes, .illus { position: relative; overflow: hidden; }
.orbits { height: var(--diagram); }
.sizes, .illus { height: var(--strip); }

/* Footer: a closing beam, then the counts, the limits and the credits. */
footer { display: grid; grid-template-columns: var(--gutter) minmax(0, var(--page)) minmax(var(--gutter), 1fr); padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); font-size: var(--text-sm); color: var(--dim); }
footer::before { content: ""; grid-column: 1 / -1; height: var(--space-3); margin: var(--gap) var(--edge) var(--space-4); border-radius: var(--round); background: var(--lilac); }
footer > * { grid-column: 2; max-width: var(--measure); }
footer > * + * { margin-top: var(--space-2); }
footer summary { display: flex; align-items: center; min-height: var(--control); color: var(--peach); cursor: pointer; }
footer ul { padding-left: var(--space-4); }
.noscript { padding: var(--space-4) var(--gutter); }

/* compact and medium: below 1,000 px wide a table stacks its rows. */
@media (max-width: 999.98px) {
  .stack { overflow-x: visible; }
  .stack table, .stack tbody, .stack tr, .stack td { display: block; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stack tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
  .stack td, .stack td.n { padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .stack td:first-child { padding-bottom: var(--space-1); }
  .stack td:not(:first-child) { font-size: var(--text-sm); }
  .stack td:not(:first-child)::before { content: attr(data-label) ": "; color: var(--peach); }
}

/* medium: 700 px and wider, or a phone on its side. The header is one beam, and a text page gains its spine. */
@media (min-width: 700px), (orientation: landscape) and (min-width: 600px) {
  .bar { grid-template-columns: auto minmax(min-content, 1fr) minmax(8rem, 22rem); padding-bottom: 0; }
  .mark { grid-column: 1; grid-row: 1; border-radius: var(--corner) 0 0 0; }
  .bar nav { grid-column: 2; grid-row: 1; }
  .bar nav::before { content: ""; flex: 1 1 0; background: var(--lilac); }
  .bar nav a, .bar nav a:first-child, .bar nav a:last-child { flex: 0 0 auto; padding: 0 var(--space-3) var(--space-1); border-radius: 0; }
  .find { position: relative; grid-column: 3; grid-row: 1; }
  .find input { padding: 0 var(--space-4) 0 var(--space-3); }
  .find input::placeholder { font-size: var(--text-sm); }
  #hits { left: 0; right: 0; top: calc(100% + var(--gap)); }

  html[data-layout="text"] .page {
    grid-template-columns: calc(var(--edge) + var(--spine) + var(--space-5)) minmax(0, var(--page)) minmax(var(--gutter), 1fr);
    background:
      radial-gradient(circle at 100% 100%, transparent calc(var(--fillet) - 0.5px), var(--sun) var(--fillet)) calc(var(--edge) + var(--spine)) 0 / var(--fillet) var(--fillet) no-repeat,
      linear-gradient(var(--sun), var(--sun)) var(--edge) 0 / var(--spine) var(--space-7) no-repeat,
      linear-gradient(var(--lilac), var(--lilac)) var(--edge) calc(var(--space-7) + var(--gap)) / var(--spine) calc(100% - var(--space-7) - var(--gap)) no-repeat;
  }
}

/* rail: 1,000 px and wider, or a phone on its side. Map and split pages take exactly one screen. */
@media (min-width: 1000px), (orientation: landscape) and (min-width: 600px) {
  html[data-layout="map"] .screen, html[data-layout="split"] .screen { height: 100svh; }
  .mark { min-width: var(--rail); }

  #chart-view {
    grid-template-columns: calc(var(--edge) + var(--rail)) minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); min-height: 0;
    background: radial-gradient(circle at 100% 100%, transparent calc(var(--fillet) - 0.5px), var(--sun) var(--fillet)) calc(var(--edge) + var(--rail)) 0 / var(--fillet) var(--fillet) no-repeat;
  }
  .rail { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--gap); overflow-y: auto; padding: 0 0 var(--edge) var(--edge); scrollbar-width: none; }
  .rail::before { content: ""; flex: 0 0 var(--corner); background: var(--sun); }
  .rail::after { content: ""; flex: 1 0 var(--space-5); max-height: calc(4 * var(--control) + 3 * var(--gap)); border-bottom-left-radius: var(--corner); background: var(--lilac); }
  .rail > * { padding: 0; }
  .crumb, .ruler, #legend, #drawn { padding: var(--space-2) var(--space-3); }
  .modes { display: flex; flex-direction: column; flex: 1 0 auto; }
  .modes button, .modes button:first-child, .modes button:last-child, .dial button { flex: 1 0 var(--control); padding: 0 var(--space-3) var(--space-1); border-radius: 0; font-size: var(--text-md); }
  .dial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dial::before { padding: var(--space-2) var(--space-3) 0; }
  .stage { grid-column: 2; grid-row: 1; border-top-left-radius: var(--fillet); }
  .zoom { grid-column: 2; grid-row: 1; align-self: start; flex-direction: column; margin: var(--space-3); z-index: 1; }
  .panel { position: static; grid-column: 3; grid-row: 1; width: var(--panel); max-height: none; padding: var(--space-4) var(--gutter) var(--space-5) var(--space-4); border-radius: 0; }

  html[data-layout="split"] .page {
    display: grid; grid-template-columns: calc(var(--edge) + var(--spine)) minmax(0, 1fr) var(--side); grid-template-rows: minmax(0, 1fr); min-height: 0;
    background:
      radial-gradient(circle at 100% 100%, transparent calc(var(--fillet) - 0.5px), var(--sun) var(--fillet)) calc(var(--edge) + var(--spine)) 0 / var(--fillet) var(--fillet) no-repeat,
      linear-gradient(var(--sun), var(--sun)) var(--edge) 0 / var(--spine) var(--space-7) no-repeat,
      linear-gradient(var(--lilac), var(--lilac)) var(--edge) calc(var(--space-7) + var(--gap)) / var(--spine) calc(100% - var(--space-7) - var(--gap) - var(--edge)) no-repeat;
  }
  html[data-layout="split"] .page > * { margin-top: 0; }
  html[data-layout="split"] .page > .figure { grid-column: 2; height: auto; border-top-left-radius: var(--fillet); }
  html[data-layout="split"] .page > .side { grid-column: 3; overflow-y: auto; padding: var(--space-4) var(--gutter) var(--space-7) var(--space-5); scrollbar-width: thin; }
}

/* A phone on its side: the modes sit two across, and a split page gives its text half the width. */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 999.98px) {
  .modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: var(--space-3); }
  html[data-layout="split"] .page { grid-template-columns: calc(var(--edge) + var(--spine)) minmax(0, 1fr) minmax(0, 1fr); }
}

@media (hover: hover) {
  button:not(:disabled):hover, .mark:hover, .bar nav a:hover, .links a:hover, .cards a:hover { filter: brightness(1.14); }
  :is(p:not(.links), td, li:not(.cards li), dd) > a:hover { color: var(--paper); }
  #hits li:hover { background: var(--fill); }
}
button:not(:disabled):active, .bar nav a:active, .links a:active, .cards a:active { filter: brightness(0.88); }

@media (prefers-reduced-motion: no-preference) {
  a, button, #hits li, .cards a { transition: color 120ms, background-color 120ms, filter 120ms; }
}