:root{
 /* ——— PALETTE v2 · 29 August 2026 ———
    Four measured faults corrected. Every value below is computed in OKLCH, not adjusted by eye.
    v1 is preserved in the brand book with the reason each value changed. ——— */

 /* ——— ground: the stone he stands on ——— */
 --basalt:#0B0A08;          /* Jordanian basalt. Warm black, hue 86°. Unchanged. */
 --patina:#18373E;          /* v1 was #0B2A31, contrast 1.31 on basalt — a section change
                               nobody could see. Lifted to 1.56. Hue and chroma held. */
 --brand-teal:#1B3D46;      /* THE SEAL. Untouchable. */
 --accent-teal:#3E8599;     /* Now the interactive colour. Links, and nothing else. */
 /* ——— metal ——— */
 --gilt:#C6A15B;            /* Bronze before it turns. Rules, labels, numerals. */
 --gilt-deep:#AE8943;       /* Small-text gold. Not for use on patina — 3.90 there. */
 /* ——— lime plaster: the text ramp ———
    v1 stepped 1.42 / 1.37 / 1.31 — too close to tell apart — and chroma ROSE as it darkened,
    0.0198 → 0.0280, which is why lime-4 read muddy. v2 holds chroma at 0.020 across all four
    and steps evenly at 1.48. Every step is now visible; every token still clears AA. */
 --lime-1:#ECE4D7;          /* body            15.69:1 on basalt · 10.06 on patina */
 --lime-2:#C4BDB0;          /* secondary       10.60:1 ·  6.80 */
 --lime-3:#A29B8F;          /* tertiary         7.18:1 ·  4.61 */
 --lime-4:#847E71;          /* caption, fine    4.90:1 · not for use on patina */
 --rule:rgba(198,161,91,.24);
 --rule-faint:rgba(198,161,91,.13);
 /* ——— type ——— */
 --serif:'Newsreader',Georgia,'Times New Roman',serif;
 --arabic:'IBM Plex Sans Arabic',sans-serif;
 --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
 margin:0;background:var(--basalt);color:var(--lime-1);
 font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
 font-size:19px;line-height:1.65;letter-spacing:0;
 -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
 hanging-punctuation:first last;overflow-x:hidden
}
img{display:block;width:100%;height:auto}
.w{max-width:1180px;margin:0 auto;padding:0 26px;position:relative;z-index:2}
.n{max-width:34em}                       /* ≈ 66 characters. The reading column. */
.mono{font-family:var(--mono)}
/* Arabic is a peer, not a guest: its own family, its own leading, NEVER letterspaced */
.ar{font-family:var(--arabic);font-size:1.07em;font-weight:400;letter-spacing:normal!important}
.k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.28em;
   text-transform:uppercase;color:var(--gilt)}
h1,h2,h3{margin:0;font-weight:300;text-wrap:balance}
h2{font-size:clamp(31px,5vw,50px);line-height:1.1;letter-spacing:-.012em;margin:18px 0 28px}
p{margin:0 0 22px;text-wrap:pretty}
a{color:var(--gilt)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gilt);outline-offset:4px}
section{padding:96px 0;position:relative;overflow:hidden}
.lede{font-size:clamp(22px,2.5vw,28px);line-height:1.5;font-weight:300;color:var(--lime-1)}
.drop::first-letter{float:left;font-size:5.1em;line-height:.78;padding:.06em .1em 0 0;
   font-weight:300;color:var(--gilt)}
.teal{background:var(--patina)}
.ink{background:var(--basalt)}
.rule{height:1px;background:linear-gradient(90deg,var(--gilt),rgba(198,161,91,0));transform-origin:left}
.js .rule{transform:scaleX(0);transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.in .rule,.rule.in{transform:scaleX(1)}
/* ——— hero ——— */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:center}
.hero .bg{position:absolute;inset:-10% 0;will-change:transform}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.40;filter:contrast(1.08) saturate(.9)}
.hero:after{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(180deg,rgba(11,10,8,.74),rgba(11,10,8,.36) 42%,rgba(11,10,8,.96))}
.hero .sealbig{position:absolute;z-index:1;top:50%;left:50%;width:min(92vw,780px);
 transform:translate(-50%,-52%);opacity:.06}
.hero .sealmark{display:block;width:clamp(104px,27vw,156px);height:auto;margin:0 0 26px;
 filter:drop-shadow(0 3px 22px rgba(0,0,0,.7))}
.hero .in2{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(52px,11.6vw,124px);line-height:.95;letter-spacing:-.018em;font-weight:300}
.hero .arname{font-family:var(--arabic);font-size:clamp(22px,5vw,33px);line-height:1.7;
 color:var(--gilt);margin-top:14px;font-weight:300;letter-spacing:normal}
