/* =========================================================
   TOKENS — light, quiet, the photos carry the colour
   ========================================================= */
:root{
  --paper:#FBFBF9; --ink:#151515; --mute:#8C8B86; --chip:#EFEFEB; --chip-h:#E5E4DF; --line:#E3E2DD;
  --field:#FFFFFF; --danger:#C0533A; --ok:#3E8C5C;
  --edge:clamp(12px,1.6vw,20px); --rail:26px; --seg:32px; --barh:32px; --gap:16px;
  --cols:minmax(0,2.3fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.3fr) 52px var(--seg);
  --ease:cubic-bezier(.2,.8,.2,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#FBFBF9;--ink:#151515;}}
:root[data-theme="dark"]{--paper:#FBFBF9;--ink:#151515;}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:"Readex Pro","Segoe UI",system-ui,-apple-system,sans-serif;font-weight:400;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
body[data-view="home"]{overflow:hidden;overscroll-behavior:none;}
html[lang="ar"] *{letter-spacing:0 !important;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
img,video{display:block;max-width:100%;}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.01em;}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;}

/* loader */
#loader{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center;transition:opacity .5s var(--ease);}
#loader.out{opacity:0;pointer-events:none;}
.ld{display:grid;gap:18px;justify-items:center;}
.ld-dots{display:flex;gap:12px;}
.ld-dots i{width:14px;height:14px;border-radius:50%;background:var(--chip);transition:background-color .4s var(--ease),transform .4s var(--ease);}
.ld-dots i.on{transform:scale(1.15);}
.ld-st{font-size:12px;color:var(--mute);min-height:1.4em;}

/* =========================================================
   RAIL — one dot per project, active one becomes a square
   ========================================================= */
.rail{
  position:fixed;z-index:20;inset-inline-start:var(--edge);
  top:calc(env(safe-area-inset-top,0px) + var(--edge));
  bottom:calc(env(safe-area-inset-bottom,0px) + var(--edge));
  width:var(--rail);display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,3vh,31px);padding:4px 0 10px;overflow-y:auto;scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none;}
.dot{flex:none;width:23px;height:23px;border-radius:50%;background:var(--c);transition:border-radius .35s var(--ease),transform .25s var(--ease);}
.dot:hover{transform:scale(1.13);}
.dot.on{border-radius:2px;width:25px;height:25px;}
#tip{position:fixed;z-index:30;padding:3px 8px;background:var(--ink);color:var(--paper);font-size:12px;border-radius:2px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;}
#tip.on{opacity:1;}

/* =========================================================
   BAR — title · see project · name · info · counter
   ========================================================= */
.bar{
  position:fixed;z-index:20;
  top:calc(env(safe-area-inset-top,0px) + var(--edge));
  inset-inline-start:calc(var(--edge) * 2 + var(--rail));
  inset-inline-end:var(--edge);
  display:grid;gap:12px;align-items:center;
  grid-template-columns:var(--cols);
}
@media(min-width:901px){
  #b-title{grid-column:1;} #b-see{grid-column:2;} #b-name{grid-column:3;} #b-info{grid-column:4;}
  #b-count{grid-column:5;justify-self:start;} #lang{grid-column:6;justify-content:center;padding:0;} #b-fs{grid-column:7;}
}
body[data-view="project"] .rail{display:none;}
body[data-view="project"] .bar{inset-inline-start:var(--edge);}
body[data-view="project"] #b-title,body[data-view="project"] #b-see{display:none;}
.seg{display:flex;align-items:center;height:var(--seg);padding:0 10px;background:var(--chip);border-radius:2px;font-size:13.5px;min-width:0;white-space:nowrap;transition:background-color .2s;}
.seg > span{overflow:hidden;text-overflow:ellipsis;}
a.seg:hover,button.seg:hover{background:var(--chip-h);}
.seg.title{font-weight:500;}
.seg.count{font-size:12.5px;direction:ltr;unicode-bidi:isolate;}
.seg.icon{width:var(--seg);justify-content:center;padding:0;}
.seg.icon svg{width:14px;height:14px;}
@media(max-width:900px){
  .bar{display:flex;flex-wrap:wrap;gap:8px;}
  .seg{flex:0 0 auto;font-size:13px;padding:0 9px;}
  .seg.title{flex:1 1 calc(100% - 100px);min-width:0;order:0;}
  .seg.count{order:1;}
  #b-see{order:2;} #b-name{order:3;} #b-info{order:4;} #lang{order:5;}
  .seg.fs{display:none;}
}

/* =========================================================
   HOME — the pair of photos / videos, centred
   ========================================================= */
.stage{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + var(--edge) + var(--barh) + 14px);
  bottom:calc(env(safe-area-inset-bottom,0px) + var(--edge));
  inset-inline-start:calc(var(--edge) * 2 + var(--rail));
  inset-inline-end:var(--edge);
  touch-action:none;
}
.pair{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:var(--gap);opacity:0;transition:opacity .55s var(--ease);}
.pair.in{opacity:1;}
.pair.col{flex-direction:column;}
.pair .m{flex:none;object-fit:cover;background:var(--chip);cursor:pointer;}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--mute);padding:20px;}
.empty a{color:var(--ink);border-bottom:1px solid var(--line);}

