:root {
  --ink: #0b0b0b;
  --panel: #121212;
  --line: #262622;
  --volt: #f8ee00;
  --glitch: #4ff531;
  --alert: #ff2a4d;
  --bone: #e8e6dc;
  --ash: #8a8a85;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, "Liberation Mono", monospace;
  --space: clamp(4rem, 10vh, 8rem);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono);
  line-height: 1.65;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
}
::selection { background: var(--volt); color: var(--ink); }
a { color: var(--volt); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

/* ── skip link ──────────────────────────────── */
.skip-link {
  position: absolute;
  top: -3rem; left: 1rem;
  z-index: 100;
  padding: 0.6rem 1.1rem;
  background: var(--volt);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.skip-link:focus { top: 1rem; }

/* ── HUD chrome ─────────────────────────────── */
.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem;
  font-size: 0.75rem; letter-spacing: 0.12em;
  color: var(--volt);
  background: linear-gradient(to bottom, rgba(11,11,11,0.9), transparent);
  pointer-events: none;
}
.hud .q { color: var(--alert); }

/* ── the spine: circuit trace the page hangs off ── */
.spine { position: relative; max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 760px) {
  .spine { padding-left: 5.5rem; }
  .spine::before {
    content: ""; position: absolute; left: 2.75rem; top: 0; bottom: 0;
    width: 1px; background: linear-gradient(var(--line) 60%, transparent);
  }
  section { position: relative; }
  section::before {           /* solder node where each section attaches */
    content: ""; position: absolute; left: -2.75rem; top: 0.55em;
    width: 9px; height: 9px; transform: translateX(-4.5px) rotate(45deg);
    background: var(--ink); border: 1.5px solid var(--volt);
  }
  section::after {            /* trace elbow from spine into the section */
    content: ""; position: absolute; left: -2.7rem; top: calc(0.55em + 4px);
    width: 2.7rem; height: 1px; background: var(--line);
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      @keyframes spine-draw { from { transform: scaleY(0); } }
      .spine::before {
        transform-origin: top;
        animation: spine-draw linear;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
      }
      @keyframes solder-reveal {
        from { opacity: 0; transform: translateX(-4.5px) rotate(45deg) scale(0.3); }
      }
      section::before {
        animation: solder-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
      }
    }
  }
}

/* ── hero ───────────────────────────────────── */
.hero {
  min-height: 100svh; display: grid; place-content: center;
  text-align: center; padding: var(--space) 0;
}
.glyph { position: relative; width: clamp(150px, 26vh, 240px); margin: 0 auto 2rem; }
.glyph svg { display: block; width: 100%; height: auto; }
.glyph .layer { position: absolute; inset: 0; }
.glyph .g-green { color: var(--glitch); transform: translate(-6px, 5px); }
.glyph .g-red   { color: var(--alert); opacity: 0; }
.glyph .g-volt  { color: var(--volt); position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .glyph:hover .g-volt, .glyph:hover .g-red { animation: jitter 0.28s steps(2) infinite; }
  .glyph:hover .g-red { opacity: 0.7; animation-direction: reverse; }
  @keyframes jitter {
    0%, 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
    25% { transform: translate(3px,-2px); clip-path: inset(8% 0 62% 0); }
    50% { transform: translate(-3px,2px); clip-path: inset(58% 0 12% 0); }
    75% { transform: translate(2px,3px); clip-path: inset(32% 0 38% 0); }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes boot-fade { from { opacity: 0; } }
  @keyframes boot-rise { from { opacity: 0; transform: translateY(18px); } }
  @keyframes glyph-draw-a { from { stroke-dashoffset: 420; } }
  @keyframes glyph-draw-b { from { stroke-dashoffset: 160; } }

  .hud { animation: boot-fade 0.4s ease-out backwards; }

  .glyph .stroke-a {
    stroke-dasharray: 420;
    animation: glyph-draw-a 0.9s ease-out 0.3s backwards;
  }
  .glyph .stroke-b {
    stroke-dasharray: 160;
    animation: glyph-draw-b 0.7s ease-out 0.5s backwards;
  }
  .glyph polygon { animation: boot-fade 0.6s ease-out 0.6s backwards; }

  h1 { animation: boot-rise 0.5s ease-out 1.2s backwards; }
  .thesis { animation: boot-rise 0.4s ease-out 1.6s backwards; }
  .thesis-sub { animation: boot-rise 0.4s ease-out 1.8s backwards; }
  .scroll-hint { animation: boot-fade 0.4s ease-out 2.1s backwards; }
}
h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 700; letter-spacing: 0.55em; text-indent: 0.55em;
  color: var(--volt);
}
.thesis { margin-top: 1.25rem; font-size: clamp(1rem, 2.4vw, 1.35rem); color: var(--bone); }
.thesis-sub { margin-top: 0.5rem; color: var(--ash); font-size: 0.9em; }
.cursor::after { content: "▌"; color: var(--volt); animation: blink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes blink { 50% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } }
.scroll-hint { margin-top: 4rem; color: var(--ash); font-size: 0.75rem; letter-spacing: 0.2em; }

/* ── sections ───────────────────────────────── */
section { padding: var(--space) 0; }
.eyebrow {
  color: var(--volt); font-size: 0.8rem; letter-spacing: 0.18em;
  margin-bottom: 1.75rem;
}
.eyebrow .p { color: var(--ash); }
.prose { max-width: 46rem; }
.prose p + p { margin-top: 1.1rem; }
.prose strong { color: var(--volt); font-weight: 600; }

/* ── capability modules ─────────────────────── */
.modules { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .modules { grid-template-columns: 1fr 1fr; } }
.mod { background: var(--panel); padding: 1.75rem; }
.mod h3 { color: var(--volt); font-size: 0.85rem; letter-spacing: 0.14em; margin-bottom: 1rem; }
.mod h3::before { content: "▸ "; color: var(--glitch); }
.mod ul { list-style: none; padding: 0; color: var(--ash); font-size: 0.92em; }
.mod li { padding: 0.3rem 0; border-bottom: 1px dashed #1d1d1a; }
.mod li:last-child { border-bottom: 0; }
.mod li::before { content: "· "; color: var(--glitch); }

/* ── contact ────────────────────────────────── */
.channel {
  border: 1px solid var(--line); background: var(--panel);
  padding: 2.25rem 1.75rem; text-align: center;
}
.channel h2 { color: var(--volt); font-size: 1.1rem; letter-spacing: 0.25em; }
.channel p { color: var(--ash); margin: 1rem 0 1.5rem; }
.btn {
  display: inline-block; border: 1px solid var(--volt); padding: 0.7rem 1.6rem;
  letter-spacing: 0.15em; font-size: 0.85rem;
}
.btn:hover { background: var(--volt); color: var(--ink); text-decoration: none; }

footer {
  padding: 2.5rem 0 3rem; color: var(--ash);
  font-size: 0.72rem; letter-spacing: 0.1em; text-align: center;
}
footer .hex { color: #3a3a35; display: block; margin-top: 0.6rem; }

/* ── scroll reveals (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes rise { from { opacity: 0; transform: translateY(28px); } }
    section > * {
      animation: rise auto linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}