/* ============================================================
   Humam Musawwir — portfolio showcase
   Design system: cool paper, technical grotesque, editorial serif,
   mono metadata. Teal-forward with a sparing signal orange.
   ============================================================ */

:root{
  --paper:#edece7;
  --paper-2:#e4e2db;
  --panel:#f4f3ef;
  --ink:#181b1c;
  --graphite:#6a6d6a;
  --hairline:#cdccc4;
  --hairline-strong:#b9b8b0;
  --teal:#20444d;
  --teal-hi:#2c5c68;
  --orange:#cf5f27;
  --shadow:rgba(24,27,28,.14);

  --f-display:"Space Grotesk",system-ui,sans-serif;
  --f-body:"Newsreader",Georgia,serif;
  --f-mono:"Space Mono","SFMono-Regular",ui-monospace,monospace;

  --edge:clamp(20px,5vw,72px);
  --maxw:1320px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--teal);color:var(--paper)}

.mono{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.09em;
  font-size:.72rem;color:var(--graphite)}
.hair{height:1px;background:var(--hairline);border:0;margin:0}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--hairline);
}
.topbar-in{
  max-width:var(--maxw);margin:0 auto;padding:14px var(--edge);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
.wordmark{font-family:var(--f-display);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;font-size:.86rem}
.wordmark b{font-weight:700}
.topbar .disc{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--graphite)}

/* ============================================================
   INDEX PAGE
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge)}

.hero{padding:clamp(48px,9vw,110px) 0 clamp(30px,5vw,52px)}
.hero .eyebrow{margin-bottom:26px}
.hero h1{
  font-family:var(--f-body);font-weight:400;
  font-size:clamp(2rem,5.2vw,4rem);line-height:1.06;letter-spacing:-.012em;
  margin:0;max-width:16ch;
}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero .lede{
  margin:26px 0 0;max-width:52ch;color:var(--graphite);
  font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.62;
}
.hero .meta{
  margin-top:34px;display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;
  padding-top:18px;border-top:1px solid var(--hairline);
}
.hero .meta span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.hero .meta span i{color:var(--graphite);font-style:normal}

/* index layout: list + sticky preview */
.index{
  display:grid;grid-template-columns:1fr;gap:0;
  padding-bottom:clamp(60px,10vw,120px);
}
.index-head{display:flex;justify-content:space-between;align-items:end;
  padding:6px 0 14px;border-bottom:1px solid var(--ink)}
.index-head .lbl{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase}
.index-cols{display:grid;grid-template-columns:1fr;gap:0}

@media(min-width:920px){
  .index-cols{grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:start}
  .preview{position:sticky;top:96px}
}

/* list */
.works{list-style:none;margin:0;padding:0}
.work{
  position:relative;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:22px 4px;border-bottom:1px solid var(--hairline);
  transition:padding-left .35s cubic-bezier(.2,.7,.2,1),background .3s;
  cursor:pointer;
}
.work:hover,.work:focus-visible{outline:none;padding-left:16px;background:var(--panel)}
.work .num{font-family:var(--f-mono);font-size:.74rem;color:var(--teal);
  letter-spacing:.06em;padding-top:.35em;align-self:start}
.work:hover .num,.work.active .num{color:var(--orange)}
.work .titles h3{
  margin:0;font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.28rem,2.6vw,1.9rem);letter-spacing:-.01em;line-height:1.08;
}
.work .titles p{margin:.28em 0 0;font-style:italic;color:var(--graphite);
  font-size:1rem;line-height:1.35}
