@charset "UTF-8";
/* ============================================================
   Dr. Ahmad Al-Shraideh — design system
   Motif: "The Arc" — the curve of a dental arch, opened into a racing line.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* surface */
  --ink:        #0B0B0D;
  --ink-2:      #131316;
  --ink-3:      #1C1C21;
  --ink-4:      #26262C;

  /* light surface */
  --ivory:      #F2EEE7;
  --ivory-2:    #E8E2D8;
  --sand:       #D6CCBC;

  /* text */
  --on-dark:    #EFEAE2;
  --on-dark-2:  #A9A29A;
  --on-dark-3:  #8B847C;
  --on-light:   #1A1916;
  --on-light-2: #5E574E;
  --on-light-3: #6B6459;

  /* accent — burnished brass, used sparingly */
  --brass:      #B98F52;
  --brass-lo:   #7A5C31;
  --brass-hi:   #D8B378;

  --line-dark:  rgba(239,234,226,.13);
  --line-light: rgba(26,25,22,.14);

  /* type */
  --f-display: "Cormorant Garamond", "Amiri", Georgia, "Times New Roman", serif;
  --f-sans:    "Inter", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "Inter", ui-monospace, "SF Mono", Menlo, monospace;

  /* rhythm */
  --gut:  clamp(20px, 5vw, 76px);
  --sect: clamp(84px, 13vh, 168px);
  --maxw: 1440px;

  /* motion */
  --e-out:  cubic-bezier(.16,.84,.30,1);
  --e-io:   cubic-bezier(.62,.02,.24,1);
  --t-fast: .32s var(--e-out);
  --t-med:  .62s var(--e-out);
  --t-slow: 1.05s var(--e-out);

  --vh: 1vh;

  /* framing */
  --r-plate:  clamp(11px, .85vw, 18px);
  --r-soft:   clamp(8px, .55vw, 12px);
  --mount:    #191A1E;
  --mount-1:  rgba(185,143,82,.36);
  --mount-2:  rgba(185,143,82,.20);
  --plate-sh: 0 32px 68px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.34);
}

/* Arabic swaps the type stack; the tokens above stay identical. */
html[lang="ar"]{
  --f-display: "Amiri", "IBM Plex Sans Arabic", serif;
  --f-sans:    "IBM Plex Sans Arabic", "Inter", sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* the fixed header must not hide anchor targets */
  scroll-padding-block-start:96px;
  /* Clip sideways bleed here, not on body: overflow-x on body would force its
     overflow-y to compute to auto and turn it into a scroll container, which
     breaks the sticky columns on the journey timeline. */
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--f-sans);
  font-size:clamp(15px,.52vw + 13.4px,17px);
  line-height:1.68;
  font-weight:330;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
html[lang="ar"] body{
  font-weight:350;
  line-height:1.95;          /* Arabic needs air between lines */
  letter-spacing:0;          /* never track Arabic — it breaks joins */
  word-spacing:.02em;
}
img,video,svg{ display:block; max-width:100%; }
img,video{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
::selection{ background:var(--brass); color:#0B0B0D; }

/* Arabic must never be letter-spaced or synthetically bolded. */
html[lang="ar"] *{ letter-spacing:0 !important; }

/* ---------- 3. Focus ---------- */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--brass-hi);
  outline-offset:4px;
  border-radius:2px;
}
.skip{
  position:fixed; inset-block-start:10px; inset-inline-start:10px;
  z-index:400; padding:12px 20px;
  background:var(--brass); color:#0B0B0D; font-weight:600;
  border-radius:2px; transform:translateY(-160%);
  transition:transform var(--t-fast);
}
.skip:focus-visible{ transform:none; }

/* ---------- 4. Type ---------- */
.display{
  font-family:var(--f-display);
  font-weight:300;
  line-height:.92;
  letter-spacing:-.028em;
  font-size:clamp(2.9rem,8.4vw,7.6rem);
}
html[lang="ar"] .display{ line-height:1.16; font-weight:400; letter-spacing:0; }

.h1{ font-family:var(--f-display); font-weight:300; font-size:clamp(2.4rem,5.6vw,4.9rem); line-height:1.02; letter-spacing:-.024em; }
.h2{ font-family:var(--f-display); font-weight:300; font-size:clamp(1.9rem,3.7vw,3.35rem); line-height:1.1;  letter-spacing:-.02em; }
.h3{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.32rem,1.9vw,1.85rem); line-height:1.22; letter-spacing:-.014em; }
html[lang="ar"] .h1{ line-height:1.3; font-weight:400; }
html[lang="ar"] .h2{ line-height:1.42; font-weight:400; }
html[lang="ar"] .h3{ line-height:1.55; font-weight:500; }

/* micro-label: the site's connective tissue */
.label{
  font-family:var(--f-sans);
  font-size:.635rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--on-dark-3);
  line-height:1.5;
}
html[lang="ar"] .label{
  font-size:.79rem; text-transform:none; font-weight:500; letter-spacing:0;
}
.label--brass{ color:var(--brass); }
.on-light .label{ color:var(--on-light-3); }
.on-light .label--brass{ color:var(--brass-lo); }

.lede{
  font-size:clamp(1.06rem,1.36vw,1.28rem);
  line-height:1.66;
  color:var(--on-dark-2);
  font-weight:320;
}
html[lang="ar"] .lede{ line-height:2.02; font-weight:400; }
.on-light .lede{ color:var(--on-light-2); }

.body-copy{ color:var(--on-dark-2); }
.on-light .body-copy{ color:var(--on-light-2); }
.body-copy p + p{ margin-block-start:1.15em; }

.measure    { max-width:62ch; }
.measure-sm { max-width:46ch; }
html[lang="ar"] .measure   { max-width:56ch; }
html[lang="ar"] .measure-sm{ max-width:42ch; }

/* numerals: tabular + latin glyphs even inside Arabic */
.num{
  font-family:"Inter",var(--f-sans);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
  direction:ltr; unicode-bidi:isolate;
}

/* ---------- 5. Layout ---------- */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.section{ padding-block:var(--sect); position:relative; }
.section--tight{ padding-block:clamp(56px,8vh,96px); }

.on-light{
  background:var(--ivory); color:var(--on-light);
  --mount:    #E5DED2;
  --mount-1:  rgba(142,108,61,.34);
  --mount-2:  rgba(142,108,61,.22);
  --plate-sh: 0 26px 56px rgba(26,25,22,.15), 0 6px 16px rgba(26,25,22,.09);
}
.on-light h1,.on-light h2,.on-light h3{ color:var(--on-light); }
.on-sand { background:var(--ivory-2); }

/* editorial split: content column + media column, reversible, RTL-safe */
.split{
  display:grid;
  gap:clamp(32px,4.6vw,76px);
  align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--7-5 { grid-template-columns:1.32fr 1fr; }
  .split--5-7 { grid-template-columns:1fr 1.32fr; }
  .split--media-first > .split__media{ order:-1; }
  .split--top{ align-items:start; }
}

/* ---------- 6. The Arc — signature motif ---------- */
.arc{
  display:block; width:100%; height:auto;
  overflow:visible;
}
.arc path{
  fill:none;
  stroke:var(--brass);
  stroke-width:1.15;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  transition:d 1.4s var(--e-io), stroke .6s ease;
}
.arc--divider{
  max-width:min(520px,72vw);
  margin-inline:auto;
  opacity:.55;
}
.arc__dot{
  fill:var(--brass);
  stroke:none;
  transition:transform 1.4s var(--e-io);
}
/* the divider draws itself in when scrolled to */
.arc--divider path{
  stroke-dasharray:var(--len,420);
  stroke-dashoffset:var(--len,420);
  transition:stroke-dashoffset 1.6s var(--e-out);
}
.is-in .arc--divider path{ stroke-dashoffset:0; }

/* a hairline rule that carries the same brass */
.rule{
  height:1px; border:0; margin:0;
  background:var(--line-dark);
}
.on-light .rule{ background:var(--line-light); }

/* ---------- 7. Header / nav ---------- */
.hdr{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:200;
  transition:background .5s var(--e-out), backdrop-filter .5s var(--e-out),
             border-color .5s var(--e-out), padding .5s var(--e-out);
  border-block-end:1px solid transparent;
  padding-block:clamp(14px,1.7vw,22px);
}
.hdr__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.hdr.is-stuck{
  background:rgba(11,11,13,.82);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-block-end-color:var(--line-dark);
  padding-block:clamp(10px,1.1vw,14px);
}
/* Over an ivory section the bar inverts its ink immediately — the frosted
   plate only arrives once it is stuck, but legibility must not wait for it. */
.hdr.is-stuck.is-light{
  background:rgba(242,238,231,.86);
  border-block-end-color:var(--line-light);
}
.hdr.is-light,
.hdr.is-light .brand,
.hdr.is-light .lang,
.hdr.is-light .burger{ color:var(--on-light); }
.hdr.is-light .brand__sub{ color:var(--on-light-3); }
.hdr.is-light .lang{ border-color:var(--line-light); }
.hdr.is-light .lang:hover{ border-color:var(--brass-lo); color:var(--on-light); }
.hdr.is-light .lang__cur{ color:var(--brass-lo); }

.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand__mark{ inline-size:26px; block-size:26px; flex:none; }
.brand__mark path{ fill:none; stroke:var(--brass); stroke-width:1.5; stroke-linecap:round; }
.brand__txt{ display:flex; flex-direction:column; min-width:0; }
.brand__name{
  font-family:var(--f-display); font-size:1.06rem; font-weight:400;
  letter-spacing:.005em; line-height:1.16; white-space:nowrap;
}
html[lang="ar"] .brand__name{ font-size:1.12rem; font-weight:500; }
.brand__sub{
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark-3); line-height:1.4; white-space:nowrap;
}
html[lang="ar"] .brand__sub{ font-size:.7rem; text-transform:none; }

