:root {
  --cream: #faf6f0;
  --paper: #ffffff;
  --ink: #2c2a26;
  --ink-soft: #5a564e;
  --accent: #3f5d54;      /* deep sage green */
  --accent-soft: #e7efe9;
  --gold: #b08d57;
  --line: #e6ddd0;
  --shadow: 0 10px 30px rgba(44, 42, 38, 0.08);
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  line-height: 1.65;
}

/* ---------- Candle video banner ----------
   Your looping candle video (public/video/candle-background.mp4, if you've
   added one — see public/video/README.txt) plays across a band at the very
   top of every page, in full view and unobscured by text. It fades gently
   into the normal page background at its bottom edge, and everything below
   it — the rest of every page — keeps its original plain, readable layout.
   If no video file is present, the banner just shows as a soft dark band,
   nothing breaks. */
.candle-banner {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(176, 141, 87, 0.35) 0%, rgba(176, 141, 87, 0) 55%),
    #1c1712;
}
.candle-banner .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.candle-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 20, 15, 0) 55%, var(--cream) 100%);
}
@media (max-width: 640px) {
  .candle-banner { height: 190px; }
}

h1, h2, h3, .display {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.2px;
}

a { color: var(--accent); }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 246, 240, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-nav .brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--accent);
  text-decoration: none;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.site-nav .links { display: flex; gap: 22px; }
.site-nav .links a {
  position: relative;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
  white-space: nowrap;
  padding-bottom: 4px;
}
.site-nav .links a:hover { color: var(--accent); }
.site-nav .links a.active {
  color: var(--accent);
  font-weight: 600;
}
.site-nav .links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.nav-audio-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--accent);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.nav-audio-btn:hover { background: var(--accent-soft); }
.nav-audio-btn.pulse { animation: audioPulse 1.7s ease-in-out infinite; }
@keyframes audioPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 93, 84, 0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(63, 93, 84, 0); }
}

/* ---------- Hero ----------
   The portrait overlaps up into the candle banner above it (like a cover
   photo + profile picture); the name, dates and tagline sit below on the
   plain page background, same as always, fully legible. */
.hero {
  position: relative;
  text-align: center;
  padding: 0 24px 40px;
}
.hero .portrait {
  position: relative;
  z-index: 1;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  margin: -120px auto 26px;
  box-shadow: var(--shadow);
  border: 6px solid var(--paper);
  background: var(--paper);
}
.hero h1 { font-size: 2.4rem; margin: 0 0 6px; }
.hero .dates { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 14px; }
.hero .tagline {
  max-width: 520px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Flickering flame ---------- */
.flame {
  display: inline-block;
  animation: flicker 2.2s ease-in-out infinite;
  transform-origin: center 85%;
}
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  25%      { transform: scale(1.06, 0.94) rotate(-3deg); opacity: 0.9; }
  50%      { transform: scale(0.95, 1.05) rotate(3deg); opacity: 1; }
  75%      { transform: scale(1.04, 0.96) rotate(-2deg); opacity: 0.94; }
}

