/* fonts --------------------------------------------------------------- */

/* Archivo, self-hosted. One variable file per subset covers 400-800, so the
   whole weight range costs two requests. Glyphs outside these ranges (the
   ⌘⌥⌃⇧⇥ modifiers in <kbd>) fall through to the system font, as they did on
   Google Fonts. */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* tokens ------------------------------------------------------------- */

:root {
  --color-bg: #f3f2f2;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-neutral-700: #605d5d;

  --ink-soft: #5c5857;
  --ink-softer: #665f5e;
  --accent-ink: #ae1800;

  --glass-fill: rgba(255, 255, 255, 0.52);
  --glass-fill-strong: rgba(255, 255, 255, 0.68);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 18px 44px rgba(32, 30, 29, 0.13), 0 2px 6px rgba(32, 30, 29, 0.07);
  --glass-shadow-soft: 0 10px 28px rgba(32, 30, 29, 0.08);
  --code-bg: rgba(32, 30, 29, 0.055);

  --font-heading: Archivo, system-ui, sans-serif;
  --font-body: Archivo, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 1080px;
  --ease: cubic-bezier(.16, .86, .24, 1);
}

:root[data-theme="dark"] {
  --color-bg: #17161a;
  --color-text: #f4f2f1;

  --ink-soft: #c7c2c1;
  --ink-softer: #a8a2a0;
  --accent-ink: #ff9783;

  --glass-fill: rgba(255, 255, 255, 0.07);
  --glass-fill-strong: rgba(255, 255, 255, 0.11);
  --glass-edge: rgba(255, 255, 255, 0.20);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --glass-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.4);
  --code-bg: rgba(0, 0, 0, 0.32);
}

/* no-JS fallback: honour the system preference until theme.js sets the
   attribute explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #17161a;
    --color-text: #f4f2f1;
    --ink-soft: #c7c2c1;
    --ink-softer: #a8a2a0;
    --accent-ink: #ff9783;
    --glass-fill: rgba(255, 255, 255, 0.07);
    --glass-fill-strong: rgba(255, 255, 255, 0.11);
    --glass-edge: rgba(255, 255, 255, 0.20);
    --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    --glass-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.4);
    --code-bg: rgba(0, 0, 0, 0.32);
  }
}

/* base --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 400ms ease, color 300ms ease;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-ink); }

:focus { outline: none; }

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

::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; }

p { margin: 0; text-wrap: pretty; }

strong { font-weight: 600; color: var(--color-text); }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 6px;
}

pre {
  margin: 0;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text);
}

pre code { background: none; padding: 0; }

kbd {
  display: inline-block;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 1px 2px rgba(32, 30, 29, .10);
  white-space: nowrap;
}

/* background ---------------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  animation: drift 26s ease-in-out infinite;
  will-change: transform;
}

.blob--a {
  top: -20vh;
  left: -10vw;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--color-accent) 40%, transparent), transparent 62%);
  filter: blur(40px);
}

.blob--b {
  bottom: -28vh;
  right: -14vw;
  width: 58vw;
  height: 58vw;
  background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--color-accent-500) 28%, transparent), transparent 60%);
  filter: blur(48px);
  animation-duration: 34s;
  animation-direction: reverse;
}

.blob--c {
  top: 30vh;
  right: 22vw;
  width: 30vw;
  height: 30vw;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-neutral-700) 26%, transparent), transparent 65%);
  filter: blur(36px);
  animation-duration: 40s;
}

/* shell --------------------------------------------------------------- */

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 14px 0;
}

.site-head__bar {
  width: calc(100% - 32px);
  max-width: var(--measure);
  margin: 0 auto;
  border-radius: 24px;
  padding: 10px 12px 10px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}

.site-head__left { display: flex; align-items: baseline; gap: 14px; }

.site-head__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.01em;
}

.site-head__up { font-size: 13.5px; color: var(--ink-softer); }

.site-nav { display: flex; gap: 8px; align-items: center; }

.main {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* glass and controls --------------------------------------------------- */

.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);
  transition: background 320ms ease, transform 420ms var(--ease),
              box-shadow 360ms ease, border-color 320ms ease;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--glass-edge);
  background: var(--glass-fill);
  color: var(--ink-soft);
}

.chip--accent {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  color: var(--accent-ink);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 16px;
  cursor: pointer;
  color: inherit;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  transition: background 280ms ease, transform 340ms var(--ease),
              color 260ms ease, border-color 260ms ease;
}

.iconbtn:hover {
  background: var(--glass-fill-strong);
  color: var(--accent-ink);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--glass-edge));
}

.iconbtn:active { transform: translateY(0) scale(.96); }

.iconbtn svg { width: 19px; height: 19px; }

.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 18px;
  background: var(--color-accent);
  color: #fff;
  border: 1px solid color-mix(in srgb, #000 12%, var(--color-accent));
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--color-accent) 34%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform 340ms var(--ease), box-shadow 300ms ease, background 260ms ease;
}

.cta:hover {
  color: #fff;
  background: var(--color-accent-600);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--color-accent) 42%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .4);
}

.cta:active { transform: translateY(0) scale(.985); }

