/*
 * SPDX-FileCopyrightText: 2026 Adrian PK
 * SPDX-License-Identifier: GPL-3.0-only
 *
 * This file is part of rev. See COPYING for license terms.
 */

/* Colors are rev's own Tokyo Night defaults. */
:root {
  --bg: #1a1b26;
  --bg-deep: #16161e;
  --surface: #1f2335;
  --line: #292e42;
  --text: #c0caf5;
  --body: #a9b1d6;
  --muted: #7f88b0;
  --comment: #565f89;
  --blue: #7aa2f7;
  --cyan: #2ac3de;
  --green: #9ece6a;
  --orange: #ff9e64;
  --keyword: #9d7cd8;
  --red: #f7768e;

  /* From the logo, lifted for text on the dark ground. */
  --brand: #7a46fc;
  --brand-text: #a98bff;
  --signal: #fd7801;
  --signal-text: #ff9a45;

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 720px;
  --gutter: 20px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--brand-text);
  text-decoration: underline;
  text-decoration-color: rgb(169 139 255 / 0.35);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0 0 1em;
}

code,
kbd {
  font-family: var(--mono);
  font-size: 0.86em;
}

code {
  color: var(--text);
}

kbd {
  color: var(--signal-text);
  white-space: nowrap;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--gutter);
  top: 8px;
  z-index: 20;
  background: var(--surface);
  padding: 4px 10px;
}

/* Top bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 14px;
}

.bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 44px;
}

.name {
  display: block;
}

.name img {
  height: 18px;
  width: auto;
  transition: opacity 180ms ease, transform 180ms ease;
}

.logo-handoff.hero-logo-visible .name img {
  opacity: 0;
  transform: translateY(6px);
}

.logo-handoff.hero-logo-visible .name {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .name img {
    transition: none;
  }
}

.bar nav {
  display: flex;
  gap: 18px;
  overflow-x: auto;
}

.bar nav a {
  color: var(--muted);
  text-decoration: none;
}

.bar nav a:hover {
  color: var(--text);
}

/* Intro */

.intro {
  padding-top: 88px;
  padding-bottom: 40px;
}

.intro__logo {
  width: clamp(180px, 40vw, 300px);
  margin-bottom: 48px;
}

.intro h1 {
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.02em;
  max-width: 19ch;
  margin-bottom: 24px;
}

.lede {
  font-size: 19px;
  color: var(--body);
  max-width: 60ch;
}

.run {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text);
}

.release {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 13px;
}

.release a {
  color: var(--muted);
}

.release a:hover {
  color: var(--text);
}

.run__prompt {
  color: var(--signal);
  margin-right: 0.6ch;
  user-select: none;
}

.fn-ref {
  color: var(--signal-text);
  text-decoration: none;
  margin-left: 1px;
}

.footprint {
  margin-top: 88px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.footprint::before {
  content: "";
  display: block;
  margin-bottom: 20px;
  border-top: 1px solid var(--line);
}

.footprint table {
  border-collapse: collapse;
}

.footprint th,
.footprint td {
  padding: 4px 24px 4px 0;
  text-align: left;
  font-weight: 400;
}

.footprint thead th {
  color: var(--comment);
  border-bottom: 1px solid var(--line);
}

.footprint thead th:first-child {
  color: var(--signal-text);
}

.footprint td {
  color: var(--text);
}

.footprint p {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--comment);
}

/* Screenshot: the one place the page goes wide. */

.shot {
  margin: 24px auto 0;
  max-width: 1240px;
  padding: 0 var(--gutter);
}

.shot img {
  border: 1px solid var(--line);
  border-radius: 6px;
}

.shot figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

.shot + .shot {
  margin-top: 56px;
}

/* Sections */

.block {
  padding-top: 88px;
}

.block h2 {
  font-size: 26px;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.block h3 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-transform: lowercase;
  margin-bottom: 10px;
}

.aside {
  margin-top: 28px;
  font-size: 15px;
  color: var(--muted);
}

.aside + .aside {
  margin-top: 0;
}

/* Key ledger */

.ledger {
  margin: 32px 0 0;
  border-top: 1px solid var(--line);
}

.ledger > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 4px 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.ledger dt {
  color: var(--text);
  font-weight: 500;
}

.ledger dd {
  margin: 0;
  font-size: 15px;
}

.ledger .k {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.ledger kbd {
  font-size: 13px;
}

/* Code */

.code {
  margin: 24px 0 0;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.code figcaption {
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.code pre {
  margin: 0;
  padding: 16px 14px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.code code {
  font-size: inherit;
}

.code .h { color: var(--blue); }
.code .c { color: var(--comment); }
.code .s { color: var(--green); }
.code .n { color: var(--orange); }
.code .p { color: var(--comment); user-select: none; }

/* Footer, drawn like rev's status line */

.modeline {
  margin-top: 112px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.modeline__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 1ch;
  padding-top: 10px;
  padding-bottom: 10px;
}

.modeline__buf {
  color: var(--brand-text);
}

.modeline__end {
  margin-left: auto;
  color: var(--muted);
  text-decoration: none;
}

.modeline__end:hover {
  color: var(--text);
}

/* Consent prompt, shaped like rev's minibuffer */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.cookie-banner p {
  margin: 0;
  flex: 1 1 280px;
}

.cookie-banner__actions {
  display: flex;
  gap: 8px;
}

.cookie-banner button {
  font: inherit;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
}

.cookie-banner button:hover {
  color: var(--text);
  border-color: var(--muted);
}

#cookie-accept {
  color: var(--bg-deep);
  background: var(--brand-text);
  border-color: var(--brand-text);
}

#cookie-accept:hover {
  background: var(--text);
  border-color: var(--text);
}

@media (max-width: 640px) {
  .intro {
    padding-top: 56px;
  }

  .bar nav {
    gap: 14px;
  }

  .ledger > div {
    grid-template-columns: 1fr;
  }

  .ledger .k {
    justify-content: flex-start;
  }
}