/* =====================================================================
   Deemah Alsharif — Portfolio
   Design tokens live in :root. Change colors & fonts there.
   ===================================================================== */
:root{
  --ink:#13110e;
  --paper:#ffffff;
  --paper-2:#f6f4ef;
  --card:#f1efe9;
  --muted:#6f6a62;
  --line:#e7e3da;
  --accent:#5c6049;        /* muted olive / sage */
  --accent-2:#3f4633;      /* deeper olive (used sparingly) */

  --font-display:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif:"Fraunces", Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --maxw:1320px;
  --gutter:clamp(20px,5vw,72px);
  --nav-h:84px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--accent); color:#fff;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}

/* ---------- Custom cursor (desktop) ---------- */
.cursor{position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .25s, height .25s, background .25s, opacity .25s; mix-blend-mode:difference; opacity:0;}
.cursor.show{opacity:1;}
.cursor.grow{width:54px; height:54px; background:#fff;}
@media (hover:none){ .cursor{display:none;} }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{position:sticky; top:0; z-index:200; background:color-mix(in srgb,var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav__inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;}
.brand{font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.01em; line-height:1;}
.brand small{display:block; font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:5px;}
.nav__links{display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0;}
.nav__links a{font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; position:relative; padding:4px 0;}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--accent); transition:width .3s ease;}
.nav__links a:hover::after, .nav__links a.is-active::after{width:100%;}
.nav__toggle{display:none; background:none; border:0; cursor:pointer; padding:10px; margin-right:-10px;}
.nav__toggle span{display:block; width:26px; height:2px; background:var(--ink); margin:6px 0; transition:.3s;}

@media (max-width:900px){
  .nav__toggle{display:block;}
  .nav__links{position:fixed; inset:0; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:6px; padding:0 var(--gutter); background:var(--ink);
    transform:translateY(-100%); transition:transform .5s cubic-bezier(.7,0,.2,1);}
  body.menu-open .nav__links{transform:translateY(0);}
  .nav__links a{color:var(--paper); font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,9vw,3.4rem); text-transform:none; letter-spacing:-.01em; padding:8px 0;}
  .nav__links a::after{display:none;}
  body.menu-open .nav__toggle span{background:var(--paper);}
  body.menu-open .nav__toggle span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  body.menu-open .nav__toggle span:nth-child(2){opacity:0;}
  body.menu-open .nav__toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{padding:clamp(50px,9vw,120px) 0 clamp(30px,5vw,60px); position:relative;}
.hero__role{font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 26px; font-weight:600;}
.hero h1{font-family:var(--font-body); font-weight:500; letter-spacing:-.035em; line-height:1;
  font-size:clamp(2rem,5.5vw,3.8rem); margin:0;}
.hero h1 em{font-family:inherit; font-style:normal; font-weight:500; letter-spacing:-.035em;}
.hero__sub{display:flex; flex-wrap:wrap; gap:18px 40px; align-items:flex-end; justify-content:space-between; margin-top:40px;}
.hero__sub p{max-width:46ch; font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1.45; margin:0;}
.hero__meta{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:right; line-height:1.9;}

/* Marquee */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:18px 0; margin-top:clamp(40px,6vw,80px); background:var(--ink); color:var(--paper);}
.marquee__track{display:inline-flex; white-space:nowrap; will-change:transform; animation:scroll 32s linear infinite;}
.marquee__track span{font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,3vw,2.4rem); padding:0 28px; letter-spacing:-.01em;}
.marquee__track span::after{content:"✦"; color:var(--accent); margin-left:56px; font-size:.7em; vertical-align:middle;}
@keyframes scroll{to{transform:translateX(-50%);}}

/* =====================================================================
   SECTION HEADERS
   ===================================================================== */
.shead{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin:clamp(56px,8vw,110px) 0 36px; flex-wrap:wrap;}
.shead h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,4.5vw,3.4rem); letter-spacing:-.02em; margin:0; line-height:1;}
.shead .count{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}

/* =====================================================================
   WORK GRID
   ===================================================================== */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 40px;}
.filters button{background:transparent; border:1px solid var(--line); color:var(--muted); cursor:pointer;
  padding:9px 18px; border-radius:40px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; transition:.25s;}
