/* ============================================================
   skills — static docs site
   Display type: Silkscreen (SIL OFL 1.1) — retro handheld LCD feel.
   Secondary type: Space Mono (SIL OFL 1.1) — readable, terminal-warm.
   To switch to Base Pixel: replace the silkscreen src files and
   update --font. The secondary family stays as is.
   Palette: blue + white, pixel-square corners.
   ============================================================ */

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/silkscreen-400.woff2") format("woff2");
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/silkscreen-700.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/spacemono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/spacemono-700.woff2") format("woff2");
}

/* ---- design tokens ---- */
:root {
  --font: "Silkscreen", "Courier New", monospace;
  --font-body: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --paper: #ffffff;
  --sky: #eef3ff;
  --ink: #0b1f4d;
  --ink-soft: #33487d;
  --blue: #1d4ed8;
  --blue-bright: #3b82f6;
  --line: #d8e2f7;
  --screen: #0a1a3f;
  --screen-text: #ffffff;
  --screen-dim: #9db4e8;

  /* spacing scale — one rhythm, no ad-hoc gaps */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 5rem;

  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--paper); /* overscroll shows white, not grey */
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.75;
  font-size: 15px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: none; /* mono honesty */
}

/* ---- links ---- */
a {
  color: var(--blue);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--blue-bright); text-decoration: underline; }

/* visible keyboard focus — not just a mouse hover */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

::selection { background: var(--blue); color: var(--paper); }

/* ---- display chrome stays pixel ---- */
h1, h2, h3, .eyebrow, .logo, nav a, .btn, .group-title, .tag, .screen-head {
  font-family: var(--font);
}
code, kbd, pre { font-family: var(--font-body); }

h1, h2, h3 { text-wrap: balance; }
p, .lede, .section-sub { text-wrap: pretty; }

/* ---- top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: 2px solid var(--line);
  background: var(--sky);
  position: sticky;
  top: 0;
  z-index: 10;
}
.logo { font-weight: 700; font-size: 1rem; color: var(--ink); white-space: nowrap; }
.logo .pixel { color: var(--blue); }
nav { display: flex; align-items: center; }
nav a {
  margin-left: var(--s5);
  font-size: 0.8rem;
  color: var(--ink);
  white-space: nowrap;
}
nav a:hover { color: var(--blue); text-decoration: none; }

/* ---- layout ---- */
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s7) var(--s6) var(--s8);
}
section { margin-top: var(--s8); }
section:first-of-type { margin-top: 0; }

/* anchor jumps clear the sticky bar — classic miss */
#skills, #install { scroll-margin-top: calc(var(--s6) + 2rem); }

/* ---- hero ---- */
.hero {
  text-align: center;
  padding-top: var(--s6);
  position: relative;
  isolation: isolate; /* keeps the dot texture above the canvas, never behind body */
}
/* faint pixel-dot texture, theme-consistent, never loud */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: var(--s2) var(--s3) var(--s2) var(--s4);
  margin-bottom: var(--s6);
  background: var(--paper);
}
.hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.4;
  margin-bottom: var(--s5);
  letter-spacing: 0.02em;
}
.hero h1 .accent { color: var(--blue); }
.lede {
  max-width: 58ch;
  margin: 0 auto var(--s6);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.hero-cta { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { min-width: 10rem; text-align: center; }

.btn {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: var(--s3) var(--s5);
  border: 2px solid var(--blue);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.06s ease;
}
.btn.primary { background: var(--blue); color: var(--paper); }
.btn.primary:hover { background: var(--blue-bright); text-decoration: none; }
.btn.ghost { background: var(--paper); color: var(--blue); }
.btn.ghost:hover { background: var(--sky); text-decoration: none; }
.btn:active { transform: translateY(2px); }

/* ---- section headers ---- */
h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 0.6em;
  position: relative;
}
/* pixel glyph: 2x2 squares, balanced diagonal tones — sized to the type, not a guess */
h2::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='3' height='3' fill='%230b1f4d'/%3E%3Crect x='5' y='0' width='3' height='3' fill='%231d4ed8'/%3E%3Crect x='0' y='5' width='3' height='3' fill='%233b82f6'/%3E%3Crect x='5' y='5' width='3' height='3' fill='%230b1f4d'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* blue lead-in on the underline, aligned under the word */
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 5em;
  background: var(--blue);
}
.section-sub {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: -0.75rem 0 var(--s5);
  max-width: 60ch;
}
.section-sub code { font-size: 0.8rem; }

/* ---- skill grid ---- */
.group-title {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--blue);
  margin: var(--s6) 0 var(--s3);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.card {
  border: 2px solid var(--line);
  background: var(--paper);
  padding: var(--s5) var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.card:hover {
  border-color: var(--blue);
  box-shadow: 4px 4px 0 var(--sky);
  transform: translateY(-2px);
}
.card:hover h3 { color: var(--blue); }
.card h3 { font-size: 1rem; color: var(--ink); transition: color 0.12s ease; }
.card .tag {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 0.1rem 0.45rem;
  align-self: flex-start;
}
.card p { font-size: 0.8125rem; color: var(--ink-soft); flex: 1; line-height: 1.7; }
.card a.more { font-size: 0.75rem; font-weight: 700; display: inline-block; margin-top: var(--s2); }

/* ---- install / screen blocks (handheld panels) ---- */
.screen {
  background: var(--screen);
  color: var(--screen-text);
  border: 2px solid var(--ink);
  padding: var(--s5) var(--s5) var(--s4);
  margin-top: var(--s4);
  max-width: 640px;
  box-shadow: 6px 6px 0 var(--sky);
}
.screen .screen-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--screen-dim);
  margin-bottom: var(--s4);
  border-bottom: 1px dashed var(--screen-dim);
  padding-bottom: var(--s2);
}
.screen .screen-head .right { margin-left: auto; }
/* power LED — the handheld tell */
.screen .led {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--blue-bright);
  border: 1px solid var(--blue);
  animation: led 3s steps(2, jump-none) infinite;
}
@keyframes led {
  0%, 55% { opacity: 1; }
  65%, 100% { opacity: 0.35; }
}
.screen pre {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.screen .cmt { color: var(--screen-dim); }
.screen .cmd { color: var(--screen-text); }

.install-note {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: var(--s4);
  max-width: 60ch;
}
.install-note code { font-size: 0.7rem; }

/* ---- footer ---- */
footer {
  border-top: 2px solid var(--line);
  background: var(--sky);
  text-align: center;
  padding: var(--s6) var(--s4);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
footer p + p { margin-top: var(--s2); }
footer a { color: var(--blue); }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .topbar { padding: var(--s3) var(--s4); }
  nav a { margin-left: var(--s4); font-size: 0.72rem; }
  main { padding: var(--s6) var(--s4) var(--s7); }
  section { margin-top: var(--s7); }
  .hero { padding-top: var(--s5); }
  .eyebrow { margin-bottom: var(--s5); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; text-align: center; }
  .grid { grid-template-columns: 1fr; gap: var(--s4); }
  .group-title { margin-top: var(--s5); }
  .screen { padding: var(--s4) var(--s4) var(--s3); box-shadow: 4px 4px 0 var(--sky); }
  .screen pre { font-size: 0.72rem; line-height: 1.8; }
  footer { padding: var(--s5) var(--s4); }
}

/* ---- respect motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .btn, .led { transition: none; animation: none; }
}