/* TuxBooks site — dark bookshelf theme */

:root {
  --bg: #161009;
  --bg-soft: #1d1610;
  --surface: #221a12;
  --surface-2: #2a2117;
  --border: rgba(255, 240, 214, 0.09);
  --text: #ece3d4;
  --muted: #a99c88;
  --accent: #e8a04c;
  --accent-strong: #f4b968;
  --accent-ink: #241708;
  --ok: #7fb069;
  --radius: 12px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
}

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

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap--narrow {
  max-width: 780px;
}

/* Wider container for the screenshot gallery so each shot stays large */
.wrap--wide {
  max-width: 1360px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
}

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

code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1em 0.4em;
  font-size: 0.85em;
}

/* Nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(22, 16, 9, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img,
.footer img {
  /* Matches the artwork's own rounded frame (~13% of its width); a larger
     radius clips into the frame's corners. */
  border-radius: 3px;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  color: var(--muted);
  font-size: 0.95rem;
}
.nav-links a:hover {
  color: var(--text);
  text-decoration: none;
}
.nav-links a.btn {
  /* GitHub's Invertocat may only appear in white, black, grey, or green, and it
     needs high contrast, so the GitHub button stays white on the dark surface
     instead of using the accent colour. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.btn-icon {
  display: block;
  flex: none;
}

/* Buttons */

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover {
  background: var(--accent-strong);
}

.btn--small {
  padding: 7px 16px;
  font-size: 0.85rem;
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 96px 0 0;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(232, 160, 76, 0.09), transparent 70%), var(--bg);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 0;
}

.hero-logo {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 28px;
  /* Pixel radius (not %): the logo box is non-square and the artwork ships
     with its own ~13%-of-width frame rounding that must not be clipped. */
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(2.4rem, 6vw, 4rem);
  letter-spacing: -0.01em;
}

.lede {
  max-width: 620px;
  margin: 0 auto 24px;
  color: var(--muted);
  font-size: 1.15rem;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.hero-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Stability callout: pre-1.0 releases carry no data-compatibility promise */

.notice {
  max-width: 620px;
  margin: 0 auto 28px;
  padding: 12px 18px;
  border: 1px solid rgba(232, 160, 76, 0.35);
  border-radius: 10px;
  background: rgba(232, 160, 76, 0.08);
  color: var(--muted);
  font-size: 0.9rem;
}

.notice strong {
  color: var(--accent-strong);
}

/* Decorative book spines */

.spines {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  height: 110px;
  margin-top: 56px;
}

.spines i {
  width: 26px;
  border-radius: 6px 6px 0 0;
  opacity: 0.5;
  background: linear-gradient(180deg, #3a2d1c, #2a1f12);
  border: 1px solid rgba(255, 240, 214, 0.06);
  border-bottom: none;
}

.spines i:nth-child(3n) {
  height: 88px;
  background: linear-gradient(180deg, #4a3113, #2a1f12);
}
.spines i:nth-child(3n + 1) {
  height: 64px;
}
.spines i:nth-child(4n) {
  height: 100px;
  width: 20px;
}
.spines i:nth-child(5n) {
  height: 74px;
  width: 32px;
}
.spines i:nth-child(7n) {
  height: 94px;
  background: linear-gradient(180deg, #6b4a1c, #2a1f12);
}

/* Sections */

.section {
  padding: 88px 0;
}

.section--alt {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section h2 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  text-align: center;
}

.section-lede {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
  color: var(--muted);
}

/* Feature cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

.card:hover {
  border-color: rgba(232, 160, 76, 0.35);
  transform: translateY(-2px);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(232, 160, 76, 0.12);
  color: var(--accent);
  margin-bottom: 16px;
}

.card-icon svg {
  width: 22px;
  height: 22px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Screenshots */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 24px;
}

/* Two-up grid: center a lone trailing screenshot in its own row */
@media (min-width: 1032px) {
  .shots .shot:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
}

.shot {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot-ph {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 220px;
  color: var(--muted);
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 240, 214, 0.02) 12px 24px),
    var(--surface);
}

.shot--missing .shot-ph {
  display: flex;
}
.shot-ph strong {
  color: var(--accent);
  font-family: ui-monospace, monospace;
  font-weight: 500;
}

figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

/* Roadmap timeline */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--border) 22%, var(--border) 100%);
}

.mile {
  position: relative;
  padding: 0 0 36px 40px;
}

.mile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--muted);
}

.milestone--done::before {
  border-color: var(--ok);
  background: var(--ok);
}
.milestone--now::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 12px rgba(232, 160, 76, 0.6);
}
.milestone--next::before {
  border-color: var(--accent);
  background: var(--bg);
}

.mile-status {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.milestone--done .mile-status {
  color: var(--ok);
  border-color: rgba(127, 176, 105, 0.4);
}
.milestone--now .mile-status {
  color: var(--accent-strong);
  border-color: rgba(232, 160, 76, 0.45);
}
.milestone--next .mile-status {
  color: var(--accent-strong);
  border-color: rgba(232, 160, 76, 0.45);
  border-style: dashed;
}

.mile h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}
.mile p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Roadmap focus areas (current phase) */

.focus-grid {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.focus-grid li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.9rem;
  color: var(--muted);
}

.focus-grid strong {
  color: var(--text);
  font-size: 0.95rem;
}

/* Roadmap possibilities (future phase) */

.chips {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips li {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
}

.principles {
  margin: 8px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Footer */

.footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  background: var(--bg-soft);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-inner p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-links {
  gap: 20px;
}
.footer-github {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Small screens */

@media (max-width: 640px) {
  .nav-links a:not(.btn) {
    display: none;
  }
  .hero {
    padding-top: 64px;
  }
  .section {
    padding: 64px 0;
  }
  .footer-inner {
    flex-direction: column;
  }
}