/* omra360 · site.css
   Look: warm sand and bronze, dark hero, rounded cards and pills, star pattern, gold lines.
   Layout: centered heads, one 1200px column, cards on a sand ground.
   The page is complete without JavaScript. */

@font-face{font-family:"Alexandria";src:url("../fonts/alexandria-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";src:url("../fonts/alexandria-arabic.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light;
  --ground:#ECE4D7; --ground-2:#F6F1E8; --surface:#FFFFFF; --line:#E1D6C5; --pattern:#F5EEE3;
  --brand:#8B6344; --brand-deep:#6F4D33; --brand-soft:#F1E6D8; --on-brand:#FFFFFF;
  --gold:#C9A66B;
  --dark:#1C1612; --dark-glow:#523A27; --on-dark:#FFFFFF; --on-dark-2:rgb(255 255 255 / .78); --line-dark:rgb(255 255 255 / .16);
  --band-a:#4D3726; --band-b:#8B6344;
  --text:#241C16; --text-2:#5E5145; --text-3:#6E6052;
  --il-sky:#EADDC9; --il-glow:#F3E7D3; --il-stone:#D6C2A2; --il-arch:#BFA680; --il-floor:#F4ECDE; --il-ring:#E0D2BB;
  --il-shadow:rgb(60 40 20 / .2); --il-kiswa:#17120F; --il-kiswa-2:#0D0907; --il-gold:#C9A66B; --il-gold-2:#AE8B50;
  --il-base:#DCD0BC; --il-base-2:#C6B8A1; --il-ihram:#FFFFFF;

  --font:"Alexandria","Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --fs-display:clamp(2.125rem,1.521rem + 2.476vw,3.75rem);
  --fs-h2:clamp(1.625rem,1.3rem + 1.333vw,2.5rem);
  --fs-h3:clamp(1.125rem,1.079rem + .19vw,1.25rem);
  --fs-lead:clamp(1.0625rem,1.016rem + .19vw,1.1875rem);
  --fs-body:clamp(1rem,.977rem + .095vw,1.0625rem);
  --fs-small:.875rem; --fs-tiny:.8125rem;

  --gutter:clamp(1.25rem,.786rem + 1.905vw,2.5rem);
  --section:clamp(3.5rem,2.014rem + 6.095vw,7.5rem);
  --r-card:20px; --r-field:14px; --r-pill:999px;
  --shadow:0 22px 44px -22px rgb(58 38 20 / .32);
}
/* Second preset, from the teal reference. Set data-palette="emeraude" on <html>. */
:root[data-palette="emeraude"]{
  --ground:#F4F7F6; --ground-2:#F4F8F7; --surface:#FFFFFF; --line:#DDE7E5; --pattern:#FFFFFF;
  --brand:#0B6B70; --brand-deep:#08545A; --brand-soft:#E4F0EF; --gold:#C2AC6A;
  --dark:#062B2E; --dark-glow:#0E5357; --band-a:#06383C; --band-b:#0B6B70;
  --text:#10201F; --text-2:#4C5F5D; --text-3:#5F7270;
  --il-sky:#E3EFEE; --il-glow:#F2F8F7; --il-stone:#C9DAD8; --il-arch:#A9C2BF; --il-floor:#F6FAF9; --il-ring:#D5E3E1;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--font);font-size:var(--fs-body);line-height:1.7;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--pattern);-webkit-mask:url("../img/pattern.svg") 0 0/150px;mask:url("../img/pattern.svg") 0 0/150px}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
:where(ul[class],ol[class],nav ul){margin:0;padding:0;list-style:none}
h1,h2,h3{font-weight:700;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:var(--brand)}
p{text-wrap:pretty}
a{color:var(--brand-deep);text-underline-offset:.2em}
img,svg{display:block;max-inline-size:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:var(--gold)}
::selection{background:var(--brand);color:#fff}
:lang(ar){letter-spacing:0}
:lang(ar) body,body:lang(ar){line-height:1.9}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{line-height:1.5;letter-spacing:0}

.wrap{inline-size:min(100% - 2*var(--gutter),75rem);margin-inline:auto}
.section{padding-block:var(--section);position:relative;overflow-x:clip}
.section--white{background:var(--surface)}
.visually-hidden{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none !important}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-80px;z-index:20;background:var(--surface);color:var(--text);padding:10px 16px;border-radius:var(--r-pill)}
.skip:focus{inset-block-start:12px}
.icon{inline-size:1.25em;block-size:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .icon--dir{transform:scaleX(-1)}

/* ---------- Buttons, badges ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-block-size:50px;padding:10px 24px;border-radius:var(--r-pill);border:1.5px solid transparent;background:var(--brand);color:var(--on-brand);font-weight:500;font-size:.9375rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out}
.btn:hover{background:var(--brand-deep)}
.btn__ico{display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:50%;background:rgb(255 255 255 / .2);margin-inline-end:-10px}
.btn__ico .icon{inline-size:14px;block-size:14px;stroke-width:2.2}
.btn--outline{background:transparent;border-color:var(--brand);color:var(--brand-deep)}
.btn--outline:hover{background:var(--brand);color:var(--on-brand)}
.btn--light{background:#fff;color:var(--brand-deep)}
.btn--light:hover{background:var(--brand-soft)}
.btn--light .btn__ico{background:var(--brand-soft)}
.btn--ghost{background:transparent;border-color:rgb(255 255 255 / .4);color:#fff}
.btn--ghost:hover{background:rgb(255 255 255 / .1)}
.btn--small{min-block-size:44px;padding-inline:18px;font-size:var(--fs-small)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--text-2);font-size:var(--fs-small);font-weight:500;line-height:1.4}
.badge .icon{color:var(--brand)}
.on-dark .badge{background:rgb(255 255 255 / .08);border-color:var(--line-dark);color:var(--on-dark)}
.on-dark .badge .icon{color:var(--gold)}
.tile{display:grid;place-items:center;inline-size:52px;block-size:52px;border-radius:16px;background:var(--brand-soft);color:var(--brand);flex:none}
.tile .icon{inline-size:26px;block-size:26px;stroke-width:1.6}
.pat{position:relative;isolation:isolate}
.pat::after{content:"";position:absolute;inset:0;z-index:-1;background:#fff;opacity:.06;pointer-events:none;-webkit-mask:url("../img/pattern.svg") 0 0/150px;mask:url("../img/pattern.svg") 0 0/150px}

/* ---------- Top bar and header ---------- */
.topbar{background:var(--dark);color:var(--on-dark-2);font-size:var(--fs-tiny);border-block-end:1px solid var(--line-dark)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-block-size:44px}
.topbar p{display:flex;align-items:center;gap:8px;min-inline-size:0;line-height:1.45}
.topbar .icon{color:var(--gold)}
.topbar a{display:inline-flex;align-items:center;min-block-size:44px;padding-block:6px;color:var(--on-dark);font-weight:500}
.topbar__fact{white-space:nowrap}
@media (max-width:51.99em){.topbar__fact{display:none}}     /* narrow screens: the security notice gets the whole line; the season dates are on the home page */
.header{background:var(--dark);color:var(--on-dark)}
.header__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 24px;padding-block:14px}
.brand{display:inline-flex;align-items:center;min-block-size:44px;gap:10px;color:inherit;text-decoration:none;font-size:1.3125rem;font-weight:700;letter-spacing:-.03em}
.brand svg{inline-size:36px;block-size:36px;flex:none}
.brand b{font-weight:300;color:var(--gold)}
.nav ul{display:flex;justify-content:center;gap:2px}
.nav a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:15px;border-radius:var(--r-pill);color:var(--on-dark-2);font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .2s ease-out,color .2s ease-out}
.nav a:hover,.nav a[aria-current]{color:var(--on-dark);background:rgb(255 255 255 / .1)}
@media (max-width:59.99em){
  .header__in{grid-template-columns:1fr auto}
  .header__in>.btn{grid-row:1;grid-column:2}
  .nav{grid-row:2;grid-column:1/-1;margin-inline:calc(var(--gutter)*-1);overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav ul{justify-content:flex-start;padding-inline:calc(var(--gutter) - 10px);inline-size:max-content}
}
@media (max-width:24.99em){.header__in{column-gap:12px}.header__in>.btn{padding-inline:14px}.brand{gap:8px;font-size:1.1875rem}}      /* 360 to 390 px phones: logo and button on one line */

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(70% 62% at 50% 0%,var(--dark-glow) 0%,transparent 72%),var(--dark);color:var(--on-dark);text-align:center;padding-block:clamp(7.25rem,5.5rem + 7vw,10.5rem) clamp(7.5rem,6rem + 6vw,10.5rem)}
.hero__art{position:absolute;inset:0;z-index:-1;-webkit-mask-image:radial-gradient(ellipse 52% 44% at 50% 58%,rgb(0 0 0 / .28) 0 58%,#000 100%);mask-image:radial-gradient(ellipse 52% 44% at 50% 58%,rgb(0 0 0 / .28) 0 58%,#000 100%)}
.tawaf{position:absolute;inset-inline-start:50%;inset-block-start:clamp(4rem,3rem + 3vw,5.75rem);inline-size:clamp(47.5rem,30rem + 62vw,80rem);max-inline-size:none;aspect-ratio:1;transform:translate(-50%,-50%)}
[dir="rtl"] .tawaf{transform:translate(50%,-50%)}
.tw-ring{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.5}
.tw-start{stroke:var(--gold);stroke-width:1;stroke-dasharray:2 8;vector-effect:non-scaling-stroke;opacity:.55}
.tw-dots{fill:#fff}
.tw-orbit{transform-box:view-box;transform-origin:50% 50%;animation:tw-turn linear infinite}
@keyframes tw-turn{to{transform:rotate(-360deg)}}
.tw-kaaba{fill:#0A0705;stroke:var(--gold);stroke-width:1.6}
.tw-hijr{fill:none;stroke:var(--gold);stroke-width:1.3}
.tw-stone{fill:var(--gold)}
.hero h1{font-size:var(--fs-display);line-height:1.18;max-inline-size:16ch;margin:22px auto 0}
.hl{display:inline-block;margin-block-start:.18em;padding:.02em .42em .12em;border-radius:.34em;background:#fff;color:var(--brand);transform:rotate(-2deg)}
.hero__lead{max-inline-size:38rem;margin:26px auto 0;font-size:var(--fs-lead);color:var(--on-dark-2)}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-block-start:32px}

/* Real photos, prepared by prepare_images.py */
.hero__photo{position:absolute;inset:0;z-index:-2}
.hero__photo img{inline-size:100%;block-size:100%;object-fit:cover}
.hero--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(20 14 10 / .78) 0%,rgb(20 14 10 / .62) 45%,rgb(20 14 10 / .9) 100%)}
.hero--photo .hero__art{z-index:-3}
.hero--photo .tw-orbit{animation:none}                                  /* behind a photo the drawing is only a fallback: no point turning it */
.hero__photo:not(.hero__photo--remote)~.hero__art{display:none}         /* a photo served from this site always loads: the fallback is not needed */
.hero__photo--remote{background:var(--photo-s) 50% 42%/cover no-repeat}
@media (min-width:40.01em){.hero__photo--remote{background-image:var(--photo-l)}}
picture.scene{display:block;overflow:hidden}
picture.scene img{inline-size:100%;block-size:auto}
.cover__img{position:absolute;inset:0;z-index:0}
.cover__img img{inline-size:100%;block-size:100%;object-fit:cover}
.cover--photo::after,.cover--photo .cover__ico{display:none}
.cover .badge{z-index:1}

/* ---------- Quick access card (overlaps the hero) ---------- */
.quick-wrap{margin-block-start:clamp(-5.5rem,-3rem - 3vw,-4rem);position:relative;z-index:2}
.quick{background:var(--surface);border-radius:24px;box-shadow:var(--shadow);padding:clamp(16px,2.2vw,26px);position:relative}
.quick__radio{position:absolute;opacity:0;pointer-events:none}
.quick__tabs{display:inline-flex;gap:6px;padding:6px;border-radius:var(--r-pill);background:var(--ground-2);border:1px solid var(--line);margin-block-end:16px}
.quick__tab{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding-inline:20px;border-radius:var(--r-pill);font-weight:500;font-size:.9375rem;color:var(--text-2);cursor:pointer;transition:background-color .2s ease-out,color .2s ease-out}
#q-omra:checked~.quick__tabs [for="q-omra"],#q-hajj:checked~.quick__tabs [for="q-hajj"]{background:var(--brand);color:var(--on-brand)}
#q-omra:focus-visible~.quick__tabs [for="q-omra"],#q-hajj:focus-visible~.quick__tabs [for="q-hajj"]{outline:3px solid var(--brand);outline-offset:3px}
.quick__panel{display:none;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:22.49em){.quick__panel{grid-template-columns:minmax(0,1fr)}}
#q-omra:checked~#p-omra,#q-hajj:checked~#p-hajj{display:grid}
.cell{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-field);background:var(--ground-2);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .2s ease-out,background-color .2s ease-out}
.cell:hover{border-color:var(--brand);background:var(--surface)}
.cell .tile{grid-row:1/3;inline-size:44px;block-size:44px;border-radius:13px;background:var(--surface)}
.cell .tile .icon{inline-size:22px;block-size:22px}
.cell small{font-size:var(--fs-tiny);color:var(--text-3);line-height:1.3}
.cell strong{font-weight:600;font-size:.9375rem;line-height:1.35}
.quick__go{grid-column:1/-1}
@media (min-width:60em){
  .quick__panel{grid-template-columns:repeat(4,1fr) auto;align-items:stretch}
  .quick__go{grid-column:auto;align-self:center}
}

/* ---------- Section heads ---------- */
.head{max-inline-size:44rem;margin:0 auto clamp(2rem,1.4rem + 2.4vw,3.5rem);text-align:center}
.head .badge{margin-block-end:18px}
.head p{margin-block-start:14px;color:var(--text-2);font-size:var(--fs-lead)}
.head--row{max-inline-size:none;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;text-align:start}
.head--row>div{max-inline-size:38rem}
.head__tools{display:flex;align-items:center;gap:10px}
.round{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:50%;border:1.5px solid var(--brand);background:transparent;color:var(--brand-deep);cursor:pointer;transition:background-color .2s ease-out,color .2s ease-out}
.round:hover{background:var(--brand);color:#fff}
.round:disabled{opacity:.35;cursor:default;background:transparent;color:var(--brand-deep)}

/* ---------- About ---------- */
.split{display:grid;gap:clamp(2.5rem,1.5rem + 4vw,5rem);align-items:center}
@media (min-width:60em){.split{grid-template-columns:1.05fr .95fr}}
.split h2{margin-block:18px 16px}
.split p{color:var(--text-2)}
.checks{display:grid;gap:14px;margin-block:26px 32px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.tick{display:grid;place-items:center;inline-size:28px;block-size:28px;flex:none;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--brand);margin-block-start:-1px}
.tick .icon{inline-size:15px;block-size:15px;stroke-width:2.4}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.frame{position:relative;isolation:isolate;inline-size:min(100%,25.5rem);margin-inline:auto}
.frame::before{content:"";position:absolute;inset:-16px 22px 16px -22px;z-index:-1;border-radius:30px;background:var(--brand);transform:rotate(-5deg)}
.scene{inline-size:100%;block-size:auto;border-radius:26px;box-shadow:var(--shadow)}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);font-size:var(--fs-tiny);font-weight:500;line-height:1.35;color:var(--text)}
[dir="rtl"] .chip{padding:10px 10px 10px 16px}
.chip .tile{inline-size:36px;block-size:36px;border-radius:11px}
.chip .tile .icon{inline-size:18px;block-size:18px}
.chip small{display:block;color:var(--text-3);font-weight:400;font-size:.75rem}
.chip--a{inset-block-start:26px;inset-inline-end:-18px;transform:rotate(4deg)}
.chip--b{inset-block-end:34px;inset-inline-start:-26px;transform:rotate(-5deg)}
@media (max-width:30em){.frame{inline-size:calc(100% - 28px)}.chip--a{inset-inline-end:-10px}.chip--b{inset-inline-start:-10px}.frame::before{inset:-12px 14px 12px -12px}
  .cell{padding:10px 12px;column-gap:10px}.cell .tile{inline-size:38px;block-size:38px;border-radius:11px}}

/* ---------- Cards ---------- */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr))}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:26px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);transition:border-color .2s ease-out,box-shadow .2s ease-out}
.card:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.card p{color:var(--text-2);font-size:.9375rem}
.metas{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--fs-tiny);color:var(--text-3)}
.metas li{display:inline-flex;align-items:center;gap:6px}
.metas .icon{color:var(--brand);inline-size:16px;block-size:16px}
.card .btn{margin-block-start:auto}
.section--white .card{background:var(--ground-2)}
.curves{position:absolute;inset-block-start:0;block-size:100%;inline-size:min(11vw,10rem);pointer-events:none;color:var(--gold);z-index:0}
.curves~.wrap{position:relative;z-index:1}
.curves--start{inset-inline-start:0}
.curves--end{inset-inline-end:0;transform:scaleX(-1)}
[dir="rtl"] .curves--start{transform:scaleX(-1)} [dir="rtl"] .curves--end{transform:none}
@media (max-width:80em){.curves{display:none}}

