/* Minimal, monospace, centered layout (inspired by jkrause.io's structure). */
:root {
  --bg: #fff;
  --fg: oklch(27.8% 0.033 256.848);
  --muted: oklch(44.6% 0.03 256.802);
  --icon: oklch(55.1% 0.027 264.364);
  --icon-hover: oklch(27.8% 0.033 256.848);
  --rule: oklch(92.8% 0.006 264.531);
  --ease: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dark {
  --bg: oklch(21% 0.034 264.665);
  --fg: oklch(92.8% 0.006 264.531);
  --muted: oklch(80% 0.015 264);
  --icon: oklch(70.7% 0.022 261.325);
  --icon-hover: oklch(92.8% 0.006 264.531);
  --rule: oklch(32% 0.03 264);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
body {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
  background: var(--bg);
  color: var(--fg);
  transition: background-color var(--ease), color var(--ease);
}
h1 { font-size: 1.5rem; font-weight: inherit; letter-spacing: 0.01em; }
button { background: 0 0; border: 0; cursor: pointer; font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

.skip-link { position: absolute; left: -9999px; top: 0.75rem; padding: 0.25rem 0.5rem; background: var(--fg); color: var(--bg); }
.skip-link:focus { left: 0.75rem; z-index: 10; }

/* Hero: one centered column filling the viewport */
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; min-height: 100vh; min-height: 100dvh; padding: 4rem 1.5rem; text-align: center; position: relative;
}
.tagline { max-width: 36rem; text-wrap: balance; font-size: 0.875rem; color: var(--muted); }
nav { display: flex; gap: 0.5rem; }

.icon { display: block; color: var(--icon); transition: color var(--ease), transform var(--ease); }
.icon:hover, .icon:focus-visible { color: var(--icon-hover); transform: scale(1.1); }
.icon svg { display: block; width: 1.5rem; height: 1.5rem; }

#theme-toggle { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 5; }
.dark .moon, html:not(.dark) .sun { display: none; }

.scroll-hint {
  position: absolute; bottom: 1.5rem; font-size: 0.75rem; color: var(--icon); text-decoration: none;
  transition: color var(--ease);
}
.scroll-hint:hover { color: var(--icon-hover); }

/* Secondary sections, same quiet style */
.focus, .contact { max-width: 40rem; margin: 0 auto; padding: 4rem 1.5rem; border-top: 1px solid var(--rule); }
.eyebrow { font-size: 0.75rem; font-weight: inherit; text-transform: uppercase; letter-spacing: 0.15em; color: var(--icon); margin-bottom: 2rem; }
.pillars { list-style: none; display: grid; gap: 2.5rem; }
.pillars h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.pillars p, .contact p { font-size: 0.875rem; color: var(--muted); }
.contact p + p { margin-top: 1rem; }
.text-link { color: var(--fg); text-underline-offset: 4px; text-decoration-color: var(--icon); transition: text-decoration-color var(--ease); }
.text-link:hover { text-decoration-color: currentColor; }

footer { text-align: center; font-size: 0.75rem; color: var(--icon); padding: 2rem 1.5rem 3rem; }

@media (min-width: 40rem) {
  h1 { font-size: 2.25rem; }
  .tagline { font-size: 1rem; }
  #theme-toggle { top: 1rem; right: 1.5rem; }
  .focus, .contact { padding: 6rem 1.5rem; }
}