/* Layout: two worlds. The hub is the night after the quake: dark, photo-led, one warm light to act on.
   The create flow is a calm, light room with one question at a time. Same type and accent in both. */
:root {
  color-scheme: dark;
  --ink: #0e0c0b;  --ink-2: #171311;  --paper: #f3ece3;  --muted: #b9afa4;  --faint: #8a8076;
  --line-d: rgba(243,236,227,.12);
  --bulb: #f5c77e; --on-bulb: #24190c;
  --sand: #f7f3ee; --card: #ffffff; --text: #1f1a16; --soft: #6f645a; --line-l: #e6ded4; --focus: #b07a2a; --err: #b3402e; --ok: #3b8a4a;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gutter: clamp(18px, 5vw, 40px);
  --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--ink); }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--bulb); outline-offset: 3px; border-radius: 8px; }
.screen[hidden] { display: none !important; }

/* ---------- Hub (dark) ---------- */
.hub { min-height: 100svh; background: var(--ink); padding-bottom: calc(110px + env(safe-area-inset-bottom,0px)); }
.hub-top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 12px; background: rgba(14,12,11,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wordmark { font-family: var(--serif); font-size: 22px; line-height: 1; }
.lang { appearance: none; -webkit-appearance: none; height: 34px; border-radius: 999px; padding: 0 26px 0 12px; font-size: 13px; font-weight: 500;
  background: rgba(243,236,227,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f3ece3' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid var(--line-d); color: var(--paper); }
.lang option { color: #111; }
.hub-intro { padding: 18px var(--gutter) 22px; max-width: 46rem; margin-inline: auto; text-align: center; }
.hub-intro h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 11vw, 4.4rem); line-height: .95; letter-spacing: -0.015em; }
.hub-intro p { margin: 12px auto 0; max-width: 34ch; color: var(--muted); font-size: 15px; }
.wall { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; padding: 0 var(--gutter); }
@media (min-width: 760px) { .wall { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } }
@media (min-width: 1100px) { .wall { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tile { position: relative; display: block; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; border: 0; padding: 0; text-align: start; color: var(--paper); background: var(--ink-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
/* each photo drifts slowly inside its tile, at its own pace and direction */
.tile img, .tile .ph { animation: tileDrift var(--d, 24s) ease-in-out var(--dd, 0s) infinite alternate; will-change: transform; }
@keyframes tileDrift { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.16) translate(var(--dx, -3%), var(--dy, -2%)); } }
.tile .ph { position: absolute; inset: 0; }
.tile .ph svg { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); opacity: .35; }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(to top, rgba(14,12,11,.92), rgba(14,12,11,0)); }
.tile .cap b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.05; }
.tile .cap span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.tile .ex { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(14,12,11,.6); padding: 2px 6px; border-radius: 4px; color: var(--muted); }
.hub-dock { position: fixed; z-index: 6; inset-inline: 0; bottom: 0; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px)); background: linear-gradient(to top, rgba(14,12,11,.96) 45%, rgba(14,12,11,0)); }
.amber { width: 100%; max-width: 30rem; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; border: 0; border-radius: 999px;
  background: var(--bulb); color: var(--on-bulb); font-weight: 600; font-size: 17px; text-decoration: none; box-shadow: 0 12px 40px -14px rgba(245,199,126,.6); }