.work .wmeta{text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.work .wmeta .kind{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
  border:1px solid var(--hairline-strong);border-radius:999px;padding:3px 9px}
.work .wmeta .nums{font-family:var(--f-mono);font-size:.7rem;color:var(--graphite);
  letter-spacing:.04em;white-space:nowrap}
.work .arrow{position:absolute;right:2px;bottom:-1px;font-family:var(--f-mono);
  color:var(--orange);opacity:0;transform:translateX(-6px);transition:.3s;font-size:.8rem}
.work:hover .arrow{opacity:1;transform:none}

/* mobile inline thumbnail (shown only when preview column is hidden) */
.work .thumb-m{display:none}
@media(max-width:919px){
  .work{grid-template-columns:auto 1fr;grid-template-areas:"num titles" "thumb thumb" "meta meta";
    gap:12px 16px;padding:26px 4px}
  .work .num{grid-area:num}.work .titles{grid-area:titles}
  .work .wmeta{grid-area:meta;flex-direction:row;text-align:left;align-items:center;gap:12px;margin-top:2px}
  .work .thumb-m{grid-area:thumb;display:block;margin-top:12px;
    border:1px solid var(--hairline);background:#fff}
  .work .thumb-m img{width:100%;aspect-ratio:auto}
  .work .arrow{display:none}
}

/* preview (desktop) */
.preview{display:none}
@media(min-width:920px){
  .preview{display:block}
  .preview-frame{
    position:relative;border:1px solid var(--hairline-strong);background:#fff;
    box-shadow:0 24px 48px -28px var(--shadow);overflow:hidden;
  }
  .preview-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
  .preview-frame img{width:100%;display:block;transition:opacity .45s ease}
  .preview-cap{display:flex;justify-content:space-between;align-items:baseline;
    margin-top:14px;gap:16px}
  .preview-cap .pc-t{font-family:var(--f-display);font-weight:500;font-size:1rem}
  .preview-cap .pc-open{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--teal)}
  .preview-hint{margin-top:6px;font-family:var(--f-mono);font-size:.64rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--ink);margin-top:0}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:34px var(--edge) 46px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--graphite)}
.foot-in a:hover{color:var(--ink)}

/* ============================================================
   READER PAGE
   ============================================================ */
body.reader{background:var(--paper-2);overflow:hidden;height:100dvh}
.rbar{
  position:fixed;top:0;left:0;right:0;z-index:30;height:56px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(14px,3vw,26px);
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);
}
.rbar .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.rbar .back:hover{color:var(--teal)}
.rbar .rtitle{justify-self:center;text-align:center;line-height:1.1}
.rbar .rtitle b{font-family:var(--f-display);font-weight:500;font-size:.98rem;letter-spacing:.01em}
.rbar .rtitle span{display:block;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-top:2px}
.rbar .tools{justify-self:end;display:flex;gap:6px}
.iconbtn{
  width:38px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline-strong);background:var(--panel);border-radius:8px;
  cursor:pointer;color:var(--ink);transition:.18s}
.iconbtn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.iconbtn svg{width:17px;height:17px;display:block}

/* stage */
.stage-wrap{position:fixed;inset:56px 0 64px;display:flex;align-items:center;
  justify-content:center;padding:clamp(10px,2.4vw,30px)}
.flip-stage{max-width:100%;max-height:100%}
.flip-stage .page{background:#fff}
.flip-stage img{width:100%;height:100%;object-fit:contain;background:#fff}
/* page-flip shadow tuning */
.stf__parent{margin:0 auto}

/* loader */
.loader{position:fixed;inset:0;display:flex;flex-direction:column;gap:16px;
  align-items:center;justify-content:center;background:var(--paper-2);z-index:20}
.loader.hide{opacity:0;pointer-events:none;transition:opacity .5s}
.loader .bar{width:180px;height:2px;background:var(--hairline);overflow:hidden}
.loader .bar i{display:block;height:100%;width:40%;background:var(--teal);
  animation:slide 1.1s infinite ease-in-out}
@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.loader .l-t{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--graphite)}

/* controls */
.controls{position:fixed;left:0;right:0;bottom:0;height:64px;z-index:30;
  display:flex;align-items:center;justify-content:center;gap:22px;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(8px);border-top:1px solid var(--hairline)}
.nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--hairline-strong);
  background:var(--panel);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;color:var(--ink);transition:.18s}
.nav:hover{background:var(--teal);color:var(--paper);border-color:var(--teal)}
.nav:disabled{opacity:.32;cursor:default;background:var(--panel);color:var(--ink);
  border-color:var(--hairline)}
.nav svg{width:16px;height:16px}
.counter{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;
  min-width:88px;text-align:center;color:var(--ink)}
.counter b{color:var(--teal)}

/* click zones for turning */
.zone{position:fixed;top:56px;bottom:64px;width:16%;max-width:180px;z-index:10;
  cursor:pointer;background:transparent}
.zone.left{left:0}.zone.right{right:0}

@media(max-width:620px){
  .rbar .rtitle b{font-size:.86rem}
  .zone{display:none}
  .controls{gap:16px}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .loader .bar i{animation:none;width:100%}
}

/* focus visibility */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}