/* Decitect GitHub Pages site. Dark, amber-accented, matching the app theme. */
:root {
  --bg: #0d0f12;
  --surface: #1a1e24;
  --raised: #222831;
  --border: #2c333d;
  --text: #e6e9ee;
  --muted: #9aa3af;
  --accent: #f59e0b;
  --accent-bright: #fbbf24;
  --maxw: 1120px;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
    "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }
h1, h2, h3, h4 { line-height: 1.2; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

header.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(13, 15, 18, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* The header wraps rather than overflowing. A fixed height with a no-wrap
   link row pushed the page 2px wider than a narrow viewport, so every page
   scrolled sideways; a minimum height with wrapping keeps the usual single
   64px row while letting a cramped viewport take a second one. */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  min-height: 64px;
  padding: 8px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--text);
}
.brand img { width: 30px; height: 30px; }
.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}
.nav-links a { color: var(--muted); font-weight: 600; font-size: 15px; }
.nav-links a:hover { color: var(--accent-bright); }

.hero {
  position: relative;
  text-align: center;
  padding: 104px 0 80px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    58% 50% at 50% 0,
    rgba(245, 158, 11, 0.18),
    transparent 70%
  );
  pointer-events: none;
}
.hero .logo {
  width: 112px;
  height: 112px;
  margin-bottom: 22px;
  filter: drop-shadow(0 10px 34px rgba(245, 158, 11, 0.28));
}
.hero h1 {
  font-size: clamp(42px, 7vw, 70px);
  margin: 0;
  letter-spacing: -0.02em;
}
.tagline {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 13px;
  margin-top: 10px;
}
.lede {
  max-width: 640px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 19px;
}
.cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 700;
  border: 2px solid transparent;
  transition: 0.15s ease;
}
.btn-primary { background: var(--accent); color: #0d0f12; }
.btn-primary:hover { background: var(--accent-bright); color: #0d0f12; }
.btn-ghost { border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-bright); }
/* The donate button carries artwork before its label. The mark is sized in em
   against the button's own type; at one line box the artwork could not be read,
   so it takes 2.7em and the button is deliberately taller than a text-only one. */
.btn-donate { display: inline-flex; align-items: center; gap: 10px; }
.btn-donate img { display: block; height: 2.7em; width: auto; }
.badges {
  margin-top: 24px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.badges span { margin: 0 10px; }
.release-note { margin-top: 16px; color: var(--muted); font-size: 14px; }

section { padding: 78px 0; }
section.alt {
  background: linear-gradient(180deg, rgba(26, 30, 36, 0.5), transparent);
}
.eyebrow {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(28px, 4vw, 36px);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.section-sub {
  color: var(--muted);
  margin: 0 0 42px;
  max-width: none;
  font-size: 17px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
.feature .fnum {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.feature h3 { margin: 12px 0 8px; font-size: 18px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }
/* A card holding several paragraphs shows the break between them. */
.feature p + p { margin-top: 12px; }
/* The button that leads from a hub's gateway card to its own page sits at the
   card's foot, so the buttons line up whatever the length above them. */
.gateways .feature { display: flex; flex-direction: column; }
.gateways .feat-cta { margin-top: auto; padding-top: 20px; }

/* Where a detail page sits: its hub, then itself. The section after it gives
   up most of its top padding, since the trail already opens the page. */
.crumb {
  padding-top: 40px;
  font-size: 14px;
  color: var(--muted);
}
.crumb + section { padding-top: 32px; }

/* The way on from the foot of a detail page: back to its hub, then its
   siblings. */
.onward { padding-top: 0; }
.onward-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 0;
}

.shots { display: grid; gap: 44px; }
.shot figure { margin: 0; }
.frame {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
}
.frame .bar {
  display: flex;
  gap: 7px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.frame .bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--border);
}
.frame img { display: block; width: 100%; height: auto; }
.shot figcaption {
  color: var(--muted);
  margin-top: 16px;
  font-size: 15px;
  max-width: 760px;
}
.shot figcaption b { color: var(--text); }

/* Long-form prose (the Why this exists section). */
.prose p {
  color: var(--muted);
  font-size: 16.5px;
  max-width: 820px;
  margin: 0 0 18px;
}
.prose p:last-child { margin-bottom: 0; }

.books-intro {
  color: var(--muted);
  max-width: none;
  font-size: 17px;
  margin-bottom: 38px;
}
.featured {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
  align-items: center;
  background: linear-gradient(180deg, var(--surface), rgba(34, 40, 49, 0.35));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  margin-bottom: 34px;
}
.featured img {
  width: 188px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.featured .kicker {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
}
.featured .meta h3 { margin: 8px 0; font-size: 26px; }
.featured .meta p { color: var(--muted); margin: 0 0 18px; font-size: 16px; }

.series {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 20px;
}
.book {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.book img {
  width: 132px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  margin-bottom: 18px;
}
.book h4 { margin: 0 0 8px; font-size: 16px; }
.book p { color: var(--muted); font-size: 14px; margin: 0 0 16px; flex: 1; }
.book .buy { font-weight: 700; font-size: 14px; }

.dl-version {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--accent-bright);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
}
.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.dl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dl-card .ico { font-size: 30px; }
.dl-card h3 { margin: 4px 0 0; font-size: 18px; }
.dl-card .req { color: var(--muted); font-size: 13px; margin: 0; }
.dl-card .btn { margin: 14px auto 4px; }
.dl-card .meta {
  color: var(--muted);
  font-size: 12.5px;
  min-height: 1.2em;
  margin: 0;
}
.dl-card .how { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.dl-card code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--text);
}
.dl-links {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 18px 0 0;
}

footer {
  border-top: 1px solid var(--border);
  padding: 50px 0;
  color: var(--muted);
  font-size: 14px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-inner strong { color: var(--text); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* Long-form lists in prose (the model page's assumptions and limits). */
.prose ol,
.prose ul {
  color: var(--muted);
  font-size: 16.5px;
  max-width: 820px;
  margin: 0 0 18px;
  padding-left: 24px;
}
.prose li { margin-bottom: 12px; }
.prose li b { color: var(--text); }

/* Group headings inside the vocabulary section (the tool page). */
.vocab-heading {
  color: var(--accent-bright);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 30px 0 14px;
}
.prose code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 14px;
  color: var(--text);
}

/* The provenance and sensitivity tables (the model page). */
.table-scroll { overflow-x: auto; margin: 0 0 18px; }
.weights {
  width: 100%;
  max-width: 1020px;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.weights th {
  text-align: left;
  color: var(--accent);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.weights td {
  color: var(--muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.weights tr:last-child td { border-bottom: 0; }
.weights td i { color: var(--text); font-style: italic; }

/* Unshippable placeholder: loud on purpose, so a TODO never slips out quietly.
   The doubled selector outranks the .prose p width cap so it aligns with the
   tables rather than the narrower prose column. */
.todo,
.prose .todo {
  border: 2px dashed var(--accent);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  color: var(--accent-bright);
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 14px;
  padding: 12px 16px;
  max-width: 1020px;
}

/* Clickable cards, site policy. A card that leads somewhere is clickable
   across its whole surface and highlights on hover, so the affordance is the
   pane itself rather than a small hyperlink buried inside it. The card keeps
   exactly one real anchor and that anchor's ::after covers the card, so the
   markup stays valid (no nested links) and assistive technology still
   announces the link's own text. Cards whose affordance is already an obvious
   button (the download cards) are deliberately left alone, since an overlay
   there would also block selecting the install command. */
.card-link {
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease,
    transform 0.15s ease;
}
.card-link:hover,
.card-link:focus-within {
  border-color: var(--accent);
  background: var(--raised);
  transform: translateY(-2px);
}
.card-link:hover h3,
.card-link:hover h4,
.card-link:focus-within h3,
.card-link:focus-within h4 { color: var(--accent-bright); }
.card-link .stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

/* A standing panel pointing at another page. Used where a prose page would
   otherwise repeat the same inline link several times: the destination is
   named once, as a surface rather than as scattered hyperlinks. Aligned to
   the prose column width so it sits under the paragraphs it follows. */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  max-width: 820px;
  margin: 4px 0 0;
}
.panel .kicker {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.panel h3 { margin: 10px 0 8px; font-size: 21px; }
.panel p { margin: 0; color: var(--muted); font-size: 15px; max-width: none; }
.panel .go {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 14px;
}

/* Keyboard focus stays visible site-wide. */
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .card-link { transition: none; }
  .card-link:hover,
  .card-link:focus-within { transform: none; }
}

@media (max-width: 640px) {
  .featured {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .nav-links { gap: 16px; }
  .nav-links a:nth-child(1),
  .nav-links a:nth-child(2) { display: none; }
}