/* Rifāq — shared foundation, loaded by every page so the tokens,
   masthead, menu and buttons cannot drift apart between them. */

/* Self-hosted. Google Fonts would leak every visitor's IP address to
   Google, which is a real problem for a site aimed at families in the
   Netherlands, Belgium and France. The ext faces carry only the ~60
   transliteration glyphs this site needs (ā, ṣ, ḥ, ī …), not the 800
   of a full latin-ext subset. */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;
  font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.c3b16621.woff2) format("woff2");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;
  font-display:swap;src:url(fonts/eb-garamond-ext-400-normal.fea93607.woff2) format("woff2");unicode-range:U+0100,U+0101,U+0106,U+0107,U+010C,U+010D,U+0110,U+0111,U+0112,U+0113,U+011E,U+011F,U+0120,U+0121,U+012A,U+012B,U+0130,U+0131,U+0141,U+0142,U+0143,U+0144,U+014C,U+014D,U+0150,U+0151,U+0158,U+0159,U+015A,U+015B,U+015E,U+015F,U+0160,U+0161,U+016A,U+016B,U+016E,U+016F,U+0170,U+0171,U+0179,U+017A,U+017B,U+017C,U+017D,U+017E,U+02BB,U+02BC,U+02BE,U+02BF,U+1E0C,U+1E0D,U+1E0E,U+1E0F,U+1E24,U+1E25,U+1E62,U+1E63,U+1E6C,U+1E6D,U+1E6E,U+1E6F,U+1E92,U+1E93}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;
  font-display:swap;src:url(fonts/eb-garamond-latin-500-normal.00d816b7.woff2) format("woff2");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;
  font-display:swap;src:url(fonts/eb-garamond-ext-500-normal.dacb70cc.woff2) format("woff2");unicode-range:U+0100,U+0101,U+0106,U+0107,U+010C,U+010D,U+0110,U+0111,U+0112,U+0113,U+011E,U+011F,U+0120,U+0121,U+012A,U+012B,U+0130,U+0131,U+0141,U+0142,U+0143,U+0144,U+014C,U+014D,U+0150,U+0151,U+0158,U+0159,U+015A,U+015B,U+015E,U+015F,U+0160,U+0161,U+016A,U+016B,U+016E,U+016F,U+0170,U+0171,U+0179,U+017A,U+017B,U+017C,U+017D,U+017E,U+02BB,U+02BC,U+02BE,U+02BF,U+1E0C,U+1E0D,U+1E0E,U+1E0F,U+1E24,U+1E25,U+1E62,U+1E63,U+1E6C,U+1E6D,U+1E6E,U+1E6F,U+1E92,U+1E93}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:600;
  font-display:swap;src:url(fonts/eb-garamond-latin-600-normal.cedad1a1.woff2) format("woff2");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:600;
  font-display:swap;src:url(fonts/eb-garamond-ext-600-normal.392a4120.woff2) format("woff2");unicode-range:U+0100,U+0101,U+0106,U+0107,U+010C,U+010D,U+0110,U+0111,U+0112,U+0113,U+011E,U+011F,U+0120,U+0121,U+012A,U+012B,U+0130,U+0131,U+0141,U+0142,U+0143,U+0144,U+014C,U+014D,U+0150,U+0151,U+0158,U+0159,U+015A,U+015B,U+015E,U+015F,U+0160,U+0161,U+016A,U+016B,U+016E,U+016F,U+0170,U+0171,U+0179,U+017A,U+017B,U+017C,U+017D,U+017E,U+02BB,U+02BC,U+02BE,U+02BF,U+1E0C,U+1E0D,U+1E0E,U+1E0F,U+1E24,U+1E25,U+1E62,U+1E63,U+1E6C,U+1E6D,U+1E6E,U+1E6F,U+1E92,U+1E93}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;
  font-display:swap;src:url(fonts/inter-latin-400-normal.68f645c6.woff2) format("woff2");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;
  font-display:swap;src:url(fonts/inter-ext-400-normal.85dfd928.woff2) format("woff2");unicode-range:U+0100,U+0101,U+0106,U+0107,U+010C,U+010D,U+0110,U+0111,U+0112,U+0113,U+011E,U+011F,U+0120,U+0121,U+012A,U+012B,U+0130,U+0131,U+0141,U+0142,U+0143,U+0144,U+014C,U+014D,U+0150,U+0151,U+0158,U+0159,U+015A,U+015B,U+015E,U+015F,U+0160,U+0161,U+016A,U+016B,U+016E,U+016F,U+0170,U+0171,U+0179,U+017A,U+017B,U+017C,U+017D,U+017E,U+02BB,U+02BC,U+02BE,U+02BF,U+1E0C,U+1E0D,U+1E0E,U+1E0F,U+1E24,U+1E25,U+1E62,U+1E63,U+1E6C,U+1E6D,U+1E6E,U+1E6F,U+1E92,U+1E93}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;
  font-display:swap;src:url(fonts/inter-latin-500-normal.6b66c741.woff2) format("woff2");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;
  font-display:swap;src:url(fonts/inter-ext-500-normal.63052d8b.woff2) format("woff2");unicode-range:U+0100,U+0101,U+0106,U+0107,U+010C,U+010D,U+0110,U+0111,U+0112,U+0113,U+011E,U+011F,U+0120,U+0121,U+012A,U+012B,U+0130,U+0131,U+0141,U+0142,U+0143,U+0144,U+014C,U+014D,U+0150,U+0151,U+0158,U+0159,U+015A,U+015B,U+015E,U+015F,U+0160,U+0161,U+016A,U+016B,U+016E,U+016F,U+0170,U+0171,U+0179,U+017A,U+017B,U+017C,U+017D,U+017E,U+02BB,U+02BC,U+02BE,U+02BF,U+1E0C,U+1E0D,U+1E0E,U+1E0F,U+1E24,U+1E25,U+1E62,U+1E63,U+1E6C,U+1E6D,U+1E6E,U+1E6F,U+1E92,U+1E93}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;
  font-display:swap;src:url(fonts/inter-latin-600-normal.e0d61f6d.woff2) format("woff2");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;
  font-display:swap;src:url(fonts/inter-ext-600-normal.2e6534c6.woff2) format("woff2");unicode-range:U+0100,U+0101,U+0106,U+0107,U+010C,U+010D,U+0110,U+0111,U+0112,U+0113,U+011E,U+011F,U+0120,U+0121,U+012A,U+012B,U+0130,U+0131,U+0141,U+0142,U+0143,U+0144,U+014C,U+014D,U+0150,U+0151,U+0158,U+0159,U+015A,U+015B,U+015E,U+015F,U+0160,U+0161,U+016A,U+016B,U+016E,U+016F,U+0170,U+0171,U+0179,U+017A,U+017B,U+017C,U+017D,U+017E,U+02BB,U+02BC,U+02BE,U+02BF,U+1E0C,U+1E0D,U+1E0E,U+1E0F,U+1E24,U+1E25,U+1E62,U+1E63,U+1E6C,U+1E6D,U+1E6E,U+1E6F,U+1E92,U+1E93}