.hero .sub{margin-top:30px;max-width:31em;color:var(--lime-2);font-size:19px;line-height:1.62}
.cue{position:absolute;left:26px;bottom:26px;z-index:2;font-family:var(--mono);font-size:11.5px;
 letter-spacing:.24em;color:var(--lime-4);animation:bob 2.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
.anchor{position:fixed;top:20px;left:20px;width:38px;z-index:60;opacity:0;transition:opacity .6s;pointer-events:none}
.anchor.show{opacity:.9}
/* ——— seal furniture ——— */
.seal-open{width:74px;margin:0 0 18px}
.js .seal-open{opacity:0;transform:scale(1.3) rotate(-6deg);
 transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.in .seal-open,.seal-open.in{opacity:.95;transform:none}
.wm{position:absolute;z-index:0;pointer-events:none;opacity:.05}
.wm.right{right:-14%;top:6%;width:60%}
.wm.left{left:-16%;bottom:-6%;width:56%}
.stamp{display:flex;justify-content:center;padding:70px 0 10px}
.stamp svg{width:130px}
.js .stamp svg{opacity:0;transform:scale(1.35) rotate(-7deg);
 transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.stamp.in svg{opacity:.95;transform:none}
.seal-div{display:flex;justify-content:center;align-items:center;gap:26px;padding:20px 0}
.seal-div .ln{height:1px;flex:1;background:linear-gradient(90deg,rgba(198,161,91,0),rgba(198,161,91,.5),rgba(198,161,91,0))}
.seal-div svg{width:46px;flex:0 0 auto;opacity:.8}
.foot-seal{width:104px;margin-bottom:26px;opacity:.95}
/* ——— reveal ——— */
.js .hero .sealmark{opacity:0;transform:scale(1.18) rotate(-5deg);
 transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.js .hero .sealmark.in{opacity:1;transform:none}
.js .r{opacity:0;transform:translateY(30px);
 transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.js .r.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
figure{margin:0;overflow:hidden;background:#000}
.js figure img{transform:scale(1.09);transition:transform 1.7s cubic-bezier(.16,1,.3,1);filter:saturate(1.04)}
.js figure.in img{transform:scale(1)}
figcaption{font-family:var(--mono);font-size:13.5px;font-weight:400;letter-spacing:.03em;
 color:var(--lime-4);margin-top:13px;line-height:1.65;max-width:52ch}
.grid2{display:grid;grid-template-columns:1fr;gap:26px}
.grid3{display:grid;grid-template-columns:1fr;gap:24px}
.bleed{margin:48px 0}
.split{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
/* ——— the seven movements ——— */
.mv{padding:62px 0;border-top:1px solid var(--rule)}
.mv .no{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.24em;color:var(--gilt)}
.mv h3{font-size:clamp(24px,3.4vw,35px);font-weight:400;margin:14px 0 26px;max-width:22ch;
 line-height:1.16;letter-spacing:-.008em}
/* ——— press ——— */
.prow{display:grid;grid-template-columns:1fr;gap:6px;padding:24px 0;border-bottom:1px solid var(--rule-faint)}
.prow .src{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;color:var(--gilt)}
.prow .txt{font-size:18px;line-height:1.6;max-width:60ch;color:var(--lime-2)}
/* ——— the record ——— */
.row{display:grid;grid-template-columns:6em 1fr;gap:22px;padding:18px 0;border-bottom:1px solid var(--rule-faint)}
.row .y{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;
 color:var(--gilt);padding-top:5px}
.row .t{font-size:18px;line-height:1.6;max-width:52ch;color:var(--lime-2)}
.cols{display:grid;grid-template-columns:1fr;gap:32px;margin-top:32px}
.quote{font-size:clamp(22px,2.6vw,28px);line-height:1.44;font-weight:300;max-width:23ch;
 margin:0;color:var(--lime-1)}
.quote .s{display:block;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.1em;
 color:var(--gilt);margin-top:18px;text-transform:uppercase}
.btn{display:inline-block;font-family:var(--mono);font-size:13.5px;font-weight:500;letter-spacing:.16em;
 text-transform:uppercase;color:var(--basalt);background:var(--gilt);padding:17px 30px;
 text-decoration:none;transition:background .3s,color .3s}
.btn:hover{background:var(--lime-1)}
/* ——— footer ——— */
footer{background:var(--basalt);color:var(--lime-3);padding:80px 0 60px;position:relative;
 overflow:hidden;border-top:1px solid var(--rule)}
.fine a{color:var(--gilt-deep);text-decoration:none}
.fine a:hover{color:var(--gilt)}
.fine{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--lime-4);
 margin-top:36px;line-height:2.05}
/* ——— colophon: the studio's presence. Quiet, and there. ——— */
.colophon{margin-top:60px;padding-top:34px;border-top:1px solid var(--rule-faint);display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.colophon .role{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--lime-4);margin:0 0 20px}
.studio{display:inline-block;text-decoration:none;color:var(--gilt-deep);
 transition:color .4s ease}
.studio:hover{color:var(--gilt)}
.studio .nm{display:block;font-family:var(--serif);font-weight:400;font-size:19px;
 letter-spacing:.055em;line-height:1.1}
.studio .nm sup{font-size:.38em;letter-spacing:0;vertical-align:.55em;margin-left:.18em}
.studio .hh-mark{display:block;width:clamp(200px,58vw,320px);height:auto;opacity:.92;transition:opacity .4s ease}
.studio:hover .hh-mark{opacity:1}

.studio-lines{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-4);margin-top:22px;line-height:2.1}
.studio-lines a{color:var(--gilt-deep);text-decoration:none}
.studio-lines a:hover{color:var(--gilt)}
.colophon .logo-slot svg,.colophon .logo-slot img{width:auto;height:34px;display:block}
@media(min-width:820px){
 body{font-size:21px}
 .grid2{grid-template-columns:1fr 1fr;gap:36px}
 .grid3{grid-template-columns:repeat(3,1fr);gap:28px}
 .split{grid-template-columns:1fr 1fr;gap:56px}
 .cols{grid-template-columns:repeat(3,1fr);gap:40px}
 .prow{grid-template-columns:16em 1fr;gap:28px;align-items:baseline}
 section{padding:130px 0}
 .anchor{width:46px;top:26px;left:26px}
}
@media(prefers-reduced-motion:reduce){
 .r,figure img,.rule,.stamp svg,.seal-open,.hero .sealmark{
  transition:none!important;opacity:1!important;transform:none!important}
 .cue{animation:none}
 html{scroll-behavior:auto}
}


/* ─── navigation ─── */
.topbar{position:relative;z-index:50;background:var(--basalt);
 border-bottom:1px solid var(--rule-faint)}
.topbar.over{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:none}
.topbar.over .tb-seal{display:none}
.topbar.over .tb-links{margin-left:auto}
.topbar .w{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
 padding-top:16px;padding-bottom:16px}
.tb-seal{flex:0 0 auto;line-height:0}
.tb-mark{width:38px;height:auto;display:block}
.tb-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto}
.tb-links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--lime-3);text-decoration:none;transition:color .3s;padding:4px 0}
.tb-links a:hover,.tb-links a.here{color:var(--gilt)}
.topbar.over .tb-links a{color:var(--lime-2)}
/* ─── page heads on the inner pages ─── */
.pagehead{padding:64px 0 0;position:relative}
.pagehead + section{padding-top:56px}
.pagehead h1{font-size:clamp(38px,7.4vw,82px);line-height:1.0;letter-spacing:-.018em;
 font-weight:300;margin:16px 0 0}
.pagehead .ar-h{font-family:var(--arabic);font-size:clamp(21px,4.4vw,30px);color:var(--gilt);
 line-height:1.7;font-weight:300;margin-top:12px;letter-spacing:normal}
.pagehead .lede{margin-top:28px;max-width:32em;color:var(--lime-2)}
/* ─── the four rooms ─── */
.rooms{display:grid;grid-template-columns:1fr;gap:2px;margin:44px 0 10px;background:var(--rule-faint)}
.room{display:block;text-decoration:none;background:var(--basalt);padding:0 0 26px;
 transition:background .4s ease}
.teal .room{background:var(--patina)}
.room:hover{background:#141210}
.room-img{display:block;overflow:hidden;aspect-ratio:16/10;margin-bottom:20px}
.room-img img{width:100%;height:100%;object-fit:cover;object-position:center 32%;filter:saturate(.95) contrast(1.04);
 transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.room:hover .room-img img{transform:scale(1.05)}
.room-ar{display:block;font-family:var(--arabic);font-size:22px;color:var(--gilt);
 line-height:1.6;padding:0 20px;letter-spacing:normal}
.room-en{display:block;font-size:25px;font-weight:300;color:var(--lime-1);padding:4px 20px 0;
 letter-spacing:-.01em}
.room-line{display:block;font-family:var(--mono);font-size:12px;line-height:1.7;
 color:var(--lime-4);padding:12px 20px 0;letter-spacing:.02em}
/* ─── onward links ─── */
.seedeeper{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:44px;padding-top:26px;
 border-top:1px solid var(--rule-faint)}
.seedeeper a{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--gilt-deep);text-decoration:none;transition:color .3s}
.seedeeper a:hover{color:var(--gilt)}
/* ─── generated design material, always declared ─── */
.genlabel{position:absolute;right:12px;bottom:12px;z-index:3;font-family:var(--mono);font-size:10px;
 font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--lime-1);
 background:rgba(11,10,8,.72);border:1px solid rgba(198,161,91,.5);padding:6px 10px;
 backdrop-filter:blur(3px)}
figure.gen,.gen{position:relative}
figcaption .gen-note{display:block;color:var(--gilt-deep);margin-top:5px}
/* ─── honest gaps ─── */
.pending{font-family:var(--mono);font-size:12.5px;line-height:1.95;color:var(--lime-4);
 border-left:2px solid var(--gilt-deep);padding:2px 0 2px 20px;margin-top:44px;max-width:56ch}
.ctline{font-size:17px;line-height:1.6;color:var(--lime-2);margin:0 0 10px}
.ctline a{color:var(--gilt);text-decoration:none}
.ctline a:hover{color:var(--lime-1)}

/* ═══ hero, rebuilt ═══ */
.hero{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.hero .in2{margin-top:auto;padding-top:112px;padding-bottom:38px}
.evidence{margin-top:auto}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.78;
 filter:contrast(1.06) saturate(.94)}
.hero:after{display:none}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:
  linear-gradient(180deg,rgba(11,10,8,.80) 0%,rgba(11,10,8,.30) 34%,rgba(11,10,8,.55) 68%,rgba(11,10,8,.97) 100%),
  linear-gradient(96deg,rgba(11,10,8,.90) 0%,rgba(11,10,8,.62) 40%,rgba(11,10,8,.10) 78%)}
.hero .sealbig{opacity:.045}
/* the stamp presses in, and blooms once */
.stampwrap{position:relative;display:inline-block;margin-bottom:26px}
.stampwrap .bloom{position:absolute;left:50%;top:50%;width:180%;aspect-ratio:1;border-radius:50%;
 transform:translate(-50%,-50%) scale(.4);pointer-events:none;opacity:0;
 background:radial-gradient(circle,rgba(198,161,91,.34) 0%,rgba(198,161,91,0) 68%)}
.hero .sealmark{margin:0;filter:drop-shadow(0 4px 30px rgba(0,0,0,.85))}
/* the name arrives from behind its own baseline */
.hero h1{font-size:clamp(56px,12.4vw,138px);line-height:.94;letter-spacing:-.02em;font-weight:300}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.03em}
.hero h1 .ln>span{display:block}
.hrule{height:1px;width:min(340px,62vw);margin:26px 0 0;transform-origin:left;
 background:linear-gradient(90deg,var(--gilt),rgba(198,161,91,0))}