.nav{ display:none; }
@media (min-width:1040px){ .nav{ display:flex; align-items:center; gap:clamp(18px,2vw,34px); } }
.nav__link{
  position:relative; font-size:.78rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-2); padding-block:6px;
  transition:color var(--t-fast);
}
html[lang="ar"] .nav__link{ font-size:.94rem; text-transform:none; font-weight:400; }
.nav__link::after{                 /* the arc, shrunk to an underline */
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  inline-size:100%; block-size:1px; background:var(--brass);
  transform:scaleX(0); transform-origin:inline-start;
  transition:transform var(--t-med);
}
.nav__link:hover{ color:var(--on-dark); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--on-dark); }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.hdr.is-light .nav__link{ color:var(--on-light-2); }
.hdr.is-light .nav__link:hover,
.hdr.is-light .nav__link[aria-current="page"]{ color:var(--on-light); }
.hdr.is-light .brand__mark path{ stroke:var(--brass-lo); }

.hdr__right{ display:flex; align-items:center; gap:14px; }
.lang{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line-dark); border-radius:999px;
  padding:7px 14px; font-size:.68rem; letter-spacing:.12em;
  color:var(--on-dark-2); transition:border-color var(--t-fast), color var(--t-fast);
  white-space:nowrap;
}
.lang:hover{ border-color:var(--brass); color:var(--on-dark); }
.lang__cur{ color:var(--brass); font-weight:600; }

/* the chapters button is defined in section 44 */

/* full-screen mobile menu */
.menu{
  position:fixed; inset:0; z-index:190;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:96px var(--gut) 48px;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--e-out), visibility .5s;
  overflow-y:auto; overscroll-behavior:contain;
}
body.menu-open .menu{ opacity:1; visibility:visible; }
.menu__list{ display:flex; flex-direction:column; gap:clamp(4px,1.4vh,14px); }
.menu__link{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2rem,9.5vw,3.4rem); line-height:1.16;
  color:var(--on-dark); display:flex; align-items:baseline; gap:16px;
  padding-block:8px;
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out), color var(--t-fast);
}
html[lang="ar"] .menu__link{ font-weight:400; line-height:1.5; }
body.menu-open .menu__link{ opacity:1; transform:none; transition-delay:calc(.06s * var(--i,0) + .12s); }
.menu__link:hover,.menu__link[aria-current="page"]{ color:var(--brass); }
.menu__num{
  font-family:"Inter",sans-serif; font-size:.62rem; font-weight:500;
  letter-spacing:.18em; color:var(--on-dark-3);
  direction:ltr; unicode-bidi:isolate;
}
.menu__foot{ margin-block-start:clamp(28px,6vh,56px); display:flex; flex-wrap:wrap; gap:22px; align-items:center; }

/* ---------- 8. Video stage ---------- */
/* Strict layering:  video → overlay → content.  Nothing else sits between. */
.stage{ position:relative; isolation:isolate; overflow:clip; }
.stage__video{
  position:absolute; inset:0; z-index:0;
  inline-size:100%; block-size:100%;
  object-fit:cover;
  object-position:var(--pos,50% 50%);
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s var(--e-out);
}
.stage__video.is-ready{ opacity:1; }
.stage__poster{
  position:absolute; inset:0; z-index:0;
  inline-size:100%; block-size:100%;
  object-fit:cover; object-position:var(--pos,50% 50%);
  pointer-events:none;
}
.stage__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.stage__inner{ position:relative; z-index:2; }

/* Veil variants — kept as light as readability allows, and no lighter.
   --v1/--v2/--v3 let a single section tune its own gradient when the
   footage under it is unusually bright. */
.veil--soft   { background:linear-gradient(to bottom,rgba(11,11,13,.64) 0%,rgba(11,11,13,.32) 42%,rgba(11,11,13,.80) 100%); }
.veil--bottom { background:linear-gradient(to bottom,rgba(11,11,13,.18) 0%,rgba(11,11,13,.52) 48%,rgba(11,11,13,.92) 100%); }
.stage--bright .veil--soft{
  background:linear-gradient(to bottom,rgba(11,11,13,.74) 0%,rgba(11,11,13,.54) 45%,rgba(11,11,13,.88) 100%);
}
.veil--light  { background:linear-gradient(to bottom,rgba(242,238,231,.74) 0%,rgba(242,238,231,.58) 50%,rgba(242,238,231,.88) 100%); }

/* Side veil: the dark end always sits under the text column, which is the
   inline-start side in every layout that uses it — so it must follow the
   writing direction rather than a hard-coded left/right. */
.veil--side{
  background:linear-gradient(to bottom,
    rgba(11,11,13,var(--v1,.90)),
    rgba(11,11,13,var(--v2,.78)));
}
.veil--grain{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}
@media (min-width:900px){
  html[dir="ltr"] .veil--side{
    background:linear-gradient(to right,
      rgba(11,11,13,var(--v1,.92)) 0%,
      rgba(11,11,13,var(--v2,.76)) 40%,
      rgba(11,11,13,var(--v3,.30)) 100%);
  }
  html[dir="rtl"] .veil--side{
    background:linear-gradient(to left,
      rgba(11,11,13,var(--v1,.92)) 0%,
      rgba(11,11,13,var(--v2,.76)) 40%,
      rgba(11,11,13,var(--v3,.30)) 100%);
  }
}

/* Footage shot on white — clinical rooms, plaster models, sunlit plaster —
   is graded down before the veil goes over it, so the veil can stay thin. */
.stage--bright .stage__video,
.stage--bright .stage__poster{ filter:brightness(.58) saturate(.82) contrast(1.05); }
.stage--bright.stage--warm .stage__video,
.stage--bright.stage--warm .stage__poster{ filter:brightness(.86) saturate(.9); }

/* ---------- 9. Hero ---------- */
.hero{
  min-block-size:100svh;
  display:grid; align-items:end;
  padding-block:clamp(120px,17vh,180px) clamp(40px,7vh,72px);
}
@supports not (min-block-size:100svh){ .hero{ min-block-size:calc(var(--vh) * 100); } }

.hero__grid{
  display:grid; gap:clamp(28px,4vw,60px);
  grid-template-columns:1fr; align-items:end;
}
@media (min-width:940px){
  .hero__grid{ grid-template-columns:1.1fr .78fr; }
}
.hero__name{ font-size:clamp(2.85rem,9vw,7.2rem); }
.hero__name em{
  font-style:italic; color:var(--brass-hi); font-weight:300;
}
html[lang="ar"] .hero__name em{ font-style:normal; }

.hero__portrait{
  position:relative;
  padding:clamp(7px,.6vw,11px);
  border-radius:var(--r-plate);
  background:var(--mount);
  border:1px solid var(--mount-2);
  box-shadow:var(--plate-sh);
}
.hero__portrait .plate__win{ aspect-ratio:3/4; }
.hero__portrait img{
  inline-size:100%; block-size:100%; object-fit:cover;
  object-position:50% 22%;
  transform:scale(1.06);
  transition:transform 2.4s var(--e-out), opacity 1.2s ease;
}
.is-in .hero__portrait img{ transform:scale(1); }
.hero__portrait img{ filter:saturate(.92) contrast(1.04); }
.hero__portrait .plate__win::before{          /* grade the plate into the background */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(11,11,13,.34) 0%, rgba(11,11,13,0) 34%, rgba(11,11,13,.46) 100%),
    radial-gradient(120% 78% at 50% 34%, rgba(11,11,13,0) 42%, rgba(11,11,13,.5) 100%);
}
.hero__portrait .plate__win::after{           /* hairline against the image */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--mount-1);
}

.hero__meta{
  display:flex; flex-wrap:wrap; gap:clamp(20px,3.4vw,52px);
  padding-block-start:clamp(22px,3vh,34px);
  margin-block-start:clamp(22px,3vh,34px);
  border-block-start:1px solid var(--line-dark);
}
.hero__meta div{ min-inline-size:0; }
.hero__meta dt{ margin-block-end:6px; }
.hero__meta dd{ margin:0; font-size:.92rem; color:var(--on-dark); }

.scroll-cue{
  display:inline-flex; align-items:center; gap:12px;
  margin-block-start:clamp(26px,4vh,44px);
  color:var(--on-dark-3); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
}
html[lang="ar"] .scroll-cue{ font-size:.76rem; text-transform:none; }
.scroll-cue i{
  display:block; inline-size:1px; block-size:34px;
  background:linear-gradient(to bottom,var(--brass),transparent);
  animation:cue 2.6s var(--e-io) infinite;
  transform-origin:top;
}
@keyframes cue{ 0%,100%{transform:scaleY(.35);opacity:.4} 45%{transform:scaleY(1);opacity:1} }

/* On a phone the plate leads and the name answers it, so the whole opening
   still resolves inside one screen instead of running past the fold. */
@media (max-width:939px){
  .hero{ padding-block:clamp(88px,13vh,120px) clamp(32px,5vh,56px); }
  .hero__grid{ gap:clamp(20px,4vh,30px); }
  .hero__portrait{
    order:-1;
    max-inline-size:min(64%,272px);
  }
  .hero__portrait .plate__win{ aspect-ratio:4/5; }
  .hero__portrait img{ object-position:50% 18%; }
  .hero__name{ font-size:clamp(2.6rem,13vw,4.2rem); }
  .hero__meta{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 20px;
    padding-block-start:20px; margin-block-start:20px;
  }
  .hero__meta dd{ font-size:.86rem; }
  .hero__meta > div:last-child{ grid-column:1 / -1; }
}