@font-face{font-family:"Amiri";font-style:normal;font-weight:400;
  font-display:swap;src:url(fonts/amiri-arabic-400-normal.2dfffa91.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Amiri";font-style:normal;font-weight:700;
  font-display:swap;src:url(fonts/amiri-arabic-700-normal.d4fcd1fe.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Noto Naskh Arabic";font-style:normal;font-weight:400;
  font-display:swap;src:url(fonts/noto-naskh-arabic-arabic-400-normal.422f7270.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Noto Naskh Arabic";font-style:normal;font-weight:500;
  font-display:swap;src:url(fonts/noto-naskh-arabic-arabic-500-normal.53d34e3a.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF}

/* ===============================================================
   RIFĀQ
   ---------------------------------------------------------------
   1. Tokens      2. Reset      3. Masthead
   4. Menu        5. Hero
   Two scripts, treated as equals. One colour, taken out of the
   photograph. No pills, no glass, no sliding toggles.
================================================================*/

/* --- 1. tokens ------------------------------------------------*/
/* --- palette ---
   These are not invented. Every value below was sampled out of the site's
   own illustrations: the sea at two depths, the whitewash, the warm sand,
   the terracotta of the pots. The old grounds (#0A1C1F, #172C38) appeared
   nowhere in the artwork, which is why the page and the pictures never
   quite belonged to each other.
--------------------------------------------------
   Contrast is measured, not guessed. The rule that matters:

     dark grounds  (--ink, --midnight)   → --on-dark text, --ember accent   (6–7:1)
     mid grounds   (--sea, --clay)       → --on-dark text, --sand accent    (ember is
                                            only 2.2:1 here — never use it)
     light grounds (--ivory, --pale,
                    --sage, --sand)      → --on-light text, --ember-deep accent

   --sea and --clay are darkened from the brief's #287CA8 and #C76B4A, which
   both failed body-text contrast at their original lightness. */
:root{
  --midnight:#123E5A;      /* deep coastal night */
  --sea:#26749E;           /* Mediterranean blue, darkened to 5.0:1 on white */
  --clay:#AC5435;          /* terracotta, darkened to 5.0:1 on white */
  --ivory:#FCFDFE;
  --pale:#DCECF0;          /* pale sea */
  --sage:#F2F7FB;
  --sand:#F4CA8E;
  --oat:#E6F0F7;          /* warm light ground, between ivory and sand */
  --white:#FFFCF5;
  --on-dark:#FFFCF5;
  --on-light:#12313F;
  --ember-deep:#9F4E33;    /* the accent, for light grounds. Darkened from #A8763B,
                              which was only 3.6:1 on --ivory — the kickers are
                              10.5px, so they need 4.5:1, not 3:1. */
  --sun:#EDBC57;
  --clay-accent:#E9AE99;   /* terracotta lifted for use ON dark grounds */

  --ink:#0E3049;          /* the deep water of the bay, darkened */
  --ink-2:#0F262A;
  --paper:#F4EFE7;        /* the sky, not white */
  --soft:rgba(244,239,231,.68);
  --faint:rgba(244,239,231,.40);
  --hair:rgba(244,239,231,.17);
  --ember:#E9AE99;       /* terracotta as TEXT on the blues (4.5:1) */
  --cta:#E0713F;         /* terracotta as a FILL, with a dark label (5.8:1) */        /* the harbour lights */
  --ember-line:rgba(232,150,60,.42);
  --ember-wash:rgba(232,150,60,.12);

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ar:"Amiri","Noto Naskh Arabic",serif;
  --ar-ui:"Noto Naskh Arabic","Amiri",serif;

  --gutter:clamp(20px,4.4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --swing:cubic-bezier(.66,0,.34,1);
}

/* --- 2. reset -------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--sans); -webkit-font-smoothing:antialiased}
html[lang="ar"] body{font-family:var(--ar-ui)}
img{display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px; border-radius:1px}
.sr{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap}

/* --- 3. masthead ----------------------------------------------*/
.masthead{
  position:fixed; inset-inline:0; top:0; z-index:60;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(20px,3vw,48px);
  padding:clamp(19px,2.2vw,27px) var(--gutter) clamp(16px,1.9vw,23px);
  transition:padding .5s var(--ease), background-color .5s var(--ease);
}
.masthead::after{                       /* the rule, drawn once on arrival */
  content:""; position:absolute; inset-inline:var(--gutter); bottom:0; height:1px;
  background:var(--hair); transform:scaleX(0); transform-origin:var(--o,left);
  animation:draw 1.6s var(--ease) .45s forwards;
  transition:inset-inline .5s var(--ease), background-color .5s var(--ease);
}
html[dir="rtl"] .masthead::after{--o:right}
@keyframes draw{to{transform:scaleX(1)}}

/* fully opaque: at 96% the page scrolled visibly behind the bar */
.masthead.stuck{padding-block:clamp(11px,1.2vw,15px); background:var(--ink)}
.masthead.stuck::after{inset-inline:0; background:rgba(244,239,231,.11)}

/* Over a light section the bar turns with it, so it stops reading as a dark
   stripe laid across the page. Everything in it inverts together: nothing
   should be left at a colour meant for the dark ground. */
.masthead.onlight{background:var(--ivory)}
.masthead.onlight::after{background:rgba(18,49,63,.14)}
.masthead.onlight .mark .lat{color:var(--on-light)}
.masthead.onlight .mark .ara{color:rgba(18,49,63,.52)}
.masthead.onlight .mark:hover .ara{color:rgba(18,49,63,.78)}
.masthead.onlight .nav a{color:rgba(18,49,63,.74)}
.masthead.onlight .nav a:hover{color:var(--on-light)}
.masthead.onlight .nav a::after{background:var(--on-light)}
.masthead.onlight .langs button{color:rgba(18,49,63,.58)}
.masthead.onlight .langs button:hover{color:var(--on-light)}
.masthead.onlight .langs button[aria-pressed="true"]{color:var(--ember-deep)}
.masthead.onlight .langs button + button::before{background:rgba(18,49,63,.3)}
.masthead.onlight .opener i{background:var(--on-light)}
.masthead.onlight .rule{background:rgba(18,49,63,.22)}
/* the bar's call to action was near-white type on a faint wash: invisible on
   a white bar. On light ground it becomes the filled terracotta with a dark
   label, the same pair the hero button already uses. */
.masthead.onlight .action{color:#20100A; background:var(--cta); border-color:var(--cta)}
.masthead.onlight .action::before{background:var(--ember-deep)}
.masthead.onlight .action:hover{color:var(--white); border-color:var(--ember-deep)}

/* A scrim so the bar stays legible over the photograph. Measured over the
   hero: the links ran 3.0-3.2:1 at the right-hand end and the button 1.96:1,
   because the old veil had faded to a fifth of its strength by the time it
   reached them. It now holds its depth for the whole height of the bar. */
.veil{position:fixed; inset-inline:0; top:0; height:clamp(170px,22vh,260px); z-index:55;
  pointer-events:none; transition:opacity .5s var(--ease);
  background:linear-gradient(to bottom,rgba(11,34,50,.80) 0,rgba(11,34,50,.72) 34%,
    rgba(11,34,50,.42) 60%,rgba(11,34,50,.14) 82%,transparent)}
.veil.gone{opacity:0}

/* the mark: one name, two scripts, stacked */
.mark{display:flex; flex-direction:column; align-items:flex-start; line-height:1;
  justify-content:center; min-height:44px}
.mark .lat{font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.35vw,28px);
  letter-spacing:-.006em; color:var(--paper)}
.mark .ara{width:fit-content; font-family:var(--ar); font-size:clamp(13px,1.35vw,16px); line-height:1;
  color:var(--faint); margin-block-start:clamp(4px,.55vw,7px); direction:rtl;
  transition:color .4s var(--ease); opacity:0; animation:fade 1.2s var(--ease) .4s forwards}
@keyframes fade{to{opacity:1}}
.mark:hover .ara{color:var(--soft)}
/* in Arabic the Arabic leads and the transliteration steps under it */
html[lang="ar"] .mark .lat{order:2; font-size:clamp(13px,1.35vw,16px); color:var(--faint);
  margin-block-start:clamp(4px,.55vw,7px); letter-spacing:.01em}
html[lang="ar"] .mark .ara{order:1; font-size:clamp(21px,2.3vw,27px); color:var(--paper); margin:0}

/* the links */
.nav{display:flex; align-items:baseline; justify-content:center; gap:clamp(18px,2.5vw,38px)}
.nav a{position:relative; font-family:var(--serif); font-weight:400;
  font-size:clamp(15px,1.35vw,17.5px); color:var(--soft); padding-block:7px;
  white-space:nowrap; transition:color .3s var(--ease)}
html[lang="ar"] .nav a{font-family:var(--ar-ui); font-weight:500; font-size:clamp(15px,1.6vw,18px)}
.nav a::after{content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--ember); transform:scaleX(0); transform-origin:var(--o,left);
  transition:transform .4s var(--ease)}
html[dir="rtl"] .nav a::after{--o:right}
.nav a:hover{color:var(--paper)}
.nav a:hover::after{transform:scaleX(1)}

/* the right-hand cluster */
.tools{display:flex; align-items:center; gap:clamp(15px,1.9vw,25px)}

.langs{display:flex; align-items:baseline}
.langs button{position:relative; font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding:2px 0;
  transition:color .3s var(--ease)}
/* The label stays 10.5px; the thumb gets 44px. A pseudo-element grows the
   hit area without moving anything on screen. */
.langs button::after{content:""; position:absolute; inset:50% 0 auto; translate:0 -50%;
  height:44px; min-width:32px; inset-inline:-7px}
.langs button + button{margin-inline-start:13px}
.langs button + button::before{content:""; position:absolute; inset-inline-start:-7px;
  top:50%; width:1px; height:8px; background:var(--hair); transform:translateY(-50%)}
.langs button[lang="ar"]{font-family:var(--ar-ui); font-size:13px; letter-spacing:0;
  text-transform:none; padding:0 1px 1px}
.langs button:hover{color:var(--soft)}
.langs button[aria-pressed="true"]{color:var(--ember)}

.rule{width:1px; height:20px; background:var(--hair)}

/* the single action */
.action{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:11px;
  font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; padding:13px 20px; border-radius:2px; white-space:nowrap;
  color:var(--paper); border:1px solid var(--ember-line); background:var(--ember-wash);
  transition:color .42s var(--ease), border-color .42s var(--ease), background-color .42s var(--ease)}
html[lang="ar"] .action{font-family:var(--ar-ui); font-size:14px; letter-spacing:0;
  text-transform:none; padding-block:11px}
/* over the photograph the button carries its own ground, so it never depends
   on what happens to be behind it */
.masthead:not(.stuck) .action{background:rgba(9,29,45,.82); border-color:var(--cta);
  color:var(--white); backdrop-filter:blur(3px)}
.masthead:not(.stuck) .action:hover{color:#20100A; border-color:var(--cta)}

.action::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--ember);
  transform:scaleY(0); transform-origin:bottom; transition:transform .46s var(--swing)}
.action:hover{color:#2B1705; border-color:var(--ember); background:transparent}
.action:hover::before{transform:scaleY(1)}
.arrow{position:relative; display:block; width:14px; height:1px; background:currentColor;
  transition:width .4s var(--ease)}
.arrow::after{content:""; position:absolute; right:0; top:-2.5px; width:5px; height:5px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg); transform-origin:top right}
html[dir="rtl"] .arrow{transform:scaleX(-1)}
.action:hover .arrow{width:20px}

/* the opener */
.opener{display:none; width:44px; height:44px; margin-inline-end:-12px;
  flex-direction:column; align-items:flex-end; justify-content:center; gap:5px}
.opener i{display:block; height:1px; background:var(--paper);
  transition:width .44s var(--swing), transform .44s var(--swing), background-color .3s}
.opener i:nth-child(1){width:23px}
.opener i:nth-child(2){width:15px}
.opener:hover i:nth-child(2){width:23px}
.open .opener i{background:var(--ember)}
.open .opener i:nth-child(1){width:23px; transform:translateY(3px) rotate(45deg)}
.open .opener i:nth-child(2){width:23px; transform:translateY(-3px) rotate(-45deg)}

/* --- 4. menu --------------------------------------------------*/
/* Six links did not fit: measured, the language row and the button sat 32 to
   164px below the bottom of the screen on every phone but the largest, and
   overflow:hidden meant you could not reach them. Now the links scroll and
   the base stays pinned, so the two things you could not get to are always
   on screen whatever the height. */
.menu{position:fixed; inset:0; z-index:56; display:none; flex-direction:column;
  padding:calc(var(--gutter) + 68px) var(--gutter) calc(var(--gutter) + 4px);
  background:var(--ink); overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity .48s var(--ease), visibility .48s}
@supports (height:100dvh){.menu{height:100dvh}}
.open .menu{opacity:1; visibility:visible}
/* the photograph stays present, held right back */
.menu__bg{position:absolute; inset:0; z-index:0; opacity:.20;
  background:url(img/art/sk-hero-560.5a8b7bb4.webp) center/cover no-repeat;
  transform:scale(1.10); transition:transform 1.5s var(--ease)}
.open .menu__bg{transform:scale(1)}
.menu__wash{position:absolute; inset:0; z-index:0;
  background:linear-gradient(to bottom,rgba(11,34,50,.88),rgba(11,34,50,.64) 42%,rgba(11,34,50,.94))}
.menu > nav,.menu > .base{position:relative; z-index:1}

.menu > nav{display:flex; flex-direction:column; margin-block:auto;
  flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.menu > nav::-webkit-scrollbar{display:none}
/* the base never scrolls away */
.menu > .base{flex:0 0 auto; margin-block-start:clamp(16px,2.4vh,26px)}
/* when the list does scroll, say so rather than ending in a hard edge */
.menu > nav{mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%)}
.menu > nav:not([data-over]){mask-image:none}
.menu a.item{position:relative; display:block; padding-block:clamp(11px,2.1vh,21px);
  border-block-end:1px solid rgba(244,239,231,.10);
  opacity:0; transform:translateY(24px)}
.menu a.item:first-child{border-block-start:1px solid rgba(244,239,231,.10)}
.menu a.item::before{content:""; position:absolute; inset-block:0;
  inset-inline-start:calc(var(--gutter) * -1); width:3px; background:var(--ember);
  transform:scaleY(0); transition:transform .38s var(--ease)}
.menu a.item:active::before{transform:scaleY(1)}
.menu .one{display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(27px,7.4vw,42px); letter-spacing:-.012em; line-height:1.06; color:var(--paper)}
.menu .two{display:block; width:fit-content; font-family:var(--ar);
  font-size:clamp(14px,3.6vw,18px); line-height:1.45; color:var(--ember);
  margin-block-start:6px; direction:rtl}
html[lang="ar"] .menu .one{font-family:var(--ar); font-size:clamp(27px,7.6vw,40px);
  letter-spacing:0; line-height:1.42}
html[lang="ar"] .menu .two{font-family:var(--serif); font-size:clamp(14px,3.7vw,17px);
  direction:ltr; letter-spacing:.03em}
.open .menu a.item{animation:lift .72s var(--ease) forwards}
.open .menu a.item:nth-child(1){animation-delay:.14s}
.open .menu a.item:nth-child(2){animation-delay:.22s}
.open .menu a.item:nth-child(3){animation-delay:.30s}
.open .menu a.item:nth-child(4){animation-delay:.38s}
.open .menu a.item:nth-child(5){animation-delay:.46s}
.open .menu a.item:nth-child(6){animation-delay:.54s}
@keyframes lift{to{opacity:1; transform:none}}

.menu .base{display:grid; gap:clamp(17px,2.7vh,24px);
  opacity:0; transform:translateY(24px)}
.open .menu .base{animation:lift .72s var(--ease) .40s forwards}
.menu .base .langs button{font-size:11px}
.menu .action{justify-content:space-between; width:100%; font-size:11px; padding:17px 20px}


/* --- buttons ---------------------------------------------------*/
.act{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; padding:16px 24px; min-height:44px; box-sizing:border-box;
  border-radius:2px; white-space:nowrap;
  border:1px solid var(--cta); background:var(--cta); color:#20100A;
  transition:color .42s var(--ease), background-color .42s var(--ease)}
.act::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--paper);
  transform:scaleY(0); transform-origin:bottom; transition:transform .46s var(--swing)}
.act:hover{background:transparent; border-color:var(--paper); color:#0E3049}
.act:hover::before{transform:scaleY(1)}
/* the second: an outline, quieter */
.act.ghost{background:transparent; border-color:rgba(244,239,231,.30); color:var(--soft);
  font-size:10px; padding:14px 19px; letter-spacing:.15em}
.act.ghost:hover{color:#0E3049}
.act.ghost::before{background:var(--paper)}
.act.ghost:hover{color:#0E3049; border-color:var(--paper)}
html[lang="ar"] .act{font-family:var(--ar-ui); font-size:14.5px; letter-spacing:0;
  text-transform:none; padding-block:14px}
.act .arrow{background:currentColor}

/* Anchored sections must clear the fixed masthead: 75px on a phone,
   101px at desktop widths. */
:target{scroll-margin-top:clamp(84px,7.4vw,112px)}
[id]{scroll-margin-top:clamp(84px,7.4vw,112px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* the same button, inverted for a cream ground */
.act.dark{border-color:var(--ink); background:var(--ink); color:var(--paper)}
.act.dark::before{background:#0F1517}
.act.dark:hover{background:transparent; border-color:var(--ink); color:var(--paper)}
.act.dark:hover::before{transform:scaleY(1)}

/* Pages without a photographic hero need the bar solid from the start. */
.masthead.solid{background:var(--ink)}
.masthead.solid::after{inset-inline:0; background:rgba(244,239,231,.11)}
/* a page that is light from top to bottom — the two forms — keeps the light
   bar the whole way, instead of a dark band laid across it */
.masthead.solid.onlight{background:var(--ivory)}
.masthead.solid.onlight::after{background:rgba(18,49,63,.14)}

/* --- footer ------------------------------------------------------ */
.sitefoot{background:var(--ink); color:var(--on-dark);
  padding:clamp(48px,6.5vw,86px) var(--gutter) clamp(22px,2.8vw,30px)}
.sitefoot__in{max-width:1180px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,58px)}
@media (max-width:900px){.sitefoot__in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sitefoot__in{grid-template-columns:1fr; gap:clamp(26px,6vw,34px)}}
.sitefoot__lat{display:block; font-family:var(--serif); font-weight:600; font-size:26px;
  line-height:1; color:var(--white)}
.sitefoot__ara{display:block; width:fit-content; font-family:var(--ar); font-size:15px;
  line-height:1; color:rgba(255,252,245,.62); margin-block-start:7px; direction:rtl}
html[lang="ar"] .sitefoot__lat{order:2; font-size:15px; color:rgba(255,252,245,.62)}
html[lang="ar"] .sitefoot__ara{order:1; font-size:25px; color:var(--white)}
.sitefoot__means{margin:clamp(13px,1.7vw,18px) 0 0; font-family:var(--sans); font-size:13px;
  line-height:1.6; color:rgba(255,252,245,.72); max-width:22em}
html[lang="ar"] .sitefoot__means{font-family:var(--ar-ui); font-size:14px; line-height:1.85}
.sitefoot__col h2{margin:0 0 clamp(13px,1.7vw,17px); font-family:var(--sans); font-size:10.5px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sand)}
html[lang="ar"] .sitefoot__col h2{font-family:var(--ar-ui); letter-spacing:0; text-transform:none; font-size:13px}
.sitefoot__col a{display:block; margin-block-end:9px; font-family:var(--sans); font-size:14px;
  line-height:1.5; color:rgba(255,252,245,.86); text-decoration:none;
  transition:color .3s var(--ease)}
html[lang="ar"] .sitefoot__col a{font-family:var(--ar-ui); font-size:15px}
.sitefoot__col a:hover{color:var(--ember)}
.sitefoot__col p{margin:0 0 10px; font-family:var(--sans); font-size:13px; line-height:1.62;
  color:rgba(255,252,245,.74)}
html[lang="ar"] .sitefoot__col p{font-family:var(--ar-ui); font-size:14px; line-height:1.85}
.sitefoot__who{margin-block-start:13px !important}
.sitefoot__legal p{max-width:30em}
.sitefoot__priv strong{font-weight:600; color:rgba(255,252,245,.9)}
.sitefoot__base{max-width:1180px; margin:clamp(34px,4.4vw,52px) auto 0;
  padding-block-start:clamp(17px,2.2vw,22px); border-block-start:1px solid rgba(255,252,245,.16);
  display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between}
.sitefoot__base p{margin:0; font-family:var(--sans); font-size:12.5px; color:rgba(255,252,245,.6)}
html[lang="ar"] .sitefoot__base p{font-family:var(--ar-ui); font-size:13.5px}

/* --- phone: the shared chrome's smallest labels ------------------
   Measured on a 390px screen: footer headings and language codes sat at
   10.5px. Legible at a desk, hard work at arm's length. */
@media (max-width:699px){
  .sitefoot__col h2{font-size:11.5px}
  .langs button, .menu .base .langs button{font-size:11.5px}
  .langs button[lang="ar"], .menu .base .langs button[lang="ar"]{font-size:14px}
  .menu .action{font-size:12px}
}

/* --- phone: the header on the two form pages --------------------
   These pages carry no slide-out menu, so their bar simply drops the
   links and keeps the mark and the language buttons. Without this the
   nav was laid out past the edge — invisible in English, and real
   sideways scrolling in Arabic, where the overflow falls to the left. */
@media (max-width:1040px){
  .masthead.solid{grid-template-columns:auto auto; justify-content:space-between}
  .masthead.solid .nav{display:none}
}

/* --- phone: the shared footer's tap targets ---------------------
   These links were 21px tall with no gap between them — easy to miss and
   easy to hit the wrong one. The rule lived in the homepage's own styles,
   so the two form pages never received it. */
@media (max-width:699px){
  .sitefoot__col a{padding-block:13px; margin-block-end:0}
  /* in Arabic the mark is a narrower word, which left the logo's own hit
     area at 33px wide */
  .mark{min-width:44px}
}