.amber:hover { background: #f8d293; }
.foot { padding: 34px var(--gutter) 0; color: var(--faint); font-size: 13px; }

/* ---------- Create flow (light) ---------- */
.flow { min-height: 100svh; background: var(--sand); color: var(--text); color-scheme: light; display: flex; flex-direction: column; }
.flow-top { position: sticky; top: 0; z-index: 5; background: var(--sand); padding: calc(env(safe-area-inset-top,0px) + 12px) var(--gutter) 10px; }
.flow-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 34rem; margin: 0 auto; }
.icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-l); background: var(--card); display: grid; place-items: center; color: var(--text); }
.icon[disabled] { visibility: hidden; }
.stepno { font-size: 13px; color: var(--soft); }
.lang.l { background-color: var(--card); color: var(--text); border-color: var(--line-l); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231f1a16' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); }
.bar { max-width: 34rem; margin: 10px auto 0; height: 4px; border-radius: 4px; background: var(--line-l); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--text); border-radius: 4px; transition: width .5s var(--ease); }
.flow-body { flex: 1; width: 100%; max-width: 34rem; margin: 0 auto; padding: 18px var(--gutter) calc(110px + env(safe-area-inset-bottom,0px)); }
.q { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 9vw, 2.8rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.help { margin: 10px 0 0; color: var(--soft); font-size: 15px; }
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--line-l); background: var(--card); text-align: start; font-size: 16px; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.choice svg { flex: none; color: var(--focus); }
.choice[aria-checked="true"] { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.choice .tick { margin-inline-start: auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-l); display: grid; place-items: center; flex: none; }
.choice .tick svg { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--ease); }
.choice[aria-checked="true"] .tick { background: var(--text); border-color: var(--text); }
.choice[aria-checked="true"] .tick svg { opacity: 1; transform: none; color: var(--sand); }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.field label, .lbl { font-size: 14px; font-weight: 500; color: var(--text); }
.field small { font-size: 13px; color: var(--soft); }
.input, textarea.input, select.input { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-l); background: var(--card); color: var(--text); font-size: 16px; }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.45; }
.input:focus { outline: none; border-color: var(--text); }
.phone { display: flex; gap: 8px; }
.phone select { width: 104px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-l); background: var(--card); font-size: 15px; color: var(--text); }
.chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--sand); }
.err { margin: 12px 0 0; color: var(--err); font-size: 14px; min-height: 1px; }
.flow-dock { position: fixed; z-index: 6; inset-inline: 0; bottom: 0; padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px)); background: linear-gradient(to top, var(--sand) 70%, rgba(247,243,238,0)); }
.dark-btn { width: 100%; max-width: 34rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; min-height: 56px; border: 0; border-radius: 999px; background: var(--text); color: var(--sand); font-weight: 600; font-size: 17px; }
.dark-btn:hover { background: #352d27; }
.anim { animation: in .45s var(--ease) both; }
@keyframes in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* photo step */
.drop { margin-top: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 4/5; border-radius: 18px; border: 1.5px dashed #cdbfb0; background: var(--card); color: var(--soft); text-align: center; padding: 20px; }
.drop strong { color: var(--text); font-weight: 500; font-size: 16px; }
/* sized to the screen height so the permission checkbox stays above the fold on phones */
.drop { max-height: max(220px, calc(100svh - 480px)); aspect-ratio: auto; min-height: 200px; }
.frame { margin: 18px auto 0; position: relative; width: clamp(150px, calc((100svh - 480px) * 9 / 16), 300px); aspect-ratio: 9/16; border-radius: 18px; overflow: hidden; background: #ddd; touch-action: none; cursor: grab; box-shadow: 0 20px 50px -30px rgba(0,0,0,.5); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.frame .hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 12px; color: #fff; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.row-actions { display: flex; justify-content: center; margin-top: 4px; }
.link { background: none; border: 0; color: var(--focus); font-weight: 500; font-size: 15px; padding: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 15px; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: #1f1a16; flex: none; }

/* ways to give */
.way { border: 1.5px solid var(--line-l); background: var(--card); border-radius: 16px; overflow: hidden; }
.way.on { border-color: var(--text); }
.way-h { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; background: none; text-align: start; color: var(--text); }
.way-h .lg, .sh-logo { overflow: hidden; }
.way-h .lg:has(.mk), .sh-logo:has(.mk) { background: none; }
.mk { width: 100%; height: 100%; display: block; }
.way-h .lg .flag { width: 22px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(14,12,11,.1); }
.way-h .lg { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #f1ebe4; font-weight: 700; font-size: 13px; flex: none; }
.way-h .t { flex: 1; min-width: 0; }
.way-h .t b { display: block; font-weight: 500; font-size: 16px; }
.way-h .t small { display: block; font-size: 13px; color: var(--soft); }
.sw { width: 46px; height: 28px; border-radius: 999px; background: #d9cfc4; position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.way.on .sw { background: var(--text); }
.way.on .sw::after { transform: translateX(18px); }
[dir="rtl"] .way.on .sw::after { transform: translateX(-18px); }
.way-b { padding: 0 14px 14px; }
.way-b .field { margin-top: 10px; }

/* preview step */
.thumb { display: flex; gap: 14px; align-items: flex-end; margin-top: 18px; }
.mini { position: relative; width: 112px; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: #2a2420; flex: none; box-shadow: 0 16px 40px -24px rgba(0,0,0,.6); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini .mt { position: absolute; left: 8px; right: 8px; bottom: 10px; color: #f3ece3; font-family: var(--serif); font-size: 14px; line-height: 1.02; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.mini::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(14,12,11,.85), rgba(14,12,11,0)); }
.mini .mt { z-index: 1; }
.see { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--text); background: none; color: var(--text); font-weight: 500; font-size: 14px; }
.addr { display: flex; align-items: center; border: 1.5px solid var(--line-l); border-radius: 12px; background: var(--card); overflow: hidden; }
.addr span { padding: 0 2px 0 14px; color: var(--soft); white-space: nowrap; }
.addr input { border: 0; min-height: 50px; flex: 1; min-width: 0; padding: 0 14px 0 0; background: none; }
.addr input:focus { outline: none; }
.helps { display: flex; flex-direction: column; gap: 8px; }
.help-row { display: flex; gap: 8px; align-items: center; }
.help-row .input { flex: 1; min-width: 0; }
.pm { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-l); background: var(--card); color: var(--text); display: grid; place-items: center; }
.pm:hover { border-color: var(--text); }
.pm:disabled { opacity: .35; cursor: default; border-color: var(--line-l); }
.add-line { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px dashed #cdbfb0; background: none; color: var(--text); font-weight: 500; font-size: 15px; }
.add-line:hover { border-color: var(--text); }

/* done */
.done { text-align: center; padding-top: 12vh; }
.done .ok { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; background: #e3efe2; color: var(--ok); }

/* full preview overlay (dark family page) */
.fp { position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--paper); overflow-y: auto; }
.fp-photo { position: relative; height: 92svh; }
.fp-photo img { width: 100%; height: 100%; object-fit: cover; }
.fp-photo::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(14,12,11,.95), rgba(14,12,11,0)); }
.fp-title { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: 110px; font-family: var(--serif); font-size: clamp(2.6rem, 11vw, 4rem); line-height: .95; margin: 0; font-weight: 400; max-width: 11ch; }
.fp-body { padding: 16px var(--gutter) 150px; max-width: 34rem; }
.fp-body .when { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--bulb); margin: 0 0 14px; }
.fp-body p.st { font-family: var(--serif); font-size: clamp(1.45rem, 6vw, 1.8rem); line-height: 1.3; margin: 0 0 22px; }
.fp-body h3 { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 26px 0 8px; }
.fp-body ul { list-style: none; padding: 0; margin: 0; }
.fp-body li { padding: 12px 0; border-bottom: 1px solid var(--line-d); font-size: 17px; }
.fp-body .by { margin-top: 26px; font-size: 13px; color: var(--faint); }
.fp-close { position: fixed; z-index: 41; top: calc(env(safe-area-inset-top,0px) + 12px); inset-inline-end: var(--gutter); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-d); background: rgba(14,12,11,.5); color: var(--paper); display: grid; place-items: center; }
.fp-dock { position: fixed; z-index: 41; inset-inline: 0; bottom: 0; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px)); background: linear-gradient(to top, rgba(14,12,11,.95) 45%, rgba(14,12,11,0)); }

