:root {
  --cream: #FBF7EF;
  --white: #FFFFFF;
  --pale-blue: #E4EDF8;
  --sage-surface: #EEF1E8;
  --gold-surface: #FCF3DC;
  --book-paper: #E7E3DA;
  --navy: #2E4A6B;
  --navy-deep: #1D3047;
  --blue: #5B8FCB;
  --blue-hover: #4D7FB8;
  --gold: #E6B33E;
  --gold-hover: #EDBF52;
  --sage: #8CA47B;
  --error: #C0392B;
  --font-serif: 'Newsreader', serif;
  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 40px); }
.container-wide { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 40px); }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 247, 239, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(46, 74, 107, 0.08);
  padding: 14px 0;
}
.site-header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.logo-link { display: flex; align-items: center; gap: 10px; color: var(--navy); font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; }
.nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: rgba(46, 74, 107, 0.8); }
.nav-links a:hover { color: var(--navy); }
/* On mobile the header's "Start a memorial" CTA wraps below the logo and lands
   right on top of the page's own identical CTA. Hide the header one on narrow
   screens (the page CTA remains); keep it on desktop. */
@media (max-width: 768px) { .site-header .header-cta { display: none; } }

/* Guest header: quiet page furniture for memorial-facing pages.
   Mark + wordmark only (no tagline), owner-aware Manage, optional CTA. */
