/* =====================================================
   ISMAEL SEDRATI — Cinematographer / Director
   Design tokens
   ===================================================== */
:root{
  --paper:        #faf8f4;
  --paper-raised: #f1ede3;
  --ink:          #151310;
  --ink-soft:     #57524a;
  --ink-faint:    #9a9488;
  --line:         #ddd7cc;
  --accent:       #b23a2e;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --nav-h: 76px;
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =====================================================
   NAV
   ===================================================== */
.site-nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:var(--paper); 
}
.site-nav .brand{
  font-family:var(--font-display);
  font-style:italic;
  font-size:20px;
  letter-spacing:.01em;
}
.site-nav .brand span{
  display:block;
  font-family:var(--font-mono);
  font-style:normal;
  font-size:10px;
  letter-spacing:.14em;
  color:var(--ink-faint);
  margin-top:2px;
}
.nav-links{ display:flex; gap:clamp(18px,3vw,40px); }
.nav-links a{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{
  color:var(--accent);
  border-color:var(--accent);
}
.nav-toggle{ display:none; }

@media (max-width: 720px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 0 0;
    background:var(--paper);
    flex-direction:column; gap:0;
    padding:8px var(--gutter);
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-links a{
    padding:16px 0; border-bottom:1px solid var(--line); width:100%;
  }
  .nav-links a{
  border-left:3px solid transparent;
  padding-left:10px;
   }
   .nav-links a[aria-current="page"]{
     border-bottom-color:var(--line);
     border-left-color:var(--accent);
   } 
  .nav-toggle{
    display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  }
}

/* =====================================================
   HERO / SHOWREEL (index.html)
   ===================================================== */
.hero{
  position:relative;
  height:min(86vh, 900px);
  min-height:460px;
  overflow:hidden;
  background:var(--ink);
}
.hero iframe{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.92; border:0;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,19,16,0) 40%, rgba(21,19,16,.75) 100%);
}
.hero-copy{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:34px;
  z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  color:#f4f1ea;
}
.hero-copy h1{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(32px, 5.4vw, 68px);
  line-height:1.02;
}
.hero-copy .hero-eyebrow{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#cfc9bd; margin-bottom:10px; display:block;
}
.hero-reel-link{
  display:inline-block;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#f4f1ea;
  border-bottom:1px solid rgba(244,241,234,.5);
  padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
.hero-reel-link:hover{
  color:var(--accent);
  border-color:var(--accent);
}
.hero-meta{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#cfc9bd; text-align:right; white-space:nowrap;
}

/* placeholder state when no reel file is present yet */
.hero.hero--noreel video{ display:none; }
.hero.hero--noreel{
  background:
    repeating-linear-gradient(90deg, rgba(21,19,16,.9) 0 14px, rgba(21,19,16,.78) 14px 16px),
    var(--ink);
}
.hero-placeholder{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:14px;
  color:#cfc9bd;
}
.hero.hero--noreel .hero-placeholder{ display:flex; }
.hero-placeholder .ring{
  width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(244,241,234,.4);
  display:flex; align-items:center; justify-content:center;
}
.hero-placeholder .ring::before{
  content:"";
  border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #f4f1ea;
  margin-left:3px;
}
.hero-placeholder span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}

/* =====================================================
   SECTION HEADINGS
   ===================================================== */
.section{ padding:clamp(56px,8vw,110px) var(--gutter); max-width:var(--maxw); margin:0 auto; }
.section-head{ margin-bottom:clamp(30px,5vw,56px); }
.section-head h2{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(28px,4vw,44px); margin:8px 0 0;
}

/* =====================================================
   CINEMATOGRAPHY GRID
   ===================================================== */
.work-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4vw,56px) clamp(24px,4vw,48px);
}
@media (max-width:820px){ .work-grid{ grid-template-columns:1fr; } }

.still-wrap{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--paper-raised);
}
.still-wrap img, .still-wrap video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.still-wrap .still{ transition:opacity .35s ease; }
.still-wrap .preview{ opacity:0; transition:opacity .35s ease; }
.project-card:hover .preview{ opacity:1; }

