/* ── Reset & base ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --c-bg: #0f1117;
  --c-surface: #161821;
  --c-surface-raised: #1d2029;
  --c-text: #f4f4f5;
  /* Body copy: one step off pure white so long passages don't glare, but far
     brighter than the old muted grey that every paragraph used to be set in. */
  --c-text-body: #d4d4d8;
  --c-text-muted: #a1a1aa;
  --c-accent: #fdba74;
  --c-accent-hover: #fed7aa;
  --c-border: #27272a;
  --c-border-strong: #3f3f46;
  --nav-h: 3.5rem;
  --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
}

/* The document scrolls, not <body>: a height-locked body with overflow made
   <body> the scroll container, which broke anchor offsets, scroll restoration
   and the mobile address-bar collapse. `clip` guards against a stray wide
   element without creating a scroll container. */
html {
  background: var(--c-bg);
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  overflow-x: clip;
}

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text-body);
  font-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* ── Dot matrix background ───────────────────────────────────── */
/* Lives inside the home hero only, fading out before any body copy. Content
   pages don't render it at all — text sits on a solid background. */
#dot-matrix-bg {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 0%, transparent 30%, #000 75%),
    linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 0%, transparent 30%, #000 75%),
    linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-composite: intersect;
}

/* ── Layout ──────────────────────────────────────────────────── */
main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

/* ── Reading surface ─────────────────────────────────────────── */
/* Formerly a bordered black panel floating over the dot matrix. With the
   matrix gone from content pages the panel only added a frame around a frame,
   so it is now just the reading column. */
.reading-surface {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 auto;
}

/* ── Links ───────────────────────────────────────────────────── */
/* Amber by default everywhere. Without this, any link that doesn't carry
   its own class falls back to the browser's blue, which is invisible on
   this background. Component classes still override it. */
a {
  color: var(--c-accent);
}

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

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

/* ── Site nav ────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.site-nav-inner {
  max-width: 1080px;
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-nav-brand img {
  display: block;
  height: 1.6rem;
  width: auto;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav-links a {
  color: var(--c-text-body);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.site-nav-links a:hover {
  color: var(--c-text);
  background: var(--c-surface-raised);
}

.site-nav-links a[aria-current="page"] {
  color: var(--c-accent);
}

@media (max-width: 480px) {
  .hero {
    padding-top: 3.5rem;
  }

  .status {
    font-size: 0.8rem;
  }
}

@media (max-width: 420px) {
  .site-nav-links a {
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
  }
}

/* ── Site footer ─────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--c-border);
  margin-top: 4rem;
  padding: 3rem 1.25rem 2rem;
}

.site-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem 1.5rem;
}

.site-footer-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 0.9rem;
}

.site-footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer-col a {
  color: var(--c-text-body);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-footer-col a:hover {
  color: var(--c-accent);
}

.site-footer-col a[aria-current="page"] {
  color: var(--c-accent);
}

.site-footer-copy {
  max-width: 1080px;
  margin: 2.5rem auto 0;
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.25rem 5rem;
  gap: 1.5rem;
}

.hero > :not(#dot-matrix-bg) {
  position: relative;
  z-index: 1;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--c-text-body);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  text-align: left;
  line-height: 1.4;
}

.status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}

.brand-logo {
  width: min(280px, 70vw);
  height: auto;
  color: var(--c-accent);
}

.tagline {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-text);
  letter-spacing: -0.01em;
}

.description {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  color: var(--c-text-body);
  max-width: 36rem;
  line-height: 1.65;
}

.small-print {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  max-width: 32rem;
}

/* ── CTA ──────────────────────────────────────────────────────── */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.75rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--c-accent);
  color: var(--c-bg);
}

.btn-primary:hover {
  background: #fcd9a0;
  color: var(--c-bg);
}

.btn-secondary {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}

.btn-secondary:hover {
  background: var(--c-surface-raised);
  color: var(--c-text);
}

/* ── Home sections ───────────────────────────────────────────── */
.download-section,
.terminal-section {
  width: 100%;
  max-width: 880px;
  padding: 0 1.25rem;
}

.download-section {
  padding-top: 1rem;
}

.section-heading,
.download-heading,
.terminal-heading {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--c-text);
  text-align: center;
  margin-bottom: 0.5rem;
}

.section-lede {
  text-align: center;
  color: var(--c-text-muted);
  margin-bottom: 2rem;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.download-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.5rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-text);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