/* index ---------------------------------------------------------------- */

.hero {
  padding: 84px 8px 64px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 32px 56px;
  align-items: end;
}

.hero__title {
  margin: 0;
  font-size: clamp(40px, 6.6vw, 78px);
  line-height: 1;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.hero__lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
}

.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 0 12px 16px;
}

.list-head h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

.rows { display: flex; flex-direction: column; gap: 14px; }

.row {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 42px;
  gap: 28px;
  align-items: center;
}

.row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 180% at 8% 0%, rgba(255, 255, 255, .55), transparent 55%);
  transition: opacity 400ms ease;
}

.row__head { display: flex; flex-direction: column; gap: 12px; }

.row__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.row__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.row__arrow {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--glass-edge);
  background: var(--glass-fill);
  opacity: .7;
}

.row__name, .row__arrow {
  transition: color 300ms ease, transform 420ms var(--ease), opacity 300ms ease,
              background 300ms ease, border-color 300ms ease;
}

a.row:hover {
  background: var(--glass-fill-strong);
  transform: translateY(-4px) scale(1.006);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--glass-edge));
}

a.row:hover::after { opacity: 1; }
a.row:hover .row__name { color: var(--accent-ink); }

a.row:hover .row__arrow {
  transform: translateX(8px);
  opacity: 1;
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
}

a.row:active { transform: translateY(-1px) scale(.998); }

.row--soon {
  background: color-mix(in srgb, var(--glass-fill) 55%, transparent);
  box-shadow: var(--glass-shadow-soft), inset 0 1px 0 var(--glass-edge);
}

.row--soon .row__name { color: var(--ink-soft); }

.row__soon {
  justify-self: end;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

/* project page ---------------------------------------------------------- */

.main--project { display: flex; flex-direction: column; gap: 20px; }

.phero {
  padding: 76px 8px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px 56px;
  align-items: end;
}

.phero__title {
  margin: 0 0 22px;
  font-size: clamp(52px, 9vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.phero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.phero__meta { font-size: 13px; color: var(--ink-softer); }

.sec {
  border-radius: 28px;
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 32px 48px;
}

.sec--stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sec__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 32px 48px;
}

.sec__body { display: flex; flex-direction: column; gap: 22px; }

.kicker {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

h2.title {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2.title--small { font-size: clamp(22px, 2.4vw, 28px); }

h3.sub {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }

.lead--dense { font-size: 15px; }
.lead--dense + .lead--dense { margin-top: 14px; }

.note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-softer);
  font-style: italic;
}

.link {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px 40px;
}

.cols--ruled { padding-top: 28px; border-top: 1px solid var(--glass-edge); }

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}

/* two-column reference table (key bindings, CLI commands, option values) */

.reftable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.reftable th, .reftable td {
  padding: 13px 4px;
  border-top: 1px solid var(--glass-edge);
  vertical-align: middle;
}

.reftable thead th {
  padding-top: 0;
  border-top: none;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

.reftable tbody td:first-child { width: 190px; white-space: nowrap; }

.reftable tbody td:last-child { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

.reftable .plus { color: var(--ink-softer); padding: 0 2px; }

/* config block */

.code-panel {
  border-radius: 18px;
  padding: 22px 24px;
  background: var(--code-bg);
  border: 1px solid var(--glass-edge);
}

/* requirements */

.reqs {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: req;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reqs li {
  counter-increment: req;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--glass-edge);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.reqs li::before {
  content: counter(req);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 600;
}

/* diagrams */

.figure {
  --zone: color-mix(in srgb, var(--color-text) 8%, transparent);
  --zone-line: color-mix(in srgb, var(--color-text) 30%, transparent);
  margin: 0;
  border-radius: 18px;
  padding: 18px;
  background: color-mix(in srgb, var(--glass-fill) 60%, transparent);
  border: 1px solid var(--glass-edge);
}

.figure svg { display: block; width: 100%; height: auto; }

/* motion ---------------------------------------------------------------- */

@keyframes floatIn {
  from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes drift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(4%, -3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.in { animation: floatIn 900ms var(--ease) both; }

.in--1 { animation-delay: 140ms; }
.in--2 { animation-delay: 220ms; }
.in--3 { animation-delay: 300ms; }
.in--4 { animation-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
  .in { animation: none; }
  .blob { animation: none !important; }
}

/* responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
  .hero,
  .phero,
  .sec,
  .sec__split,
  .pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero { padding: 56px 8px 48px; }
  .phero { padding: 56px 8px 36px; }
  .sec { padding: 30px 24px; }

  .row {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 18px 20px;
  }

  .row__desc { grid-column: 1 / -1; }
  .row__arrow, .row__soon { grid-row: 1; grid-column: 2; align-self: start; }

  .reftable tbody td:first-child { width: auto; }
}

@media (max-width: 560px) {
  .reftable, .reftable tbody, .reftable tr, .reftable td { display: block; }
  .reftable thead { display: none; }
  .reftable tbody tr { border-top: 1px solid var(--glass-edge); padding: 13px 0; }
  .reftable tbody td { border-top: none; padding: 0 0 4px; }
}