/* ---------------------------------------------------------------
   Winifred Drummond — Memorial Website
   Palette: sage green #87A878, soft gold #C9A84C, cream, charcoal
   Type:    Playfair Display (headings/names), Lato (body)
----------------------------------------------------------------- */

:root {
  /* =============================================================
     THEME PALETTE — swap these to re-theme the entire site.
     To use an alternative palette, change only the values below;
     every component reads from these variables.
     ============================================================= */

  /* Primary accent (currently sage green). Provide the base hue as
     RGB channels so transparent tints can be derived from it. */
  --primary-rgb: 135, 168, 120;          /* #87A878 sage green */
  --primary: rgb(var(--primary-rgb));
  --primary-deep: #6f8f62;               /* darker shade of --primary */
  --primary-border: rgba(var(--primary-rgb), 0.6); /* subtle border tint */
  --primary-veil: rgba(var(--primary-rgb), 0.38);   /* translucent tint, e.g. candle backdrop */

  /* Secondary accent (currently soft gold). */
  --secondary: #C9A84C;
  --secondary-soft: #d8bd71;

  /* Neutrals */
  --cream: #faf6ee;
  --cream-deep: #f1e9da;
  --charcoal: #33312e;
  --charcoal-soft: #5a564f;
  --white: #fffdf9;

  /* =============================================================
     Semantic aliases — components reference these. Keep them
     pointing at the palette above; no need to edit when re-theming.
     ============================================================= */
  --sage: var(--primary);
  --sage-deep: var(--primary-deep);
  --gold: var(--secondary);
  --gold-soft: var(--secondary-soft);

  --shadow: rgba(51, 49, 46, 0.08);
  --shadow-deep: rgba(51, 49, 46, 0.16);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  color: var(--charcoal);
  background-color: var(--cream);
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.2;
}

a {
  color: var(--sage-deep);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--gold);
}

img {
  max-width: 100%;
  display: block;
}

/* ---------------------------------------------------------------
   Navigation
----------------------------------------------------------------- */

.site-nav {
  background-color: var(--white);
  border-bottom: 1px solid var(--cream-deep);
  padding: 1.4rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.nav-brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--charcoal);
}

.nav-brand:hover {
  color: var(--charcoal);
}

/* Home page: no brand, so centre the links */
.nav-inner--links-only {
  justify-content: center;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
}

.nav-links a {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--gold);
  transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--charcoal);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--charcoal);
  line-height: 1;
}

/* ---------------------------------------------------------------
   Layout helpers
----------------------------------------------------------------- */

main {
  flex: 1 0 auto;
  width: 100%;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: 5rem 0;
}

.section-tight {
  padding: 3.5rem 0;
}

.page-header {
  text-align: center;
  padding: 4.5rem 2rem 2.5rem;
}

.page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: 0.01em;
}

.page-header .eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 1rem;
}

.divider {
  width: 64px;
  height: 1px;
  background-color: var(--gold);
  border: none;
  margin: 1.6rem auto;
}

.divider-ornament {
  text-align: center;
  color: var(--gold);
  font-size: 1.2rem;
  letter-spacing: 0.5rem;
  margin: 1.6rem 0;
  user-select: none;
}

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

.hero {
  text-align: center;
  padding: 4.5rem 2rem 5rem;
  background:
    radial-gradient(ellipse at top, var(--white), var(--cream) 70%);
}

.portrait-frame {
  position: relative;
  width: 300px;
  height: 340px;
  margin: 0 auto 2.5rem;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 12px 40px var(--shadow-deep);
  border: 6px solid var(--gold);
  outline: 1px solid var(--cream-deep);
}

.portrait-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-frame .portrait-colour {
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
}

.portrait-frame.revealed .portrait-colour {
  opacity: 1;
}

.portrait-hint {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--charcoal-soft);
  opacity: 0.75;
  margin-bottom: 3rem;
  transition: opacity 0.6s ease;
}

.portrait-hint.hidden {
  opacity: 0;
}

.memorial-name {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
  color: var(--sage);
}

.memorial-dates {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 1.8rem;
}

