/* ════════════════════════════════════════════════════════════
   Negin Zadehvakili — portfolio
   ════════════════════════════════════════════════════════════ */

:root{
  --paper:      #f3f0eb;
  --paper-warm: #eae5dd;
  --ink:        #191816;
  --ink-soft:   #4a4640;
  --muted:      #8d8578;
  --rule:       rgba(25,24,22,.13);
  --accent:     #7a5c4b;

  --sidebar-w:  clamp(260px, 20vw, 290px);
  --pad:        clamp(1.75rem, 5vw, 5rem);

  --serif: "Cousine", monospace;
  --sans:  "Cousine", monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem, .35vw + .87rem, 1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

.is-hidden{ display:none !important; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
}
.skip-link:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:1.5px solid var(--accent); outline-offset:4px; }

/* ── Shared type ─────────────────────────────────────────── */

.eyebrow{
  margin:0;
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
}

/* ══════════════════════════  SIDEBAR  ══════════════════════ */

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-w);
  background:var(--paper);
  z-index:60;
}

.sidebar__inner{
  height:100%;
  padding:clamp(2rem,4vh,3rem) clamp(1.5rem,2.2vw,2.25rem);
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.brand{ display:block; }

.brand__name{
  display:block;
  font-family:"Geist", sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.005em;
  white-space:nowrap;
}

.brand__role{
  display:block;
  margin-top:.7rem;
  max-width:14ch;
  font-size:.625rem;
  line-height:1.9;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ── Nav ─────────────────────────────────────────────────── */

.nav{ margin-top:auto; }

.nav ul{ margin:0; padding:0; list-style:none; }

.nav li + li{ margin-top:.15rem; }

.nav a{
  position:relative;
  display:block;
  padding:.5rem 0 .5rem 2rem;
  font-size:.9375rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
  transition:color .3s var(--ease), padding-left .35s var(--ease);
}

.nav a::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:1.25rem; height:1px;
  background:currentColor;
  transform:scaleX(.28);
  transform-origin:left;
  opacity:.45;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}

.nav a:hover{ color:var(--ink); }
.nav a:hover::before{ transform:scaleX(.7); opacity:.8; }

.nav a.is-active{ color:var(--ink); }
.nav a.is-active::before{ transform:scaleX(1); opacity:1; background:var(--accent); }

/* ── Sidebar foot ────────────────────────────────────────── */

.sidebar__foot{
  margin-top:auto;
  padding-top:1.75rem;
  border-top:1px solid var(--rule);
}

.ig{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8125rem;
  letter-spacing:.08em;
  color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.ig:hover{ color:var(--accent); }

.copy{
  margin:.9rem 0 0;
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--muted);
}

/* ══════════════════════════  MAIN  ═════════════════════════ */

main{ margin-left:var(--sidebar-w); }

/* ── Hero ────────────────────────────────────────────────── */

.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr minmax(0,46%);
  align-items:start;
  gap:clamp(2rem,4vw,4rem);
  position:relative;
}

.hero__text{
  padding:6rem var(--pad);
  max-width:34rem;
}

.hero__title{
  margin:1.25rem 0 0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.75rem, 6.5vw, 5.25rem);
  line-height:1.03;
  letter-spacing:-.01em;
}
.hero__title em{
  font-style:italic;
  color:var(--accent);
}

.hero__lede{
  margin:1.75rem 0 0;
  max-width:32ch;
  color:var(--ink-soft);
}

.scroll-cue{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:3rem;
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.scroll-cue svg{ transition:transform .5s var(--ease); }
.scroll-cue:hover{ color:var(--ink); }
.scroll-cue:hover svg{ transform:translateY(4px); }

.hero__figure{
  position:absolute;
  top:clamp(2.5rem,4vw,3.75rem);
  right:clamp(2.5rem,4vw,3.75rem);
  width:min(40vw,34rem);
  margin:0;
}
.hero__figure img{
  width:100%;
  height:auto;
  object-fit:contain;
  filter:saturate(.92) contrast(1.02);
}

/* ── Sections ────────────────────────────────────────────── */

.section{
  padding:clamp(5rem,12vh,9rem) var(--pad);
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  min-height:60svh;
  align-content:start;
}

.section--last{ padding-bottom:clamp(7rem,16vh,12rem); }

.section__head .eyebrow{ margin-bottom:.9rem; }

.section__head h2{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,2.1vw,2rem);
  line-height:1.15;
  letter-spacing:.005em;
}

