* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

:root {
  --ink-bg: #f5f2ea;
  --ink-fg: #1a1713;
  --ink-dim: #6d6558;
  --ink-egg: #c73b26;
  --ink-line: rgba(20, 16, 8, 0.25);
  --dark-bg: #131109;
  --dark-fg: #e9e4d8;
  --dark-dim: #9d968a;
  --dark-egg: #e05038;
  --dark-line: rgba(250, 244, 232, 0.18);

  --bg: var(--ink-bg);
  --fg: var(--ink-fg);
  --fg-dim: var(--ink-dim);
  --egg: var(--ink-egg);
  --line: var(--ink-line);
}

:root[data-theme="light"] {
  --bg: var(--ink-bg);
  --fg: var(--ink-fg);
  --fg-dim: var(--ink-dim);
  --egg: var(--ink-egg);
  --line: var(--ink-line);
}
:root[data-theme="dark"] {
  --bg: var(--dark-bg);
  --fg: var(--dark-fg);
  --fg-dim: var(--dark-dim);
  --egg: var(--dark-egg);
  --line: var(--dark-line);
}
body {
  background: var(--bg);
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, sans-serif;
  touch-action: manipulation;
}

#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hero {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transform: translateY(-10vh);
  padding: 0 1rem; text-align: center;
  pointer-events: none;
}
.wordmark {
  font-size: clamp(2.6rem, 11vw, 5.5rem);
  font-weight: 650; letter-spacing: 0.01em;
  color: var(--fg);
  opacity: 1; transition: opacity 1.6s ease;
}
.tagline {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.8rem, 3.2vw, 1.05rem);
  color: var(--fg-dim);
  margin-top: 1.1rem; letter-spacing: 0.04em;
  opacity: 1; transition: opacity 1.8s ease 0.6s;
}

.js:not(.static) .hero:not(.shown) .wordmark,
.js:not(.static) .hero:not(.shown) .tagline { opacity: 0; }

html.js.static .hero .wordmark,
html.js.static .hero .tagline { opacity: 1; transition: none; }
.footer {
  position: fixed; bottom: 1.2rem; left: 0; right: 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.68rem, 2.6vw, 0.78rem);
  color: var(--fg-dim);
  letter-spacing: 0.05em;
}

.footer .sep { margin: 0 0.4rem; }
.footer a { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { color: var(--fg); }
.footer a:focus-visible { color: var(--fg); }
.footer .egg { color: var(--egg); }

.theme-toggle {
  display: none;
  position: fixed; top: 1.1rem; right: 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.62rem, 2.4vw, 0.72rem);
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.36rem 0.85rem;
  cursor: pointer;
}
.js .theme-toggle { display: block; }
.theme-toggle:hover { color: var(--fg); border-color: var(--fg-dim); }
.theme-toggle:focus-visible { color: var(--fg); outline: 1px solid var(--fg-dim); outline-offset: 3px; }