:root {
  --bg: #FAF7F2;
  --ink: #2B2724;
  --muted: #5E5650;
  --tile: #F2ECE3;
  --tile-hover: #EDE4D8;
  --terracotta: #D98B6A;
  --games: #F6E4DA;
  --games-hover: #F1D8CA;
  --photo: #E6EBDF;
  --photo-hover: #DAE2D1;
  --book: #F6EBD2;
  --book-hover: #F1E0BC;
  --writing: #E4E8EF;
  --writing-hover: #D7DDE7;

  /* One spacing scale for the whole site. */
  --space-s: 12px;
  --space-m: 24px;
  --space-l: 48px;
  --space-xl: 72px;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Jost", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(32px, 7vh, 72px) 24px var(--space-l);
}

.intro h1 {
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-l);
}

.intro p {
  font-size: clamp(1.125rem, 2vw, 1.35rem);
  color: var(--muted);
}

.intro p + p { margin-top: var(--space-s); }

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-top: var(--space-xl);
}

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

.tile {
  position: relative;
  min-height: 176px;
  padding: 60px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 20px;
  background: var(--tile);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.tile:hover { background: var(--tile-hover); transform: translateY(-2px); }

.tile.games { background: var(--games); }
.tile.games:hover { background: var(--games-hover); }
.tile.photo { background: var(--photo); }
.tile.photo:hover { background: var(--photo-hover); }
.tile.book { background: var(--book); }
.tile.book:hover { background: var(--book-hover); }
.tile.writing { background: var(--writing); }
.tile.writing:hover { background: var(--writing-hover); }
.tile:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.tile h2 {
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.tile p { color: var(--muted); max-width: 40ch; text-wrap: pretty; }

.arrow {
  position: absolute;
  top: 28px;
  right: 28px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.tile:hover .arrow { transform: translate(2px, -2px); }

/* Hover swap: the old text leaves first, then the new content arrives, so the two never overlap.
   Transitions on the resting state run when the mouse leaves; the ones under :hover run when it enters. */
.tile {
  --swap-out: 120ms;
  --swap-in: 220ms;
}

.tile > h2, .tile > p,
.tile-text > h2, .tile-text > p {
  transition: opacity var(--swap-in) ease var(--swap-out), transform var(--swap-in) ease var(--swap-out);
}

.tile-hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  transition: opacity var(--swap-out) ease;
  pointer-events: none;
}

.tile-hover-title {
  font-size: 1.9rem;
  font-weight: 400;
  transform: translateY(6px);
  transition: transform var(--swap-out) ease;
}

.tile-art {
  display: block;
  width: auto;
  height: 76px;
  transform: translateY(10px) scale(0.94);
  transition: transform var(--swap-out) ease;
}

.tile-art-photo { width: 76px; border-radius: 50%; object-fit: cover; }

/* Picture tiles (games page): the text swaps to a "Play …" label on hover. */
.tile-text { position: relative; }

.tile-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  line-height: 1.6;
  font-size: 1.6rem;
  font-weight: 400;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--swap-out) ease, transform var(--swap-out) ease;
  pointer-events: none;
}

@media (hover: hover) {
  /* Out: quick, no delay. */
  .tile.flip:hover > h2, .tile.flip:hover > p,
  .tile.flip:focus-visible > h2, .tile.flip:focus-visible > p,
  .tile:hover .tile-text > h2, .tile:hover .tile-text > p,
  .tile:focus-visible .tile-text > h2, .tile:focus-visible .tile-text > p {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--swap-out) ease, transform var(--swap-out) ease;
  }

  /* In: starts once the old text has gone. */
  .tile:hover .tile-hover, .tile:focus-visible .tile-hover,
  .tile:hover .tile-play, .tile:focus-visible .tile-play {
    opacity: 1;
    transform: none;
    transition: opacity var(--swap-in) ease var(--swap-out), transform var(--swap-in) ease var(--swap-out);
  }

  .tile:hover .tile-hover-title, .tile:hover .tile-art,
  .tile:focus-visible .tile-hover-title, .tile:focus-visible .tile-art {
    transform: none;
    transition: transform 260ms ease var(--swap-out);
  }
}

.tile.has-image { padding-top: 0; overflow: hidden; }

/* Picture tiles lift as one piece on hover: the color stays put, the shadow wraps the whole card,
   and the picture zooms in slightly so the top moves too. */
.tile.has-image:hover,
.tile.has-image:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 2px 6px rgba(94, 70, 55, 0.08), 0 16px 36px -10px rgba(94, 70, 55, 0.28);
}

.tile.games.has-image:hover { background: var(--games); }

.tile.has-image .tile-image { transition: transform 0.4s ease; }
.tile.has-image:hover .tile-image,
.tile.has-image:focus-visible .tile-image { transform: scale(1.04); }
.tile.has-image .arrow { top: auto; bottom: 28px; }

.tile-image {
  display: block;
  width: calc(100% + 56px);
  margin: 0 -28px 24px;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
}

.footer {
  display: flex;
  gap: 24px;
  margin-top: var(--space-l);
}

.footer a {
  display: block;
  color: var(--ink);
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer a:hover { color: var(--terracotta); transform: translateY(-2px); }
.footer a:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; border-radius: 4px; }

.footer svg { display: block; width: 30px; height: 30px; fill: currentColor; }

.back {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.back:hover { color: var(--ink); }

.back { display: inline-block; margin-bottom: var(--space-m); }

@media (prefers-reduced-motion: reduce) {
  /* !important so these beat the more specific :hover transition rules. */
  .tile, .tile *, .footer a { transition: none !important; }
  .tile:hover, .tile.has-image:hover, .tile:hover .arrow, .tile:hover .tile-image, .footer a:hover { transform: none; }
}