:root {
  color-scheme: light dark;
  --bg: #f7f6f2;
  --fg: #1d1d1b;
  --muted: #6a6a64;
  --accent: #2e6b4c;
  --rule: #dcdbd4;
  --aura-1: #17a673;
  --aura-2: #0fa3b8;
  --aura-3: #3a7bd5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131312;
    --fg: #ebebe6;
    --muted: #9b9b94;
    --accent: #86c7a4;
    --rule: #2c2c29;
    --aura-1: #4ee6a0;
    --aura-2: #3fdcec;
    --aura-3: #74a7ff;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

h1 {
  margin: 0 0 0.75rem;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(2.75rem, 9vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 1.25rem;
  background: var(--accent);
  border-radius: 2px;
}

/* Hover aura around the heading, in the spirit of edge lighting: a ring of
   flowing colour hugging the word, with a soft bloom and ripples that pulse
   outward. script.js adds the .aura element and drives it from pointer
   movement via --glow (0-1), --push (how far the ring swells), --spin (colour
   flow) and --x/--y (the cursor, which the glow is weighted towards). */
h1 span {
  position: relative;
  display: inline-block;
}

.aura {
  --gap-y: 0.1em;  /* distance from the word to the ring */
  --gap-x: 0.35em;
  --room: 48px;    /* space around the ring for the bloom and ripples */
  position: absolute;
  inset: calc(-1 * (var(--gap-y) + var(--room))) calc(-1 * (var(--gap-x) + var(--room)));
  z-index: -1;
  pointer-events: none;
  opacity: var(--glow, 0);
  mask-image: radial-gradient(circle 160px at var(--x, 50%) var(--y, 50%),
    #000, rgb(0 0 0 / 0.45) 50%, rgb(0 0 0 / 0.1));
}

.aura-bloom {
  position: absolute;
  inset: 0;
  filter: blur(12px);
}

/* The ring itself: a gradient-filled capsule with its middle masked out,
   leaving a border of `padding` thickness. */
.aura::after,
.aura-bloom::before,
.aura-ripple {
  content: "";
  position: absolute;
  inset: calc(var(--room) - var(--push, 0px));
  padding: 2px;
  border-radius: 999px;
  background: conic-gradient(from var(--spin, 0deg),
    var(--aura-1), var(--aura-2), var(--aura-3), var(--aura-2), var(--aura-1));
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
}

.aura-bloom::before {
  padding: 8px;
}

.aura-ripple {
  animation: aura-ripple 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes aura-ripple {
  from { inset: var(--room); opacity: 0.9; }
  to { inset: calc(var(--room) - 36px); opacity: 0; }
}

.lede {
  margin: 1rem 0 2rem;
  max-width: 32rem;
  color: var(--muted);
  font-size: 1.15rem;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  overflow-x: visible;
}

nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

nav a:hover,
nav a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

nav svg { width: 1.1em; height: 1.1em; fill: currentColor; }

@media (max-width: 480px) {
  nav {
    flex-direction: column;
    align-items: stretch;
  }

  nav a {
    width: 100%;
    justify-content: center;
  }
}

footer {
  padding: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}