@font-face {
  font-family: SpaceMono;
  src: url('theme/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: SpaceMono;
  src: url('theme/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
}

:root {
  --ink: #080b14;
  --ink-soft: #111827;
  --paper: #f7f9ff;
  --paper-muted: #bac6da;
  --acid: #55e7ff;
  --coral: #ff63bb;
  --purple: #a78bfa;
  --line: rgba(205, 220, 246, .22);
  --measure: 1180px;
  --space: clamp(1rem, 2vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: SpaceMono, monospace;
  font-size: 1rem;
  line-height: 1.7;
}

body::selection { background: var(--acid); color: var(--ink); }

header, nav, main, footer {
  width: min(100% - 2rem, var(--measure));
  margin-inline: auto;
}

header {
  padding: 1.5rem 0 1rem;
  border-bottom: 1px solid var(--line);
}

header::before {
  content: 'SB / 01';
  color: var(--acid);
  font-size: .75rem;
  letter-spacing: .12em;
}

nav {
  padding: 1rem 0;
  color: var(--paper-muted);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

nav a { color: inherit; text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--acid); }

/* Slamhaus renders the navigation partial as the first body paragraph. */
body > p:first-of-type {
  width: min(100% - 2rem, var(--measure));
  margin: 0 auto;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper-muted);
  font-size: .78rem;
  letter-spacing: .04em;
  line-height: 1.8;
  text-transform: uppercase;
}

body > p:first-of-type a { color: inherit; text-decoration: none; }
body > p:first-of-type a:hover, body > p:first-of-type a:focus-visible { color: var(--acid); }

main { padding: 2rem 0 5rem; }

h1, h2, h3 { margin: 0 0 1rem; line-height: 1.1; letter-spacing: -.06em; }
h1 { max-width: 920px; color: var(--paper); font-size: clamp(3rem, 9vw, 8.5rem); }
h2 { color: var(--acid); font-size: clamp(2rem, 5vw, 4.5rem); }
h3 { color: var(--paper); font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -.04em; }

p { max-width: 68ch; margin: 0 0 1.25rem; color: var(--paper-muted); }
.eyebrow, .project-number { color: var(--acid); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
a { color: var(--acid); text-underline-offset: .25em; }
a:hover, a:focus-visible { color: var(--coral); }

hr { border: 0; border-top: 1px solid var(--line); margin: 4rem 0; }

img, video { max-width: 100%; height: auto; }

.hero {
  min-height: min(72vh, 720px);
  margin: 1rem 0 7rem;
  border: 1px solid var(--line);
  background: var(--ink-soft);
}

.hero { position: relative; overflow: hidden; display: grid; place-items: center; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,19,19,.8), rgba(16,19,19,.2)); }
.hero-content { position: relative; z-index: 1; width: min(100% - 3rem, 980px); padding: 3rem 0; }
.hero-content > span { display: block; }
.hero-content > span:last-child { font-size: clamp(1rem, 2vw, 1.35rem); }
.hero-title { display: block; max-width: 920px; color: var(--paper); font-size: clamp(3rem, 9vw, 8.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -.06em; }

.section { margin: 0 0 7rem; }
.profile-grid, .project-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); background: var(--line); }
.profile-grid .profile-card, .project-card { min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--ink-soft); }
.profile-grid .profile-card:hover, .project-card:hover { background: #19152d; }
.project-card { display: flex; flex-direction: column; }
.card-title { display: block; margin-bottom: 1rem; color: var(--paper); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.1; }
.profile-card span:last-child, .project-card span:last-child { display: block; color: var(--paper-muted); }
.project-grid { grid-template-columns: repeat(2, 1fr); }
.project-card img, .project-image { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; margin: 0 0 1.5rem; filter: saturate(.75); }
.project-card button { display: block; width: 100%; margin-top: auto; }
.project-card:nth-child(3n) .project-number { color: var(--purple); }
.project-card h3 a { color: var(--paper); text-decoration: none; }
.project-card h3 a:hover { color: var(--acid); }
.tools { padding: 3rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tools-list { display: block; color: var(--paper); font-size: clamp(1.2rem, 3vw, 2rem); line-height: 1.5; }
.tool-logos { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 1rem; margin-top: 2rem; }
.tool-logos img { width: 100%; max-height: 72px; object-fit: contain; filter: grayscale(1) brightness(1.8); opacity: .8; }
.tool-logos img:hover { filter: none; opacity: 1; }
.hero + br, main > br { display: none; }

form { max-width: 760px; }
.contact-gate { padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid rgba(167, 139, 250, .55); background: var(--ink-soft); }
.contact-gate.locked .contact-email, .contact-gate.locked .contact-form { display: none; }
.maze-instructions, .maze-status { color: var(--paper-muted); }
.maze-board { display: block; width: min(100%, 27rem); margin: 1.5rem auto; padding: 1rem; border: 1px solid var(--line); background: var(--ink); color: var(--acid); font: 700 clamp(.9rem, 2vw, 1.2rem)/1.35 SpaceMono, monospace; letter-spacing: .12em; text-align: center; white-space: pre; }
.maze-controls { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: ". up ." "left down right"; gap: .5rem; width: min(100%, 14rem); margin: 0 auto 2rem; }
.maze-up { grid-area: up; }
.maze-left { grid-area: left; }
.maze-down { grid-area: down; }
.maze-right { grid-area: right; }
.maze-controls button { min-height: 3rem; }
.contact-email { margin: 1.5rem 0; color: var(--acid); font-weight: 700; }
form input, form textarea { width: 100%; margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 0; background: var(--ink-soft); color: var(--paper); font: inherit; }
form input:focus, form textarea:focus { outline: 2px solid var(--acid); outline-offset: 2px; border-color: var(--acid); }
button, .slam-button { border: 1px solid var(--acid); border-radius: 0; padding: .8rem 1.25rem; background: var(--acid); color: var(--ink); font: 700 .85rem SpaceMono, monospace; text-transform: uppercase; cursor: pointer; }
button:hover, button:focus-visible, .slam-button:hover, .slam-button:focus-visible { background: var(--coral); border-color: var(--coral); }

footer { padding: 1.5rem 0 3rem; border-top: 1px solid var(--line); color: var(--paper-muted); font-size: .75rem; }

@media (max-width: 760px) {
  body > p:first-of-type { padding: .7rem 0; }
  .hero { min-height: 58vh; margin-bottom: 4rem; }
  .hero-content { width: min(100% - 2rem, 980px); padding: 2rem 0; }
  .hero-title { font-size: clamp(2.4rem, 13vw, 4.5rem); overflow-wrap: anywhere; }
  h1 { font-size: clamp(2.3rem, 11vw, 4.5rem); }
  h2 { font-size: clamp(1.8rem, 9vw, 3rem); }
  main { padding-top: 1rem; }
  .profile-grid, .project-grid { grid-template-columns: 1fr; }
  .tool-logos { grid-template-columns: repeat(2, 1fr); }
  .section { margin-bottom: 4rem; }
  .project-card, .profile-grid .profile-card { padding: 1.25rem; }
  .project-card img, .project-image { aspect-ratio: 16 / 9; }
  form { width: 100%; }
  form label { display: block; margin-bottom: .75rem; }
  form input, form textarea { min-height: 3rem; font-size: 16px; }
  button, .slam-button { min-height: 3rem; width: 100%; }
}

@media (max-width: 420px) {
  body { font-size: .95rem; }
  body > p:first-of-type { font-size: .68rem; word-spacing: .15em; }
  .hero { min-height: 52vh; }
  .hero video { opacity: .22; }
  .hero-content > span:last-child { font-size: 1rem; }
  .maze-board { margin: 1rem auto; padding: .75rem .5rem; font-size: .82rem; letter-spacing: .08em; }
  .maze-controls { margin-bottom: 1.5rem; }
  .tool-logos { gap: .6rem; }
  .tool-logos img { max-height: 56px; }
}