@import url('fonts.css');

/* ==========================================================================
   The Astronomy Centre — design system

   Colour is sampled from the two things you actually see on that hill: the
   sky over the Southern Pennines at astronomical twilight, and the millstone
   grit the valley is built from. The one loud element is red-light mode,
   because an observatory runs on red light and a visitor standing on the
   observing field with a phone genuinely needs it.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* The twilight sky, sampled zenith to horizon */
  --zenith: #080b1a;
  --nautical: #121a36;
  --horizon: #26305c;

  /* Materials: millstone grit, and limewash on the dome */
  --grit: #b9ae9c;
  --limewash: #ece7dc;

  /* Sodium glow of the mill towns over the ridge. It is light pollution, so
     it is reserved for the things that pull you out of the house. */
  --sodium: #e8ad5c;

  /* Semantic tokens — every rule below reads from these, which is what lets
     red-light mode reskin the whole site by overriding this block alone. */
  --bg: var(--zenith);
  --surface: #0e1428;
  --surface-2: var(--nautical);
  --line: #26304f;
  --line-soft: #1a2340;
  --text: var(--limewash);
  --text-dim: var(--grit);
  --text-faint: #7c8299;
  --accent: var(--sodium);
  --accent-ink: #1c1305;
  --focus: #86d8ff;
  --moon-lit: #efe7d4;
  --moon-dark: #1b2340;

  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Literata', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Fluid type scale, ~1.2 at small sizes opening to ~1.33 at large */
  --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.77rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1: clamp(1.20rem, 1.13rem + 0.36vw, 1.44rem);
  --step-2: clamp(1.44rem, 1.32rem + 0.62vw, 1.87rem);
  --step-3: clamp(1.73rem, 1.53rem + 1.00vw, 2.44rem);
  --step-4: clamp(2.07rem, 1.75rem + 1.60vw, 3.17rem);
  --step-5: clamp(2.49rem, 1.97rem + 2.60vw, 4.30rem);

  --gap: clamp(1rem, 0.7rem + 1.5vw, 2rem);
  --band-pad: clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius: 3px;
  --measure: 62ch;
}

/* --------------------------------------------------------------------------
   Red light. White light wrecks the dark adaptation that takes twenty minutes
   to build, so the observatory works under red and so does this site when you
   ask it to. Only the token block changes; everything else follows.
   -------------------------------------------------------------------------- */
[data-light='red'] {
  --bg: #000000;
  --surface: #0b0000;
  --surface-2: #140100;
  --line: #4d100c;
  --line-soft: #2c0806;
  --text: #ff4136;
  --text-dim: #c22a22;
  --text-faint: #8d1e18;
  --accent: #ff4136;
  --accent-ink: #180000;
  --focus: #ff9a92;
  --moon-lit: #ff4136;
  --moon-dark: #200502;
}

/* Photographs would otherwise leak blue and violet straight into a dark-adapted
   eye. Applied per-element, never to a container, because `filter` would create
   a containing block and break the sticky header. */
[data-light='red'] img,
[data-light='red'] video {
  filter: grayscale(1) sepia(1) hue-rotate(-42deg) saturate(7) brightness(0.5);
}

[data-light='red'] .page-glow {
  display: none;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* The twilight gradient, made literal: the page is darkest overhead and warms
   very slightly toward the horizon behind the first screenful. */
.page-glow {
  position: fixed;
  inset: 0 0 auto 0;
  height: 90vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(130% 70% at 50% 96%, rgba(232, 173, 92, 0.06), transparent 62%),
    linear-gradient(to bottom, #141d47 0%, rgba(20, 29, 71, 0.35) 45%, rgba(20, 29, 71, 0) 100%);
}

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

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -0.038em;
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-1);
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1.1em;
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 140ms ease, color 140ms ease;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

strong {
  font-weight: 600;
  color: var(--text);
}

/* The eyebrow labels sit in the utility face because they behave like the
   column heads of a table, not like prose. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1.4em;
  display: block;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 46ch;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - clamp(2rem, 6vw, 6rem), 74rem);
  margin-inline: auto;
}

.wrap--narrow {
  width: min(100% - clamp(2rem, 6vw, 6rem), 46rem);
}

.band {
  position: relative;
  z-index: 1;
  padding-block: var(--band-pad);
  border-top: 1px solid var(--line-soft);
}

.band--plain {
  border-top: 0;
}

.band--surface {
  background: var(--surface);
}

main {
  flex: 1 0 auto;
  position: relative;
  z-index: 1;
}

/* Parked above the viewport rather than off to the left: content overflowing
   the top is not scrollable, so this cannot widen the page on a narrow screen. */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
}

.skip-link:focus {
  top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 4.25rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
  padding-block: 0.9rem;
}