.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom,0px)); transform: translate(-50%, 16px); opacity: 0; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; transition: all .35s var(--ease); pointer-events: none; max-width: calc(100% - 40px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Hub improvements ---------- */
.hub-eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bulb); }
.hub-count { margin: 14px 0 0 !important; font-size: 13px !important; color: var(--faint) !important; }
.how { max-width: 52rem; margin: 0 auto; padding: 44px var(--gutter) 0; }
.how h2 { margin: 0 0 18px; text-align: center; font-family: var(--serif); font-weight: 400; font-size: 30px; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; counter-reset: h; }
.how li { counter-increment: h; padding: 16px; border-radius: 16px; background: rgba(243,236,227,.04); border: 1px solid var(--line-d); font-size: 14px; color: var(--muted); }
.how li::before { content: counter(h); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bulb); color: var(--on-bulb); font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.how li b { display: block; color: var(--paper); font-weight: 500; font-size: 15px; margin-bottom: 2px; }
@media (max-width: 640px) { .how ol { grid-template-columns: 1fr; } .how li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; } .how li::before { grid-row: span 2; margin: 0; } }
.creator { max-width: 40rem; margin: 40px auto 0; padding: 26px 22px; border-radius: 22px; border: 1px solid var(--line-d); background: rgba(243,236,227,.03); text-align: center; }
.creator h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; }
.creator p { margin: 8px auto 18px; color: var(--muted); max-width: 32ch; }
.outline-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(243,236,227,.4); background: rgba(14,12,11,.55); color: var(--paper); font-weight: 600; font-size: 16px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.outline-btn:hover { border-color: var(--paper); }
.hub-dock .outline-btn { width: 100%; max-width: 30rem; margin-inline: auto; display: flex; }
.creator-wrap { padding: 0 var(--gutter); }
/* the sticky "Create a help page" flies into the Affected box when it scrolls into view, and back out when you scroll up */
.creator .outline-btn { transition: opacity .35s ease .12s; }
.hub.docked .creator .outline-btn { opacity: 0; transition-delay: 0s; }
.hub-dock.gone { visibility: hidden; pointer-events: none; }