/* ---------- 10. Reveals ---------- */
.rv{ opacity:0; transform:translateY(48px) scale(.988); }
.is-in.rv,.is-in .rv{
  opacity:1; transform:none;
  transition:opacity 1.05s var(--e-out), transform 1.25s var(--e-out);
  transition-delay:calc(.085s * var(--d,0));
}
.rv-mask{ overflow:clip; }
.rv-mask > *{
  display:block; transform:translateY(105%);
}
.is-in .rv-mask > *{
  transform:none;
  transition:transform 1.05s var(--e-out);
  transition-delay:calc(.085s * var(--d,0));
}
html[lang="ar"] .rv-mask{ overflow:visible; }
html[lang="ar"] .rv-mask > *{ transform:translateY(22px); opacity:0; }
html[lang="ar"] .is-in .rv-mask > *{
  transform:none; opacity:1;
  transition:transform 1s var(--e-out), opacity 1s var(--e-out);
  transition-delay:calc(.085s * var(--d,0));
}
.rv-img{ overflow:clip; }
.rv-img img,.rv-img video{
  transform:scale(1.12); transition:transform 1.5s var(--e-out);
}
.is-in .rv-img img,.is-in .rv-img video{ transform:scale(1); }

/* ---------- 10b. The plate ----------
   Every photograph sits in the same mount: soft corners, a narrow mat in the
   section's own paper colour, a brass hairline around the mat and a second
   one against the image. The mat is real padding, so the plate's outer edge
   still lines up with the text column beside it; the inner window carries the
   clip, which leaves the reveal zoom free to scale without spilling onto it. */
.plate{
  display:block; position:relative;
  padding:clamp(6px,.5vw,9px);
  border-radius:var(--r-plate);
  background:var(--mount);
  border:1px solid var(--mount-2);
  box-shadow:var(--plate-sh);
}
.plate__win{
  display:block; position:relative;
  border-radius:calc(var(--r-plate) - clamp(5px,.42vw,8px));
  overflow:clip;
  background:var(--ink-3);
  box-shadow:0 0 0 1px var(--mount-1);
}
.on-light .plate__win{ background:var(--ivory-2); }
.plate__win > img,
.plate__win > video{ display:block; inline-size:100%; border-radius:inherit; }

/* a plate lifts very slightly when the pointer is over it */
@media (hover:hover) and (pointer:fine){
  .plate{ transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }
  .fig:hover .plate{
    transform:translateY(-3px);
    border-color:var(--mount-1);
    box-shadow:0 40px 82px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.38);
  }
  .on-light .fig:hover .plate{
    box-shadow:0 34px 66px rgba(26,25,22,.19), 0 8px 20px rgba(26,25,22,.12);
  }
}

/* ---------- 11. Figures ---------- */
.fig{ margin:0; position:relative; }
.fig img{ inline-size:100%; }
.fig figcaption{
  margin-block-start:14px;
  font-size:.73rem; line-height:1.55;
  color:var(--on-dark-3);
  display:flex; gap:10px; align-items:flex-start;
}
html[lang="ar"] .fig figcaption{ font-size:.84rem; line-height:1.8; }
.on-light .fig figcaption{ color:var(--on-light-3); }
.fig figcaption::before{
  content:""; flex:none; inline-size:16px; block-size:1px;
  background:var(--brass); margin-block-start:.62em;
}
.fig--frame .plate{ border-color:var(--mount-1); }

.ratio-4-5 { aspect-ratio:4/5;  object-fit:cover; }
.ratio-3-4 { aspect-ratio:3/4;  object-fit:cover; }
.ratio-1-1 { aspect-ratio:1/1;  object-fit:cover; }
.ratio-16-9{ aspect-ratio:16/9; object-fit:cover; }
.ratio-3-2 { aspect-ratio:3/2;  object-fit:cover; }
.op-low  { object-position:50% 74%; }
.op-high { object-position:50% 22%; }
.narrow  { max-inline-size:820px; margin-inline:auto; }

/* overlapping pair */
.overlap{ position:relative; padding-block-end:clamp(40px,7vw,86px); }
.overlap__b{
  position:absolute; inset-block-end:0; inset-inline-end:0;
  inline-size:min(46%,240px);
  border:6px solid var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.on-light .overlap__b{ border-color:var(--ivory); box-shadow:0 24px 60px rgba(26,25,22,.16); }

/* ---------- 12. Cards ---------- */
.card{
  position:relative;
  border-radius:var(--r-soft);
  padding:clamp(24px,2.4vw,34px);
  background:var(--ink-2);
  border:1px solid var(--line-dark);
  transition:border-color var(--t-med), transform var(--t-med), background var(--t-med);
  block-size:100%;
  display:flex; flex-direction:column; gap:12px;
}
.card:hover{ border-color:rgba(185,143,82,.42); transform:translateY(-3px); background:var(--ink-3); }
.on-light .card{ background:transparent; border-color:var(--line-light); }
.on-light .card:hover{ border-color:rgba(142,108,61,.45); background:rgba(255,255,255,.42); }
.card__k{ font-size:.94rem; color:var(--on-dark); font-weight:450; }
.on-light .card__k{ color:var(--on-light); }
.card__v{ font-size:.86rem; color:var(--on-dark-2); }
.on-light .card__v{ color:var(--on-light-2); }
.card__idx{
  position:absolute; inset-block-start:clamp(18px,2vw,26px); inset-inline-end:clamp(18px,2vw,26px);
  font-family:"Inter",sans-serif; font-size:.6rem; letter-spacing:.16em;
  color:var(--on-dark-3); unicode-bidi:isolate;
  /* No direction:ltr here — inset-inline-* resolve against the element's own
     writing mode, so forcing LTR would pin the number to the wrong corner in
     Arabic. Digits are left-to-right on their own; isolation is enough. */
}
.on-light .card__idx{ color:var(--on-light-3); }

.grid{ display:grid; gap:clamp(14px,1.6vw,22px); grid-template-columns:1fr; }
@media (min-width:640px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:640px){ .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .grid--4{ grid-template-columns:repeat(4,1fr); } }

/* ---------- 13. Stat ---------- */
.stat__n{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(3.1rem,7.4vw,6.2rem); line-height:.86;
  letter-spacing:-.04em; color:var(--on-dark);
  font-variant-numeric:lining-nums tabular-nums;
  direction:ltr; unicode-bidi:isolate;
}
.on-light .stat__n{ color:var(--on-light); }
.stat__n small{
  display:block; margin-block-start:14px;
  font-family:var(--f-sans); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
}
html[lang="ar"] .stat__n small{ font-size:.86rem; text-transform:none; letter-spacing:0; }
.stat__c{ margin-block-start:12px; font-size:.86rem; color:var(--on-dark-2); }
.on-light .stat__c{ color:var(--on-light-2); }

/* ---------- 14. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 28px; border-radius:999px;
  border:1px solid var(--brass);
  color:var(--brass-hi); font-size:.76rem;
  letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  transition:background var(--t-med), color var(--t-med), gap var(--t-med), border-color var(--t-med);
  position:relative; overflow:hidden;
}
html[lang="ar"] .btn{ font-size:.92rem; text-transform:none; font-weight:500; }
.btn__ar{ flex:none; transition:transform var(--t-med); }
html[dir="rtl"] .btn__ar{ transform:scaleX(-1); }
.btn:hover{ background:var(--brass); color:#0B0B0D; gap:18px; }
html[dir="ltr"] .btn:hover .btn__ar{ transform:translateX(3px); }
html[dir="rtl"] .btn:hover .btn__ar{ transform:scaleX(-1) translateX(3px); }
.on-light .btn{ border-color:var(--brass-lo); color:var(--brass-lo); }
.on-light .btn:hover{ background:var(--brass-lo); color:var(--ivory); }
.btn--solid{ background:var(--brass); color:#0B0B0D; }
.btn--solid:hover{ background:var(--brass-hi); border-color:var(--brass-hi); }

/* text link with the arc-underline */
.tlink{
  display:inline-flex; align-items:center; gap:10px;
  position:relative; color:var(--on-dark); font-size:.88rem;
  padding-block-end:3px;
}
.on-light .tlink{ color:var(--on-light); }
.tlink::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  inline-size:100%; block-size:1px; background:currentColor; opacity:.28;
  transform-origin:inline-end; transform:scaleX(1);
  transition:transform .5s var(--e-out), opacity .5s var(--e-out), background .5s;
}
.tlink:hover::after{
  transform-origin:inline-start; background:var(--brass); opacity:1;
}
.tlink svg{ flex:none; transition:transform var(--t-med); }
html[dir="rtl"] .tlink svg{ transform:scaleX(-1); }
html[dir="ltr"] .tlink:hover svg{ transform:translateX(4px); }
html[dir="rtl"] .tlink:hover svg{ transform:scaleX(-1) translateX(4px); }

/* ---------- 15. Timeline (Journey) ---------- */
.tl{ position:relative; }
.tl__row{
  display:grid; gap:clamp(20px,3vw,56px);
  grid-template-columns:1fr;
  padding-block:clamp(52px,9vh,116px);
  border-block-start:1px solid var(--line-dark);
}
.on-light .tl__row{ border-block-start-color:var(--line-light); }
.tl__row:first-child{ border-block-start:0; }
@media (min-width:900px){
  .tl__row{ grid-template-columns:minmax(190px,.5fr) 1.5fr; }
}
.tl__side{ position:relative; }
@media (min-width:900px){
  .tl__side{ position:sticky; inset-block-start:clamp(120px,17vh,180px); align-self:start; }
}
.tl__yr{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.5rem,5.4vw,4.4rem); line-height:.9;
  letter-spacing:-.03em;
  color:var(--on-dark); direction:ltr; unicode-bidi:isolate;
  font-variant-numeric:lining-nums tabular-nums;
}
.on-light .tl__yr{ color:var(--on-light); }
.tl__yr--soft{ color:var(--on-dark-3); font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:.02em; }
.on-light .tl__yr--soft{ color:var(--on-light-3); }
.tl__ph{ margin-block-start:10px; }
.tl__body > * + *{ margin-block-start:clamp(16px,2vw,24px); }

/* ---------- 16. Case study (Work) ---------- */
.case{ position:relative; }
.case__hero{ position:relative; overflow:clip; }
.case__hero img{ inline-size:100%; }
.case__tag{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); border:1px solid rgba(185,143,82,.4);
  padding:6px 13px; border-radius:999px;
}
html[lang="ar"] .case__tag{ font-size:.78rem; text-transform:none; }
.on-light .case__tag{ color:var(--brass-lo); border-color:rgba(142,108,61,.4); }

