/* ------------------------------------------------------------------
   Oqal Studio — the dark model.
   A black filmstrip you pull sideways, and project pages you fall down.
------------------------------------------------------------------- */
:root{
  --ink:#fff; --paper:#000; --dim:rgba(255,255,255,.5); --line:rgba(255,255,255,.28);
  --soft:rgba(255,255,255,.78);
  --gut:clamp(16px,2.2vw,34px);        /* the only margin a photograph gets */
  --bar:56px; --cap:64px; --fs:13px;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.8,0,.2,1);
  --soft:cubic-bezier(.16,1,.3,1);
}
@media (max-width:720px){ :root{ --bar:44px; --cap:60px; --fs:12px; } }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs); line-height:1.3;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--ink); color:var(--paper); }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
p{ margin:0; }

.bar{ position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:0 var(--bar); height:var(--bar); }
/* the page runs from black to white and back, so the bar and the progress line
   invert against whatever is under them instead of choosing a colour */
body.banded .bar,body.banded .top{ mix-blend-mode:difference; color:#fff; }
body.banded nav a{ color:rgba(255,255,255,.6); }
body.banded nav a:hover,body.banded nav a[aria-current]{ color:#fff; }
@media (max-width:720px){ .bar{ padding:0 16px; } }
.brand{ font-weight:500; letter-spacing:.02em; }
nav{ display:flex; gap:22px; }
nav a{ color:var(--dim); transition:color .3s var(--soft); }
nav a:hover,nav a[aria-current]{ color:var(--ink); }

/* ============================ the strip ============================ */
body.strip{ height:100%; overflow:hidden; }
html.strip{ height:100%; }
.wrap{ position:fixed; top:var(--bar); bottom:var(--cap); left:0; right:0; overflow:hidden; cursor:ew-resize; user-select:none; touch-action:none; }
.track{ position:absolute; top:0; bottom:0; left:0; width:max-content; display:flex; will-change:transform;
}
.panel{ position:relative; flex:none; height:100%; }

.panel.img{ display:block; background-size:cover; background-position:center; background-color:#0a0a0a; }

/* the name rides up out of the bottom edge of a frame when you point at it */
.panel.img .tag{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--soft),transform .4s var(--soft); }
@media (hover:hover){ .panel.img:hover .tag{ opacity:1; transform:none; } }
@media (hover:none){ .panel.img .tag{ opacity:1; transform:none; } }
.panel.img .tag b{ font-weight:500; }
.panel.img .tag .go{ color:var(--dim); white-space:nowrap; }

.panel.text{ width:min(72vw,1100px); padding:clamp(20px,4vw,56px); display:flex; flex-direction:column; justify-content:flex-end; cursor:auto; }
.panel.intro{ width:100vw; padding-left:var(--bar); justify-content:center; }
/* one panel = one screen, so a swipe snaps cleanly onto the next frame */
@media (max-width:720px){
  .panel.intro{ padding-left:16px; }
  .panel.text{ width:100vw; }
  .panel.img{ width:100vw; aspect-ratio:auto !important; }
}
.lead{ font-family:var(--serif); font-weight:300; letter-spacing:-.005em; line-height:1.14;
        max-width:20ch; font-size:clamp(26px,3.4vw,54px); }
.lead a{ text-decoration:underline; text-underline-offset:.08em; text-decoration-thickness:1px; }
.huge{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,6.4vw,104px);
        letter-spacing:-.012em; line-height:1.02; max-width:none; }
.studio .lead{ font-size:clamp(22px,2.6vw,40px); max-width:26ch; }
.facts{ margin:28px 0 0; display:grid; gap:4px; max-width:44ch; color:var(--dim); }
.intro .facts{ margin-top:16px; }

.caption{ position:fixed; left:0; right:0; bottom:0; height:var(--cap); z-index:10;
          display:flex; align-items:flex-start; justify-content:space-between; padding:14px var(--bar) 0; }
@media (max-width:720px){ .caption{ padding:12px 16px 0; } }
.caption .meta{ display:grid; gap:2px; }
.caption b{ font-weight:500; }
.caption .meta span{ color:var(--dim); }
.caption .count{ font-variant-numeric:tabular-nums; color:var(--dim); }
.progress{ position:fixed; left:0; bottom:0; height:1px; width:0; background:var(--ink); z-index:11; }

/* The strip travels sideways but answers a plain downward scroll, so the
   opening screen asks for one plainly: a word and an arrow that keeps
   falling. It leaves for good on the first move. */
.hint{ position:fixed; left:50%; bottom:calc(var(--cap) + 26px); transform:translateX(-50%); z-index:12;
       display:flex; flex-direction:column; align-items:center; gap:14px;
       color:rgba(255,255,255,.78); white-space:nowrap;
       font-size:11px; letter-spacing:.2em; text-transform:uppercase;
       transition:opacity .7s var(--soft); }
.hint i{ display:block; width:10px; height:10px;
         border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
         animation:scrollhint 1.7s var(--soft) infinite; }
@keyframes scrollhint{
  0%{   opacity:0; transform:rotate(45deg) translate(-5px,-5px); }
  35%{  opacity:1; }
  100%{ opacity:0; transform:rotate(45deg) translate(5px,5px); } }
body.moved .hint{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .hint i{ animation:none; transform:rotate(45deg); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .hint i{ animation:none; transform:none; } }

/* ======================= the project page ======================= */
.top{ position:fixed; top:0; left:0; height:1px; width:0; background:var(--ink); z-index:11; }

.cover{ position:relative; height:100svh; overflow:hidden; background:#000; }
/* on a wide screen the cover takes the photograph's own height, so the whole
   picture — edges and signature included — is on screen; it never grows past
   the screen itself */
/* A wide photograph is given its own height, so none of it is lost. A tall one
   would otherwise squeeze the cover into a narrow strip, so it fills the screen
   and is cropped instead. */
@media (min-aspect-ratio:1/1){ .cover{ height:min(100svh, calc(100vw / var(--ar,1.6))); } }
.cover .img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.cover::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0 18%,rgba(0,0,0,.05) 46%,rgba(0,0,0,.85)); }
.cover .plate{ position:absolute; left:var(--bar); right:var(--bar); bottom:var(--cap); z-index:2; }
@media (max-width:720px){ .cover .plate{ left:16px; right:16px; bottom:40px; } }
.kicker{ color:var(--dim); letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
h1.title{ margin:0; font-family:var(--serif); font-weight:300; letter-spacing:-.012em; line-height:1.02;
          font-size:clamp(38px,6.8vw,112px); }
.cue{ position:absolute; right:var(--bar); bottom:var(--cap); z-index:2; color:var(--dim); display:grid; gap:10px; justify-items:center; }
@media (max-width:720px){ .cue{ display:none; } }
.cue i{ display:block; width:1px; height:40px; background:var(--ink); transform-origin:top; animation:cue 2.4s var(--soft) infinite; }
@keyframes cue{ 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(0);transform-origin:bottom} }

/* Two close tones rather than pure black and white: the page still turns over
   as you fall through it, but it stops flashing. The change between them is a
   clean edge — no gradient, no fade. */
.band{ position:relative; background:var(--paper); color:var(--ink); }
.band.light{ --paper:#f4f3f1; --ink:#111; --dim:rgba(0,0,0,.45); --line:rgba(0,0,0,.16); --soft:rgba(0,0,0,.72); }
.band.dark { --paper:#1a1a1a; --ink:#fff; --dim:rgba(255,255,255,.48); --line:rgba(255,255,255,.2);  --soft:rgba(255,255,255,.76); }
.inner{ padding:0 var(--bar); }
@media (max-width:720px){ .inner{ padding:0 16px; } }

/* the brief: facts stay pinned while the writing moves past them */
.brief{ display:grid; grid-template-columns:minmax(200px,1fr) minmax(0,2.4fr); gap:clamp(24px,5vw,90px);
        padding-block:clamp(72px,14vh,180px); }   /* block only — the sides come from .inner */
@media (max-width:900px){ .brief{ grid-template-columns:1fr; gap:40px; } }
.brief .pin{ position:sticky; top:calc(var(--bar) + 24px); align-self:start; }
@media (max-width:900px){ .brief .pin{ position:static; } }
.dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; }
.dl dt{ color:var(--dim); } .dl dd{ margin:0; }
.brief .lead{ font-size:clamp(22px,2.7vw,42px); max-width:24ch; margin-bottom:40px; }
.copy{ font-family:var(--serif); font-weight:300; font-size:clamp(16px,1.2vw,19px); line-height:1.7;
        max-width:60ch; color:var(--soft); }
.copy + .copy{ margin-top:1.2em; }

/* the frames: each one wipes up as it arrives */
.shots{ padding-block:clamp(46px,8vh,96px); display:grid; gap:clamp(52px,9vh,120px); }
.shot{ display:grid; gap:14px; margin:0; }   /* a <figure> carries a 40px UA margin by default */
.shot figcaption{ margin:0 var(--gut); padding-top:13px; border-top:1px solid var(--line);
                   display:grid; grid-template-columns:42px 1fr; gap:0; align-items:start; }
@media (max-width:720px){ .shot figcaption{ margin:0 16px; grid-template-columns:32px 1fr; } }
.shot .frame{ position:relative; overflow:hidden; background:#0a0a0a;
              clip-path:inset(100% 0 0 0); transition:clip-path 1.1s var(--soft); }
.shot.in .frame{ clip-path:inset(0 0 0 0); }
/* The photograph sits exactly in its frame — the frame already has the image's
   own proportions, so nothing is enlarged or trimmed and the OQAL signature in
   the corner stays in view. It arrives with a fade instead of a zoom. */
.shot .frame .img{ position:absolute; inset:0; background-size:cover; background-position:center;
                   opacity:0; transition:opacity 1.2s var(--soft) .15s; }
.shot.in .frame .img{ opacity:1; }
.shot figcaption{ color:var(--dim);
                  opacity:0; transform:translateY(8px); transition:opacity .8s var(--soft) .25s,transform .8s var(--soft) .25s; }
.shot.in figcaption{ opacity:1; transform:none; }
.shot figcaption .n{ font-variant-numeric:tabular-nums; }
.shot[data-w="wide"]  { max-width:none; padding:0 6vw; }
.shot[data-w="inset"] { max-width:none; padding:0 14vw; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gut); }
@media (max-width:820px){
  .shot[data-w="wide"],.shot[data-w="inset"]{ padding:0; }
  .pair{ grid-template-columns:1fr; gap:clamp(56px,11vh,150px); }
}

.next{ padding-block:clamp(64px,12vh,150px) clamp(72px,14vh,170px); }
.next a{ display:grid; gap:16px; }
.next .big{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em; line-height:1.05; font-size:clamp(32px,5.2vw,80px);
            transition:opacity .4s var(--soft); }
.next a:hover .big{ opacity:.55; }
.foot{ border-top:1px solid var(--line); padding:28px 0 40px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--dim); }
.foot a:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  .shot .frame{ clip-path:none; } .shot .frame .img{ opacity:1; }
  .shot figcaption{ opacity:1; transform:none; }
  .cue i{ animation:none; }
}