/* ---------- Candle widget ---------- */
.candle-section {
  margin: 28px auto 0;
  max-width: 480px;
}
.candle-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.candle-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
}
.candle-btn:hover { background: #33473f; transform: translateY(-1px); }
.candle-btn:disabled {
  cursor: default;
  transform: none;
  background: linear-gradient(135deg, #c9a869, var(--gold));
  box-shadow: 0 0 0 5px rgba(176, 141, 87, 0.18), var(--shadow);
}
.candle-btn .flame { font-size: 1.05em; }
.candle-count { color: var(--ink-soft); font-size: 0.92rem; }

.candle-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 14px 18px;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.candle-wall:empty { display: none; padding: 0; border: none; }
.candle-wall .more {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-left: 4px;
  align-self: center;
}

/* ---------- Candle-lighting animation ----------
   A hand lights the same 🕯️ glyph used everywhere else on the site
   (dimmed until lit, then the dim filter just clears — no shape swap),
   burns in place for a moment, then drops into its spot on the wall.
   Everything here is inert until js/main.js adds/removes these classes. */
.stage-area {
  position: relative;
  width: 100%;
  height: 0;
  margin-bottom: 6px;
  overflow: visible;
}
/* Only takes up real space while the lighting animation is actually
   playing (js/main.js adds this class right before igniting and removes
   it once the flame has landed on the wall) — otherwise its own children
   are invisible anyway, so an idle box was just dead space between the
   tagline and the button. No transition here on purpose: the height
   snaps instantly to its final size, and js/main.js immediately scrolls
   the whole widget into view — a smooth *scroll* reads better than a
   smooth *box growing* when the point is "keep the animation on screen".
   172px is the tallest any element actually reaches (.stage-glow, whose
   own bottom+height puts its top edge 164px up from this box's bottom
   edge) plus a small 8px buffer — not a round number chosen for looks,
   but measured so the box hugs the animation instead of leaving empty
   space above it. */
.stage-area.active { height: 172px; }
.stage-flame {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translate(-50%, 0) scale(0.85);
  font-size: 34px;
  line-height: 1;
  opacity: 0;
  filter: grayscale(1) brightness(0.55);
  transition: filter 0.3s ease;
  z-index: 3;
}
.stage-flame.appear { animation: stageAppear 0.4s ease forwards; }
@keyframes stageAppear {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.55); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(0.85); }
}
.stage-flame.lit { filter: grayscale(0) brightness(1); opacity: 1; }
.stage-flame.flickering { animation: stageFlicker 2.2s ease-in-out infinite; }
@keyframes stageFlicker {
  0%, 100% { transform: translate(-50%, 0) scale(1) rotate(0deg); opacity: 1; }
  25%      { transform: translate(-50%, 0) scale(1.06, 0.94) rotate(-3deg); opacity: 0.9; }
  50%      { transform: translate(-50%, 0) scale(0.95, 1.05) rotate(3deg); opacity: 1; }
  75%      { transform: translate(-50%, 0) scale(1.04, 0.96) rotate(-2deg); opacity: 0.94; }
}
/* Passes IN FRONT of the "light a candle" button (z-index below the
   sticky nav's 20, above everything else) rather than through it, on
   its way down to the wall. 15 sampled points along a Bézier curve
   (not just a straight line) so the motion reads as one continuous
   swoop. */
.stage-flame.dropping {
  z-index: 15;
  animation: dropToWall var(--drop-duration, 1.8s) cubic-bezier(.32, 0, .67, 1) forwards;
}
@keyframes dropToWall {
  0%      { transform: translate(-50%, 0) scale(1.000) rotate(0deg); }
  4.17%   { transform: translate(calc(-50% + var(--p1x)), var(--p1y)) scale(0.998) rotate(-0.64deg); }
  8.33%   { transform: translate(calc(-50% + var(--p2x)), var(--p2y)) scale(0.991) rotate(-1.22deg); }
  12.5%   { transform: translate(calc(-50% + var(--p3x)), var(--p3y)) scale(0.981) rotate(-1.75deg); }
  16.67%  { transform: translate(calc(-50% + var(--p4x)), var(--p4y)) scale(0.967) rotate(-2.22deg); }
  20.83%  { transform: translate(calc(-50% + var(--p5x)), var(--p5y)) scale(0.950) rotate(-2.64deg); }
  25%     { transform: translate(calc(-50% + var(--p6x)), var(--p6y)) scale(0.930) rotate(-3.00deg); }
  29.17%  { transform: translate(calc(-50% + var(--p7x)), var(--p7y)) scale(0.907) rotate(-3.31deg); }
  33.33%  { transform: translate(calc(-50% + var(--p8x)), var(--p8y)) scale(0.883) rotate(-3.56deg); }
  37.5%   { transform: translate(calc(-50% + var(--p9x)), var(--p9y)) scale(0.858) rotate(-3.75deg); }
  41.67%  { transform: translate(calc(-50% + var(--p10x)), var(--p10y)) scale(0.831) rotate(-3.89deg); }
  45.83%  { transform: translate(calc(-50% + var(--p11x)), var(--p11y)) scale(0.803) rotate(-3.97deg); }
  50%     { transform: translate(calc(-50% + var(--p12x)), var(--p12y)) scale(0.775) rotate(-4.00deg); }
  54.17%  { transform: translate(calc(-50% + var(--p13x)), var(--p13y)) scale(0.747) rotate(-3.97deg); }
  58.33%  { transform: translate(calc(-50% + var(--p14x)), var(--p14y)) scale(0.719) rotate(-3.89deg); }
  62.5%   { transform: translate(calc(-50% + var(--p15x)), var(--p15y)) scale(0.692) rotate(-3.75deg); }
  66.67%  { transform: translate(calc(-50% + var(--p16x)), var(--p16y)) scale(0.667) rotate(-3.56deg); }
  70.83%  { transform: translate(calc(-50% + var(--p17x)), var(--p17y)) scale(0.643) rotate(-3.31deg); }
  75%     { transform: translate(calc(-50% + var(--p18x)), var(--p18y)) scale(0.620) rotate(-3.00deg); }
  79.17%  { transform: translate(calc(-50% + var(--p19x)), var(--p19y)) scale(0.600) rotate(-2.64deg); }
  83.33%  { transform: translate(calc(-50% + var(--p20x)), var(--p20y)) scale(0.583) rotate(-2.22deg); }
  87.5%   { transform: translate(calc(-50% + var(--p21x)), var(--p21y)) scale(0.569) rotate(-1.75deg); }
  91.67%  { transform: translate(calc(-50% + var(--p22x)), var(--p22y)) scale(0.559) rotate(-1.22deg); }
  95.83%  { transform: translate(calc(-50% + var(--p23x)), var(--p23y)) scale(0.552) rotate(-0.64deg); }
  100%    { transform: translate(calc(-50% + var(--tx)), var(--ty)) scale(0.55) rotate(0deg); }
}
.stage-flame.settle { z-index: 15; animation: settleBounce 0.34s ease-out forwards; }
@keyframes settleBounce {
  0%   { transform: translate(calc(-50% + var(--tx)), var(--ty)) scale(0.55, 0.4); }
  60%  { transform: translate(calc(-50% + var(--tx)), var(--ty)) scale(0.62, 0.62); }
  100% { transform: translate(calc(-50% + var(--tx)), var(--ty)) scale(0.55, 0.55); opacity: 0; }
}

