:root {
  --bg: #0A0E1A;
  --ink: #E6E1D6;
  --ink-dim: #9E9A91;
  --red: #7A1420;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bg) radial-gradient(900px 520px at 50% 0, #151d33, transparent) no-repeat; color: var(--ink); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; height: auto; image-rendering: auto; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; }

a { color: var(--red); text-underline-offset: 0.15em; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* nav */
.nav { display: flex; gap: 0.25rem; padding: 0.75rem 1rem; }
.nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 0.6rem 0.75rem;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}
.nav a[aria-current="page"] { color: var(--red); text-decoration: underline; }

/* home */
.home { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 1.5rem 12vh; }
.home h1 { font-size: clamp(3.5rem, 16vw, 9rem); font-weight: 300; letter-spacing: -0.02em; }
.home p { margin: 0.75rem 0 0 0.2rem; color: var(--ink-dim); max-width: 34ch; }
.js .home h1 span { display: inline-block; opacity: 0; animation: arrive 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) forwards; animation-delay: calc(var(--i) * 80ms); }
.js .home p { opacity: 0; animation: arrive 1s ease-out 1s forwards; }
@keyframes arrive { from { opacity: 0; transform: translateY(0.25em); } to { opacity: 1; transform: none; } }

/* drawings */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  align-items: start;
}
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.grid button { all: unset; cursor: pointer; display: block; min-width: 44px; min-height: 44px; }
.grid button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.grid img { width: 100%; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.grid .wide { grid-column: span 2; }
.grid .tall img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 55%; }
.grid .gift { padding: 10%; }

dialog {
  border: 0; padding: 0; background: transparent; margin: auto;
  max-width: 100vw; max-height: 100dvh; overflow: visible;
}
dialog::backdrop { background: rgba(10, 14, 26, 0.94); transition: background 0.5s ease; }
@starting-style { dialog[open]::backdrop { background: rgba(10, 14, 26, 0); } }
dialog.closing::backdrop { background: rgba(10, 14, 26, 0); }
body:has(dialog[open]) { overflow: hidden; }
dialog img { transition: transform 0.5s cubic-bezier(0.3, 0, 0.15, 1); will-change: transform; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7); }
dialog > button { position: fixed; top: 0; right: 0; }
dialog button {
  all: unset; cursor: pointer; color: var(--ink);
  min-width: 44px; min-height: 44px; padding: 0.5rem 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
dialog button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

/* about */
.about section { padding: 3rem 1.5rem; max-width: 64rem; margin: 0 auto; width: 100%; }
.about h2 { font-size: 2rem; margin-bottom: 1rem; }
.about p { max-width: 62ch; }
.prose { font-size: 1.15rem; }

.opening { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 720px) { .opening { grid-template-columns: 1fr auto; } }
.opening img { max-width: 100%; }

.bowls { text-align: center; padding-block: 5rem; }
.bowls blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.75rem, 6vw, 3.25rem); line-height: 1.2; }
.bowls p { margin: 2rem auto 0; color: var(--ink-dim); }

.sound .big { font-size: clamp(3.5rem, 18vw, 9rem); font-weight: 300; letter-spacing: -0.02em; }
.sound .sub { margin-top: -0.25rem; color: var(--ink-dim); }

.watching { border-top: 1px solid #1a1f2e; border-bottom: 1px solid #1a1f2e; }
.watching ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
@media (min-width: 720px) { .watching ul { columns: 3; } }
.watching li { break-inside: avoid; padding: 0.35rem 0; font-family: var(--serif); font-size: 1.35rem; }
.watching p { margin-top: 2rem; color: var(--ink-dim); }

.loves ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.loves li { padding: 0.55rem 0.95rem; border: 1px solid #2a3044; border-radius: 999px; font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.loves .tanja { margin-top: 2.5rem; font-family: var(--serif); font-size: 1.5rem; }

.nots { padding-block: 1rem 3rem; }
.nots p { color: var(--ink-dim); }


@media (prefers-reduced-motion: reduce) {
  dialog img, dialog::backdrop { transition: none; }
  .js .home h1 span, .js .home p { animation: none; opacity: 1; }
}

/* scatter: photographs spread on a table, not a gallery wall */
html { overflow-x: clip; }
.grid button { position: relative; touch-action: manipulation; transform: rotate(var(--r, 0deg)) scale(calc(var(--s, 1) * var(--g, 1))) translate(var(--x, 0), var(--y, 0)); }
.grid button:nth-child(5n+1) { --r: -3deg; }
.grid button:nth-child(5n+2) { --r: 2deg; }
.grid button:nth-child(5n+3) { --r: -1.5deg; }
.grid button:nth-child(5n+4) { --r: 4deg; }
.grid button:nth-child(5n)   { --r: -2.5deg; }
.grid button:nth-child(3n+1) { --s: 0.92; }
.grid button:nth-child(3n)   { --s: 0.96; }
@media (min-width: 600px) {
  .grid { gap: 0.25rem 0.5rem; }
  .grid button:nth-child(3n+2) { --s: 1.1; }
  .grid button:nth-child(4n+1) { --y: 6%; }
  .grid button:nth-child(4n+3) { --y: -5%; --x: 4%; }
  .grid button:nth-child(7n+2) { --x: -5%; }
}

/* the gift drawing: grows on double-tap, then turns over */
.grid .gift { z-index: 1; transition: transform 0.4s cubic-bezier(0.3, 0, 0.15, 1); }
.grid img { transition: opacity 0.8s ease; }
.grid .gone img { opacity: 0; }
.grid .letter {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--serif); font-size: clamp(4.5rem, 18vw, 8rem); color: var(--red); opacity: 0;
}
.grid .letter.on { animation: flash 0.5s ease forwards; }
@keyframes flash { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } }
body.revealing { overflow: hidden; }
.revealing .grid { pointer-events: none; }

#stage { position: fixed; inset: 0; z-index: 10; perspective: 1400px; touch-action: none; }
#card {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--w);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) rotateY(0deg);
  transform-style: preserve-3d;
  transition: left 0.9s, top 0.9s, width 0.9s, transform 0.9s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#card.flipped { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) rotateY(180deg); transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
#card .front { width: 100%; max-width: none; backface-visibility: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7); }
#card .back {
  position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden;
  overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
  padding: 1.5rem 1.25rem; color: var(--ink);
  background: #16131b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
}
#card .back p { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.8; }
#card .back a { font-size: 0.9rem; }
#card.done { transform-style: flat; transform: translate(-50%, -50%); transition: none; }
#card.done .front { visibility: hidden; }
#card.done .back { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .grid .gift, .grid img, #card { transition: none; }
  .grid .letter.on { animation: none; }
}