/* terminal-life.com — design v1.0 per Hiro's brief
   Palette: BG #0A0E12 · Surface #12181F · Ink #E8F0F2 · Secondary #8FA3AD
   Amber #FFB000 (primary) · Green #3DD68C (status) · Red #FF5C5C (warn) · Grid #1C242E
   Type: Space Grotesk (display) + IBM Plex Mono (body), self-hosted (CSP: font-src 'self') */

@font-face {
  font-family: "Space Grotesk"; font-display: swap; font-weight: 700;
  src: url("/fonts/space-grotesk-0.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-display: swap; font-weight: 500;
  src: url("/fonts/space-grotesk-1.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-display: swap; font-weight: 400;
  src: url("/fonts/ibm-plex-mono-2.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-display: swap; font-weight: 500;
  src: url("/fonts/ibm-plex-mono-3.woff2") format("woff2");
}

:root {
  --bg: #0A0E12; --surface: #12181F; --ink: #E8F0F2; --ink2: #8FA3AD;
  --amber: #FFB000; --green: #3DD68C; --red: #FF5C5C; --grid: #1C242E;
}

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

html { background: var(--bg); }

body {
  font-family: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

/* scanline overlay — texture, not fog (Hiro: ~6% grid color) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: repeating-linear-gradient(
    0deg, transparent 0, transparent 2px, rgba(28, 36, 46, 0.16) 3px);
}

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* ── header / nav ─────────────────────────────────────── */
header { padding: 28px 0 12px; }
.brand {
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700;
  font-size: 20px; letter-spacing: 0.5px; color: var(--ink);
}
.brand .path { color: var(--ink2); font-weight: 500; }
.brand::before { content: "▮"; color: var(--amber); margin-right: 8px; }
nav { margin-top: 14px; font-size: 13.5px; letter-spacing: 1px; }
nav a { color: var(--ink2); margin-right: 22px; }
nav a:hover { color: var(--amber); text-decoration: none; }
nav a.active { color: var(--amber); }
nav a.pending { color: var(--ink2); opacity: 0.55; cursor: default; }
nav a.pending::after { content: " [PENDING]"; color: var(--green); opacity: 0.8; font-size: 11px; }
nav a:not(.pending)::before { content: "~/"; color: var(--ink2); }

/* ── terminal window blocks ───────────────────────────── */
.term {
  border: 1px solid var(--grid); background: var(--surface);
  border-radius: 6px; margin: 26px 0; overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-bottom: 1px solid var(--grid);
  background: rgba(28, 36, 46, 0.35);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grid); }
.dot.d2 { background: var(--grid); }
.dot.d3 { background: var(--amber); }
.term-label {
  margin-left: 8px; font-size: 12px; color: var(--ink2); letter-spacing: 1px;
}
.term-body { padding: 22px 24px; }

/* ── hero ─────────────────────────────────────────────── */
.hero { padding: 54px 0 10px; }
h1 {
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(34px, 6vw, 58px); line-height: 1.12; color: var(--ink);
}
h1 .cursor {
  display: inline-block; width: 0.55em; height: 1em; background: var(--amber);
  vertical-align: -0.08em; margin-left: 8px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.subhead { color: var(--ink2); margin-top: 16px; font-size: 18px; }

.intro { margin-top: 26px; }
.intro p { margin-bottom: 16px; }

/* ── sections / typography ────────────────────────────── */
h2 {
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500;
  font-size: 26px; color: var(--amber); margin: 34px 0 14px;
}
h2 .hash { color: var(--ink2); font-family: "IBM Plex Mono", monospace; font-size: 18px; margin-right: 6px; }
p + p { margin-top: 14px; }
.byline { color: var(--ink2); font-size: 13px; letter-spacing: 1px; margin: 6px 0 30px; }
.essay p { margin-bottom: 18px; }
.essay .pull {
  color: var(--green); font-weight: 500;
  padding-left: 14px; border-left: 2px solid var(--grid); margin: 24px 0;
}

/* ── coming soon grid ─────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }
.card .term-body { padding: 18px 20px; }
.card h3 {
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500;
  font-size: 17px; color: var(--ink); margin-bottom: 8px;
}
.card h3 .tag {
  color: var(--green); font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 1px; margin-left: 8px;
}
.card p { color: var(--ink2); font-size: 14.5px; line-height: 1.55; }

/* ── ad slot (reserved space — zero layout shift) ─────── */
.ad-slot {
  border: 1px dashed var(--grid); border-radius: 6px;
  min-height: 90px;            /* 728x90 leaderboard reserve; mobile swaps to 100px */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; margin: 30px 0; text-align: center; padding: 10px;
}
.ad-slot .ad-label { font-size: 11px; letter-spacing: 2px; color: var(--ink2); }
.ad-slot .ad-text { font-size: 13.5px; color: var(--ink2); }
.ad-slot .ad-status { font-size: 12px; color: var(--green); }
@media (max-width: 768px) { .ad-slot { min-height: 100px; } }

/* ── footer ───────────────────────────────────────────── */
footer {
  margin: 60px 0 34px; padding-top: 18px; border-top: 1px solid var(--grid);
  color: var(--ink2); font-size: 13px; line-height: 1.6;
}
footer .prompt { color: var(--green); }
/* ── tutorial code blocks (terminal window style) ─────── */
.code {
  border: 1px solid var(--grid); background: #0D1319;
  border-radius: 6px; margin: 18px 0; overflow-x: auto;
}
.code pre {
  padding: 16px 18px; margin: 0;
  font-family: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  font-size: 14.5px; line-height: 1.7; color: var(--ink);
}
.code .c { color: var(--ink2); }          /* comments */
.code .p { color: var(--green); }         /* $ prompt */
.code .hl { color: var(--amber); }        /* the tool name highlight */
code.inline {
  background: rgba(28,36,46,.6); border: 1px solid var(--grid);
  border-radius: 4px; padding: 1px 6px; font-size: 14px; color: var(--amber);
}