.filters button:hover{border-color:var(--ink); color:var(--ink);}
.filters button.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.2vw,56px);}
.grid.stagger > *:nth-child(even){transform:translateY(46px);}
.pcard{display:block; cursor:pointer;}
.pcard__media{position:relative; overflow:hidden; background:var(--card); aspect-ratio:3/2;}
.pcard__media img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.pcard:hover .pcard__media img{transform:scale(1.06);}
.pcard__num{position:absolute; top:16px; left:18px; font-family:var(--font-display); font-weight:700; font-size:14px; color:#fff; mix-blend-mode:difference; letter-spacing:.05em;}
.pcard__cat{position:absolute; bottom:16px; left:18px; right:18px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; mix-blend-mode:difference;}
.pcard__foot{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:18px 2px 0;}
.pcard__title{font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.3vw,1.9rem); letter-spacing:-.015em; line-height:1.05;}
.pcard__year{font-size:13px; color:var(--muted); letter-spacing:.08em; white-space:nowrap;}
.pcard__sum{color:var(--muted); font-size:15px; margin-top:8px; padding:0 2px; max-width:48ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em;}
.grid{align-items:start;}
@media (max-width:760px){ .grid{grid-template-columns:1fr; gap:34px;} .grid.stagger > *:nth-child(even){transform:none;} }

/* =====================================================================
   PROJECT DETAIL
   ===================================================================== */
.p-hero{padding:clamp(30px,5vw,60px) 0 0;}
.p-back{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:32px;}
.p-back:hover{color:var(--accent);}
.p-cat{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:18px;}
.p-title{font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,7.5vw,6rem); letter-spacing:-.025em; line-height:.95; margin:0 0 30px;}
.p-meta{display:flex; flex-wrap:wrap; gap:14px 48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; margin-bottom:clamp(36px,5vw,64px);}
.p-meta div{min-width:120px;}
.p-meta dt{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.p-meta dd{margin:0; font-size:15.5px; font-weight:500;}
.p-body{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(30px,5vw,80px); align-items:start;}
.p-body__text p{font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.6; margin:0 0 20px;}
.p-skills{display:flex; flex-wrap:wrap; gap:8px;}
.p-skills span{font-size:12px; letter-spacing:.04em; border:1px solid var(--line); padding:7px 14px; border-radius:30px; color:var(--ink);}
.p-skills h3{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); width:100%; margin:0 0 4px;}
@media (max-width:820px){ .p-body{grid-template-columns:1fr;} }

/* media */
.media{margin:clamp(40px,6vw,90px) 0 0; display:flex; flex-direction:column; gap:clamp(20px,3vw,40px);}
.media__label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:flex; align-items:center; gap:10px;}
.media__label::before{content:""; width:26px; height:1px; background:var(--accent);}
.frame{position:relative; width:100%; background:var(--card); border:1px solid var(--line);}
.frame--doc{height:min(90vh,900px);}
.frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.media video{width:100%; display:block; background:#000;}
.media img{width:100%;}
.media__imgrow{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,24px);}
@media (max-width:680px){ .media__imgrow{grid-template-columns:1fr;} }
.doc-open{display:inline-block; margin-top:10px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:3px;}

/* flipbook */
.flipbook-row{display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,44px); align-items:flex-start; justify-content:center;}
.flipbook-row--multi .flipbook-wrap{flex:0 0 auto;}
.flipbook-wrap{display:flex; flex-direction:column; align-items:center; padding:clamp(10px,2vw,24px) 0;}
.flipbook{margin:0 auto;}
.flipbook .stf__parent{margin:0 auto;}
.flip-controls{display:flex; align-items:center; gap:22px; margin-top:22px;}
.flip-controls button{width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; transition:.2s;}
.flip-controls button:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.flip-page-num{font-size:13px; letter-spacing:.14em; color:var(--muted); min-width:74px; text-align:center;}
.flip-hint{font-size:12px; letter-spacing:.12em; color:var(--accent); margin-top:14px; text-transform:uppercase; display:flex; align-items:center; gap:8px; animation:flippulse 2.4s ease-in-out infinite;}
.flip-hint span{display:inline-block; font-size:15px; animation:flipspin 2.4s ease-in-out infinite;}
@keyframes flippulse{0%,100%{opacity:.55} 50%{opacity:1}}
@keyframes flipspin{0%,70%{transform:rotate(0)} 85%{transform:rotate(180deg)} 100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .flip-hint, .flip-hint span{animation:none;} }
.flipbook--fallback{display:flex; flex-direction:column; gap:14px;}
.flipbook--fallback img{width:100%;}

/* prev / next */
.pnext{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); margin-top:clamp(60px,9vw,120px);}
.pnext a{background:var(--paper); padding:clamp(28px,5vw,56px) var(--gutter); transition:.3s;}
.pnext a:hover{background:var(--ink); color:var(--paper);}
.pnext small{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.pnext a:hover small{color:var(--paper);}
.pnext strong{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.6vw,2rem); margin-top:10px; letter-spacing:-.015em;}
.pnext a:last-child{text-align:right;}

/* =====================================================================
   PHOTOGRAPHY
   ===================================================================== */