.memorial-tagline {
  max-width: 30rem;
  margin: 0 auto;
  font-size: 1.1rem;
  color: var(--charcoal-soft);
  font-weight: 300;
}

/* Home page nav cards */
.home-links {
  background-color: var(--cream-deep);
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

/* Each card grows to share the row equally, so the grid auto-balances
   to however many pages the family chooses to include (4, 5, 6 …). */
.nav-card {
  flex: 1 1 140px;
  background-color: var(--white);
  padding: 1.8rem 1.2rem;
  text-align: center;
  border: 2px solid var(--primary-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px var(--shadow);
  border-color: var(--sage);
}

.nav-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.55rem;
}

.nav-card p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
}

/* ---- Spotify remembrance song ---- */
.music-section {
  text-align: center;
}

.music-section .eyebrow-centered {
  margin-bottom: 1.6rem;
}

.music-embed {
  max-width: 540px;
  margin: 0 auto;
}

.music-embed iframe {
  display: block;
  width: 100%;
}

/* ---------------------------------------------------------------
   Story / prose
----------------------------------------------------------------- */

.prose p {
  font-size: 1.12rem;
  margin-bottom: 1.6rem;
  color: var(--charcoal);
}

.prose p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 3.4rem;
  float: left;
  line-height: 0.8;
  padding: 0.1em 0.12em 0 0;
  color: var(--sage-deep);
}

.story-portrait {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 2.5rem;
  box-shadow: 0 10px 30px var(--shadow);
  border: 5px solid var(--white);
  outline: 1px solid var(--cream-deep);
}

.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  text-align: center;
  color: var(--sage-deep);
  margin: 3rem auto;
  max-width: 34rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   Gallery
----------------------------------------------------------------- */

/* Masonry "gallery wall" — CSS multi-column so images of differing
   natural heights tile together with varying sizes. */
/* Self-arranging masonry. Photos keep their natural proportions (never
   cropped) and flow in automatically, however many there are. A small
   script measures each photo and assigns it the right number of grid rows,
   so tall portraits and short landscapes sit together neatly with no gaps.
   The tiny grid-auto-rows value is the unit the script counts in. */
.gallery-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 8px;
  gap: 1.3rem;
}

/* Occasional wider "feature" photo for size variety (kept off small
   screens, where there isn't room for a double-width tile).
   Scoped to .gallery-wall so it doesn't add a second wide tile to the
   paginated gallery, where only the per-page hero should be enlarged. */
@media (min-width: 761px) {
  .gallery-wall .gallery-item:nth-child(7n + 1) { grid-column: span 2; }
}

@media (max-width: 760px) {
  .gallery-wall { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 430px) {
  .gallery-wall { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Option A — continuous column masonry. Photos keep their natural
   proportions (never cropped) and pack down columns to fill a tall
   rectangle. The bottoms of the columns may not line up perfectly
   (a little ragged space here and there), which is the trade-off
   for never cropping.
----------------------------------------------------------------- */
.gallery-columns {
  column-count: 4;
  column-gap: 1.3rem;
}

@media (max-width: 1100px) { .gallery-columns { column-count: 3; } }
@media (max-width: 760px)  { .gallery-columns { column-count: 2; } }
@media (max-width: 430px)  { .gallery-columns { column-count: 1; } }

.gallery-columns .gallery-item {
  break-inside: avoid;          /* never split a photo across columns */
  -webkit-column-break-inside: avoid;
  margin: 0 0 1.3rem;
}

.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--cream-deep);
  box-shadow: 0 6px 20px var(--shadow);
  transition: box-shadow 0.4s ease;
}

/* Natural proportions — no cropping. Width fills the column; height follows
   the photo's own shape. */
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s ease;
}

/* Gentle zoom on hover within the framed tile. */
.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.06);
}

.gallery-item:hover {
  box-shadow: 0 14px 34px var(--shadow-deep);
}

.gallery-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Gallery — paginated masonry. Each page is its own self-arranging
   masonry: one larger "hero" photo top-left, the rest flowing in at
   their natural proportions (never cropped). Arrows turn the pages,
   so the gallery's footprint stays tidy however many photos there are.
   script.js builds the pages from the .carousel-source list and
   measures each photo to assign its grid-row span.