/* ---------- Family page (dark) ---------- */
.page { min-height: 100svh; background: var(--ink); color: var(--paper); }
.pg-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); }
.pg-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.pg-bg .soft { inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); filter: blur(30px) saturate(1.1); opacity: var(--e, 0); }
.pg-bg .sharp { opacity: calc(1 - var(--e, 0)); object-position: var(--fx, 50%) 100%; }
.pg-bg .ph { position: absolute; inset: 0; display: grid; place-items: center; }
.pg-bg .ph svg { opacity: .3; margin-bottom: 30vh; }
.pg-bg .shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,12,11,.4) 0%, rgba(14,12,11,0) 18%, rgba(14,12,11,0) 48%, rgba(14,12,11,.85) 100%); }
.pg-bg .dim { position: absolute; inset: 0; background: var(--ink); opacity: calc(var(--e, 0) * .62); }
.pg-top { position: fixed; z-index: 7; inset-inline: 0; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top,0px) + 12px) var(--gutter) 10px; transition: background .3s; }
.pg-top.solid { background: rgba(14,12,11,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pg-top .home { border: 0; background: none; color: var(--paper); font-family: var(--serif); font-size: 20px; padding: 0; display: inline-flex; align-items: center; gap: 8px; }
.pg-main { position: relative; z-index: 1; }
.pg-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) calc(104px + env(safe-area-inset-bottom,0px)); }
.pg-hero .when, .pg-story .when { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bulb); }
.pg-hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.9rem, 13vw, 4.6rem); line-height: .95; letter-spacing: -0.015em; max-width: 20ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.pg-story { padding: 18px var(--gutter) calc(140px + env(safe-area-inset-bottom,0px)); max-width: 34rem; }
.pg-story .st { margin: 0 0 26px; font-family: var(--serif); font-size: clamp(1.45rem, 5.8vw, 1.8rem); line-height: 1.3; }
.pg-story h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pg-story ul { list-style: none; margin: 0 0 30px; padding: 0; }
.pg-story li { padding: 12px 0; border-bottom: 1px solid var(--line-d); font-size: 17px; }
.pills { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; }
.pill-btn { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(243,236,227,.22); background: rgba(14,12,11,.35); color: var(--paper); font-size: 16px; font-weight: 500; text-decoration: none; text-align: start; }
.pill-btn:hover { border-color: rgba(243,236,227,.5); }
.pill-btn .ic { width: 22px; display: grid; place-items: center; }
.pill-btn.p-wa .ic { color: #5fd07e; } .pill-btn.p-ig .ic { color: #e88ab0; } .pill-btn.p-ln .ic { color: var(--bulb); }
.pg-story .by { margin: 30px 0 0; font-size: 13px; color: var(--faint); }
.pg-foot { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.pg-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-d); }
.pg-dock { position: fixed; z-index: 6; inset-inline: 0; bottom: 0; display: flex; gap: 10px; align-items: center; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px)); background: linear-gradient(to top, rgba(14,12,11,.92) 45%, rgba(14,12,11,0)); }
.pg-dock .amber { flex: 1; max-width: none; margin: 0; }
.pg-dock .round-d { width: 58px; height: 58px; flex: none; overflow: hidden; transition: width .45s var(--ease), opacity .3s ease, margin .45s var(--ease), border-width .45s; }
/* when the share buttons are on screen, the share icon steps aside and Donate takes the full width */
.pg-dock.pills-in .round-d { width: 0; opacity: 0; margin-inline-start: -10px; border-width: 0; pointer-events: none; }
.closed-note { margin: 0 0 26px; padding: 18px; border-radius: 16px; border: 1px solid rgba(159,212,166,.35); background: rgba(159,212,166,.08); }
.closed-note b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--paper); margin-bottom: 4px; }
.closed-note span { color: var(--muted); }
.pv-banner { position: fixed; z-index: 8; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top,0px) + 62px); padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* donate sheet */
.pg-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(8,6,5,.6); opacity: 0; pointer-events: none; transition: opacity .35s; }
.pg-backdrop.open { opacity: 1; pointer-events: auto; }
.pg-sheet { position: fixed; z-index: 31; inset-inline: 0; bottom: 0; margin-inline: auto; max-width: 30rem; max-height: 90svh; overflow-y: auto; overscroll-behavior: contain; background: #171311; color: var(--paper); border-radius: 24px 24px 0 0; padding: 10px 22px calc(26px + env(safe-area-inset-bottom,0px)); transform: translateY(105%); transition: transform .5s var(--ease); }
.pg-sheet.open { transform: none; }
.pg-sheet .grab { width: 38px; height: 4px; border-radius: 4px; background: var(--line-d); margin: 0 auto 14px; }
.sh-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; min-height: 40px; }
.sh-head .sh-logo.hd { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.sh-head h2 { flex: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.sh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.sh-tiles.n2 { grid-template-columns: 1fr 1fr; }
.sh-tiles.n3 { grid-template-columns: repeat(3, 1fr); }
.sh-tiles.n4 { grid-template-columns: 1fr 1fr; }
.sh-tiles.n4 .sh-tile { flex-direction: row; justify-content: flex-start; min-height: 64px; padding: 10px 12px; }
.sh-tiles.n4 .sh-logo { width: 38px; height: 38px; }
.sh-list { display: flex; flex-direction: column; gap: 10px; }
.sh-way { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 74px; padding: 12px 16px 12px 12px; border-radius: 20px; border: 1px solid var(--line-d); background: rgba(243,236,227,.03); color: var(--paper); text-align: start; font: inherit; }
.sh-way:hover { background: rgba(243,236,227,.07); }
.sh-way .t { flex: 1; min-width: 0; }
.sh-way b { display: block; font-size: 17px; font-weight: 600; }
.sh-way small { display: block; margin-top: 2px; font-size: 13px; color: var(--faint); }
.sh-way .chev { flex: none; opacity: .5; }
[dir="rtl"] .sh-way .chev { transform: scaleX(-1); }
.sh-way.hi { background: #f5c77e; border-color: transparent; color: var(--ink); }
.sh-way.hi:hover { background: #f8d293; }
.sh-way.hi small { color: rgba(14,12,11,.62); }
.sh-way.hi .sh-logo { background: rgba(36,25,12,.12); }
.sh-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 104px; padding: 12px 6px; border-radius: 18px; border: 1px solid var(--line-d); background: rgba(243,236,227,.03); color: var(--paper); font-size: 14px; font-weight: 500; }
.sh-tile:hover { background: rgba(243,236,227,.07); }
.sh-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(243,236,227,.07); font-weight: 700; font-size: 14px; }
.sh-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; font-size: 13px; color: var(--faint); }
.sh-or::before, .sh-or::after { content: ""; flex: 1; height: 1px; background: var(--line-d); }
.sh-method { display: flex; align-items: center; gap: 12px; margin: -6px 0 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line-d); }
.sh-method .sh-logo { width: 40px; height: 40px; flex: none; }
.sh-method b { display: block; font-size: 16px; font-weight: 600; }
.sh-method small { display: block; font-size: 13px; color: var(--faint); }
.sh-alt { margin-top: 18px; min-height: 48px; font-size: 14px; }
.sh-note { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--faint); }
.sh-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.sh-tabs button { flex: 1; min-height: 42px; border-radius: 999px; border: 1px solid var(--line-d); background: none; color: var(--muted); font-size: 13px; font-weight: 500; }
.sh-tabs button[aria-pressed="true"] { border-color: var(--paper); color: var(--paper); }
.sh-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-d); }
.sh-row:last-child { border-bottom: 0; }
.sh-row .kv2 { flex: 1; min-width: 0; }
.sh-row small { display: block; font-size: 12px; color: var(--faint); }
.sh-row span { display: block; font-size: 16px; overflow-wrap: anywhere; }
.sh-copy { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(243,236,227,.08); color: var(--paper); font-size: 13px; font-weight: 500; }
/* Instagram steps */
.ig-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(159,212,166,.14); color: #9fd4a6; font-size: 13px; font-weight: 600; }
.ig .ig-one { margin: 10px 0 0; font-size: 16px; color: var(--muted); max-width: none; }
.ig-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: start; max-width: 22rem; counter-reset: s; }
.ig-steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: var(--muted); font-size: 15px; }
.ig-steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: rgba(243,236,227,.1); color: var(--paper); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.ig-steps b { color: var(--paper); font-weight: 600; }
.pill.closed { background: #e3ecf6; color: #2f5276; }

/* ---------- Share kit (dark, one big moment) ---------- */
.kit { min-height: 100svh; background: var(--ink); color: var(--paper); }
.kit-photo { position: relative; height: 58svh; overflow: hidden; }
.kit-photo img { width: 100%; height: 100%; object-fit: cover; }
.kit-photo::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(to top, var(--ink), rgba(14,12,11,0)); }
.kit-close { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top,0px) + 12px); inset-inline-start: var(--gutter); }
.kit-body { position: relative; z-index: 1; margin-top: -18svh; padding: 0 var(--gutter) calc(200px + env(safe-area-inset-bottom,0px)); max-width: 34rem; }
.live { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9fd4a6; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9fd4a6; box-shadow: 0 0 0 4px rgba(159,212,166,.2); }
.kit-body h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 11vw, 3.8rem); line-height: .95; max-width: 11ch; }
.kit-body .lead { margin: 16px 0 6px; color: var(--muted); font-size: 16px; max-width: 30ch; }
.kit-body .url { margin: 0; font-size: 14px; color: var(--bulb); }
.kit-dock { position: fixed; z-index: 6; inset-inline: 0; bottom: 0; padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px)); background: linear-gradient(to top, rgba(14,12,11,.97) 60%, rgba(14,12,11,0)); }
.kit-dock > * { max-width: 30rem; margin-inline: auto; }
.wa-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border-radius: 999px; background: #25a24a; color: #fff; font-weight: 600; font-size: 17px; text-decoration: none; }
.wa-btn:hover { background: #2bb455; }
.kit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ghost { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px; border: 1px solid rgba(243,236,227,.28); background: rgba(243,236,227,.05); color: var(--paper); font-weight: 500; font-size: 15px; text-decoration: none; }
.ghost:hover { border-color: rgba(243,236,227,.5); }
.round-d { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-d); background: rgba(14,12,11,.45); color: var(--paper); display: grid; place-items: center; }

