:root {
  --bg: #ffffff;
  --ink: #222222;
  --ink-strong: #181818;
  --muted: #8a8a8a;
  --accent: #7b68ee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e1e;
    --ink: #dadada;
    --ink-strong: #eaeaea;
    --muted: #888888;
    --accent: #a18bf0;
  }
}

* { box-sizing: border-box; }
::selection { background: var(--accent); color: var(--bg); }

html {
  background: var(--bg);
  color-scheme: light dark;
}
body {
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  min-height: 100dvh;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

h1 {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.95rem;
  margin: 2rem 0 2.5rem;
  color: var(--ink-strong);
}

.home {
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
  padding: 0.6rem 0.8rem;
  margin: -0.6rem -0.8rem;
}
.home:hover { color: var(--accent); }
.signature {
  display: block;
  width: 1.9rem;
  height: 1.4rem;
  background: currentColor;
  -webkit-mask: url('/assets/signature-t.png') no-repeat center / contain;
  mask: url('/assets/signature-t.png') no-repeat center / contain;
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
main > * { width: 100%; }
footer {
  margin-top: auto;
  padding-top: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.portals { display: flex; gap: 1.1rem; align-items: center; }
.portals a { color: var(--muted); display: inline-flex; }
.portals a:hover { color: var(--accent); }
.portals svg { display: block; width: 16px; height: 16px; }