.spec{ display:grid; gap:0; }
.spec div{
  display:flex; justify-content:space-between; gap:18px;
  padding-block:13px;
  border-block-end:1px solid var(--line-dark);
  font-size:.85rem;
}
.on-light .spec div{ border-block-end-color:var(--line-light); }
.spec dt{ color:var(--on-dark-3); flex:none; }
.on-light .spec dt{ color:var(--on-light-3); }
.spec dd{ margin:0; text-align:end; color:var(--on-dark); }
.on-light .spec dd{ color:var(--on-light); }

/* ---------- 17. Provenance note ---------- */
.prov{
  display:flex; gap:11px; align-items:flex-start;
  font-size:.72rem; line-height:1.6;
  color:var(--on-dark-3);
  padding-block-start:16px;
  border-block-start:1px solid var(--line-dark);
}
html[lang="ar"] .prov{ font-size:.82rem; line-height:1.85; }
.on-light .prov{ color:var(--on-light-3); border-block-start-color:var(--line-light); }
.prov svg{ flex:none; margin-block-start:.28em; opacity:.7; }

/* ---------- 18. Clinic CTA ---------- */
.clinic{
  position:relative;
  border-radius:var(--r-plate);
  border:1px solid var(--line-dark);
  padding:clamp(30px,4.6vw,68px);
  display:grid; gap:clamp(24px,3vw,48px);
  align-items:center; grid-template-columns:1fr;
  overflow:hidden;
}
@media (min-width:840px){ .clinic{ grid-template-columns:1.35fr auto; } }
.on-light .clinic{ border-color:var(--line-light); }
.clinic::before{                       /* the arc, watermarked */
  content:""; position:absolute; inset-block-end:-40%; inset-inline-end:-8%;
  inline-size:min(52%,420px); aspect-ratio:2/1;
  border-block-start:1px solid rgba(185,143,82,.16);
  border-start-start-radius:100%; border-start-end-radius:100%;
  pointer-events:none;
}

/* ---------- 19. Footer ---------- */
.ftr{ background:var(--ink); border-block-start:1px solid var(--line-dark); padding-block:clamp(48px,7vh,84px) 34px; }
.ftr__grid{
  display:grid; gap:clamp(28px,3.4vw,52px);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .ftr__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.ftr__col h4{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark-3); margin-block-end:18px; font-weight:500;
}
html[lang="ar"] .ftr__col h4{ font-size:.78rem; text-transform:none; }
.ftr__col li + li{ margin-block-start:11px; }
.ftr__col a{ font-size:.87rem; color:var(--on-dark-2); transition:color var(--t-fast); }
.ftr__col a:hover{ color:var(--brass); }
.ftr__base{
  margin-block-start:clamp(34px,5vh,60px); padding-block-start:24px;
  border-block-start:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between;
  font-size:.72rem; color:var(--on-dark-3);
}
html[lang="ar"] .ftr__base{ font-size:.82rem; }

.social{ display:flex; gap:10px; flex-wrap:wrap; }
.social a{
  inline-size:42px; block-size:42px; border-radius:50%;
  border:1px solid var(--line-dark);
  display:grid; place-items:center;
  color:var(--on-dark-2);
  transition:border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.social a:hover{ border-color:var(--brass); color:var(--brass); transform:translateY(-2px); }
.on-light .social a{ border-color:var(--line-light); color:var(--on-light-2); }
.on-light .social a:hover{ border-color:var(--brass-lo); color:var(--brass-lo); }

/* ---------- 20. Chapter rail (page position) ---------- */
.rail{
  position:fixed; z-index:150;
  /* physical right, not inset-inline-end: the rail stays on the same edge
     of the screen in both languages instead of mirroring under RTL */
  right:clamp(14px,1.8vw,26px);
  inset-block-start:50%; transform:translateY(-50%);
  display:none; flex-direction:column; gap:14px;
}
@media (min-width:1200px){ .rail{ display:flex; } }
.rail a{
  inline-size:22px; block-size:22px; display:grid; place-items:center;
  position:relative;
}
.rail a i{
  inline-size:5px; block-size:5px; border-radius:50%;
  background:var(--on-dark-3);
  transition:background var(--t-fast), transform var(--t-fast);
}
.rail a:hover i,.rail a.is-cur i{ background:var(--brass); transform:scale(1.5); }
.rail a span{
  position:absolute; right:calc(100% + 10px);
  white-space:nowrap; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-2);
  opacity:0; transform:translateX(6px);
  transition:opacity var(--t-fast), transform var(--t-fast);
  pointer-events:none;
}
html[lang="ar"] .rail a span{ font-size:.74rem; text-transform:none; }
.rail a:hover span{ opacity:1; transform:none; }
.rail.is-light a i{ background:var(--on-light-3); }
.rail.is-light a span{ color:var(--on-light-2); }
.rail.is-light a:hover i,.rail.is-light a.is-cur i{ background:var(--brass-lo); }

/* ---------- 21. Page transition veil ---------- */
.veil-page{
  position:fixed; inset:0; z-index:500; pointer-events:none;
  background:var(--ink);
  clip-path:inset(0 0 100% 0);
  display:grid; place-items:center;
}
.veil-page.is-out{
  clip-path:inset(0 0 0 0);
  transition:clip-path .52s var(--e-io);
}
.veil-page.is-in{
  clip-path:inset(100% 0 0 0);
  transition:clip-path .62s var(--e-io);
}
.veil-page svg{ inline-size:64px; opacity:0; transition:opacity .3s ease .18s; }
.veil-page.is-out svg{ opacity:1; }

/* ---------- 22. Cursor (desktop, fine pointer only) ---------- */
.cur{
  position:fixed; top:0; left:0; z-index:900;
  inline-size:26px; block-size:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(185,143,82,.55); border-radius:50%;
  pointer-events:none; opacity:0;
  transition:opacity .3s, width .3s var(--e-out), height .3s var(--e-out),
             margin .3s var(--e-out), background .3s, border-color .3s;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .cur.is-on{ opacity:1; }
  .cur.is-lg{ inline-size:56px; block-size:56px; margin:-28px 0 0 -28px; background:rgba(185,143,82,.1); }
}

/* ---------- 23. Marquee strip ---------- */
.strip{
  overflow:hidden; border-block:1px solid var(--line-dark);
  padding-block:clamp(16px,2vw,24px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.on-light .strip{ border-color:var(--line-light); }
.strip__track{
  display:flex; gap:clamp(28px,4vw,64px); inline-size:max-content;
  animation:marq 46s linear infinite;
  direction:ltr;
}
.strip:hover .strip__track{ animation-play-state:paused; }
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.strip__item{
  display:inline-flex; align-items:center; gap:clamp(28px,4vw,64px);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark-3); white-space:nowrap;
}
html[lang="ar"] .strip__item{ font-size:.86rem; text-transform:none; }
.on-light .strip__item{ color:var(--on-light-3); }
.strip__item::after{ content:""; inline-size:4px; block-size:4px; border-radius:50%; background:var(--brass); opacity:.6; }

/* ---------- 24. Easter-egg surfaces ---------- */
.egg-morph{ cursor:pointer; position:relative; }
.egg-hint{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-3); opacity:0; transition:opacity var(--t-med);
}
html[lang="ar"] .egg-hint{ font-size:.74rem; text-transform:none; }
.egg-morph:hover .egg-hint{ opacity:.75; }
.on-light .egg-hint{ color:var(--on-light-3); }