----------------------------------------------------------------- */

.gallery-paged {
  position: relative;
}

.gallery-pages {
  position: relative;
}

/* Each page is a masonry grid in its own right. Photos keep their
   natural shape; the script measures heights and sets the row span. */
.gallery-page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 8px;
  gap: 1.3rem;
}

/* Only the active page is shown; the others stay in the DOM (so the
   lightbox can bind to every photo) but are hidden. */
.gallery-page:not(.is-active) {
  display: none;
}

/* The hero: first photo on each page spans two columns for a gentle
   emphasis. Kept off small screens, where there isn't room for a
   double tile. */
@media (min-width: 761px) {
  .gallery-page .gallery-item:nth-child(1) { grid-column: span 2; }

  /* Keep the hero a tasteful "feature" size rather than letting it tower.
     The cap only affects unusually tall heroes (a portrait); shorter
     landscape or square heroes stay fully uncropped. */
  .gallery-page .gallery-item:nth-child(1) img {
    max-height: 460px;
    object-fit: cover;
    object-position: center 22%;
  }
}

@media (max-width: 760px) {
  .gallery-page { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 430px) {
  .gallery-page { grid-template-columns: 1fr; }
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 2.2rem;
}

.carousel-controls.is-hidden {
  display: none;
}

.carousel-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--primary-border);
  background: var(--white);
  color: var(--sage-deep);
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease,
    box-shadow 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 4px 14px var(--shadow);
}

.carousel-arrow:hover:not([disabled]) {
  background: var(--sage);
  color: var(--white);
  box-shadow: 0 8px 22px var(--shadow-deep);
}

.carousel-arrow[disabled] {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

.carousel-status {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--charcoal-soft);
  letter-spacing: 0.1em;
  min-width: 3.5rem;
  text-align: center;
}

/* ---------------------------------------------------------------
   Lightbox — click any photo to enlarge. Colourisable photos
   gently bloom from black & white into colour once enlarged.
----------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(26, 24, 21, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-stage {
  position: relative;
  margin: 0;
  max-width: 92vw;
  max-height: 88vh;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  border: 5px solid var(--white);
  transform: scale(0.96);
  transition: transform 0.35s ease;
}

.lightbox.open .lightbox-stage {
  transform: scale(1);
}

.lightbox-stage img {
  display: block;
}

.lightbox-bw {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
}

.lightbox-colour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
}

.lightbox-stage.bloom .lightbox-colour {
  opacity: 1;
}

.lightbox-close {
  position: absolute;
  top: 1.4rem;
  right: 1.8rem;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 2rem;
  line-height: 1;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.lightbox-close:hover {
  background: var(--gold);
  color: var(--charcoal);
}

.gallery-item .gallery-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(51, 49, 46, 0.55));
  color: var(--white);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.6rem 1rem 0.9rem;
  pointer-events: none;
}

.gallery-note {
  text-align: center;
  color: var(--charcoal-soft);
  font-style: italic;
  font-family: var(--serif);
  margin-bottom: 2.5rem;
}

/* ---------------------------------------------------------------
   Memories / forms
----------------------------------------------------------------- */

.memory-form {
  background-color: var(--white);
  padding: 2.8rem;
  border: 1px solid var(--cream-deep);
  box-shadow: 0 10px 30px var(--shadow);
  margin-bottom: 3.5rem;
}

.form-group {
  margin-bottom: 1.6rem;
}

.form-group label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--charcoal);
  background-color: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(135, 168, 120, 0.15);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--sage);
  border: none;
  border-radius: 2px;
  padding: 0.9rem 2.4rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: var(--sage-deep);
  color: var(--white);
  transform: translateY(-1px);
}

.form-feedback {
  margin-top: 1.2rem;
  font-style: italic;
  font-family: var(--serif);
  color: var(--sage-deep);
  min-height: 1.4rem;
}

.memories-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.memory-card {
  background-color: var(--white);
  border-left: 3px solid var(--gold);
  padding: 1.8rem 2rem;
  box-shadow: 0 4px 16px var(--shadow);
}