/* =========================================================
   PROJECT + INFO pages
   ========================================================= */
.page{
  padding-top:calc(var(--edge) + var(--barh) + clamp(30px,6vh,64px));
  padding-inline-start:calc(var(--edge) * 3 + var(--rail));
  padding-inline-end:var(--edge);
  padding-bottom:90px;
}
/* project page: credits row · note · info row · horizontal strip, on the bar's column tracks */
@media(min-width:901px){body[data-view="project"]{overflow:hidden;}}
.pj{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--edge));bottom:calc(env(safe-area-inset-bottom,0px) + var(--edge));inset-inline:var(--edge);
  display:grid;grid-template-columns:var(--cols);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:12px;overflow-y:auto;overflow-x:hidden;}
.pj-cred{grid-column:1 / 3;grid-row:1;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;min-height:var(--seg);}
.cb{flex:1 1 0;min-width:120px;max-width:300px;display:grid;gap:1px;padding:6px 10px 7px;background:var(--chip);border-radius:2px;font-size:13.5px;font-weight:500;line-height:1.45;}
.cb span{overflow-wrap:anywhere;}
.cb .v{display:flex;align-items:center;gap:7px;}
.cb .v i{flex:none;width:11px;height:11px;border-radius:50%;background:var(--c);}
.pj-note{grid-column:1 / 4;grid-row:2;margin:0;padding-top:clamp(16px,3.5vh,40px);min-height:clamp(44px,14vh,170px);max-width:64ch;font-size:14.5px;line-height:1.6;font-weight:300;white-space:pre-line;}
.pj-info{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:subgrid;align-items:center;margin-bottom:14px;}
.pi-t{grid-column:1 / 3;display:flex;align-items:center;gap:14px;min-width:0;}
.pi-dot{flex:none;width:24px;height:24px;border-radius:50%;background:var(--c);transition:transform .2s var(--ease);}
.pi-dot:hover{transform:scale(1.12);}
.pi-t .seg{flex:1;font-weight:500;}
.pj-info .seg{height:auto;min-height:var(--seg);padding-top:5px;padding-bottom:5px;white-space:normal;line-height:1.35;}
.pj-info .seg > span{overflow:visible;overflow-wrap:anywhere;}
.pi-type{grid-column:3;} .pi-year{grid-column:4;}
.pi-sw{grid-column:5 / 8;display:flex;gap:8px;height:var(--seg);}
.pi-sw i{flex:1;min-width:0;background:var(--c);border-radius:1px;}
.pj-strip{grid-column:1 / -1;grid-row:4;display:flex;gap:14px;min-height:260px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#cfcec8 transparent;}
.pj-strip figure{position:relative;flex:none;margin:0;height:100%;scroll-snap-align:start;}
.pj-strip img,.pj-strip video{display:block;width:100%;height:100%;object-fit:cover;background:var(--chip);}
.pj-nt{flex:none;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:20px;background:var(--c);color:var(--tink);scroll-snap-align:start;}
.pj-nt small{font-size:12.5px;opacity:.8;}
.pj-nt b{font-weight:500;font-size:clamp(18px,1.8vw,26px);line-height:1.15;}
@media(max-width:900px){
  .pj{position:static;display:block;padding:calc(env(safe-area-inset-top,0px) + var(--edge) + var(--barh) + 14px) var(--edge) 40px;}
  .pj-cred{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .cb{max-width:none;min-width:0;}
  .pj-note{min-height:0;padding-top:16px;}
  .pj-info{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px;}
  .pi-t{flex:1 1 100%;} .pi-type,.pi-year{flex:1 1 0;} .pi-sw{flex:1 1 100%;}
  .pj-strip{height:62vh;scroll-snap-type:x mandatory;}
}
.snd{position:absolute;bottom:10px;inset-inline-end:10px;height:28px;padding:0 10px;border-radius:2px;background:rgba(251,251,249,.9);font-size:12px;}
.info{max-width:1100px;margin:0 auto;}
.info-lede{margin:0;font-weight:300;font-size:clamp(28px,4vw,56px);line-height:1.12;letter-spacing:-.02em;max-width:20ch;}
.info-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);margin-top:clamp(40px,8vh,80px);padding-top:26px;border-top:1px solid var(--line);}
@media(max-width:900px){.info-grid{grid-template-columns:1fr;}}
.info-grid h3{margin:0 0 12px;font-size:12.5px;font-weight:400;color:var(--mute);}
.info-grid p{margin:0 0 14px;max-width:46ch;font-weight:300;font-size:15px;}
.info-grid ul{list-style:none;margin:0;padding:0;}
.info-grid li,.info-grid .contact a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;}

