/* ─────────────────────────────────────────────────────────────
   zxcr4.dev — shared theme
   See docs/theme.md before changing anything in here.
   No external requests: no CDNs, no webfonts, no analytics.
   ───────────────────────────────────────────────────────────── */

:root {
  --bg:     #08090c;
  --fg:     #e8eaf0;
  --muted:  #959bab;   /* 7.16:1 on --bg */
  --faint:  #767c8a;   /* 4.76:1 on --bg — the floor; nothing dimmer holds text */
  --accent: #6aa9ff;   /* 8.28:1 on --bg */
  --line:   #20242c;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --column: 46rem;
  --gutter: clamp(1.5rem, 4vw, 2.75rem);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ── ambience ───────────────────────────────────────────────── */

/* two soft glows: saber blue above, a cooler violet below */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42rem 30rem at 50% 24%, rgba(106,169,255,.14), transparent 68%),
    radial-gradient(34rem 26rem at 76% 88%, rgba(140,120,255,.09), transparent 70%);
}

/* film grain, keeps the flat black from looking dead */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── frame ──────────────────────────────────────────────────── */

header, main, footer {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* header and footer span the viewport; only main is held to a column */
header, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3.5vh, 1.75rem) var(--gutter);
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--muted);
}

header { border-bottom: 1px solid var(--line); }

footer {
  border-top: 1px solid var(--line);
  font-size: .75rem;
  color: var(--faint);
}

/* last item hugs the right edge, whether it is alone or paired */
footer > :last-child { margin-inline-start: auto; }

/* the route that must survive on every page: contact */
.footlinks {
  display: flex;
  gap: 1.25rem;
}

.footlinks a {
  color: var(--faint);
  border-bottom: 1px solid transparent;
}

.footlinks a:hover { color: var(--fg); border-bottom-color: var(--faint); }

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--column);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 6vw, 3rem);
  padding-block: clamp(2.5rem, 9vh, 5.5rem);
}

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: var(--muted);
}

a.brand:hover { color: var(--fg); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(106,169,255,.18);
}

/* ── type ───────────────────────────────────────────────────── */

h1 {
  margin: 0;
  font-size: clamp(2rem, 6.4vw, 3.5rem);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -.032em;
  max-width: 18ch;
  text-wrap: balance;
}

/* the headline */
.sheen { color: var(--fg); }

.lead {
  margin: 1.375rem 0 0;
  max-width: 42ch;
  color: var(--muted);
  font-size: 1.0625rem;
  /* balance, not pretty: these paragraphs are short enough that evening the
     lines out beats leaving a one-word last line */
  text-wrap: balance;
}

.lead em { color: var(--fg); font-style: italic; }

/* small mono label that sits above a heading or a block */
.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── links ──────────────────────────────────────────────────── */

a, button { color: var(--fg); text-decoration: none; }

.primary {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .6875rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.022);
  font-size: .9375rem;
  letter-spacing: -.005em;
}

.primary:hover {
  border-color: rgba(106,169,255,.42);
  background: rgba(106,169,255,.07);
  box-shadow: 0 0 28px -8px rgba(106,169,255,.45);
}

.ghost {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--muted);
  cursor: pointer;
}

.ghost:hover { color: var(--fg); border-bottom-color: var(--faint); }

.ghost[disabled] { cursor: default; color: var(--faint); }
.ghost[disabled]:hover { color: var(--faint); border-bottom-color: transparent; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  margin-top: clamp(2.25rem, 6vw, 3rem);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── index: the list of places to go ────────────────────────── */

.rows {
  margin: clamp(2.5rem, 7vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.rows li { border-bottom: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 1.0625rem 1rem 1.0625rem .25rem;
}

a.row:hover {
  background: rgba(106,169,255,.045);
}

.row .what {
  font-family: var(--mono);
  font-size: .875rem;
  letter-spacing: -.01em;
}

.row .why {
  color: var(--muted);
  font-size: .9375rem;
  text-wrap: pretty;
}

/* the arrow, or a word like "soon" for a row that goes nowhere yet */
.row .mark {
  align-self: center;
  color: var(--faint);
  font-family: var(--mono);
  font-size: .8125rem;
}

.row .mark svg { display: block; width: 22px; height: 22px; }

a.row:hover .mark { color: var(--accent); }

/* a row that goes nowhere yet reads one step back, but stays legible —
   dimming it with opacity dropped it to ~1.5:1 */
.row[aria-disabled="true"] .what,
.row[aria-disabled="true"] .why { color: var(--faint); }

/* ── contact: the facts, plainly ────────────────────────────── */

.facts {
  margin: clamp(2rem, 6vw, 2.75rem) 0 0;
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.facts dt,
.facts dd {
  margin: 0;
  padding: .9375rem .25rem;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}

.facts dd { color: var(--fg); }

.facts dd a { border-bottom: 1px solid var(--faint); }
.facts dd a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.facts .note {
  display: block;
  margin-top: .375rem;
  color: var(--faint);
  font-size: .8125rem;
}

.fine {
  margin: clamp(2rem, 6vw, 2.75rem) 0 0;
  max-width: 52ch;
  color: var(--faint);
  font-size: .8125rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.fine a {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.fine a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── narrow ─────────────────────────────────────────────────── */

@media (max-width: 40rem) {
  /* the sentence drops under the name; the mark spans both rows so it sits
     centred against the row as a whole rather than clinging to the top line */
  .row       { grid-template-columns: 1fr auto; row-gap: .125rem; }
  .row .what { grid-area: 1 / 1; }
  .row .why  { grid-area: 2 / 1; }
  .row .mark { grid-row: 1 / span 2; grid-column: 2; }

  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
  .facts dd { padding-top: .25rem; }
}

@media (max-width: 34rem) {
  .actions { gap: 1.25rem; }

  /* the footer stacks rather than dropping half of itself: both lines still
     fit, they just no longer fit side by side. column-reverse puts the links
     above the pledge, so navigation stays closest to the content. */
  footer {
    flex-direction: column-reverse;
    gap: .875rem;
    justify-content: center;
    text-align: center;
  }

  footer > :last-child { margin-inline-start: 0; }
}