.memory-card .memory-text {
  font-size: 1.08rem;
  font-style: italic;
  font-family: var(--serif);
  color: var(--charcoal);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.memory-card .memory-author {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.memory-card .memory-relation {
  color: var(--charcoal-soft);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

/* ---------------------------------------------------------------
   Funeral / service details
----------------------------------------------------------------- */

.detail-block {
  background-color: var(--white);
  border: 1px solid var(--cream-deep);
  padding: 2.4rem;
  margin-bottom: 1.6rem;
  box-shadow: 0 6px 20px var(--shadow);
}

.detail-block h3 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
  color: var(--sage-deep);
}

.detail-block .detail-label {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.detail-block p {
  color: var(--charcoal);
  margin-bottom: 0.4rem;
}

.detail-block .detail-meta {
  color: var(--charcoal-soft);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------
   Candle lighting
----------------------------------------------------------------- */

.candle-intro {
  max-width: 32rem;
  margin: 1.4rem auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
}

.candle-stage {
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* Scene holds a soft, themeable tinted oval behind the candle so the
   white wax lifts off the cream background. The veil colour follows the
   site's primary colour, so it re-tints automatically when re-themed. */
.candle-scene {
  position: relative;
  display: inline-block;
  margin: 3.5rem auto 0;
}

.candle-scene::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 390px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 46%,
    var(--primary-veil) 0%,
    rgba(var(--primary-rgb), 0.2) 58%,
    rgba(var(--primary-rgb), 0.12) 88%,
    rgba(var(--primary-rgb), 0.08) 100%
  );
  border: 1px solid var(--primary);
  z-index: 0;
  pointer-events: none;
}

/* The candle is the clickable element */
.candle {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 250px;
  margin: 0 auto;
  cursor: pointer;
  outline: none;
}

.candle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 10px;
  border-radius: 6px;
}

/* Wax body */
.candle-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 230px;
  background: linear-gradient(
    90deg,
    #e8e0d0 0%,
    #fffdf9 38%,
    #fbf6ec 60%,
    #e6ddcb 100%
  );
  border-radius: 10px 10px 8px 8px / 18px 18px 10px 10px;
  box-shadow:
    inset -10px 0 18px rgba(51, 49, 46, 0.08),
    inset 10px 0 18px rgba(255, 255, 255, 0.6),
    0 20px 34px rgba(51, 49, 46, 0.14);
}

/* Rounded wax rim at the top */
.candle-body::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 4px;
  right: 4px;
  height: 18px;
  background: radial-gradient(ellipse at 50% 40%, #fffdf9, #e4dbc9);
  border-radius: 50%;
}

/* A gentle pool of melted wax / warm light on top once lit */
.candle-body::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 196, 102, 0), rgba(255, 196, 102, 0));
  transition: background 1.4s ease;
}

.candle.lit .candle-body::after {
  background: radial-gradient(ellipse at center, rgba(255, 196, 102, 0.55), rgba(255, 196, 102, 0) 70%);
}