/* =========================================================
   STUDIO (admin) — light version of the same Studio
   ========================================================= */
body[data-view="admin"] .rail,body[data-view="admin"] .bar{display:none;}
.admin{max-width:1240px;margin:0 auto;padding:calc(var(--edge) + 6px) var(--edge) 130px;}
.a-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.a-brand{font-weight:500;letter-spacing:.2em;font-size:13px;}
.a-brand span{letter-spacing:0;font-weight:400;color:var(--mute);margin-inline-start:10px;}
.a-right{display:flex;gap:10px;align-items:center;}
.a-link{border-bottom:1px solid var(--line);font-size:13px;}
.a-tabs{display:flex;gap:22px;margin-top:22px;border-bottom:1px solid var(--line);}
.a-tabs a{padding:10px 0;color:var(--mute);font-size:14.5px;position:relative;}
.a-tabs a[aria-current="page"]{color:var(--ink);}
.a-tabs a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--ink);}
.a-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:30px 0 20px;}
.a-top h1{margin:0;font-weight:300;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;line-height:1;}
.a-count{font-size:13px;color:var(--mute);margin-inline-start:8px;vertical-align:middle;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--field);font-size:13.5px;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,opacity .2s;}
.btn:hover{border-color:#cfcec8;}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn.primary:hover{opacity:.86;}
.btn.small{min-height:30px;padding:0 12px;font-size:12.5px;}
.btn.ghost-danger:hover{color:var(--danger);border-color:rgba(192,83,58,.45);}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn.busy,.btn[disabled]{opacity:.5;pointer-events:none;}
.icon{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--field);display:grid;place-items:center;font-size:13px;}
.icon:hover{border-color:#cfcec8;}
.icon[disabled]{opacity:.3;pointer-events:none;}
.a-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.a-row{display:grid;grid-template-columns:84px 12px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);}
.a-row img{width:84px;height:56px;object-fit:cover;border-radius:2px;background:var(--chip);}
.a-dot{width:12px;height:12px;border-radius:50%;background:var(--c);}
.a-name{min-width:0;display:grid;}
.a-name b{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.a-name small{color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.a-status{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mute);}
.a-status.on{color:var(--ok);border-color:rgba(62,140,92,.4);}
.a-actions{display:flex;gap:8px;align-items:center;}
.a-empty{padding:60px 0;text-align:center;color:var(--mute);border-top:1px solid var(--line);}
/* ---- sign-in gate -------------------------------------------------------
   The Studio document loads for anyone; everything behind it needs a session,
   so an unsigned visitor gets this and nothing else. */
.a-gate{min-height:100svh;display:grid;place-items:center;padding:40px 20px;}
.a-gate>div{width:100%;max-width:360px;text-align:center;}
.a-gate .a-brand{display:flex;justify-content:center;margin-bottom:28px;}
.a-gate h1{margin:0 0 10px;font-weight:300;font-size:26px;letter-spacing:-.01em;}
.a-gate p{margin:0 0 24px;color:var(--mute);font-size:14px;line-height:1.55;}
.a-gate .btn{width:100%;}
.a-gate .a-msg{min-height:20px;margin:18px 0 0;font-size:13px;color:var(--mute);line-height:1.5;}
.a-gate .a-msg.bad{color:var(--danger);}
.a-gate .a-msg.ok{color:var(--ok);}
@media(max-width:760px){.a-row{grid-template-columns:72px minmax(0,1fr) auto;row-gap:10px;}.a-row img{width:72px;height:48px;}.a-dot{display:none;}.a-actions{grid-column:1 / -1;justify-content:flex-end;flex-wrap:wrap;}}
.ed{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start;}
@media(max-width:900px){.ed{grid-template-columns:1fr;}}
.card{background:var(--field);border:1px solid var(--line);border-radius:10px;padding:clamp(16px,2.2vw,22px);margin-bottom:clamp(16px,3vw,26px);}
.card h2{margin:0 0 6px;font-weight:400;font-size:18px;}
.help{color:var(--mute);font-size:12.5px;margin:0;}
.mlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px;}
.mi{display:grid;gap:8px;}
.mi-th{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--chip);}
.mi-th img{width:100%;height:100%;object-fit:cover;}
.mi-badge{position:absolute;top:6px;inset-inline-start:6px;display:flex;gap:4px;}
.mi-badge span{font-size:10.5px;padding:2px 7px;border-radius:999px;background:rgba(21,21,21,.78);color:#fff;}
.mi-badge span.home{background:#fff;color:var(--ink);}
.mi-act{display:flex;gap:6px;justify-content:center;}
.madd{aspect-ratio:4/3;border:1px dashed #cfcec8;border-radius:6px;display:grid;place-items:center;text-align:center;color:var(--mute);font-size:13px;cursor:pointer;padding:8px;transition:border-color .2s,color .2s;}
.madd:hover{border-color:var(--ink);color:var(--ink);}
.madd b{display:block;font-size:24px;font-weight:300;line-height:1;margin-bottom:4px;}
.c-strip{display:flex;height:64px;border-radius:6px;overflow:hidden;margin:14px 0 8px;}
.c-strip i{flex:1;min-width:6px;}
.c-strip i.me{flex-grow:4;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px var(--ink);}
.c-sug{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:var(--mute);}
.c-sw{width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 1px var(--line);transition:transform .2s;}
.c-sw:hover{transform:scale(1.1);}
.c-sw.on{box-shadow:0 0 0 2px var(--field),0 0 0 4px var(--ink);}
.c-pick{display:flex;gap:10px;align-items:center;margin-top:14px;}
.c-pick input[type=color]{width:44px;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--field);padding:3px;cursor:pointer;}
.c-pick input[type=text]{width:120px;}
.pair-h{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px;color:var(--mute);margin:12px 0 -4px;}
.pair-h span:last-child{text-align:end;}
.field{display:grid;gap:6px;margin-top:14px;}
.field>label{font-size:12.5px;color:var(--mute);}
.fpair{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:560px){.fpair,.pair-h{grid-template-columns:1fr;}.pair-h span:last-child{display:none;}}
input[type=text],input[type=number],input[type=email],input[type=tel],textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;font-size:14.5px;padding:9px 11px;transition:border-color .2s;}
textarea{resize:vertical;min-height:90px;line-height:1.5;}
input:focus,textarea:focus{outline:none;border-color:#9d9c96;}
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;}
.switch input{position:absolute;opacity:0;pointer-events:none;}
.switch .tr{width:44px;height:26px;border-radius:999px;background:#d9d8d3;position:relative;transition:background-color .25s;flex:none;}
.switch .tr::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease);}
.switch input:checked + .tr{background:var(--ok);}
.switch input:checked + .tr::after{transform:translateX(18px);}
[dir="rtl"] .switch input:checked + .tr::after{transform:translateX(-18px);}
.switch input:focus-visible + .tr{outline:1.5px solid var(--ink);outline-offset:3px;}
.ed-bar{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px;margin-top:6px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:fit-content;box-shadow:0 8px 24px rgba(0,0,0,.08);}

/* overlays */
#modal,#session{position:fixed;inset:0;z-index:96;background:rgba(20,20,20,.35);display:grid;place-items:center;padding:20px;}
/* Session expiry sits above everything, a confirm dialog included. */
#session{z-index:99;background:rgba(20,20,20,.6);}
#session .help{margin:-12px 0 18px;font-size:11.5px;word-break:break-word;}
/* Video upload progress in the Studio. */
.up{margin-top:14px;display:grid;gap:6px;font-size:12.5px;color:var(--mute);}
.up-track{height:6px;border-radius:999px;background:var(--chip);overflow:hidden;}
.up-fill{height:100%;width:0;background:var(--ink);transition:width .2s linear;}
.m-card{background:var(--field);border-radius:14px;padding:22px;max-width:420px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.25);}
.m-card p{margin:0 0 20px;font-size:15.5px;}
.m-act{display:flex;gap:10px;justify-content:flex-end;}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:97;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:90vw;text-align:center;}
#toast.on{opacity:1;transform:translate(-50%,0);}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important;}}