/* The Rasix page in the plugins' look: near-black flat surfaces by level (ground, fields with a
   numbered band, key caps, black displays), one colour per plugin group for what is lit, salmon
   for the brand, Space Grotesk for names, JetBrains Mono small caps for labels, corners of 4 px.
   The colours are variables from tokens.css (generated from kit/ui/tokens.h); a card sets
   --accent* to its group's colours. Mobile first: one column, more from 720 px on. */

@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap;
  src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap;
  src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap;
  src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap;
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap;
  src: url("fonts/JetBrainsMono-Medium.ttf") format("truetype"); }

:root {
  --radius: 4px;
  --radius-inner: 3px;
  --pad: 16px;
  --gap: 16px;
  --sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, ui-monospace, monospace;
  --accent: var(--salmon);
  --accent-text: var(--salmon);
  --accent-soft: var(--field);
}

* { box-sizing: border-box; }

html { background: var(--ground); color-scheme: dark; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 1200px; margin: 0 auto; padding: 24px 16px 40px; }

a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

code {
  font: 400 0.85em var(--mono);
  background: var(--display);
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

/* Small caps in mono: every label, caption and value, as in the plugins. */
.caption {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.keyword { font-family: var(--mono); font-size: 0.9em; color: var(--text); }

/* --- Hero ------------------------------------------------------------------------------------ */

.hero { display: grid; gap: 20px; padding: 8px 0 28px; }
.hero-logo { width: min(100%, 420px); height: auto; display: block; margin-left: -12px; }
.hero-line { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 500; max-width: 34em; }
.hero-line .by { color: var(--salmon); }
.hero-sub { margin: 0; color: var(--text-muted); max-width: 42em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- Keys: buttons and links as the plugins' device keys, an LED on the left ------------------ */

.key {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 16px 8px 12px;
  background: var(--key);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 500 13px/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.key:hover { background: var(--key-hover); }
.key .led {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.key.main { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.key.main:hover { background: var(--accent-hover); }
.key.main .led { background: var(--on-accent); box-shadow: none; }
.key.off { color: var(--text-muted); cursor: default; }
.key.off .led { background: var(--line-strong); box-shadow: none; }
.key small { font-size: 11px; color: inherit; opacity: 0.75; letter-spacing: 0.02em; }

/* --- Fields: a surface with a numbered band, the plugins' function field ---------------------- */

.field {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 var(--pad) var(--pad);
}
.band {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin: 0 calc(-1 * var(--pad)) var(--pad);
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
}
.band-number {
  font: 500 11px/1 var(--mono);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 2px;
  padding: 3px 5px;
  min-width: 22px;
  text-align: center;
}
.band .caption { color: var(--accent-text); }
.band .right { margin-left: auto; color: var(--text-muted); }

/* --- Displays: black, inset, where the plugin's Stage plays ----------------------------------- */

.display {
  position: relative;
  background: var(--display);
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.display video, .display img.still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.display .empty {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 16px;
}

/* --- The card grid ------------------------------------------------------------------------------ */

.section-title { display: flex; align-items: baseline; gap: 12px; margin: 12px 0 16px; }
.section-title h2 { margin: 0; font-size: 20px; font-weight: 500; }

.cards { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card { display: flex; flex-direction: column; gap: 14px; }
.card .display { margin: 0; }
.card-head { display: flex; align-items: center; gap: 12px; }
.glyph { width: 48px; height: 48px; flex: none; display: block; }
.card-name { margin: 0; font-size: 24px; line-height: 1.1; font-weight: 500; }
.card-name a { text-decoration: none; }
.card-name a:hover { color: var(--accent-text); }
.card-head .caption { display: block; margin-top: 4px; }
.card-text { margin: 0; color: var(--text); }
.card-note {
  margin: 0;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: var(--radius-inner);
  padding: 6px 10px;
}
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.card.soon .display { display: grid; place-items: center; }
.card.soon .display img { width: 38%; height: auto; }

/* --- A plugin's own page -------------------------------------------------------------------------- */

.back { display: inline-flex; gap: 8px; margin-bottom: 20px; text-decoration: none; }
.plugin-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.plugin-head .glyph { width: 72px; height: 72px; }
.plugin-head h1 { margin: 0; font-size: 40px; line-height: 1; font-weight: 500; }
.plugin-head .caption { display: block; margin-top: 8px; }
.stage { margin-bottom: var(--gap); }
.stage .display { aspect-ratio: auto; min-height: 200px; }
.stage .display video { position: static; height: auto; }

.columns { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-items: start; }
/* On a phone the download comes right after "What it does"; wider, it sits in its own column. */
@media (min-width: 900px) {
  .columns { grid-template-columns: 2fr 1fr; }
  .columns > * { grid-column: 1; }
  .columns > .side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 16px; }
}

.lead { margin: 0; font-size: 19px; line-height: 1.45; }
section.field .card-note { margin: 14px 0; }
.lead + .features { margin-top: 14px; }
.features { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.features li { position: relative; padding-left: 20px; }
.features li::before {
  content: ""; position: absolute; left: 2px; top: 0.6em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 5px var(--accent);
}
.prose p { margin: 0 0 10px; }
.prose ol, .prose ul { margin: 0 0 10px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose > :last-child { margin-bottom: 0; }

.download-box { display: grid; gap: 12px; }
.download-box p { margin: 0; color: var(--text-muted); font-size: 14px; }

.release + .release { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.release h3 { margin: 0 0 8px; font: 500 14px/1.2 var(--mono); color: var(--accent-text); }
.release h3 .date { color: var(--text-muted); font-weight: 400; margin-left: 8px; }
.release h4 { margin: 10px 0 6px; }
.release ul { margin: 0; padding-left: 20px; }
.release li { margin-bottom: 6px; font-size: 15px; }

/* --- Footer ----------------------------------------------------------------------------------- */

.footer { margin-top: 32px; display: grid; gap: 16px; }
.footer-field { --accent: var(--salmon); --accent-text: var(--salmon); }
.footer-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.footer-grid p { margin: 0; color: var(--text-muted); font-size: 14px; }
.footer-grid strong { color: var(--text); font-weight: 500; }
.credit { margin: 0; color: var(--text-muted); font-size: 14px; display: flex; gap: 10px; align-items: baseline; }
.credit .caption { color: var(--salmon); }