:root {
  --cream: #FFF4DC;
  --ink: #2B2118;
  --ink-soft: #5A4A3A;
  --green: #2F7D4F;
  --green-dark: #1F5A37;
  --leaf: #7BC47F;
  --mint: #E9F4E4;
  --sun: #FFC93C;
  --orange: #C2410C;
  --orange-bright: #E8552B;
  --white: #FFFFFF;
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --page: 560px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--green); }
a:hover { color: var(--green-dark); }

h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: 0.01em; }

[hidden] { display: none !important; }

/* keep anchored sections clear of the sticky top bar */
section[id] { scroll-margin-top: 64px; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px max(20px, calc((100% - var(--page)) / 2 + 20px));
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--green);
}
.wordmark { font-family: var(--display); font-size: 22px; color: var(--cream); text-decoration: none; }
.topbar-links { display: flex; gap: 4px; }
.topbar-links a { color: var(--cream); font-weight: 800; padding: 12px 10px; text-decoration: none; }
.wordmark:hover, .topbar-links a:hover { color: var(--sun); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: var(--sun);
}
.hero > * { max-width: var(--page); }

.hero-art {
  position: relative;
  width: min(320px, 100%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-art .leaf { stroke: var(--green); stroke-width: 10; fill: none; stroke-linecap: round; }
.hero-art .mouth { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; }
.hero-art .big-one { font-family: var(--display); font-size: 78px; fill: var(--orange-bright); stroke: var(--ink); stroke-width: 3; }
.hero-art .dino { transform-box: fill-box; transform-origin: 50% 100%; animation: peek 3.2s ease-in-out infinite; }
.hero-art.roaring .dino { animation: roar 0.6s ease-out; }
.hero-art.roaring .egg { animation: wobble 0.5s ease-in-out; transform-box: fill-box; transform-origin: 50% 100%; }

.roar-bubble {
  position: absolute;
  top: 0;
  left: 4%;
  padding: 6px 12px;
  border: 3px solid var(--ink);
  border-radius: 16px 16px 16px 4px;
  background: var(--white);
  font-family: var(--display);
  font-size: 22px;
  color: var(--orange);
  opacity: 0;
  transform: scale(0.4) rotate(-8deg);
  transition: opacity 0.15s, transform 0.25s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.hero-art.roaring .roar-bubble { opacity: 1; transform: scale(1) rotate(-8deg); }

.hero h1 { font-size: clamp(42px, 13vw, 64px); line-height: 1; }
.hero-age { margin: 0; font-size: 19px; font-weight: 800; }
.one-badge { background: var(--orange); color: var(--white); padding: 2px 10px; border-radius: 8px; }
.hero-lede { margin: 0; max-width: 330px; }
.party-pill {
  margin: 0;
  padding: 8px 14px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--cream);
  font-weight: 800;
}
.sleeps { margin: 0; font-family: var(--display); font-size: 22px; }

.hero-actions { display: flex; gap: 12px; width: 100%; max-width: 420px; margin-top: 6px; }

.chunky-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  font-family: var(--display);
  font-size: 19px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.hero-actions .chunky-button { flex: 1 1 0; }
.chunky-button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.chunky-button.dark { background: var(--ink); color: var(--cream); box-shadow: 0 5px 0 var(--green); }
.chunky-button.orange { background: var(--orange); color: var(--white); box-shadow: 0 5px 0 var(--ink); }
.chunky-button.green { background: var(--green); color: var(--cream); box-shadow: 0 5px 0 var(--ink); }
.chunky-button.dark:hover { color: var(--sun); }
.chunky-button.orange:hover, .chunky-button.green:hover { color: var(--white); filter: brightness(1.08); }

/* footprints you leave by tapping the hero */
.stomp {
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
  animation: stomp-fade 1.6s ease-out forwards;
}

/* ---------- footprint trail ---------- */

.trail {
  max-width: var(--page);
  margin: 0 auto;
  padding: 40px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.trail h2 { font-size: 34px; }
.section-lede { margin: 0; }
.play-all { margin: 8px 0 18px; }

.timeline { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; }

.stop { display: flex; flex-direction: column; align-items: flex-start; }
.stop:nth-child(even) { align-items: flex-end; }
.stop:last-child { align-items: center; }

.polaroid {
  position: relative;
  width: min(270px, 78%);
  padding: 12px 12px 14px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(var(--tilt, -2deg));
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.3, 1.5, .5, 1);
}
.polaroid:hover, .polaroid:focus-visible { transform: rotate(0deg) scale(1.03); }
.polaroid:focus-visible { outline: 4px solid var(--orange); outline-offset: 4px; }
.polaroid.stacked::before,
.polaroid.stacked::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: var(--white);
  transform: rotate(5deg);
}
.polaroid.stacked::after { transform: rotate(-4deg) translate(-4px, 3px); background: var(--mint); }

.polaroid-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
  background: var(--mint);
}
.polaroid-photo.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--green);
  font-weight: 800;
  font-size: 15px;
}
.polaroid-photo.empty svg { width: 72px; height: 72px; }
.polaroid-caption { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.polaroid-title { font-family: var(--display); font-size: 21px; line-height: 1.15; }
.polaroid-meta { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.more-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  min-width: 44px;
  padding: 6px 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  font-weight: 800;
  font-size: 14px;
  text-align: center;
}

.footprints { display: block; width: 100%; max-width: 250px; height: 56px; margin: 4px auto; }
.footprints g { fill: var(--green); opacity: 0.5; }
.stop:last-child .footprints { display: none; }

/* ---------- roar wall ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.roar {
  padding: 40px max(20px, calc((100% - var(--page)) / 2 + 20px));
  background: var(--green);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.roar h2 { font-size: 34px; line-height: 1.05; }
.roar > p { margin: 0; }

.roar-form { display: flex; flex-direction: column; gap: 16px; }
.prompts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.prompt-chip { position: relative; cursor: pointer; }
.prompt-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.prompt-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 3px solid var(--cream);
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  transition: transform 0.15s;
}
.prompt-chip input:checked + span { background: var(--sun); border-color: var(--ink); color: var(--ink); transform: rotate(-2deg); }
.prompt-chip input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 3px; }

.roar-card-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.roar-card-form > label { font-weight: 800; font-size: 15px; }
.roar-card-form input[type="text"],
.roar-card-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px keeps iPhones from zooming in */
  resize: vertical;
}
.roar-card-form input[type="text"]:focus,
.roar-card-form textarea:focus { outline: 3px solid var(--sun); outline-offset: 1px; }

