/* Brand: brand/README.md (oxblood ink, paper, gold for DNS syntax). JetBrains Mono is self-hosted (OFL, fonts/OFL.txt),
   subset to Latin; the site loads nothing from third parties. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #3A1420;
  --paper: #F6F1EA;
  --gold: #A8781E;          /* graphics only: 3.48:1 on paper */
  --gold-text: #7D5913;     /* gold for text: 5.65:1 on paper */
  --soft: #6B5560;
  --rule: #E3D9CC;
  --term-bg: #2B0F18;
  --term-fg: #F1E8DE;
  --term-dim: #C9B8BF;
  --term-gold: #E8B84A;
  --light-term-bg: #EFE6DA;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F6F1EA;
    --paper: #1C0910;
    --gold: #E8B84A;
    --gold-text: #E8B84A;
    --soft: #C9B8BF;
    --rule: #43242F;
    --term-bg: #2B0F18;
    --light-term-bg: #2A121B;
  }
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  font: 1.0625rem/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}
main, .bar, footer { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }

a { color: inherit; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
a:hover { color: var(--gold-text); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: 0.5rem 0.75rem; }

code { font: 500 0.9em var(--mono); overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--mono); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: 1.45rem; margin: 0 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
p, ul, ol, dl { max-width: 38rem; }

/* Header */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.brand img { display: block; width: 144px; height: auto; }
.bar nav { display: flex; gap: 1.25rem; font-size: 0.95rem; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

/* Hero: the headline is set in the wordmark's typeface; the period is the DNS root, in gold. */
.hero { padding: clamp(2.5rem, 8vw, 5.5rem) 0 2rem; }
.hero h1 { font-size: clamp(2.6rem, 8.5vw, 5.25rem); letter-spacing: -0.045em; margin: 0 0 1.25rem; max-width: 12ch; }
.root { color: var(--gold); }
.lede { font-size: clamp(1.15rem, 2.4vw, 1.35rem); line-height: 1.5; margin: 0 0 1.75rem; max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0; }
.button {
  display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 0.7rem 1.1rem; border-radius: 6px; font-weight: 600;
}
.button:hover { color: var(--paper); background: #561e30; }
@media (prefers-color-scheme: dark) { .button { background: var(--gold); color: #1C0910; } .button:hover { background: #F2CB6E; color: #1C0910; } }
.quiet { font-weight: 600; }

/* Terminal: real output from the CLI, unedited apart from the lines left out. */
.run { margin: 1rem 0 4.5rem; }
.term {
  margin: 0; padding: 1.1rem 1.25rem; overflow-x: auto;
  background: var(--term-bg); color: var(--term-fg); border-radius: 10px;
  font: 500 0.8125rem/1.7 var(--mono);
}
/* Each line of output wraps with a hanging indent, so nothing is cut off at any width. */
.term code { display: block; font: inherit; white-space: normal; }
.term .line { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 2ch; text-indent: -2ch; }
.ps { color: var(--term-gold); user-select: none; }
.term .verdict { color: var(--term-gold); font-weight: 700; }
.run figcaption { color: var(--soft); font-size: 0.9rem; margin-top: 0.6rem; max-width: 46rem; }
.term-light { background: var(--light-term-bg); color: var(--ink); }
.term-light .ps, .term-light .verdict { color: var(--gold-text); }

/* The one moment of motion: the run plays in once on load. */
@media (prefers-reduced-motion: no-preference) {
  .run .line { opacity: 0; animation: show 0.01s linear forwards; }
  .run .line:nth-child(1) { animation-delay: 0.25s; }
  .run .line:nth-child(2) { animation-delay: 0.9s; }
  .run .line:nth-child(3) { animation-delay: 1.15s; }
  @keyframes show { to { opacity: 1; } }
}

/* Sections */
main > section:not(.hero) { padding: 0 0 3.75rem; }
.breaks { padding-left: 1.2rem; }
.breaks li { margin: 0.4rem 0; }
.breaks li::marker { content: "* "; color: var(--gold); font: 700 1em var(--mono); }
.aside { color: var(--soft); font-size: 0.9rem; margin-top: 0.6rem; }
.how .term { margin-top: 1rem; }

/* Release ladder: a real sequence, so it is numbered by release. */
.ladder { list-style: none; padding: 0; margin: 1.25rem 0 0; max-width: 44rem; }
.ladder li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.ladder li:last-child { border-bottom: 1px solid var(--rule); }
.rel { font: 700 1rem/1.5 var(--mono); color: var(--soft); }
.now .rel { color: var(--gold-text); }
.ladder p { margin: 0.35rem 0 0; }
.state { font-size: 0.9rem; color: var(--soft); }

.rules dl { margin: 1rem 0 0; max-width: 44rem; }
.rules dt { font-weight: 700; margin-top: 1.1rem; }
.rules dd { margin: 0.2rem 0 0; }

.get .term { margin: 0.75rem 0; }

footer { border-top: 1px solid var(--rule); padding-top: 1.25rem; padding-bottom: 2.5rem; color: var(--soft); font-size: 0.9rem; }
footer p { margin: 0.3rem 0; }

@media (max-width: 34rem) {
  .bar nav { gap: 0.9rem; font-size: 0.9rem; }
  .brand img { width: 116px; }
  .ladder li { grid-template-columns: 1fr; gap: 0.25rem; }
}