/* ==========================================================================
   Design system: "quiet personal page"
   - One column. One font. One accent colour.
   - No shadows, no borders, no cards, no decoration.
   - Hierarchy comes from type scale and whitespace alone.
   - Dark mode is opt-in via the OS, never a visible control.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-dark: #1e293b;     /* darkish blue */

  --text: #374151;        /* body   — gray-700 */
  --text-strong: #111827; /* headings / labels — gray-900 */
  --text-muted: #4b5563;  /* nav links — gray-600 */
  --text-faint: #6b7280;  /* footer — gray-500 */
  --accent: #2563eb;      /* blue-600 */
  --accent-hover: #1d4ed8; /* blue-700 */

  --measure: 42rem;       /* 672px single column */
  --gutter: 1.5rem;
}

/* --- reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  font-style: normal;
  font-synthesis: none;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- structure ------------------------------------------------------------ */

.page {
  flex: 1 1 auto;
}

.container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) 2rem;
}

/* --- navigation ----------------------------------------------------------- */

.nav {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__brand {
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.nav__brand:hover {
  opacity: 0.8;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem 1.5rem;
}

.nav__links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.nav__links a:hover {
  color: var(--text-strong);
}

.nav__links a[aria-current="page"] {
  color: var(--text-strong);
}

/* --- content -------------------------------------------------------------- */

.section + .section {
  margin-top: 2.5rem;
}

h1 {
  font-size: 1.5rem;   /* text-2xl */
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-strong);
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.25rem;  /* text-xl */
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-strong);
  margin: 0 0 1rem;
}

p {
  margin: 0 0 1rem;
  line-height: 1.625; /* leading-relaxed */
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

strong {
  color: var(--text-strong);
  font-weight: 600;
}

/* --- contact list --------------------------------------------------------- */

.contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact li + li {
  margin-top: 0.5rem; /* space-y-2 */
}

/* --- footer --------------------------------------------------------------- */

.footer {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 2rem;
  font-size: 0.75rem; /* text-xs */
  color: var(--text-faint);
}

/* --- dark mode ------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: var(--bg-dark);
    --text: #d4d4d4;        /* neutral-300 */
    --text-strong: #ffffff;
    --text-muted: #d4d4d4;
    --text-faint: #a3a3a3;  /* neutral-400 */
    --accent: #60a5fa;      /* blue-400 */
    --accent-hover: #93c5fd; /* blue-300 */
  }
}

/* --- motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* content links snapped while the nav eased; one timing now covers both */

  a {
    transition: color 150ms ease;
  }

  /* A page change no longer tears down and rebuilds. The page you are leaving
     holds still and the new one fades in on top of it, so the shared parts
     never move and a reload of the page you are already on is invisible. */

  @view-transition {
    navigation: auto;
  }

  /* keeps the page colour under everything if a gap ever appears */

  ::view-transition {
    background: var(--bg);
  }

  /* nothing animates the outgoing page, so identical content cannot blink */

  ::view-transition-old(root) {
    animation: none;
  }

  /* normal blending matters: the default additive blend brightens whatever
     the two pages have in common, which is what washed the nav out white. */

  ::view-transition-new(root) {
    animation: 150ms cubic-bezier(0.2, 0, 0, 1) both page-in;
    mix-blend-mode: normal;
  }
}

@keyframes page-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__brand,
  .nav__links a {
    transition: none;
  }
}