:root{--blue:#2fa6cc;--blue-dk:#1a7796;--blue-lt:#8fdcf0;--tint:#eef9fd;--ink:#15171a;--muted:#5c626b;--line:#e6ecef}
  *{box-sizing:border-box}
  body{margin:0;background:#fff;color:var(--ink);font-family:'Figtree',system-ui,sans-serif;line-height:1.6}
  a{color:var(--blue-dk)}
  .wrap{max-width:900px;margin:0 auto;padding:0 34px}
  /* nav */
  /* The bar's bottom padding is larger than its top on purpose: .s uses a
     line-height of .82, so the script descender on "Shloimy" overflows its
     text box by ~13px and would otherwise sit right on the border rule. */
  .head{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);z-index:20}
  .head .bar{max-width:900px;margin:0 auto;padding:12px 34px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px}
  /* The emblem ships as artwork, so the only job here is height; width
     follows from its own 1089x837 aspect. */
  .brand{display:flex;align-items:center;text-decoration:none}
  .brand img{height:84px;width:auto;display:block}
  .nav{display:flex;gap:6px}
  .nav a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:600;padding:8px 14px;border-radius:9px}
  .nav a:hover{background:var(--tint);color:var(--blue-dk)}
  .nav a[aria-current]{background:var(--ink);color:#fff}
  .navtoggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px;border-radius:9px;line-height:0}
  .navtoggle:hover{background:var(--tint);color:var(--blue-dk)}
  /* prayer */
  .main{padding-block:44px 10px;text-align:center}
  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-dk)}
  h1{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:8px 0 0}
  .heb{font-family:'Frank Ruhl Libre',serif;font-weight:500;font-size:34px;line-height:2.05;direction:rtl;max-width:640px;margin:40px auto 0}
  .en{color:var(--muted);max-width:520px;margin:24px auto 0;font-size:16.5px}
  /* play */
  .player{display:flex;flex-direction:column;align-items:center;gap:14px;margin:30px 0 6px}
  .play{width:104px;height:104px;border-radius:50%;border:none;cursor:pointer;background:var(--blue);color:#fff;
    display:grid;place-items:center;box-shadow:0 12px 30px rgba(47,166,204,.4);transition:transform .15s,background .15s}
  .play:hover{background:var(--blue-dk);transform:translateY(-2px)}
  .play:active{transform:translateY(0)}
  .play svg{margin-left:5px}
  .play.on svg{margin-left:0}
  .ptime{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
  .bar-outer{width:min(440px,80%);height:6px;background:var(--line);border-radius:6px;overflow:hidden}
  .bar-in{height:100%;width:0;background:var(--blue);border-radius:6px;transition:width .25s linear}
  /* options */
  .opts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:32px;padding:26px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:26px;text-align:left}
  .opt .lab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
  .seg{display:flex;background:var(--tint);border-radius:11px;padding:4px;gap:4px}
  .seg button{flex:1;border:none;background:transparent;font-family:inherit;font-weight:700;font-size:14px;color:var(--blue-dk);
    padding:10px 8px;border-radius:8px;cursor:pointer;transition:.14s;white-space:nowrap}
  .seg button:hover{background:#dff2fa}
  .seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(21,23,26,.12)}
  /* dedication */
  .ded{border-top:1px solid var(--line);margin-top:44px;padding:32px 0 46px;display:flex;align-items:center;justify-content:center;gap:16px;text-align:left}
  .ded img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 50%;background:#fff;filter:grayscale(.35);opacity:.85;flex:none}
  .ded .t1{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .ded .t2{font-weight:700;font-size:15.5px;margin-top:2px}
  .ded .t3{font-size:13px;color:var(--muted)}
  .ded a{text-decoration:none;font-weight:700}
  /* The quiet line under the dedication block. Deliberately outside .ded —
     that block is the memorial signature and a utility link does not belong
     inside it. */
  .feedback-line{text-align:center;margin:-18px 0 26px;font-size:13px}
  .feedback-line a{color:var(--muted);text-decoration:none}
  .feedback-line a:hover{color:var(--blue-dk)}

  /* The App Store callout, added the day the app was approved. The native
     Safari banner (the apple-itunes-app meta tag) already catches iPhone
     visitors; this is for everyone reading on anything else. */
  .appcta{border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:34px;
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .appcta .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-dk)}
  .appcta p{font-size:15px;line-height:1.5;color:var(--muted);margin:6px 0 0;max-width:44ch}
  .appcta .btn{flex:none}
  @media(max-width:520px){.appcta{justify-content:center;text-align:center}.appcta p{max-width:none}}
  :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  @media(max-width:680px){
    .opts{grid-template-columns:1fr}
    .heb{font-size:28px}
    .navtoggle{display:inline-flex;align-items:center}
    .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:4px;
      padding:10px 20px 18px;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);
      border-bottom:1px solid var(--line);box-shadow:0 14px 26px rgba(21,23,26,.10)}
    body.nav-open .nav{display:flex}
    .nav a{padding:13px 14px;font-size:16px;border-radius:9px}
  }

  /* ---- shared page furniture ---- */
  .lead{max-width:640px;margin:18px auto 0;color:var(--muted);font-size:17px}
  .sec{padding:44px 0}
  .sec + .sec{border-top:1px solid var(--line)}
  h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0}
  h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0}
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Figtree',sans-serif;font-weight:700;font-size:15px;
    padding:13px 24px;border-radius:12px;border:none;cursor:pointer;text-decoration:none;transition:.15s}
  .btn-blue{background:var(--blue);color:#fff}
  .btn-blue:hover{background:var(--blue-dk)}
  .btn-out{background:#fff;color:var(--ink);border:2px solid var(--ink)}
  .btn-out:hover{background:var(--ink);color:#fff}
  .card{border:1px solid var(--line);border-radius:16px;padding:24px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .chips{display:flex;flex-wrap:wrap;gap:9px}
  .chip{font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:999px;background:var(--tint);color:var(--blue-dk)}
  .quote{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;max-width:18ch;margin:0 auto;text-align:center}
  .quote em{font-style:normal;color:var(--blue)}
  .portrait{width:100%;max-width:282px;border-radius:16px;object-fit:cover;object-position:50% 12%;background:var(--tint)}
  .grid2.media{grid-template-columns:.75fr 1fr;align-items:start;gap:28px}
  @media(max-width:680px){.grid2,.grid3{grid-template-columns:1fr}}