/* Instagram interstitial */
.ig { position: fixed; inset: 0; z-index: 45; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top,0px) + 54px) var(--gutter) calc(20px + env(safe-area-inset-bottom,0px)); text-align: center; overflow-y: auto; }
.ig .okd { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(159,212,166,.15); color: #9fd4a6; }
.ig h2 { margin: 16px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 2.2rem; line-height: 1; }
.ig p { margin: 0; color: var(--muted); max-width: 28ch; }
.ig p b { color: var(--paper); font-weight: 600; }
.story { position: relative; margin: 26px 0; width: max(150px, min(62vw, 230px, calc((100svh - 460px) * .5625))); aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; background: #2a2420; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); flex: none; }
.story img { width: 100%; height: 100%; object-fit: cover; }
.story::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(14,12,11,.9), rgba(14,12,11,0)); }
.story .sh { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 58px; text-align: start; font-family: var(--serif); font-size: 26px; line-height: 1; }
.story .stk { position: absolute; z-index: 1; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; background: #fff; color: #1f1a16; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
/* looping hint: tap the sticker icon, pick Link, the link sticker lands. Without motion, the end state shows. */
.story .sbar { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; gap: 6px; }
.story .sbar i { position: relative; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.32); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; }
.story .tap { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: 0 0 0 2px rgba(255,255,255,.85); opacity: 0; pointer-events: none; }
.story .sbar .tap { animation: tap1 8s infinite; }
.story .tray .tap { animation: tap2 8s infinite; }
.story .tray { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 18px 10px 14px; border-radius: 14px 14px 0 0; background: rgba(28,24,21,.95); transform: translateY(105%); animation: tray 8s infinite cubic-bezier(.2,.8,.2,1); }
.story .tray::before { content: ""; position: absolute; top: 7px; left: 50%; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: rgba(255,255,255,.3); }
.story .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.story .chips span { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 7px 0; border-radius: 7px; background: #fff; color: #1f1a16; font-size: 8.5px; font-weight: 700; letter-spacing: .03em; }
.story .stk { animation: stkIn 8s infinite, pulse 2.2s ease-in-out infinite; }
@keyframes tap1 { 0%, 9% { opacity: 0; transform: scale(1.5); } 12% { opacity: 1; transform: scale(1); } 15% { transform: scale(.75); } 19%, 100% { opacity: 0; transform: scale(.75); } }
@keyframes tray { 0%, 16% { transform: translateY(105%); } 23%, 38% { transform: translateY(0); } 45%, 100% { transform: translateY(105%); } }
@keyframes tap2 { 0%, 28% { opacity: 0; transform: scale(1.5); } 31% { opacity: 1; transform: scale(1); } 34% { transform: scale(.75); } 38%, 100% { opacity: 0; transform: scale(.75); } }
@keyframes stkIn { 0%, 45% { opacity: 0; transform: translateX(-50%) scale(.6); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } 53%, 91% { opacity: 1; transform: translateX(-50%) scale(1); } 97%, 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
.ig .acts { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.ig .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.light-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 17px; text-decoration: none; border: 0; }

/* ---------- Admin (light, laptop first) ---------- */
.admin { min-height: 100svh; background: var(--sand); color: var(--text); color-scheme: light; display: flex; flex-direction: column; }
.adm-top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: calc(env(safe-area-inset-top,0px) + 12px) var(--gutter) 12px; background: rgba(247,243,238,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-l); }
.adm-top .wordmark { color: var(--text); }
.adm-top .wordmark small { font-family: var(--sans); font-size: 13px; color: var(--soft); margin-inline-start: 6px; }
.filters { display: flex; gap: 6px; margin-inline-start: auto; }
.filters button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-l); background: var(--card); font-size: 13px; color: var(--soft); }
.filters button[aria-pressed="true"] { border-color: var(--text); color: var(--text); font-weight: 600; }
.filters b { font-weight: 600; margin-inline-start: 4px; }
.adm-main { flex: 1; display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.adm-list { border-inline-end: 1px solid var(--line-l); background: #fbf8f4; overflow-y: auto; }
.item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px var(--gutter) 14px 18px; border: 0; border-bottom: 1px solid #eee6dc; background: none; text-align: start; color: var(--text); }
.item:hover { background: #f4eee6; }
.item[aria-current="true"] { background: var(--card); box-shadow: inset 3px 0 0 var(--text); }
.av { width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; background: #d9cfc4; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.item .tx { flex: 1; min-width: 0; }
.item .tx b { display: block; font-weight: 500; }
.item .tx small { display: block; color: var(--soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.pending { background: #fcefd6; color: #8a5a12; } .pill.live { background: #e1f2e4; color: #2f6b3b; } .pill.hidden { background: #ece8e3; color: #6b625a; }
.adm-detail { padding: 24px clamp(18px, 3vw, 40px) 60px; overflow-y: auto; }
.det { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; max-width: 980px; }
.dprev { position: sticky; top: 90px; align-self: start; width: 220px; aspect-ratio: 9/16; border-radius: 18px; overflow: hidden; background: #2a2420; box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.dprev img, .dprev .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dprev::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(14,12,11,.9), rgba(14,12,11,0)); }
.dprev .mt { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 16px; color: #f3ece3; font-family: var(--serif); font-size: 22px; line-height: 1; }
.dh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dh h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 2.4rem; line-height: 1; }
.acts-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.btn { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid #cfc4b8; background: var(--card); color: var(--text); font-weight: 500; font-size: 14px; text-decoration: none; }
.btn:hover { border-color: var(--text); }
.btn.dark { background: var(--text); border-color: var(--text); color: var(--sand); }
.btn.green { background: #25a24a; border-color: #25a24a; color: #fff; }
.btn.glow { box-shadow: 0 0 0 4px rgba(37,162,74,.22); }
.kv { margin: 0; display: grid; grid-template-columns: 150px minmax(0,1fr); border-top: 1px solid var(--line-l); }
.kv dt, .kv dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line-l); font-size: 15px; }
.kv dt { color: var(--soft); }
.kv dd { overflow-wrap: anywhere; }
.kv textarea, .kv input { width: 100%; }
.adm-back { display: none; }
@media (max-width: 760px) {
  .adm-main { grid-template-columns: 1fr; }
  .adm-main.has-sel .adm-list { display: none; }
  .adm-main:not(.has-sel) .adm-detail { display: none; }
  .det { grid-template-columns: 1fr; }
  .dprev { position: relative; top: 0; width: 160px; }
  .kv { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; padding-bottom: 0; }
  .adm-back { display: inline-flex; margin-bottom: 16px; }
  .filters { margin-inline-start: 0; }
}
.proto-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.proto-links button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px dashed rgba(243,236,227,.3); background: none; color: var(--muted); font-size: 13px; }
.done .proto-links { justify-content: center; margin-top: 28px; }
.done .proto-links button { border-color: #cdbfb0; color: var(--soft); }

/* ---------- Mobile gestures ---------- */
html.sheet-open, html.ig-open { overflow: hidden; }
html.on-page { overscroll-behavior-y: none; }   /* our pull-down, not the browser's pull-to-refresh */
.pg-sheet .grab, .pg-sheet .sh-head { touch-action: none; }
.frame { touch-action: pan-y; }
.pg-main, .pg-bg, .kit-photo, .kit-body { transform-origin: 50% 0; }
/* Instagram stories are posted from phones; on a computer the Story buttons step aside */
@media (hover: hover) and (pointer: fine) {
  .p-ig, #kStory { display: none !important; }
  .kit-row { grid-template-columns: 1fr; }
}

/* ---------- Desktop: text column on the left, photo held still on the right ---------- */
@media (min-width: 960px) {
  :root { --col: min(46vw, 640px); }
  #page .pg-bg { inset: 0 0 0 var(--col); width: auto; }
  #page .pg-bg .sharp { opacity: 1; object-position: var(--fx, 50%) 45%; }
  #page .pg-bg .soft, #page .pg-bg .dim { display: none; }
  #page .pg-bg .shade { background: linear-gradient(to right, var(--ink) 0%, rgba(14,12,11,0) 18%), linear-gradient(to bottom, rgba(14,12,11,.35), rgba(14,12,11,0) 20%); }
  #page .pg-bg .ph svg { margin-bottom: 0; }
  #page .pg-main { width: var(--col); }
  #page .pg-hero { min-height: 0; padding: calc(22vh + 40px) clamp(32px, 4vw, 64px) 28px; }
  #page .pg-hero h1 { font-size: clamp(3.4rem, 5vw, 5rem); text-shadow: none; }
  #page .pg-story { padding: 12px clamp(32px, 4vw, 64px) 140px; max-width: none; }
  #page .pg-story .st { font-size: 1.6rem; }
  #page .pg-top { width: var(--col); padding-inline: clamp(32px, 4vw, 64px); }
  #page .pg-top.solid { background: rgba(14,12,11,.92); }
  #page .pg-dock { inset-inline-end: auto; width: var(--col); padding-inline: clamp(32px, 4vw, 64px); }
  #page .pv-banner { left: calc(var(--col) / 2); }
  /* donate sheet becomes a centered dialog */
  #page > .pg-sheet { top: 50%; bottom: auto; left: 50%; inset-inline-end: auto; width: min(30rem, 92vw); max-height: 86vh; border-radius: 24px; margin: 0;
    opacity: 0; pointer-events: none; transform: translate(-50%, -47%) scale(.97); transition: transform .35s cubic-bezier(.2,.9,.1,1), opacity .25s ease; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7); }
  #page > .pg-sheet.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
  #page > .pg-sheet:not(.open) { transition: transform .2s ease-in, opacity .2s ease-in; }
  #page > .pg-sheet .grab { visibility: hidden; height: 0; margin-bottom: 8px; }
  /* share kit: same split */
  .kit-photo { position: fixed; inset: 0 0 0 var(--col); width: auto; height: 100vh; }
  .kit-photo::after { inset: 0; background: linear-gradient(to right, var(--ink) 0%, rgba(14,12,11,0) 18%); }
  .kit-body { width: var(--col); max-width: none; margin-top: 0; padding: calc(24vh + 30px) clamp(32px, 4vw, 64px) 220px; }
  .kit-dock { inset-inline-end: auto; width: var(--col); padding-inline: clamp(32px, 4vw, 64px); background: none; }
  .kit-dock > * { margin-inline: 0; }
  .kit-close { inset-inline-start: auto; inset-inline-end: 24px; }
  /* homepage */
  .wall { max-width: 1280px; margin-inline: auto; }
}

/* Home ↔ page morph: short and snappy. The new page fades in over the old one, which stays opaque, so nothing shows through. */
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2,.9,.1,1); }
::view-transition-old(root) { animation: none; opacity: 1; }
::view-transition-new(root) { animation: vtIn .18s ease-out both; }
::view-transition-old(hv-photo), ::view-transition-new(hv-photo) { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
/* same photo on both sides: the new crop settles on top of the old in a blink, so there's no double exposure */
::view-transition-old(hv-photo) { animation: none; }
::view-transition-new(hv-photo) { animation: vtIn .14s ease-out both; }
::view-transition-old(hv-top), ::view-transition-old(hv-dock) { animation: vtOut .1s ease-out both; }
::view-transition-new(hv-top), ::view-transition-new(hv-dock) { animation: vtIn .16s .06s ease-out both; }
::view-transition-image-pair(hv-photo) { overflow: hidden; animation: vtR .42s cubic-bezier(.2,.9,.1,1) both; }
:root[data-vt="close"]::view-transition-image-pair(hv-photo) { animation-name: vtRb; }
::view-transition-old(hv-title) { animation: vtOut .14s ease-out both; }
::view-transition-new(hv-title) { animation: vtIn .24s .1s ease-out both; }
::view-transition-old(hv-sub) { animation: vtOut .1s ease-out both; }
::view-transition-new(hv-sub) { animation: vtIn .18s .22s ease-out both; }
/* bars and the prototype tag ride above the photo, so they never vanish and pop back */
:root:is([data-vt="open"],[data-vt="close"],[data-vt="fade"]) :is(.hub-top, .pg-top) { view-transition-name: hv-top; }
:root:is([data-vt="open"],[data-vt="close"],[data-vt="fade"]) :is(.hub-dock, .pg-dock) { view-transition-name: hv-dock; }
:root[data-vt] @keyframes vtR { from { border-radius: 14px; } to { border-radius: 0; } }
@keyframes vtRb { from { border-radius: 0; } to { border-radius: 14px; } }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }
/* Share kit entrance: photo settles in, text rises in turn, the share buttons slide up last */
.kit.enter .kit-photo img { animation: kitImg .8s cubic-bezier(.2,.8,.2,1) both; }
.kit.enter .kit-close { animation: vtIn .3s .35s ease-out both; }
.kit.enter .kit-body > * { animation: kitUp .5s cubic-bezier(.2,.8,.2,1) both; }
.kit.enter .kit-body > :nth-child(1) { animation-delay: .12s; }
.kit.enter .kit-body > :nth-child(2) { animation-delay: .18s; }
.kit.enter .kit-body > :nth-child(3) { animation-delay: .24s; }
.kit.enter .kit-body > :nth-child(4) { animation-delay: .3s; }
.kit.enter .kit-dock { animation: kitDock .5s .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kitImg { from { transform: scale(1.08); opacity: 0; } }
@keyframes kitUp { from { transform: translateY(14px); opacity: 0; } }
@keyframes kitDock { from { transform: translateY(100%); } }
:root:is([data-vt="open"],[data-vt="close"],[data-vt="fade"]) .kit-dock { view-transition-name: hv-dock; }
:root[data-vt] .kit-close { visibility: hidden; }
:root[data-vt="ig-in"]::view-transition-image-pair(hv-photo) { animation-name: vtRb; }
:root[data-vt="ig-in"]::view-transition-new(hv-photo) { animation: vtIn .16s .24s ease-out both; }   /* plain photo shrinks, story details appear once it's small */
:root[data-vt="ig-out"]::view-transition-new(hv-photo) { animation: vtIn .1s ease-out both; }
::view-transition-old(hv-o1), ::view-transition-old(hv-o2), ::view-transition-old(hv-o3) { animation: vtOut .14s ease-out both; }
::view-transition-new(hv-o1), ::view-transition-new(hv-o2), ::view-transition-new(hv-o3) { animation: vtIn .22s .18s ease-out both; }
/* interstitial content rises in under the moving photo */
.ig:not([hidden]) > :not(.story) { animation: kitUp .45s cubic-bezier(.2,.8,.2,1) both; }
.ig:not([hidden]) > :nth-child(1) { animation-delay: .1s; }
.ig:not([hidden]) > :nth-child(2) { animation-delay: .15s; }
.ig:not([hidden]) > :nth-child(3) { animation-delay: .2s; }
.ig:not([hidden]) > .acts { animation-delay: .26s; }
/* Donate sheet motion */
.pg-sheet { transition: transform .45s cubic-bezier(.2,.9,.1,1); touch-action: pan-y; }
.pg-sheet:not(.open) { transition: transform .3s cubic-bezier(.5,0,.9,.4); }
.pg-backdrop { transition: opacity .3s ease; }
.pg-sheet .grab { cursor: grab; }
.sh-ghost { position: absolute; inset: 0; padding: inherit; pointer-events: none; }
.cur-seg { position: relative; }
.cur-seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 999px; background: var(--paper); transition: transform .32s cubic-bezier(.2,.9,.1,1); }
.cur-seg[data-i="1"]::before { transform: translateX(calc(100% + 4px)); }
.cur-seg button { position: relative; z-index: 1; transition: color .25s; }
.cur-seg button[aria-pressed="true"] { background: none; }
.sh-copy { display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s; }
.sh-copy.ok { background: rgba(159,212,166,.16); color: #9fd4a6; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }

/* ---------- Live site additions ---------- */
[hidden] { display: none !important; }
img { max-width: 100%; }
:root:lang(he) { --serif: "Bellefair", "Instrument Serif", Georgia, serif; --sans: "Heebo", "DM Sans", system-ui, sans-serif; }
[dir="rtl"] .home svg, [dir="rtl"] .sh-head [data-v="main"] svg { transform: scaleX(-1); }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243,236,227,.3); }
.wall-empty { grid-column: 1 / -1; margin: 8px 0 24px; text-align: center; color: var(--muted); font-size: 15px; }
.way-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--soft); }
.adm-note { color: var(--soft); font-size: 14px; padding: 8px 4px; }
.adm-login { max-width: 22rem; }
.adm-login h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; margin: 0 0 6px; }
.adm-login p { color: var(--soft); margin: 0 0 16px; }
.adm-login .btn { margin-top: 6px; }
.adm-miss { color: var(--err); font-size: 13px; }
.adm-tip { display: block; margin-top: 4px; font-size: 12px; color: var(--soft); }
.adm-ways { gap: 8px; }
.adm-photo { margin-top: 10px; display: inline-flex; cursor: pointer; }
.seg-l { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 999px; background: #efe8df; }
.seg-l button { border: 0; background: none; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--soft); }
.seg-l button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.gift-line { margin: -10px 0 26px; font-size: 14px; color: var(--muted); }
.sh-gift { margin: -12px 0 18px; font-size: 13px; color: var(--faint); }
.pill.biz { background: #eae3f5; color: #4f3b78; }
.biz-tag { font-style: normal; font-size: 11px; font-weight: 600; color: #4f3b78; background: #eae3f5; padding: 1px 6px; border-radius: 4px; margin-inline-start: 4px; }
[dir="rtl"] #back svg { transform: scaleX(-1); }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] #slug { direction: ltr; text-align: right; }
[dir="rtl"] .addr { direction: ltr; }
/* Chabad relief card on the home page */
.relief-wrap { padding: 8px var(--gutter) 6px; max-width: 1280px; margin-inline: auto; }
.relief { display: grid; gap: 6px; align-content: end; min-height: 320px; padding: 20px 20px 18px; border-radius: 18px; border: 0; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(to top, rgba(14,12,11,.97) 0%, rgba(14,12,11,.86) 38%, rgba(14,12,11,.35) 70%, rgba(14,12,11,.45) 100%),
    url(/assets/relief.jpg) center 35% / cover, #1a1613;
  box-shadow: inset 0 0 0 1px rgba(243,236,227,.1);   /* one even hairline all round, drawn over the photo */
  color: var(--paper); text-decoration: none; max-width: 40rem; margin-inline: auto; }
.relief-s { text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.relief:hover { box-shadow: inset 0 0 0 1px rgba(245,199,126,.45); }
.relief-tag { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bulb); }
.relief-t { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.05; }
.relief-s { color: var(--muted); font-size: 14.5px; }
.relief-btn { margin-top: 8px; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--bulb); color: var(--on-bulb); font-weight: 600; font-size: 15px; }
[dir="rtl"] .relief-btn svg { transform: scaleX(-1); }
/* Bank letters page (light) and the PDF pages */
.letter { min-height: 100svh; background: var(--sand); color: var(--text); color-scheme: light; }
.lt-wrap { max-width: 34rem; margin-inline: auto; padding: calc(env(safe-area-inset-top,0px) + 16px) var(--gutter) 60px; }
.lt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.lt-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.lt-th { width: 72px; height: 72px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; }
.lt-th img { width: 100%; height: 100%; object-fit: cover; }
.lt-add { display: inline-flex; cursor: pointer; }
.lt-pad { display: block; width: 100%; aspect-ratio: 3 / 1; border-radius: 14px; border: 1px dashed #c9bdaf; background: #fff; touch-action: none; }
.lt-dl { display: grid; gap: 10px; margin-top: 18px; }
.lt-stage { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }
.lt-page { width: 794px; height: 1123px; padding: 70px 76px; background: #fff; color: #161311; font: 15px/1.6 "DM Sans", Arial, sans-serif; position: relative; box-sizing: border-box; overflow: hidden; }
.lt-page[lang="he"] { font-family: "Heebo", Arial, sans-serif; }
.lt-page h1 { font: 400 34px/1.1 "Instrument Serif", Georgia, serif; margin: 26px 0 22px; }
.lt-page[lang="he"] h1 { font-family: "Bellefair", serif; }
.lt-page p { margin: 0 0 12px; }
.lt-li { margin: 0 0 4px !important; padding-inline-start: 8px; }
.lt-list { margin-bottom: 14px; }
.lt-date { color: #6f645a; font-size: 13px; }
.lt-to { font-weight: 600; } .lt-re { font-weight: 600; margin-bottom: 18px !important; }
.lt-sign { margin-top: 26px; } .lt-sign img { display: block; height: 80px; margin: 4px 0; }
.lt-sigline { height: 60px; border-bottom: 1px solid #999; width: 260px; margin-bottom: 8px; }
.lt-foot { position: absolute; bottom: 36px; inset-inline-start: 76px; color: #9a8f84; font-size: 12px; }
.lt-photos h2 { font: 400 22px/1.3 "Instrument Serif", Georgia, serif; margin: 0 0 22px; display: grid; gap: 4px; }
.lt-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.lt-grid img { width: 100%; height: 300px; object-fit: cover; border-radius: 8px; }
.lt-grid.n1 { grid-template-columns: 1fr; } .lt-grid.n1 img { height: 700px; }

/* ---------- Admin, refreshed: overview on top, searchable list, page details in cards ---------- */
.adm-top { gap: 10px 14px; }
.ad-range { display: inline-flex; gap: 2px; padding: 3px; margin-inline-start: auto; border-radius: 999px; background: #efe8df; }
.ad-range button { border: 0; background: none; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--soft); }
.ad-range button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ad-over { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 14px var(--gutter) 4px; }
.ad-over:empty { display: none; }
.ad-card { display: grid; gap: 2px; align-content: start; text-align: start; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-l); color: var(--text); font: inherit; }
button.ad-card { cursor: pointer; } button.ad-card:hover { border-color: #cfc4b8; }
.ad-card small { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.ad-card b { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; line-height: 1.1; }
.ad-card span { font-size: 12.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-card.warn { background: #fff6e4; border-color: #f0d9a8; } .ad-card.warn b { color: #8a5a12; }
.adm-main { padding-top: 10px; }
.adm-list { display: flex; flex-direction: column; }
.ad-tools { position: sticky; top: 0; z-index: 2; display: grid; gap: 8px; padding: 10px 14px; background: #fbf8f4; border-bottom: 1px solid #eee6dc; }
.ad-search { min-height: 40px; font-size: 14px; }
.ad-tools .filters { margin: 0; flex-wrap: wrap; }
.ad-tools .filters button { min-height: 32px; padding: 0 10px; }
.item .av { border-radius: 12px; }
.ad-side { display: grid; justify-items: end; gap: 4px; flex: none; }
.ad-side small { font-size: 12px; color: var(--soft); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #c9bdaf; }
.dot.pending { background: #e2a43c; } .dot.live { background: #3b9a4f; } .dot.closed { background: #6b8fbf; } .dot.hidden { background: #b9afa4; }
.pill.closed { background: #e3ebf6; color: #34558a; }
.adm-detail { padding-top: 6px; }
.ad-det { display: grid; gap: 14px; max-width: 880px; }
.ad-head { display: flex; gap: 18px; align-items: flex-start; }
.ad-photo { position: relative; flex: none; width: 96px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #d9cfc4; }
.ad-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-id { flex: 1; min-width: 0; }
.ad-id .dh h2 { font-size: 2.1rem; }
.ad-url { display: inline-block; margin-top: 4px; font-size: 13.5px; color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--line-l); }
.ad-id .acts-row { margin: 12px 0 0; align-items: center; }
.ad-more { position: relative; }
.ad-more summary { list-style: none; cursor: pointer; }
.ad-more summary::-webkit-details-marker { display: none; }
.ad-menu { position: absolute; z-index: 20; top: calc(100% + 6px); inset-inline-start: 0; min-width: 230px; display: grid; padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-l); box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); }
.ad-menu > button, .ad-menu > a { display: block; text-align: start; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.ad-menu > button:hover, .ad-menu > a:hover { background: #f4eee6; }
.ad-menu hr { border: 0; border-top: 1px solid var(--line-l); margin: 4px 6px; }
.ad-menu .danger { color: var(--err); }
.ad-box { padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-l); }
.ad-box h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.ad-box h3 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ad-h3act { margin-inline-start: auto; display: inline-flex; gap: 8px; text-transform: none; letter-spacing: 0; }
.ad-h3act .btn { min-height: 34px; padding: 0 14px; }
.ad-box .kv { border-top: 0; grid-template-columns: 140px minmax(0, 1fr); }
.ad-box .kv dt, .ad-box .kv dd { padding: 10px 0; }
.ad-box .kv > dt:last-of-type, .ad-box .kv > dd:last-of-type { border-bottom: 0; }
.ad-box .kv dd.ad-hl { font-family: var(--serif); font-size: 1.4rem; line-height: 1.15; }
.ad-help { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 999px; background: #f4eee6; font-size: 13.5px; }
.ad-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ad-nums b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.ad-nums small { color: var(--soft); font-size: 13px; }
.ad-sub { margin: 12px 0 0; font-size: 13.5px; color: var(--soft); }
.ad-ways { display: grid; gap: 8px; }
.ad-way { display: flex; align-items: center; gap: 12px; }
.ad-way .lg { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; overflow: hidden; background: #f1ebe4; }
.ad-way .lg:has(.mk) { background: none; }
.ad-way b { display: block; font-weight: 500; font-size: 14.5px; }
.ad-way small { display: block; color: var(--soft); font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .ad-over { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ad-over { grid-template-columns: 1fr 1fr; }
  .ad-over .ad-card:last-child { display: none; }
  .ad-range { order: 3; margin-inline-start: 0; }
  .ad-head { gap: 14px; } .ad-photo { width: 72px; }
  .ad-nums { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .ad-box .kv { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { .admin:has(.adm-main.has-sel) .ad-over { display: none; } }