/* Heliopause — shared tokens and base.
   Two-temperature system: cold interstellar field, warm solar wind.
   The boundary between them is the only place they meet. */

:root {
  --void:   #05070E;
  --field:  #0B1220;
  --rule:   #1B2942;
  --dim:    #6B7C99;
  --ice:    #C8D8F0;
  --wind:   #FF7A3D;
  --amber:  #F2B33D;
  --fail:   #8B2F3F;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
          "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 62ch;
}

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

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(120% 80% at 12% 108%, rgba(255,122,61,.10), transparent 62%),
    radial-gradient(90% 70% at 88% -8%, rgba(107,124,153,.09), transparent 60%),
    var(--void);
  background-attachment: fixed;
  color: var(--ice);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  font-variant-ligatures: none;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---- type roles ---- */

.eyebrow {
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 1.25rem;
}

.prose {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ice);
  max-width: var(--measure);
}
.prose--dim { color: var(--dim); }

h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; }

h2 {
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  letter-spacing: .05em;
  text-transform: uppercase;
}

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--wind); }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--amber); color: var(--void);
  padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: var(--gut); top: .5rem; }

/* ---- masthead ---- */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.5rem 0;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ice); text-decoration: none;
  font-size: .875rem; letter-spacing: .28em; text-transform: uppercase;
}
.brand:hover { color: var(--ice); }
.brand svg { display: block; flex: none; }
.masthead .tag {
  font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}

/* ---- rules and sections ---- */

.hr {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--rule), rgba(27,41,66,0));
}

.band { padding-block: clamp(2.5rem, 6vw, 4rem); }
.band + .band { border-top: 1px solid var(--rule); }

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

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  align-items: baseline; justify-content: space-between;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.foot nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--ice); }

/* ---- interior pages ---- */

.page { padding-block: clamp(2.5rem, 7vw, 4rem) 4rem; max-width: 46rem; }
.page h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  letter-spacing: -.025em; line-height: 1.06; margin: 0 0 1.5rem;
}
.page h2 { margin: 2.75rem 0 .85rem; }
.page .prose { margin: 0 0 1.1rem; }
.page ul { margin: 0 0 1.1rem; padding-left: 1.1rem; }
.page li { font-family: var(--sans); color: var(--ice); margin-bottom: .5rem; max-width: var(--measure); }

.factsheet { margin: 0; font-size: .875rem; max-width: 38rem; }
.factsheet div { display: flex; align-items: baseline; gap: .6rem; padding-block: .45rem;
                 border-bottom: 1px solid var(--rule); }
.factsheet dt { flex: 0 0 11rem; color: var(--dim); font-size: .75rem;
                letter-spacing: .1em; text-transform: uppercase; }
.factsheet dd { flex: 1 1 auto; margin: 0; }

.note { border-left: 2px solid var(--wind); padding: .1rem 0 .1rem 1.1rem; margin: 1.75rem 0; }
.note p { margin: 0; }

.centered { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }