/* Base: modern, accessible */
:root {
  color-scheme: light dark;
  --brand-blue: oklch(60% 0.18 255); /* pleasant mid blue */
  --brand-blue-strong: oklch(40% 0.14 255); /* deep blue for dark surfaces */
  --near-white: oklch(98% 0.01 255); /* soft white (not #fff) */
  --near-black: oklch(20% 0.02 255); /* soft near-black for outlines */
  --surface: var(--near-white);
  --text: var(--brand-blue);
  --ring: color-mix(in oklab, var(--text), white 40%);
  --border: color-mix(in oklab, var(--text), white 55%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: var(--brand-blue-strong); /* blue background */
    --text: var(--near-white); /* white text */
    --ring: color-mix(in oklab, var(--text), black 40%);
    --border: color-mix(in oklab, var(--text), black 60%);
  }
}

/* Motion & focus */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
:where(:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 0.25rem;
}

/* Layout: center everything */
html,
body {
  height: 100%;
}
body {
  margin: 0;
  display: grid;
  place-items: center; /* perfectly center the content */
  background: var(--surface);
  color: var(--text);
  line-height: 1.5;
  /* font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji", sans-serif; */
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

main {
  text-align: center;
  padding: 2rem;
  max-width: 64ch;
}

/* Image: circular crop + subtle border */
main img {
  display: block;
  width: clamp(160px, 40vw, 360px); /* responsive size */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 9999px; /* circle */
  border: 3px solid var(--border);
  margin-inline: auto;
  box-shadow: 0 0.5rem 1.5rem rgba(0 0 0 / 0.15);
}

/* Links inherit color; keep visible focus */
a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, currentColor, transparent 60%);
  text-underline-offset: 0.2em;
}

/* Media hygiene */
img,
svg,
video,
canvas,
audio,
iframe {
  max-width: 100%;
  height: auto;
}

/* Higher-contrast users get a stronger border */
@media (prefers-contrast: more) {
  main img {
    border-width: 4px;
  }
}