/* Aroub Soubh — chapter 01, Art & Cards. Inherits the world of the approved home (identity sheet 01): her white paper,
   her string and pegs, her dots, her loupe. One authored move: a card leaves the string, comes to you and opens. */
:root{
  --paper:#FFFFFF;--cream:#FBF6EF;--ink:#141414;
  --cobalt:#0B4EAA;--sky:#00A3EF;--heart:#E9314F;--pom:#FD5C53;--pink:#FA8EC1;--sun:#FEDF52;--leaf:#147C73;--eye:#7AB22D;
  --rule:#E6DED3;--muted:#4A4640;
  --display:'Fraunces',Georgia,serif;--text:'Instrument Sans',system-ui,sans-serif;
  --ar-display:'El Messiri','Readex Pro',Tahoma,sans-serif;--ar-text:'Readex Pro',Tahoma,sans-serif;
  --hb:76px;--pad:clamp(20px,5vw,88px);--rail:214px;--W:min(300px,20.5vw);
  --out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--ink) var(--paper);scroll-padding-top:calc(var(--hb) + 16px)}
body{margin:0;font:400 18px/1.55 var(--text);background:var(--paper);overflow-x:hidden;caret-color:var(--cobalt);accent-color:var(--cobalt)}
html[dir=rtl] body{font-family:var(--ar-text);font-size:19px;line-height:1.8}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:5px}
button{font:inherit;color:inherit}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.skip{position:fixed;inset-inline-start:16px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;z-index:99;font-size:17px;transform:translateY(-160%);transition:transform .2s}
.skip:focus{transform:none}

.d{font-family:var(--display);font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;letter-spacing:-.018em;line-height:1;margin:0;text-wrap:balance}
html[dir=rtl] .d{font-family:var(--ar-display);font-weight:600;letter-spacing:0;line-height:1.3;font-variation-settings:normal}
.d em{font-style:italic;font-weight:540}
html[dir=rtl] .d em{font-style:normal}
/* client, 2026-09-20 night: "everything is written in black" — colour carries the emphasis her italics already mark, everywhere */
.d em{color:inherit}
.dot{display:inline-block;width:.2em;height:.2em;border-radius:52% 48% 55% 45%/48% 55% 45% 52%;background:var(--heart);margin-inline-start:.06em}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hb);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(16px,3.4vw,48px);background:rgba(255,255,255,.95);border-bottom:1px solid var(--rule);z-index:30}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
/* client, 2026-09-21 night: the eye was centring against the whole two-line stack, so it floated between the name
   and the signature instead of sitting with her name — align it to the name's own line at the top instead */