.hero .arname{margin-top:18px}
.hero .sub{margin-top:26px;max-width:34em;color:var(--lime-1);
 font-size:clamp(19px,2.3vw,25px);line-height:1.5;font-weight:300}
/* the evidence strip: the argument, in the hero, without an adjective */
.evidence{position:relative;z-index:2;width:100%;
 border-top:1px solid rgba(198,161,91,.28);
 background:linear-gradient(180deg,rgba(11,10,8,.35),rgba(11,10,8,.86) 60%)}
.ev-row{display:flex;flex-wrap:wrap;gap:18px 40px;padding:20px 0 26px}
.ev{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:11.5px;
 line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--lime-3);max-width:30ch}
.ev b{font-family:var(--serif);font-size:23px;font-weight:400;letter-spacing:-.01em;
 color:var(--gilt);text-transform:none;line-height:1}
@media(min-width:820px){
 .ev-row{padding:24px 0 30px;gap:22px 56px;flex-wrap:nowrap}
 .ev{font-size:11px}
 .ev b{font-size:27px}
}
/* motion, as progressive enhancement only */
/* ═══ the seal, pressed ═══
   A seal is not a logo that fades in. It is an object pressed onto a surface, and the motion
   comes from that: it arrives from above the plane with a blur, the press bites past its own
   size, rebounds, and settles. The ink soaks outward from the centre rather than fading up,
   and a single ring of pressure leaves the surface once and dies.

   Then it stops, and stays stopped. Most of a stamp's life is being still. */
.js .hero .sealmark{opacity:0;transform:scale(1.42);filter:blur(2.6px)
  drop-shadow(0 4px 30px rgba(0,0,0,.85));
 clip-path:circle(0% at 50% 50%);
 transition:opacity .28s ease,
            transform 1.05s cubic-bezier(.14,1.5,.32,1),
            filter .4s ease,
            clip-path 1.15s cubic-bezier(.2,.85,.3,1)}
.js .hero .sealmark.in{opacity:1;transform:none;
 filter:blur(0) drop-shadow(0 4px 30px rgba(0,0,0,.85));
 clip-path:circle(78% at 50% 50%)}
.js .stampwrap.in .bloom{animation:press 1.6s cubic-bezier(.16,1,.3,1) .34s 1 both}
@keyframes press{0%{opacity:0;transform:translate(-50%,-50%) scale(.42)}
 22%{opacity:.62}100%{opacity:0;transform:translate(-50%,-50%) scale(1.72)}}
