/* HDF typography: the single owner of font roles, weights and responsive scale.
   Legacy component sheets own layout/motion only. The approved opening SVG and
   its reveal remain unchanged; readable subtitle tokens sit beneath the mark. */
:root {
  --font-primary: Inter, Arial, sans-serif;
  --type-hero-purpose: clamp(20px,1.6vw,24px);
  --type-hero-date: clamp(15px,1.1vw,17px);
  --font-display: 'Barlow Condensed', Inter, Arial, sans-serif;
  --font-arabic: Almarai, Inter, Arial, sans-serif;
  --font-accent: 'Story Script', Inter, Arial, sans-serif;
  --weight-body: 400; --weight-subheading: 500; --weight-heading: 600; --weight-heading-strong: 700; --weight-display: 600;
  --type-display: clamp(80px, 7.1vw, 112px);
  --type-editorial: clamp(48px, 4.45vw, 64px);
  --type-section: clamp(32px, 3.05vw, 44px);
  --type-body: clamp(16px, 15px + .25vw, 20px);
  --type-ui: clamp(14px, 13px + .2vw, 16px);
  --type-meta: clamp(12px, 11px + .15vw, 14px);
  --type-destination: clamp(30px, 2.35vw, 36px);
  --type-cinema: clamp(64px, 5.6vw, 80px);
  --type-sponsor-display: clamp(56px, 5.7vw, 86px);
  --type-figure: clamp(64px, 6.1vw, 88px);
  --leading-display: .98; --leading-heading: 1.08; --leading-body: 1.6; --leading-meta: 1.45;
  --tracking-display: -.012em; --tracking-heading: -.035em; --tracking-label: .045em;
  --text-body: var(--type-body); --text-small: 14px; --text-caption: var(--type-meta);
  --text-heading-1: var(--type-editorial); --text-heading-2: var(--type-section); --text-heading-3: 22px;
  --text-display: var(--type-display); --text-figure: var(--type-figure);
}
html { font-synthesis: none; }
body { font: 400 var(--type-body)/var(--leading-body) var(--font-primary); }
button,input,summary,legend,label,select,textarea { font-family: var(--font-primary); }
button,input,select,textarea { font-size: var(--type-ui); line-height: 1.4; }
h1,h2,h3,h4 { font-family: var(--font-primary); font-weight: 600; line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h1 { font-size: var(--type-editorial); } h2 { font-size: var(--type-section); } h3,h4 { font-size: 22px; }
em { font: inherit; font-style: normal; }
[lang=ar] { font-family: var(--font-arabic); font-weight: 400; letter-spacing: normal; line-height: 1.8; }
h1[lang=ar],h2[lang=ar],h3[lang=ar] { font-weight: 700; }
.type-display { font: 600 var(--type-display)/var(--leading-display) var(--font-display); letter-spacing: var(--tracking-display); }
.type-editorial { font: 600 var(--type-editorial)/var(--leading-heading) var(--font-primary); letter-spacing: var(--tracking-heading); }
.type-destination { font: 600 var(--type-destination)/1.05 var(--font-display); letter-spacing: .01em; }
.type-body { font: 400 var(--type-body)/var(--leading-body) var(--font-primary); }
.type-meta,.eyebrow,.small-label { font: 500 var(--type-meta)/var(--leading-meta) var(--font-primary); letter-spacing: var(--tracking-label); }
.type-ui { font: 600 var(--type-ui)/1.4 var(--font-primary); letter-spacing: 0; }

/* Official artwork leads; purpose and dates are clear, subordinate typography. */
.call-dates { font: 600 var(--type-hero-purpose)/1.25 var(--font-primary); letter-spacing: .025em; color: var(--hdf-white); }
.call-dates span { font: 400 var(--type-hero-date)/1.4 var(--font-primary); letter-spacing: .02em; color: var(--campaign-muted-dark); }

/* Functional typography is readable; compact means restrained spacing. */
.site-header { font: 400 var(--type-ui)/1.4 var(--font-primary); }
.header-title { font: 500 12px/1.4 var(--font-primary); letter-spacing: .055em; }
.chapters-toggle,.text-button { font: 500 15px/1.4 var(--font-primary); letter-spacing: 0; }
.giving-cta[data-donate][data-amount] { font: 400 var(--type-ui)/1.35 var(--font-primary); letter-spacing: 0; text-transform: none; }
.giving-cta[data-donate][data-amount] .giving-cta__copy { font: inherit; }
.giving-cta[data-donate][data-amount] .giving-cta__title { font: 600 16px/1.35 var(--font-primary); letter-spacing: 0; }
.giving-cta[data-donate][data-amount] .giving-cta__amount { font: 400 13px/1.4 var(--font-primary); letter-spacing: 0; }
.giving-cta[data-donate][data-amount].giving-cta--compact .giving-cta__title { font-size: 15px; }
.giving-cta[data-donate][data-amount].giving-cta--secondary .giving-cta__title { font-size: 14px; }
.giving-cta-status,.giving-preview-note,.makkah-conversion .giving-preview-note,.call-promise .giving-cta-status { font: 400 12px/1.5 var(--font-primary); letter-spacing: 0; }
.journey-controls button,.chapter-dots a span { font: 400 12px/1.4 var(--font-primary); letter-spacing: 0; }
.call-interface { font: 500 12px/1.4 var(--font-primary); letter-spacing: .035em; }
.call-scroll-hint { font: 500 11px/1.4 var(--font-primary); letter-spacing: .055em; }
.call-scroll-hint i { font: 400 16px/1 var(--font-primary); }

/* The human story: display figures, then a contrasting editorial promise. */
.call-kicker { font: 500 var(--type-meta)/1.4 var(--font-primary); letter-spacing: .05em; }
.call-travelers h2 { font: 600 var(--type-display)/var(--leading-display) var(--font-display); letter-spacing: var(--tracking-display); }
.call-travelers-note { font: 400 var(--type-body)/1.55 var(--font-primary); }
.call-promise { font: 600 clamp(34px,3.85vw,60px)/1.08 var(--font-primary); letter-spacing: -.04em; }
.call-promise-line { font: inherit; }
.call-appeal-travelers { font: 500 var(--type-meta)/1.45 var(--font-primary); letter-spacing: .02em; }
.call-sponsorship-price { font: 500 var(--type-body)/1.5 var(--font-primary); letter-spacing: -.01em; }
.call-giving-shortcut { font: 400 14px/1.45 var(--font-primary); letter-spacing: 0; }

/* Both cities share the same display face, metadata and itinerary hierarchy. */
#madinah .arrival-heading-line h2 { font: 600 var(--type-display)/.95 var(--font-display); letter-spacing: -.015em; }
#madinah .arrival-heading-line > p { font: 500 var(--type-meta)/1.5 var(--font-primary); letter-spacing: .025em; opacity: 1; }
#madinah .arrival-description { font: 400 var(--type-body)/1.5 var(--font-primary); }
:is(#madinah,#first-sight) .cinematic-credit { font: 400 12px/1.4 var(--font-primary); letter-spacing: 0; }
#journey .map-introduction h2,.map-arrival-line { font: 600 var(--type-editorial)/1.08 var(--font-primary); letter-spacing: -.04em; }
.map-introduction > p:last-child { font: 400 var(--type-body)/1.55 var(--font-primary); letter-spacing: 0; }
.map-location strong { font: 600 var(--type-destination)/1.04 var(--font-display); letter-spacing: .015em; margin-bottom: 4px; }
.map-location-date { font: 500 12px/1.4 var(--font-primary); letter-spacing: .01em; }
#first-sight .sight-copy h2 { font: 600 var(--type-cinema)/.97 var(--font-display); letter-spacing: -.018em; text-transform: none; }
.cinematic-line { display: block; }
#first-sight .sight-second { font: 600 clamp(64px,5vw,80px)/1 var(--font-display); letter-spacing: -.018em; text-transform: none; }
#first-sight .sight-second em { display: block; font: inherit; }
#first-sight .cinematic-lead { display: block; font: 500 clamp(18px,1.5vw,22px)/1.45 var(--font-primary); letter-spacing: -.015em; }
#first-sight .makkah-jumuah { font: 400 14px/1.5 var(--font-primary); letter-spacing: 0; }
#first-sight .photo-location { font: 500 12px/1.5 var(--font-primary); letter-spacing: .025em; }

/* The invitation, sponsorship and scale form one fundraising hierarchy. */
.makkah-conversion h2 { font: 600 var(--type-editorial)/1.08 var(--font-primary); letter-spacing: -.04em; }
.makkah-conversion p:not(.eyebrow):not(.giving-preview-note) { font: 400 var(--type-body)/1.55 var(--font-primary); }
.editorial-opportunity .opportunity-top .eyebrow,.editorial-opportunity .faq-heading .eyebrow { font: 500 var(--type-meta)/1.5 var(--font-primary); letter-spacing: .045em; }
.editorial-opportunity .opportunity-date { font: 500 var(--type-meta)/1.5 var(--font-primary); letter-spacing: .02em; }
.editorial-opportunity .giving-copy h2 { font: 600 var(--type-sponsor-display)/.98 var(--font-display); letter-spacing: -.016em; text-transform: uppercase; }
.editorial-opportunity .giving-description { font: 400 var(--type-body)/1.55 var(--font-primary); letter-spacing: -.015em; }
.editorial-opportunity .contribution-note,.editorial-opportunity .campaign-state { font: 400 12px/1.5 var(--font-primary); letter-spacing: 0; }
.giving-trust-summary { font: 400 14px/1.6 var(--font-primary); letter-spacing: 0; }
.editorial-opportunity .editorial-photo-print figcaption,.editorial-opportunity .print-caption-date { font: 500 12px/1.4 var(--font-primary); letter-spacing: .035em; }
.editorial-opportunity .campaign-figures strong { font: 600 var(--type-figure)/.95 var(--font-display); letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.editorial-opportunity .campaign-figures > div > span { font: 500 16px/1.4 var(--font-primary); letter-spacing: -.01em; }
.editorial-opportunity .campaign-figures small { font: 400 12px/1.5 var(--font-primary); letter-spacing: 0; }
.campaign-progress { font: 400 var(--type-body)/1.6 var(--font-primary); }
.campaign-progress strong { font: 600 36px/1 var(--font-display); }
.progress-explanation,.progress-source { font: 400 12px/1.5 var(--font-primary); }

/* Responsibility is quieter than the film, but never small or thin. */
#amanah .amanah-intro .eyebrow { font: 500 var(--type-meta)/1.5 var(--font-primary); letter-spacing: .045em; }
#amanah .amanah-intro h2 { font: 600 var(--type-editorial)/1.1 var(--font-primary); letter-spacing: -.04em; text-wrap: balance; }
#amanah .amanah-intro > p:last-child { font: 400 var(--type-body)/1.6 var(--font-primary); }
#amanah .amanah-details h3 { font: 600 clamp(20px,1.55vw,24px)/1.3 var(--font-primary); letter-spacing: -.025em; }
#amanah .amanah-details p,#amanah .return-note p { font: 400 var(--type-body)/1.6 var(--font-primary); }
#amanah .care-number { font: 600 30px/1 var(--font-display); letter-spacing: 0; font-variant-numeric: tabular-nums; }
#amanah .return-note time { font: 500 var(--type-meta)/1.5 var(--font-primary); letter-spacing: .04em; }
.editorial-opportunity .faq-heading h2 { font: 600 var(--type-section)/1.12 var(--font-primary); letter-spacing: -.035em; text-wrap: balance; }
.editorial-opportunity .faq-heading > p:last-child,.editorial-opportunity .program-details details p { font: 400 var(--type-body)/1.65 var(--font-primary); }
.editorial-opportunity .program-details summary { font: 600 18px/1.45 var(--font-primary); letter-spacing: -.015em; }
.editorial-opportunity .program-details summary > span { font: 400 25px/1 var(--font-primary); }
.editorial-opportunity .program-details details p strong { font-weight: 600; }
.editorial-opportunity .editorial-closing p { font: 500 clamp(24px,2.2vw,32px)/1.3 var(--font-primary); letter-spacing: -.025em; }
.site-footer,.site-footer > span,.site-footer > div { font: 400 12px/1.55 var(--font-primary); letter-spacing: .015em; }

/* Dialogs use the same readable UI scale; no provider behavior is changed. */
.chapters-dialog h2 { font: 600 clamp(48px,6vw,80px)/1 var(--font-display); letter-spacing: -.015em; }
.chapters-dialog nav > a { font: 500 16px/1.4 var(--font-primary); }
.chapters-dialog nav > a > span { font: 500 12px/1.4 var(--font-primary); }
.chapters-dialog nav > a > i { font: 400 20px/1 var(--font-primary); }
.dialog-close { font: 400 30px/1 var(--font-primary); }
.donation-dialog h2 { font: 600 var(--type-section)/1.1 var(--font-primary); letter-spacing: -.035em; }
.donation-dialog p:not(.eyebrow),.donation-dialog .dialog-footnote,.donation-dialog legend,.donation-dialog label,.dialog-details { font: 400 14px/1.55 var(--font-primary); }
.gift-options button { font: 400 14px/1.45 var(--font-primary); }
.gift-options button strong { font: 600 22px/1.25 var(--font-primary); }
.gift-options button span { font: 400 12px/1.4 var(--font-primary); }
.amount-input,.amount-input input { font: 500 24px/1.4 var(--font-primary); }
.donation-dialog .large { font: 600 16px/1.4 var(--font-primary); }

@media (max-width:700px), (orientation:portrait) {
  :root { --type-display: clamp(48px,13.2vw,68px); --type-editorial: clamp(34px,8.9vw,42px); --type-section: clamp(26px,7.4vw,32px); --type-body: clamp(16px,4.25vw,18px); --type-meta: 12px; --type-destination: 28px; --type-cinema: clamp(38px,11.8vw,54px); --type-sponsor-display: clamp(48px,12.4vw,68px); --type-figure: clamp(58px,14.5vw,72px); }
  .call-promise { font-size: clamp(32px,8.7vw,42px); }
  .call-interface { font-size: 11px; }
  #first-sight .sight-second { font-size: clamp(44px,11.5vw,54px); }
  #madinah .arrival-heading-line h2 { font-size: clamp(48px,13.3vw,60px); }
  #first-sight .cinematic-lead { font-size: 16px; line-height: 23px; }
  #first-sight .makkah-jumuah { font-size: 14px; line-height: 21px; }
  .editorial-opportunity .program-details summary { font-size: 16px; }
  .editorial-opportunity .editorial-closing p { font-size: 24px; }
}
@media (max-width:700px) {
  .giving-cta[data-donate][data-amount] .giving-cta__title { font-size: 15px; }
  .giving-cta[data-donate][data-amount].giving-cta--compact .giving-cta__title { font-size: 14px; }
  .giving-cta[data-donate][data-amount].giving-cta--secondary .giving-cta__title { font-size: 14px; }
  .journey-controls button { font-size: 12px; }
  .editorial-opportunity .campaign-figures > div > span { font-size: 15px; }
}
@media (max-width:700px), (hover:none) and (pointer:coarse) and (max-width:1024px) {
  .call-scroll-hint { font-size: 12px; letter-spacing: .045em; }
}
@media (max-width:360px) { .call-promise { font-size: 30px; } }
@media (max-height:670px) and (orientation:portrait) {
  #madinah .arrival-heading-line h2 { font-size: 40px; }
  #madinah .arrival-heading-line > p { font-size: 12px; line-height: 17px; }
  #madinah .arrival-description { font-size: 14px; line-height: 1.4; }
  #first-sight .sight-copy h2 { font-size: 36px; }
  #first-sight .sight-second { font-size: 36px; line-height: 36px; }
  #first-sight .cinematic-lead { font-size: 14px; line-height: 19px; }
  #first-sight .makkah-jumuah { font-size: 12px; line-height: 17px; }
  .call-travelers h2 { font-size: 52px; }
  .call-promise { font-size: 32px; }
}
@media (max-height:560px) and (orientation:landscape) {
  #first-sight .sight-copy h2 { font-size: clamp(30px,4.6vw,38px); }
  #first-sight .sight-second { font-size: clamp(36px,4.8vw,44px); }
  #first-sight .cinematic-lead { font-size: 16px; }
  #first-sight .makkah-jumuah { font-size: 12px; }
  #madinah .arrival-heading-line h2 { font-size: 46px; }
  #madinah .arrival-description { font-size: 16px; }
  #journey .map-introduction h2,.map-arrival-line { font-size: 32px; }
  .map-introduction > p:last-child { font-size: 16px; }
  .map-location strong { font-size: 28px; }
  .call-promise { font-size: 34px; }
}
/* Automatic motion preference retains readable text in document flow. */
html:not(.js) #first-sight .sight-copy h2 { font-size: var(--type-display); }
@media (prefers-reduced-motion:reduce) { #first-sight .sight-copy h2 { font-size: var(--type-display); } }

@media (max-height:670px) and (orientation:portrait) {
  #journey .map-introduction h2,.map-arrival-line { font-size: 32px; }
  .map-introduction > p:last-child { font-size: 16px; }
}
@media (max-height:600px) and (orientation:portrait) {
  #journey .map-introduction h2,.map-arrival-line { font-size: 28px; }
  .map-introduction > p:last-child { font-size: 14px; }
}

@media (max-width:700px) {
  :root { --type-hero-purpose: clamp(17px,4.8vw,20px); --type-hero-date: clamp(14px,3.75vw,15px); }
}