/* =========================================================
   NKECHI COLETTE NJOTEH — PORTFOLIO
   Design language: a working call sheet / production slate.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #14141c;   /* near-black, background */
  --ink-soft:   #1c1d27;   /* panel background */
  --paper:      #f7f3ea;   /* warm off-white, text on dark */
  --paper-dim:  #cfcbc0;   /* muted text on dark */
  --coral:      #ff5a3c;   /* primary accent — clapperboard red-orange */
  --amber:      #f2b705;   /* secondary accent — tally light amber */
  --teal:       #1fa98d;   /* tertiary accent — slate chalk teal */
  --line:       rgba(247,243,234,0.14);
  --radius:     2px;

  --display: 'Bebas Neue', sans-serif;
  --body:    'Work Sans', -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; text-decoration:none; }
img, video{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber);
}
h1,h2,h3{ font-family:var(--display); letter-spacing:.02em; line-height:1; }
.section-title{
  font-size:clamp(32px,5vw,52px); text-transform:uppercase;
  margin:10px 0 30px; color:var(--paper);
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,20,28,0.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-mark{ font-family:var(--display); font-size:22px; letter-spacing:.06em; }
.nav-mark span{ color:var(--coral); }
.nav-links{ display:flex; gap:28px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.nav-links a{ color:var(--paper-dim); transition:color .15s; }
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--amber); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--paper); width:40px; height:40px; font-size:20px; border-radius:var(--radius); }

@media (max-width:720px){
  .nav-links{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0;
    background:var(--ink-soft); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-links.open{ max-height:320px; }
  .nav-links a{ padding:16px 24px; border-top:1px solid var(--line); }
  .nav-toggle{ display:block; }
}

/* ---------- HERO — production slate ---------- */
.hero{ padding:56px 0 40px; border-bottom:1px solid var(--line); }
.slate{
  border:2px solid var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
}
.slate-top{
  background:repeating-linear-gradient(45deg, var(--ink) 0 18px, var(--ink-soft) 18px 36px);
  border-bottom:2px solid var(--paper);
  padding:18px 22px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.slate-top .tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--coral); color:var(--ink); padding:4px 10px; border-radius:var(--radius); font-weight:600;
}
.slate-body{ padding:36px 22px 30px; background:var(--ink-soft); }
.slate-name{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(40px,9vw,88px); line-height:.95; color:var(--paper);
}
.slate-name em{ font-style:normal; color:var(--coral); }
.slate-role{ font-family:var(--mono); color:var(--teal); font-size:clamp(13px,2vw,16px); margin-top:10px; letter-spacing:.06em; text-transform:uppercase; }
.slate-fields{
  margin-top:28px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line);
}
.slate-fields div{ padding:14px 18px 0; border-left:1px solid var(--line); }
.slate-fields div:first-child{ border-left:none; }
.slate-fields .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--paper-dim); text-transform:uppercase; }
.slate-fields .v{ font-family:var(--mono); font-size:14px; color:var(--amber); margin-top:4px; }
@media (max-width:640px){
  .slate-fields{ grid-template-columns:repeat(2,1fr); }
  .slate-fields div{ border-left:none; border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
  .slate-fields div:nth-child(-n+2){ border-top:none; margin-top:0; }
}

/* ---------- NOW SHOOTING banner ---------- */
.now{
  background:var(--coral); color:var(--ink); padding:12px 0; overflow:hidden;
  font-family:var(--mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
}
.now .wrap{ display:flex; gap:10px; align-items:center; }
.now .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); animation:pulse 1.6s infinite; flex:none; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* ---------- SECTION generic ---------- */
section{ padding:64px 0; border-bottom:1px solid var(--line); }
.lede{ max-width:640px; color:var(--paper-dim); font-size:17px; }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:48px; }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }
.stat-card{ background:var(--ink-soft); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:14px; }
.stat-card .num{ font-family:var(--display); font-size:38px; color:var(--amber); }
.stat-card .lbl{ font-family:var(--mono); font-size:12px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- CALL SHEET / EXPERIENCE ---------- */
.callsheet{ border-top:1px solid var(--line); }
.entry{
  display:grid; grid-template-columns:150px 1fr; gap:24px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
@media (max-width:640px){ .entry{ grid-template-columns:1fr; gap:8px; } }
.entry .tc{ font-family:var(--mono); color:var(--teal); font-size:13px; letter-spacing:.05em; white-space:nowrap; }
.entry h3{ font-family:var(--body); font-weight:700; font-size:19px; text-transform:none; letter-spacing:0; color:var(--paper); }
.entry .co{ color:var(--amber); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin:2px 0 10px; }
.entry ul{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.entry li{ color:var(--paper-dim); font-size:14.5px; padding-left:16px; position:relative; }
.entry li::before{ content:'—'; position:absolute; left:0; color:var(--coral); }

/* ---------- CREDITS grid ---------- */
.credits-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.credit-card{
  background:var(--ink-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; transition:transform .15s, border-color .15s;
}
.credit-card:hover{ transform:translateY(-3px); border-color:var(--coral); }
.credit-card .show{ font-family:var(--display); font-size:22px; text-transform:uppercase; color:var(--paper); }
.credit-card .net{ font-family:var(--mono); font-size:11px; color:var(--paper-dim); text-transform:uppercase; margin-top:2px; }
.chip{
  display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 9px; border-radius:99px; background:var(--teal); color:var(--ink); font-weight:600;
}

/* ---------- SKILLS ---------- */
.skills{ display:flex; flex-wrap:wrap; gap:10px; }
.skill{
  font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid var(--line); padding:8px 14px; border-radius:99px; color:var(--paper-dim);
}
.skill:nth-child(3n+1){ border-color:var(--coral); color:var(--coral); }
.skill:nth-child(3n+2){ border-color:var(--amber); color:var(--amber); }
.skill:nth-child(3n+3){ border-color:var(--teal); color:var(--teal); }

/* ---------- GALLERY ---------- */
.gallery-head{ display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.gallery-item{
  aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; position:relative;
  background:var(--ink-soft); border:1px solid var(--line);
}
.gallery-item img, .gallery-item video{ width:100%; height:100%; object-fit:cover; }
.gallery-empty{
  grid-column:1/-1; text-align:center; padding:48px 20px; color:var(--paper-dim);
  font-family:var(--mono); font-size:13px; border:1px dashed var(--line); border-radius:var(--radius);
}
.gallery-empty a{ color:var(--amber); text-decoration:underline; }

/* ---------- EDUCATION ---------- */
.edu-item{ border-bottom:1px solid var(--line); padding:16px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.edu-item .school{ font-weight:600; color:var(--paper); }
.edu-item .yrs{ font-family:var(--mono); color:var(--paper-dim); font-size:13px; }

/* ---------- CONTACT / FOOTER ---------- */
.footer{ padding:56px 0 40px; text-align:center; }
.footer .section-title{ margin-bottom:10px; }
.cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.btn{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:13px;
  padding:14px 26px; border-radius:var(--radius); font-weight:600; border:1px solid var(--paper);
}
.btn-primary{ background:var(--coral); border-color:var(--coral); color:var(--ink); }
.btn-primary:hover{ background:var(--amber); border-color:var(--amber); }
.foot-meta{ margin-top:48px; color:var(--paper-dim); font-family:var(--mono); font-size:12px; }