.still-wrap.is-placeholder{
  background:
    repeating-linear-gradient(135deg, var(--paper-raised) 0 18px, #e7e1d3 18px 20px);
}
.still-wrap.is-placeholder::before{
  content:"STILL — ADD IMAGE";
  position:absolute; inset:auto 14px 14px auto;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  color:var(--ink-faint); background:var(--paper); padding:4px 8px;
}
.still-wrap .play-tag{
  position:absolute; top:14px; right:14px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#f4f1ea; background:rgba(21,19,16,.55); padding:4px 8px;
  opacity:0; transition:opacity .25s ease;
}
.project-card:hover .play-tag{ opacity:1; }

.project-card a.card-link{ display:block; }
.project-meta{ padding-top:16px; }
.project-meta h3{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(19px,2vw,24px); margin:0 0 4px;
}
.project-meta .director-credit{ color:var(--ink-soft); font-style:normal; }
.project-meta .tech{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.03em;
  color:var(--ink-faint); margin-top:6px;
}

/* =====================================================
   DIRECTOR — feature blocks
   ===================================================== */
.feature{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
  padding:clamp(44px,7vw,84px) 0;
  border-top:1px solid var(--line);
}
.feature:first-of-type{ border-top:0; }
.feature:nth-of-type(even){ direction:rtl; }
.feature:nth-of-type(even) > *{ direction:ltr; }
@media (max-width:860px){
  .feature{ grid-template-columns:1fr; direction:ltr !important; }
}
.feature .still-wrap{ aspect-ratio:16/10; }
.feature-tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent);
  padding:5px 10px; margin-bottom:16px;
}
.feature h3{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(26px,3.4vw,40px); margin:0 0 16px; line-height:1.05;
}
.feature p.synopsis{ color:var(--ink-soft); max-width:46ch; margin:0 0 22px; }
.feature .view-link{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
}
.feature .view-link:hover{ color:var(--accent); border-color:var(--accent); }

/* =====================================================
   SLATE — technical credits block (signature element)
   ===================================================== */
.slate{
  border:1px solid var(--line);
  padding:18px 20px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:14px 20px;
  background:var(--paper-raised);
  margin:18px 0 0;
}
.slate .field .k{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); display:block; margin-bottom:4px;
}
.slate .field .v{ font-family:var(--font-mono); font-size:13px; }

/* =====================================================
   PROJECT DETAIL (project.html)
   ===================================================== */
.detail-head{ padding:44px var(--gutter) 0; max-width:var(--maxw); margin:0 auto; }
.back-link{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.back-link:hover{ color:var(--accent); }
.detail-head h1{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(32px,5vw,56px); margin:18px 0 6px;
}
.detail-head .director-credit{ color:var(--ink-soft); font-family:var(--font-display); font-size:clamp(16px,2vw,20px); }
.detail-synopsis{ max-width:62ch; color:var(--ink-soft); margin:18px 0 0; }
.detail-gallery{
  padding:clamp(40px,6vw,72px) var(--gutter);
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(20px,3vw,36px);
}
.detail-gallery .still-wrap{
  position:static;
  height:auto;
  aspect-ratio:auto;
  background:none;
}
.detail-gallery .still-wrap img,
.detail-gallery .still-wrap video{
  position:static;
  width:100%;
  height:auto;
  object-fit:contain;
}
/* =====================================================
   ABOUT / CONTACT
   ===================================================== */
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px);
  align-items:start;
}
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }
.about-grid p{ color:var(--ink-soft); max-width:52ch; }
.about-grid .portrait{ aspect-ratio:4/5; }
.contact-list{ margin-top:28px; }
.contact-list li{
  border-top:1px solid var(--line);
  padding:14px 0;
  display:flex; justify-content:space-between; align-items:baseline;
}
.contact-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-list .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.contact-list a{ font-family:var(--font-display); font-style:italic; font-size:18px; }
.contact-list a:hover{ color:var(--accent); }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{
  border-top:1px solid var(--line);
  padding:26px var(--gutter);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint);
}
.site-footer .socials{ display:flex; gap:18px; }
.site-footer a:hover{ color:var(--accent); }