.section__body{ max-width:44rem; padding-top:.35rem; }

/* Keep the Bio details quieter than the longer artist statement. */
#bio .section__body{ font-size:clamp(.85rem, .25vw + .8rem, .95rem); }

/* Prose */
.prose{ color:var(--ink-soft); max-width:38rem; }
.prose p{ margin:1.4em 0 0; }
.prose > * + *{ margin-top:1.4em; }
.prose > :first-child{ margin-top:0; }
.prose h3{
  margin:2.25em 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.375rem;
  letter-spacing:.005em;
}
.prose a{ border-bottom:1px solid var(--rule); }
.prose a:hover{ border-color:var(--accent); color:var(--accent); }

/* ── CV blocks (Education, etc.) ─────────────────────────── */

.prose + .cv,
.cv + .cv{ margin-top:clamp(2rem,4vh,3rem); }

.cv__title{
  margin:0 0 .85rem;
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

.cv__list{
  margin:0; padding:0; list-style:none;
  border-top:1px solid var(--rule);
  max-width:32rem;
}
.cv__list li{
  padding:.85rem 0;
  border-bottom:1px solid var(--rule);
  color:var(--ink-soft);
}

/* ── Project grid (unused until filled in) ───────────────── */

.works{
  margin:0; padding:0; list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.work figure{
  margin:0 0 1rem;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper-warm);
}
.work img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.work a:hover img{ transform:scale(1.04); }
.work h3{
  margin:0;
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:400;
}
.work__meta{
  margin:.25rem 0 0;
  font-size:.8125rem;
  letter-spacing:.06em;
  color:var(--muted);
}

/* ── Contact list ────────────────────────────────────────── */

.contact-list{
  margin:0; padding:0; list-style:none;
  border-top:1px solid var(--rule);
  max-width:32rem;
}
.contact-list li{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.5rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--rule);
}
.contact-list__label{
  flex:0 0 7rem;
  font-size:.6875rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:.28rem;
}
.contact-list a{
  border-bottom:1px solid var(--rule);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.contact-list a:hover{ color:var(--accent); border-color:var(--accent); }

/* ══════════════════════  MOBILE BAR  ═══════════════════════ */

.mobilebar{
  display:none;
  position:fixed; inset:0 0 auto 0;
  z-index:80;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1.1rem;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.mobilebar__name{
  font-family:"Geist", sans-serif;
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}

.menu-toggle{
  width:2.25rem; height:2.25rem;
  display:grid; align-content:center; gap:5px;
  padding:0 .3rem;
  background:none; border:0; cursor:pointer;
}
.menu-toggle span{
  height:1px; width:100%;
  background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.scrim{
  position:fixed; inset:0; z-index:55;
  background:rgba(25,24,22,.35);
  opacity:0; transition:opacity .35s var(--ease);
}
.scrim.is-on{ opacity:1; }

/* ══════════════════════  REVEAL  ═══════════════════════════ */

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ══════════════════════  RESPONSIVE  ═══════════════════════ */

@media (max-width:1024px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero__text{ padding-top:clamp(6rem,14vh,9rem); padding-bottom:clamp(2rem,6vh,4rem); max-width:none; }
  .hero__figure{
    position:static;
    width:calc(100% - (var(--pad) * 2));
    max-width:34rem;
    margin:0 var(--pad) clamp(2rem,6vh,4rem) auto;
  }
}

@media (max-width:860px){
  .mobilebar{ display:flex; }

  .sidebar{
    width:min(20rem,82vw);
    transform:translateX(-102%);
    transition:transform .45s var(--ease);
    box-shadow:0 0 60px rgba(25,24,22,.12);
  }
  .sidebar.is-open{ transform:none; }
  .sidebar__inner{ padding-top:5rem; }

  main{ margin-left:0; padding-top:3.6rem; }

  .section{ grid-template-columns:1fr; gap:1.5rem; min-height:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}