.gallery{columns:3 300px; column-gap:clamp(12px,1.6vw,22px); margin-top:40px;}
.gallery img{width:100%; margin:0 0 clamp(12px,1.6vw,22px); cursor:zoom-in; background:var(--card); break-inside:avoid; transition:filter .4s, transform .4s;}
.gallery img:hover{filter:contrast(1.05) saturate(1.05);}

.lightbox{position:fixed; inset:0; z-index:500; display:none; background:rgba(12,11,10,.96); align-items:center; justify-content:center;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw; max-height:88vh; object-fit:contain;}
.lb-btn{position:absolute; background:none; border:0; color:#fff; cursor:pointer; font-size:40px; line-height:1; padding:16px; opacity:.8; transition:.2s;}
.lb-btn:hover{opacity:1;}
.lb-close{top:14px; right:22px; font-size:34px;}
.lb-prev{left:10px; top:50%; transform:translateY(-50%);}
.lb-next{right:10px; top:50%; transform:translateY(-50%);}
.lb-count{position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#fff; font-size:12px; letter-spacing:.16em;}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about-lead{font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,4.6vw,3.6rem); line-height:1.06; letter-spacing:-.02em; max-width:18ch; margin:0 0 50px;}
.about-sub{font-family:var(--font-display); font-weight:400; color:var(--muted); font-size:clamp(1.1rem,2.4vw,1.7rem); line-height:1.3; letter-spacing:-.005em; max-width:28ch; margin:0 0 52px;}
.about-intro{display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:clamp(30px,5vw,80px); margin-bottom:clamp(40px,6vw,72px);}
.about-intro__text{grid-column:1; min-width:0;}
.about-portrait{grid-column:2; justify-self:center; width:clamp(170px,20vw,238px); aspect-ratio:1/1; object-fit:cover; background:var(--card);}
@media (max-width:680px){ .about-intro{grid-template-columns:1fr; row-gap:28px;} .about-intro__text,.about-portrait{grid-column:auto;} .about-portrait{justify-self:start; width:180px;} }
.about-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(30px,5vw,80px); align-items:start;}
.about-grid p{font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.62; margin:0 0 20px;}
.about-facts{border-top:2px solid var(--ink); padding-top:18px;}
.about-facts dt{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:18px;}
.about-facts dd{margin:4px 0 0; font-size:16px; font-weight:500;}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }

/* Worked with — logo row */
.worked-with{margin-top:38px; padding-top:30px; border-top:1px solid var(--line);}
.ww-title{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 22px;}
.logo-row{display:flex; flex-wrap:nowrap; align-items:center; gap:clamp(12px,1.6vw,22px);}
.logo-row .logo{height:54px; width:auto; max-width:150px; object-fit:contain; filter:grayscale(1); opacity:.45; transition:filter .35s ease, opacity .35s ease, transform .35s ease;}
.logo-row .logo:hover{filter:grayscale(0); opacity:1; transform:translateY(-3px);}
@media (max-width:520px){ .logo-row{gap:12px;} .logo-row .logo{height:36px; max-width:96px;} }

/* =====================================================================
   CONTACT / CTA
   ===================================================================== */
.cta{background:var(--paper-2); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(48px,8vw,110px) var(--gutter); text-align:center;}
.cta h2{font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,8vw,6.5rem); letter-spacing:-.03em; line-height:.95; margin:0;}
.cta h2 a{color:var(--accent);}
.cta p{color:var(--muted); max-width:48ch; margin:24px auto 0; font-size:1.1rem;}

.form{max-width:640px; margin:40px auto 0; text-align:left;}
.form label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:24px 0 8px;}
.form input,.form textarea{width:100%; padding:14px 0; border:0; border-bottom:1px solid var(--line); background:transparent; font-family:inherit; font-size:17px; color:var(--ink);}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--accent);}
.form textarea{resize:vertical; min-height:130px;}
.btn{margin-top:32px; cursor:pointer; background:var(--accent); color:#fff; border:0; padding:16px 44px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; transition:transform .2s, opacity .2s;}
.btn:hover{transform:translateY(-2px); opacity:.92;}
.form__note{margin-top:18px; font-size:13.5px; color:var(--muted);}
.form__note a{border-bottom:1px solid currentColor;}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{padding:48px 0;}
.footer__inner{display:flex; flex-wrap:wrap; gap:18px 36px; align-items:center; justify-content:space-between;}
.footer a{font-size:13px; letter-spacing:.06em; color:var(--muted);}
.footer a:hover{color:var(--ink);}
.footer__big{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,8vw,5rem); letter-spacing:-.03em; line-height:1; width:100%; margin-bottom:30px;}

/* =====================================================================
   Reveal
   ===================================================================== */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none;} .marquee__track{animation:none;} }