/* Kookabus — shared styles. Palette is lifted from the board itself:
   PCB green, fuse yellow, XT60 beige, white silkscreen. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,300..900&family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --pcb-950: #0b1510;
  --pcb-900: #10201a;
  --pcb-800: #17302a;
  --pcb-700: #22423a;
  --board:   #4a5a3c;   /* the actual soldermask olive */
  --fuse:    #f2c21b;
  --xt60:    #e2c48a;
  --silk:    #f4f2ea;
  --silk-2:  #c6d0c5;
  --silk-3:  #8a9a8e;
  --line:    rgba(244, 242, 234, 0.14);
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--pcb-900);
  color: var(--silk);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
}

a { color: var(--fuse); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--silk); }
:focus-visible { outline: 2px solid var(--fuse); outline-offset: 3px; border-radius: 2px; }

img, video, svg { display: block; max-width: 100%; height: auto; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: 0.92em; }
pre { overflow-x: auto; padding: 1rem 1.1rem; background: var(--pcb-950); border: 1px solid var(--line); border-radius: 6px; line-height: 1.5; }
pre code { font-size: 0.86rem; }

h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.2rem; margin-top: 2.2rem; }
p  { margin: 0.8em 0; max-width: var(--measure); }
p.lede { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.4; color: var(--silk-2); max-width: 34ch; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* wordmark: heavy, wide — the silkscreen weight */
.wordmark {
  font-weight: 800; font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em; text-transform: uppercase;
}

/* nav ----------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--pcb-900) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 60px; }
.nav .brand { display: flex; align-items: center; gap: 0.7rem; color: var(--silk); text-decoration: none; font-weight: 700; }
.nav .brand img { height: 26px; width: auto; }
.nav .brand .wordmark { font-size: 1.05rem; }
.nav ul { list-style: none; display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 1.4rem; margin: 0 0 0 auto; padding: 0; }
.nav ul a { color: var(--silk-2); text-decoration: none; font-size: 0.95rem; }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--silk); }
@media (max-width: 640px) { .nav ul { gap: 1rem; font-size: 0.9rem; } .nav .brand .wordmark { display: none; } }

/* status chips: the only rounded thing on the page */
.chip {
  display: inline-block; padding: 0.2em 0.65em; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5;
}
.chip.now  { background: var(--fuse); color: var(--pcb-950); }
.chip.soon { border: 1px solid var(--xt60); color: var(--xt60); }

/* buttons */
.btn {
  display: inline-block; padding: 0.7em 1.15em; border-radius: 4px;
  background: var(--fuse); color: var(--pcb-950); font-weight: 700; text-decoration: none;
}
.btn:hover { background: var(--silk); color: var(--pcb-950); }
.btn.ghost { background: transparent; color: var(--silk); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--silk); }

/* tables — datasheet style */
table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: 0.97rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; vertical-align: top; border-bottom: 1px solid var(--line); }
th { color: var(--silk-3); font-weight: 500; font-size: 0.85rem; }
tbody th { color: var(--silk); font-weight: 500; font-size: inherit; width: 34%; }
td .mono { color: var(--xt60); }
.tbc { color: var(--silk-3); border-bottom: 1px dotted var(--silk-3); cursor: help; }

/* silkscreen block — mirrors the text printed on the board */
.silk {
  font-family: var(--mono); color: var(--silk); text-transform: uppercase;
  line-height: 1.35; letter-spacing: 0.06em;
}

footer {
  border-top: 1px solid var(--line); margin-top: 5rem; padding: 2.6rem 0 3rem;
  color: var(--silk-3); font-size: 0.92rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; align-items: center; justify-content: space-between; }
footer a { color: var(--silk-2); }
.foot-right { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: center; }
.foot-right nav { display: flex; gap: 1.2rem; }

/* Adventures in Silicon lockup: mark, rule, three-line wordmark (concept B5) */
.ais { display: inline-flex; align-items: center; gap: 18px; color: var(--silk); text-decoration: none; }
.ais-mark { width: 98px; height: 60px; background: currentColor;
  -webkit-mask: url(/media/ais-mark.svg) no-repeat center / contain; mask: url(/media/ais-mark.svg) no-repeat center / contain; }
.ais-words { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; border-left: 2px solid currentColor;
  font-family: "Space Grotesk", var(--sans); text-transform: uppercase; line-height: 1; }
.ais-words b { font-weight: 700; font-size: 26px; letter-spacing: 0.02em; }
.ais-words span { font-weight: 500; font-size: 11.5px; letter-spacing: 0.66em; }
.ais-words small { font-family: var(--mono); font-size: 9px; letter-spacing: 0.34em; padding-top: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }