/* Palette taken from the ditherpress banner: paper, ink, and one orange pen. */
:root {
  --paper: #f5f1e8;
  --ink: #1b2a3a;
  --pen: #d9793a;
    --muted: #5d6874;
  --rule: #d6cfbf;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --label: 11rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131c27;
    --ink: #e9e3d6;
    --pen: #e8894a;
    --muted: #93a0ad;
    --rule: #2a3949;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--pen); }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }

/* ---- Top bar ---- */
.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem var(--gutter);
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.mark { font-weight: 600; text-decoration: none; }
.top nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--pen); }

/* ---- Hero ---- */
.hero { padding: clamp(2rem, 8vw, 6rem) var(--gutter) 0; }

h1 {
  margin: 0;
  font: 700 clamp(3.5rem, 13vw, 10.5rem)/0.86 var(--display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.lede {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  font-size: 1.1875rem;
}

.tray {
  margin: clamp(2.5rem, 6vw, 4rem) calc(-1 * var(--gutter)) 0;
}

#print {
  display: block;
  width: 100%;
  height: clamp(260px, 46vh, 480px);
  background: #f5f1e8;
}

figcaption {
  padding: 0.9rem var(--gutter) 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.rec {
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid currentColor;
  font: 600 0.6875rem/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.rec.closed { color: var(--pen); }

/* ---- Content blocks: label column + body ---- */
.block {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 44rem);
  gap: 1rem 2rem;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) 0;
}

h2 {
  margin: 0;
  font: 500 0.8125rem/1.9 var(--mono);
  text-transform: lowercase;
  color: var(--pen);
}

h3 {
  margin: 0;
  font: 700 1.875rem/1.05 var(--display);
  letter-spacing: 0.005em;
}
h3 a { text-decoration: none; }
h3 a:hover { text-decoration: underline; }

.body > * + * { margin-top: 2.25rem; }
.body p { margin: 0.4rem 0 0; }

.where { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); margin: 0 !important; }
.meta, .stack { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }

.demo {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin-top: 1rem;
  overflow: visible;
}
.demo .arcs { fill: none; stroke: var(--pen); stroke-width: 1.5; }
.demo .tokens { fill: var(--ink); font: 400 15px var(--body); text-anchor: middle; }

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 1.75rem 0 0;
}
.langs dt { font: 700 1.5rem/1.1 var(--display); }
.langs dd { margin: 0.2rem 0 0; font: 400 0.8125rem var(--mono); color: var(--muted); }

.links { list-style: none; margin: 0; padding: 0; font-size: 1.1875rem; }
.links li + li { margin-top: 0.4rem; }

.foot {
  margin-top: clamp(4rem, 10vw, 7rem);
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px solid var(--rule);
  font: 400 0.75rem var(--mono);
  color: var(--muted);
}

@media (max-width: 760px) {
  .block { grid-template-columns: 1fr; }
}