/* Canonical v10 styling. Historical prototype stylesheets are not loaded.
   Sources: Parloa 1280/48 container + agent glass; Motion Primitives compact CTA;
   Codrops mist7 safe space. Approved exception: Newsreader and larger lead. */
@font-face{font-family:Geist;src:url('fonts/Geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Newsreader;src:url('fonts/Newsreader.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{--paper:#fff;--ink:#111;--muted:#555;--rule:#1113;--white:#fff;--body:Geist,Arial,sans-serif;--display:Newsreader,serif;--gutter:24px;--hero:100svh;--fog-clearance:max(180px,calc(50svh - clamp(22.4px,5.6vw,88px) - 35px));--inset:max(48px,calc((100% - 1280px)/2 + 48px))}
*,*:before,*:after{box-sizing:border-box}html{scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--body)}[hidden]{display:none!important}a{color:inherit;text-underline-offset:5px}button,input,textarea{font:inherit}a,button{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}.skip-link{position:absolute;top:-100px;left:24px;z-index:30;padding:12px;background:#fff;color:#111}.skip-link:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1,h2{font-family:var(--display);font-variation-settings:'opsz' 32;font-weight:440;line-height:1.05;letter-spacing:-.01em;margin:0}h1{font-size:54px}h2{font-size:44px}address{font-style:normal}
/* Full media stage; all tint is in the shared exposed source media. */
.hero{position:relative;isolation:isolate;overflow:clip;color:#fff;background:#111;min-height:100svh;height:auto;padding:24px 0 48px;--veil-top:0;--veil-mid:0;--veil-stop:.62;--veil-bottom:0}
/* Separate quiet dusk, unchanged-source portrait, and transparent city frame.
   Uniform exposure preserves readable overlays; source portrait RGB untouched. */
.hero-artwork{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:brightness(.62)}
.hero-environment{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-character{--portrait-width:max(110vw,196svh);position:absolute;width:var(--portrait-width);max-width:none;height:auto;left:50%;top:auto;bottom:calc(var(--portrait-width) * -.132);translate:-50% 0}
.hero-cityscape{position:absolute;left:0;bottom:0;width:100%;height:auto;pointer-events:none}
.hero-inner{position:relative;z-index:1;width:100%;max-width:1280px;margin-inline:auto;padding-inline:48px;min-height:calc(100svh - 72px);display:flex;flex-direction:column}

.hero-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:20px;margin-top:auto;padding-top:80px}.celebration-copy{max-width:582px}.hero .eyebrow{display:block;font:440 26px/1.2 var(--display);letter-spacing:0;margin:0 0 12px}.hero-invitation{font-size:16px;line-height:24px;max-width:40ch;margin:16px 0 20px}
.event-rail{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;border-top:1px solid #fff4;padding-top:18px}.rail-label{display:none}.event-date{font-size:18px;line-height:1.4;margin:0 0 5px}.event-start{font-size:16px;line-height:24px;margin:0}.event-start strong,.rail-where strong{font-weight:500}.rail-where address{font-size:16px;line-height:24px}.view-details,.directions,.details-calendar,.calendar-secondary{display:inline-flex;align-items:center;min-height:44px;font-size:15px}.view-details{display:flex;width:fit-content}.rail-action{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:16px}.phase-status{font-size:13px;margin:0;max-width:25ch}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid currentColor;border-radius:8px;font-size:14px;line-height:20px;text-decoration:none;background:transparent;color:inherit}.hero .primary{color:#fff}.hero button:disabled{opacity:.65;cursor:default}
/* Message glass: exact observed agent material; private reference texture. */
.hero #motion-note-root{position:relative;z-index:6;width:432px;max-width:100%;justify-self:end;align-self:end;font-family:var(--body);color:#fff}
.hero .motion-note-root__composer-shell,.hero .motion-note-root__examples{width:100%;max-width:432px}.hero .motion-note-root__examples{display:flex;flex-direction:column;align-items:flex-end;gap:8px;overflow:clip}
.floating-memory .motion-note-root__example-card,.floating-memory .motion-note-root__composer-content{position:relative;isolation:isolate;overflow:hidden;background:rgba(0,0,0,.45)!important;color:#fff!important;border:0!important;border-radius:16px 16px 16px 2px!important;box-shadow:inset 1px 1px 1px #fff3,inset -1px -1px 1px #fff3!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
.hero .motion-note-root__example-card{width:97%;padding:14px 16px}.hero .motion-note-root__example-card:nth-child(2){width:97%}
.floating-memory .motion-note-root__example-card:before,.floating-memory .motion-note-root__composer-content:before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:179.9%;aspect-ratio:752/501;margin-left:-9.09%;margin-top:24.16%;transform:translate(-50%,-50%);background:url('vendor/parloa/refraction-glass-alpha.webp') center/100% 100%;opacity:.3;pointer-events:none}
.hero .motion-note-root__example-card:first-child{width:82%;border-radius:16px 16px 2px 16px!important;background:rgba(255,255,255,.1)!important;box-shadow:none!important;backdrop-filter:blur(42px)!important;-webkit-backdrop-filter:blur(42px)!important}.hero .motion-note-root__example-card:first-child:before{display:none}
.hero .motion-note-root__example-card p{font-size:16px;line-height:1.4;margin:0}.hero .motion-note-root__example-card small{display:block;font-size:12px;color:#fff;margin-top:8px}
/* Compact supplied CTA stays distinct from its message surfaces. */
.hero .rail-action .button,.floating-memory .motion-note-root__trigger.motion-note-root__trigger--cta{position:relative;width:auto!important;min-width:44px;min-height:36px!important;height:36px;padding:0 12px!important;isolation:isolate;background:rgba(0,0,0,.45)!important;color:#fff!important;border:0!important;border-radius:8px!important;box-shadow:inset 1px 1px 1px #fff3,inset -1px -1px 1px #fff3!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;font:400 14px/20px var(--body)}
.hero .rail-action .button:before,.floating-memory .motion-note-root__trigger--cta:before{content:"";position:absolute;inset:-4px 0}.hero .rail-action .button:after,.floating-memory .motion-note-root__trigger--cta:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url('vendor/parloa/refraction-glass-alpha.webp') center/544px 363px;opacity:.3;pointer-events:none}
.floating-memory .motion-note-root__composer-content{position:absolute;right:0;bottom:0;padding:16px!important}
.hero .motion-note-root__composer[data-expanded="true"]{padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
.floating-memory .motion-note-root__composer-content input,.floating-memory .motion-note-root__entry{background:#0002!important;color:#fff!important;border-color:#ffffffb3!important}.floating-memory .motion-note-root__composer-content textarea{background:transparent!important;color:#fff!important}.floating-memory .motion-note-root__composer-content textarea::placeholder{color:#fff;opacity:1}
.floating-memory .motion-note-root__composer-content label,.floating-memory .motion-note-root__composer-content label span,.floating-memory .motion-note-root__composer-content output,.floating-memory .motion-note-root__title,.floating-memory .motion-note-root__meta,.floating-memory .motion-note-root__meta button,.floating-memory .motion-note-root__collapse,.floating-memory .motion-note-root__footer p,.floating-memory .motion-note-root__footer button,.floating-memory .motion-note-root__status,.floating-memory .motion-note-root__entry>button{color:#fff!important}
.floating-memory .motion-note-root__feelings button{background:transparent;color:#fff;border-color:#ffffff80}.floating-memory .motion-note-root__error:not(:empty){color:#fff!important;border:1px solid #fff;padding:8px}.floating-memory .motion-note-root__preview{border-color:#ffffff80}.floating-memory .motion-note-root__preview small{color:#fff}.floating-memory :focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Original mist strip and intrinsic-ratio source marquee. */
.seam-anchor{position:relative}.seam{position:absolute;left:0;right:0;top:calc(-1 * var(--above,0px));height:calc(var(--above,0px) + var(--below,0px));z-index:5;pointer-events:none}.seam canvas{display:block;width:100%;height:100%}
.next{position:relative;overflow-x:clip;background:var(--paper);padding:72px 0 24px}.next__intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:baseline;max-width:1280px;padding-inline:48px;margin:auto}.next__intro>div:first-child{grid-column:1/8}.next__intro>div:last-child{grid-column:9/-1;justify-self:end}.section-label{font:300 12px/1.2 'Geist Mono',monospace;letter-spacing:.02em;margin:0 0 16px}.memories-heading a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}.memories-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 20px}.memories-actions .primary{background:var(--ink);color:var(--paper);border-color:var(--ink);white-space:nowrap}.memories-actions .primary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.memories-actions button:disabled{opacity:.6;cursor:default}
.gallery-window,.gallery-boundary{padding-inline:24px}.projects{display:flex;flex-wrap:wrap;align-items:start;gap:32px 7px;margin:56px 0 0;padding:0;list-style:none}.projects li{flex:none;width:fit-content;max-width:100%;margin:0}.projects img{display:block;width:auto;height:clamp(180px,19vw,300px);max-width:100%;object-fit:contain}.projects--marquee{flex-wrap:nowrap;width:max-content;gap:7px}.projects--marquee li,.projects--marquee img{max-width:none}.gallery-boundary{font-size:14px;color:var(--muted);margin:24px 0 0}
/* All lower sections share the same container and neutral surface. */
.photo-memory-section,.details-section,.note-section,.memorial-footer{padding:64px var(--inset);background:#fff;color:#111;border-top:1px solid var(--rule)}.details-section header{margin-bottom:36px}.details-date{font-size:21px;margin:20px 0 0}.details-columns{display:grid;grid-template-columns:1fr 1fr;gap:64px}.details-columns h3{font-size:20px;font-weight:500;margin:0 0 18px}.details-columns h3:not(:first-child){margin-top:30px}.details-columns p,.details-columns address{font-size:16px;max-width:48ch}.full-schedule{font-size:17px;margin:0 0 12px;max-width:430px}.full-schedule div{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding:9px 0}.full-schedule dd{margin:0;font-weight:500}
.note-section{display:grid;grid-template-columns:1fr 1fr;gap:64px}.note-intro p:last-child{max-width:40ch;color:var(--muted)}#note-form{max-width:600px;min-width:0}:is(#note-form,.memory-dialog form) label:not(.memory-attachment,.memory-name-privacy){display:block;margin-bottom:6px;font:300 14px/1.4 var(--body);color:#746861}:is(#note-form,.memory-dialog form) :is(input:not([type=file],[type=checkbox]),textarea){display:block;width:100%;min-height:44px;font:inherit;padding:10px 12px;margin-bottom:18px;border:0;border-radius:6px;background:#f5f4f0;color:#1f1c1b}#note-form textarea{resize:vertical}.note-actions{display:flex;flex-wrap:wrap;gap:12px}.note-actions .primary{background:var(--ink);color:var(--paper)}#note-status{min-height:24px}#note-preview{border-top:1px solid var(--rule);padding-top:22px;overflow-wrap:anywhere}#preview-message{white-space:pre-wrap}
#photo-memory-root{max-width:720px;font:400 16px/1.5 var(--body)}#photo-memory-root h2{font-size:36px;margin:0 0 20px}#photo-memory-root label{display:block;margin:18px 0 6px;font-size:14px;line-height:1.4;font-weight:300;color:#746861}#photo-memory-root input,#photo-memory-root textarea{width:100%;min-height:44px;font:inherit;color:#1f1c1b;padding:10px 12px;border:0;border-radius:6px;background:#f5f4f0}#photo-memory-root button{font:inherit;min-height:44px;padding:10px 16px;border:1px solid #111;border-radius:8px;background:#111;color:#fff;margin-top:16px}
.memorial-footer{display:block;padding-bottom:28px}.footer-identity p{font-size:14px;margin:0 0 12px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr .8fr;gap:32px;border-top:1px solid var(--rule);margin-top:40px;padding-top:30px}.footer-grid h3{font-size:16px;font-weight:500;margin:0 0 16px}.footer-grid p,.footer-grid address{font-size:15px;margin:0 0 12px}.footer-grid a,.footer-grid button,.footer-bottom a{display:flex;align-items:center;min-height:44px;width:fit-content;font:400 15px/1.5 var(--body);text-decoration:underline;text-underline-offset:4px;padding:0;background:transparent;border:0;color:#111}.footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule);margin-top:40px;padding-top:24px;font-size:14px}
.motion-note-root__wall{background:#fff!important;color:#111!important}.motion-note-root__wall h2,.motion-note-root__wall-note p{font-family:var(--display)!important}.motion-note-root__wall h2{font-size:44px!important}.motion-note-root__wall :is(button,h3,p){color:#111}.motion-note-root__wall small,.motion-note-root__boundary{color:#555!important}
@media(hover:hover){.button:hover,.hero .motion-note-root__trigger--cta:hover{filter:brightness(1.12)}}
@media(max-width:1050px) and (min-width:761px){.hero-content{grid-template-columns:minmax(0,1fr) 310px;gap:26px}.event-rail{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(min-width:768px) and (max-width:1023px){:root{--inset:32px}.hero-inner,.next__intro{padding-inline:32px}}
@media(max-width:760px){:root{--inset:24px}.hero{height:auto;min-height:100svh;padding:18px 0 48px}.hero-inner{padding-inline:24px;min-height:calc(100svh - 66px)}.hero-content{display:flex;flex-direction:column;align-items:stretch;gap:30px;padding-top:350px}.hero .eyebrow{font-size:24px}h1{font-size:36px}.hero-invitation{margin:14px 0 22px}.event-rail{grid-template-columns:1fr;gap:12px}.event-date{font-size:18px}.rail-action{gap:12px}.hero #motion-note-root{width:100%;align-self:stretch}.next{padding-top:56px}.next__intro{display:block;padding-inline:24px}.next__intro>div+div{margin-top:16px}.memories h2,h2{font-size:36px}.projects{margin-top:32px}.projects img{height:auto;max-height:540px}.projects--marquee{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;gap:7px}.projects--marquee img{height:240px;max-height:none;width:auto;max-width:none}.details-columns,.note-section{display:block}.details-columns>div+div{margin-top:38px}.note-intro{margin-bottom:32px}.photo-memory-section,.details-section,.note-section,.memorial-footer{padding-top:48px;padding-bottom:48px}.footer-grid{display:block;margin-top:32px}.footer-grid section+section{margin-top:30px}.footer-bottom{display:block}.footer-grid p,.footer-grid address,.footer-grid a,.footer-grid button{font-size:16px}.motion-note-root__wall h2{font-size:36px!important}}
@media(max-width:760px){.memories-actions{justify-content:flex-start}}
@media(max-width:760px){.hero-environment{object-position:62% 0%}.hero-character{width:900px;left:50%;top:75px;bottom:auto}.hero-cityscape{top:250px;bottom:auto;mask-image:linear-gradient(#000 84%,transparent);-webkit-mask-image:linear-gradient(#000 84%,transparent)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero .motion-note-root__example-card,.hero .motion-note-root__composer-content{background:#222!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,button{transition:none}}
/* Conversation articles own their 8px rhythm; source viewport has no flex gap. */
.hero .motion-note-root__examples{gap:0;min-height:170px;justify-content:flex-end}.hero .motion-note-root__example-card{margin-top:8px;flex:none;transform-origin:50% 0}

/* The strip sticks within main, while retaining its place in document flow. */
.hero { padding-bottom: 132px; }
.hero-inner { min-height: calc(100svh - 156px); }
.event-strip-slot {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-top: -100px;
}
.event-strip {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
  margin-inline: var(--inset);
  padding: 14px clamp(16px, 3vw, 40px);
  background: #fff;
  color: #171315;
  border: 1px solid #17131533;
}
.event-strip p { margin: 0; }
.event-strip-title { font: 500 clamp(21px, 2.1vw, 32px)/1.1 var(--display); }
.event-strip-date { font-size: 14px; font-weight: 600; }
.event-strip-date span { display: block; font-weight: 400; }
.event-strip-link { display: grid; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
html { scroll-padding-top: var(--event-strip-clearance, 100px); }

@media (max-width: 760px) {
  .hero { padding-bottom: 152px; }
  .hero-inner { min-height: calc(100svh - 170px); }
  .event-strip-slot { margin-top: -128px; }
  .event-strip { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .event-strip-title { grid-column: 1 / -1; }
}

.hero .motion-note-root__examples.is-ticker {
  display: grid;
  min-height: 0;
  justify-content: stretch;
  align-items: end;
}
.hero .motion-note-root__examples.is-ticker .motion-note-root__example-card {
  grid-area: 1 / 1;
  justify-self: end;
  width: 100%;
  margin: 0;
}

.hero { padding-bottom: calc(var(--event-strip-height, 106px) + 48px); }
.hero-inner { min-height: max(0px, calc(100svh - var(--event-strip-height, 106px) - 72px)); }
.event-strip-slot { margin-top: calc(-24px - var(--event-strip-height, 106px)); }
.event-strip { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; }
.event-strip-facts, .event-strip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.event-strip-facts > * + * { border-inline-start: 1px solid #17131544; padding-inline-start: 16px; }
.event-strip-stream { font-size: 14px; }
.life-dates {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 400px);
  margin: 20px auto 0;
  font-size: 15px;
}
.life-dates::before {
  content: "";
  position: absolute;
  inset-inline: calc(25% + 18px);
  top: 11px;
  border-top: 1px solid #fffd;
}
.life-dates p { display: grid; justify-items: center; margin: 0; }
.life-dates svg { margin-bottom: 6px; }
.event-strip .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 760px) {
  .event-strip { grid-template-columns: 1fr; }
  .event-strip-facts { display: grid; }
  .event-strip-facts > * + * { border: 0; padding: 0; }
}

.hero-media-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}
.hero-media-grid {
  --media-gap: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--media-gap);
  height: 100%;
  flex: none;
}
.hero-media-row {
  display: flex;
  gap: var(--media-gap);
  padding-right: var(--media-gap);
}
.hero-media-track {
  display: flex;
  width: max-content;
  height: 100%;
}
.hero-media-repeat[hidden] { display: none; }
.hero-media-grid:not(:has(.hero-media-row)) { flex-direction: row; }
.hero-media-tile {
  position: relative;
  height: 100%;
  width: auto;
  flex: none;
  aspect-ratio: var(--tile-ratio);
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 0;
  padding: 0;
  background: #181818;
  color: white;
}
.hero-media-tile :is(video, img) {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
button.hero-media-tile { cursor: pointer; }
.hero-media-tile:focus-visible { outline: 3px solid white; outline-offset: -6px; }
.hero-media-tile span { position: absolute; top: 20%; left: 16px; padding: 6px 11px; background: #111d; border-radius: 50%; }
.hero-inner { pointer-events: none; }
.hero-inner :is(a, button, #motion-note-root) { pointer-events: auto; }
.celebration-copy { text-shadow: 0 2px 12px #000, 0 1px 4px #000; }
.hero-video-player { width: min(92vw, 960px); max-height: 92vh; padding: 12px; border: 0; background: #171717; color: white; }
.hero-video-player::backdrop { background: #000c; }
.hero-video-player button { display: block; margin: 0 0 8px auto; min-height: 44px; }
.hero-video-player video { display: block; width: 100%; max-height: 75vh; }

.hero .hero-content {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(120px, 24svh, 340px);
}
.hero .celebration-copy { min-width: 0; text-align: left; }
.hero h1 { font-size: clamp(48px, 6.5vw, 98px); line-height: .98; }
.hero .eyebrow { font-size: clamp(23px, 2.6vw, 37px); }
.hero-invitation { margin-inline: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.life-dates { margin-inline: 0; }
.hero-prayer { width: 100%; max-width: 432px; justify-self: end; }
.hero-prayer h2 { font: 500 24px/1.2 var(--display); margin: 0 0 14px; }
.hero .hero-prayer #motion-note-root { width: 100%; }
@media (max-width: 767px) {
  .hero .hero-content { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-prayer { justify-self: start; }
}

.hero-actions .button { background: #fff; color: #171315; }
.hero-actions .button:first-child { background: #171315; color: #fff; border-color: #fff; }
.hero-actions .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#calendar-primary { box-shadow: none; text-shadow: none; }
.hero #motion-note-root { justify-self: end; }
.event-strip { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) {
  .hero-media-repeat { display: none; }
}

.venue-links, .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.details-columns .program-timezone { color: var(--muted); margin: -8px 0 8px; }
.memorial-footer .footer-links { margin-top: 16px; }
.footer-links :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-preview { color: var(--muted); font-size: 14px; margin: 16px 0 0; }

.memorial-footer { padding-top: 0; }
.footer-tribute {
  display: grid;
  gap: clamp(14px, 2vw, 32px);
  padding: clamp(28px, 5vw, 72px) var(--inset);
  background: linear-gradient(#211b22bd, #211b227d), url("../assets/footer/sunset-to-sunrise.jpg") center / cover no-repeat #322a32;
  color: #fff8ed;
}
.footer-tribute h2 {
  justify-self: center;
  font: 400 clamp(76px, 12vw, 180px)/.85 "Ms Madi", "Snell Roundhand", cursive;
  transform: rotate(-4deg);
}
.tribute-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2px, .6vw, 8px);
}
.tribute-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--portrait-position, center);
}
.tribute-endpoints { display: flex; justify-content: space-between; gap: 16px; }
.tribute-endpoints p { margin: 0; }
.tribute-endpoints p:last-child { text-align: right; }
.tribute-endpoints time { display: block; font-size: 14px; }
.event-strip { transition: margin-inline .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .event-strip { transition: none; }
}

/* Keep the source image available to the seam without showing it behind tiles. */
.hero-artwork { opacity: 0; }
.hero-media-tile { border-radius: 0; }
.hero .celebration-copy { container-type: inline-size; }
.hero-name {
  display: block;
  white-space: nowrap;
  font-size: min(98px, 13cqi);
}
.hero-prayer { align-self: center; }
.hero-prayer .motion-note-root__example-card { border-radius: 0 !important; }
@media (min-width: 768px) {
  .hero .hero-content { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
}

.hero-content:has(> .hero-prayer[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

#motion-note-root.floating-memory {
  position: fixed;
  width: max-content;
  max-width: calc(100vw - 40px);
  z-index: 21;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  color: white;
  pointer-events: none;
}
.floating-memory .motion-note-root__examples { display: none !important; }
.floating-memory .motion-note-root__composer-shell { width: auto; }
.floating-memory .motion-note-root__composer { position: relative; width: max-content; }
.floating-memory button,
.floating-memory .motion-note-root__composer-content { pointer-events: auto; }
.floating-memory .motion-note-root__trigger[aria-expanded="true"] { opacity: 0; pointer-events: none; }
.floating-memory .motion-note-root__composer-content {
  width: min(432px, calc(100vw - 40px));
  max-height: min(75dvh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(24, 24, 24, .89) !important;
}
.floating-memory .motion-note-root__trigger.motion-note-root__trigger--cta {
  min-height: 44px !important;
  height: auto;
  background: rgba(24, 24, 24, .82) !important;
}

/* The media track moves within its own column. */
.hero { --hero-copy-width: 30%; display: flow-root; padding-top: 0; }
.hero-media-wall { left: var(--hero-copy-width); }
.hero-inner { width: var(--hero-copy-width); margin-inline: 0 auto; padding-inline: clamp(18px, 2.6vw, 48px); }
.hero .hero-content { padding-top: clamp(64px, 16svh, 220px); }
.hero .celebration-copy { max-width: none; }
.hero-name { font-size: min(98px, 12cqi); }

@media (max-width: 767px) {
  .hero-media-wall { left: 0; height: 34svh; bottom: auto; }
  .hero-inner { width: 100%; }
  .hero .hero-content { padding-top: 34svh; }
}

.hero .hero-content { grid-template-columns: minmax(0, 1fr); }
.hero .celebration-copy { text-shadow: none; }

@media (min-width: 768px) {
  .hero { background: linear-gradient(to right, #f4f4f4 var(--hero-copy-width), #111 var(--hero-copy-width)); }
}

/* A paper panel keeps the inscription and service actions together. */
.hero-inner {
  background: #f4f4f4;
  color: #222;
  padding-inline: clamp(20px, 3vw, 52px);
}
.hero .hero-content {
  flex: 1;
  align-items: stretch;
  margin: 0;
  padding-block: clamp(48px, 10svh, 100px) 32px;
}
.hero .celebration-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero .eyebrow {
  max-width: 10ch;
  margin: 0 0 14px;
  color: #222;
  font: 650 clamp(29px, 16cqi, 76px)/.96 var(--body);
  letter-spacing: -.065em;
  text-wrap: balance;
}
.hero-copy-footer {
  margin-top: auto;
  padding-top: clamp(36px, 8svh, 88px);
}
.hero-signature {
  display: block;
  width: min(100%, 456px);
  height: auto;
  color: #222;
  transform: rotate(-4deg);
  transform-origin: center left;
}
.hero .life-dates {
  width: 100%;
  margin: 30px 0 0;
  gap: 12px;
  text-align: left;
}
.hero .life-dates::before { content: none; }
.hero .life-dates p { justify-items: start; }
.hero .life-dates strong { font-weight: 600; }
.hero-invitation { color: #454545; margin: 0 0 16px; }
.hero-actions { margin-top: 0; }
.hero-actions .button:first-child { background: #222; color: #fff; border-color: #222; }
.hero-actions .button { border-color: #666; background: transparent; color: #222; }
@media (max-width: 767px) {
  .hero-inner { margin-top: 34svh; min-height: 0; }
  .hero .hero-content { padding-block: 36px; }
  .hero-copy-footer { padding-top: 32px; }
}

.footer-music { padding-block: clamp(32px, 5vw, 72px); border-bottom: 1px solid var(--rule); }
.footer-music h2 { margin-bottom: 24px; }
.footer-music-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer-music iframe { display: block; border: 0; }
.footer-music a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 767px) {
  .footer-music-grid { grid-template-columns: minmax(0, 1fr); }
}

.hero-media-wall { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; }
.hero-media-wall:active { cursor: grabbing; }
.hero-media-tile { user-select: none; }
.hero-media-tile img { -webkit-user-drag: none; }
.hero-media-tile span { opacity: 0; transition: opacity .18s ease; }
.hero-media-tile:hover span, .hero-media-tile:focus-visible span { opacity: 1; }
.hero-video-player img { display: block; max-width: 100%; max-height: 75vh; margin-inline: auto; object-fit: contain; }
@media (hover: none) { .hero-media-tile span { opacity: 1; } }

.hero-video-player.is-wall-video {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  overflow: hidden;
}
.hero-video-player.is-wall-video::backdrop { background: transparent; }
body:has(.hero-video-player[open]) .hero-media-track { opacity: .32; }
.hero-video-player.is-wall-video video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
.hero-video-player.is-buffering-video {
  background: #171717 var(--playback-poster) center / contain no-repeat;
}
.hero-video-player.is-buffering-video video { opacity: 0; }
.hero-video-player.is-wall-video button {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  margin: 0;
}

.floating-memory .motion-note-root__attach {
  display: block;
  margin: 0 0 12px;
  min-height: 44px;
  color: white;
  background: transparent;
  border: 1px solid #fff9;
  border-radius: 8px;
  padding-inline: 12px;
}


@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero {
    display: grid;
    grid-template-columns: var(--hero-copy-width) minmax(0, 1fr);
    grid-template-rows: auto 40svh;
    padding-bottom: calc(var(--event-strip-height, 106px) + 24px);
  }
  .hero-media-wall {
    position: sticky;
    inset: auto;
    top: 0;
    grid-area: 1 / 2 / 3 / 3;
    align-self: start;
    height: 100svh;
  }
  .hero .hero-inner {
    grid-area: 1 / 1;
    width: 100%;
    align-self: start;
  }
}
@media (max-width: 767px) {
  html { scroll-padding-top: var(--event-strip-clearance, 150px); }
}