.stage-glow {
  position: absolute;
  left: 50%;
  bottom: 90px;
  width: 74px;
  height: 74px;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 199, 110, 0.45) 0%, rgba(255, 199, 110, 0) 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
.stage-glow.on { opacity: 1; }

/* Hand + matchstick. Positioned using the matchstick-positioner tool —
   `.matchstick`'s left/top/width/rotate were tuned there. */
.hand-match {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translate(-150px, 6px) rotate(-34deg);
  opacity: 0;
  transform-origin: 30% 70%;
  z-index: 4;
}
.hand-match.enter { animation: handIn 0.68s cubic-bezier(.22,.7,.32,1) forwards; }
@keyframes handIn {
  0%   { opacity: 0; transform: translate(-150px, 6px) rotate(-34deg); }
  100% { opacity: 1; transform: translate(-52px, -9px) rotate(-16deg); }
}
.hand-match.exit { animation: handOut 0.6s ease-in forwards; }
@keyframes handOut {
  0%   { opacity: 1; transform: translate(-52px, -9px) rotate(-16deg); }
  100% { opacity: 0; transform: translate(-152px, -1px) rotate(-32deg); }
}
.hand-emoji { display: block; font-size: 32px; line-height: 1; transform: scaleX(-1); }
.matchstick {
  position: absolute;
  left: 22.2px;
  top: 14.2px;
  width: 38.5px;
  height: 3px;
  background: linear-gradient(90deg, #b98a4f, #d8b482);
  border-radius: 2px;
  transform: rotate(-16.3deg);
  transform-origin: 0% 50%;
}
.match-tip {
  position: absolute;
  right: -3px;
  top: -2.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7a3232;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.match-tip.burning {
  background: radial-gradient(circle, #fff6cf 0%, #ffc23c 45%, #e8791f 80%);
  box-shadow: 0 0 10px 3px rgba(255, 170, 60, 0.85);
}

.spark-flash {
  position: absolute;
  left: 50%;
  bottom: 96px;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffdf9e 55%, rgba(255,223,158,0) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.spark-flash.flash { animation: sparkFlash 0.32s ease-out forwards; }
@keyframes sparkFlash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(3.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
}

/* A newly-landed wall flame pops in with a little settle bounce instead
   of just appearing. */
.flame.landing { animation: none; transform: scale(0); }

/* ---------- Sections / cards ---------- */
section { padding: 36px 0; }
.card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 30px;
}
.section-title {
  font-size: 1.5rem;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ---------- Buttons / forms ---------- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.btn:hover { background: #33473f; }
.btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn.danger { background: #8a3b3b; }
.btn.danger:hover { background: #6f2f2f; }

label { display: block; font-size: 0.9rem; color: var(--ink-soft); margin: 14px 0 6px; }
input[type="text"], input[type="email"], textarea, input[type="password"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: #fffdfa;
}
textarea { min-height: 120px; resize: vertical; }
input[type="file"] { margin-top: 4px; }
.field-hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* ---------- Memories list ---------- */
.memory {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  display: flex;
  gap: 18px;
}
.memory:last-child { border-bottom: none; }
.memory .photo {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.memory .meta { font-size: 0.85rem; color: var(--gold); margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.memory .meta .name { color: var(--ink); font-weight: 600; }
.memory .msg { white-space: pre-wrap; }
.memory .when { font-size: 0.78rem; color: var(--ink-soft); margin-top: 6px; }

.type-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 10px;
}

select#entry-type {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: #fffdfa;
  color: var(--ink);
}

.status-msg { text-align: center; color: var(--ink-soft); padding: 20px 0; }

/* ---------- Gallery ----------
   Each section scrolls on its own — a fixed height with its own scrollbar,
   so paging through "Shared by Visitors" never carries you past "Family
   Curated" and vice versa. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding: 2px 8px 2px 2px;
  scroll-behavior: smooth;
}
.gallery-grid::-webkit-scrollbar { width: 8px; }
.gallery-grid::-webkit-scrollbar-track { background: transparent; }
.gallery-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.gallery-grid::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.gallery-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
  flex-direction: column;
}
.lightbox.open { display: flex; }
.lightbox .stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 1000px;
}
.lightbox img { max-width: 80vw; max-height: 74vh; border-radius: 8px; }
.lightbox .caption { color: #f2ede4; margin-top: 14px; text-align: center; }
.lightbox .counter { color: #cfc6b6; font-size: 0.82rem; margin-top: 6px; }
.lightbox .close { position: absolute; top: 20px; right: 28px; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; }
.lightbox .nav-arrow {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox .nav-arrow:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox .nav-arrow:disabled { opacity: 0.25; cursor: default; }

/* ---------- Admin ---------- */
.admin-tabs { display: flex; gap: 8px; margin: 22px 0 20px; border-bottom: 1px solid var(--line); }
.admin-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding: 10px 6px 12px;
  position: relative;
}
.admin-tab:hover { color: var(--accent); }
.admin-tab.active { color: var(--accent); font-weight: 600; }
.admin-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.admin-item { border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 16px; background: var(--paper); }
.admin-item .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--gold); margin-bottom: 6px; }
.admin-item .meta .name { color: var(--ink); font-weight: 600; }
.admin-item .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.gate { max-width: 360px; margin: 80px auto; text-align: center; }

/* ---------- Footer ---------- */
footer {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  padding: 40px 24px 60px;
}
footer .login-line { margin-top: 8px; }

@media (max-width: 640px) {
  .site-nav .container { flex-direction: column; gap: 10px; text-align: center; }
  .site-nav .brand { font-size: 1rem; }
  .nav-right { justify-content: center; }
  .site-nav .links { gap: 14px 16px; flex-wrap: wrap; justify-content: center; }

  .hero { padding: 0 18px 30px; }
  .hero h1 { font-size: 1.8rem; }
  .hero .portrait { width: 190px; height: 190px; margin: -95px auto 20px; }

  .card { padding: 22px 18px; }

  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; text-align: center; }

  .lightbox .stage { gap: 4px; }
  .lightbox .nav-arrow { width: 38px; height: 38px; font-size: 1.15rem; }
  .lightbox img { max-width: 74vw; }

  .gallery-grid { max-height: 380px; }

  /* Candle-lighting animation, scaled down together so the match still
     lands in the same relative spot on the flame. */
  .stage-area.active { height: 148px; } /* 140px measured reach (.stage-glow) + 8px buffer */
  .stage-flame { font-size: 29px; bottom: 54px; }
  .stage-glow { width: 62px; height: 62px; bottom: 78px; }
  .hand-match { bottom: 40px; }
  .hand-emoji { font-size: 27px; }
  .matchstick { left: 18.7px; top: 12px; width: 32.5px; }
  @keyframes handIn {
    0%   { opacity: 0; transform: translate(-112px, 5px) rotate(-34deg); }
    100% { opacity: 1; transform: translate(-44px, -8px) rotate(-16deg); }
  }
  @keyframes handOut {
    0%   { opacity: 1; transform: translate(-44px, -8px) rotate(-16deg); }
    100% { opacity: 0; transform: translate(-128px, -1px) rotate(-32deg); }
  }
}

@media (max-width: 560px) {
  .memory { flex-direction: column; }
  .memory .photo { width: 100%; height: 200px; }
}