/* The mark is the Centre's own dome: a 29 ft drum with its twin shutters open. */
.brand__mark {
  color: var(--accent);
  flex: 0 0 auto;
  overflow: visible;
}

.brand__the {
  color: var(--text-faint);
  font-weight: 400;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav li {
  display: flex;
  align-items: center;
}

.nav form {
  margin: 0;
  display: flex;
}

.nav a,
.nav button {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--text-dim);
  padding-block: 0.45rem;
  border-bottom: 1px solid transparent;
  background: none;
  border-inline: 0;
  border-top: 0;
  cursor: pointer;
}

.nav a:hover,
.nav button:hover,
.nav a[aria-current='page'] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* The signature control. A dot, a word, and a switch — it reads as a lamp. */
.redlight {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.35rem 0.7rem 0.35rem 0.55rem;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.redlight:hover {
  border-color: var(--accent);
  color: var(--text);
}

.redlight__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #552020;
  box-shadow: none;
  transition: background 200ms ease, box-shadow 200ms ease;
}

[data-light='red'] .redlight {
  border-color: var(--accent);
  color: var(--text);
}

[data-light='red'] .redlight__dot {
  background: #ff4136;
  box-shadow: 0 0 8px 1px rgba(255, 65, 54, 0.85);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn,
.btn-primary,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, filter 160ms ease;
}

.btn:hover,
.btn-primary:hover {
  filter: brightness(1.1);
  color: var(--accent-ink);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.btn--ghost:hover {
  color: var(--text);
  border-color: var(--accent);
  filter: none;
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Hero and the tonight panel
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 2.5rem + 5vw, 6.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.hero__title {
  margin-bottom: 0.35em;
}

.hero__title em {
  font-style: normal;
  color: var(--accent);
}

/* A hairline strip of hard facts, directly under the fold. Coordinates,
   altitude, founding year — the things an observer checks first. */
.factstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block: 1.1rem;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.factstrip span {
  white-space: nowrap;
}

.factstrip b {
  color: var(--text-dim);
  font-weight: 500;
}

/* The tonight panel */
.tonight {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}

.tonight__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.tonight__head .eyebrow {
  margin: 0;
}

.tonight__date {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
}

.tonight__moon {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line-soft);
}

.moon {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
}

.tonight__phase {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  display: block;
}

.tonight__illum {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Times as an observing-log table: label left, value right, leader between. */
.log {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.log li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--step--1);
}

.log__name {
  color: var(--text-dim);
}

.log__leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-0.28em);
  min-width: 1rem;
}

.log__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.log li[data-emphasis='true'] .log__value {
  color: var(--accent);
  font-weight: 500;
}

.tonight__note {
  margin: 1.3rem 0 0;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--text-faint);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Offer cards — three kinds of visitor, not three steps of a process, so they
   carry no numbering. What varies between them is what you have to bring.
   -------------------------------------------------------------------------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.card {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
}

.card__bring {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}

.card h3 {
  margin-bottom: 0.6rem;
}

.card p {
  color: var(--text-dim);
  font-size: var(--step--1);
  margin-bottom: 0;
}

.card__foot {
  margin-top: auto;
  padding-top: 1.4rem;
}

/* --------------------------------------------------------------------------
   Instrument list. Ordered by aperture because that ordering carries real
   information: it is the answer to "what will I get to look through".
   -------------------------------------------------------------------------- */
.specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: 46rem;
}

.specs li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.spec__name {
  color: var(--text);
}

.spec__leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-0.28em);
  min-width: 1.5rem;
}

.spec__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  white-space: nowrap;
}

.specs li:first-child .spec__name {
  font-weight: 600;
}

.specs li:first-child .spec__value {
  color: var(--accent);
}

/* Values that are sentences rather than measurements. They have to be allowed
   to wrap, and to drop onto their own line when the row runs out of width. */
.specs--prose li {
  flex-wrap: wrap;
}

.specs--prose .spec__value {
  white-space: normal;
  text-align: right;
  font-family: var(--font-body);
}

.specs--prose li:first-child .spec__value {
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Timeline. Numbered because these really are a sequence — each thing on the
   site was built on top of the one before it — and the markers are the actual
   years rather than decorative counters.
   -------------------------------------------------------------------------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.timeline li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: 1.6rem;
  border-top: 1px solid var(--line-soft);
}

.timeline li:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.timeline__year {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding-top: 0.2em;
}

.timeline h3 {
  margin-bottom: 0.35em;
}

.timeline p {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--step--1);
}