.egg-note{
  position:fixed; inset-block-end:22px; inset-inline-start:50%;
  transform:translate(-50%,140%); z-index:320;
  background:var(--ink-3); border:1px solid rgba(185,143,82,.4);
  color:var(--on-dark); padding:14px 22px; border-radius:999px;
  font-size:.8rem; max-inline-size:min(90vw,520px); text-align:center;
  transition:transform .6s var(--e-out), opacity .6s var(--e-out);
  opacity:0; box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.egg-note.is-on{ transform:translate(-50%,0); opacity:1; }

/* a tiny GT-R silhouette that runs the divider once, on demand */
.egg-car{
  position:absolute; inset-block-end:-3px; inset-inline-start:0;
  inline-size:34px; opacity:0; pointer-events:none;
}
.egg-car path{ fill:var(--brass); }
.egg-car.is-run{ animation:drive 2.9s var(--e-io) forwards; }
@keyframes drive{
  0%  { opacity:0; transform:translateX(0) }
  8%  { opacity:1 }
  92% { opacity:1 }
  100%{ opacity:0; transform:translateX(var(--run,300px)) }
}
html[dir="rtl"] .egg-car{ transform:scaleX(-1); }
html[dir="rtl"] .egg-car.is-run{ animation-name:drive-rtl; }
@keyframes drive-rtl{
  0%  { opacity:0; transform:scaleX(-1) translateX(0) }
  8%  { opacity:1 }
  92% { opacity:1 }
  100%{ opacity:0; transform:scaleX(-1) translateX(var(--run,300px)) }
}

/* ---------- 25. Utilities ---------- */
.stack > * + *{ margin-block-start:var(--s,24px); }
.stack-sm{ --s:14px; }
.stack-lg{ --s:clamp(28px,3.4vw,46px); }
.flow-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.sr{
  position:absolute; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
bdi{ unicode-bidi:isolate; }
.text-brass{ color:var(--brass); }
.center{ text-align:center; }
.hide-sm{ display:none; }
@media (min-width:760px){ .hide-sm{ display:revert; } }

/* ---------- 26. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv,.rv-mask > *,.is-in .rv,.is-in .rv-mask > *{ opacity:1 !important; transform:none !important; }
  .rv-img img,.rv-img video{ transform:none !important; }
  .hero__portrait img{ transform:none !important; }
  .arc--divider path{ stroke-dashoffset:0 !important; }
  .strip__track{ animation:none; }
  .veil-page{ display:none; }
  .cur{ display:none; }
  .stage__video{ opacity:1; }
  .scroll-cue i{ animation:none; transform:scaleY(1); }
}

/* ---------- 27. Print ---------- */
@media print{
  .hdr,.rail,.cur,.veil-page,.menu,.stage__video,.stage__veil,.scroll-cue{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:24px; }
}

/* ============================================================
   28. MOTION LAYER
   Everything here is transform/opacity only, driven from one rAF
   loop, and switched off wholesale under prefers-reduced-motion.
   ============================================================ */

/* --- scroll progress: a brass hairline across the top --- */
.progress{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:210;
  block-size:2px; pointer-events:none;
  background:linear-gradient(to right,var(--brass-lo),var(--brass),var(--brass-hi));
  transform:scaleX(var(--p,0));
  transform-origin:inline-start;
  opacity:0; transition:opacity .4s var(--e-out);
}
.progress.is-on{ opacity:.85; }

/* word reveal now lives in section 34 */

/* --- image wipe: the plate opens rather than fading --- */
.plate__win{ clip-path:inset(0 0 0 0); }
.rv-img.plate__win{ clip-path:inset(0 0 100% 0); }
.is-in .rv-img.plate__win{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--e-io);
  transition-delay:calc(var(--d,0) * .085s + .1s);
}

/* --- pointer tilt on plates --- */
.plate{
  transform:perspective(1100px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translate3d(0,var(--ty,0px),0);
  transform-style:preserve-3d;
  will-change:transform;
}
.plate__win{ transform:translateZ(0); }
@media (hover:hover) and (pointer:fine){
  .fig:hover .plate{ transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-3px,0); }
}

/* --- magnetic controls --- */
.btn,.tlink,.nav__link,.social a,.lang{
  --mx:0px; --my:0px;
}
.btn,.social a,.lang{
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .45s var(--e-out), background var(--t-med), color var(--t-med),
             gap var(--t-med), border-color var(--t-med);
}
.btn.is-mag,.social a.is-mag,.lang.is-mag{ transition:transform .12s linear, background var(--t-med), color var(--t-med), border-color var(--t-med); }

/* --- nav letters lift on hover --- */
.nav__link .ch{ display:inline-block; transition:transform .38s var(--e-out); }
.nav__link:hover .ch{ transform:translateY(-3px); transition-delay:calc(var(--ci,0) * .022s); }

/* --- card: a brass line draws around the perimeter --- */
.card{ position:relative; overflow:hidden; }
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,transparent 18%,var(--brass) 50%,transparent 82%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transform:translateX(-30%);
  transition:opacity .5s var(--e-out), transform .9s var(--e-out);
}
.card:hover::after{ opacity:.9; transform:none; }

/* --- counters --- */
.count{ font-variant-numeric:tabular-nums lining-nums; }

/* --- ambient dust in the hero --- */
.dust{
  position:absolute; inset:0; z-index:1;
  inline-size:100%; block-size:100%;
  pointer-events:none; opacity:0;
  transition:opacity 1.8s var(--e-out) .5s;
}
.dust.is-on{ opacity:.55; }

/* --- hero drift: the plate breathes --- */
@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0) }
  50%    { transform:translate3d(0,-9px,0) }
}
.hero__portrait{ animation:drift 11s var(--e-io) infinite; }

/* --- cursor label --- */
.cur{ mix-blend-mode:difference; }
.cur__t{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.6);
  font-size:.54rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ivory); white-space:nowrap; opacity:0;
  transition:opacity .25s var(--e-out), transform .35s var(--e-out);
}
html[lang="ar"] .cur__t{ font-size:.66rem; text-transform:none; letter-spacing:0; }
.cur.has-label .cur__t{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.cur.has-label{
  inline-size:74px; block-size:74px; margin:-37px 0 0 -37px;
  background:rgba(185,143,82,.16); border-color:var(--brass);
}

/* --- section entry: the arc wipes across a divider --- */
.arc--divider path{ filter:drop-shadow(0 0 6px rgba(185,143,82,.35)); }

/* --- stat numbers lift as they arrive --- */
.stat__n{ transform:translateY(14px); opacity:0; }
.is-in .stat__n{
  transform:none; opacity:1;
  transition:transform 1s var(--e-out), opacity 1s var(--e-out);
  transition-delay:calc(var(--d,0) * .085s + .12s);
}

/* --- marquee reacts to scroll velocity --- */
/* The strip used to have its animation-duration rewritten every frame from
   the scroll velocity. Changing the duration of a running animation makes the
   browser recompute its offset from elapsed/duration, so every write jumped
   the strip a little — which read as sticking and juddering while scrolling.
   It runs at one steady rate now. */
.strip__track{ animation-duration:46s; }

@media (prefers-reduced-motion:reduce){
  .word,.is-in .word{ clip-path:none !important; transform:none !important; opacity:1 !important; }
  .rv-img.plate__win,.is-in .rv-img.plate__win{ clip-path:none !important; }
  .plate{ transform:none !important; }
  .hero__portrait{ animation:none !important; }
  .progress,.dust,.cur{ display:none !important; }
  .stat__n{ transform:none !important; opacity:1 !important; }
  .card::after{ display:none; }
}

/* ============================================================
   30. IMAGE LOADING — nothing is ever blank
   Every <img data-img> carries a 20px JPEG of itself in --lq.
   That paints instantly as the element's own background; the real
   file then decodes on top and the blur lifts. The <img> is
   transparent until it decodes, so blurring the element blurs only
   the placeholder — and the same filter then becomes the settle.
   ============================================================ */
img[data-img]{
  background-image:var(--lq);
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  filter:blur(16px) saturate(1.25);
  transform:scale(1.06);
  will-change:filter, transform;
  transition:filter 1.1s var(--e-out), transform 1.5s var(--e-out);
}
img[data-img].is-loaded{ filter:blur(0) saturate(1); transform:scale(1); }

/* the frame breathes light across itself while the file is in flight */
.is-loading{ position:relative; overflow:hidden; }
.is-loading::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 30%, rgba(239,234,226,.10) 48%, rgba(216,179,120,.14) 52%,
    transparent 70%);
  background-size:280% 100%;
  animation:sheen 1.5s var(--e-io) infinite;
}
@keyframes sheen{ from{ background-position:180% 0; } to{ background-position:-80% 0; } }

/* ============================================================
   31. SCROLLBAR — brass, and a reading line that reports position
   ============================================================ */
html{ scrollbar-width:thin; scrollbar-color:var(--brass-lo) rgba(0,0,0,.28); }
::-webkit-scrollbar{ inline-size:11px; block-size:11px; }
::-webkit-scrollbar-track{ background:rgba(0,0,0,.30); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--brass-hi), var(--brass), var(--brass-lo));
  border:3px solid transparent; background-clip:padding-box; border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #EBCB98, var(--brass-hi), var(--brass));
  background-clip:padding-box;
}

.progress{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:500;
  block-size:3px; inline-size:100%; transform-origin:0 50%; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg, var(--brass-lo), var(--brass-hi) 55%, #F0DCB4);
  box-shadow:0 0 14px rgba(216,179,120,.75), 0 0 3px rgba(216,179,120,.9);
  opacity:0; transition:opacity .4s var(--e-out);
  pointer-events:none;
}
html[lang="ar"] .progress{ transform-origin:100% 50%; }
.progress.is-on{ opacity:1; }

/* ============================================================
   32. CURSOR — a brass ring that lags behind a hard dot, reads the
   surface it is over, and answers a click. Fine pointers only.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  html.has-cur, html.has-cur *{ cursor:none !important; }
}
.cur-dot{
  position:fixed; top:0; left:0; z-index:902;
  inline-size:6px; block-size:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:var(--brass-hi); pointer-events:none; opacity:0;
  transition:opacity .3s, background .3s, inline-size .25s var(--e-out),
             block-size .25s var(--e-out), margin .25s var(--e-out);
  will-change:transform;
}
.cur-dot.is-on{ opacity:1; }
.cur-dot.is-hot{ inline-size:0; block-size:0; margin:0; }

.cur-ring{
  position:fixed; top:0; left:0; z-index:901;
  inline-size:14px; block-size:14px; margin:-7px 0 0 -7px; border-radius:50%;
  border:1.5px solid rgba(216,179,120,.85); pointer-events:none; opacity:0;
  will-change:transform, opacity;
}
@keyframes bloom{
  from{ transform:translate3d(var(--bx), var(--by), 0) scale(.4); opacity:.9; }
  to  { transform:translate3d(var(--bx), var(--by), 0) scale(5.5); opacity:0; }
}
.cur-ring.is-bloom{ animation:bloom .62s var(--e-out) forwards; }

/* ============================================================
   33. LINES — every rule on the page draws itself
   ============================================================ */
.ln{ transform:scaleX(0); transform-origin:0 50%; }
html[lang="ar"] .ln{ transform-origin:100% 50%; }
.is-in .ln{
  transform:scaleX(1);
  transition:transform 1.25s var(--e-out);
  transition-delay:calc(var(--d,0) * .085s + .1s);
}
.ln-v{ transform:scaleY(0); transform-origin:50% 0; }
.is-in .ln-v{ transform:scaleY(1); transition:transform 1.1s var(--e-out); }

.draw{ stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400); }
.is-in .draw{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.9s var(--e-io);
  transition-delay:calc(var(--d,0) * .09s + .15s);
}

.h-rule{ position:relative; padding-block-end:16px; }
.h-rule::after{
  /* A full-column gradient under a short heading reads as an accident —
     the line ends nowhere near the words, and the effect differs with every
     heading length and in each direction. A short mark set against the start
     of the text is the same shape everywhere. */
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0;
  block-size:1px; inline-size:clamp(44px, 5vw, 72px);
  background:var(--brass); opacity:.75;
  transform:scaleX(0); transform-origin:0 50%;
}
html[lang="ar"] .h-rule::after{ transform-origin:100% 50%; }
.is-in .h-rule::after{ transform:scaleX(1); transition:transform 1.4s var(--e-out) .35s; }

