/* Visionary Systems site
   Layout: an observatory's logbook. One deep-field theme, one family (Spectral),
   a centered reading column of about 86 characters on interior pages, with the
   structural blocks (facts, coordinates, tier map, archive) spanning the full
   container width. Body text is justified with hyphenation above phone width.
   The one luminous element is the gold: the mark glows, interactive gold glows
   on hover, and nothing else does. */

:root {
  --field: #0A1628;      /* deep navy, page ground */
  --field-2: #132340;    /* raised navy, panels and bands */
  --field-0: #0A1020;    /* mark field, deepest band */
  --gold: #FFB830;       /* luminous gold on navy */
  --gold-hot: #FFCB5C;   /* gold at hover: hotter, not a new hue */
  --gold-deep: #DE9A00;  /* gold for fills that carry dark text */
  --star: #EEF2FF;       /* starlight, headings and the lens */
  --ink: #D5DCEC;        /* running text, starlight dimmed one step */
  --slate: #8B9AAD;      /* secondary text, the wordmark's second word */
  --line: rgba(139, 154, 173, 0.28);
  --glow: rgba(255, 184, 48, 0.35);
  --focus: #FFD27A;

  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body: "Spectral", Georgia, "Times New Roman", serif;

  --measure: 48.5rem;       /* reading column, interior pages: about 86 characters of Spectral at 18px */
  --measure-essay: 53rem;   /* reading column, essay pages: about 88 characters at the essay size */
  --wide: 68rem;          /* container for structural blocks */
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: "kern", "liga";
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
@media (min-width: 900px) { body { font-size: 1.125rem; } }

::selection { background: var(--gold); color: var(--field-0); }

img, svg { max-width: 100%; }

a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--gold-hot); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--display);
  color: var(--star);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.9rem); }
h3 { font-size: 1.2rem; }

p { margin: 0; }
p + p { margin-top: 1.1em; }

strong { color: var(--star); font-weight: 600; }
em { font-style: italic; }

/* Containers */

.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

.prose { max-width: var(--measure); margin-inline: auto; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.4em; margin-bottom: 0.6em; }
.prose h3 { margin-top: 1.8em; margin-bottom: 0.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose p, .prose li { text-wrap: pretty; }

/* Justified body text above phone width, with hyphenation so the spacing stays even.
   Headings, ledes, captions, and lists stay ragged; justification is for paragraphs. */
@media (min-width: 760px) {
  .prose p, .essay-body .prose p, .subscribe > p { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }
}

.wrap > h2 { margin-bottom: 0.7rem; max-width: var(--measure); margin-inline: auto; }

/* Header */

.site-header {
  background: var(--field);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.1rem;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--star);
  text-decoration: none;
}
.lockup:hover { color: var(--star); }
.lockup .mark { width: 2.4rem; height: 2.4rem; flex: none; }
.lockup:hover .mark { filter: drop-shadow(0 0 6px var(--glow)); }
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark span { color: var(--slate); font-weight: 400; }

.site-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 1rem; }
.site-nav a:hover { color: var(--gold-hot); }
.site-nav a[aria-current="page"] { color: var(--gold); }

/* Hero (home) */

