/* ==========================================================
   Site styles
   1. Tokens  2. Base  3. Layout  4. Header  5. Hero
   6. About  7. Projects & filter  8. Lists  9. Footer
   10. Utilities  11. Responsive & motion
   ========================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Light theme: white and cool grey + one green accent (text pairs meet WCAG AA) */
  --bg: #ffffff;
  --bg-alt: #f1f3f5;
  --text: #16181d;
  --text-muted: #555b66;
  --border: #d4d7dd;
  --accent: #0a6b4b;
  --accent-contrast: #ffffff;
  --focus: #b45309;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale: eight steps, nothing else */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.25rem + 2vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1rem + 4.2vw, 3.75rem);

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-tight: -0.02em;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --header-offset: 5rem;

  /* Shape: two radii. UI uses --radius; illustrations use the same two (rx="4" and rx="2") */
  --radius-sm: 2px;
  --radius: 4px;
  --line: 1px;
  --line-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --grid-size: 16px; /* pitch of the plotted-paper grid behind diagrams */

  /* Depth: one hard shadow, one small lift */
  --shadow-offset: 5px;
  --lift: 2px;

  /* Motion: one duration, one easing curve */
  --duration: 160ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: var(--duration) var(--ease-out);

  --container: 68rem;
  --measure: 65ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="phosphor"]) {
    --bg: #121412;
    --bg-alt: #1b1e1b;
    --text: #e6e9e3;
    --text-muted: #a7aea4;
    --border: #333833;
    --accent: #5fd38d;
    --accent-contrast: #07120b;
    --focus: #fbbf24;
  }
}

:root[data-theme="dark"] {
  --bg: #121412;
  --bg-alt: #1b1e1b;
  --text: #e6e9e3;
  --text-muted: #a7aea4;
  --border: #333833;
  --accent: #5fd38d;
  --accent-contrast: #07120b;
  --focus: #fbbf24;
}

/* Hidden easter-egg theme (Konami code, see script.js) */
:root[data-theme="phosphor"] {
  --bg: #000000;
  --bg-alt: #04130a;
  --text: #39ff88;
  --text-muted: #2fcf6f;
  --border: #0f5a2f;
  --accent: #39ff88;
  --accent-contrast: #000000;
  --focus: #ffffff;
  --font-sans: var(--font-mono);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset); /* keep anchored headings clear of the sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
}

h1, h2, h3 { font-weight: var(--weight-bold); line-height: var(--leading-snug); margin: 0 0 var(--space-3); }
h2 { font-family: var(--font-mono); font-size: var(--text-xl); }
h3 { font-size: var(--text-base); }
p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--font-mono); font-size: 0.9em; } /* relative to its surroundings */

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: var(--line-strong); }

:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }
.section-intro { color: var(--text-muted); max-width: var(--measure); margin-bottom: var(--space-4); }

/* Decorative shell prompt before headings (aria-hidden in the markup) */
.prompt { color: var(--accent); font-weight: var(--weight-regular); }

/* ---------- 4. Header ---------- */
.skip-link {
  position: absolute; left: var(--space-2); top: calc(-1 * var(--space-6)); z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--accent); color: var(--accent-contrast); font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-2); }

.site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: var(--line) solid var(--border); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); }
.brand { margin: 0; display: flex; flex-direction: column; line-height: var(--leading-snug); margin-right: auto; }
.brand-name { color: var(--text); font-family: var(--font-mono); font-weight: var(--weight-bold); text-decoration: none; }
.brand-name:hover { text-decoration: underline; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.site-nav a { display: inline-block; padding: var(--space-1) 0; color: var(--text); text-decoration: none; border-bottom: var(--line-strong) solid transparent; transition: border-color var(--transition); }
.site-nav a:hover { border-bottom-color: var(--accent); }

.theme-toggle {
  font: inherit; font-size: var(--text-sm); color: var(--text); background: transparent;
  border: var(--line) solid var(--border); border-radius: var(--radius);
  padding: var(--space-1) var(--space-2); cursor: pointer;
  transition: border-color var(--transition);
}
.theme-toggle:hover { border-color: var(--text-muted); }
.theme-toggle[hidden] { display: none; }

/* ---------- 5. Hero: one decisive first screen ---------- */
.hero { display: flex; align-items: center; min-height: min(44rem, calc(100svh - var(--header-offset))); padding-block: var(--space-6); }
.hero-grid { display: grid; gap: var(--space-5); align-items: center; }
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); max-width: 17ch; margin-bottom: var(--space-4); }
.lead { font-size: var(--text-lg); max-width: 34ch; color: var(--text-muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 0; }

.button {
  display: inline-block; padding: calc(var(--space-2) + var(--space-1)) var(--space-4);
  border: var(--line) solid var(--text); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-weight: var(--weight-semibold);
  transition: background-color var(--transition), filter var(--transition);
}
.button:hover { background: var(--bg-alt); }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.button-primary:hover { background: var(--accent); filter: brightness(1.1); }

.terminal {
  margin: 0; background: var(--bg-alt);
  border: var(--line) solid var(--text-muted); border-radius: var(--radius);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--accent);
  font-family: var(--font-mono); font-size: var(--text-md); overflow: hidden;
}
.terminal-bar { padding: var(--space-2) var(--space-3); border-bottom: var(--line) solid var(--border); font-size: var(--text-xs); color: var(--text-muted); }
.terminal pre { margin: 0; padding: var(--space-3); font: inherit; white-space: pre-wrap; }
.t-dim, .cursor { color: var(--accent); }