.js .hero h1 .ln>span{transform:translateY(105%);
 transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.js .hero h1.in .ln:nth-child(1)>span{transition-delay:.62s}
.js .hero h1.in .ln:nth-child(2)>span{transition-delay:.74s}
.js .hero h1.in .ln>span{transform:none}
.js .hrule{transform:scaleX(0);transition:transform 1.3s cubic-bezier(.16,1,.3,1) .95s}
.js .hrule.in{transform:scaleX(1)}
.js .hero .k,.js .hero .arname,.js .hero .sub,.js .evidence{opacity:0;transform:translateY(18px);
 transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.js .hero .k.in{opacity:1;transform:none;transition-delay:.5s}
.js .hero .arname.in{opacity:1;transform:none;transition-delay:1.05s}
.js .hero .sub.in{opacity:1;transform:none;transition-delay:1.18s}
.js .evidence.in{opacity:1;transform:none;transition-delay:1.35s}
@media(prefers-reduced-motion:reduce){
 .js .hero .sealmark{clip-path:none;filter:none}
 .js .hero .sealmark,.js .hero h1 .ln>span,.js .hrule,.js .hero .k,
 .js .hero .arname,.js .hero .sub,.js .evidence,.js .stampwrap .bloom{
  transition:none!important;opacity:1!important;transform:none!important}
 .js .stampwrap .bloom{opacity:0!important}
}

/* ═══ Arabic edition — RTL. The Arabic is not a translation layer, it is the other half. ═══ */
:root{--naskh:'Noto Naskh Arabic','IBM Plex Sans Arabic',serif}
[dir="rtl"]{direction:rtl}
[dir="rtl"] body{font-family:var(--naskh);font-size:22px;line-height:1.95;letter-spacing:normal;
 font-weight:500}
/* Naskh at 400 on a black ground reads thin — the strokes recede. 500 is the floor here,
   and the leading comes down to 1.95 so a paragraph holds together as a block. */
[dir="rtl"] p{font-weight:500}
[dir="rtl"] .mv p{font-size:22px;line-height:1.95;color:var(--lime-1)}
[dir="rtl"] .n,[dir="rtl"] .w .n{max-width:40ch}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .lede,[dir="rtl"] .p-name,
[dir="rtl"] .pl-n,[dir="rtl"] .pagehead h1{font-family:var(--naskh);letter-spacing:normal;
 line-height:1.5;font-weight:300}
[dir="rtl"] .pagehead h1{font-size:clamp(38px,7.4vw,76px);line-height:1.3;font-weight:600}
[dir="rtl"] .lede{line-height:1.95;font-size:clamp(22px,3vw,28px);font-weight:400}
/* Labels. In Latin these are mono, uppercase and tracked out — three devices that mark a string
   as a label without needing size. Arabic has none of them: no capitals, and tracking is
   forbidden because it breaks the joins. An Arabic label must earn its status with size, weight
   and colour instead. 13 px did none of that. */
[dir="rtl"] .p-role,[dir="rtl"] .pl-k,[dir="rtl"] .pl-go,[dir="rtl"] .dl-k,
[dir="rtl"] .role,[dir="rtl"] .chip,[dir="rtl"] .btn{letter-spacing:normal;
 font-family:var(--naskh);font-size:17px;font-weight:600;text-transform:none}
[dir="rtl"] .k{letter-spacing:normal;font-family:var(--naskh);font-size:19px;font-weight:600;
 text-transform:none;color:var(--gilt)}
[dir="rtl"] .dl-n,[dir="rtl"] .pl-n{font-weight:600}
[dir="rtl"] .dl-m{font-family:var(--naskh);font-size:16px;letter-spacing:normal}
[dir="rtl"] .p-line,[dir="rtl"] .pl-a,[dir="rtl"] .callnote,[dir="rtl"] .ctline,
[dir="rtl"] .fine,[dir="rtl"] .pending,[dir="rtl"] figcaption{font-family:var(--naskh);
 letter-spacing:normal;line-height:1.9;font-size:17px;font-weight:500}
[dir="rtl"] .p-val{display:block;direction:ltr;text-align:right;unicode-bidi:embed;
 font-family:var(--mono)}
[dir="rtl"] .num{direction:ltr;unicode-bidi:embed;font-family:var(--mono);display:inline-block}
[dir="rtl"] .tb-links{margin-left:0;margin-right:auto}
[dir="rtl"] .hrule,[dir="rtl"] .rule{transform-origin:right}
[dir="rtl"] .hero h1{font-size:clamp(44px,10.5vw,104px);line-height:1.42;letter-spacing:normal;
 font-family:var(--naskh);font-weight:500}
[dir="rtl"] .hero .sub{font-size:clamp(19px,2.2vw,24px);line-height:2.0;font-weight:400}
[dir="rtl"] .ev{letter-spacing:normal;text-transform:none;font-family:var(--naskh);
 font-size:17px;line-height:1.8;font-weight:500}
[dir="rtl"] .ev b{font-family:var(--naskh);font-size:25px;font-weight:600}
[dir="rtl"] .mv .no{letter-spacing:normal;font-family:var(--naskh);font-size:20px;
 font-weight:600;text-transform:none;color:var(--gilt);margin-bottom:.6em}
[dir="rtl"] .quote .s{letter-spacing:normal;font-family:var(--naskh);font-size:16px;
 text-transform:none}
[dir="rtl"] .seedeeper a{font-size:18px;font-weight:600;letter-spacing:normal}
[dir="rtl"] .mv h3{font-size:clamp(30px,5.8vw,42px);line-height:1.5;font-weight:600;
 letter-spacing:normal}
[dir="rtl"] h2{font-size:clamp(33px,6.4vw,50px);line-height:1.45;font-weight:600}
[dir="rtl"] .room-en{font-family:var(--naskh);font-size:28px;font-weight:600}
[dir="rtl"] .room-line{font-family:var(--naskh);font-size:18px;letter-spacing:normal;
 line-height:1.85;font-weight:500}
[dir="rtl"] .seedeeper a{font-family:var(--arabic);letter-spacing:normal;font-size:14px;
 text-transform:none}
.ltr{direction:ltr;unicode-bidi:embed;display:inline-block}
[dir="rtl"] .note,[dir="rtl"] .pending{border-left:none;border-right:2px solid var(--gilt);
 padding:2px 20px 2px 0}
[dir="rtl"] .row{grid-template-columns:6em 1fr}
.langswitch{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--gilt);text-decoration:none;white-space:nowrap;border:1px solid rgba(198,161,91,.42);
 padding:6px 11px;transition:background .3s,color .3s}
.langswitch:hover{background:var(--gilt);color:var(--basalt)}
.langswitch.now{background:var(--gilt);color:var(--basalt);border-color:var(--gilt);
 pointer-events:none}
.tb-links{align-items:center}
.langset{display:flex;gap:7px;margin-left:16px;padding-left:16px;
 border-left:1px solid var(--rule-faint)}
[dir="rtl"] .langset{margin:0 16px 0 0;padding:0 16px 0 0;border-left:none;
 border-right:1px solid var(--rule-faint)}
@media(max-width:640px){ .langset{margin-left:0;padding-left:0;border-left:none;
 width:100%;margin-top:8px} }
[dir="rtl"] .langswitch{font-family:var(--arabic);letter-spacing:normal;font-size:14px}
/* ═══ curator downloads ═══ */
.dl{display:grid;grid-template-columns:1fr;gap:2px;margin-top:26px;background:var(--rule-faint)}
.dlitem{display:block;background:var(--basalt);padding:24px 22px;text-decoration:none;
 transition:background .4s ease}
.teal .dlitem{background:var(--patina)}
.dlitem:hover{background:#141210}
.dl-k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em;
 text-transform:uppercase;color:var(--gilt-deep)}
.dl-n{display:block;font-size:21px;font-weight:300;color:var(--lime-1);margin-top:12px;
 letter-spacing:-.008em}
.dl-m{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
 color:var(--lime-4);margin-top:10px}
@media(min-width:820px){ .dl{grid-template-columns:1fr 1fr} }

/* ─── the overture: struck, not stacked ─── */
.ov{max-width:30ch}
.ov p{margin:0 0 1.15em}
.ov .l1{font-size:clamp(29px,5.4vw,56px);line-height:1.24;font-weight:300;
 letter-spacing:-.015em;color:var(--lime-1);margin-bottom:.55em}
.ov .l2{font-size:clamp(21px,2.9vw,31px);line-height:1.5;font-weight:300;color:var(--lime-2);
 margin-bottom:1.5em}
.ov .l3{font-size:clamp(18px,2.1vw,23px);line-height:1.7;color:var(--lime-3);margin-bottom:1.5em}
.ov-gap{height:clamp(44px,8vw,92px)}
.ov-break{padding:clamp(50px,9vw,104px) 0}
.sealmini{width:34px;flex:0 0 auto;opacity:.75}
.turn{font-size:clamp(23px,3.2vw,34px);line-height:1.4;font-weight:300;color:var(--lime-1);
 letter-spacing:-.01em;margin:0 0 34px;max-width:24ch}
/* ─── the opening ─── */
.ov{max-width:32ch}
.ov .strike{font-size:clamp(29px,5.4vw,56px);line-height:1.24;font-weight:300;
 letter-spacing:-.015em;color:var(--lime-1);margin:0 0 1.5em}
.ov .mid{font-size:clamp(21px,2.9vw,31px);line-height:1.5;font-weight:300;color:var(--lime-2);
 margin:0 0 1.5em}
.ov .body{font-size:clamp(18px,2.1vw,23px);line-height:1.75;color:var(--lime-3);margin:0 0 1.5em}
.ov .turn{font-size:clamp(23px,3.2vw,34px);line-height:1.42;font-weight:300;color:var(--lime-1);
 letter-spacing:-.01em;margin:0 0 1.6em;max-width:26ch}
.ov .beat{font-size:clamp(24px,3.4vw,36px);line-height:1.35;font-weight:300;color:var(--lime-1);
 letter-spacing:-.012em;margin:2.1em 0 2.4em;max-width:20ch}
.ov .close{font-size:clamp(22px,3.1vw,33px);line-height:1.45;font-weight:300;color:var(--lime-3);
 letter-spacing:-.01em;margin:0}
.ov .close .last{color:var(--lime-1);display:inline-block;margin-top:.35em}
.ov-break{padding:clamp(52px,9vw,110px) 0}
.sealmini{width:34px;flex:0 0 auto;opacity:.75}
/* Arabic: the body runs at 21px, so headings must clear it by a wide margin */
[dir="rtl"] .ov{max-width:28ch}
[dir="rtl"] .ov .strike{font-size:clamp(32px,7vw,56px);line-height:1.5;font-weight:600;
 letter-spacing:normal}
[dir="rtl"] .ov .mid{font-size:clamp(22px,3.4vw,30px);line-height:1.85;font-weight:400}
[dir="rtl"] .ov .body{font-size:clamp(18px,2.1vw,22px);line-height:2.05}
[dir="rtl"] .ov .turn{font-size:clamp(27px,5vw,36px);line-height:1.65;font-weight:600;
 letter-spacing:normal;max-width:24ch}
[dir="rtl"] .ov .beat{font-size:clamp(28px,5.2vw,38px);line-height:1.6;font-weight:600;
 letter-spacing:normal;max-width:18ch}
[dir="rtl"] .ov .close{font-size:clamp(24px,4vw,32px);line-height:1.75;font-weight:500;
 letter-spacing:normal}
[dir="rtl"] .turn{font-size:clamp(21px,3vw,29px);line-height:1.8;font-weight:500;max-width:22ch}

/* ─── the five rules ─── */
.rules-list{list-style:none;margin:34px 0 0;padding:0;counter-reset:r}
.rules-list li{counter-increment:r;position:relative;padding:0 0 0 46px;margin:0 0 22px;
 font-size:clamp(21px,3vw,29px);line-height:1.4;font-weight:300;color:var(--lime-1);
 letter-spacing:-.01em}
.rules-list li:before{content:counter(r);position:absolute;left:0;top:.25em;
 font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gilt)}
