/* Off Planet News. Clean, scientific, futuristic: deep-space ground, instrument-panel type,
   one signal colour. IBM Plex is self-hosted (OFL) so nothing loads from a third party. */
@font-face { font-family: "Plex Sans"; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --void: #05070c;
  --panel: #0a0e16;
  --text: #e6e9ef;
  --dim: #b4bccb;
  --muted: #7d8699;
  --line: rgba(150, 170, 210, .14);
  --signal: #4fd1ff;
  --glow: rgba(79, 209, 255, .08);
  --sep: rgba(150, 170, 210, .35);
  --sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --measure: 46rem;
}
/* Light theme: white lab paper, graphite ink, a deeper blue so links keep AA contrast. */
[data-theme="light"] {
  --void: #f7f8fa;
  --text: #0b1220;
  --dim: #2e3646;
  --muted: #5d6678;
  --line: rgba(30, 50, 90, .12);
  --signal: #0069a8;
  --glow: rgba(0, 105, 168, .06);
  --sep: rgba(30, 50, 90, .3);
}
* { box-sizing: border-box; }
html { background: var(--void); }
body {
  margin: 0; min-height: 100vh;
  color: var(--text);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* A faint graticule, like plotted chart paper, that fades out below the edition header. */
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--glow), transparent 70%),
    linear-gradient(transparent, var(--void) 38rem),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 64px),
    var(--void);
}
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--signal); color: var(--void); }

/* Masthead */
.masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  max-width: calc(var(--measure) + 12rem); margin: 0 auto; padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: flex; align-items: center; gap: .6rem; color: var(--text);
  font: 500 .95rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
}
.wordmark:hover { text-decoration: none; }
.mark { width: 28px; height: 28px; color: var(--text); }
.mark .craft { fill: var(--signal); }
.masthead nav { align-items: center; }
.theme-toggle {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--muted);
}
.theme-toggle:hover { color: var(--signal); border-color: var(--signal); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .sun circle { fill: currentColor; }
/* Show the theme you would switch TO: the sun in the dark, the moon in the light. */
.theme-toggle .moon, [data-theme="light"] .theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .moon { display: block; }
.masthead nav { display: flex; gap: 1.5rem; font: 400 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.masthead nav a { color: var(--muted); }
.masthead nav a:hover { color: var(--text); text-decoration: none; }

main { max-width: calc(var(--measure) + 12rem); margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
main > :not(.edition) { max-width: var(--measure); }

/* Type */
h1, h2 { font-weight: 600; letter-spacing: -.02em; color: var(--text); }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.08; margin: .5rem 0 1rem; }
h2 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .75rem; }
main > h2 { margin-top: 2.5rem; }
p { margin: 0 0 1rem; color: var(--dim); }
.summary { font-size: 1.2rem; line-height: 1.55; color: var(--dim); max-width: 38rem; }
.dateline, .byline, .telemetry, .tag, .num, .sources, footer {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
}
.dateline, .byline { color: var(--muted); }

/* Edition header: a telemetry strip above the headline */
.edition-head { padding-bottom: 2.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.telemetry { display: flex; flex-wrap: wrap; gap: .4rem 0; color: var(--muted); margin-bottom: 1.25rem; }
.telemetry > * + *::before { content: "/"; margin: 0 .9rem; color: var(--sep); }
.telemetry time { color: var(--signal); }
.telemetry time::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .6rem .1rem 0;
  border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }

/* Story index: the edition at a glance */
.index { list-style: none; margin: 0 0 3rem; padding: 0; }
.index li { border-bottom: 1px solid var(--line); }
.index a { display: grid; grid-template-columns: 3rem 9rem 1fr; align-items: baseline; gap: 1rem; padding: .85rem 0; color: var(--dim); }
.index a:hover { color: var(--text); text-decoration: none; background: linear-gradient(90deg, var(--glow), transparent); }
.idx-head { font-size: 1rem; line-height: 1.4; }
.num { color: var(--muted); }
.tag { color: var(--signal); }

/* Stories: mono gutter for number and category, prose to the right */
.story { display: grid; grid-template-columns: 12rem minmax(0, var(--measure)); gap: 0 2rem;
  padding: 2.5rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.story:first-of-type { border-top: 0; }
.gutter { display: flex; flex-direction: column; gap: .5rem; padding-top: .35rem; }
.gutter .num { font-size: 1.6rem; letter-spacing: 0; color: var(--text); font-weight: 400; line-height: 1; }
.sources { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1.25rem; padding-top: .9rem;
  border-top: 1px dashed var(--line); color: var(--muted); }
.sources .label { color: var(--muted); }
.sources a::after { content: " \2197"; }

/* Lists on archive, author and corrections pages */
.editions, .corrections { list-style: none; padding: 0; margin: 1.5rem 0; }
.editions li, .corrections li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line); }
.editions a { color: var(--text); font-weight: 500; }

.subscribe { margin-top: 3rem; }
.button {
  display: inline-block; padding: .8rem 1.4rem; border: 1px solid var(--signal); border-radius: 2px;
  color: var(--signal); font: 500 .78rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.button:hover { background: var(--signal); color: var(--void); text-decoration: none; }

footer { max-width: calc(var(--measure) + 12rem); margin: 0 auto; padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--line); color: var(--muted); }
footer p { color: var(--muted); }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  main { padding-top: 2.25rem; }
  .story { grid-template-columns: 1fr; padding: 2rem 0; }
  .gutter { flex-direction: row; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
  .gutter .num { font-size: 1rem; }
  .index a { grid-template-columns: 2.25rem 1fr; }
  .index .tag { display: none; }
}
[data-theme="light"] .telemetry time::before { box-shadow: none; }