@charset "UTF-8";
:root {
  --night:#0c1520; --night2:#172634; --gold:#d9b99b; --gold-bright:#f2d2b1;
  --text:#f7f1e7; --muted:#bcb7b0; --border:rgba(233,204,172,.19);
}
* {box-sizing:border-box}
html {min-height:100%;background:var(--night);scroll-behavior:smooth}
body {
  margin:0;min-height:100svh;overflow-x:hidden;position:relative;
  background:radial-gradient(ellipse 58vw 56vh at 50% 49%,#213044 0%,transparent 100%),
  linear-gradient(160deg,#09131f 0%,#142230 53%,#0b1622 100%);
  color:var(--text);
  font-family:"Noto Naskh Arabic","Traditional Arabic","Segoe UI",Tahoma,serif;
  -webkit-font-smoothing:antialiased;
}
button,a {-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible {outline:2px solid var(--gold-bright);outline-offset:5px}
::selection {background:#b89a78;color:#101b28}
.page {position:relative;z-index:1;width:min(100%,1460px);margin:0 auto;min-height:100svh;display:flex;flex-direction:column}
.ambient {position:fixed;pointer-events:none;border-radius:50%;filter:blur(55px);opacity:.52;z-index:0;animation:ambience 16s ease-in-out infinite alternate}
.ambient-one {width:420px;height:420px;top:18%;left:-210px;background:radial-gradient(circle,rgba(118,134,156,.23),transparent 70%)}
.ambient-two {width:550px;height:550px;bottom:-360px;right:-200px;background:radial-gradient(circle,rgba(201,167,139,.15),transparent 70%);animation-delay:-7s}
.stars {position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.star {position:absolute;width:2px;height:2px;border-radius:50%;background:#e1cbb5;opacity:.32;animation:twinkle var(--duration,8s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
.site-header {min-height:95px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px clamp(24px,5.8vw,78px);z-index:2}
.brand {display:inline-flex;align-items:center;gap:14px;color:var(--text);text-decoration:none}
.brand-flower {font:400 34px Georgia,serif;color:var(--gold)}
.brand-text {display:flex;flex-direction:column;gap:3px}
.brand-ar {font-size:15px;color:#e4d0b9;letter-spacing:.02em}
.brand-en {font-family:Arial,sans-serif;font-size:9px;color:#aeaca7;letter-spacing:.22em;direction:ltr}
.header-date {display:inline-flex;align-items:center;gap:13px;font-size:14px;color:#bdb8b1;white-space:nowrap}
.header-date span {color:var(--gold);font-size:10px}
.memorial {
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:14px 20px 20px;
  position:relative;
}
.memorial:before {content:"";position:absolute;z-index:-1;width:min(85vw,710px);height:min(85vw,710px);top:28%;left:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,rgba(237,201,163,.04) 0%,rgba(237,201,163,.02) 27%,transparent 65%)}
.memorial-ornament {display:flex;align-items:center;gap:18px;color:#c6a685;margin-bottom:13px}
.memorial-ornament span {width:65px;height:1px;background:linear-gradient(90deg,transparent,rgba(229,194,159,.45))}
.memorial-ornament span:last-child {transform:scaleX(-1)}
.memorial-ornament b {font-size:11px;font-weight:400}
.kicker {font-size:13px;letter-spacing:.12em;color:#d2ba9f;margin:0 0 12px}
.name {font-size:clamp(35px,4.7vw,65px);font-weight:600;letter-spacing:.015em;line-height:1.3;margin:0;color:#f8f0e6;text-shadow:0 2px 30px rgba(251,223,190,.05)}
.name-caption {color:#bfb6ab;font-size:clamp(15px,1.6vw,19px);margin:9px 0 0}
.heart-wrap {position:relative;width:151px;height:143px;margin:15px auto 5px;display:grid;place-items:center}
.heart-outer {position:absolute;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(231,196,158,.25),rgba(231,196,158,.065) 35%,transparent 70%);filter:blur(6px);animation:breathe 4.8s ease-in-out infinite}
.heart-orbit {position:absolute;border:1px solid rgba(222,188,154,.14);border-radius:50%;animation:orbit 21s linear infinite}
.orbit-one {height:96px;width:96px}
.orbit-two {height:135px;width:135px;border-color:rgba(222,188,154,.065);animation-duration:30s;animation-direction:reverse}
.orbit-one:before {position:absolute;content:"";height:3px;width:3px;top:8px;left:17px;background:#e0c19e;border-radius:50%}
.heart {width:53px;height:53px;overflow:visible;filter:drop-shadow(0 0 19px rgba(224,191,153,.3));animation:heartbeat 4.8s ease-in-out infinite}
.heart path {fill:var(--gold)}
.counter-lead {margin:0;color:#c8c2bc;font-size:17px}
.counter {width:100%;display:flex;flex-direction:column;align-items:center}
.count-area {display:flex;justify-content:center;align-items:baseline;gap:13px;margin:0 0 3px;line-height:1.15;white-space:nowrap}
.days {font-family:"Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif;font-size:clamp(98px,13vw,154px);font-weight:400;line-height:1.24;letter-spacing:-.035em;color:#fff8ef;font-variant-numeric:tabular-nums;text-shadow:0 0 45px rgba(255,244,229,.09)}
.count-unit {font-size:clamp(25px,3.4vw,37px);font-weight:400;color:var(--gold-bright)}
.counter-subtitle {margin:0;color:#e1d5c8;font-size:clamp(16px,2.1vw,22px)}
.since {display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px;color:#a9a7a6;font-size:16px}
.since-line {height:1px;width:47px;background:linear-gradient(90deg,transparent,var(--border))}
.since-line:last-child {transform:scaleX(-1)}
.date-hint {font-size:12px;color:#888f97;margin:9px 0 0;min-height:15px;font-family:Tahoma,Arial,sans-serif}
.prayer {display:flex;align-items:flex-start;justify-content:center;gap:8px;max-width:780px;margin:17px auto 15px}
.prayer p {margin:0;color:#dfc9b0;line-height:2;font-size:clamp(18px,2.6vw,25px);font-weight:400}
.prayer-symbol {font-family:Georgia,serif;font-size:36px;line-height:1.9;color:rgba(229,195,160,.38)}
.prayer-symbol.end {align-self:end}
.actions {display:flex;align-items:center;gap:10px}
.share-button,.motion-button {border:1px solid rgba(224,195,162,.30);background:rgba(223,189,157,.075);color:#e5d1b8;border-radius:40px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.share-button:hover,.motion-button:hover {border-color:rgba(239,210,180,.64);background:rgba(223,189,157,.16);transform:translateY(-1px)}
.share-button {display:flex;align-items:center;gap:11px;justify-content:center;padding:10px 23px;font-size:14px}
.share-button svg {width:17px;height:17px}
.motion-button {width:42px;height:42px;display:grid;place-items:center}
.motion-button svg {width:18px;height:18px}
.closing {font-size:15px;color:#99969a;margin:15px 0 0}
.footer {display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px clamp(24px,5.8vw,78px) 23px;min-height:62px;border-top:1px solid rgba(225,199,168,.10);color:#858f9b;font-size:12px}
.footer span:last-child {letter-spacing:.19em;font-size:10px;font-family:Arial,sans-serif}
.footer-star {color:#ad9277}
.toast {position:fixed;z-index:20;bottom:30px;left:50%;transform:translateX(-50%);background:#263441;color:#f9ebdb;border:1px solid #705f53;border-radius:13px;padding:13px 20px;font:14px Tahoma,sans-serif;box-shadow:0 15px 45px rgba(0,0,0,.4);white-space:nowrap}
.toast[hidden] {display:none}
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after {animation:none!important;transition:none!important}
@keyframes heartbeat {0%,100%{transform:scale(1)}48%{transform:scale(1.075)}57%{transform:scale(1.052)}}
@keyframes breathe {0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.18);opacity:1}}
@keyframes twinkle {0%{opacity:.07}100%{opacity:.38}}
@keyframes orbit {from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes ambience {from{transform:translate(0,0)}to{transform:translate(30px,-20px)}}
@media (min-height:870px) and (min-width:740px) {
  .heart-wrap {margin-top:27px;margin-bottom:19px;height:155px}
  .prayer {margin-top:28px;margin-bottom:25px}
  .memorial {padding-bottom:28px}
}
@media (max-width:680px) {
  .site-header {min-height:70px;padding:16px 19px}
  .brand {gap:9px}
  .brand-flower {font-size:27px}
  .brand-ar {font-size:12px}
  .brand-en {font-size:7px;letter-spacing:.1em}
  .header-date {font-size:10px;gap:7px}
  .memorial {padding:10px 16px 17px;justify-content:center}
  .memorial-ornament {margin-bottom:8px;gap:11px}
  .memorial-ornament span {width:33px}
  .kicker {font-size:11px;margin-bottom:6px;letter-spacing:.055em}
  .name {font-size:clamp(32px,9vw,48px)}
  .name-caption {font-size:14px;margin:5px 0 0}
  .heart-wrap {width:118px;height:114px;margin:12px auto 3px}
  .heart-outer {width:115px;height:115px}
  .orbit-one {width:88px;height:88px}
  .orbit-two {width:116px;height:116px}
  .heart {width:45px;height:45px}
  .counter-lead {font-size:14px}
  .count-area {gap:9px;margin:0}
  .days {font-size:clamp(94px,24vw,136px)}
  .count-unit {font-size:29px}
  .counter-subtitle {font-size:16px}
  .since {margin-top:15px;font-size:13px;gap:10px}
  .since-line {width:31px}
  .date-hint {font-size:11px;margin:7px 0 0}
  .prayer {margin:12px auto}
  .prayer p {font-size:clamp(16px,4.25vw,22px);line-height:1.95}
  .prayer-symbol {font-size:20px}
  .desktop-break {display:none}
  .share-button {font-size:12px;padding:9px 19px}
  .motion-button {width:38px;height:38px}
  .closing {font-size:12px;margin:12px 0 0}
  .footer {padding:13px 19px 17px;font-size:10px;min-height:50px}
  .footer span:last-child {font-size:8px;letter-spacing:.10em}
}
@media (max-height:720px) {
  .site-header {min-height:58px;padding-block:8px}
  .memorial {padding-top:4px;padding-bottom:8px}
  .heart-wrap {height:85px;width:105px;margin-top:4px}
  .heart-outer {width:95px;height:95px}
  .orbit-one {width:70px;height:70px}
  .orbit-two {width:100px;height:100px}
  .heart {width:39px;height:39px}
  .days {font-size:clamp(72px,16vh,111px)}
  .prayer {margin:8px 0}
  .closing {margin-top:7px}
  .since {margin-top:8px}
  .footer {min-height:40px;padding-top:6px;padding-bottom:9px}
}
@media (prefers-reduced-motion:reduce) {
 *,*:before,*:after {animation:none!important;scroll-behavior:auto!important;transition:none!important}
}

@media (min-width:681px) and (max-height:1000px) {
  .site-header {min-height:70px;padding-block:13px}
  .memorial {padding:2px 20px 8px}
  .memorial-ornament {margin-bottom:5px}
  .kicker {margin-bottom:5px}
  .name {font-size:clamp(36px,4vw,55px)}
  .name-caption {margin-top:2px}
  .heart-wrap {height:123px;width:135px;margin:7px auto 3px}
  .heart-outer {height:112px;width:112px}
  .orbit-one {height:85px;width:85px}
  .orbit-two {height:119px;width:119px}
  .heart {height:49px;width:49px}
  .days {font-size:clamp(100px,11vw,137px)}
  .counter-lead {font-size:16px}
  .since {margin-top:11px}
  .prayer {margin:8px auto 6px}
  .prayer p {font-size:20px;line-height:1.7}
  .closing {margin-top:7px}
  .footer {min-height:45px;padding-top:8px;padding-bottom:10px}
}

/* v1.1.0: entire memorial is fitted into mobile visual viewport, never body scrolled. */
.memorial-content {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
@media (max-width:680px), (orientation:landscape) and (max-height:600px) {
  html, body {height:100%;max-height:100%;overflow:hidden;overscroll-behavior:none}
  body {height:100vh;height:100dvh}
  .page {
    height:100vh;height:100dvh;
    min-height:0;
    max-height:100dvh;
    overflow:hidden;
  }
  .site-header {flex:0 0 auto}
  .footer {flex:0 0 auto}
  .memorial {
    flex:1 1 0;
    min-height:0;
    max-height:100%;
    display:block;
    overflow:hidden;
    padding:0;
    position:relative;
  }
  .memorial-content {
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    margin:0;
    padding:0 14px;
    transform-origin:center center;
    transform:translate(-50%,-50%) scale(var(--fit-scale,1));
    will-change:transform;
  }
  .memorial:before {top:50%}
  .name {line-height:1.48}
  .prayer p {line-height:2.0}
  .footer {
    padding-bottom:max(11px,env(safe-area-inset-bottom,0px));
  }
}

/* Memorial v1.2 — accessible, optional portrait and quiet controls */
:root { --reading-line-height: 1.8; }
body { font-family:"Noto Naskh Arabic","Noto Sans Arabic","Geeza Pro","Traditional Arabic",Tahoma,serif }
.name,.kicker,.prayer p,.counter-lead,.counter-subtitle,.name-caption,.closing,.dialog-header h2,.prayer-list p { letter-spacing:0; }
.name { line-height:1.48; padding-block:.08em; }
.name-caption,.counter-lead,.counter-subtitle {line-height:1.9}
.kicker { line-height:1.8 }
.heart-wrap { isolation:isolate }
.heart-wrap:has(.portrait:not([hidden])) { width:clamp(114px,12vw,168px); height:clamp(114px,12vw,168px); }
.portrait {
  position:absolute;inset:6%;width:88%;height:88%;z-index:3;
  object-fit:cover;object-position:center 35%;border-radius:50%;
  border:2px solid rgba(242,210,177,.52);
  box-shadow:0 0 0 5px rgba(225,188,149,.065),0 14px 38px rgba(0,0,0,.25);
}
.portrait[hidden] {display:none}
.heart-wrap:has(.portrait:not([hidden])) .heart {display:none}
.actions {display:flex;justify-content:center;flex-wrap:wrap;max-width:100%;gap:8px}
.extra-button,.dialog-action {
  border:1px solid rgba(224,195,162,.30);
  background:rgba(223,189,157,.075);
  color:#eddac1;cursor:pointer;
  padding:10px 13px;border-radius:30px;
  font:inherit;font-size:13px;line-height:1.7;
  transition:background .2s,border-color .2s;
}
.extra-button:hover,.dialog-action:hover {background:rgba(223,189,157,.18);border-color:rgba(239,210,180,.64)}
.extra-button:focus-visible,.dialog-action:focus-visible,.dialog-close:focus-visible {outline:2px solid #f2d2b1;outline-offset:3px}
.memorial-dialog {
  z-index:50;box-sizing:border-box;color:#f6ecdf;background:linear-gradient(155deg,#1c2a38,#111d2b);
  border:1px solid rgba(226,189,153,.5);
  width:min(92vw,610px);max-height:min(80dvh,730px);
  border-radius:24px;padding:24px 25px 26px;
  text-align:center;font:inherit;
  box-shadow:0 24px 100px #0009;
  overflow-x:hidden;overflow-y:auto;
}
.memorial-dialog::backdrop {background:rgba(4,9,15,.79);backdrop-filter:blur(7px)}
.dialog-header {display:flex;gap:10px;align-items:start;justify-content:space-between}
.dialog-header h2 {flex:1;color:#f4d5b8;font-size:clamp(19px,3vw,25px);line-height:1.65;font-weight:600;margin:0}
.dialog-close {flex:0 0 auto;width:36px;height:36px;color:#e6c8ab;border:1px solid #66574b;border-radius:50%;background:transparent;cursor:pointer;font-size:25px;line-height:32px}
.prayer-list {margin:14px 0 20px}
.prayer-list p {font-size:clamp(16px,3vw,21px);line-height:2.15;padding:14px 0;margin:0;border-bottom:1px solid rgba(225,199,168,.13)}
.prayer-list p:last-child {border-bottom:0}
.dialog-action {background:#d9b99b;color:#111c27;padding:10px 25px;font-weight:600}
.install-dialog p {font-size:17px;line-height:2.0;color:#e6dacb}
@media(max-width:680px) {
  .memorial-content .actions {max-width:375px}
  .share-button,.extra-button {font-size:12px;padding:8px 13px;line-height:1.6}
  .motion-button {width:37px;height:37px;flex:0 0 auto}
  .memorial-dialog {padding:15px 16px 19px;border-radius:18px}
  .memorial-dialog .prayer-list p {font-size:17px}
}
@media(prefers-reduced-motion:reduce) {
  .memorial-dialog::backdrop {backdrop-filter:none}
}

/* Self-hosted Arabic font to preserve vowel marks without external network requests. */
@font-face {font-family:'Noto Naskh Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/noto-naskh-arabic-400.woff2') format('woff2');}
@font-face {font-family:'Noto Naskh Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/noto-naskh-arabic-700.woff2') format('woff2');}

@media (min-width:681px) and (min-height:760px) and (max-height:1000px) {
  .page {height:100dvh;min-height:0}
  .memorial {min-height:0}
}

/* Tap-to-zoom memorial portrait: overlay stays entirely within the viewport. */
.portrait:not([hidden]) { cursor:zoom-in; }
.portrait:focus-visible {outline:3px solid #f2d2b1; outline-offset:5px}
.portrait-zoom {position:fixed;inset:0;width:100%;height:100dvh;z-index:1000;display:grid;place-items:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 280ms ease;isolation:isolate}
.portrait-zoom.is-open {visibility:visible;opacity:1;pointer-events:auto}
.portrait-zoom-backdrop {position:absolute;inset:0;background:rgba(6,12,20,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:zoom-out}
.portrait-zoom-image {position:relative;display:block;max-width:min(90vw,650px);max-height:84dvh;width:auto;height:auto;object-fit:contain;border:2px solid rgba(233,202,170,.55);border-radius:20px;box-shadow:0 18px 80px #000a;transform:scale(.76);opacity:.6;transition:transform 330ms cubic-bezier(.2,.7,.2,1),opacity 330ms ease;cursor:zoom-out}
.portrait-zoom.is-open .portrait-zoom-image {transform:scale(1);opacity:1}
.portrait-zoom-close {position:absolute;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));height:42px;width:42px;border:1px solid #dbc5ac;border-radius:50%;background:#172432dd;color:#fff;font-size:29px;cursor:pointer}
.portrait-zoom-close:focus-visible {outline:2px solid #f2d2b1;outline-offset:4px}
@media(prefers-reduced-motion:reduce) {.portrait-zoom,.portrait-zoom-image {transition:none!important}}

/* v1.4.0: restrained memorial palette inspired by Tahani's portrait.
   Midnight-blue studio backdrop, black hijab, red embroidery and warm peach. */
:root {
  --night:#14151b;
  --night2:#1e3349;
  --gold:#d7906f;
  --gold-bright:#f2c8ad;
  --text:#f7efe7;
  --muted:#c7b8b1;
  --border:rgba(215,144,111,.24);
  --tahani-rose:#9c1a27;
  --tahani-ruby:#d72334;
  --tahani-slate:#31495f;
}
html {background:var(--night)}
body {
  background:
   radial-gradient(ellipse 54vw 55vh at 50% 40%,rgba(49,73,95,.54) 0%,transparent 78%),
   radial-gradient(ellipse 25vw 43vh at 3% 66%,rgba(156,26,39,.17),transparent 76%),
   radial-gradient(ellipse 27vw 40vh at 98% 28%,rgba(95,54,69,.24),transparent 76%),
   linear-gradient(155deg,#14151b 0%,#1e3349 49%,#14151b 100%);
}
::selection {background:#9c1a27;color:#fff8f2}
.ambient-one {background:radial-gradient(circle,rgba(156,26,39,.18),transparent 70%)}
.ambient-two {background:radial-gradient(circle,rgba(215,144,111,.16),transparent 70%)}
.star {background:#e7b9a3}
.brand-flower,.header-date span,.memorial-ornament,.footer-star {color:var(--gold)}
.brand-ar,.kicker {color:#edc5ad}
.name {color:#fff5ea;text-shadow:0 0 28px rgba(215,144,111,.10)}
.name-caption,.counter-lead,.counter-subtitle {color:#e2d6ce}
.days {color:#fff7ef;text-shadow:0 0 40px rgba(215,144,111,.12)}
.prayer p {color:#f0d2be}
.prayer-symbol {color:rgba(215,144,111,.43)}
.memorial:before {background:radial-gradient(circle,rgba(215,144,111,.06),rgba(156,26,39,.025) 37%,transparent 69%)}
.heart-outer {background:radial-gradient(circle,rgba(215,144,111,.28),rgba(156,26,39,.08) 40%,transparent 70%)}
.heart-orbit {border-color:rgba(215,144,111,.23)}
.heart path {fill:var(--gold)}
.portrait {
  border:2px solid rgba(242,200,173,.75);
  box-shadow:0 0 0 5px rgba(215,144,111,.09),0 0 29px rgba(156,26,39,.20),0 14px 38px rgba(0,0,0,.35);
}
.share-button,.motion-button,.extra-button {
  border-color:rgba(215,144,111,.48);
  background:linear-gradient(145deg,rgba(98,32,42,.29),rgba(30,51,73,.60));
  color:#f7dfce;
}
.share-button:hover,.motion-button:hover,.extra-button:hover {
  border-color:rgba(242,200,173,.85);
  background:linear-gradient(145deg,rgba(156,26,39,.40),rgba(49,73,95,.65));
  box-shadow:0 0 17px rgba(156,26,39,.16);
}
.footer {border-top-color:rgba(215,144,111,.16);color:#aeb2ba}
.toast {background:#1e2c3b;border-color:#9c5752}
.memorial-dialog {background:linear-gradient(155deg,#26394c,#14151b);border-color:rgba(215,144,111,.6)}
.dialog-header h2 {color:#f2c8ad}
.dialog-action {background:#d7906f;color:#14151b}
.portrait-zoom-backdrop {background:rgba(9,13,21,.91)}
.portrait-zoom-image {border-color:rgba(242,200,173,.70);box-shadow:0 0 45px rgba(156,26,39,.17),0 18px 80px #000a}

/* v1.4.1: keep memorial content within the desktop viewport too. */
@media (min-width:681px) and (min-height:760px) and (max-height:1000px) {
  .memorial-content { transform:scale(.93);transform-origin:center center; }
}