/* ============================================================
   34. TYPE — words arrive in sequence, and from somewhere:
   lifted, tipped, and unblurred.
   ============================================================ */
.word{
  display:inline-block; white-space:pre;
  opacity:0; transform:translateY(.62em) rotate(2.2deg);
  filter:blur(5px);
  transform-origin:0 100%;
}
html[lang="ar"] .word{
  transform:translateY(.5em) rotate(-1.6deg); transform-origin:100% 100%;
}
.is-in .word{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .8s var(--e-out), transform 1.05s var(--e-out),
             filter .8s var(--e-out);
  transition-delay:calc(var(--i,0) * .052s + var(--d,0) * .07s);
}

/* ============================================================
   35. SECTIONS AND PHOTOGRAPHS
   ============================================================ */
.sect-in{ opacity:0; transform:translateY(52px) scale(.985); }
.is-in .sect-in, .is-in.sect-in{
  opacity:1; transform:none;
  transition:opacity 1.1s var(--e-out), transform 1.25s var(--e-out);
}

.rv-img.plate__win{ clip-path:inset(0 0 100% 0); }
.is-in .rv-img.plate__win{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.5s var(--e-io);
  transition-delay:calc(var(--d,0) * .085s);
}
.rv-img img, .rv-img video{ transform:scale(1.14); }
.is-in .rv-img img, .is-in .rv-img video{
  transform:scale(1); transition:transform 2.2s var(--e-out);
}

/* ============================================================
   36. CARDS — the brass edge runs the perimeter on approach
   ============================================================ */
@property --a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.card{
  position:relative; overflow:hidden;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:conic-gradient(from var(--a,0deg),
    transparent 0deg, var(--brass-hi) 42deg, transparent 96deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--e-out);
}
.card:hover::after{ opacity:1; animation:spin 2.6s linear infinite; }
@keyframes spin{ to{ --a:360deg; } }
.card:hover{ transform:translateY(-6px); }

/* ============================================================
   37. REDUCED MOTION — the whole layer stands down
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  img[data-img]{ filter:none !important; transform:none !important; }
  .is-loading::before{ display:none !important; }
  .word{ opacity:1 !important; transform:none !important; filter:none !important; }
  .ln, .ln-v{ transform:none !important; }
  .draw{ stroke-dashoffset:0 !important; }
  .h-rule::after{ transform:scaleX(1) !important; }
  .sect-in{ opacity:1 !important; transform:none !important; }
  .rv-img.plate__win{ clip-path:none !important; }
  .rv-img img, .rv-img video{ transform:none !important; }
  .cur-dot, .cur-ring{ display:none !important; }
  .card:hover{ transform:none; }
  .card::after{ display:none !important; }
  html.has-cur, html.has-cur *{ cursor:auto !important; }
}

/* ============================================================
   38. HEADER — a travelling mark, and a bar that gets out of the way
   ============================================================ */

/* One brass line serves the whole nav: it rests under the current page and
   slides to whatever the pointer is over. The per-link underline stays as
   the no-JS fallback and is stood down once the indicator is measured. */
.nav{ position:relative; }
.nav__ind{
  /* measured from the nav's left edge in JS, so it must be anchored to the
     left edge too — inset-inline-start flips to the right under dir="rtl"
     and left the line stranded away from the item it belongs to */
  position:absolute; bottom:0; left:0;
  block-size:1px; inline-size:0; background:var(--brass);
  opacity:0; pointer-events:none;
  transform-origin:0 50%;
  transition:transform .5s var(--e-out), inline-size .5s var(--e-out),
             opacity .3s var(--e-out), background .4s var(--e-out);
}
.nav.has-ind .nav__ind{ opacity:1; }
.nav.has-ind .nav__link::after{ opacity:0; }
.hdr.is-light .nav__ind{ background:var(--brass-lo); }

/* the bar lifts away while you read downward, and returns the moment you
   scroll back up — the video stages get the whole screen */
.hdr{ will-change:transform; }
.hdr.is-away{ transform:translateY(-102%); }
.hdr{ transition:background .5s var(--e-out), backdrop-filter .5s var(--e-out),
                 border-color .5s var(--e-out), padding .5s var(--e-out),
                 transform .55s var(--e-out); }

/* a brass thread under the bar, drawn in as it sticks */
.hdr::after{
  content:""; position:absolute; inset-block-end:-1px; inset-inline:0;
  block-size:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent,
             rgba(185,143,82,.55) 22%, rgba(216,179,120,.75) 50%,
             rgba(185,143,82,.55) 78%, transparent);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .8s var(--e-out);
}
.hdr.is-stuck::after{ transform:scaleX(1); }

.lang{ transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.lang:hover{ background:rgba(185,143,82,.10); }

/* ============================================================
   39. FOOTER
   ============================================================ */
.ftr{ position:relative; overflow:hidden; isolation:isolate; }
.ftr .shell{ position:relative; z-index:2; }

/* the motif, held very quiet, filling the space the columns leave */
.ftr__wm{
  position:absolute; z-index:0; pointer-events:none;
  inset-block-end:-6%; inset-inline-start:50%;
  inline-size:min(1100px, 128%); block-size:auto;
  transform:translateX(-50%);
  opacity:.055;
}
.ftr__wm path{ fill:none; stroke:var(--brass-hi); stroke-width:1.1; stroke-linecap:round; }

.ftr__social{ margin-block-start:26px; }
.ftr__social a{ inline-size:38px; block-size:38px; }

/* each column heading carries a short rule */
.ftr__col h4{ position:relative; padding-block-end:12px; }
.ftr__col h4::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  inline-size:26px; block-size:1px; background:var(--brass);
  opacity:.55;
}

.ftr__col a{ position:relative; }
.ftr__col ul a::after{
  content:""; position:absolute; inset-block-end:-3px; inset-inline-start:0;
  block-size:1px; inline-size:100%; background:currentColor;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--e-out);
}
html[lang="ar"] .ftr__col ul a::after{ transform-origin:100% 50%; }
.ftr__col ul a:hover::after{ transform:scaleX(1); }

.ftr__base{ align-items:center; }

/* the place name — and the switch for the sky */
.ftr__place{
  font:inherit; color:inherit; background:none; border:0; padding:0;
  cursor:pointer; position:relative;
  border-block-end:1px dotted rgba(185,143,82,.45);
  transition:color var(--t-fast), border-color var(--t-fast);
}
.ftr__place:hover{ color:var(--brass-hi); border-block-end-color:var(--brass); }
.ftr.is-sky .ftr__place{ color:var(--brass-hi); border-block-end-color:transparent; }

.ftr__top{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--on-dark-3); transition:color var(--t-fast);
}
.ftr__top svg{
  inline-size:12px; block-size:12px; fill:none;
  stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--e-out);
}
.ftr__top:hover{ color:var(--brass); }
.ftr__top:hover svg{ transform:translateY(-3px); }

/* ---- the sky ---- */
.ftr__sky{
  position:absolute; inset:0; z-index:1; inline-size:100%; block-size:100%;
  opacity:0; pointer-events:none;
  transition:opacity 1.6s var(--e-out);
}
.ftr.is-sky .ftr__sky{ opacity:1; }
.ftr.is-sky .ftr__wm{ opacity:.12; }
.ftr{ transition:background 1.6s var(--e-out); }
.ftr.is-sky{ background:#06060A; }

@media (prefers-reduced-motion: reduce){
  .hdr.is-away{ transform:none; }
  .nav__ind{ transition:none; }
  .ftr__sky{ transition:none; }
  .ftr__top:hover svg{ transform:none; }
}

/* ============================================================
   40. THE MARK READS AS A CONTROL
   It is the way home from every page, so it carries a quiet brass
   halo that lifts on approach rather than sitting inert.
   ============================================================ */
.brand{
  border-radius:12px; padding:6px 10px; margin:-6px -10px;
  transition:transform .45s var(--e-out), background .45s var(--e-out);
}
.brand__mark{
  transition:filter .45s var(--e-out), transform .55s var(--e-out);
  filter:drop-shadow(0 0 4px rgba(216,179,120,.30));
}
.brand__mark path{ transition:stroke .4s var(--e-out); }
.brand__name{ transition:color .4s var(--e-out); }

@media (hover:hover) and (pointer:fine){
  .brand:hover{ background:rgba(185,143,82,.07); }
  .brand:hover .brand__mark{
    filter:drop-shadow(0 0 12px rgba(216,179,120,.85))
           drop-shadow(0 0 26px rgba(185,143,82,.45));
    transform:translateY(-1px) scale(1.06);
  }
  .brand:hover .brand__mark path{ stroke:var(--brass-hi); }
  .brand:hover .brand__name{ color:var(--brass-hi); }
}
.brand:focus-visible .brand__mark{
  filter:drop-shadow(0 0 12px rgba(216,179,120,.85));
}
.brand:active{ transform:scale(.985); }

/* the halo breathes, so the mark reads as live rather than printed */
@keyframes markGlow{
  0%,100%{ filter:drop-shadow(0 0 4px rgba(216,179,120,.26)); }
  50%    { filter:drop-shadow(0 0 10px rgba(216,179,120,.55)); }
}
.hdr .brand__mark{ animation:markGlow 4.2s var(--e-io) infinite; }
.hdr .brand:hover .brand__mark{ animation:none; }
/* over an ivory section a light halo would vanish, so the mark keeps the
   same breathing affordance in a darker brass */
@keyframes markGlowLight{
  0%,100%{ filter:drop-shadow(0 0 3px rgba(122,92,49,.30)); }
  50%    { filter:drop-shadow(0 0 8px rgba(122,92,49,.60)); }
}
.hdr.is-light .brand__mark{ animation:markGlowLight 4.2s var(--e-io) infinite; }
.hdr.is-light .brand:hover .brand__mark{
  animation:none;
  filter:drop-shadow(0 0 10px rgba(122,92,49,.75));
}
.hdr.is-light .brand:hover .brand__mark path{ stroke:var(--brass-lo); }
.hdr.is-light .brand:hover{ background:rgba(122,92,49,.08); }

/* ============================================================
   41. TOUCH
   There is no hover on a phone, so every control answers the press
   instead. The browser's own blue flash is replaced by something
   that belongs to the page.
   ============================================================ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-x:hidden; }

@media (hover:none){
  a, button, .card, .menu__link, .nav__link, .social a, .lang, .burger,
  .ftr__place, .ftr__top, .egg-morph{
    -webkit-tap-highlight-color:transparent;
    tap-highlight-color:transparent;
  }
  a:active, button:active, .menu__link:active,
  .ftr__place:active, .ftr__top:active{
    color:var(--brass-hi);
    transition:none;
  }
  .btn:active{ transform:scale(.97); border-color:var(--brass-hi); }
  .social a:active{ border-color:var(--brass); color:var(--brass); transform:scale(.94); }
  .card:active{ transform:translateY(-2px) scale(.995); }
  .lang:active{ background:rgba(185,143,82,.16); }
  .brand:active .brand__mark{ filter:drop-shadow(0 0 12px rgba(216,179,120,.8)); }

  /* hover-only flourishes never fire on touch — stand them down so they
     cannot sit half-applied after a tap */
  .card::after{ display:none; }
  .plate{ transform:none !important; }
}