.hero {
  position: relative;
  background: var(--field-0);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  padding-block: 4.5rem;
}
.hero-text { max-width: 60ch; min-width: 0; margin-inline: 0; }
.hero-text h1 { margin-bottom: 1rem; }
.lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.hero-mark { display: flex; justify-content: center; }
.hero-mark .mark {
  width: min(16rem, 60vw);
  height: auto;
  filter: drop-shadow(0 0 22px var(--glow));
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
.button {
  display: inline-block;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1;
  padding: 0.8rem 1.2rem;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.button-primary { background: var(--gold); color: var(--field-0); border-color: var(--gold); }
.button-primary:hover { background: var(--gold-hot); border-color: var(--gold-hot); color: var(--field-0); box-shadow: 0 0 22px var(--glow); }
.button-ghost { background: transparent; color: var(--star); border-color: var(--slate); }
.button-ghost:hover { border-color: var(--gold); color: var(--star); box-shadow: 0 0 18px rgba(255, 184, 48, 0.18); }

/* Bands and sections */

.band { padding-block: 3.6rem; }
.band + .band { border-top: 1px solid var(--line); }
.band-raised { background: var(--field-2); }

.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.6rem;
  max-width: var(--measure);
  margin-inline: auto;
}
.band-head .lede { max-width: 60ch; }
.kicker {
  color: var(--slate);
  font-size: 0.95rem;
  font-style: italic;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin: 1.6rem 0 1.8rem;
}
.fact { min-width: 0; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.fact .value {
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--star);
  font-variant-numeric: tabular-nums;
}
.fact .label { color: var(--slate); font-size: 0.95rem; }

/* Coordinates (definition list): two columns on wide screens */

.coords { margin: 1.4rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; }
.coords > div { border-top: 1px solid var(--line); padding: 1rem 0; }
.coords dt { color: var(--star); font-weight: 600; }
.coords dt small { color: var(--slate); font-weight: 400; margin-left: 0.4rem; }
.coords dd { margin: 0.2rem 0 0; }
@media (min-width: 900px) {
  .coords { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coords > div:nth-child(5) { grid-column: 1 / -1; }
  .coords > div:nth-child(5) dd { max-width: var(--measure); }
}

/* Three design choices: the long first one fills the left column, the two short ones stack on the right */

.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 2.5rem; margin-top: 1.4rem; }
.choices > div { min-width: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
.choices h3 { margin: 0 0 0.5rem; }
@media (min-width: 900px) {
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .choices > div:first-child { grid-row: span 2; }
}

/* Tier map */

.tiermap { margin: 1.6rem 0 0; overflow-x: auto; }
.tiermap svg { display: block; width: 100%; min-width: 560px; height: auto; }
.tiermap circle { filter: drop-shadow(0 0 2.5px rgba(255, 184, 48, 0.55)); }
.tiermap figcaption { color: var(--slate); font-size: 0.95rem; margin-top: 0.8rem; max-width: var(--measure); }

/* Rules list */

.rules { margin: 1rem 0 0; padding-left: 1.3em; }
.rules li + li { margin-top: 0.4em; }

/* Essay archive: two columns on wide screens */

.essays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; }
.essays li { border-top: 1px solid var(--line); padding: 1.2rem 0 1.4rem; min-width: 0; }
.essays .num { color: var(--slate); font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.essays .title { display: block; font-family: var(--display); font-size: 1.3rem; line-height: 1.3; color: var(--star); text-decoration: none; margin-top: 0.3rem; text-wrap: balance; }
.essays .title:hover { color: var(--gold-hot); }
.essays .meta { color: var(--slate); font-size: 0.95rem; margin-top: 0.35rem; }
.essays .summary { margin-top: 0.55rem; }
@media (min-width: 900px) {
  .essays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* First-issue note */

.subscribe { max-width: var(--measure); margin-inline: auto; }
.subscribe .note { color: var(--slate); font-size: 0.95rem; margin-top: 0.9rem; }

/* Essay pages */

.essay-head .prose, .essay-body .prose, .essay-foot .prose { max-width: var(--measure-essay); margin-inline: auto; }
.essay-head { padding-block: 3rem 1.5rem; border-bottom: 1px solid var(--line); }
.essay-head .series { color: var(--slate); font-style: italic; }
.essay-head h1 { margin-top: 0.5rem; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
.essay-head .meta { color: var(--slate); margin-top: 0.9rem; font-size: 0.95rem; }
.essay-body { padding-block: 2.4rem 3.6rem; }
.essay-body .prose { font-size: 1.2rem; line-height: 1.7; }
.essay-foot { border-top: 1px solid var(--line); padding-block: 1.6rem 3rem; color: var(--slate); font-size: 0.95rem; }
.essay-foot a { color: var(--gold); }
@media (max-width: 760px) {
  .essay-body .prose { font-size: 1.05rem; }
}

/* Contact */

.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.8rem; }
.contact code {
  font-family: var(--body);
  font-size: 1.05rem;
  color: var(--star);
  user-select: all;
  background: var(--field-2);
  padding: 0.35rem 0.6rem;
  border-radius: 3px;
}
.contact button {
  font: inherit;
  font-size: 0.95rem;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--slate);
  border-radius: 3px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.contact button:hover { border-color: var(--gold); color: var(--gold-hot); }

/* Not-found page */

.notfound { padding-block: 5rem 6rem; text-align: center; }
.notfound .mark { width: 7rem; height: 7rem; filter: drop-shadow(0 0 18px var(--glow)); }
.notfound h1 { margin-top: 1.4rem; }
.notfound p { margin-top: 1rem; color: var(--ink); }

/* Footer */

.site-footer { border-top: 1px solid var(--line); background: var(--field-0); }
.site-footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem 2rem;
  align-items: start;
  padding-block: 2.4rem;
  color: var(--slate);
  font-size: 0.95rem;
}
.site-footer .lockup .mark { width: 2rem; height: 2rem; }
.site-footer .colophon { margin-top: 0.8rem; max-width: 60ch; }
.site-footer .colophon p + p { margin-top: 0.4em; }
.site-footer nav { display: grid; gap: 0.4rem; text-align: left; }
.site-footer nav a { color: var(--ink); text-decoration: none; }
.site-footer nav a:hover { color: var(--gold-hot); }

/* Responsive */

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 3rem; }
  .hero-mark { order: -1; }
  .hero-mark .mark { width: min(11rem, 50vw); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); }
  .band { padding-block: 2.8rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .site-nav a, a, .lockup .mark { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 160ms ease, filter 160ms ease; }
}