.coda{font-size:clamp(24px,3.6vw,38px);line-height:1.3;font-weight:300;color:var(--gilt);
 letter-spacing:-.012em;margin:44px 0 0;max-width:20ch}
.filmcard{display:block;margin-top:40px;padding:24px;background:var(--basalt);
 border:1px solid var(--rule);text-decoration:none;max-width:30em;transition:background .4s}
.teal .filmcard{background:var(--patina)}
.filmcard:hover{background:#141210}
.fc-k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em;
 text-transform:uppercase;color:var(--gilt-deep)}
.fc-n{display:block;font-size:23px;font-weight:300;color:var(--lime-1);margin-top:12px}
.fc-go{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--gilt);margin-top:16px}
[dir="rtl"] .rules-list li{padding:0 46px 0 0;font-size:clamp(24px,4.4vw,34px);line-height:1.75;
 font-weight:500;letter-spacing:normal}
[dir="rtl"] .rules-list li:before{left:auto;right:0;font-family:var(--naskh);font-size:17px;
 font-weight:600;letter-spacing:normal}
[dir="rtl"] .coda{font-size:clamp(27px,5vw,40px);line-height:1.6;font-weight:600;
 letter-spacing:normal;max-width:18ch}
[dir="rtl"] .fc-k,[dir="rtl"] .fc-go{font-family:var(--naskh);font-size:17px;font-weight:600;
 letter-spacing:normal;text-transform:none}
[dir="rtl"] .fc-n{font-weight:600}

/* ═══ typographic corrections, 29 Aug 2026 ═══
   Measured, not adjusted by eye. Every number below replaces one that was wrong. */

/* 1 · MEASURE. `.mv p` had no max-width and ran to 107 characters at 1440px — the seven
   movements are the longest reading passage on the site and were the worst set. 45–75 is the
   readable band; 32em at 21px lands at about 64. */
.mv p,.n p,.n{max-width:32em}
.mv .no,.mv h3{max-width:none}

/* 2 · RAG AND WIDOWS. Ragged-right at this measure produces rivers and one-word last lines. */
h1,h2,h3,.strike,.turn,.beat,.close,.lede{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}

/* 3 · OPTICAL SIZE. Newsreader carries an opsz axis 6–72. Left to the browser it is applied
   inconsistently across engines; state it. */
body{font-optical-sizing:auto}
.hero h1{font-variation-settings:'opsz' 72}
figcaption,.k,.fine{font-variation-settings:'opsz' 12}

/* 4 · TRACKING SHOULD SCALE WITH SIZE, INVERSELY. The same -0.018em was applied at 29px and
   at 138px. Display type needs more negative tracking, not the same. */
.hero h1{letter-spacing:-.032em}
h2,.strike{letter-spacing:-.022em}
.mv h3,.turn,.beat{letter-spacing:-.014em}
.lede{letter-spacing:-.006em}

/* 5 · HIERARCHY IN THE MOVEMENTS. The heading was 24px/400 against body 19px/400 — same
   weight, ratio 1.26. Nothing but size, and not enough of it. */
.mv h3{font-size:clamp(27px,3.8vw,40px);line-height:1.14}

/* 6 · LABEL TRACKING. 0.28em at 12px begins to break the word into letters. */
.k,.p-role,.pl-k,.dl-k,.fc-k{letter-spacing:.2em}

/* ═══ palette v2 consequences ═══ */
/* The lifted patina costs contrast for the two darkest tokens. Rather than trust everyone to
   remember, substitute automatically on that ground. */
.teal .fine,.teal figcaption,.teal .pl-a,.teal .p-line,.teal .dl-m,
.teal [style*="--lime-4"]{color:var(--lime-3)}
.teal .gilt-deep,.teal .pl-k,.teal .dl-k,.teal .fc-k{color:var(--gilt)}

/* Links are now accent-teal and nothing else is. Before this, every interactive element and
   every rule, label and numeral was gilt — the eye could not tell what was clickable. */
.n a,.mv a,.prow a,p a,li a{color:var(--accent-teal);text-decoration:none;
 border-bottom:1px solid rgba(62,133,153,.45);transition:border-color .3s,color .3s}
.n a:hover,.mv a:hover,.prow a:hover,p a:hover,li a:hover{color:var(--lime-1);
 border-bottom-color:var(--lime-1)}

/* ═══ THE ARABIC GUARD ═══
   Tracking breaks the joins in Arabic and `uppercase` is a no-op that only signals nobody
   checked. Part 13.5 states this as absolute, and it has still been broken five times on this
   project — in the movement labels, the captions, the review furniture, and twice in the
   language switch. Stating a rule has not been enough. This enforces it.

   Any element carrying lang="ar", or sitting inside one, cannot receive tracking or a case
   transform, whatever a Latin rule tries to inherit onto it. */
/* Scoped to `body [lang="ar"]`, not `[lang="ar"]`. The root element carries lang="ar" on the
   Arabic pages, so an unscoped guard made every element on the page a descendant — and set the
   English, French and Spanish buttons in a Naskh. The guard must catch explicitly-marked Arabic
   strings only, never a whole document by inheritance. */
body [lang="ar"],body [lang="ar"] *{letter-spacing:normal!important;text-transform:none!important;
 font-family:var(--naskh)!important}
.langswitch,[dir="rtl"] .langswitch{font-family:var(--mono);letter-spacing:.14em}
[dir="rtl"] .langswitch[lang="ar"]{font-family:var(--naskh);letter-spacing:normal}
.langswitch[lang="ar"]{font-size:15px;font-weight:600;padding:5px 12px}

/* ─── colophon: the studio signature ─── */
.colophon{margin-top:54px;padding-top:30px;border-top:1px solid var(--rule-faint);
 display:flex;flex-direction:column;align-items:center;text-align:center}
.colophon .role{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;
 text-transform:uppercase;color:var(--lime-4);margin:0 0 18px}
.colophon .studio{display:block;text-decoration:none;opacity:.92;transition:opacity .4s}
.colophon .studio:hover{opacity:1}
/* A designer credit should be smaller than the mark of the artist whose site it is. The primary
   lockup at 273–330px was three times the size of his seal, and it was only that large because
   its drawn tagline collapses below 250px. The package's own answer for small contexts is
   07_SMALL-SIZE, which drops STUDIO and the tagline and keeps the star and the name. Using it
   halves the height and puts the credit back in proportion. */
.hh-lockup{display:block;width:clamp(132px,30vw,156px);height:auto;margin:0 auto}
.studio-url{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
 color:var(--gilt-deep);margin-top:14px}
.colophon .studio:hover .studio-url{color:var(--lime-1)}
[dir="rtl"] .colophon .role{font-family:var(--naskh);font-size:16px;font-weight:600;
 letter-spacing:normal;text-transform:none}

/* English content inside an RTL page: give it back its own direction and its own face, or the
   bidi algorithm moves the full stops and the Naskh override sets Latin in a Naskh. */
.foot-en{direction:ltr;text-align:left}
.foot-en *{font-family:var(--serif)}
.foot-en .k,.foot-en .fine,.foot-en .role,.foot-en .p-val,.foot-en .pl-a,.foot-en .pl-k,
.foot-en .pl-go,.foot-en .p-line,.foot-en .callnote,.foot-en .studio-url,.foot-en .chip,
.foot-en .dl-k,.foot-en .dl-m{font-family:var(--mono)}
.foot-en .ar{font-family:var(--naskh);direction:rtl;unicode-bidi:isolate}
.foot-en .k,.foot-en .role,.foot-en .p-role,.foot-en .pl-k,.foot-en .dl-k{
 letter-spacing:.2em;text-transform:uppercase;font-size:11px}
