:root {
  --bg: #08090B;
  --page: #0B0C0E;
  --surface: #0E1013;
  --raised: #101216;
  --gold-bg: #100F0A;

  --line: #23272E;
  --line-soft: #1C2026;
  --line-mid: #2A2E35;
  --line-strong: #3A3F47;

  --text: #E8E6E1;
  --text-2: #C8CBD0;
  --text-3: #A8ACB2;
  --text-4: #9CA0A6;
  --dim: #83878D;
  --muted: #6E7379;

  --gold: #C9A227;
  --gold-lit: #E3C769;
  --gold-hover: #F0DA9A;
  --blue: #4A7FB5;
  --blue-lit: #7FA8D4;
  --red: #9E2B2B;
  --red-lit: #C87070;

  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --serif: Cinzel, Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --pad: 56px;
  --gap: 20px;
}

* { box-sizing: border-box; }

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

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
h1 { font-size: clamp(34px, 4.3vw, 60px); line-height: 1.05; }
h2 { font-size: 34px; }
h3 { font-size: 22px; }
p { margin: 0; }

a { color: var(--gold-lit); text-decoration: none; }
a:hover { color: var(--gold-hover); text-decoration: underline; }

.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }
main > section { padding-block: 64px; }
main > section + section { border-top: 1px solid var(--line); }

.mono { font-family: var(--mono); font-size: .875em; color: var(--text-2); }
.gold { color: var(--gold-lit); }
.dim { color: var(--dim); font-weight: 300; }
.muted { color: var(--muted); }
.lede { max-width: 56ch; font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--text-3); }
.meta { font: 400 12px var(--mono); color: var(--muted); }
.kicker { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--muted); }

/* header */

.header { padding-block: 20px; border-bottom: 1px solid var(--line); }
.wordmark { margin: 0; font: 700 21px var(--serif); color: var(--text); letter-spacing: .1em; }
.wordmark:hover { text-decoration: none; }

/* buttons */

.btn {
  display: inline-block;
  padding: 14px 24px;
  font: 600 15px var(--sans);
  text-align: center;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn-block { display: block; padding: 14px; }
.btn-gold { background: var(--gold); color: var(--page); border-color: var(--gold-lit); }
.btn-gold:hover { background: var(--gold-lit); color: var(--page); }

/* hero */

.hero {
  padding-block: 96px 80px !important;
  background: linear-gradient(180deg, var(--raised), var(--page) 75%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.hero .lede { font-size: 18px; line-height: 1.65; max-width: 46ch; }

.video { aspect-ratio: 16 / 9; border: 1px solid rgba(201, 162, 39, .38); background: var(--raised); }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* sections */

.section-title { margin-bottom: 28px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.card { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--line-strong); }
.card h3 { margin: 14px 0; }
.card .kicker { margin: 0; }
.card-client { border-top-color: var(--blue); }
.card-client .kicker { color: var(--blue-lit); }
.card-server { border-top-color: var(--red); }
.card-server .kicker { color: var(--red-lit); }
.card-pipeline { border-top-color: var(--gold); }
.card-pipeline .kicker { color: var(--gold-lit); }
.card-copy { font-weight: 300; font-size: 15px; line-height: 1.65; color: var(--text-4); }

.spec {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  font-size: 14px;
}
.spec dt { padding: 11px 14px; background: var(--page); font: 400 12px var(--mono); color: var(--muted); }
.spec dd { margin: 0; padding: 11px 14px; background: var(--page); }
.spec dd.mono { line-height: 1.7; }

.formats { margin: 14px 0 0; padding: 0; list-style: none; font: 400 13px/1.9 var(--mono); color: var(--text-4); }
.formats b { font-weight: 400; color: var(--text-2); }

/* download */

.get { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.panel { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 32px; background: var(--surface); border: 1px solid var(--line); }
.panel-gold { background: var(--gold-bg); border-color: var(--gold); }
.panel-raised { background: var(--raised); border-color: var(--line-mid); padding: 34px 38px; }
.panel h2 { font-size: 26px; }
.panel p { font-weight: 300; font-size: 15px; line-height: 1.65; color: var(--text-2); }

.clone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.clone code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px var(--mono); color: var(--text-2); }
.copy {
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  font: 400 11px var(--mono);
  letter-spacing: .08em;
  color: var(--muted);
  cursor: pointer;
}
.copy:hover { color: var(--gold-lit); }

/* repositories */

.table { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.tr {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 170px 120px;
  gap: 24px;
  align-items: center;
  padding: 16px 20px;
  background: var(--surface);
  font-size: 14px;
}
.tr.th { padding: 12px 20px; background: var(--raised); font: 500 11px var(--mono); letter-spacing: .1em; color: var(--muted); }
.tr a { font: 400 14px var(--mono); }

/* licence */

.licence { background: var(--surface); }
.licence-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.licence h2 { font-size: 28px; margin-bottom: 16px; }
.licence-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.licence-cols p { font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--text-2); }
.licence-cols p + p { margin-top: 12px; }
.licence .panel { padding: 0; border: 0; background: none; }
.panel .links { display: flex; flex-direction: column; gap: 10px; font: 400 13px var(--mono); }
.panel .links a { display: flex; justify-content: space-between; padding: 11px 14px; border: 1px solid var(--line-mid); color: var(--text); }
.panel .links a:hover { border-color: var(--gold); text-decoration: none; }

/* footer */

.footer { padding-block: 44px 52px; background: #090A0C; border-top: 1px solid var(--line); }
.footer-legal { text-align: center; font-weight: 300; font-size: 13px; line-height: 1.7; color: var(--dim); }

/* responsive */

@media (max-width: 1180px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .hero-grid, .licence-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tr { grid-template-columns: 200px minmax(0, 1fr); gap: 8px 24px; }
  .tr span:nth-child(3), .tr span:nth-child(4) { grid-column: 2; }
  .tr.th { display: none; }
}

@media (max-width: 780px) {
  :root { --pad: 20px; }

  h2 { font-size: 26px; }
  main > section { padding-block: 32px; }
  .hero { padding-block: 36px 32px !important; }

  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec dt { padding-bottom: 0; }
  .get, .licence-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .licence-cols { gap: 12px; }
  .tr { grid-template-columns: minmax(0, 1fr); }
  .tr span:nth-child(3), .tr span:nth-child(4) { grid-column: 1; }
  .panel, .panel-raised { padding: 22px; }
  .btn { padding: 15px 20px; }
}