/* Wick */
.wick {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 16px;
  background: linear-gradient(to bottom, #2c2620, #5a4d3c);
  border-radius: 2px;
  z-index: 2;
}

.candle.lit .wick {
  background: linear-gradient(to bottom, #1c1813, #6b4a25);
}

/* Flame group — grows and fades in slowly when lit */
.flame-wrap {
  position: absolute;
  top: -78px;
  left: 50%;
  width: 44px;
  height: 96px;
  transform: translateX(-50%) scaleY(0.18);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.candle.lit .flame-wrap {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}

/* Warm halo of light */
.glow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 190px;
  background: radial-gradient(
    ellipse at 50% 72%,
    rgba(255, 198, 104, 0.5) 0%,
    rgba(255, 168, 64, 0.18) 38%,
    rgba(255, 150, 40, 0) 70%
  );
  filter: blur(3px);
}

/* Outer flame — warm teardrop */
.flame {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 26px;
  height: 72px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background: linear-gradient(
    to top,
    #ffe39a 0%,
    #ffc24d 28%,
    #ff9a33 62%,
    #ff7d1e 84%,
    rgba(255, 110, 20, 0) 100%
  );
  border-radius: 50% 50% 50% 50% / 68% 68% 40% 40%;
  box-shadow: 0 -2px 16px rgba(255, 150, 50, 0.55);
}

/* Inner brighter core */
.flame-inner {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 13px;
  height: 42px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background: linear-gradient(
    to top,
    #fffdf4 0%,
    #fff0c2 45%,
    rgba(255, 224, 150, 0) 100%
  );
  border-radius: 50% 50% 50% 50% / 64% 64% 42% 42%;
}

/* Continuous gentle flicker once lit */
.candle.lit .flame {
  animation: flame-flicker 1.7s ease-in-out infinite;
}

.candle.lit .flame-inner {
  animation: flame-flicker-inner 1.3s ease-in-out infinite;
}

.candle.lit .glow {
  animation: glow-pulse 2.6s ease-in-out infinite;
}

@keyframes flame-flicker {
  0%,
  100% {
    transform: translateX(-50%) rotate(-1deg) scale(1, 1);
  }
  20% {
    transform: translateX(-51%) rotate(1.5deg) scale(0.98, 1.04);
  }
  40% {
    transform: translateX(-49%) rotate(-1.5deg) scale(1.02, 0.97);
  }
  60% {
    transform: translateX(-50.5%) rotate(1deg) scale(0.99, 1.03);
  }
  80% {
    transform: translateX(-49.5%) rotate(-1deg) scale(1.01, 0.98);
  }
}

@keyframes flame-flicker-inner {
  0%,
  100% {
    transform: translateX(-50%) scale(1, 1);
    opacity: 0.95;
  }
  50% {
    transform: translateX(-50%) scale(0.94, 1.05);
    opacity: 1;
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.82;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .candle.lit .flame,
  .candle.lit .flame-inner,
  .candle.lit .glow {
    animation: none;
  }
}

/* Delicate prompt beneath the candle */
.candle-hint {
  display: block;
  margin-top: 2.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--charcoal-soft);
  opacity: 0.7;
  transition: opacity 0.6s ease;
}

.candle-hint.hidden {
  opacity: 0;
}

/* Soft confirmation message */
.candle-message {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--sage-deep);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.6s ease, transform 1.6s ease;
  pointer-events: none;
}

.candle-message.show {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------
   Footer
----------------------------------------------------------------- */

.site-footer {
  flex-shrink: 0;
  background-color: var(--charcoal);
  color: var(--cream-deep);
  text-align: center;
  padding: 2.6rem 2rem;
  margin-top: 4rem;
}

.site-footer .footer-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
  color: var(--white);
}

.site-footer .footer-dates {
  font-style: italic;
  color: var(--gold-soft);
  margin-bottom: 1rem;
}

.site-footer .footer-copy {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(241, 233, 218, 0.6);
}

/* ---------------------------------------------------------------
   Responsive
----------------------------------------------------------------- */

@media (max-width: 720px) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    flex-basis: 100%;
    flex-direction: column;
    gap: 1rem;
    display: none;
    padding-top: 0.6rem;
  }

  .nav-links.open {
    display: flex;
  }

  .portrait-frame {
    width: 220px;
    height: 220px;
  }

  .section {
    padding: 3.5rem 0;
  }

  .memory-form {
    padding: 1.8rem;
  }
}

/* ---- A Life in Moments — vertical timeline ---- */
.timeline-section {
  padding-top: 1rem;
}

.eyebrow-centered {
  display: block;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 3rem;
}

.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 460px;
  position: relative;
}

/* the thin gold vertical line, centred */
.timeline::before {
  content: '';
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--gold);
  opacity: 0.55;
}

.timeline-item {
  position: relative;
  text-align: center;
  padding: 0 0 3.4rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* sage green circular marker sitting on the line */
.timeline-item::before {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--sage);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 1px var(--sage);
  position: relative;
  z-index: 1;
}

.timeline-year {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--gold);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.timeline-desc {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--charcoal);
  margin: 0 auto;
  max-width: 320px;
  line-height: 1.6;
}