/* ---------------------------------------------------------------
   Barney — Pet Memorial Website (Little Legacies template)
   Palette: burgundy #961A1C, 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: 112, 20, 20;            /* #701414 dark maroon red */
  --primary: rgb(var(--primary-rgb));
  --primary-deep: #4d0e0e;               /* 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 50% 88%, rgba(var(--primary-rgb), 0.12), transparent 65%),
    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;
}

/* A small ornament between the dates and the tagline — breaks up the
   vertical stack a little, in the theme colour so it re-tints with
   everything else. */
.memorial-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 auto 1.6rem;
  max-width: 220px;
}

.memorial-divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--primary-border);
}

.memorial-divider-mark {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 0.9rem;
  line-height: 1;
}

/* Home page nav cards — a soft wash of the theme colour behind the
   cards, rather than a flat neutral tint. Because it's built from
   --primary-rgb, it recolours automatically with the rest of the site
   (swap the theme and this glow follows, no extra edits needed). */
.home-links {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(var(--primary-rgb), 0.16), transparent 60%),
    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; }
}

/* Arrows in a simple row underneath the photos — keeps the full
   width available for the gallery itself, and works identically at
   every screen size (no special-casing needed for mobile). */
.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: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--primary-border);
  background: var(--white);
  color: var(--sage-deep);
  font-family: var(--serif);
  font-size: 1.5rem;
  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 {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--charcoal-soft);
  letter-spacing: 0.1em;
  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;
}

/* ---------------------------------------------------------------
   Moving portraits — looping, silent video thumbnails inside the
   gallery (a living photograph). Framed to a consistent portrait
   shape so they read as a "portrait that moves" among the still
   photos. Click opens the full clip with sound in its own lightbox.
----------------------------------------------------------------- */

.gallery-item--video {
  aspect-ratio: 4 / 5;
}

.gallery-item--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* the whole tile is the click target */
}

.gallery-item--video .gallery-tag {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.gallery-item--video .gallery-tag::before {
  content: "\25B6";
  font-size: 0.6rem;
}

/* A quiet ring around moving portraits so they read as "alive" even
   before you notice the motion. */
.gallery-item--video {
  box-shadow: 0 0 0 1px var(--primary-border), 0 6px 20px var(--shadow);
}

.gallery-item--video:hover,
.gallery-item--video:focus-visible {
  box-shadow: 0 0 0 1px var(--primary), 0 14px 34px var(--shadow-deep);
}

/* ---------------------------------------------------------------
   Video lightbox — a separate overlay from the photo lightbox.
   Plays the full clip with sound and native controls.
----------------------------------------------------------------- */

.lightbox-video-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-video-stage {
  transform: scale(1);
}

.lightbox-video {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  background: var(--charcoal);
}

/* ---------------------------------------------------------------
   Videos page — a tidy grid of uniform thumbnails. Each tile shows a
   still frame of a clip (cover-cropped to a consistent shape so the
   grid stays even whatever the source sizes). Clicking a tile opens
   the pop-up player, where the clip plays at its true, uncropped shape.
----------------------------------------------------------------- */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.3rem;
  margin-top: 2.5rem;
}

/* Videos paginate six to a page, like the gallery. Each page is its own
   grid; only the active one shows. Page-turn controls reuse .carousel-*. */
.video-page {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.3rem;
  margin-top: 2.5rem;
}

.video-page.is-active {
  display: grid;
}

/* Preview ribbon — a small fixed badge shown while a draft is being reviewed
   (toggled by `preview: true` in site.config.js). */
.preview-ribbon {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 2000;
  background: var(--primary);
  color: var(--white);
  padding: 9px 16px;
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(51, 49, 46, 0.28);
  font-family: var(--sans);
  display: flex;
  align-items: baseline;
  gap: 8px;
  pointer-events: none;
}

.preview-ribbon strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}

.preview-ribbon span {
  opacity: 0.85;
  font-size: 0.75rem;
}

.video-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--cream-deep);
  box-shadow: 0 6px 20px var(--shadow);
  transition: box-shadow 0.4s ease;
}

.video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* the whole tile is the click target */
}

.video-tile:hover,
.video-tile:focus-visible {
  box-shadow: 0 14px 34px var(--shadow-deep);
}

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

/* Play badge — a soft disc with a triangle, so a still frame reads
   unmistakably as a video. */
.video-tile .play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s ease;
}

.video-tile:hover .play-badge {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-tile .play-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--primary-deep);
}

.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(var(--primary-rgb), 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);
}

.btn-outline {
  background-color: transparent;
  color: var(--sage-deep);
  border: 1.5px solid var(--sage);
}

.btn-outline:hover {
  background-color: var(--sage);
  color: var(--white);
}

/* ---------------------------------------------------------------
   QR landing / "links" page
----------------------------------------------------------------- */
.links-page {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.links-card {
  width: 100%;
  max-width: 30rem;
  text-align: center;
}

.links-name {
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--charcoal);
  margin: 0.4rem 0 0.3rem;
}