.foot-en .fine,.foot-en .p-line,.foot-en .pl-a,.foot-en .callnote{font-size:13.5px;
 letter-spacing:.02em;font-weight:400;line-height:1.75}

/* The ™ is now drawn into the artwork, built from her own T and M at their drawn size.
   The CSS stand-in that stood here is gone. See 13_TRADEMARK/READ-ME.md. */
html{-webkit-text-size-adjust:100%}

/* ═══ touch feedback ═══
   Every interactive state on this site was written as :hover. On a phone there is no hover —
   the finger arrives and leaves — so nothing anywhere gave feedback when pressed. */
.langswitch:hover,.langswitch:active,.langswitch:focus-visible{
 background:var(--gilt);color:var(--basalt);outline:none}
.chip:hover,.chip:active,.chip:focus-visible{background:var(--gilt);color:var(--basalt);outline:none}
.place:active,.dlitem:active,.filmcard:active,.room:active{background:#171410}
.btn:active{opacity:.82}
a{-webkit-tap-highlight-color:rgba(198,161,91,.22)}
/* Without hover, a button has to look like one standing still. */
@media (hover:none){
 .langswitch{border-color:rgba(198,161,91,.62)}
 .chip{border-color:rgba(198,161,91,.62)}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-teal);outline-offset:3px}

/* ═══ hero: his newest work standing on basalt ═══
   Two layers. The ground is a generated basalt texture — Class A, nothing real in it, labelled
   in the colophon. The work on it is a camera file he sent in August: Class D, untouched.
   Basalt standing on basalt, which is what the piece is. */
.hero .bg-tex img{opacity:.42;object-fit:cover;filter:contrast(1.14) saturate(.78) brightness(.9)}
.hero .bg-work{display:flex;align-items:flex-end;justify-content:flex-end;
 padding:0 clamp(6px,3vw,64px) 0 0}
.hero .bg-work img{width:auto;height:100%;max-width:52%;object-fit:contain;
 object-position:center right;mix-blend-mode:screen;
 filter:brightness(1.22) contrast(1.06) saturate(1.05)}
.hero .bg-work{align-items:center}
/* the veil has to do more work now: the type sits over stone, not over a dark room */
.hero-veil{background:
  linear-gradient(180deg,rgba(11,10,8,.90) 0%,rgba(11,10,8,.42) 26%,rgba(11,10,8,.50) 60%,rgba(11,10,8,.98) 100%),
  linear-gradient(96deg,rgba(11,10,8,.97) 0%,rgba(11,10,8,.88) 30%,rgba(11,10,8,.34) 58%,rgba(11,10,8,0) 78%)}
[dir="rtl"] .hero .bg-work{justify-content:flex-start;padding:0 0 0 clamp(6px,3vw,64px)}
[dir="rtl"] .hero .bg-work img{object-position:bottom left}
[dir="rtl"] .hero-veil{background:
  linear-gradient(180deg,rgba(11,10,8,.90) 0%,rgba(11,10,8,.42) 26%,rgba(11,10,8,.50) 60%,rgba(11,10,8,.98) 100%),
  linear-gradient(264deg,rgba(11,10,8,.97) 0%,rgba(11,10,8,.88) 30%,rgba(11,10,8,.34) 58%,rgba(11,10,8,0) 78%)}
/* On a phone the piece is 1:2.4 — taller than the space it has, and the hero already carries a
   name, a rule, an Arabic line, three lines of prose and the evidence strip. Something had to
   go. Cropping a sculpture in half is the one thing this site cannot do, so on a phone the
   hero is the name on stone, and the work leads its own section further down. */
@media(max-width:620px){
 .hero .bg-work{display:none}
 .hero .bg-tex img{opacity:.38}
 .hero-veil{background:
   linear-gradient(180deg,rgba(11,10,8,.88) 0%,rgba(11,10,8,.40) 26%,rgba(11,10,8,.56) 66%,rgba(11,10,8,.99) 100%)}
}

/* ═══ the textures, second attempt ═══
   The first attempt used `mix-blend-mode: screen`. Screen adds the light present in the source,
   and these textures have almost none — mean luminance 0.017 for the paper, 0.021 for the
   basalt. They were switched off in all but name. The client could not see them because they
   were not there.

   Normal blending, and the opacity set from measurement rather than taste. The rule is that the
   brightest pixel of the texture must still leave body text above 4.5:1, so the ceilings below
   are hard: paper 0.55, patina 0.14, plaster 0.04. Above those the type starts to fail over the
   texture's own highlights. */
.tex-under{position:relative;isolation:isolate}
.tex-under > *{position:relative;z-index:1}
.tex-under:after{content:"";position:absolute;inset:0;z-index:0;background-size:cover;
 background-position:center;pointer-events:none}
.tex-paper:after{background-image:url(../img/tex-paper.jpg);opacity:.55}
.tex-patina:after{background-image:url(../img/tex-patina.jpg);opacity:.20}
/* Plaster is a light texture on a dark ground, so its ceiling is low — but 0.04 was
   invisible, which is not a ceiling, it is an absence. 0.09 reads, and body text over
   its brightest point still clears 5.4:1. */
.tex-plaster:after{background-image:url(../img/tex-plaster.jpg);opacity:.09}
.tex-wash:after{background-image:url(../img/tex-wash.jpg);opacity:.32}

/* ═══ breathing ═══
   Cycles are set at breath length — five to eight and a half seconds. A 26-second cycle, which
   is where this started, is not breathing but drift: nothing changes enough between one glance
   and the next to register.

   The ambient breath is carried by OPACITY, not scale. Scaling a texture whose mean luminance is
   0.02 over a near-black ground changes almost nothing; there is no light in it to move.

   ENTRANCE carries a blur as well as a rise. Coming into focus is the one motion the eye cannot
   miss, and on a photograph it reads as the image arriving rather than as an effect. */

/* ── entrance ── */
.js figure img{will-change:transform,filter}
.js .bleed figure img,.js .grid2 figure img,.js .grid3 figure img{
 transform:scale(1.14);filter:blur(7px);
 transition:transform 1.7s cubic-bezier(.14,.75,.2,1),filter 1.25s ease}
.js .bleed figure.in img,.js .grid2 figure.in img,.js .grid3 figure.in img{
 transform:scale(1);filter:blur(0)}
.js .rule,.js .foot-div{transform:scaleX(0);transform-origin:left center;
 transition:transform 1.2s cubic-bezier(.22,.8,.3,1)}
.js .rule.in,.js .foot-div.in{transform:scaleX(1)}
[dir="rtl"] .js .rule,[dir="rtl"] .js .foot-div{transform-origin:right center}
.js figcaption{opacity:0;transform:translateY(10px);
 transition:opacity .8s ease .4s,transform .8s cubic-bezier(.2,.8,.3,1) .4s}
.js figure.in figcaption{opacity:1;transform:none}

/* ── ambient ── */
@keyframes breathe-seal{0%,100%{opacity:.58;transform:scale(.985)}
                        50%{opacity:1;transform:scale(1.055)}}
@keyframes breathe-ground{0%,100%{transform:scale(1) translateY(0);opacity:calc(var(--tex-o,.3)*.55)}
                          50%{transform:scale(1.05) translateY(-10px);opacity:var(--tex-o,.3)}}
@keyframes breathe-hero{0%,100%{transform:scale(1);opacity:.26}
                        50%{transform:scale(1.06);opacity:.64}}
