:root {
  --bg: #f7f6fb;
  --text: #18181b;
  --muted: #5f5f6b;
  --line: rgba(24, 24, 27, 0.1);
  --accent: #18181b;
  --blob-1: #c4b5fd;
  --blob-2: #93c5fd;
  --blob-3: #fbcfe8;
  --blob-opacity: 0.7;
  --name-from: #7c3aed;
  --name-to: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09090f;
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --line: rgba(255, 255, 255, 0.1);
    --accent: #f4f4f5;
    --blob-1: #6d28d9;
    --blob-2: #1d4ed8;
    --blob-3: #be185d;
    --blob-opacity: 0.45;
    --name-from: #c4b5fd;
    --name-to: #93c5fd;
  }
}

/* Animated background */
.bg {
  /* Bleed past the top and bottom so the background reaches behind the
     iPhone status bar and Safari's floating toolbar */
  --bleed: 15vh;
  position: fixed;
  top: calc(-1 * var(--bleed));
  left: 0;
  width: 100%;
  height: calc(100vh + 2 * var(--bleed));
  height: calc(100lvh + 2 * var(--bleed));
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}

/* At the very top and bottom of the page, Safari paints solid bars in the
   page colour behind the status bar and toolbar. These fades sit at the
   start and end of the document (not the viewport), so they blend into
   those bars there and scroll out of view everywhere else. Desktop browsers
   have no such bars, so this only applies to touch devices. */
@media (hover: none) and (pointer: coarse) {
  body {
    position: relative;
    min-height: 100vh;
  }

  body::before,
  body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    height: 90px;
    pointer-events: none;
  }

  body::before {
    top: 0;
    background: linear-gradient(to bottom, var(--bg), transparent);
  }

  body::after {
    bottom: 0;
    background: linear-gradient(to top, var(--bg), transparent);
  }
}

/* Soft edges come from a radial gradient rather than filter: blur(),
   which is too expensive to animate on phones */
.blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  margin: -7.5vmax;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--c), transparent);
  opacity: var(--blob-opacity);
  will-change: transform;
}

.b1 {
  --c: var(--blob-1);
  top: calc(-20vmax + var(--bleed));
  left: -15vmax;
  animation: drift-1 22s ease-in-out infinite alternate;
}

.b2 {
  --c: var(--blob-2);
  top: calc(10vmax + var(--bleed));
  right: -25vmax;
  animation: drift-2 28s ease-in-out infinite alternate;
}

.b3 {
  --c: var(--blob-3);
  bottom: calc(-30vmax + var(--bleed));
  left: 10vmax;
  animation: drift-3 25s ease-in-out infinite alternate;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift-1 {
  to { transform: translate(20vw, 15vh) scale(1.15); }
}

@keyframes drift-2 {
  to { transform: translate(-25vw, 20vh) scale(0.9); }
}

@keyframes drift-3 {
  to { transform: translate(15vw, -25vh) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .blob,
  main,
  .wave:hover {
    animation: none;
  }
}

.name {
  background: linear-gradient(90deg, var(--name-from), var(--name-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 120px max(24px, env(safe-area-inset-right)) 64px max(24px, env(safe-area-inset-left));
  animation: fade-in 0.6s ease-out both;
}

a {
  color: inherit;
  text-decoration: none;
}

h1 {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

h2 {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 24px;
}

.lead {
  font-size: 1.25rem;
  margin-top: 12px;
}

.lead a {
  font-weight: 500;
  border-bottom: 1px solid var(--muted);
  transition: border-color 0.2s;
}

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

.muted,
.list p {
  color: var(--muted);
}

.intro .muted {
  margin-top: 8px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  font-size: 0.95rem;
}

.links a {
  color: var(--muted);
  transition: color 0.2s;
}

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

.wave {
  display: inline-block;
  transform-origin: 70% 70%;
  cursor: default;
}

.wave:hover {
  animation: wave 1s ease-in-out infinite;
}

section {
  margin-top: 80px;
}

.list {
  list-style: none;
}

.list li {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.list li:last-child {
  border-bottom: 1px solid var(--line);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.title {
  font-weight: 500;
}

a.title .arrow {
  display: inline-block;
  color: var(--muted);
  font-size: 0.85em;
  transition: transform 0.2s, color 0.2s;
}

a.title:hover .arrow {
  color: var(--text);
  transform: translate(2px, -2px);
}

.date {
  color: var(--muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

.role {
  font-size: 0.95rem;
}

.list p {
  font-size: 0.95rem;
  margin-top: 6px;
}

.tags {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 10px;
}

footer {
  margin-top: 80px;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 480px) {
  main {
    padding: 72px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));
  }

  h1 {
    font-size: 1.85rem;
  }

  .row {
    flex-direction: column;
    gap: 2px;
  }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(14deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}