.links-dates {
  font-style: italic;
  color: var(--sage-deep);
  margin-bottom: 0.4rem;
}

.links-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--charcoal);
  margin: 0 auto 2rem;
  max-width: 26rem;
}

.link-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 2rem;
}

.link-buttons .btn {
  width: 100%;
  padding: 1.05rem 1.5rem;
}

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

/* ---------------------------------------------------------------
   Contribute page — photo & memory submission
----------------------------------------------------------------- */
.nav-brand--plain {
  cursor: default;
}

.label-optional {
  font-weight: 400;
  font-style: italic;
  color: var(--charcoal-soft);
  text-transform: none;
  letter-spacing: 0;
}

/* Friendly upload "dropzone" */
.upload-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 2rem 1.4rem;
  border: 1.5px dashed var(--primary-border);
  border-radius: 4px;
  background-color: var(--white);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.upload-field:hover,
.upload-field:focus-within {
  border-color: var(--sage);
  background-color: var(--cream);
}

.upload-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.upload-text {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--sage-deep);
}

.upload-hint {
  font-size: 0.86rem;
  color: var(--charcoal-soft);
}

.upload-selected {
  margin-top: 0.7rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--sage-deep);
  min-height: 1.2rem;
}

/* Consent checkbox row */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.4rem 0 1.8rem;
  font-size: 0.96rem;
  color: var(--charcoal);
  cursor: pointer;
}

.consent-row input {
  width: auto;
  margin-top: 0.2rem;
  accent-color: var(--sage);
  flex-shrink: 0;
}

/* Thank-you panel shown after submitting */
.contribute-thanks {
  text-align: center;
  padding: 1rem 0 1.5rem;
}

.contribute-thanks h2 {
  color: var(--sage-deep);
  margin-bottom: 0.8rem;
}

.contribute-thanks p {
  max-width: 32rem;
  margin: 0 auto;
  color: var(--charcoal);
  font-size: 1.08rem;
}

.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.12rem;
  font-family: var(--serif);
  color: var(--charcoal);
  margin-bottom: 1rem;
  line-height: 1.65;
}

.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;
}

.order-of-service-link {
  margin-top: 1.2rem;
}

.eulogy-body p {
  font-size: 1.08rem;
  margin-bottom: 1.2rem;
}

.eulogy-body p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   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%;
  /* Warm candlelight halo — amber/honey, not the site's primary colour.
     Candle glow is warm gold on every site, so this stays warm regardless
     of theme (and a warm tint can never read as purple the way a muted
     dark red can). */
  background: radial-gradient(
    ellipse at 50% 46%,
    rgba(232, 181, 99, 0.45) 0%,
    rgba(214, 158, 84, 0.22) 58%,
    rgba(201, 168, 76, 0.12) 88%,
    rgba(201, 168, 76, 0.06) 100%
  );
  border: 1px solid rgba(201, 168, 76, 0.5);
  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: 4rem;
  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);
}

/* A small original verse — a quiet inscription beneath the candle.
   Always visible (unlike the lit-message), sits low and soft. */
.candle-verse {
  margin: 3.5rem auto 0;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--charcoal-soft);
  text-align: center;
}

/* ---------------------------------------------------------------
   About page — a short intro + a grid of "favourite things"
----------------------------------------------------------------- */

.about-intro {
  max-width: 44rem;
  margin: 0 auto 3rem;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.8;
  color: var(--charcoal);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.4rem;
}

.about-card {
  background-color: var(--white);
  border-top: 3px solid var(--gold);
  padding: 1.6rem 1.6rem 1.7rem;
  box-shadow: 0 4px 16px var(--shadow);
  text-align: center;
}

.about-card .about-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 0.6rem;
}

.about-card .about-value {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--charcoal);
}

/* ---------------------------------------------------------------
   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);
}

.site-footer .footer-legal {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.site-footer .footer-legal a {
  color: rgba(241, 233, 218, 0.4);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.site-footer .footer-legal a:hover,
.site-footer .footer-legal a:focus {
  color: rgba(241, 233, 218, 0.75);
  border-bottom-color: rgba(241, 233, 218, 0.4);
}

/* "Made by Little Legacies" credit — injected only on Keepsake (free) tier. */
.site-footer .footer-credit {
  margin-top: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(241, 233, 218, 0.4);
}

.site-footer .footer-credit a {
  color: rgba(241, 233, 218, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 233, 218, 0.25);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.site-footer .footer-credit a:hover,
.site-footer .footer-credit a:focus {
  color: rgba(241, 233, 218, 0.85);
  border-bottom-color: rgba(241, 233, 218, 0.5);
}

.privacy-contact {
  margin: 1.6rem 0 0.6rem;
}

.privacy-note {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--sage-deep);
}

.consent-link {
  margin: 0.15rem 0 0.4rem;
  font-size: 0.85rem;
}

.consent-link a {
  color: var(--sage-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.35);
  transition: border-color 0.3s ease;
}

.consent-link a:hover,
.consent-link a:focus {
  border-bottom-color: var(--sage);
}

/* ---------------------------------------------------------------
   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;
}