.media-buttons { display: flex; gap: 10px; }
.media-button { flex: 1 1 0; position: relative; }
.media-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 3px dashed var(--ink);
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.media-button input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.media-button:hover span { background: var(--mint); }

.media-preview { display: flex; align-items: center; gap: 12px; }
.media-preview-thing img,
.media-preview-thing video {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--mint);
}
.media-remove {
  min-height: 44px;
  padding: 0 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.turnstile:empty { display: none; }

.roar-submit {
  min-height: 56px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
}
.roar-submit:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.roar-submit:disabled { opacity: 0.7; cursor: wait; }

.upload-progress { height: 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--white); overflow: hidden; }
.upload-progress span { display: block; height: 100%; width: 0; background: var(--leaf); transition: width 0.2s; }
.roar-status { margin: 0; min-height: 1.5em; font-weight: 800; text-align: center; }
.roar-status.error { color: var(--orange); }

.wall-title { margin: 24px 0 0; font-family: var(--display); font-weight: 400; font-size: 28px; }
.wall { display: flex; flex-direction: column; gap: 18px; }
.wall-empty { margin: 0; font-weight: 800; }
.wall-more { align-self: center; }

.roar-note {
  --tilt: -1.5deg;
  padding: 16px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: var(--note, var(--cream));
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(var(--tilt));
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-wrap: anywhere;
}
.roar-note.fresh { animation: hatch-in 0.6s cubic-bezier(.3, 1.6, .5, 1); }
.roar-note-prompt {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  font-weight: 800;
}
.roar-note-message { margin: 0; font-size: 18px; line-height: 1.45; white-space: pre-line; }
.roar-note-media img,
.roar-note-media video {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: var(--mint);
}
.roar-note-from { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-weight: 800; }
.roar-note-from time { color: var(--ink-soft); font-size: 14px; }

/* the celebration after a successful roar */
.party-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.party-bit { position: absolute; width: 28px; height: 28px; animation: party-burst 1.4s cubic-bezier(.2, .7, .3, 1) forwards; }
.party-shout {
  position: absolute;
  left: 50%;
  top: 40%;
  padding: 10px 20px;
  border: 4px solid var(--ink);
  border-radius: 20px;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--display);
  font-size: 40px;
  transform: translate(-50%, -50%);
  animation: shout 1.6s ease-out forwards;
  white-space: nowrap;
}

/* ---------- footer ---------- */

.footer { padding: 28px 20px calc(36px + env(safe-area-inset-bottom)); text-align: center; }
.footer p { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); }

/* ---------- lightbox / slideshow ---------- */

.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lightbox::backdrop { background: rgba(31, 90, 55, 0.94); }
.lightbox-frame {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 64px 16px calc(24px + env(safe-area-inset-bottom));
}
.lightbox-polaroid {
  margin: 0;
  max-width: min(92vw, 640px);
  padding: 12px 12px 16px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(var(--tilt, -1.5deg));
}
.lightbox-polaroid.pop { animation: pop-in 0.35s cubic-bezier(.3, 1.5, .5, 1); }
.lightbox-polaroid img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 300px);
  margin: 0 auto;
  border-radius: 3px;
  touch-action: pan-y;
}
.lightbox-polaroid figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.lightbox-title { font-family: var(--display); font-size: 22px; line-height: 1.15; }
.lightbox-meta { font-size: 14px; font-weight: 700; color: var(--ink-soft); }

.lightbox-controls { display: flex; gap: 14px; }
.lightbox-controls button,
.lightbox-close {
  width: 56px;
  height: 56px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  font: 800 30px/1 var(--body);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
}
.lightbox-controls button:active, .lightbox-close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  width: 48px;
  height: 48px;
  font-size: 20px;
  background: var(--cream);
}

/* ---------- motion ---------- */

@keyframes peek { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-4px); } }
@keyframes roar { 0% { transform: translateY(6px) scale(1); } 40% { transform: translateY(-14px) scale(1.12); } 100% { transform: translateY(0) scale(1); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes stomp-fade { 0% { opacity: 0; transform: scale(1.6) rotate(var(--r)); } 15% { opacity: 0.8; transform: scale(1) rotate(var(--r)); } 100% { opacity: 0; transform: scale(1) rotate(var(--r)); } }
@keyframes hatch-in { from { opacity: 0; transform: scale(0.6) rotate(8deg); } }
@keyframes party-burst { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); opacity: 0; } }
@keyframes shout { 0% { transform: translate(-50%, -50%) scale(0.3) rotate(-10deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.1) rotate(-4deg); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1) rotate(-4deg); opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.9) rotate(4deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}