/* a finger needs a bigger target than a pointer does */
@media (max-width:1039px){
  .ftr__col ul a, .ftr__col li > a{
    display:inline-block; padding-block:9px; min-block-size:24px;
  }
  .ftr__col li + li{ margin-block-start:4px; }
  .social a{ inline-size:46px; block-size:46px; }
  .ftr__base{ gap:18px 22px; }
  .ftr__place, .ftr__top{ padding-block:8px; display:inline-flex; align-items:center; }
  .tlink{ padding-block:8px; display:inline-block; }
  /* the language switch is the one control every visitor reaches for */
  .lang{ min-block-size:44px; padding-inline:14px; }
}

/* room for the notch and the home indicator */
.hdr__in{ padding-inline:max(var(--gut), env(safe-area-inset-left)); }
.menu{
  padding-block-start:max(96px, calc(env(safe-area-inset-top) + 88px));
  padding-block-end:max(48px, calc(env(safe-area-inset-bottom) + 32px));
}
.ftr{ padding-block-end:max(34px, calc(env(safe-area-inset-bottom) + 24px)); }

/* ============================================================
   42. SMALL SCREENS — spend less
   The blur-up, the spinning card edge and the ambient canvas all cost
   GPU time that a phone would rather give to scrolling.
   ============================================================ */
@media (max-width:760px){
  img[data-img]{ filter:blur(10px) saturate(1.15); transform:scale(1.03); }
  .strip__track{ animation-duration:64s; }
  .h-rule{ padding-block-end:12px; }
  .ftr__wm{ opacity:.04; }
  .hdr.is-away{ transform:translateY(-102%); }
}

@media (prefers-reduced-motion: reduce){
  .hdr .brand__mark{ animation:none !important; }
  .brand, .brand__mark{ transition:none !important; }
}

/* ============================================================
   43. CROPPING — keep the subject in the frame
   Several portrait photographs sit in landscape frames: a 2:3 picture
   in a 3:2 window loses well over half its height, and a centred crop
   takes that off the top and bottom equally — which is exactly where
   the face is. Portrait sources are marked at build time so the crop
   can be biased upward, and on a phone the landscape frame is dropped
   altogether rather than squeezed further.
   ============================================================ */
img.is-portrait{ object-position:50% 26%; }

/* an explicit choice in the markup still wins */
img.is-portrait.op-low { object-position:50% 74%; }
img.is-portrait.op-high{ object-position:50% 18%; }

@media (max-width:860px){
  img.is-portrait.ratio-3-2,
  img.is-portrait.ratio-16-9{ aspect-ratio:4/5; }
  img.is-portrait.ratio-1-1 { aspect-ratio:4/5; }
  img.is-portrait{ object-position:50% 22%; }
  img.is-portrait.op-low{ object-position:50% 70%; }
}

/* a landscape photograph in a very tall phone frame has the opposite
   problem, so give those a squarer window instead of a slot */
@media (max-width:860px){
  img:not(.is-portrait).ratio-4-5,
  img:not(.is-portrait).ratio-3-4{ aspect-ratio:1/1; }
}

/* ============================================================
   44. THE CHAPTERS BUTTON (phones and tablets)
   The way into the rest of the site on a small screen, so it is a
   named control rather than three anonymous lines: a brass pill that
   breathes, brightens under the thumb, and folds its rule into a
   cross once the chapters are open.
   ============================================================ */
.burger{
  display:inline-flex; align-items:center; gap:9px;
  inline-size:auto; block-size:auto;
  min-block-size:44px; padding-inline:14px 12px;
  border:1px solid rgba(185,143,82,.42);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(185,143,82,.13), rgba(185,143,82,.04));
  color:var(--on-dark);
  transition:border-color .4s var(--e-out), background .4s var(--e-out),
             box-shadow .4s var(--e-out), transform .3s var(--e-out);
  animation:chapGlow 4.6s var(--e-io) infinite;
}
@media (min-width:1040px){ .burger{ display:none; } }

.burger__lines{
  display:flex; flex-direction:column; justify-content:center;
  gap:4px; inline-size:16px; flex:none;
}
.burger__lines i{
  display:block; block-size:1px; inline-size:100%;
  background:var(--brass-hi); border-radius:1px;
  transition:transform .38s var(--e-out), opacity .22s var(--e-out), background .4s;
}
.burger__t{
  font-size:.68rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  color:var(--brass-hi); white-space:nowrap; line-height:1;
  transition:color .4s var(--e-out);
}
html[lang="ar"] .burger__t{
  font-size:.84rem; font-weight:400; letter-spacing:0; text-transform:none;
}

/* the halo the mark already uses, at the other end of the bar */
@keyframes chapGlow{
  0%,100%{ box-shadow:0 0 9px rgba(216,179,120,.13), inset 0 0 0 rgba(216,179,120,0); }
  50%    { box-shadow:0 0 20px rgba(216,179,120,.34), inset 0 0 12px rgba(216,179,120,.07); }
}
@keyframes chapGlowLight{
  0%,100%{ box-shadow:0 0 8px rgba(122,92,49,.12); }
  50%    { box-shadow:0 0 16px rgba(122,92,49,.30); }
}

/* over an ivory section the halo darkens rather than disappearing */
.hdr.is-light .burger{
  border-color:rgba(122,92,49,.40);
  background:linear-gradient(180deg, rgba(122,92,49,.10), rgba(122,92,49,.03));
  animation-name:chapGlowLight;
}
.hdr.is-light .burger__t{ color:var(--brass-lo); }
.hdr.is-light .burger__lines i{ background:var(--brass-lo); }

/* open: the rule folds into a cross and the pill holds its light */
body.menu-open .burger{
  animation:none;
  border-color:var(--brass-hi);
  background:rgba(185,143,82,.20);
  box-shadow:0 0 26px rgba(216,179,120,.42);
}
body.menu-open .burger__lines i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
body.menu-open .burger__lines i:nth-child(2){ opacity:0; }
body.menu-open .burger__lines i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@media (hover:hover) and (pointer:fine){
  .burger:hover{ border-color:var(--brass); background:rgba(185,143,82,.16); }
}
.burger:active{ transform:scale(.97); }
.burger:focus-visible{ box-shadow:0 0 0 2px var(--brass-hi); }

/* Below 390 the word costs more than it gives: it pushes the name into an
   ellipsis, and a half-written surname is worse than an unlabelled button.
   The pill and its light stay either way. */
@media (max-width:389px){
  .burger__t{ display:none; }
  .burger{ padding-inline:13px; }
}

@media (prefers-reduced-motion: reduce){
  .burger{ animation:none !important; }
  .burger__lines i{ transition:none; }
}

/* ---------- 45. A clip set in a plate ---------- */
.fig--tall .plate__win{ aspect-ratio:9/16; max-block-size:min(70vh, 620px); margin-inline:auto; }
.fig--tall .plate{ max-inline-size:clamp(240px, 32vw, 380px); margin-inline:auto; }
.fig__video{
  inline-size:100%; block-size:100%; object-fit:cover; display:block;
  border-radius:inherit; background:var(--ink-3);
}
/* a short caption beside a tall clip reads better centred than stranded at the top */
@media (min-width:760px){ .fig--tall + .stack{ align-self:center; } }

/* ============================================================
   46. THE CLINICAL GRID
   Square tiles at a tight gutter, the way the pictures were framed.
   Each one lifts in as it arrives rather than the whole wall at once,
   warms under the pointer, and opens full size when pressed.
   ============================================================ */
.shots{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(94px, 14vw, 178px), 1fr));
  gap:clamp(4px, .55vw, 10px);
}

.shot{
  position:relative; display:block; padding:0; border:0;
  aspect-ratio:1/1; overflow:hidden; cursor:pointer;
  background:var(--ink-3);
  border-radius:clamp(3px, .38vw, 7px);
  opacity:0; transform:scale(.93) translateY(16px);
  transition:opacity .8s var(--e-out), transform .9s var(--e-out),
             box-shadow .5s var(--e-out);
  -webkit-tap-highlight-color:transparent;
}
.on-light .shot{ background:var(--ivory-2); }
.shot.is-shown{ opacity:1; transform:none; }

.shot img{
  inline-size:100%; block-size:100%; object-fit:cover; display:block;
  transition:transform .85s var(--e-out), filter .6s var(--e-out);
}

/* the brass wash, and a hairline that closes on the picture */
.shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(185,143,82,0) 45%, rgba(122,92,49,.42));
  opacity:0; transition:opacity .5s var(--e-out);
}
.shot::before{
  content:""; position:absolute; inset:5px; pointer-events:none; z-index:2;
  border:1px solid rgba(216,179,120,.75);
  border-radius:calc(clamp(3px,.38vw,7px) - 1px);
  opacity:0; transform:scale(1.03);
  transition:opacity .45s var(--e-out), transform .55s var(--e-out);
}