.mark{align-items:flex-start}
.mark .eye{margin-top:1px}
.mark .eye{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;background:#fff}
.mark .eye img{width:100%;height:100%;object-fit:cover;clip-path:circle(48.6%)}
.mark .wm{font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 60;font-size:26px;letter-spacing:-.01em;line-height:1;white-space:nowrap}
html[dir=rtl] .mark .wm{font-family:var(--ar-display);font-size:27px;letter-spacing:0}
.nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);font-size:17px;font-weight:500;margin-inline-start:auto}
html[dir=rtl] .nav{font-size:18px}
.nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.nav a:hover,.nav [aria-current]{text-decoration:underline;text-decoration-color:var(--heart);text-decoration-thickness:2px;text-underline-offset:6px}
.langs{display:flex;gap:14px;padding-inline-start:18px;border-inline-start:1px solid var(--rule)}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;font-size:17px;font-weight:600;white-space:nowrap}
html[dir=rtl] .chip{font-size:18px}
.chip b{min-width:1.6em;text-align:center;font-variant-numeric:tabular-nums}
.chip:hover{background:var(--ink);color:#fff}

/* ---------- The chooser: her string, her six lines, the card in your hands ---------- */
.chooser{position:relative;padding:calc(var(--hb) + 26px) var(--pad) 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:clamp(32px,5vw,88px);grid-template-areas:"rail rail" "say stage"}
.rail{grid-area:rail;position:relative;height:var(--rail);margin:0 calc(var(--pad) * -1)}
.string{position:absolute;inset:13px 0 auto 0;border-top:1.5px solid var(--ink);opacity:.9}
.thumbs{position:relative;display:flex;justify-content:space-between;padding:0 max(var(--pad),4vw)}
.thumb{position:relative;width:clamp(84px,8.2vw,122px);padding:18px 0 0;border:0;background:none;cursor:pointer;transform-origin:50% 7px;transform:rotate(var(--r));transition:transform .5s var(--out)}
.thumb .peg{position:absolute;left:50%;top:0;width:10px;height:24px;margin-left:-5px;border-radius:3px;background:var(--heart);box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:2}
.thumb .sheet{display:block;background:#fff;box-shadow:0 1px 2px rgba(20,20,20,.08),0 14px 30px -14px rgba(20,20,20,.3);transition:opacity .25s,transform .5s var(--out)}
.thumb img{width:100%;height:auto;aspect-ratio:1048/1400}
.thumb.away .sheet{opacity:0;transform:translateY(18px)}
@media (hover:hover) and (pointer:fine){.thumb:hover{transform:rotate(0deg)}.thumb:hover .sheet{transform:translateY(5px)}}

.say{grid-area:say;padding-top:34px;min-width:0}
.say h1{font-size:clamp(40px,3.6vw,56px)}
.intro{margin:18px 0 0;max-width:46ch;color:var(--muted)}
.lines{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--rule)}
.ln-item{border-bottom:1px solid var(--rule)}
.ln{display:flex;align-items:baseline;gap:16px;width:100%;padding:11px 0;min-height:52px;border:0;background:none;cursor:pointer;text-align:start;
  font-family:var(--display);font-weight:480;font-variation-settings:"SOFT" 100,"opsz" 60;font-size:clamp(24px,2.1vw,31px);line-height:1.2;color:var(--muted);transition:color .25s}
html[dir=rtl] .ln{font-family:var(--ar-display);font-weight:500;font-size:clamp(25px,2.2vw,32px);line-height:1.5}
.ln i{flex:none;width:13px;height:13px;border-radius:52% 48% 55% 45%/48% 55% 45% 52%;background:var(--c);transform:translateY(-1px);transition:transform .45s var(--out)}
.ln br{display:none}
.ln:hover,.on .ln{color:var(--ink)}
.on .ln i{transform:translateY(-1px) scale(1.55)}
.on .ln span{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:3px;text-underline-offset:8px}
.spec{margin:22px 0 0;font-size:16px;line-height:1.5;color:var(--muted);max-width:52ch}
.spec span{display:block;color:var(--ink);margin-top:4px}
.stage{grid-area:stage;min-height:calc(var(--W) * 1.4 + 130px)}

.cardview{position:absolute;top:calc(var(--hb) + 26px + var(--rail) + 40px);inset-inline-end:var(--pad);width:calc((100% - var(--pad) * 2 - clamp(32px,5vw,88px)) * .519)}
.js .cardview{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .3s}
.js .on .cardview{visibility:visible;opacity:1;pointer-events:auto}
.fold{direction:ltr;perspective:1900px;display:flex;justify-content:center;padding:6px 0 0}
.c3d{position:relative;width:var(--W);aspect-ratio:900/1260;transform-style:preserve-3d;transform:translateX(50%) rotateX(7deg) rotateY(7deg);transition:transform .95s var(--out)}
.c3d::after{content:"";position:absolute;left:-104%;right:-4%;bottom:-26px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,20,.2),rgba(20,20,20,0));transform:translateZ(-40px);transition:left .95s var(--out),opacity .4s}
.panel{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;outline:1px solid rgba(20,20,20,.11)}
.panel .outer{width:100%;height:100%;object-fit:cover;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.front .outer{object-position:100% 50%}
.back .outer{object-position:0 50%}
.front{box-shadow:0 26px 48px -20px rgba(20,20,20,.4)}
.front::before{content:"";position:absolute;inset:0 auto 0 0;width:9%;background:linear-gradient(90deg,rgba(20,20,20,.16),rgba(20,20,20,0));z-index:1;pointer-events:none;transition:opacity .6s}
.back{left:-100%;transform-origin:100% 50%;transform-style:preserve-3d;transform:translateZ(-.5px) rotateY(-19deg);transition:transform .95s var(--out);box-shadow:0 26px 48px -20px rgba(20,20,20,.34)}
.back::after{content:"";position:absolute;inset:0 0 0 auto;width:9%;background:linear-gradient(270deg,rgba(20,20,20,.13),rgba(20,20,20,0));backface-visibility:hidden;pointer-events:none}
.back .inner{position:absolute;inset:0;background:linear-gradient(90deg,#fff,#F3EEE6);transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.c3d.closed{transform:translateX(0) rotateX(7deg) rotateY(0deg)}
.c3d.closed .back{transform:translateZ(-.5px) rotateY(-180deg)}
.c3d.closed .front::before{opacity:0}
.c3d.closed::after{left:-4%}
.c3d.snap,.c3d.snap .back,.c3d.snap::after{transition:none}
.c3d.ghost{opacity:0}
.cap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:42px auto 0;max-width:calc(var(--W) * 2)}
.nm{margin:0;flex:1 0 100%;min-width:0;line-height:1.25;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.nm b{display:block;font-family:var(--display);font-style:italic;font-weight:500;font-variation-settings:"SOFT" 100,"opsz" 36;font-size:24px}
html[dir=rtl] .nm b{font-family:var(--ar-display);font-style:normal;font-size:25px}
.nm span{font-size:17px;color:var(--muted)}
.nm span[lang=ar]{font-family:var(--ar-text);font-size:18px}
.nm span[lang=en]{font-family:var(--text)}
.pr{margin:0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.add{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font-size:17px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform .2s var(--out)}
html[dir=rtl] .add{font-size:18px}
@media (hover:hover) and (pointer:fine){.add:hover{background:#fff;color:var(--ink)}}
.add:active{transform:scale(.97)}
.flyer{position:fixed;z-index:60;pointer-events:none;box-shadow:0 18px 40px -18px rgba(20,20,20,.4);background:#fff;will-change:transform,opacity;transform-origin:0 0}

/* ---------- The set of six ---------- */
.set{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(64px,8vw,120px) var(--pad);background:var(--cream);overflow:clip}
.fan{position:relative;height:clamp(260px,30vw,420px);direction:ltr}
.fan img{position:absolute;bottom:0;left:calc(4% + var(--i) * 12%);width:clamp(120px,15vw,210px);height:auto;background:#fff;box-shadow:0 1px 2px rgba(20,20,20,.08),0 18px 36px -18px rgba(20,20,20,.35);transform-origin:50% 100%;transform:rotate(calc((var(--i) - 2.5) * 5deg)) translateY(calc((var(--i) - 2.5) * (var(--i) - 2.5) * 5px))}
.settext{position:relative;z-index:1}
.settext h2{font-size:clamp(36px,3.6vw,54px)}
.settext p{max-width:44ch;margin:18px 0 0}
.pr.big{font-size:26px;margin:22px 0 20px}

/* ---------- The line keeps wandering ---------- */
.journal{padding:clamp(72px,9vw,130px) var(--pad) clamp(48px,6vw,88px)}
.journal h2,.selection h2{font-size:clamp(36px,3.8vw,58px);max-width:16ch}
.sub{font-size:20px;margin:16px 0 0;max-width:48ch;color:var(--muted)}
.jgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,36px);margin-top:44px;align-items:end}
.j{margin:0}
.j .sheet{position:relative;background:#fff;outline:1px solid var(--rule);outline-offset:-1px;transform:rotate(var(--r,0deg))}
/* client, 2026-09-21 night, redone artistically (a flat sticker "wasn't clear" and she wanted more craft): every
   photograph now sits on its own paper mat, like a print pulled from the drawer and set down to sign — a hairline
   closes the picture, then her real signature rests on the paper below it, exactly as she would sign a print by hand. */
.j .sheet{padding-bottom:clamp(34px,10%,46px)}
.j .sheet::before{content:'';position:absolute;left:0;right:0;bottom:clamp(34px,10%,46px);height:1px;background:var(--rule)}
/* client, 2026-09-21 night, later: the eye+signature pairing tried above was reverted ("that's not what I asked") —
   her signature alone is the credit. */
.j .sheet::after{content:'Aroub Soubh';position:absolute;left:14px;bottom:10px;font:600 16px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);direction:ltr;pointer-events:none}
.j img{width:100%;height:auto}
.j figcaption{margin-top:12px;font-size:17px;line-height:1.35;color:var(--muted)}
.j1{grid-column:1/span 4;--r:-1.1deg}.j2{grid-column:5/span 3;--r:1.4deg}.j3{grid-column:8/span 5;--r:-.7deg}
.j4{grid-column:2/span 4;--r:1.2deg}.j5{grid-column:6/span 3;--r:-1.5deg}.j6{grid-column:9/span 4;--r:.9deg}
.orig{margin:36px 0 0;font-size:16px;color:var(--muted)}

/* ---------- Your selection ---------- */
.selection{padding:clamp(56px,7vw,100px) var(--pad) clamp(64px,8vw,120px);border-top:1px solid var(--rule)}
.items{margin-top:32px;border-top:1px solid var(--rule);max-width:860px}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto auto;align-items:center;gap:clamp(12px,2vw,28px);padding:16px 0;border-bottom:1px solid var(--rule)}
.row img{width:64px;height:auto;box-shadow:0 1px 2px rgba(20,20,20,.12),0 8px 16px -8px rgba(20,20,20,.3)}
.row .t{font-family:var(--display);font-style:italic;font-weight:500;font-variation-settings:"SOFT" 100,"opsz" 36;font-size:22px;line-height:1.2}
html[dir=rtl] .row .t{font-family:var(--ar-display);font-style:normal}
.row label{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--muted)}
.row input{width:64px;min-height:44px;border:1.5px solid var(--ink);border-radius:8px;padding:0 8px;font:600 17px var(--text);text-align:center;background:#fff;color:var(--ink)}
.row .p{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .rm{min-height:44px;padding:0 6px;border:0;background:none;font-size:16px;color:var(--muted);text-decoration:underline;cursor:pointer}
.row .rm:hover{color:var(--ink)}
.emptyline{padding:22px 0;margin:0;color:var(--muted)}
.emptyline a{color:var(--ink);font-weight:600;margin-inline-start:10px}
.totals{display:flex;justify-content:space-between;max-width:860px;padding:18px 0 0;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.totals:empty{display:none}
.fine{font-size:16px;line-height:1.55;color:var(--muted);max-width:68ch;margin:18px 0 0}
.send{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.go{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;font-size:17px;font-weight:600;transition:background .2s,color .2s}
html[dir=rtl] .go{font-size:18px}
.go.ghost{background:#fff;color:var(--ink)}
.go:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.go[aria-disabled=true]{opacity:.45;pointer-events:none}
html[dir=rtl] .arw{transform:scaleX(-1)}

footer{padding:48px var(--pad) 120px;background:var(--cream);display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;font-size:17px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 28px}
footer a{min-height:44px;display:inline-flex;align-items:center;font-weight:600}
footer small{font-size:16px;color:var(--muted)}
footer small a{min-height:auto;display:inline}

/* ---------- The envelope: it travels with you; what you chose peeks out of it ---------- */
.envelope{position:fixed;z-index:40;inset-inline-end:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,28px);width:clamp(104px,9.4vw,136px);aspect-ratio:200/150;display:block;text-decoration:none;filter:drop-shadow(0 14px 18px rgba(20,20,20,.22));transition:transform .5s var(--out)}
.envelope svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.env-back{z-index:1}.env-front{z-index:3}
.env-slot{position:absolute;z-index:2;left:12%;right:12%;bottom:8%;height:96%;direction:ltr}
.env-slot img{position:absolute;bottom:0;left:calc(var(--k) * 11%);width:40%;height:auto;background:#fff;box-shadow:0 1px 3px rgba(20,20,20,.3);transform:rotate(calc((var(--k) - 2.5) * 3deg));animation:tuck .7s var(--out) both}
@keyframes tuck{from{transform:translateY(-70%) rotate(0deg);opacity:0}}
.env-count{position:absolute;z-index:4;inset-inline-end:-8px;top:24%;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--ink);color:#fff;font:600 16px/30px var(--text);text-align:center;font-variant-numeric:tabular-nums}
.envelope.empty .env-count{display:none}
.envelope:hover{transform:translateY(-4px) rotate(-2deg)}
.envelope.bump{animation:bump .6s var(--out)}
@keyframes bump{30%{transform:translateY(6px) scale(1.04)}}
.toast{position:fixed;z-index:50;inset-inline-end:clamp(14px,2.4vw,32px);bottom:calc(clamp(104px,9.4vw,136px) * .75 + 48px);margin:0;padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:17px;white-space:nowrap}


/* ---------- Phone and tall screens: the card opens under its own line ---------- */
@media (max-width:900px),(max-aspect-ratio:5/4){
  :root{--hb:64px;--rail:168px;--W:min(43vw,200px);--pad:18px}
  .nav a:not([hreflang]){display:none}
  .langs{border:0;padding:0}
  .mark .eye{width:34px;height:34px}.mark .wm{font-size:22px}
  html[dir=rtl] .mark .wm{font-size:24px}
  .chip span{display:none}.chip{padding:0 12px;gap:8px}
  .langs [aria-current]{display:none}
  .hdr{gap:12px;padding:0 14px}
  .envelope{width:92px}
  .chooser{display:block;padding-bottom:40px}
  .thumbs{justify-content:flex-start;gap:16px;overflow-x:auto;padding:0 18px 22px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .thumbs::-webkit-scrollbar{display:none}
  .thumb{flex:0 0 96px;width:96px;scroll-snap-align:start}
  .say{padding-top:10px}
  .say h1{font-size:clamp(34px,9.4vw,44px)}
  .ln{font-size:clamp(23px,6.2vw,27px);padding:13px 0}
  html[dir=rtl] .ln{font-size:clamp(24px,6.4vw,28px)}
  .ln br{display:inline}
  .stage{display:none}
  .cardview{position:static;width:auto;padding:8px 0 26px}
  .js .cardview{display:none;visibility:visible;opacity:1;pointer-events:auto}
  .js .on .cardview{display:block}
  .cap{flex-wrap:wrap;gap:10px 16px;margin-top:34px;max-width:none}
  .set{grid-template-columns:1fr;gap:28px}
  .fan{height:min(64vw,300px)}
  .fan img{width:min(34vw,150px);left:calc(2% + var(--i) * 12.4%)}
  .jgrid{grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:28px}
  .j1,.j2,.j3,.j4,.j5,.j6{grid-column:auto}
  .j1{grid-column:1/span 2}
  .row{grid-template-columns:52px minmax(0,1fr) auto;row-gap:6px}
  .row img{width:52px;grid-row:span 2}
  .row .rm{grid-column:2/span 2;justify-self:start;padding:0}
  .go{flex:1 1 100%;justify-content:space-between}
  .toast{inset-inline:16px 124px;bottom:30px;white-space:normal;border-radius:18px}
}

/* ---------- No JavaScript, or motion off: every card lies open beside its line ---------- */
html:not(.js) .cardview{position:static;width:auto;padding:10px 0 30px}
html:not(.js) .stage,html:not(.js) .envelope,html:not(.js) .add{display:none}
html:not(.js) .chooser{display:block}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .c3d,.c3d .back,.c3d::after,.thumb,.thumb .sheet,.envelope,.ln i{transition:none}
  .env-slot img,.envelope.bump{animation:none}
}

/* the studio's credit (client, 2026-09-20): her approved logo, never recoloured, as one link across the foot of the page */
footer .studio{flex:1 1 100%;display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);margin-top:12px;padding-top:28px;border-top:1px solid var(--rule);text-decoration:none;min-height:0;font-weight:400}
footer .studio img{width:clamp(120px,11vw,168px);height:auto;flex:none}
footer .studio .s-t{display:grid;gap:2px;font-size:17px;line-height:1.4}
footer .studio .s-by{color:var(--muted);font-size:16px}
footer .studio b{font-size:22px;font-weight:600;color:#1F4E9C}
footer .studio .s-line{color:var(--muted);font-style:italic;font-family:'Fraunces',Georgia,serif;font-size:18px}
footer .studio .s-url{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-top:6px;justify-self:start}
html[dir=rtl] footer .studio .s-t{font-size:18px}html[dir=rtl] footer .studio .s-url{justify-self:end}
html[dir=rtl] footer .studio .s-url svg{transform:none}
footer .studio:hover .s-url,footer .studio:hover b{text-decoration:underline;text-underline-offset:5px}

/* client, 2026-09-20: the studio credit is never larger than Aroub own mark (her eye 40px + name 26px) */
footer .studio{gap:16px;padding-top:22px}
footer .studio img{width:64px}
footer .studio b{font-size:18px}
footer .studio .s-line{font-size:16px}
footer .studio .s-t,html[dir=rtl] footer .studio .s-t{font-size:16px;gap:0}
footer .studio .s-url{margin-top:2px;font-size:16px}

/* her handwritten Arabic signature travels with her English name (client, 2026-09-20) */
.mark .nm{display:flex;align-items:center;gap:10px;min-width:0}
.mark .sg{height:34px;width:auto;flex:none}
@media (max-width:900px),(max-aspect-ratio:5/4){.mark .nm{flex-direction:column;align-items:flex-start;gap:0}.mark .sg{height:20px;margin-top:-2px}.mark .wm{font-size:20px}}

/* client, 2026-09-20: her English name in capitals, as on her earlier site; the handwriting beside it carries the warmth */
html[lang=en] .mark .wm{font-family:var(--text);font-weight:600;font-size:17px;letter-spacing:.16em;text-transform:uppercase;font-variation-settings:normal}
@media (max-width:900px),(max-aspect-ratio:5/4){html[lang=en] .mark .wm{font-size:16px;letter-spacing:.14em}}

.mark .sg{height:46px}
@media (max-width:900px),(max-aspect-ratio:5/4){.mark .sg{height:28px;margin-top:-3px}.mark .nm{line-height:1}}
@media (max-width:900px),(max-aspect-ratio:5/4){.mark .sg{height:24px;margin-top:3px}}

/* her watercolour eye is the cursor (client, 2026-09-20); a larger eye over anything you can press; text fields keep the text caret */
html{cursor:url(../cursor-eye-24.png) 12 12,auto;cursor:image-set(url(../cursor-eye-24.png) 1x,url(../cursor-eye-48.png) 2x) 12 12,auto}
a,button,summary,label,select,[role=button],.zoomable{cursor:url(../cursor-eye-32.png) 16 16,pointer;cursor:image-set(url(../cursor-eye-32.png) 1x,url(../cursor-eye-64.png) 2x) 16 16,pointer}
input:not([type=checkbox]),textarea{cursor:text}

/* client, 2026-09-20: more air between her capitals and her signature, and a larger, clearer signature */
.mark .nm{gap:20px}.mark .sg{height:54px;image-rendering:auto}
@media (max-width:900px),(max-aspect-ratio:5/4){.mark .nm{gap:0}.mark .sg{height:30px;margin-top:7px}html[lang=en] .mark .wm{font-size:16px}}

/* client, 2026-09-20 evening: the focus is her name — the signature stacks small underneath it, on every screen, not beside it */
.mark .nm{flex-direction:column;align-items:flex-start;gap:2px}
.mark .sg{height:26px;margin-top:0}

/* client, 2026-09-20 evening: the wordmark is always "Aroub Soubh" in English, even on the Arabic pages — the small
   handwritten signature underneath carries the Arabic. The caps treatment now applies everywhere, not only html[lang=en]. */
.mark .wm{font-family:var(--text) !important;font-weight:600;font-size:17px;letter-spacing:.16em;text-transform:uppercase;font-variation-settings:normal}
@media (max-width:900px),(max-aspect-ratio:5/4){.mark .wm{font-size:16px;letter-spacing:.14em}}

/* client, 2026-09-20: a chosen card no longer leaves an empty place on the rope (it read as "the 4th card is missing").
   It stays on its peg, paler and a little lower, so the six are always there; arriving by a card link keeps the open card in view. */
.thumb.away .sheet{opacity:.34;transform:translateY(10px)}
.ln-item{scroll-margin-top:38vh}
@media (max-width:900px),(max-aspect-ratio:5/4){.ln-item{scroll-margin-top:calc(var(--hb) + 12px)}}

/* client, 2026-09-20: the eye cursor stays the SAME small eye everywhere, also over the menu and buttons */
a,button,summary,label,select,[role=button],.zoomable{cursor:url(../cursor-eye-24.png) 12 12,pointer;cursor:image-set(url(../cursor-eye-24.png) 1x,url(../cursor-eye-48.png) 2x) 12 12,pointer}

/* client, 2026-09-20: the green watercolour eye IS the mouse on this site, everywhere and always: never the hand, never the arrow.
   Only fields you type in keep the text caret. (!important because many components set cursor:pointer of their own.)
   client, 2026-09-21 night: sized down a step ("a bit smaller"), 24px base / 48px @2x. */
*,*::before,*::after{cursor:url(../cursor-eye-24.png) 12 12,auto !important}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),textarea{cursor:text !important}

/* client, 2026-09-20 evening: the header's round buttons (the chip) were crowding her name — lighter and narrower
   now (thinner border, smaller type and icon); the 44px tap height itself is untouched. (.menu-btn's own sizing is
   set at runtime by menu.js, which injects after this stylesheet and would otherwise win.) */
.chip{border-width:1px;font-size:15px;padding-inline:13px;gap:7px}
html[dir=rtl] .chip{font-size:16px}
.chip svg{width:18px;height:18px}
.chip b{font-size:14px}
/* the wordmark is her English name in capitals on every language, at one size */
html[dir=rtl] .mark .wm{font-size:17px;letter-spacing:.16em}
@media (max-width:900px),(max-aspect-ratio:5/4){html[dir=rtl] .mark .wm{font-size:16px;letter-spacing:.14em}}

/* the dotting mark (client, 2026-09-21): her whole site speaks in her own dot language — crisp, flat, no gradient, no shadow. */
.dm{display:inline-flex;align-items:center;gap:.22em;vertical-align:.06em;margin-inline-end:.24em}
.dm i{width:.16em;height:.16em;border-radius:50%;flex:none;display:block}
h1.d .dm i,h2.d .dm i{width:.13em;height:.13em}
.dm i:nth-child(1){background:#E9314F}.dm i:nth-child(2){background:#FEDF52}.dm i:nth-child(3){background:#0B4EAA}
html[dir=rtl] .dm{margin-inline-end:0;margin-inline-start:.24em}
.dotrule{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(40px,6vh,80px) 0}
.dotrule i{width:7px;height:7px;border-radius:50%;display:block}
.dotrule i:nth-child(1){background:#E9314F}.dotrule i:nth-child(2){background:#FEDF52}.dotrule i:nth-child(3){background:#0B4EAA}

.bgdots{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:none}
@media (min-width:1300px){.bgdots{display:block}}

/* studio-quiet: the studio credit stays small (Hala 17 Oct) */
.studio img{width:56px!important}.studio b{font-size:16px!important;font-weight:500!important}.studio .s-line{display:none}
@media (max-width:640px){.studio img{width:44px!important}}