@keyframes breathe-rule{0%,100%{opacity:.35} 50%{opacity:1}}
.js .foot-seal{animation:breathe-seal 5.4s ease-in-out infinite}
.js .tex-under:after{animation:breathe-ground 8.5s ease-in-out infinite}
.js .tex-paper{--tex-o:.55} .js .tex-plaster{--tex-o:.09} .js .tex-patina{--tex-o:.20}
.js .hero .bg-tex img{animation:breathe-hero 7.5s ease-in-out infinite}
.js .seal-div .ln{animation:breathe-rule 6.5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
 .js .bleed figure img,.js .grid2 figure img,.js .grid3 figure img,
 .js .rule,.js .foot-div,.js figcaption{opacity:1;transform:none;filter:none;transition:none}
 .js .foot-seal,.js .tex-under:after,.js .hero .bg-tex img,.js .seal-div .ln{animation:none}
}

/* ═══ restored 30 Aug — two blocks were destroyed by an index-based edit ═══
   Both were casualties of replacing a CSS section by slicing between comment markers: the
   Instagram rule and the tagline rule sat between the markers and went with them. The symptom
   was an Instagram icon the width of the page, because with no size rule an inline SVG fills
   its container. */

/* Instagram: the mark, not the word. */
.iglink{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
 border-bottom:1px solid rgba(198,161,91,.4);padding-bottom:2px;line-height:1.2}
.iglink svg.ig{width:1.05em;height:1.05em;min-width:1.05em;flex:0 0 auto;display:block}
.iglink span{text-decoration:none}
.iglink:hover,.iglink:active{border-bottom-color:var(--lime-1)}
[dir="rtl"] .iglink{direction:ltr;unicode-bidi:isolate}

/* The tagline, drawn artwork, sized on its own so the lockup can stay small. */
/* The tagline sits at 88% of the lockup width and close under it, so it reads as part of the
   signature rather than as a caption drifting below one. In the package's own primary lockup the
   tagline is set at roughly 90% of the wordmark width, which is the proportion being restored. */
/* The tagline artwork is 768.59 × 17.9 — a 43:1 strip. Its letter height is width ÷ 43, so the
   only way to make it readable is to make it wide. At 132px, matching the lockup, the caps came
   out 3.2px. At 230px they are 5.4px. It ends up wider than the name above it, which is correct:
   in the package's own primary lockup the tagline is the widest element too. */
.hh-tagline{display:block;width:clamp(196px,52vw,238px);height:auto;margin:9px auto 0;opacity:.92}
.colophon .studio:hover .hh-tagline{opacity:1}

/* ═══ documentary video ═══
   A still photograph cannot carry scale. A crane lifting the work, and a man sitting inside it,
   can. This is the only moving image on the site and it sits on the page about work in place,
   because that is what it shows: work being put in place.

   Muted, looping, inline, no controls, no sound, no autoplay for anyone who has asked their
   device to stop things moving. */
.vidfig{margin:0}
.doc-video{display:block;width:100%;height:auto;background:var(--basalt)}
@media (prefers-reduced-motion:reduce){
 .doc-video{display:none}
 .vidfig{background-image:var(--poster);background-size:cover;background-position:center;
  aspect-ratio:848/480}
}

/* ─── people ─── */
.people{display:grid;grid-template-columns:1fr;gap:2px;margin:52px 0 0;background:var(--rule-faint)}
.person{background:var(--basalt);padding:30px 26px 28px}
.teal .person{background:var(--patina)}
.p-role{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.26em;
 text-transform:uppercase;color:var(--gilt)}
.p-ar{font-family:var(--arabic);font-size:clamp(26px,6vw,34px);line-height:1.6;color:var(--lime-1);
 font-weight:300;margin-top:16px;letter-spacing:normal}
.p-name{font-size:clamp(27px,6vw,36px);line-height:1.1;font-weight:300;letter-spacing:-.012em;
 color:var(--lime-1);margin-top:2px}
.p-line{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--lime-4);
 margin-top:12px;letter-spacing:.02em;max-width:34ch}
.p-val{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.02em;
 color:var(--gilt);text-decoration:none;margin-top:14px}
.p-val:hover{color:var(--lime-1)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;
 text-transform:uppercase;color:var(--gilt);text-decoration:none;
 border:1px solid rgba(198,161,91,.42);padding:11px 18px;transition:background .3s,color .3s}
.chip:hover{background:var(--gilt);color:var(--basalt)}
.callnote{font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--lime-4);
 margin-top:20px;letter-spacing:.02em;max-width:56ch}
.foot-div{height:1px;background:var(--rule-faint);margin:62px 0 34px}
/* ─── where to see the work ─── */
.places{display:grid;grid-template-columns:1fr;gap:2px;margin-top:26px;background:var(--rule-faint)}
.place{display:block;background:var(--basalt);padding:26px 24px 24px;text-decoration:none;
 transition:background .4s ease}
.teal .place{background:var(--patina)}
.place:hover{background:#141210}
.pl-k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em;
 text-transform:uppercase;color:var(--gilt-deep)}
.pl-n{display:block;font-size:23px;line-height:1.18;font-weight:300;color:var(--lime-1);margin-top:14px;
 letter-spacing:-.008em}
.pl-a{display:block;font-family:var(--mono);font-size:12px;line-height:1.85;color:var(--lime-4);
 margin-top:12px;letter-spacing:.02em}
.pl-go{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--gilt);margin-top:18px}
@media(min-width:820px){
 .people{grid-template-columns:1fr 1fr}
 .places{grid-template-columns:repeat(2,1fr)}
 .person{padding:38px 34px 34px}
 .place{padding:32px 30px 30px}
}
@media(min-width:1180px){ .places{grid-template-columns:repeat(4,1fr)} }
@media(min-width:820px){
 .rooms{grid-template-columns:repeat(4,1fr)}
 .room-img{aspect-ratio:4/3}
 .pagehead{padding:92px 0 0}
 .pagehead + section{padding-top:72px}
 .topbar .w{padding-top:22px;padding-bottom:22px}
 .tb-mark{width:44px}
}

/* ═══ V3 — OFFICIAL HAZEM AL-ZUBI TOPBAR LOCKUP ═══ */
.tb-seal{display:block;line-height:0;text-decoration:none;flex:0 0 auto}
.tb-seal picture{display:block}
.tb-logo{display:block;width:clamp(172px,15vw,218px);height:auto}
@media(max-width:1040px){.tb-logo{width:44px}}
@media(max-width:640px){.tb-logo{width:40px}}


/* ═══════════════════════════════════════════════════════════════
   V4 · ARABIC AUTHORING PASS — 03 SEPTEMBER 2026
   Arabic is authored, not mechanically mirrored from Latin.
   Naskh carries the narrative; Plex Sans Arabic carries navigation,
   evidence and controls. English echoes keep their own Latin voice.
   ═══════════════════════════════════════════════════════════════ */