/* ---------- Dates band ---------- */
.band,.ask,.cta{--on-dark-2:rgb(255 255 255 / .9)}      /* on the bronze end of the gradient, 78% white falls under 4.5:1 */
.band{background:linear-gradient(120deg,var(--band-a),var(--band-b));color:var(--on-dark)}
.band__in{display:grid;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}
@media (min-width:60em){.band__in{grid-template-columns:.85fr 1.15fr}}
.kicker{display:flex;align-items:center;gap:12px;font-size:var(--fs-small);font-weight:500;color:var(--on-dark-2);margin-block-end:14px}
.kicker::after{content:"";inline-size:44px;block-size:1px;background:var(--gold)}
.band p{color:var(--on-dark-2);margin-block-start:16px}
.band .fine{font-size:var(--fs-tiny);margin-block-start:22px}
.band a{color:#fff}
/* The three dates sit side by side only when their box is wide enough for a date on one line; otherwise they stack. Never two and one. */
.statsbox{container-type:inline-size}
.stats{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@container (min-width:40rem){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat{padding:24px 14px;border-radius:var(--r-card);background:rgb(0 0 0 / .18);background:color-mix(in srgb,var(--dark) 24%,transparent);border:1px solid rgb(255 255 255 / .18);text-align:center}
.stat .tile{margin:0 auto 16px;border-radius:50%;background:#fff;color:var(--brand)}
.stat strong{display:block;font-size:clamp(1.25rem,1.05rem + .7vw,1.5rem);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.stat span{display:block;margin-block-start:6px;font-size:var(--fs-small);color:var(--on-dark)}

/* ---------- Posts ---------- */
.scroller{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:6px 26px;margin-block-end:-26px;scroll-padding-inline:max(var(--gutter),(100% - 75rem)/2);padding-inline:max(var(--gutter),(100% - 75rem)/2)}
.scroller::-webkit-scrollbar{display:none}
.post{flex:0 0 min(19rem,82%);scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color .2s ease-out,box-shadow .2s ease-out}
.post:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.cover{position:relative;isolation:isolate;aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(135deg,var(--band-a),var(--band-b));color:#fff;overflow:hidden}
.cover::after{content:"";position:absolute;inset:0;z-index:-1;background:#fff;opacity:.1;-webkit-mask:url("../img/pattern.svg") 50% 50%/110px;mask:url("../img/pattern.svg") 50% 50%/110px}
.cover--light{background:linear-gradient(135deg,var(--brand-soft),var(--ground));color:var(--brand)}
.cover--light::after{background:var(--brand);opacity:.12}
.cover__ico{display:grid;place-items:center;inline-size:84px;block-size:84px;border-radius:50%;border:1px solid currentColor;background:rgb(255 255 255 / .1)}
.cover--light .cover__ico{background:rgb(255 255 255 / .6)}
.cover__ico .icon{inline-size:38px;block-size:38px;stroke-width:1.4}
.cover .badge{position:absolute;inset-block-start:14px;inset-inline-start:14px;padding:5px 13px;font-size:var(--fs-tiny);background:#fff;color:var(--text);border:0}
.post__body{display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px;flex:1}
.post h3{font-size:1.0625rem;line-height:1.4}
.post h3 a{color:inherit;text-decoration:none}
.post h3 a::after{content:"";position:absolute;inset:0}
.post{position:relative}
.post .metas{margin-block-start:auto}

/* ---------- FAQ ---------- */
.faq{max-inline-size:52rem;margin-inline:auto;display:grid;gap:12px}
.faq details{border-radius:18px;background:var(--ground-2);border:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;cursor:pointer;list-style:none;border-radius:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;inline-size:34px;block-size:34px;border-radius:50%;border:1px solid var(--line);background-color:var(--surface);background-image:linear-gradient(var(--brand),var(--brand)),linear-gradient(var(--brand),var(--brand));background-size:14px 2px,2px 14px;background-position:50% 50%;background-repeat:no-repeat}
.faq details[open] summary::after{background-size:14px 2px,0 0}
.faq details[open]{background:var(--surface);border-color:var(--brand)}
.faq__a{padding:0 22px 22px;color:var(--text-2);max-inline-size:44rem}

/* ---------- Quote request ---------- */
.ask{display:grid;gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:center;border-radius:32px;background:linear-gradient(120deg,var(--band-a),var(--band-b));color:#fff;padding:clamp(1.5rem,.8rem + 3.4vw,4rem);overflow:hidden}
@media (min-width:60em){.ask{grid-template-columns:.9fr 1.1fr}}
.ask>div>p{color:var(--on-dark-2);font-size:var(--fs-lead);margin-block-start:14px}
.ask .checks{margin-block:26px 0}
.ask .tick{background:rgb(255 255 255 / .14);border-color:rgb(255 255 255 / .28);color:#fff}
.form{display:grid;gap:16px;padding:clamp(1.25rem,1rem + 1.4vw,2rem);border-radius:24px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.form [data-rich]{display:grid;gap:16px}
.form [hidden]{display:none}
.form__row{display:grid;gap:16px}
@media (min-width:36em){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:var(--fs-small)}
.field input,.field select,.field textarea{inline-size:100%;min-block-size:52px;padding:12px 16px;border-radius:var(--r-field);border:1px solid var(--line);background:var(--ground-2);transition:border-color .2s ease-out,box-shadow .2s ease-out}
.field textarea{min-block-size:9.5rem;resize:vertical;line-height:1.6}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);background:var(--surface)}
.field :is(input,select,textarea):user-invalid{border-color:#A6332A}
.field .err{display:none;color:#A6332A;font-size:var(--fs-tiny)}
.field:has(:user-invalid) .err{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--text-2);padding-block:11px;margin-block:-11px}      /* same place on the page, 44 px of tap height even on one line */
.consent input{inline-size:20px;block-size:20px;margin-block-start:3px;accent-color:var(--brand);flex:none}
.form__note{font-size:var(--fs-tiny);color:var(--text-3)}
.form__done{padding:12px 16px;border-radius:var(--r-field);background:var(--brand-soft);font-size:var(--fs-small);line-height:1.5}

/* ---------- Inner pages ---------- */
.pagehead{background:radial-gradient(60% 100% at 85% 0%,var(--dark-glow) 0%,transparent 70%),var(--dark);color:var(--on-dark);padding-block:clamp(2.25rem,1.6rem + 3vw,4rem) clamp(5.5rem,4.5rem + 4vw,8rem)}
.pagehead--plain{padding-block-end:clamp(2.5rem,2rem + 3vw,4.5rem)}
.crumbs{display:flex;flex-wrap:wrap;gap:0 10px;font-size:var(--fs-small);color:var(--on-dark-2);margin-block-end:8px}
.crumbs li{display:inline-flex;align-items:center;min-block-size:44px}
.crumbs a{display:inline-flex;align-items:center;min-block-size:44px;color:inherit}
.crumbs li+li::before{content:"/";margin-inline-end:10px;opacity:.55}
.pagehead h1{font-size:clamp(1.875rem,1.457rem + 1.714vw,3rem);max-inline-size:20ch;margin-block:18px 14px}
.pagehead .intro{max-inline-size:44rem;color:var(--on-dark-2);font-size:var(--fs-lead)}
.pagehead .metas{margin-block-start:22px;color:var(--on-dark-2);font-size:var(--fs-small)}
.pagehead .metas .icon{color:var(--gold)}
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;margin-block-start:clamp(-5rem,-3rem - 2vw,-3.5rem);padding-block-end:var(--section)}
.paper{min-inline-size:0;background:var(--surface);border-radius:24px;box-shadow:var(--shadow);padding:clamp(1.375rem,.9rem + 2.6vw,3.5rem)}
/* Contents list. Phones and tablets: a strip of pills above the text, swiped sideways like the menu. Wide screens: a card that follows the reader on the right. */
.toc{position:relative;display:flex;gap:8px;min-inline-size:0;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding:4px var(--gutter)}
.toc::-webkit-scrollbar{display:none}
.toc h2{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.toc a{flex:none;display:inline-flex;align-items:center;min-block-size:44px;padding-inline:16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--text-2);text-decoration:none;font-size:var(--fs-small);font-weight:500;white-space:nowrap}
.toc a[aria-current]{background:var(--brand);border-color:var(--brand);color:#fff}
.toc .btn{display:none}
@media (max-width:63.99em){      /* room for the strip between the page head and the text card */
  .pagehead--toc{padding-block-end:calc(clamp(5.5rem,4.5rem + 4vw,8rem) + 68px)}
  .article{margin-block-start:calc(clamp(-5rem,-3rem - 2vw,-3.5rem) - 68px)}
}
@media (min-width:64em){
  .article{grid-template-columns:minmax(0,1fr) 18.5rem;gap:24px}
  .paper{grid-column:1;grid-row:1}
  .toc{grid-column:2;grid-row:1;display:block;overflow:visible;margin:0;position:sticky;inset-block-start:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
  .toc h2{position:static;inline-size:auto;block-size:auto;overflow:visible;clip-path:none;font-size:1rem;letter-spacing:0;margin-block-end:8px}
  .toc a{display:flex;min-block-size:40px;padding:0;border:0;border-radius:0;background:none;font-size:.9375rem;font-weight:400;white-space:normal}
  .toc a:hover,.toc a[aria-current]{background:none;color:var(--brand-deep);text-decoration:underline}
  .toc .btn{display:inline-flex;margin-block-start:14px;inline-size:100%;min-block-size:44px;padding-inline:18px;border:1.5px solid transparent;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-size:var(--fs-small);font-weight:500;text-decoration:none}
  .toc .btn:hover{background:var(--brand-deep);color:#fff;text-decoration:none}
}
.prose{max-inline-size:44rem;font-size:clamp(1.0625rem,1.02rem + .19vw,1.125rem);line-height:1.7}
.prose>*+*{margin-block-start:1.15em}
.prose>:first-child{margin-block-start:0}
.paper--page{max-inline-size:52rem;margin-inline:auto}
.prose h2{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);margin-block-start:2.1em;scroll-margin-block-start:24px}
.prose ul:not([class]){padding-inline-start:1.2em}
.prose li+li{margin-block-start:.45em}
.ref{font-size:max(.72em,12px);vertical-align:super;line-height:0;font-weight:600;text-decoration:none;padding-inline:1px}
.more{display:inline-flex;align-items:center;min-block-size:44px;font-weight:500}      /* a link that stands alone on its line: full touch height */
.answer{display:grid;gap:8px;padding:22px 24px;border-radius:18px;background:var(--brand-soft)}
.answer b{display:inline-flex;align-items:center;gap:8px;color:var(--brand-deep);font-weight:600}
/* A table wider than its box scrolls sideways; a soft shadow on the cut edge says so. */
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(to right,var(--surface) 40%,transparent) left/48px 100% no-repeat local,linear-gradient(to left,var(--surface) 40%,transparent) right/48px 100% no-repeat local,
    linear-gradient(to right,rgb(58 38 20 / .18),transparent) left/14px 100% no-repeat scroll,linear-gradient(to left,rgb(58 38 20 / .18),transparent) right/14px 100% no-repeat scroll,var(--surface)}
/* A source named in a table: its site name on wide screens, its number in a disc on phones, so the column always fits. */
.src{position:relative}      /* keeps the hidden site name inside the table's scroll box, so it cannot widen the page */
.src__n{display:none}
@media (max-width:39.99em){
  .src{display:inline-grid;place-items:center;inline-size:44px;block-size:44px;margin-block:-8px;text-decoration:none}
  .src__name{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .src__n{display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);font-weight:600;font-size:var(--fs-tiny)}
}
table{border-collapse:collapse;inline-size:100%;font-size:.9375rem;line-height:1.5}
th,td{padding:13px 18px;text-align:start}
thead th{background:var(--ground-2);font-weight:600;white-space:nowrap}
tbody tr+tr>*{border-block-start:1px solid var(--line)}
tbody th{font-weight:500}
@media (min-width:40em){.nw{white-space:nowrap}}      /* a short name kept on one line where the table has room (Royaume-Uni) */
td small{display:block;margin-block-start:6px;font-size:var(--fs-tiny);font-weight:500;color:var(--text-2)}      /* a date under the text of a cell: one column fewer on phones */
td.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.note{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:18px;background:var(--ground-2);border:1px solid var(--line)}
@media (max-width:39.99em){      /* phones: tighter tables that fit their box, and the note's icon above its text */
  table{font-size:.875rem}
  th,td{padding:12px 9px}
  thead th{white-space:normal}
  td.num{white-space:normal}      /* the figure itself never breaks (12 000 MAD); a word after it may go to the next line */
  .note{flex-direction:column;gap:12px}
}
@media (max-width:22.5em){th,td{padding-inline:8px}}      /* 360 px and under: one pixel less per side, so three columns fit */
.prose .checks{margin-block:1.15em 0}
.paper .tick{background:var(--brand-soft);border-color:transparent}
.sources{padding:0;list-style:none;counter-reset:s;display:grid;gap:12px;font-size:.9375rem;line-height:1.6}
.sources li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px;margin:0}
.sources li::before{content:counter(s);display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);font-weight:600;font-size:var(--fs-tiny)}
.kind{display:inline-block;margin-inline-start:2px;padding:1px 9px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:.75rem;line-height:1.5;color:var(--text-3);white-space:nowrap}
.made{font-size:var(--fs-small);color:var(--text-3);border-block-start:1px solid var(--line);padding-block-start:18px}
/* Numbered steps (rites, démarches) */
.steps{list-style:none;padding:0;counter-reset:step;display:grid;gap:12px}
.steps>li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:center;padding:16px 20px;border-radius:18px;background:var(--ground-2);border:1px solid var(--line)}
.steps>li::before{content:counter(step);grid-row:1/span 2;align-self:start;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:1rem}
.steps h3{grid-column:2;font-size:1.0625rem}
.steps p{grid-column:2;font-size:.9375rem;line-height:1.6;color:var(--text-2)}
.steps h3+p{margin-block-start:4px}
.prose :is(.steps,.cards,.next,.srclist)>li+li{margin-block-start:0}
/* The tawaf seen from above, as a figure inside a page: the centre of the hero drawing, enlarged */
.diagram{border-radius:18px;overflow:hidden;background:var(--dark);color:var(--on-dark-2)}
.diagram__art{position:relative;overflow:hidden;aspect-ratio:1}
.diagram .tawaf,[dir="rtl"] .diagram .tawaf{inset:50% auto auto 50%;inline-size:210%;transform:translate(-50%,-50%)}
@media (min-width:40em){.diagram__art{aspect-ratio:16/10}.diagram .tawaf,[dir="rtl"] .diagram .tawaf{inline-size:135%}}
.diagram figcaption{padding:14px 20px 18px;font-size:var(--fs-small);line-height:1.6;border-block-start:1px solid var(--line-dark)}
.diagram figcaption a{color:var(--on-dark)}
/* "À lire ensuite" and the list of all sources */
.next{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.paper .card{background:var(--ground-2)}
.srclist{list-style:none;padding:0;display:grid;gap:10px;font-size:.9375rem;line-height:1.6}
.srclist li{display:grid;gap:2px;padding:14px 18px;border-radius:var(--r-field);background:var(--ground-2);border:1px solid var(--line)}
.srclist small{font-size:var(--fs-tiny);line-height:1.9;color:var(--text-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:28px}
.chips a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:18px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--text-2);text-decoration:none;font-size:var(--fs-small);font-weight:500;transition:background-color .2s ease-out,color .2s ease-out}
.chips a[aria-current],.chips a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.grid-posts{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr))}

/* ---------- Call to action ---------- */
.cta{border-radius:32px;background:linear-gradient(120deg,var(--band-a),var(--band-b));color:#fff;text-align:center;padding:clamp(2.75rem,2rem + 4vw,5rem) var(--gutter);overflow:hidden}
.cta h2{max-inline-size:20ch;margin-inline:auto}
.cta p{max-inline-size:34rem;margin:14px auto 28px;color:var(--on-dark-2);font-size:var(--fs-lead)}

/* ---------- Footer ---------- */
.footer{background:var(--dark);color:var(--on-dark-2);padding-block:clamp(3rem,2rem + 4vw,5rem) 0;font-size:.9375rem}
.footer__grid{display:grid;gap:36px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.footer__brand{grid-column:1/-1;max-inline-size:24rem}
@media (min-width:60em){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}.footer__brand{grid-column:auto}}
.footer .brand{color:#fff;margin-block-end:14px}
.footer h2{font-size:1rem;font-weight:600;color:#fff;letter-spacing:0;margin-block-end:12px}
.footer a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--on-dark-2);text-decoration:none}
.footer__bar a{display:inline;min-block-size:0;text-decoration:underline}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-block-start:44px;padding-block:22px;border-block-start:1px solid var(--line-dark);font-size:var(--fs-tiny)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tw-orbit{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
}