.guest-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 247, 239, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(46, 74, 107, 0.08);
  padding: 12px 0;
}
.guest-header .logo-link { font-size: 1rem; }
.guest-header .logo-link svg { width: 24px; height: 24px; }
.guest-header .logo-link span { opacity: 0.85; }
.guest-name {
  font-family: var(--font-serif); font-weight: 600; color: var(--navy);
  opacity: 0; transition: opacity 0.35s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw;
}
.guest-header--overlay {
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.guest-header--overlay .logo-link,
.guest-header--overlay .nav-links a:not(.btn) { color: #FBF7EF; }
.guest-header--overlay.is-scrolled {
  background: rgba(251, 247, 239, 0.9);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(46, 74, 107, 0.08);
}
.guest-header--overlay.is-scrolled .logo-link,
.guest-header--overlay.is-scrolled .nav-links a:not(.btn) { color: var(--navy); }
.guest-header.is-scrolled .guest-name { opacity: 1; }
@media (max-width: 640px) { .guest-name { display: none; } }


.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  border: none; cursor: pointer; transition: transform 0.15s, background 0.15s;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 10px 26px rgba(230, 179, 62, 0.38); }
.btn-gold:hover { background: var(--gold-hover); color: var(--navy); }
.btn-blue { background: var(--blue); color: white; }
.btn-blue:hover { background: var(--blue-hover); color: white; }
.btn-outline { background: transparent; border: 1.5px solid rgba(91, 143, 203, 0.5); color: var(--navy); }
.btn-outline:hover { background: var(--pale-blue); }

.eyebrow {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sage);
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
.hero-title { font-size: clamp(2.4rem, 5.4vw, 3.8rem); text-wrap: balance; }

.card {
  background: var(--white); border: 1px solid rgba(46, 74, 107, 0.08);
  border-radius: 24px; padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 18px 44px -30px rgba(46, 74, 107, 0.5);
}

input[type=text], input[type=email], textarea, select {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid rgba(91, 143, 203, 0.35); background: var(--cream);
  font-family: var(--font-sans); font-size: 1rem; color: var(--navy);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(91, 143, 203, 0.14); background: white;
}
label.field-label { display: block; margin-bottom: 8px; }

.site-footer {
  padding: 56px 0 32px; margin-top: 80px;
  border-top: 1px solid rgba(46, 74, 107, 0.08);
}
.footer-tagline { font-family: var(--font-serif); font-style: italic; color: var(--sage); }

.section { padding: clamp(56px, 8vw, 100px) 0; }
.section-alt { background: var(--white); }
.section-blue { background: var(--pale-blue); }

.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.messages li { padding: 12px 16px; border-radius: 12px; margin-bottom: 8px; background: var(--pale-blue); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.pill-sage { background: var(--sage-surface); color: #5E7A4A; }
.pill-gold { background: var(--gold-surface); color: #B8881F; }

.memory-card { margin-bottom: 20px; }
.memory-card .author { font-weight: 600; }
.memory-card .relation { color: rgba(46, 74, 107, 0.6); font-size: 0.9rem; }
.memory-card img { max-width: 100%; border-radius: 16px; margin-top: 12px; }

@media print {
  [data-screen-chrome] { display: none !important; }
}


/* ---- Memorial hero -------------------------------------------------------
   The hero photo is whatever the family had to hand: a portrait, a landscape,
   often a crop off a phone. The old full-bleed band stretched it to the window
   width and cropped it to a 420px strip, which on a 247x456 portrait showed
   ~16% of the photo -- a sliver through the face -- upscaled almost 6x.

   Here the photo keeps its own aspect ratio inside a mat and is never scaled
   past its natural size, so a small photo stays sharp instead of being blown
   up. The ground stays navy because .guest-header--overlay draws its logo and
   links in cream until you scroll. */
.memorial-hero {
  background: var(--navy-deep);
  color: var(--cream);
  /* The floor has to clear the fixed overlay header at its TALLEST, which is
     on narrow screens: .site-header-inner wraps, and an owner sees Manage plus
     the Add-a-memory button, taking the header to roughly two rows (~100px).
     12vw is still under the floor there, so the floor is what actually holds
     the hero clear -- 120px, not 96px. */
  padding: clamp(120px, 12vw, 136px) 0 clamp(48px, 7vw, 76px);
}
.memorial-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.memorial-hero__text { min-width: 0; }
.memorial-hero__text .eyebrow { color: rgba(251, 247, 239, 0.72); }
.memorial-hero__name {
  color: var(--cream);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin: 6px 0 0;
}
.memorial-hero__tagline {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(251, 247, 239, 0.88);
  margin: 14px 0 0; max-width: 34ch;
}
.memorial-hero__years {
  margin: 10px 0 0;
  color: rgba(251, 247, 239, 0.7);
  letter-spacing: 0.04em;
}
.memorial-hero__cta { margin-top: 26px; }

/* The mat is a fixed 4:5 regardless of the photo, sized from CSS alone.
   That reserves the space before the image loads, so nothing below the hero
   jumps and the headline does not re-wrap as it arrives -- the dimensions
   aren't available to reserve it from instead: hero_photo has no
   width_field/height_field, so .width would open the file and cost a remote
   round trip on every page view.
   The photo is centred inside at its own size rather than stretched to fill,
   the way a print sits in a mat, so an unusual shape costs mat and never
   cropping. 4:5 because the common upload is a portrait of a person. */
.memorial-hero__frame {
  margin: 0;                 /* figure has a default UA margin */
  /* The percentage belongs in max-width, NOT in width. This is a grid item in
     a minmax(0, auto) track, so a percentage width is cyclic: the track is
     sized from the item's contribution and the item resolves against the
     track. Chrome breaks the cycle with a content-derived width, which puts
     the box back at the mercy of the image -- reintroducing the load-time
     shift, and letting a landscape photo take the row and crush the text
     column to zero. In max-width it only shrinks the finished box.
     56vh keeps the 4:5 height on screen on a short viewport; it is the active
     term below roughly a 678px-tall window, not only on phones. */
  /* --mat-* come from the view, sized from the stored photo dimensions, so the
     mat is the photo's shape plus an even border rather than a fixed portrait
     box that letterboxes anything wide. The fallbacks are the old 4:5 frame,
     used when the dimensions aren't recorded yet. */
  width: var(--mat-w, 380px);
  aspect-ratio: var(--mat-ar, 4 / 5);
  /* Height bound for short viewports, expressed through width because width is
     definite and max-height would fight aspect-ratio. Percentage stays here,
     never in `width` -- see above. */
  max-width: min(100%, calc(56vh * var(--mat-arn, 0.8)));
  background: var(--cream);
  padding: clamp(10px, 1.4vw, 16px);
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.22);
  /* align-items is load-bearing, not cosmetic: a grid item with aspect-ratio
     and the default align-self:stretch gets stretched to the row height, which
     overrides the ratio and un-reserves the box. Do not change to stretch. */
  display: flex; align-items: center; justify-content: center;
}
.memorial-hero__frame img {
  display: block;
  /* Bounded by the mat, with no width/height set, so it shrinks to fit and is
     never enlarged past its own pixels. */
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

/* No photo: let the name hold the space on its own. */
.memorial-hero__inner--solo {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center; text-align: center;
}
.memorial-hero__inner--solo .memorial-hero__tagline { margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
  .memorial-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center; text-align: center;
  }
  .memorial-hero__tagline { margin-left: auto; margin-right: auto; }
}