/* --- 5. hero --------------------------------------------------*/
.hero{position:relative; min-height:clamp(560px,92svh,1000px);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center;
  gap:clamp(28px,5vw,80px); padding:clamp(104px,14vh,150px) var(--gutter) clamp(40px,7vh,80px);
  overflow:clip; isolation:isolate;
  background:radial-gradient(120% 90% at 78% 40%, #1A4A68 0%, var(--midnight) 55%, #0B2232 100%)}
/* The drawing is a page from the same sketchbook as the film, laid on the dark ground. */
.hero__shot{grid-column:2; grid-row:1; justify-self:center; width:min(100%, 560px, 62svh);
  aspect-ratio:1; border-radius:6px; overflow:hidden; background:#F5F1E9;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04); transform:rotate(1.2deg)}
html[dir="rtl"] .hero__shot{transform:rotate(-1.2deg)}
.hero__shot img{display:block; width:100%; height:100%; object-fit:cover}
.hero__copy{grid-column:1; grid-row:1; max-width:33em}
@media (max-width:860px){
  .hero{grid-template-columns:1fr; align-items:start; gap:clamp(22px,5vw,32px); padding-top:clamp(92px,13vh,120px)}
  .hero__shot{grid-column:1; grid-row:1; width:min(100%, 440px, 46svh)}
  .hero__copy{grid-row:2}
}

.kicker{font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper); margin:0 0 clamp(10px,1.4vw,14px)}
html[lang="ar"] .kicker{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13.5px}

.hero h1{margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(36px,5.9vw,68px); line-height:1.04; letter-spacing:-.014em; color:var(--paper);
  text-wrap:balance; max-width:13em}
html[lang="ar"] .hero h1{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.4;
  font-size:clamp(30px,4.8vw,56px)}

.hero .lead{font-family:var(--sans); font-weight:400;
  font-size:clamp(15.5px,1.65vw,18px); line-height:1.62; color:var(--soft);
  margin:clamp(12px,1.6vw,17px) 0 0; max-width:33em}
html[lang="ar"] .hero .lead{font-family:var(--ar-ui); font-size:clamp(16px,1.75vw,19px); line-height:1.9}

.acts{display:flex; flex-wrap:wrap; gap:12px; margin-block-start:clamp(18px,2.4vw,26px)}

/* the primary: the one filled thing on the page */

.hero .note{font-family:var(--sans); font-size:11.5px; line-height:1.5;
  color:rgba(244,239,231,.42);
  margin:clamp(12px,1.6vw,16px) 0 0; max-width:27em}
html[lang="ar"] .hero .note{font-family:var(--ar-ui); font-size:13.5px; line-height:1.85}

/* the words settle in, once */
.up{opacity:0; transform:translateY(20px); animation:lift .95s var(--ease) forwards}
.up:nth-child(1){animation-delay:.35s}
.up:nth-child(2){animation-delay:.46s}
.up:nth-child(3){animation-delay:.57s}
.up:nth-child(4){animation-delay:.68s}
.up:nth-child(5){animation-delay:.80s}

@media (max-width:620px){
  .acts{flex-direction:column; align-items:stretch; gap:10px}
  .act{justify-content:space-between; padding:15px 20px}
}

/* --- 5b. the film ---------------------------------------------*/
/* The film is drawn on paper, so it sits on the paper ground: the frame
   reads as a page from the same sketchbook, not a black box. */
.film{background:var(--paper); color:var(--on-light);
  padding:clamp(54px,9vh,104px) var(--gutter) clamp(58px,10vh,116px)}
.film__in{max-width:1180px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,6vw,96px); align-items:center}
.film .kick{margin:0 0 clamp(12px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-deep)}
html[lang="ar"] .film .kick{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
.film h2{margin:0 0 clamp(16px,2vw,22px); font-family:var(--serif); font-weight:500;
  font-size:clamp(31px,4.4vw,52px); line-height:1.06; letter-spacing:-.018em;
  color:#12313F; max-width:11em; text-wrap:balance}
html[lang="ar"] .film h2{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.5}
.film .say{margin:0 0 clamp(18px,2.2vw,26px); font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,2.4vw,27px); line-height:1.34; letter-spacing:-.008em; color:#1B3A49; max-width:19em}
html[lang="ar"] .film .say{font-family:var(--ar); letter-spacing:0; line-height:1.65}
.film__note{margin:0; font-family:var(--sans); font-size:13.5px; line-height:1.6; color:#536A78}
html[lang="ar"] .film__note{font-family:var(--ar-ui); font-size:14.5px}
.film__frame{margin:0; justify-self:center;
  position:relative; width:min(100%, 390px, calc((86svh - 130px) * 9 / 16)); aspect-ratio:9/16;
  border-radius:14px; overflow:hidden; background:#F5F1E9;
  box-shadow:0 0 0 1px rgba(18,49,63,.08), 0 28px 60px -28px rgba(18,49,63,.42)}
.film__frame video{display:block; width:100%; height:100%; object-fit:cover; background:#F5F1E9}
/* One quiet play button on the poster; the browser's own controls appear once it plays. */
.film__play{position:absolute; inset:0; display:grid; place-items:end center; padding:0 0 12%;
  border:0; background:none; cursor:pointer}
.film__play span{display:flex; align-items:center; gap:14px}
.film__play i{display:block; width:62px; height:62px; flex:none; border-radius:50%; background:var(--cta);
  box-shadow:0 10px 26px -10px rgba(18,49,63,.6); position:relative; transition:transform .3s var(--ease)}
.film__play i::after{content:""; position:absolute; left:24px; top:19px;
  border-style:solid; border-width:12px 0 12px 19px; border-color:transparent transparent transparent #20100A}
.film__play b{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:#12313F}
html[lang="ar"] .film__play b{font-family:var(--ar-ui); letter-spacing:0; font-size:14px}
html[dir="rtl"] .film__play i::after{transform:none}
@media (hover:hover){ .film__play:hover i{transform:scale(1.06)} }
.film__frame.on .film__play{display:none}
@media (max-width:860px){
  .film__in{grid-template-columns:1fr; gap:clamp(22px,5vw,30px)}
  .film__frame{width:min(100%, 430px)}
}

/* --- 6. what Rifāq is ------------------------------------------*/
.what{background:var(--ivory); color:var(--on-light);
  padding:clamp(54px,9vh,104px) var(--gutter) clamp(58px,10vh,116px)}
/* The opening is two columns, not one narrow stack: the name and the
   sentence on the left, the explanation on the right. Every other section
   sets its own width — a page where every block is the same measure reads
   as a template. */
.what__in{max-width:1180px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(26px,5vw,84px); align-items:start}
.what .kick{margin:0 0 clamp(12px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-deep)}
html[lang="ar"] .what .kick{font-family:var(--ar-ui); letter-spacing:0;
  text-transform:none; font-size:13.5px}
@media (max-width:860px){ .what__in{grid-template-columns:1fr; gap:clamp(18px,4vw,26px)} }

.what h2{margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(31px,4.4vw,52px); line-height:1.06; letter-spacing:-.018em;
  color:#12313F; max-width:11em; text-wrap:balance}
html[lang="ar"] .what h2{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.5}

.what .say{margin:0 0 clamp(16px,2vw,22px);
  font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.6vw,29px);
  line-height:1.32; letter-spacing:-.008em; color:#1B3A49; max-width:20em}
html[lang="ar"] .what .say{font-family:var(--ar); letter-spacing:0; line-height:1.62}

.what p{margin:0 0 clamp(12px,1.5vw,16px); font-family:var(--sans); font-size:17px;
  line-height:1.66; color:#37505C; max-width:33em}
.what__body p:last-child{margin-bottom:0}
html[lang="ar"] .what p{font-family:var(--ar-ui); font-size:18px; line-height:1.9}

/* three plain blocks, no cards */
.three{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3.4vw,54px); margin-block-start:clamp(38px,5.4vw,66px)}
.three > div{padding-block-start:clamp(15px,1.9vw,20px);
  border-block-start:1px solid rgba(20,26,28,.16)}
.three h3{margin:0 0 8px; font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ember-deep)}
html[lang="ar"] .three h3{font-family:var(--ar-ui); letter-spacing:0; text-transform:none;
  font-size:14px; font-weight:500}
.three p{margin:0; font-family:var(--serif); font-size:clamp(17px,1.8vw,20px);
  line-height:1.42; color:#1B2325; max-width:none}
html[lang="ar"] .three p{font-family:var(--ar); font-size:clamp(17px,1.9vw,21px); line-height:1.7}
@media (max-width:760px){
  .three{grid-template-columns:1fr; gap:0}
  .three > div{padding-block:clamp(15px,2.4vw,20px)}
  .three > div:last-child{border-block-end:1px solid rgba(20,26,28,.16)}
}

/* --- 7. what a summer looks like -------------------------------*/
.exp{background:var(--oat); color:var(--on-light);
  padding:clamp(56px,9.5vh,112px) var(--gutter) clamp(58px,10vh,118px)}
.exp__in{max-width:1180px; margin-inline:auto}
.exp .kick{margin:0 0 clamp(12px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-deep)}
html[lang="ar"] .exp .kick{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
.exp h2{margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(27px,3.5vw,41px); line-height:1.13; letter-spacing:-.012em;
  max-width:16em; text-wrap:balance}
html[lang="ar"] .exp h2{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.48}
.exp .sub{margin:clamp(13px,1.7vw,18px) 0 0; font-family:var(--sans); font-size:17px;
  line-height:1.62; color:#37505C; max-width:33em}
html[lang="ar"] .exp .sub{font-family:var(--ar-ui); font-size:18px; line-height:1.9}

.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px); margin-block-start:clamp(32px,4.6vw,56px)}
.tile figure{margin:0}
/* height:auto is required — the HTML height attribute otherwise wins over aspect-ratio */
.tile img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:3px;
  background:rgba(20,26,28,.05)}
.tile h3{margin:clamp(14px,1.7vw,18px) 0 6px; font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--ember)}
html[lang="ar"] .tile h3{font-family:var(--ar-ui); letter-spacing:0; text-transform:none;
  font-size:14px; font-weight:500}
.tile p{margin:0; font-family:var(--serif); font-size:clamp(17px,1.75vw,19.5px);
  line-height:1.42; color:#12313F}
html[lang="ar"] .tile p{font-family:var(--ar); font-size:clamp(17px,1.85vw,20.5px); line-height:1.68}

.exp .foot{margin-block-start:clamp(34px,4.4vw,50px); padding-block-start:clamp(20px,2.6vw,26px);
  border-block-start:1px solid rgba(20,26,28,.16)}
.exp .fine{margin:0; font-family:var(--sans); font-size:12.5px; line-height:1.6;
  color:#596F7E; max-width:33em}
html[lang="ar"] .exp .fine{font-family:var(--ar-ui); font-size:13.5px; line-height:1.85}

@media (max-width:760px){
  .tiles{grid-template-columns:1fr; gap:clamp(26px,5vw,34px)}
  .tile img{aspect-ratio:4/3}
}

/* --- 8. the people beside them --------------------------------*/
section.who{background:var(--ivory); color:var(--on-light);
  padding:clamp(56px,9.5vh,112px) var(--gutter) clamp(58px,10vh,118px)}
.who__in{max-width:1180px; margin-inline:auto}
.who .kick{margin:0 0 clamp(12px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-deep)}
html[lang="ar"] .who .kick{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
.who h2{margin:0 0 clamp(26px,3.4vw,44px); font-family:var(--serif); font-weight:500;
  font-size:clamp(31px,4.8vw,58px); line-height:1.06; letter-spacing:-.018em; color:#12313F;
  max-width:15em; text-wrap:balance}
html[lang="ar"] .who h2{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.36}

/* the copy and the facts sit side by side, so this is not another
   narrow column of grey text with an empty half-page beside it */
.who__cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(30px,4.5vw,72px); align-items:start}
.who p{margin:0 0 clamp(13px,1.6vw,17px); font-family:var(--sans); font-size:17px;
  line-height:1.64; color:#37505C}
html[lang="ar"] .who p{font-family:var(--ar-ui); font-size:18px; line-height:1.9}
.who p.name{font-family:var(--serif); font-weight:500;
  font-size:clamp(23px,2.9vw,33px); line-height:1.26; letter-spacing:-.012em; color:#12313F;
  margin-block-start:clamp(22px,2.8vw,32px); margin-block-end:0}
html[lang="ar"] .who p.name{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.5}

/* the trust facts as a dark panel — the visual anchor of the section */
.vetting{background:var(--ink); color:var(--paper); border-radius:3px;
  padding:clamp(26px,3.2vw,38px) clamp(24px,3vw,36px)}
.vetting h3{margin:0 0 clamp(13px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--ember)}
html[lang="ar"] .vetting h3{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:14px}
/* Three short lists instead of one dense paragraph: what we promise,
   what is actually true today, and what is still missing. A parent can
   scan it; the difference between the three is the point. */
.sg{margin-block-start:clamp(20px,2.6vw,28px)}
.sg h5{margin:0 0 10px; font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--sand)}
html[lang="ar"] .sg h5{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13px}
.sg ul{margin:0; padding:0; list-style:none}
.sg li{position:relative; margin:0 0 7px; padding-inline-start:18px;
  font-family:var(--sans); font-size:15px; line-height:1.55; color:rgba(255,252,245,.86)}
.sg li::before{content:""; position:absolute; inset-inline-start:0; top:.62em;
  width:6px; height:1px; background:var(--sand)}
html[lang="ar"] .sg li{font-family:var(--ar-ui); font-size:16px; line-height:1.85}
.vetting h4{margin:0 0 clamp(14px,1.8vw,19px); font-family:var(--serif); font-weight:500;
  font-size:clamp(21px,2.4vw,27px); line-height:1.24; letter-spacing:-.012em; color:var(--paper)}
html[lang="ar"] .vetting h4{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.5}
.vetting p{margin:0 0 clamp(12px,1.5vw,16px); font-family:var(--sans); font-size:15.5px;
  line-height:1.66; color:rgba(244,239,231,.80)}
html[lang="ar"] .vetting p{font-family:var(--ar-ui); font-size:16.5px; line-height:1.92}
.vetting .soon{margin:clamp(20px,2.4vw,26px) 0 0; padding-block-start:clamp(17px,2vw,22px);
  border-block-start:1px solid rgba(244,239,231,.17);
  font-family:var(--sans); font-size:12.5px; line-height:1.6; color:var(--faint)}
html[lang="ar"] .vetting .soon{font-family:var(--ar-ui); font-size:13.5px; line-height:1.85}

/* the ask */
.ask{margin-block-start:clamp(40px,5vw,62px); padding-block-start:clamp(26px,3.2vw,34px);
  border-block-start:1px solid rgba(20,26,28,.16);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px,4vw,56px); flex-wrap:wrap}
.ask > div{max-width:30em}
.ask h3{margin:0 0 9px; font-family:var(--serif); font-weight:500;
  font-size:clamp(23px,2.8vw,32px); line-height:1.2; letter-spacing:-.014em; color:#12313F}
html[lang="ar"] .ask h3{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.5}
.ask p{margin:0}
/* on a light ground the orange button shouts; the dark one carries */
.ask .act{background:var(--ink); border-color:var(--ink); color:var(--paper); flex:none}
.ask .act::before{background:#12313F}
.ask .act:hover{background:transparent; border-color:var(--ink); color:var(--paper)}
.ask .act::before{background:var(--ink)}
.ask .act:hover{color:var(--paper); border-color:var(--ink); background:transparent}

/* two pictures, close in, under the copy — the section is about people
   and until now it contained none */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.2vw,16px);
  margin-block-start:clamp(26px,3.2vw,38px)}
.pair img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:3px; background:rgba(20,26,28,.05)}

@media (max-width:860px){
  .who__cols{grid-template-columns:1fr; gap:clamp(28px,5vw,38px)}
  .ask{flex-direction:column; align-items:stretch}
  .ask .act{justify-content:space-between}
}

/* --- breakpoints ----------------------------------------------*/
@media (max-width:1040px){
  .masthead{grid-template-columns:auto auto; justify-content:space-between}
  .nav,.tools{display:none}
  .opener{display:flex}
  .menu{display:flex}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .menu a.item,.menu .base,.up{opacity:1; transform:none}
  .masthead::after{transform:scaleX(1)}
  .mark .ara{opacity:1}
}

/* --- 9. why al hoceima ----------------------------------------
   Three beats: the children who meet here, why Rifāq puts them in one
   group, and the city that is worth building for. The children carry
   it; the demography only explains the longer ambition. */
.place{background:var(--midnight); color:var(--on-dark);
  padding:clamp(56px,9.5vh,112px) var(--gutter) clamp(58px,10vh,118px)}
/* Al Hoceima is the story section: wider shell, so the illustration can
   run bigger than anything else on the page. */
.place__in{max-width:1300px; margin-inline:auto}
/* The story opens across the full width: the line on the left, what it means
   on the right. A 1300px shell with one 33em column in it is not a wider
   section, it is the same column with more empty paper beside it. */
.place__head{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4.4vw,72px); align-items:end}
.place__head h2{max-width:13em}
.place__head .sub{max-width:33em; padding-block-end:.35em}
@media (max-width:860px){
  .place__head{grid-template-columns:1fr; gap:clamp(14px,3vw,20px); align-items:start}
  .place__head .sub{padding-block-end:0}
}
.place .kick{margin:0 0 clamp(12px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember)}
html[lang="ar"] .place .kick{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
.place h2{margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(27px,3.5vw,41px); line-height:1.13; letter-spacing:-.012em;
  max-width:15em; text-wrap:balance}
html[lang="ar"] .place h2{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.48}
.place .sub{margin:clamp(14px,1.8vw,20px) 0 0; max-width:30em; font-family:var(--sans); font-size:17px;
  line-height:1.68; color:var(--soft); max-width:33em}
html[lang="ar"] .place .sub{font-family:var(--ar-ui); font-size:18px; line-height:1.95}

.beat{margin-block-start:clamp(40px,5.2vw,70px)}
.beat__h{margin:0 0 clamp(18px,2.4vw,28px); font-family:var(--serif); font-weight:500;
  font-size:clamp(21px,2.5vw,30px); line-height:1.2; letter-spacing:-.008em;
  color:var(--paper); max-width:18em; text-wrap:balance}
html[lang="ar"] .beat__h{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.55}
.beat p.body{margin:0; font-family:var(--sans); font-size:17px; line-height:1.68;
  color:var(--soft); max-width:33em}
html[lang="ar"] .beat p.body{font-family:var(--ar-ui); font-size:18px; line-height:1.95}

/* the emotional close of the section — the one line to remember */
.close{margin:clamp(26px,3.2vw,40px) 0 0; font-family:var(--serif); font-weight:500;
  font-size:clamp(21px,2.3vw,28px); line-height:1.3; letter-spacing:-.010em;
  color:var(--paper); max-width:17em; text-wrap:balance}
html[lang="ar"] .close{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.62}

.place blockquote{margin:0 0 clamp(34px,4.4vw,52px);
  padding-inline-start:clamp(18px,2.1vw,28px);
  border-inline-start:2px solid var(--ember); max-width:34em}
.place blockquote .qt{display:block; margin:0; font-family:var(--serif);
  font-size:clamp(19px,2.15vw,25px); line-height:1.34; color:var(--paper); text-wrap:balance}
html[lang="ar"] .place blockquote .qt{font-family:var(--ar); font-size:clamp(18px,2vw,23px); line-height:1.72}
.place blockquote .by{display:block; margin-block-start:clamp(11px,1.4vw,15px);
  font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--faint)}
html[lang="ar"] .place blockquote .by{font-family:var(--ar-ui); font-size:13.5px}

.figs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,56px);
  max-width:860px; padding-block-start:clamp(24px,3vw,34px);
  border-block-start:1px solid var(--hair)}
.fig .n{display:block; font-family:var(--serif); font-weight:500; color:var(--ember);
  font-size:clamp(34px,4.6vw,58px); line-height:1; letter-spacing:-.02em;
  direction:ltr; unicode-bidi:isolate}
html[lang="ar"] .fig .n{text-align:right}
.fig p{margin:clamp(11px,1.4vw,15px) 0 0; font-family:var(--sans); font-size:14.5px;
  line-height:1.58; color:var(--soft)}
html[lang="ar"] .fig p{font-family:var(--ar-ui); font-size:15.5px; line-height:1.85}

/* The section opened on two columns and then spent a thousand pixels in a
   narrow left one, with half the shell empty beside it. Measured: every block
   after the opening used 540-665px of 1300 and left 635-760px unused. So each
   beat now has a right-hand half that carries something — the statement in the
   first, the two figures in the second — and the full-width image and footnote
   read as deliberate releases rather than the only wide things here. */
@media (min-width:901px){
  .beat--a{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
    column-gap:clamp(34px,5.4vw,86px); align-items:start}
  .beat--a .beat__h{grid-area:1/1}
  .beat--a p.body{grid-area:2/1}
  .beat--a .close{grid-area:1/2 / span 2 / auto; margin:0; align-self:center;
    padding-inline-start:clamp(20px,2.4vw,32px); border-inline-start:1px solid var(--hair)}
  .beat--a .motif{grid-area:3/1 / auto / -1}

  .beat--b{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    column-gap:clamp(34px,5.4vw,86px); align-items:start}
  .beat--b .beat__h{grid-area:1/1}
  .beat--b blockquote{grid-area:2/1; margin-block-end:0}
  /* beside the quote the two numbers stack: a small panel of evidence, not a
     band across the page */
  .beat--b .figs{grid-area:1/2 / span 2 / auto; grid-template-columns:minmax(0,1fr);
    gap:clamp(22px,2.8vw,34px); max-width:none; margin:0;
    padding-block-start:0; border-block-start:0;
    padding-inline-start:clamp(20px,2.4vw,32px); border-inline-start:1px solid var(--hair)}
  .beat--b .fig .n{font-size:clamp(30px,3.4vw,46px)}
  .beat--b .foot{grid-area:3/1 / auto / -1}
}

.place .foot{margin-block-start:clamp(30px,3.8vw,44px); padding-block-start:clamp(20px,2.6vw,26px);
  border-block-start:1px solid rgba(244,239,231,.15)}
.place .fine{margin:0; font-family:var(--sans); font-size:12.5px; line-height:1.6;
  color:var(--faint); max-width:46em}
html[lang="ar"] .place .fine{font-family:var(--ar-ui); font-size:13.5px; line-height:1.85}

@media (max-width:640px){
  .figs{grid-template-columns:1fr; gap:clamp(22px,5vw,30px)}
  /* a fixed number column so both descriptions start on one line */
  .fig{display:grid; grid-template-columns:clamp(78px,22vw,104px) minmax(0,1fr);
    gap:clamp(12px,3vw,18px); align-items:baseline}
  .fig .n{font-size:clamp(30px,9vw,42px)}
  .fig p{margin:0}
}

/* the meeting, shown once — placed between the children and the numbers */
.motif{margin:clamp(34px,4.6vw,58px) 0 0}
.motif img{display:block; width:100%; height:auto; border-radius:3px;
  background:rgba(244,239,231,.05)}
.motif figcaption{display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:clamp(10px,1.6vw,26px);
  margin-block-start:clamp(14px,1.8vw,20px)}
.motif__c{font-family:var(--serif); font-weight:500; font-size:clamp(17px,1.9vw,22px);
  line-height:1.3; color:var(--paper)}
html[lang="ar"] .motif__c{font-family:var(--ar); font-weight:400; font-size:clamp(16px,1.8vw,21px); line-height:1.6}
.motif__n{font-family:var(--sans); font-size:11.5px; line-height:1.5; color:var(--faint)}
html[lang="ar"] .motif__n{font-family:var(--ar-ui); font-size:12.5px}
@media (max-width:620px){
  .motif figcaption{flex-direction:column; gap:8px}
}

.place .by a{color:var(--soft); text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px;
  text-decoration-color:rgba(244,239,231,.3); transition:color .3s var(--ease)}
.place .by a:hover{color:var(--ember); text-decoration-color:var(--ember-line)}
.dot{color:var(--faint); padding-inline:.42em}
.place .src{margin:clamp(9px,1.2vw,13px) 0 0; font-family:var(--sans);
  font-size:11.5px; line-height:1.6; color:var(--faint)}
html[lang="ar"] .place .src{font-family:var(--ar-ui); font-size:12.5px; line-height:1.85}
.place .src a{color:var(--faint); text-decoration:underline;
  text-underline-offset:2px; text-decoration-color:rgba(244,239,231,.22)}
.place .src a:hover{color:var(--ember)}

/* --- 12. take part --------------------------------------------
   Two doors, nothing else. The page has explained enough; this
   section only has to be easy to act on. */
.join{background:var(--sage); color:var(--on-light);
  padding:clamp(56px,9.5vh,112px) var(--gutter) clamp(58px,10vh,118px)}
.join__in{max-width:1120px; margin-inline:auto}
.join .kick{margin:0 0 clamp(12px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-deep)}
html[lang="ar"] .join .kick{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
.join h2{margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(31px,4.8vw,58px); line-height:1.06; letter-spacing:-.018em; color:#12313F;
  max-width:14em; text-wrap:balance}
html[lang="ar"] .join h2{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.36}
.join .sub{margin:clamp(14px,1.8vw,20px) 0 0; font-family:var(--sans); font-size:17px;
  line-height:1.68; color:#37505C; max-width:33em}
html[lang="ar"] .join .sub{font-family:var(--ar-ui); font-size:18px; line-height:1.95}

.doors{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,64px); margin-block-start:clamp(38px,5vw,64px)}
.door{padding-block-start:clamp(20px,2.6vw,28px); border-block-start:1px solid rgba(20,26,28,.22)}
.door .who{margin:0 0 clamp(10px,1.3vw,14px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--ember-deep)}
html[lang="ar"] .door .who{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13px}
.door h3{margin:0 0 clamp(11px,1.5vw,16px); font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,2.7vw,33px); line-height:1.15; letter-spacing:-.012em; color:#12313F}
html[lang="ar"] .door h3{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.5}
.door p{margin:0 0 clamp(20px,2.6vw,28px); font-family:var(--sans); font-size:16px;
  line-height:1.66; color:#37505C; max-width:30em}
html[lang="ar"] .door p{font-family:var(--ar-ui); font-size:17px; line-height:1.92}

.join .fine{margin:clamp(34px,4.4vw,54px) 0 0; padding-block-start:clamp(20px,2.6vw,26px);
  border-block-start:1px solid rgba(20,26,28,.15);
  font-family:var(--serif); font-size:clamp(18px,2.1vw,25px); line-height:1.32;
  color:#12313F; max-width:24em; text-wrap:balance}
html[lang="ar"] .join .fine{font-family:var(--ar); font-size:clamp(17px,2vw,23px); line-height:1.6}

@media (max-width:760px){ .doors{grid-template-columns:1fr; gap:clamp(30px,6vw,40px)} }

/* --- 13. how it lasts -----------------------------------------
   The waqf. Last section on the page, because it answers the
   question a parent or companion only asks once they care:
   will this still be here next year? */
.waqf{background:var(--ink); color:var(--on-dark);
  padding:clamp(56px,9.5vh,112px) var(--gutter) clamp(64px,11vh,128px)}
/* restrained: the argument carries it, so the column is tight */
.waqf__in{max-width:1020px; margin-inline:auto}
.waqf .kick{margin:0 0 clamp(12px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember)}
html[lang="ar"] .waqf .kick{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
.waqf h2{margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(30px,4.4vw,54px); line-height:1.07; letter-spacing:-.016em;
  max-width:13em; text-wrap:balance}
html[lang="ar"] .waqf h2{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.4}
.waqf .sub{margin:clamp(15px,2vw,22px) 0 0; font-family:var(--sans); font-size:17px;
  line-height:1.68; color:var(--soft); max-width:33em}
html[lang="ar"] .waqf .sub{font-family:var(--ar-ui); font-size:18px; line-height:1.95}
.waqf .note{margin:clamp(16px,2vw,22px) 0 0; font-family:var(--sans); font-size:13.5px;
  line-height:1.62; color:var(--faint); max-width:33em}
html[lang="ar"] .waqf .note{font-family:var(--ar-ui); font-size:14.5px; line-height:1.9}

.rules{list-style:none; margin:clamp(38px,5vw,62px) 0 0; padding:0;
  border-block-start:1px solid var(--hair)}
.rules li{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(18px,3vw,52px); align-items:baseline;
  padding-block:clamp(18px,2.4vw,28px); border-block-end:1px solid var(--hair)}
.rules b{font-family:var(--serif); font-weight:500; font-size:clamp(18px,2vw,23px);
  line-height:1.28; color:var(--paper)}
html[lang="ar"] .rules b{font-family:var(--ar); font-weight:400; font-size:clamp(18px,2.05vw,24px); line-height:1.55}
.rules p{margin:0; font-family:var(--sans); font-size:15.5px; line-height:1.64; color:var(--soft)}
html[lang="ar"] .rules p{font-family:var(--ar-ui); font-size:16.5px; line-height:1.9}

.waqf .open{margin:clamp(34px,4.4vw,52px) 0 0; font-family:var(--sans); font-size:13.5px;
  line-height:1.62; color:var(--faint); max-width:33em}
html[lang="ar"] .waqf .open{font-family:var(--ar-ui); font-size:14.5px; line-height:1.9}
.waqf .close{margin:clamp(12px,1.6vw,18px) 0 0; font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,2.9vw,35px); line-height:1.25; letter-spacing:-.012em;
  color:var(--paper); max-width:20em; text-wrap:balance}
html[lang="ar"] .waqf .close{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.6}

@media (max-width:700px){ .rules li{grid-template-columns:1fr; gap:7px} }

/* --- 10. how Rifāq works --------------------------------------
   One section, two movements. The journey sits on pale sea; the
   foundation it rests on goes midnight underneath it. Six stages
   you click through rather than six rows you read. */

/* the rail: one line, six marks, the live one filled */
/* six equal columns put the end dots at 1/12 and 11/12, so the line
   must start and stop there rather than overshooting */

/* All six panels share one grid cell, so the container is always as tall as
   the tallest and tapping through the stages never shifts the page. The
   inactive ones keep the hidden attribute — visibility:hidden takes them out
   of the tab order and out of the accessibility tree just as display:none did. */
/* Two columns. The picture's 3:2 box sets the row height and the copy is
   written to sit under it, so switching stage never changes the section's
   height and never leaves the void the old text-only panel left behind. */
/* the copy column stretches to the picture's height and the value sits on
   its baseline, so the two columns end on the same line instead of leaving
   the left one hanging in mid-air */
/* Where you are, in words. This is the job the decorative numeral was
   failing to do: the panel is one of six and should say so. */
/* the value is labelled, so it cannot be misread as one more sentence */

/* the foundation, underneath and darker */
.found{background:var(--midnight); color:var(--on-dark)}
/* the faith section is the quiet one: the narrowest measure on the page */
.found__in{max-width:880px; margin-inline:auto;
  padding:clamp(52px,8vh,96px) var(--gutter) clamp(56px,9vh,108px)}
.found .kick{margin:0 0 clamp(12px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember)}
html[lang="ar"] .found .kick{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
.ayah{margin:clamp(18px,2.6vw,34px) auto clamp(26px,3.4vw,42px); max-width:30em; text-align:center}
.ayah .ar{display:block; font-family:var(--ar); font-weight:400; direction:rtl;
  font-size:clamp(28px,4vw,46px); line-height:1.75; color:var(--on-dark)}
.ayah .tr{display:block; margin-block-start:clamp(13px,1.8vw,20px); font-family:var(--serif);
  font-size:clamp(16px,1.8vw,21px); line-height:1.4; color:rgba(255,252,245,.72)}
html[lang="ar"] .ayah .tr{font-family:var(--ar); direction:rtl; font-size:clamp(16px,1.9vw,22px); line-height:1.7}
.ayah .ref{display:block; margin-block-start:10px; font-family:var(--sans); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember)}
html[lang="ar"] .ayah .ref{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13px}
.found__h{margin:clamp(14px,2vw,22px) auto clamp(26px,3.6vw,40px); text-align:center;
  font-family:var(--serif); font-weight:500; font-size:clamp(27px,3.6vw,42px);
  line-height:1.1; letter-spacing:-.016em; color:var(--paper); max-width:15em; text-wrap:balance}
html[lang="ar"] .found__h{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.45}
.found .sub{margin:0 auto; font-family:var(--sans); font-size:16px; line-height:1.7;
  color:rgba(255,252,245,.74); max-width:33em; text-align:center}
html[lang="ar"] .found .sub{font-family:var(--ar-ui); font-size:17px; line-height:1.95}

/* the seven values: there for whoever wants them, folded away for whoever doesn't */
.more{margin:clamp(26px,3.4vw,40px) auto 0; max-width:33em;
  border-block:1px solid rgba(255,252,245,.16)}
.more > summary{list-style:none; cursor:pointer; padding-block:clamp(14px,1.8vw,19px);
  min-height:44px; box-sizing:border-box;
  display:flex; align-items:center; gap:11px; font-family:var(--sans); font-size:12px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ember)}
html[lang="ar"] .more > summary{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:14.5px}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:""; width:8px; height:8px; border-inline-end:1px solid currentColor;
  border-block-end:1px solid currentColor; transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease)}
.more[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.more > summary:focus-visible{outline:2px solid var(--ember); outline-offset:2px}
.seven{list-style:none; margin:0 0 clamp(18px,2.4vw,26px); padding:0}
.seven li{display:grid; grid-template-columns:5.9em minmax(0,1fr);
  gap:clamp(12px,1.8vw,24px); align-items:baseline; padding-block:clamp(9px,1.2vw,13px);
  border-block-start:1px solid rgba(255,252,245,.1)}
.seven .ref{font-family:var(--sans); font-size:11.5px; font-weight:500; color:var(--ember);
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
html[lang="ar"] .seven .ref{text-align:right}
.seven .txt{font-family:var(--serif); font-size:clamp(16px,1.7vw,19px); line-height:1.34;
  color:var(--on-dark)}
html[lang="ar"] .seven .txt{font-family:var(--ar); font-size:clamp(16px,1.8vw,20px); line-height:1.6}
.seven .tm{display:block; margin-block-start:2px; font-family:var(--sans); font-size:12px;
  color:rgba(255,252,245,.45)}
html[lang="ar"] .seven .tm{font-family:var(--ar-ui); font-size:13.5px}

.pil2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,44px);
  margin-block-end:clamp(18px,2.4vw,26px)}
.pil2 > div{padding-inline-start:clamp(13px,1.6vw,19px); border-inline-start:2px solid var(--ember-line)}
.pil2 .ar{display:block; font-family:var(--ar); direction:rtl; font-size:clamp(17px,1.9vw,22px);
  line-height:1.7; color:var(--on-dark)}
.pil2 .rf{display:block; margin-block-start:6px; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ember)}
html[lang="ar"] .pil2 .rf{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:12.5px}
.pil2 p{margin:8px 0 0; font-family:var(--sans); font-size:14.5px; line-height:1.6;
  color:rgba(255,252,245,.72)}
html[lang="ar"] .pil2 p{font-family:var(--ar-ui); font-size:15.5px; line-height:1.9}
.found .tie{margin:0 0 clamp(18px,2.4vw,26px); font-family:var(--sans); font-size:14px;
  line-height:1.65; color:rgba(255,252,245,.6)}
html[lang="ar"] .found .tie{font-family:var(--ar-ui); font-size:15px; line-height:1.9}

.found .close{margin:clamp(30px,4vw,48px) auto 0; max-width:22em; text-align:center;
  font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.9vw,35px);
  line-height:1.25; letter-spacing:-.012em; color:var(--on-dark); text-wrap:balance}
html[lang="ar"] .found .close{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.6}
.found .fine{margin:clamp(24px,3vw,34px) auto 0; max-width:33em; text-align:center;
  font-family:var(--sans); font-size:12px; line-height:1.6; color:rgba(255,252,245,.42)}
html[lang="ar"] .found .fine{font-family:var(--ar-ui); font-size:13px; line-height:1.85}

@media (max-width:760px){
  /* the rail becomes a swipeable row rather than six squeezed columns */
  /* one column, picture first: on a phone the illustration is what tells you
     the stage changed, and it should not be below the fold to do it */
  .pil2{grid-template-columns:1fr}
  .seven li{grid-template-columns:5.2em minmax(0,1fr); gap:11px}
}

/* Ember is 6–7:1 on the dark grounds but only 2.2:1 on sea and clay,
   so those two sections take a pale accent instead. Measured, not guessed. */
/* the summer is a light section now; sand is for the dark grounds only */
.place .kick{color:var(--sand)}
.exp .kick, .tile h3{color:var(--ember-deep)}
.place blockquote{border-inline-start-color:var(--sand)}
.place .by a:hover, .place .src a:hover{color:var(--white)}
.place .by a{text-decoration-color:rgba(255,252,245,.45)}
.place .sub, .place__cols p, .place .fig p{color:rgba(255,252,245,.82)}
.tile p{color:#12313F}
.exp .fine, .place .fine, .place .src, .place .by{color:rgba(255,252,245,.66)}
.exp .foot, .place .foot{border-block-start-color:rgba(255,252,245,.22)}
.exp .tiles .tile img, .place .motif img{background:rgba(255,252,245,.07)}
.place .figs{border-block-start-color:rgba(255,252,245,.28)}
.place .motif__c{color:var(--white)}
.place .motif__n{color:rgba(255,252,245,.6)}
.place .close{color:var(--white)}
.place blockquote .qt{color:var(--white)}
.place h2{color:var(--white)}
.exp h2{color:#12313F}
.place .dot{color:rgba(255,252,245,.55)}

/* sand ground: the light-ground accent, one step deeper so it holds */
.who .kick{color:#8C5F2B}
.join .kick, .join .door .who{color:#9F4E33}
.join .door{border-block-start-color:rgba(20,26,28,.26)}

/* --- the summer, composed rather than gridded ------------------
   Three equal cards read as a template. One large and two smaller
   reads as an editorial spread, and costs no new artwork. */
@media (min-width:861px){
  .tiles{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); grid-template-rows:auto auto;
    gap:clamp(20px,2.6vw,38px) clamp(24px,3.2vw,48px); align-items:start}
  .tiles .tile:nth-child(1){grid-row:1 / span 2; align-self:stretch}
  /* the drawing is 3:2; cropping it to a portrait frame cut the town,
     the wall and the sea out of a picture that is partly about them */
  .tiles .tile:nth-child(1) img{aspect-ratio:5/4}
  .tiles .tile:nth-child(1) p{font-size:clamp(20px,2.2vw,26px)}
  .tiles .tile:nth-child(2) img,
  .tiles .tile:nth-child(3) img{aspect-ratio:16/10}
}
/* a little life on hover, nothing that moves on its own */
.tile figure{overflow:hidden; border-radius:3px}
.tile img{transition:transform .7s var(--ease)}
@media (hover:hover){ .tile:hover img{transform:scale(1.035)} }

/* The oversized numeral that used to sit behind this panel is gone: at the
   opacity it needed to stay behind the text it read as a smudge, not a mark.
   The picture carries the change between stages now. */

/* --- pictures settle, they do not fade -------------------------
   Text drifts up; illustrations uncover themselves from the bottom edge
   and stop. Two different gestures, so the page does not read as one
   effect applied to everything. */
@media (prefers-reduced-motion:no-preference){
  html.js .rv figure{clip-path:inset(0 0 15% 0); transition:clip-path 1.05s var(--ease)}
  html.js .rv.in figure{clip-path:inset(0 0 0 0)}
  html.js .rv.in .tile:nth-child(2) figure{transition-delay:.12s}
  html.js .rv.in .tile:nth-child(3) figure{transition-delay:.22s}
  html.js .rv.in .pair img:nth-child(2){transition-delay:.1s}
}

/* --- things answer when you point at them ----------------------- */
.tile h3{transition:color .3s var(--ease)}
@media (hover:hover){
  .tile:hover h3{color:#7E3D26}
  .more > summary:hover{color:var(--sun)}
}
.more > summary::after{flex:none}

/* --- the hero is never completely still ------------------------
   A 4.5% scale over half a minute, breathing in and out. At this speed no
   single frame reads as movement; what you notice is that the top of the
   page is alive. Guarded twice: no JS, no drift; reduced motion, no drift. */
@media (prefers-reduced-motion:no-preference){
  html.js .hero__shot img{animation:drift 34s var(--ease) infinite alternate;
    will-change:transform}
}
@keyframes drift{from{transform:scale(1)} to{transform:scale(1.045)}}

/* --- sections arrive rather than appear ------------------------ */
@media (prefers-reduced-motion:no-preference){
  html.js .rv{opacity:0; transform:translateY(14px);
    transition:opacity .75s var(--ease), transform .75s var(--ease)}
  html.js .rv.in{opacity:1; transform:none}
}

/* --- movement -------------------------------------------------
   Everything here is entrance-only and runs once. Nothing loops,
   nothing follows the cursor, nothing moves while you read. */
@media (prefers-reduced-motion:no-preference){
  /* children arrive a beat after their heading, so a section unfolds
     instead of appearing as one slab */
  html.js .rv > *{opacity:0; transform:translateY(12px);
    transition:opacity .66s var(--ease), transform .66s var(--ease)}
  html.js .rv.in > *{opacity:1; transform:none}

}

/* the journey line fills up to the stage you are on */

/* links and chips answer the pointer */
.place .src a, .place .by a{transition:color .3s var(--ease)}
.door .act{transition:transform .35s var(--swing)}
@media (hover:hover){ .door:hover .act{transform:translateY(-2px)} }

/* --- colour as punctuation -------------------------------------
   Saturated colour never fills a section. It appears where the eye
   already stops: a rule, a number, one small panel. The grounds
   stay warm-light or deep, so the illustrations carry the colour. */
.exp .kick{color:var(--ember-deep)}
.tile h3{color:var(--ember-deep)}
.exp .sub, .tile p, .exp .fine{color:inherit}
.exp .sub{color:#37505C} .exp .fine{color:#596F7E}
.tile p{color:#12313F}
.exp .foot{border-block-start-color:rgba(20,26,28,.16)}
/* one blue rule under the section heading, the sea's only appearance here */
/* The rule under this heading is drawn rather than simply present: it is a
   pseudo-element whose width goes 0 → 100% when the section arrives. A border
   cannot be animated this way, so it had to stop being a border. */
.exp h2{position:relative; padding-block-end:clamp(14px,1.8vw,20px);
  width:fit-content; max-width:16em; color:#12313F}
.exp h2::after{content:""; position:absolute; inset-inline-start:0; bottom:0;
  height:2px; width:100%; background:var(--sea)}
@media (prefers-reduced-motion:no-preference){
  html.js .exp h2::after{width:0; transition:width 1.1s var(--ease) .25s}
  html.js .rv.in .exp h2::after, html.js .exp__in.rv.in h2::after{width:100%}
}

.who .kick{color:var(--ember-deep)}
/* no mount behind the pair — a frame around artwork reads as a waiting room */
.who .pair img{border-radius:3px}

.place .kick{color:var(--clay-accent)}
.place blockquote{border-inline-start-color:var(--clay-accent)}
.place .fig .n{color:var(--clay-accent)}
.place .sub, .place__cols p, .place .fig p{color:var(--soft)}
.place .fine, .place .src, .place .by{color:var(--faint)}
.place .by a:hover, .place .src a:hover{color:var(--clay-accent)}
.place h2, .place .close, .place blockquote .qt, .place .motif__c{color:var(--paper)}
.place .figs{border-block-start-color:var(--hair)}
.place .foot{border-block-start-color:rgba(244,239,231,.15)}
.place .motif__n{color:var(--faint)}
.place .dot{color:var(--faint)}

/* ember-deep is only 4.29:1 on sage and these are 10.5px; darkened to 4.52 */
.join .kick, .join .door .who{color:#9F4E33}

/* --- who is behind this ----------------------------------------
   The one place on the site where a person speaks. It sits low, just
   before the invitation: by here a parent has decided she is interested,
   and the only thing left unanswered is who is asking her for her
   children's names. */
.me{background:var(--sage); color:var(--on-light);
  padding-block:clamp(56px,8vw,104px); padding-inline:var(--gutter)}
/* A letter, so it is set as one: a single column at a reading measure.
   Two columns left the heading side empty for five hundred pixels. */
.me__in{max-width:760px; margin-inline:auto}
.me__head{margin-block-end:clamp(24px,3.4vw,40px)}
@media (max-width:860px){.me__in{grid-template-columns:1fr; gap:clamp(18px,3vw,26px)}}
.me h2{margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(27px,3.4vw,40px); line-height:1.16; letter-spacing:-.012em;
  color:var(--on-light); max-width:16em; text-wrap:balance}
html[lang="ar"] .me h2{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.45}
.me .kick{margin:0 0 clamp(12px,1.6vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-deep)}
html[lang="ar"] .me .kick{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13px}
.me__body p{margin:0 0 clamp(13px,1.7vw,18px); font-family:var(--sans); font-size:16.5px;
  line-height:1.72; color:#29505F; max-width:38em}
html[lang="ar"] .me__body p{font-family:var(--ar-ui); font-size:17.5px; line-height:1.95}
/* the choice not to show faces, said plainly so it does not read as hiding */
.me__note{padding-inline-start:clamp(15px,1.8vw,22px);
  border-inline-start:2px solid rgba(18,49,63,.22); font-size:15px !important;
  color:#536A78 !important}
.me__ask{font-size:15px !important; color:#536A78 !important;
  margin-block-end:clamp(16px,2.2vw,22px) !important}
/* the turn of the letter, and the duʿāʾ that closes it, both set in the
   serif so the eye slows down for them */
.me__turn{font-family:var(--serif) !important; font-size:21px !important;
  line-height:1.35 !important; color:var(--on-light) !important;
  margin-block:clamp(18px,2.4vw,24px) !important}
html[lang="ar"] .me__turn{font-family:var(--ar) !important; font-size:22px !important; line-height:1.6 !important}
.me__dua{font-family:var(--serif) !important; font-size:18.5px !important;
  line-height:1.45 !important; color:var(--on-light) !important;
  margin-block-start:clamp(18px,2.4vw,24px) !important}
html[lang="ar"] .me__dua{font-family:var(--ar) !important; font-size:20px !important; line-height:1.75 !important}
.me__sign{font-family:var(--serif) !important; font-size:17px !important;
  color:#29505F !important; margin-block:clamp(14px,1.8vw,18px) clamp(20px,2.6vw,26px) !important}
html[lang="ar"] .me__sign{font-family:var(--ar) !important; font-size:18px !important}


/* --- how far down you are ---------------------------------------
   Fourteen screens on a phone. A two-pixel line is the cheapest way to
   say "you are a third of the way in" without a word of copy. */
.sprog{position:fixed; inset-inline:0; top:0; height:2.5px; z-index:61;
  pointer-events:none; background:transparent}
.sprog i{display:block; height:100%; width:0; background:var(--cta);
  transform-origin:left; transition:width .12s linear}
html[dir="rtl"] .sprog i{margin-inline-start:auto}

/* --- the ask, kept within reach on a phone ----------------------
   The form section sits ten screens down. Rather than move it, the one
   thing we are asking for travels with the reader. It appears once the
   hero is behind you and steps aside when the real invitation arrives,
   so it is never shown next to the thing it points at. */
.stick{display:none}
@media (max-width:699px){
  .stick{display:block; position:fixed; z-index:57;
    inset-inline:0; bottom:0;
    padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(11,34,50,.92) 62%,rgba(11,34,50,0));
    transform:translateY(120%); opacity:0;
    transition:transform .45s var(--ease), opacity .35s var(--ease)}
  .stick.on{transform:none; opacity:1}
  .stick .act{display:flex; width:100%; box-sizing:border-box;
    justify-content:space-between; padding:13px 18px}
  /* a short screen has little to spare */
  @media (max-height:700px){
    .stick{padding-block:6px calc(6px + env(safe-area-inset-bottom))}
    .stick .act{padding-block:11px}
  }
  /* an in-page jump should not park its target under the bar */
  html{scroll-padding-block-end:82px}
  /* the menu covers the page; the bar must not float above it */
  .open .stick{opacity:0; transform:translateY(120%)}
}
@media (max-width:699px) and (prefers-reduced-motion:reduce){
  .stick{transition:none}
}

/* --- phone: small type was set for a desktop reading distance ----
   Measured on the live page: 61 text elements below 13px, most of them
   10.5px uppercase with wide letterspacing. That is legible on a monitor
   and hard work at arm's length on a phone. */
@media (max-width:699px){
  /* every section scopes its own kicker (.what .kick, .place .kick, …), so
     a bare .kick rule loses on specificity. Name them. */
  .what .kick, .place .kick, .exp .kick, .found .kick, .join .kick,
  .waqf .kick, .who .kick, .me .kick, .door .who, .sg h5,
  .kick, .kicker, .whom{font-size:11.5px}
  .act, .action, .act.ghost{font-size:11.5px}
  /* the verse rows in the faith section: reference, meaning, transliteration */
  .found .ref, .found .rf, .ref, .rf{font-size:12px}
  .tm{font-size:13px}
  .exp h3, section.who h3{font-size:11.5px}
  .hero .note{font-size:12.5px}
  .place .fine, .exp .fine, .found .fine, .place .src{font-size:13px}
  .place .by{font-size:13px}
  .motif__n{font-size:12.5px}
  /* the two source links were 14 and 34 pixels tall */
  .place .by a, .place .src a{display:inline-block; padding-block:13px}
  /* footer links were 21px tall with 9px between them */
  .sitefoot__col a{padding-block:13px; margin-block-end:0}
}

/* --- the other pages ------------------------------------------
   Each page opens on a short dark head that says where you are, with the
   way back above it. The masthead and its scrim behave exactly as they do
   over the home page's hero. */
.phead{position:relative; isolation:isolate;
  padding:clamp(116px,17vh,168px) var(--gutter) clamp(40px,6.5vh,72px);
  background:radial-gradient(120% 130% at 88% 0%, #1A4A68 0%, var(--midnight) 52%, #0B2232 100%);
  color:var(--paper)}
.phead__in{max-width:var(--pw,1180px); margin-inline:auto}
.phead__back{display:inline-flex; align-items:center; gap:10px; min-height:44px;
  margin:0 0 clamp(6px,1.2vw,14px); font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ember); transition:color .3s var(--ease)}
.phead__back .arrow{transform:scaleX(-1)}
html[dir="rtl"] .phead__back .arrow{transform:none}
.phead__back:hover{color:var(--paper)}
html[lang="ar"] .phead__back{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:14px}
.phead h1{margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(36px,5.4vw,64px); line-height:1.04; letter-spacing:-.016em; color:var(--paper);
  max-width:15em; text-wrap:balance}
html[lang="ar"] .phead h1{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.4;
  font-size:clamp(30px,4.6vw,54px)}
.phead .lead{margin:clamp(14px,1.8vw,20px) 0 0; font-family:var(--sans);
  font-size:clamp(16px,1.7vw,19px); line-height:1.6; color:var(--soft); max-width:34em}
html[lang="ar"] .phead .lead{font-family:var(--ar-ui); font-size:clamp(17px,1.8vw,20px); line-height:1.9}
/* where the page below is dark too, a hairline marks the turn from head to page */
.phead--rule .phead__in::after{content:""; display:block; height:1px; background:var(--hair);
  margin-block-start:clamp(30px,4.4vw,52px)}
.phead--rule{padding-block-end:0;
  background:radial-gradient(85% 150% at 88% 0%, #1A4A68 0%, rgba(26,74,104,0) 72%), var(--next, var(--midnight))}
.phead--rule + .waqf{padding-block-start:clamp(34px,5vh,56px)}
.phead--rule + .found .found__in{padding-block-start:clamp(26px,4vh,44px)}
/* the faith page is centred from top to bottom */
.phead--c .phead__in{text-align:center}
.phead--c h1, .phead--c .lead{margin-inline:auto}
/* on its own page the seven values are the point, so they are open */
.found .more[open]{max-width:36em}

/* the page you are on, marked in the bar */
.nav a[aria-current="page"]{color:var(--paper)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.masthead.onlight .nav a[aria-current="page"]{color:var(--on-light)}
.menu a.item[aria-current="page"] .one{color:var(--ember)}

/* --- more about Rifāq: one card per page ------------------------ */
.onward{background:var(--oat); color:var(--on-light);
  padding:clamp(52px,8.5vh,100px) var(--gutter) clamp(56px,9vh,108px)}
.onward__in{max-width:1180px; margin-inline:auto}
.join + .onward .onward__in{max-width:1120px}
.onward .kick{margin:0 0 clamp(16px,2vw,24px); font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ember-deep)}
html[lang="ar"] .onward .kick{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
.pgcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px)}
.pgcard{display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px); background:var(--ivory); border-radius:3px;
  box-shadow:0 0 0 1px rgba(18,49,63,.07);
  transition:transform .35s var(--swing), box-shadow .35s var(--ease)}
.pgcard__ar{font-family:var(--ar); font-size:15px; line-height:1.4; color:var(--ember-deep); direction:rtl}
html[lang="ar"] .pgcard__ar{font-family:var(--serif); direction:ltr; font-size:14.5px; letter-spacing:.03em}
.pgcard__t{font-family:var(--serif); font-weight:500; font-size:clamp(23px,2.3vw,28px); line-height:1.15;
  letter-spacing:-.01em; color:#12313F; text-wrap:balance}
html[lang="ar"] .pgcard__t{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.5}
.pgcard__d{font-family:var(--sans); font-size:15.5px; line-height:1.6; color:#37505C}
html[lang="ar"] .pgcard__d{font-family:var(--ar-ui); font-size:16.5px; line-height:1.9}
.pgcard__go{margin-block-start:auto; padding-block-start:10px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#9F4E33}
html[lang="ar"] .pgcard__go{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:14.5px}
.pgcard .arrow{transition:width .4s var(--ease)}
@media (hover:hover){
  .pgcard:hover{transform:translateY(-3px);
    box-shadow:0 0 0 1px rgba(18,49,63,.10), 0 18px 36px -24px rgba(18,49,63,.45)}
  .pgcard:hover .arrow{width:20px}
}
@media (max-width:860px){ .pgcards{grid-template-columns:1fr} }
.onward__ask{margin-block-start:clamp(36px,4.6vw,56px); padding-block-start:clamp(24px,3vw,32px);
  border-block-start:1px solid rgba(20,26,28,.16);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px}
.onward__q{margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(23px,2.8vw,32px);
  line-height:1.2; letter-spacing:-.012em; color:#12313F}
html[lang="ar"] .onward__q{font-family:var(--ar); font-weight:400; letter-spacing:0; line-height:1.5}
.onward__ask .acts{margin:0}
@media (max-width:620px){ .onward__ask{align-items:stretch} .onward__ask .acts{width:100%} }

/* an outlined button for light grounds, beside the filled dark one */
.act.line{background:transparent; border-color:rgba(18,49,63,.5); color:#12313F}
.act.line::before{background:var(--ink)}
.act.line:hover{color:var(--paper); border-color:var(--ink)}

/* the home page's short version of the safety section */
.who--short .who__go{margin-block-start:clamp(24px,3vw,32px)}
@media (max-width:620px){ .who--short .who__go{display:flex; width:100%; justify-content:space-between} }

@media (max-width:699px){
  /* the phone rule that shrinks section.who h3 to a label was also catching
     "Could you be one of them?", which is a heading, not a label */
  section.who .ask h3{font-size:24px}
  /* the cards sit closer on a phone: same words, less air */
  .pgcards{gap:10px}
  .pgcard{gap:6px; padding:18px 18px 16px}
  .pgcard__d{font-size:15px; line-height:1.55}
  .pgcard__go{padding-block-start:4px}
  .onward .kick, .pgcard__go, .phead__back{font-size:11.5px}
  html[lang="ar"] .pgcard__go, html[lang="ar"] .phead__back{font-size:14.5px}
}