@font-face{font-family:Doran;src:url('assets/fonts/doran-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Doran;src:url('assets/fonts/doran-medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:Doran;src:url('assets/fonts/doran-light.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}
:root{color-scheme:dark;--white:#eee;--soft:#ccc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:#111;color:var(--white);font-family:Doran,Tahoma,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid white;outline-offset:5px}
.memorial{position:relative;width:min(100%,760px);min-height:100svh;margin:auto;overflow:hidden;background:radial-gradient(ellipse 77% 28% at 50% 12%,#434343 0%,#282828 49%,transparent 100%),radial-gradient(ellipse 85% 30% at 50% 56%,#303030 0%,transparent 80%),#171717;box-shadow:0 0 100px #0006}.memorial:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen}.memorial:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 28%,#05050552 100%)}.haze{position:absolute;width:125%;height:220px;background:#a7a7a71d;filter:blur(68px);pointer-events:none}.haze-left{left:-53%;top:56%;transform:rotate(19deg)}.haze-right{right:-54%;bottom:4%;transform:rotate(-21deg)}.memorial-content{position:relative;z-index:1;max-width:510px;margin:auto;padding:55px 28px 76px;text-align:center}.top-mark{font-size:1.1rem;color:#b8b8b8;margin-bottom:20px}.pretitle{margin:0 0 8px;color:#c8c8c8;font-size:1rem;font-weight:300}.memorial h1{font-weight:300;font-size:clamp(2.4rem,9vw,4rem);line-height:1.35;margin:0 0 8px;letter-spacing:-.035em}.section-label{margin:0;color:#dedede;font-size:1.06rem;font-weight:300}
.portrait-scene{position:relative;height:clamp(350px,85vw,460px);margin:9px -23px 6px;isolation:isolate}.halo{position:absolute;top:2%;left:50%;width:73%;height:70%;transform:translateX(-50%);background:#e5e5e5;filter:blur(42px);opacity:.20;pointer-events:none}.portrait-frame{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:63%;height:76%;padding:10px;background:linear-gradient(135deg,#777 0%,#1f1f1f 18%,#777 36%,#181818 54%,#555 72%,#111 100%);border:2px solid #454545;box-shadow:0 0 0 3px #202020,0 0 0 5px #696969,0 0 0 8px #1d1d1d,inset 0 0 0 2px #a5a5a5,0 22px 32px #000a,0 0 50px #e2e2e21c}.frame-detail{width:100%;height:100%;padding:7px;border:2px ridge #898989;background:#111;box-shadow:inset 0 0 0 3px #252525,inset 0 0 0 5px #848484}.frame-detail img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 30%;filter:grayscale(1) contrast(1.1) brightness(.85)}.dove{position:absolute;z-index:3;object-fit:contain;opacity:.94;filter:grayscale(1) drop-shadow(0 6px 13px #000a);pointer-events:none;will-change:transform}.dove-one{width:clamp(88px,24vw,142px);height:clamp(88px,24vw,142px);top:13%;right:0;animation:dove-a 6.4s ease-in-out infinite}.dove-two{width:clamp(72px,20vw,112px);height:clamp(72px,20vw,112px);left:0;bottom:17%;animation:dove-b 7.1s ease-in-out infinite}.dove-three{width:clamp(44px,12vw,69px);height:clamp(44px,12vw,69px);right:8%;bottom:7%;opacity:.62;animation:dove-c 8s ease-in-out infinite}@keyframes dove-a{0%,100%{transform:translate(0,0) rotate(-7deg)}35%{transform:translate(-20px,-16px) rotate(4deg)}70%{transform:translate(-4px,10px) rotate(-3deg)}}@keyframes dove-b{0%,100%{transform:scaleX(-1) translate(0,0) rotate(0)}48%{transform:scaleX(-1) translate(-19px,-23px) rotate(8deg)}}@keyframes dove-c{0%,100%{transform:translate(0,0) rotate(8deg)}50%{transform:translate(-18px,-15px) rotate(-8deg)}}
.honorific{color:#bbb;font-size:.94rem;margin:8px 0 0}.memorial h2{font-weight:400;font-size:clamp(2rem,7vw,3rem);line-height:1.5;margin:0}.flourish{display:flex;gap:14px;align-items:center;justify-content:center;color:#a9a9a9;margin:8px 0 16px}.flourish span{height:1px;width:86px;background:linear-gradient(90deg,transparent,#888)}.flourish span:last-child{transform:rotate(180deg)}.flourish i{font-style:normal;font-size:1.15rem}.message{font-size:1rem;line-height:2.05;color:#d0d0d0;max-width:380px;margin:0 auto 22px}.date{font-size:1.35rem;line-height:1.7;margin:0 0 4px}.time,.place{color:#d5d5d5;font-size:1rem;line-height:1.8;margin:0}.place{margin-top:7px}
.glass-button{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;max-width:310px;margin:28px auto 0;padding:10px 20px;overflow:hidden;border:1px solid #ffffff54;border-radius:999px;background:#ffffff13;box-shadow:inset 2px -2px 1px -1px #ffffff6e,inset -2px 2px 1px -1px #ffffff5c,inset 0 0 2px #fff4,0 8px 22px #0007;backdrop-filter:blur(8px) contrast(1.1);-webkit-backdrop-filter:blur(8px) contrast(1.1);color:#fafafa;text-decoration:none;font-weight:500;font-size:1rem;cursor:pointer;transition:transform .23s,background .23s}.glass-button:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(42deg,#fff5,transparent 22%,transparent 78%,#fff5);filter:blur(5px);opacity:.5}.glass-button:hover{transform:translateY(-3px);background:#ffffff24}.glass-button:active{transform:translateY(1px)}.glass-shine{position:absolute;inset:4px;border:1px solid #ffffff26;border-radius:inherit;pointer-events:none}.button-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#ffffff24}.button-chevron{margin-right:auto;font-family:Arial,sans-serif}.footer-mark{color:#999;margin-top:28px;font-size:.9rem}
.music-button{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));z-index:5;display:flex;align-items:center;gap:9px;min-height:48px;padding:9px 15px;border:1px solid #ffffff50;border-radius:99px;background:#222b;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 1px 1px #fff4,0 8px 24px #0008;color:#fff;font:400 .92rem Doran,Tahoma,sans-serif;cursor:pointer;transition:background .2s,transform .2s}.music-button:hover{background:#444d;transform:translateY(-2px)}.music-button[aria-pressed="true"] svg{animation:music-beat 1.7s ease-in-out infinite}@keyframes music-beat{50%{transform:rotate(-9deg) scale(1.12)}}
@media(max-width:550px){.memorial-content{padding:35px 25px 74px}.portrait-scene{margin-left:-22px;margin-right:-22px}.portrait-frame{width:65%;height:75%}.dove-one{right:-1%}.dove-two{left:-2%}}@media(max-width:370px){.portrait-scene{height:340px}.memorial-content{padding-left:20px;padding-right:20px}.dove-one{right:2%}.dove-two{left:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.dove-one{transform:none}.dove-two{transform:scaleX(-1)}.dove-three{transform:none}}
.memorial-content{padding-top:clamp(70px,12vh,130px)}.memorial h1{font-size:clamp(2.25rem,8vw,3.6rem);line-height:1.42;margin-bottom:5px}.portrait-scene{margin-top:0}.message{margin-bottom:18px}
@media(max-width:550px){.memorial-content{padding-top:58px}.memorial h1{font-size:clamp(2.25rem,9vw,2.9rem)}}
/* The lighting, grain and low fog are taken from the supplied reference's visual direction. */
.memorial{background:#161616 url('assets/memorial-bg.webp') 18% top/cover no-repeat}
.memorial:before{display:none}.memorial:after{opacity:.15}.haze{display:none}
.memorial-content{padding-top:clamp(85px,16vh,158px)}
.memorial h1{font-size:clamp(1.9rem,7vw,3rem);line-height:1.3;font-weight:300;white-space:nowrap;margin:0 0 7px;text-shadow:0 1px 9px #0009}
.portrait-scene{margin-top:0;height:clamp(365px,84vw,460px)}
.halo{top:6%;left:50%;height:37%;width:80%;opacity:.45;background:radial-gradient(ellipse at 50% 38%,#ececec6d,transparent 65%);filter:blur(16px)}
.portrait-frame{top:6%;width:70%;height:84%;padding:0;border:0;background:transparent;box-shadow:none;filter:drop-shadow(0 14px 18px #0009)}
.portrait-frame:before{content:"";position:absolute;z-index:-1;top:0;left:4%;width:90%;height:24%;background:radial-gradient(ellipse at 35% 35%,#ffffffa8,transparent 68%);filter:blur(23px);pointer-events:none}
.frame-art{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.frame-detail{position:absolute;z-index:2;left:19%;top:18%;width:63%;height:65%;padding:0;border:0;background:#161616;box-shadow:0 0 0 2px #4e4e4e,inset 0 0 10px #000}
.frame-detail img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 22%;filter:grayscale(1) contrast(1.14) brightness(.93)}
.dove-one{top:14%;right:-2%}.dove-two{left:1%;bottom:18%}.dove-three{right:7%;bottom:8%}
@media(max-width:550px){.memorial{background-position:16% top}.memorial-content{padding-top:clamp(75px,13vh,110px)}.memorial h1{font-size:clamp(1.65rem,7vw,2.35rem)}.portrait-frame{width:73%;height:82%;top:8%}.portrait-scene{height:clamp(345px,93vw,410px)}}
@media(max-width:370px){.memorial h1{font-size:1.58rem}.portrait-scene{height:340px}}
.frame-detail img{filter:none}
/* Keep the name, date and location in the first mobile viewport. */
.place+.message{margin-top:15px}
@media(max-width:550px){
  .memorial-content{padding-top:22px;padding-bottom:70px}
  .memorial h1{margin-bottom:0}
  .portrait-scene{height:clamp(260px,74vw,330px);margin-bottom:0}
  .portrait-frame{top:5%;height:88%}
  .honorific{margin-top:0}
  .memorial h2{line-height:1.3}
  .flourish{margin:2px 0 5px}
  .place{margin-top:2px}
  .place+.message{margin:12px auto 10px}
  .glass-button{margin-top:12px}
}
@media(max-width:370px){.portrait-scene{height:260px}.memorial-content{padding-top:18px}}
.music-button{width:44px;height:44px;min-height:44px;justify-content:center;gap:0;padding:0;border-radius:50%}
.music-button .music-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}