@media (max-width: 34rem) {
  .timeline li {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* --------------------------------------------------------------------------
   Two-column prose
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}

.split__aside .eyebrow {
  margin-bottom: 0.8rem;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h3 {
  margin-top: 2.2em;
}

.prose h3:first-child {
  margin-top: 0;
}

/* Small repeated text treatments. These exist as classes rather than style
   attributes so the site can run a Content-Security-Policy with no
   'unsafe-inline' in style-src. */
.aside-note {
  color: var(--text-faint);
  font-size: var(--step--1);
}

.small-note {
  margin-top: 1.4rem;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.panel-note {
  font-size: var(--step--1);
  color: var(--text-dim);
  margin-bottom: 0;
}

.prose .specs {
  margin-block: 1.4rem;
}

.specs--loose {
  gap: 1.1rem;
}

/* Centred call-to-action band. */
.centred {
  text-align: center;
}

.centred p {
  margin-inline: auto;
}

.centred .btn-row {
  justify-content: center;
}

/* A hero with no side panel — the About page opens on text alone. */
.hero--single {
  grid-template-columns: 1fr;
  padding-bottom: 0;
}

/* A quiet aside for the things a first-time visitor worries about. */
.note {
  border-left: 2px solid var(--accent);
  padding: 0.15rem 0 0.15rem 1.1rem;
  margin: 2rem 0;
  color: var(--text-dim);
  font-size: var(--step--1);
}

.note p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Forms. The Bootstrap class names below are the ones the stock ASP.NET Core
   Identity pages emit. Restyling them here — rather than shipping Bootstrap —
   keeps password reset, 2FA and the GDPR data pages visually part of the site.
   -------------------------------------------------------------------------- */
/* Sign-in and signup: the form leads, with the reason to fill it in beside it. */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* The form sits below its own introduction; the panel beside it starts level
   with the heading. */
.auth .form-panel {
  margin-top: 2rem;
}

.auth aside .form-panel {
  margin-top: 0;
}

@media (max-width: 60rem) {
  .auth {
    grid-template-columns: 1fr;
  }
}

.form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.field {
  margin-bottom: 1.15rem;
}

label,
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.45rem;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='number'],
input[type='date'],
select,
textarea,
.form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

input:hover,
.form-control:hover {
  border-color: var(--text-faint);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Identity's floating-label markup: the label is a sibling that overlaps the
   input. Flatten it back to a plain stacked label. */
.form-floating {
  position: relative;
  margin-bottom: 1.15rem;
  display: flex;
  flex-direction: column-reverse;
}

.form-floating > label {
  position: static;
  padding: 0;
  border: 0;
  height: auto;
  pointer-events: auto;
  transform: none;
  opacity: 1;
}

.form-floating > .form-control {
  height: auto;
  padding: 0.75rem 0.9rem;
  line-height: 1.4;
}

.form-floating > .form-control::placeholder {
  color: transparent;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.checkbox input,
.form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.25rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.checkbox label,
.form-check-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  line-height: 1.5;
}

.field-hint {
  display: block;
  font-size: var(--step--2);
  color: var(--text-faint);
  margin-top: 0.4rem;
  line-height: 1.5;
}

/* Validation. Errors state what happened and what to do; they are never
   styled as an apology. */
.text-danger,
.validation-summary-errors,
.field-validation-error {
  color: #ff8a7a;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.5;
  display: block;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.validation-summary-valid {
  display: none;
}

input.input-validation-error,
.form-control.input-validation-error {
  border-color: #ff8a7a;
}

/* Identity's account-management side nav */
.nav-pills {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.nav-pills .nav-link {
  display: block;
  background: var(--bg);
  color: var(--text-dim);
  padding: 0.7rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
}

.nav-pills .nav-link:hover {
  color: var(--text);
}

.nav-pills .nav-link.active {
  background: var(--surface-2);
  color: var(--accent);
}

hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 2rem 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sitefoot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--step--1);
  color: var(--text-dim);
  margin-top: auto;
}

.sitefoot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem;
}

.sitefoot h4 {
  font-size: var(--step--2);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}

.sitefoot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.sitefoot a {
  text-decoration: none;
}

.sitefoot a:hover {
  text-decoration: underline;
}

.sitefoot address {
  font-style: normal;
  line-height: 1.7;
}

.footer-w3w {
  margin-top: 0.8rem;
  color: var(--text-faint);
}

.sitefoot__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: var(--step--2);
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   Accessibility floor
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 34rem) {
  .masthead__inner {
    min-height: 0;
    padding-bottom: 0.75rem;
  }

  .brand {
    margin-right: 0;
    width: 100%;
    padding-bottom: 0.25rem;
  }

  .nav {
    width: 100%;
    justify-content: flex-start;
  }

  .btn-row .btn {
    width: 100%;
  }
}

@media print {
  .masthead,
  .page-glow,
  .btn-row {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}