@media (hover:hover) and (pointer:fine){
  .shot:hover{ box-shadow:0 18px 40px rgba(0,0,0,.45); z-index:3; }
  .shot:hover img{ transform:scale(1.08); filter:saturate(1.06) contrast(1.03); }
  .shot:hover::after{ opacity:1; }
  .shot:hover::before{ opacity:1; transform:scale(1); }
}
.shot:focus-visible{ outline:2px solid var(--brass-hi); outline-offset:2px; }
.shot:active{ transform:scale(.97); }

/* ============================================================
   47. THE LIGHTBOX
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:600;
  display:grid; place-items:center;
  padding:clamp(14px, 4vw, 56px);
  background:rgba(6,6,9,.93);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
          backdrop-filter:blur(22px) saturate(1.2);
  opacity:0; visibility:hidden;
  /* the ground goes dark quickly and the picture follows, so the player is
     never seen sitting on top of a page that is still lit */
  transition:opacity .2s linear, visibility .2s;
}
.lb.is-on{ opacity:1; visibility:visible; }

.lb__fig{
  position:relative; margin:0; display:grid; place-items:center;
  max-inline-size:min(94vw, 1120px);
}
.lb__img{
  display:block; max-inline-size:100%; max-block-size:82vh;
  border-radius:clamp(6px, .7vw, 12px);
  box-shadow:0 40px 110px rgba(0,0,0,.72), 0 0 0 1px rgba(216,179,120,.22);
  background:var(--ink-3);
  opacity:0; transform:scale(.97);
  transition:opacity .5s var(--e-out) .16s, transform .6s var(--e-out) .16s;
}
.lb__img.is-ready{ opacity:1; transform:none; }

.lb__count{
  position:absolute; inset-block-end:-34px; inset-inline-start:0;
  font-size:.68rem; letter-spacing:.2em; color:var(--brass-hi);
  font-variant-numeric:tabular-nums;
}
html[lang="ar"] .lb__count{ letter-spacing:0; font-size:.8rem; }

.lb__btn{
  position:absolute; z-index:2;
  inline-size:52px; block-size:52px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(216,179,120,.34);
  background:rgba(11,11,13,.55);
  color:var(--on-dark);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color .35s, background .35s, transform .35s var(--e-out);
}
.lb__btn svg{ inline-size:17px; block-size:17px; fill:none;
  stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) and (pointer:fine){
  .lb__btn:hover{ border-color:var(--brass-hi); background:rgba(185,143,82,.20); }
}
.lb__btn:active{ transform:scale(.93); }
.lb__btn:focus-visible{ outline:2px solid var(--brass-hi); outline-offset:2px; }

.lb__close{ position:fixed; top:clamp(12px,2.4vw,26px); inset-inline-end:clamp(12px,2.4vw,26px); }
/* The two arrows are placed physically and each points the way it sends the
   strip, which is what a reader expects of an arrow. Which one means
   "previous" depends on the reading direction, and that is decided in the
   script rather than by flipping the glyphs. */
.lb__side{ position:fixed; top:50%; margin-top:-26px; }
.lb__l{ left:clamp(10px,2vw,26px); }
.lb__r{ right:clamp(10px,2vw,26px); }

@media (max-width:640px){
  .lb__btn{ inline-size:46px; block-size:46px; }
  .lb__side{ top:auto; bottom:calc(env(safe-area-inset-bottom) + 18px); margin-top:0; }
  .lb__img{ max-block-size:70vh; }
  .lb__count{ inset-block-end:-30px; inset-inline-start:50%; transform:translateX(-50%); }
}

body.lb-open{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .shot{ opacity:1 !important; transform:none !important; transition:none; }
  .shot img{ transition:none; }
  .lb, .lb__img{ transition:none; }
}

/* ============================================================
   48. THE HEADER ON A PHONE
   The brand, the language toggle and the chapters button do not fit
   across 390px at full size. The names are set nowrap, so instead of
   wrapping they used to run straight over their neighbours — the text
   spilled up to 144px past its own box.

   So the bar gives up what it can spare: the line under the name, the
   half of the toggle that names the language you are already reading,
   and a little of the name's size. Everything left is also allowed to
   truncate, so no amount of resizing can put text on top of text again.
   ============================================================ */
/* the short form of the name exists only for the narrow bar */
.brand__short{ display:none; }

@media (max-width:1039px){
  .hdr__in{ gap:12px; }

  .brand{ min-inline-size:0; flex:1 1 auto; }
  .brand__txt{ min-inline-size:0; }
  .brand__name{ overflow:hidden; text-overflow:ellipsis; max-inline-size:100%; }
  .brand__sub{ display:none; }
  /* A truncated surname reads as broken rather than brief, so the narrow bar
     carries a shorter name in full instead of half of the long one. */

  /* the toggle names the language you would move to, which is the only
     part of it that carries information */
  .lang__cur,
  .lang > span[aria-hidden="true"]{ display:none; }
  .lang{ padding-inline:13px; }

  .hdr__right{ flex:none; }
}

@media (max-width:479px){
  /* only the bar is short of room; the footer has a column to itself */
  .hdr .brand__name{ display:none; }
  .hdr .brand__short{
    display:block; font-family:var(--f-display); font-size:.98rem;
    font-weight:400; letter-spacing:.005em; line-height:1.16; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }
  html[lang="ar"] .hdr .brand__short{ font-size:1.06rem; font-weight:500; }
  .brand{ gap:9px; }
  .brand__mark{ inline-size:22px; block-size:22px; }
}

/* ---------- 49. clips in the grid ---------- */
.shot__play{
  position:absolute; inset-block-end:7px; inset-inline-end:7px; z-index:2;
  inline-size:26px; block-size:26px; border-radius:50%;
  display:grid; place-items:center; pointer-events:none;
  background:rgba(11,11,13,.62);
  border:1px solid rgba(216,179,120,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .4s var(--e-out), border-color .4s var(--e-out);
}
.shot__play svg{ inline-size:11px; block-size:11px; fill:var(--brass-hi); margin-inline-start:1px; }
@media (hover:hover) and (pointer:fine){
  .shot--v:hover .shot__play{ background:rgba(185,143,82,.85); border-color:var(--brass-hi); }
  .shot--v:hover .shot__play svg{ fill:var(--ink); }
}

.lb__vid{
  display:block; max-inline-size:100%; max-block-size:82vh;
  border-radius:clamp(6px, .7vw, 12px);
  box-shadow:0 40px 110px rgba(0,0,0,.72), 0 0 0 1px rgba(216,179,120,.22);
  background:#000;
  opacity:0; transform:scale(.97);
  transition:opacity .5s var(--e-out) .16s, transform .6s var(--e-out) .16s;
}
.lb__vid.is-ready{ opacity:1; transform:none; }
.lb__vid[hidden]{ display:none; }
@media (max-width:640px){ .lb__vid{ max-block-size:66vh; } }
@media (prefers-reduced-motion: reduce){ .lb__vid{ transition:none; } }
/* the tap that opened the lightbox must not also press what is under it */
.lb.lb--deaf{ pointer-events:none; }

/* ---------- 50. what a finger has to hit ----------
   Measured at 390px: the mark was 34px tall, the two footer controls 35 and
   36, and the scroll hint 16 in English. All of them are links or buttons, so
   all of them get a thumb's worth of room. */
@media (hover:none), (max-width:1039px){
  .brand{ min-block-size:44px; }   /* the footer carries one too */
  .ftr__place, .ftr__top{ min-block-size:44px; padding-block:11px; }
  .scroll-cue{
    min-block-size:44px; padding-block:12px;
    display:inline-flex; align-items:center; gap:10px;
  }
}

/* ============================================================
   51 · THE OPENING
   The body was already held at opacity 0 until the language was
   settled, so the first moment of the site was a blank panel. This
   fills that moment with the name instead of nothing.

   It is drawn only under html.intro-on, a class set by a short script
   in the head, so a browser running no script sees the page exactly
   as it did before. It is taken down by a timer in that same head
   script as well as by site.js: whatever else fails, the opening must
   never be the thing standing between a visitor and the site.
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:1000;
  display:none; place-items:center;
  background:var(--ink);
  transition:opacity .6s var(--e-out), visibility 0s linear .6s;
}
html.intro-on .intro{ display:grid; }
html.intro-on body{ opacity:1; }          /* the opening does the covering now */
html.intro-off .intro{ opacity:0; visibility:hidden; pointer-events:none; }

.intro__inner{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding-inline:var(--gut); text-align:center;
}
.intro__name{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.55rem,4.4vw,2.8rem); color:var(--on-dark);
  opacity:0; transform:translateY(9px);
  animation:intro-rise .9s var(--e-out) .08s forwards;
}
.intro__sub{
  font-family:var(--f-sans); font-size:.6rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--on-dark-3);
  opacity:0; transform:translateY(9px);
  animation:intro-rise .9s var(--e-out) .24s forwards;
}
html[lang="ar"] .intro__sub{
  font-size:.74rem; letter-spacing:.1em; text-transform:none;
}
.intro__line{
  width:min(180px,40vw); height:1px; margin-block-start:6px;
  background:var(--line-dark); position:relative; overflow:hidden;
  opacity:0; animation:intro-rise .7s var(--e-out) .4s forwards;
}
/* physical left, like everything else that is positioned rather than
   laid out: the sweep should read the same in both directions */
.intro__line i{
  position:absolute; top:0; bottom:0; width:38%; left:-40%;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
  animation:intro-sweep 1.3s var(--e-io) infinite;
}
@keyframes intro-rise{ to{ opacity:1; transform:none; } }
@keyframes intro-sweep{ to{ left:102%; } }

@media (prefers-reduced-motion:reduce){
  .intro__name,.intro__sub,.intro__line{ animation:none; opacity:1; transform:none; }
  .intro__line i{ animation:none; left:0; width:100%; opacity:.45; }
  .intro{ transition:opacity .01s linear, visibility 0s linear .01s; }
}