:root{--arabic-ui:'IBM Plex Sans Arabic','Noto Sans Arabic',Tahoma,Arial,system-ui,sans-serif}
html[dir="rtl"] body{
  font-family:var(--naskh);
  font-size:clamp(19px,1.45vw,22px);
  line-height:1.9;
  font-weight:500;
}
html[dir="rtl"] .topbar .w{gap:24px}
html[dir="rtl"] .tb-links> a:not(.langswitch),
html[dir="rtl"] .k,
html[dir="rtl"] .p-role,
html[dir="rtl"] .pl-k,
html[dir="rtl"] .pl-go,
html[dir="rtl"] .dl-k,
html[dir="rtl"] .dl-m,
html[dir="rtl"] .role,
html[dir="rtl"] .chip,
html[dir="rtl"] .btn{
  font-family:var(--arabic-ui);
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
html[dir="rtl"] .tb-links> a:not(.langswitch){
  font-size:14px;
  line-height:1.4;
}
html[dir="rtl"] .langswitch:not([lang="ar"]){
  font-family:var(--mono);
  direction:ltr;
  unicode-bidi:isolate;
}
html[dir="rtl"] .langswitch[lang="ar"]{
  font-family:var(--arabic-ui);
  font-weight:600;
}
html[dir="rtl"] .pagehead h1{
  font-family:var(--naskh);
  font-weight:600;
  font-size:clamp(48px,7.6vw,88px);
  line-height:1.25;
  max-width:14ch;
  text-wrap:balance;
}
html[dir="rtl"] .pagehead .lede{
  font-size:clamp(21px,2.3vw,29px);
  line-height:1.9;
  max-width:34ch;
  color:var(--lime-2);
}
html[dir="rtl"] .en-h{
  margin-top:18px;
  color:var(--gilt);
  font-family:var(--serif);
  font-size:clamp(17px,1.7vw,22px);
  font-weight:300;
  line-height:1.2;
  letter-spacing:.08em;
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
}
html[dir="rtl"] h2{
  font-family:var(--naskh);
  font-weight:600;
  font-size:clamp(36px,5.4vw,58px);
  line-height:1.42;
  max-width:18ch;
  text-wrap:balance;
}
html[dir="rtl"] .n,
html[dir="rtl"] .w .n{max-width:39ch}
html[dir="rtl"] .n p{font-size:clamp(19px,1.7vw,23px);line-height:1.95}
html[dir="rtl"] figcaption{
  font-family:var(--arabic-ui);
  font-size:15px;
  line-height:1.75;
  font-weight:400;
}
html[dir="rtl"] .room-ar{
  font-family:var(--naskh);
  font-size:clamp(31px,3.4vw,44px);
  line-height:1.35;
  font-weight:600;
  color:var(--lime-1);
  padding-top:4px;
}
html[dir="rtl"] .room-en{
  font-family:var(--serif);
  font-size:15px;
  line-height:1.3;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gilt);
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
  padding-top:2px;
}
html[dir="rtl"] .room-line{
  font-family:var(--arabic-ui);
  font-size:17px;
  line-height:1.8;
  font-weight:400;
  color:var(--lime-3);
}
html[dir="rtl"] .p-name{
  font-family:var(--serif);
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
  font-size:25px;
  font-weight:300;
  line-height:1.2;
  color:var(--lime-2);
}
html[dir="rtl"] .p-ar{
  font-family:var(--naskh);
  font-size:clamp(31px,4vw,42px);
  font-weight:600;
  color:var(--lime-1);
}
html[dir="rtl"] .p-line,
html[dir="rtl"] .callnote,
html[dir="rtl"] .pl-a,
html[dir="rtl"] .ctline,
html[dir="rtl"] .fine,
html[dir="rtl"] .pending{
  font-family:var(--arabic-ui);
  font-size:16px;
  line-height:1.85;
  font-weight:400;
}
html[dir="rtl"] .pl-n,
html[dir="rtl"] .dl-n{
  font-family:var(--naskh);
  font-weight:600;
  line-height:1.55;
}
html[dir="rtl"] .row{
  grid-template-columns:minmax(7.4em,11em) 1fr;
  gap:clamp(18px,4vw,54px);
}
html[dir="rtl"] .row .y{
  font-family:var(--arabic-ui);
  font-size:14px;
  line-height:1.75;
}
html[dir="rtl"] .row .t{
  font-family:var(--naskh);
  font-size:clamp(18px,1.45vw,21px);
  line-height:1.9;
}
html[dir="rtl"] .ltr,
html[dir="rtl"] [dir="ltr"]{
  direction:ltr;
  unicode-bidi:isolate;
}
html[dir="rtl"] .seedeeper{
  justify-content:flex-start;
}
html[dir="rtl"] .seedeeper a{
  font-family:var(--arabic-ui);
  font-size:16px;
  font-weight:500;
}
html[dir="rtl"] .hall-continuity{
  margin-top:clamp(42px,7vw,78px);
  margin-bottom:clamp(42px,7vw,78px);
}
html[dir="rtl"] .colophon .role{
  font-family:var(--arabic-ui);
  font-size:15px;
  font-weight:500;
}
@media(max-width:1040px){
  html[dir="rtl"] .topbar .w{align-items:flex-start}
  html[dir="rtl"] .tb-links{gap:10px 16px}
}
@media(max-width:640px){
  html[dir="rtl"] body{font-size:19px}
  html[dir="rtl"] .topbar .w{padding:14px 20px}
  html[dir="rtl"] .tb-links{
    width:100%;
    margin:8px 0 0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2px;
  }
  html[dir="rtl"] .tb-links> a:not(.langswitch){
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--rule-faint);
    padding:8px 6px;
    text-align:center;
    font-size:13px;
  }
  html[dir="rtl"] .langset{
    grid-column:1/-1;
    width:100%;
    margin:8px 0 0;
    padding:8px 0 0;
    border-right:0;
    border-top:1px solid var(--rule-faint);
    justify-content:center;
    flex-wrap:wrap;
  }
  html[dir="rtl"] .pagehead{padding-top:66px}
  html[dir="rtl"] .pagehead h1{font-size:clamp(43px,13vw,60px);line-height:1.3}
  html[dir="rtl"] .pagehead .lede{font-size:21px;line-height:1.9}
  html[dir="rtl"] h2{font-size:clamp(33px,10vw,46px)}
  html[dir="rtl"] .row{
    grid-template-columns:1fr;
    gap:8px;
  }
  html[dir="rtl"] .row .y{
    color:var(--gilt);
    font-size:14px;
  }
  html[dir="rtl"] .rooms{grid-template-columns:1fr}
}


/* ═══ V4.1 · COMPACT OFFICIAL-LOGO MOBILE NAV ═══ */
.tb-menu-toggle{display:none}
@media(max-width:760px){
  html[dir="rtl"] .topbar .w{
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:14px 20px;
  }
  html[dir="rtl"] .tb-seal{display:block;max-width:calc(100% - 104px)}
  html[dir="rtl"] .tb-logo{width:clamp(138px,42vw,166px);height:auto}
  html[dir="rtl"] .tb-menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:44px;
    margin-inline-start:auto;
    padding:8px 12px;
    border:1px solid var(--rule);
    background:transparent;
    color:var(--lime-1);
    font-family:var(--arabic-ui);
    font-size:14px;
    cursor:pointer;
  }
  html[dir="rtl"] .tb-menu-toggle:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}
  html[dir="rtl"] .tb-menu-icon{display:block;width:18px}
  html[dir="rtl"] .tb-menu-icon i{display:block;height:1px;background:currentColor;margin:4px 0;transition:transform .22s ease,opacity .22s ease}
  html[dir="rtl"] .topbar.is-open .tb-menu-icon i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  html[dir="rtl"] .topbar.is-open .tb-menu-icon i:nth-child(2){opacity:0}
  html[dir="rtl"] .topbar.is-open .tb-menu-icon i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  html[dir="rtl"] .tb-links{
    display:none;
    width:100%;
    margin:8px 0 0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px;
    padding-top:12px;
    border-top:1px solid var(--rule-faint);
  }
  html[dir="rtl"] .topbar.is-open .tb-links{display:grid}
  html[dir="rtl"] .tb-links> a:not(.langswitch){
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--rule-faint);
    padding:9px 8px;
    text-align:center;
    font-size:14px;
  }
  html[dir="rtl"] .langset{
    grid-column:1/-1;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    margin:8px 0 0;
    padding:12px 0 0;
    border:0;
    border-top:1px solid var(--rule-faint);
  }
  html[dir="rtl"] .langswitch{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:7px 8px;
  }
  html[dir="rtl"] .pagehead{padding-top:52px}
}
@media(min-width:761px){
  html[dir="rtl"] .tb-links{display:flex!important}
}