/* ---------- 6. Section weights ---------- */
/* Major: the workshop, on a tinted band with lots of room */
.section-major { padding-block: var(--space-7); background: var(--bg-alt); border-block: var(--line) solid var(--border); }
.section-major h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.section-major .section-intro { margin-bottom: var(--space-5); font-size: var(--text-base); }

/* Minor: smaller headings, tighter spacing, muted labels */
.section-minor { padding-block: var(--space-5); }
.section-minor + .section-minor { border-top: var(--line) dashed var(--border); }
.section-minor h2 { font-size: var(--text-base); margin-bottom: var(--space-4); color: var(--text-muted); }
.section-minor h2 .prompt { color: var(--accent); }
.section-minor h3 { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); margin-bottom: var(--space-2); }
.section-minor p { font-size: var(--text-md); max-width: var(--measure); }
.closing { padding-block: var(--space-6); }

/* ---------- 7. Projects & filter ---------- */
.project-grid { display: grid; gap: var(--space-6) var(--space-5); }
.project-grid > li { display: flex; }
.project { display: flex; flex-direction: column; width: 100%; }

.project-art {
  aspect-ratio: 2 / 1; padding: var(--space-3);
  background-color: var(--bg); color: var(--text-muted);
  border: var(--line) solid var(--text-muted); border-radius: var(--radius);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  /* plotted-paper grid behind each diagram */
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-muted) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 14%, transparent) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
/* Keyboard focus anywhere in a card highlights its plate, without moving it */
.project:focus-within .project-art {
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--accent); border-color: var(--accent);
}
/* Only cards that are wholly clickable lift on hover. The single link stretches over the card */
.project:has(.project-links a:only-child) { position: relative; }
.project-links a:only-child::after { content: ""; position: absolute; inset: 0; }
.project:has(.project-links a:only-child):hover .project-art {
  transform: translate(calc(-1 * var(--lift)), calc(-1 * var(--lift)));
  box-shadow: calc(var(--shadow-offset) + var(--lift)) calc(var(--shadow-offset) + var(--lift)) 0 var(--accent);
  border-color: var(--accent);
}
.project-art svg {
  display: block; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.project-art .a { stroke: var(--accent); }
.project-art .f { fill: var(--accent); }
.project-art .thin { stroke-width: 1; } /* SVG units, not CSS pixels */
.project-art .solid { fill: var(--bg); }
.project-art .dashed { stroke-dasharray: 5 4; }
.project-art .t text { fill: currentColor; stroke: none; font: 11px var(--font-mono); } /* SVG units */
.project-art .t .ta { fill: var(--accent); font-weight: var(--weight-bold); }

.project-body { display: flex; flex-direction: column; flex: 1; padding-top: var(--space-4); }
.project-title { font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); }
.project-desc { font-size: var(--text-base); max-width: 52ch; margin-bottom: var(--space-3); }
.project-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); font-weight: var(--weight-semibold); }
.project-links a { padding-block: var(--space-1); }
/* Metadata stays deliberately quiet. Status always pairs a symbol with a word */
.project-meta { margin: auto 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

/* CSS-only filter. Needs :has(); elsewhere the controls are hidden and everything shows */
.filter { display: none; border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
.filter legend { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); padding: 0; margin-bottom: var(--space-2); }
.filter-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter label {
  font-family: var(--font-mono); font-size: var(--text-sm); cursor: pointer;
  padding: var(--space-1) var(--space-3); border: var(--line) solid var(--border); border-radius: var(--radius);
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.filter label:hover { border-color: var(--text-muted); }
.filter input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.filter input:focus-visible + label { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

@supports selector(:has(*)) {
  .filter { display: block; }
  .workshop:has(#f-games:checked) li[data-kind]:not([data-kind~="games"]),
  .workshop:has(#f-music:checked) li[data-kind]:not([data-kind~="music"]),
  .workshop:has(#f-tools:checked) li[data-kind]:not([data-kind~="tools"]) { display: none; }
}

/* ---------- 8. Quiet lists: drawer, log, facts, contact ---------- */

.drawer-list { display: grid; gap: 0 var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.drawer-list li { padding-block: var(--space-2); border-top: var(--line) dashed var(--border); font-size: var(--text-md); color: var(--text-muted); }
.drawer-list > li > a, .drawer-title { display: block; font-weight: var(--weight-semibold); color: var(--text); }
.drawer-title a { color: var(--text); }
.status { font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }

.section-minor .email { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.contact-list { max-width: 34rem; }
.contact-list li { padding-block: var(--space-2); border-top: var(--line) dashed var(--border); font-size: var(--text-md); }
.contact-label { display: inline-block; min-width: 6rem; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-sm); }

/* ---------- 9. Footer ---------- */
.site-footer { border-top: var(--line) solid var(--border); padding-block: var(--space-4); color: var(--text-muted); font-size: var(--text-md); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.footer-inner p { margin: 0; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }

/* ---------- 10. Utilities ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 11. Responsive & motion ---------- */
@media (min-width: 48rem) {
  .container { padding-inline: var(--space-4); }
  .hero-grid { grid-template-columns: 1.5fr 1fr; gap: var(--space-5); }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .project-feature { grid-column: 1 / -1; }
  .project-feature .project { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-5); align-items: center; }
  .project-feature .project-body { padding-top: 0; }
  .project-feature .project-title { font-size: var(--text-2xl); }
  .project-feature .project-desc { font-size: var(--text-lg); }
}

/* Cursor blink only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .cursor { animation: blink 1.1s steps(1) infinite; } /* a terminal cursor blinks; nothing else animates */
  @keyframes blink { 50% { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}