/* ============================================================
   RAINBOW BRIDGE — Pet template (pets-spec P6)
   Fraunces + Nunito Sans. Art keyed/placed by the generator.
   ============================================================ */
@import url('/templates/rainbow/fonts/fonts.css');

:root{
  --m-bg:#F7F9FB;--m-surface:#FFFFFF;--m-text:#2B3440;--m-muted:#5B6672;
  --m-accent:#6AA6C9;--m-accent-text:#3F7C9E;--m-accent-contrast:#FFFFFF;
  --m-border:#E1E8EE;--m-radius:14px;
  --m-font-head:'Fraunces', Georgia, serif;--m-font-body:'Nunito Sans', system-ui, sans-serif;
}

.memorial-page{background:var(--m-bg);color:var(--m-text);font-family:var(--m-font-body);font-size:17px;line-height:1.7;min-height:100vh;}
.memorial-hero{max-width:880px;margin:0 auto;padding:3.25rem 1.5rem 2.5rem;text-align:center;}
.memorial-photo img{width:222px;height:222px;object-fit:cover;border-radius:calc(var(--m-radius) + 2px);border:1px solid var(--m-border);}
.memorial-label{text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;color:var(--m-accent-text);margin-bottom:.7rem;}
.memorial-name{font-family:var(--m-font-head);font-weight:600;font-size:clamp(2rem,4.6vw,2.95rem);color:var(--m-text);line-height:1.1;margin:0 0 .55rem;}
.memorial-dates{position:relative;color:var(--m-muted);font-size:.95rem;letter-spacing:.03em;font-variant-numeric:tabular-nums;}
.memorial-dates::after{content:'';display:block;width:230px;height:38px;margin:1.1rem auto 0;background:url(/templates/rainbow/divider.png) center / contain no-repeat;}
.memorial-dates-secondary{color:var(--m-muted);}
.memorial-obituary{max-width:640px;margin:1.4rem auto 0;text-align:left;color:var(--m-text);}
.memorial-obituary p{margin:0 0 1rem;}
.memorial-subhero-title,.memorial-card-title{font-family:var(--m-font-head);font-weight:600;}
.memorial-contribute-cta h3{font-family:var(--m-font-head);color:var(--m-text);}

/* Background scene (behind content). The rainbow arcs OVER the hero and is
   grounded at the bottom of the eulogy text — full-bleed width, its base
   aligned to the bottom of the obituary (hero has 2.5rem bottom padding). */
.memorial-hero{position:relative;}
/* The band is full-bleed and bottom-anchored to the obituary. Its height is
   derived from the art's own aspect ratio (1700x679 ≈ 2.5:1, so 100vw/2.5 =
   40vw) rather than from the hero box — otherwise the image is taller than its
   container on wide screens and the arc's crown gets cut off. The arc therefore
   rises OVER the hero on wide viewports, which is the intended look, and the
   mask dissolves the top edge into the page. */
.memorial-hero::before{content:'';position:absolute;bottom:2.5rem;height:40vw;left:50%;transform:translateX(-50%);width:100vw;background:url(/templates/rainbow/band.png) no-repeat center bottom;background-size:100% auto;mix-blend-mode:multiply;opacity:0.63;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 62%);mask-image:linear-gradient(to bottom,transparent 0,#000 62%);}
.memorial-hero>*{position:relative;z-index:1;}
/* On desktop the full-bleed arc is taller than the hero (100vw/2.5), so it rises
   over the title — intended, but ease the wash back there so the heading keeps
   its contrast. Narrow screens keep the fuller colour. */
@media (min-width:1100px){.memorial-hero::before{opacity:.42;}}