@font-face {
  font-family: 'Cinzel'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/cinzel-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
}
:root, .tror {
  color-scheme: dark;
  --void: #000103; --deep: #000205; --surface: #050C15; --line: #0D1D30;
  --accent: #6DBBFF; --text: #EAF4FF; --muted: #A2B8CC; --quiet: #6C7D8C;
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text); background: var(--void); font-synthesis: none;
}
.personal {
  color-scheme: light;
  --void: #F6F2EA; --deep: #EEE7D9; --surface: #FFFDF8; --line: #D9CFBD;
  --accent: #A44C32; --text: #29251F; --muted: #675D50; --quiet: #8B7E6C;
  color: var(--text); background: var(--void);
}
.personal .page {
  background: linear-gradient(135deg, var(--void), var(--surface) 60%, var(--deep));
  padding-inline: clamp(1.5rem, 9vw, 8rem);
}
.personal main { width: min(100%, 52rem); margin-inline: auto; text-align: center; }
.personal main::before { margin-inline: auto; width: 1px; height: 4rem; }
.personal h1 { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.055em; }
.personal .description { margin-inline: auto; }
.personal footer { border-top-style: dashed; }
.personal ::selection { color: var(--void); }
.personal-net {
  --void: #06131A; --deep: #071B22; --surface: #0B2730; --line: #16404B;
  --accent: #67E0C0; --text: #E3F8F4; --muted: #A3C5BE; --quiet: #71958E;
  color-scheme: dark; color: var(--text); background: var(--void);
}
.personal-net .page {
  background: linear-gradient(90deg, var(--void) 0%, var(--deep) 100%);
  padding: clamp(1.25rem, 4vw, 3rem);
}
.personal-net header { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.personal-net main {
  border-left: 1px solid var(--accent); padding: 2rem clamp(1.25rem, 5vw, 4rem);
  margin-block: clamp(2rem, 10vh, 6rem); background: color-mix(in srgb, var(--surface) 58%, transparent);
}
.personal-net main::before { display: none; }
.personal-net h1 { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.045em; }
.personal-net footer { font-family: ui-monospace, 'IBM Plex Mono', Consolas, monospace; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
.page {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: radial-gradient(ellipse at 80% 20%, var(--surface), var(--deep) 55%, var(--void));
}
header, footer { color: var(--muted); font-size: .8125rem; line-height: 1.6; }
header { letter-spacing: .06em; overflow-wrap: anywhere; }
main { width: min(100%, 64rem); padding-block: clamp(4rem, 12vh, 9rem); align-self: center; }
main::before { content: ''; display: block; width: 3rem; height: 2px; background: var(--accent); margin-bottom: 2rem; }
h1 {
  font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-weight: 600; font-size: clamp(2rem, 5.5vw, 5rem); line-height: 1.16;
  letter-spacing: -.025em; margin: 0; text-wrap: balance; overflow-wrap: anywhere;
}
.description { max-width: 40rem; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.7; margin: 1.5rem 0 0; }
footer { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.status { margin: 0; display: flex; align-items: center; gap: .65rem; }
.status::before { content: ''; width: .375rem; height: .375rem; border-radius: 50%; background: var(--accent); flex: none; }
::selection { background: var(--accent); color: var(--void); }
@media (forced-colors: active) { main::before, .status::before { background: CanvasText; } }