a.download-card:hover {
  border-color: var(--c-accent);
  background: var(--c-surface-raised);
  color: var(--c-text);
}

.download-icon {
  color: var(--c-accent);
  fill: var(--c-accent);
  width: 32px;
  height: 32px;
  margin-bottom: 0.35rem;
}

.download-platform {
  font-weight: 700;
  font-size: 1.05rem;
}

.download-detail {
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.download-detail code {
  font-family: var(--mono);
  font-size: 0.95em;
}

.download-card--linux {
  cursor: default;
}

.linux-formats {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.15rem 0 0.25rem;
}

.linux-format-link {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  text-decoration: none;
  color: var(--c-text-body);
  transition: border-color 0.15s, color 0.15s;
}

.linux-format-link:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.aur-link {
  color: var(--c-accent);
  text-decoration: none;
}

.aur-link:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .download-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Install command block ───────────────────────────────────── */
.install-group {
  margin-top: 2.5rem;
}

.install-group-title {
  font-size: 1rem;
  color: var(--c-text);
  text-align: center;
  margin-bottom: 0.75rem;
}

.install-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 600px;
  margin: 0 auto;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  transition: border-color 0.15s;
}

.install-block:hover {
  border-color: var(--c-border-strong);
}

/* min-width: 0 lets the flex child shrink below its text width, so a long
   command scrolls inside the block instead of widening the page. */
.install-cmd {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--c-text);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  user-select: all;
}

.install-cmd::-webkit-scrollbar {
  display: none;
}

.install-copy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.install-copy:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.install-note,
.terminal-note {
  color: var(--c-text-muted);
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.75rem;
}

.install-note code,
.terminal-desc code,
.terminal-note code {
  font-family: var(--mono);
  color: var(--c-accent);
  background: rgba(253, 186, 116, 0.08);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ── Terminal client ─────────────────────────────────────────── */
.terminal-section {
  margin-top: 5rem;
  text-align: center;
}

.terminal-desc {
  color: var(--c-text-body);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 38rem;
  margin: 0 auto 1.75rem;
}

/* ── Download verification disclosure ───────────────────────── */
.verify-disclosure {
  max-width: 600px;
  margin: 2.5rem auto 0;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
}

.verify-disclosure > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  color: var(--c-text);
  font-weight: 700;
  font-size: 0.95rem;
}

.verify-disclosure > summary::-webkit-details-marker {
  display: none;
}

.verify-disclosure > summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--c-text-muted);
  border-bottom: 2px solid var(--c-text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.verify-disclosure[open] > summary::before {
  transform: rotate(45deg);
}

.verify-disclosure .verify-downloads {
  margin: 0;
  padding: 0 1rem 1rem;
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ── Download verification (#801) ──────────────────────────────────────────
   Deliberately quieter than the download cards: this is for the person who
   wants it, and it must not compete with the primary action or read as a
   warning. Same 1px border / 8px radius / single accent as the rest of the
   page — no new visual language for a subordinate block. */
.verify-downloads {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-border);
}

.verify-heading {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 0.5rem;
}

/* The version these hashes belong to. Empty until resolved, so the heading never
   claims a version the list has not actually been filled from. */
.verify-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--c-accent);
}

.verify-intro,
.verify-foot {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0 0 1rem;
  max-width: 62ch;
}

.verify-foot {
  margin: 1rem 0 0;
}

.verify-intro a,
.verify-foot a,
.verify-note a {
  color: var(--c-accent);
}

.verify-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.verify-row {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}

.verify-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.verify-plat {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}

/* The exact command to run, so nobody has to know their platform's spelling of
   "hash this file". */
.verify-cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--c-text-muted);
  text-align: right;
  overflow-wrap: anywhere;
}

.verify-row-hash {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Full 64 chars, wrapping rather than truncated: a hash you cannot see in full is
   a hash you cannot compare, and truncation is where a near-miss hides. */
.verify-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-text);
  overflow-wrap: anywhere;
  flex: 1;
  user-select: all;
}

.verify-copy {
  flex-shrink: 0;
  font: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.verify-copy:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.verify-note {
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

@media (max-width: 560px) {
  .verify-row-top {
    flex-direction: column;
    gap: 0.25rem;
  }

  .verify-cmd {
    text-align: left;
  }
}

.install-group-os {
  font-weight: 400;
  color: var(--c-text-muted);
  font-size: 0.85rem;
  margin-left: 0.35rem;
}

.terminal-section .install-label {
  display: block;
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
}

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