/* ============================ the opening ============================ */
/* until the intro has built itself, show only its ground — no flash of the site */
html.oq-intro-on{ background:#101010; }
html.oq-intro-on body{ visibility:hidden; }

.oq-intro{ position:fixed; inset:0; z-index:100; cursor:pointer; transition:opacity .6s var(--soft); }
.oq-intro svg{ display:block; width:100%; height:100%; }
.oq-intro.out{ opacity:0; pointer-events:none; }

.oq-word{ position:absolute; left:50%; top:calc(50% + 20vmin); transform:translateX(-50%);
          margin:0; display:grid; justify-items:center; gap:9px; color:#fff; pointer-events:none; }
@media (max-width:720px){ .oq-word{ top:calc(50% + 29vmin); } }
.oq-word span{ display:block; overflow:hidden; }
.oq-word i{ display:block; font-style:normal; transform:translateY(calc((1 - var(--in, 0)) * 115%)); }
.oq-word span:first-child i{ font-family:var(--sans); font-weight:500; font-size:15px; letter-spacing:.56em; margin-right:-.56em; }
.oq-word span:last-child  i{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:15px; color:rgba(255,255,255,.55);
                             transform:translateY(calc((1 - var(--in, 0)) * 140%)); }

/* the site settles in behind the opening eye */
html.oq-arrived .panel.intro > *{ animation:oq-rise 1.3s var(--soft) both .1s; }
html.oq-arrived .panel.intro > *:nth-child(2){ animation-delay:.28s; }
html.oq-arrived .bar,html.oq-arrived .caption{ animation:oq-fade 1.2s var(--soft) both .35s; }
@keyframes oq-rise{ from{ opacity:0; transform:translateY(26px); } }
@keyframes oq-fade{ from{ opacity:0; } }

/* the studio's name is the page's one heading; it keeps the display look */
.panel h1{ margin:0; font-weight:300; }
/* the Arabic name, set in its own face under the Latin one */
[lang="ar"]{ font-family:"IBM Plex Sans Arabic",var(--sans); letter-spacing:0; }
.ar-name{ align-self:flex-start; margin:18px 0 0; font-size:clamp(17px,1.6vw,24px); font-weight:300; color:rgba(255,255,255,.72); }
.facts [lang="ar"]{ margin-top:6px; justify-self:start; }

/* ---- moving between pages ---- */
.page-veil{ position:fixed; inset:0; z-index:90; background:#101010; pointer-events:none;
            opacity:0; transition:opacity .36s var(--soft); }
.page-veil.show{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .page-veil{ display:none; } }

/* ---- the mark ---- */
.brand{ display:inline-flex; align-items:center; gap:9px; }
.brand .mark{ width:15px; height:15px; display:block; }

/* ---- a project laid out as an open, irregular grid ---- */
.mosaic{ display:grid; grid-template-columns:repeat(12,1fr); align-items:start;
         gap:clamp(34px,6vh,96px) clamp(14px,1.8vw,26px);
         padding-block:clamp(46px,8vh,96px); }
.mosaic .tile{ margin:0; }
.mosaic .tile figcaption{ margin:0; padding-top:12px; }
.mosaic .tile-note{ align-self:center; font-family:var(--serif); font-weight:300;
                    font-size:clamp(17px,1.55vw,24px); line-height:1.5; color:var(--soft);
                    opacity:0; transform:translateY(14px);
                    transition:opacity .9s var(--soft),transform .9s var(--soft); }
.mosaic .tile-note.in{ opacity:1; transform:none; }
@media (max-width:820px){
  .mosaic{ gap:clamp(30px,5vh,56px) 0; }
  .mosaic .tile,.mosaic .tile-note{ grid-column:1/13 !important; margin-top:0 !important; }
  .mosaic .tile-note{ font-size:17px; }
}

/* ---- the studio's two accounts, on the opening panel ---- */
.social{ display:flex; gap:12px; margin:30px 0 0; }
.social a{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
           border:1px solid rgba(255,255,255,.26); color:rgba(255,255,255,.62);
           transition:color .35s var(--soft),border-color .35s var(--soft),transform .35s var(--soft); }
.social a:hover{ color:#fff; border-color:#fff; transform:translateY(-2px); }
.social svg{ width:17px; height:17px; display:block; }
@media (max-width:720px){ .social{ margin-top:24px; } .social a{ width:40px; height:40px; } }