/* LABBAYK / The Call — Phase 1. One continuous scroll-space from identity to Madinah.
   Original SVG colors and geometry are untouched. The reveal clips only the gap
   between the complete Arabic and English lettering, never individual strokes. */
:root{--call-charcoal:#1c1c1c;--call-midnight:#131e2a;--call-ivory:#f5f4ee}
.call-sequence{height:720svh;position:relative;background:var(--call-charcoal)}
.call-stage{height:100svh;min-height:560px;overflow:hidden;background:var(--call-charcoal);color:#fff;position:sticky;top:0;isolation:isolate}
.call-surface{position:absolute;inset:0;background:radial-gradient(ellipse at 58% 38%,rgba(37,100,170,.05),transparent 64%),var(--call-charcoal)}
.call-composition{position:absolute;inset:0;overflow:hidden;perspective:1600px}
.call-identity{position:absolute;z-index:3;left:50%;top:48%;width:min(48vw,760px);transform:translate(-50%,-50%) translate3d(var(--mark-x,0px),var(--mark-y,0px),0) scale(var(--mark-scale,1));opacity:var(--mark-opacity,.32);transform-origin:50% 40%;will-change:transform,opacity;pointer-events:none}
.call-identity h1{margin:0;line-height:1}.call-identity img{width:100%;height:auto;display:block;clip-path:inset(0 0 var(--wordmark-clip,27%) 0);filter:none;transform:none}
.call-dates{text-align:center;color:var(--call-ivory);margin-top:28px;display:flex;justify-content:center;align-items:center;gap:25px;opacity:var(--dates-opacity,0);transform:translateY(var(--dates-y,12px))}.call-dates span{color:rgba(255,255,255,.78);}
.call-travelers{position:absolute;z-index:4;left:56%;top:43%;width:37%;transform:translate3d(var(--travelers-x,160px),var(--travelers-y,0px),0);opacity:var(--travelers-opacity,0);pointer-events:none}
.call-kicker{color:#fed545;margin-bottom:24px}
.call-travelers h2{color:var(--call-ivory)}.call-travelers h2>span{display:block}
.call-travelers-note{color:rgba(255,255,255,.7);max-width:245px;margin-top:23px}
.call-promise{position:absolute;z-index:4;left:12%;top:40%;color:var(--call-ivory);opacity:var(--promise-opacity,0);transform:translate3d(var(--promise-x,100px),var(--promise-y,0px),0);pointer-events:none}.call-promise>span{color:#fff}
.madinah-arrival{position:absolute;z-index:2;inset:0;clip-path:inset(var(--arrival-top,27%) var(--arrival-right,12%) var(--arrival-bottom,23%) var(--arrival-left,67%));opacity:var(--arrival-opacity,0);will-change:clip-path,opacity;pointer-events:none;isolation:isolate}
.arrival-photograph{position:absolute;inset:-2%;transform:translate3d(var(--photo-x,65px),var(--photo-y,0px),0) scale(var(--photo-scale,1.1));transform-origin:65% 50%;will-change:transform}.arrival-photograph picture,.arrival-photograph img{display:block;width:100%;height:100%}.arrival-photograph img{object-fit:cover;object-position:53% 52%}
.arrival-caption-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,28,28,.18),transparent 26%,transparent 62%,rgba(28,28,28,.7));opacity:var(--arrival-caption-opacity,0);pointer-events:none}
.arrival-caption{position:absolute;z-index:1;left:var(--pad);bottom:13%;opacity:var(--arrival-caption-opacity,0);transform:translateY(var(--arrival-caption-y,20px));color:white}.arrival-heading-line{display:flex;align-items:baseline;gap:25px}.arrival-heading-line>p{opacity:.85}.arrival-description{margin-top:14px;color:#fff}
.arrival-credit{position:absolute;right:var(--pad);bottom:13%;opacity:var(--arrival-caption-opacity,0)}.arrival-credit a{display:inline-block;padding:12px 0;pointer-events:var(--credit-pointer,none)}
.call-interface{position:absolute;z-index:7;left:var(--pad);right:var(--pad);bottom:30px;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.75);pointer-events:none}
.call-scroll-hint{position:absolute;left:50%;bottom:env(safe-area-inset-bottom,0px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;color:var(--hdf-white,#fff);opacity:var(--scroll-hint-opacity,1)}
.call-scroll-label-mobile{display:none}
.call-scroll-hint i{display:inline-block;animation:call-cue-arrow 3.2s ease-in-out 3}
@keyframes call-cue-arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
/* The interface stays subordinate to the photographic and typographic space. */
.site-header{padding:23px var(--pad);gap:25px}.site-header::after{display:none}.brand,.brand img{width:112px}.brand img{max-height:none;height:auto}.header-title{opacity:.65}.header-title .header-sub,.header-date{display:none}.header-actions{gap:23px}.text-button{gap:8px}.donate-button{min-height:37px;padding:9px 18px;gap:20px}.site-header .donate-button{background:transparent;border-color:rgba(255,255,255,.4);border-radius:999px;color:#fff;}.site-header .donate-button:hover{background:rgba(255,255,255,.08);box-shadow:none;transform:none}.site-header.light .donate-button{color:#2564aa;border-color:rgba(37,100,170,.45)}.site-header.light .donate-button:hover{background:rgba(37,100,170,.05)}.site-header:not(.light) .donate-button{border-color:rgba(255,255,255,.4)}.site-header.scrolled:not(.light){background:rgba(28,28,28,.8);backdrop-filter:none}.site-header.in-call{background:transparent!important}.chapter-dots{opacity:.5}.chapter-dots a{height:22px}.chapter-dots.in-call{opacity:0;pointer-events:none}.journey-controls{gap:16px;bottom:25px}.journey-controls svg{width:13px;height:13px}.reading-progress{height:1px}#reading-progress{background:#fed545}
@media(max-width:1100px){.call-identity{width:57vw}.call-travelers{left:54%;width:42%}.call-promise{left:8%;}.call-dates{gap:16px;}.call-dates span{}}
@media(max-width:700px){
 .call-sequence{height:660svh}.call-stage{height:100svh;min-height:520px}.call-composition{perspective:1000px}
 .call-identity{left:50%;top:39%;width:82vw;max-width:460px;transform-origin:50% 40%}
 .call-dates{flex-direction:column;gap:9px;margin-top:27px;}.call-dates span{}
 .call-travelers{top:45%;left:var(--pad);width:calc(100% - 48px)}.call-kicker{margin-bottom:21px;}.call-travelers-note{max-width:225px;margin-top:18px}
 .call-promise{left:var(--pad);top:31%;width:calc(100% - 48px)}
 .madinah-arrival{clip-path:inset(var(--arrival-top,53%) var(--arrival-right,14%) var(--arrival-bottom,6%) var(--arrival-left,14%))}.arrival-photograph{inset:-2%;transform-origin:50% 58%}.arrival-photograph img{object-position:50% 51%}
 .arrival-caption{left:var(--pad);right:var(--pad);bottom:15%}.arrival-heading-line{display:block}.arrival-heading-line>p{margin-top:8px;}.arrival-description{margin-top:15px}.arrival-caption-shade{background:linear-gradient(180deg,rgba(28,28,28,.12),transparent 28%,transparent 50%,rgba(28,28,28,.86))}.arrival-credit{left:var(--pad);right:auto;bottom:8.7%;}
 .site-header{padding:19px var(--pad);gap:15px}.brand,.brand img{width:92px}.header-title{display:none}.header-actions{gap:14px}.site-header .donate-button{padding:8px 14px;min-height:34px;gap:14px}.chapters-toggle{padding:9px 2px}.call-interface{bottom:25px;}.journey-controls{bottom:20px;gap:13px}.chapter-dots{right:2px}
}
/* Keep touch instructions and the sound control on separate rows, including
   landscape phones. The hero composition and its native scroll space stay put. */
@media(max-width:700px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 .call-scroll-label-desktop{display:none}
 .call-scroll-label-mobile{display:inline}
 .call-scroll-hint{bottom:calc(49px + env(safe-area-inset-bottom,0px))}
}
/* Wide, short screens have horizontal clearance beside the sound control;
   return to the bottom row so the cue stays below the hero dates. */
@media(max-height:560px) and (orientation:landscape){
 .call-scroll-hint{bottom:env(safe-area-inset-bottom,0px)}
}
@media(max-height:650px) and (min-width:701px){.call-identity{width:min(43vw,530px);top:47%}.call-dates{margin-top:17px}.call-travelers{top:34%}.call-promise{top:35%;}.arrival-caption{bottom:13%}}
@media(max-height:670px) and (max-width:700px){.call-identity{width:69vw;top:39%}.call-dates{margin-top:19px;gap:7px}.call-travelers{top:41%}.call-promise{top:30%;}.arrival-caption{bottom:15%}}
/* Reduced motion retains every chapter and donation action in document flow. */

@media(prefers-reduced-motion:reduce){.call-sequence{height:auto!important}.call-stage{position:relative;height:auto;min-height:0;overflow:visible}.call-composition{position:relative;perspective:none}.call-identity{position:relative;left:auto;top:auto;width:65%;margin:auto;padding:120px 0 70px;transform:none!important;opacity:1!important}.call-identity img{clip-path:none!important}.call-dates{opacity:1!important;transform:none!important}.call-travelers,.call-promise{position:relative;left:auto;top:auto;width:auto;margin:0 var(--pad);padding:30px 0;transform:none!important;opacity:1!important}.call-promise{padding-bottom:70px}.madinah-arrival{position:relative;height:100svh;min-height:650px;clip-path:none!important;opacity:1!important}.arrival-photograph{transform:none!important}.arrival-caption,.arrival-credit,.arrival-caption-shade{opacity:1!important;transform:none!important}.arrival-credit a{pointer-events:auto}.call-interface{display:none}}
html:not(.js) .call-sequence{height:auto}html:not(.js) .call-stage{height:auto;min-height:0;position:relative}html:not(.js) .call-composition{position:relative}html:not(.js) .call-identity,html:not(.js) .call-travelers,html:not(.js) .call-promise{position:relative;left:auto;top:auto;width:auto;max-width:600px;margin:auto;padding:65px 25px;opacity:1;transform:none}html:not(.js) .call-identity{padding-top:135px}html:not(.js) .call-identity img{clip-path:none}html:not(.js) .call-dates{opacity:1;transform:none}html:not(.js) .madinah-arrival{position:relative;height:850px;clip-path:none;opacity:1}html:not(.js) .arrival-caption,html:not(.js) .arrival-caption-shade,html:not(.js) .arrival-credit{opacity:1;transform:none}html:not(.js) .call-interface{display:none}
/* Small visual controls with full touch and keyboard targets. */
.site-header .donate-button{position:relative;min-height:44px;border-color:transparent!important}
.site-header .donate-button::before{content:'';position:absolute;inset:4px 0;border:1px solid rgba(255,255,255,.4);border-radius:999px;pointer-events:none}
.site-header.light .donate-button::before{border-color:rgba(37,100,170,.45)}
.chapters-toggle{min-height:44px;min-width:44px;justify-content:center}
html:not(.js) .arrival-credit a{pointer-events:auto}

/* A clear two-line subtitle beneath the unchanged campaign artwork. */
.call-dates { flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(20px,2vw,28px); text-align: center; }
.call-dates span { display: block; }
@media (max-width:700px) { .call-dates { margin-top: 20px; gap: 6px; } }
@media (max-height:670px) { .call-dates { margin-top: 16px; gap: 6px; } }
/* Short landscape screens retain the complete lockup between header and controls. */
@media (max-height:560px) and (orientation:landscape) and (prefers-reduced-motion:no-preference) {
 html.js .call-stage { min-height: 0; }
 html.js .call-identity { width: min(43vw,calc((100svh - 225px) / .855)); max-width: 530px; top: 50%; }
 /* The readable subtitle may be wider than the height-constrained artwork. */
 html.js .call-dates { position: relative; left: 50%; width: max-content; max-width: calc(100vw - 48px); white-space: nowrap; transform: translate3d(-50%,var(--dates-y,12px),0); }
}