/* ============================================
   Lola Maltz — Portfolio Site
   ============================================ */

:root{
  --bg: #0d0b10;
  --bg-alt: #131015;
  --ink: #f3ede4;
  --ink-dim: #c9c0b8;
  --ink-faint: #948b84;
  --accent: #d8a15a;
  --accent-2: #e6c199;
  --rose: #b5738a;
  --line: rgba(243,237,228,0.12);
  --shadow: 0 20px 60px rgba(0,0,0,0.45);
  --radius: 14px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--serif); font-weight:500; margin:0; color: var(--ink); }
p{ margin:0 0 1em; }
.container{
  width:100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.section{ padding: 130px 0; position: relative; }
.section.alt{ background: var(--bg-alt); }
.kicker{
  font-family: var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--accent);
  margin-bottom: 18px;
}
.kicker.center{ text-align:center; }
.kicker.light{ color: var(--accent-2); }
.section-title{ font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 56px; }
.section-title.center{ text-align:center; }
.section-title.light{ color:#fff; }

/* film-grain overlay for texture */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 999;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; background: var(--bg); z-index: 2000;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
#loader span{
  font-family: var(--serif); font-size: 1.4rem; letter-spacing:.5em; color: var(--accent);
  opacity:0; animation: loaderFade 1.6s var(--ease) forwards;
}
@keyframes loaderFade{ 0%{opacity:0; letter-spacing:.9em;} 100%{opacity:1; letter-spacing:.5em;} }
#loader.hide{ opacity:0; visibility:hidden; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 15px 34px; border-radius: 999px;
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  transition: all .35s var(--ease); border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background: linear-gradient(135deg,var(--accent),var(--rose)); color:#161016; font-weight:500; box-shadow: 0 12px 30px rgba(216,161,90,.25); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(216,161,90,.4); }
.btn-outline{ border-color: rgba(243,237,228,.35); color: var(--ink); }
.btn-outline:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

/* ---------- Header / Nav ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 22px 0; transition: all .4s var(--ease);
  background: transparent;
}
.site-header.scrolled{
  background: rgba(13,11,16,.82); backdrop-filter: blur(14px);
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family: var(--serif); font-size: 1.35rem; letter-spacing:.08em; color: var(--ink); }
.logo.small{ font-size:1.1rem; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-link{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-dim);
  position:relative; padding: 4px 0; transition: color .3s ease;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background: var(--accent);
  transition: width .3s var(--ease);
}
.nav-link:hover, .nav-link.active{ color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-cta{
  border:1px solid rgba(216,161,90,.5); padding: 9px 20px; border-radius:999px; color: var(--accent) !important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background: var(--accent); color:#161016 !important; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:600;
}
.nav-toggle span{ width:26px; height:1px; background: var(--ink); transition: all .3s var(--ease); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height: 100vh; display:flex; align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform: scale(1.08); animation: heroPan 22s ease-in-out infinite alternate;
}
@keyframes heroPan{ 0%{ transform: scale(1.08) translate(0,0);} 100%{ transform: scale(1.14) translate(-1%,-1%);} }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,11,16,.55) 0%, rgba(13,11,16,.72) 55%, var(--bg) 100%);
}
.hero-content{ position:relative; z-index:2; text-align:center; }
.eyebrow{
  font-size:.85rem; letter-spacing:.3em; text-transform:uppercase; color: var(--accent-2); margin-bottom: 22px;
}
.hero-title{
  font-size: clamp(3.2rem, 10vw, 7.5rem); line-height: .95; color:#fff;
  font-weight: 500; letter-spacing: .01em;
}
.hero-title .accent{ display:block; color: var(--accent); font-style: italic; }
.hero-sub{
  max-width: 480px; margin: 26px auto 40px; color: var(--ink-dim); font-size: 1.05rem;
}
.hero-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
}
.scroll-cue span{
  display:block; width:1px; height:52px; background: linear-gradient(var(--accent), transparent);
  animation: scrollCue 2s ease-in-out infinite;
}
@keyframes scrollCue{ 0%{ opacity:0; transform: translateY(-10px);} 50%{opacity:1;} 100%{ opacity:0; transform: translateY(10px);} }

/* ---------- About ---------- */
.about-grid{
  display:grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items:center;
}
.about-media-frame{
  position:relative; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.about-media-frame::after{
  content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.about-media-frame img{ width:100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.about-media-frame:hover img{ transform: scale(1.04); }
.about-copy .lede{ font-size:1.2rem; color: var(--ink); font-family: var(--serif); font-style:italic; }
.about-copy p{ color: var(--ink-dim); }
.stat-row{
  display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top: 40px; padding-top: 32px; border-top:1px solid var(--line);
}
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat-num{ font-family: var(--serif); font-size:1.3rem; color: var(--accent); }
.stat-label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); }

/* ---------- Resume ---------- */
.headshot-resume-row{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 28px; max-width: 760px; margin: 0 auto 50px; align-items:end;
}
.headshot-card{
  margin:0; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); position:relative;
  border: 1px solid var(--line);
}
.headshot-card img{ width:100%; aspect-ratio: 4/5; object-fit:cover; transition: transform .6s var(--ease); }
.headshot-card:hover img{ transform: scale(1.05); }
.headshot-card figcaption{
  position:absolute; bottom:0; left:0; right:0; padding: 14px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-dim);
}
.resume-preview-card{
  display:block; position:relative; border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s ease;
}
.resume-preview-card:hover{ transform: translateY(-4px); border-color: rgba(216,161,90,.5); }
.resume-preview-card img{ width:100%; aspect-ratio: 4/5.5; object-fit:cover; object-position: top; filter: brightness(.92); }
.resume-preview-tag{
  position:absolute; bottom:0; left:0; right:0; padding: 12px 16px; text-align:center;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent-2);
}
.resume-download{ text-align:center; margin-bottom: 70px; }

.credits-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.credit-block{
  background: rgba(243,237,228,.03); border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; transition: border-color .3s ease, transform .3s ease;
}
.credit-block:hover{ border-color: rgba(216,161,90,.4); transform: translateY(-4px); }
.credit-block h3{
  font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); margin-bottom:18px; font-family: var(--sans); font-weight:500;
}
.credit-block ul li{
  padding: 8px 0; border-bottom: 1px dashed var(--line); color: var(--ink-dim); font-size:.92rem;
}
.credit-block ul li:last-child{ border-bottom:none; }
.credit-block .role{ color: var(--ink); font-weight:500; }
.credit-block ul.plain li{ color: var(--ink-dim); }
.credit-block .note{ margin-top:14px; font-size:.8rem; color: var(--ink-faint); font-style:italic; }

/* ---------- Videos ---------- */
.video-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.video-card h3{
  margin-top: 18px; font-size: 1.15rem; font-weight:400; color: var(--ink-dim); text-align:center;
}
.video-card h3 em{ color: var(--ink); font-style: italic; }
.video-frame{
  position:relative; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line); cursor:pointer;
}
.video-frame img{ width:100%; aspect-ratio: 16/9; object-fit:cover; transition: transform .6s var(--ease), filter .4s ease; }
.video-frame:hover img{ transform: scale(1.06); filter: brightness(.65); }
.play-btn{
  position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%;
  background: rgba(13,11,16,.55); border: 1px solid rgba(243,237,228,.4); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: all .35s var(--ease);
}
.play-btn svg{ width:26px; height:26px; fill:#fff; margin-left:3px; }
.video-frame:hover .play-btn{ background: var(--accent); border-color: var(--accent); transform: scale(1.1); }
.video-frame:hover .play-btn svg{ fill:#161016; }

/* ---------- Musical ---------- */
.musical-grid{ display:grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items:center; }
.musical-poster img{ border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid var(--line); }
.musical-copy h2{ font-size: clamp(1.9rem,3.4vw,2.7rem); margin-bottom: 20px; }
.musical-copy .lede{ font-family: var(--serif); font-style: italic; font-size:1.15rem; color: var(--ink); }
.musical-credits{ margin: 22px 0 34px; display:flex; flex-direction:column; gap:10px; }
.musical-credits li{
  font-size:.9rem; color: var(--ink-dim); padding-bottom:10px; border-bottom: 1px dashed var(--line);
}
.musical-credits li span{
  display:inline-block; min-width: 190px; color: var(--accent-2); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
}
.musical-video-card{ max-width: 480px; }
.musical-video-card .video-frame img{ aspect-ratio: 16/10; }

/* ---------- Contact ---------- */
.contact{ position:relative; overflow:hidden; padding: 150px 0; }
.contact-bg{
  position:absolute; inset:0; background-size:cover; background-position: center 20%;
  filter: grayscale(.2);
}
.contact-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(13,11,16,.88) 30%, rgba(13,11,16,.92) 100%);
}
.contact-inner{ position:relative; z-index:2; }
.contact-lede{ max-width: 520px; margin: 0 auto 50px; color: var(--ink-dim); }
.contact-lede.light{ color: var(--ink-dim); }
.contact-cards{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 900px; margin: 0 auto;
}
.contact-card{
  display:flex; flex-direction:column; gap:8px; padding: 30px 26px; border-radius: var(--radius);
  border: 1px solid rgba(243,237,228,.18); background: rgba(255,255,255,.03);
  transition: all .35s var(--ease); text-align:center; align-items:center;
}
.contact-card:hover{ border-color: var(--accent); background: rgba(216,161,90,.08); transform: translateY(-5px); }
.contact-label{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color: var(--accent); }
.contact-value{ font-family: var(--serif); font-size:1.15rem; color:#fff; }

.contact-or{ margin: 46px 0 26px; text-align:center; color: var(--ink-faint); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.contact-form{ max-width: 640px; margin: 0 auto; display:flex; flex-direction:column; gap:20px; text-align:left; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color: var(--accent); }
.form-field input, .form-field select, .form-field textarea{
  background: rgba(255,255,255,.04); border:1px solid rgba(243,237,228,.18); border-radius: 10px;
  padding: 13px 16px; color: var(--ink); font-family: var(--sans); font-size:.95rem;
}
.form-field select option{ background: var(--bg-alt); color: var(--ink); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color: var(--accent); }
.form-field textarea{ resize: vertical; min-height: 120px; }
.contact-form .btn{ align-self:center; }
.form-status{ text-align:center; font-size:.85rem; color: var(--ink-dim); min-height: 20px; }
.form-status.error{ color: #e2635a; }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer{ padding: 46px 0; border-top: 1px solid var(--line); background: var(--bg); }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
  color: var(--ink-faint); font-size:.82rem;
}
.footer-links{ display:flex; gap:22px; }
.footer-links a{ color: var(--ink-faint); transition: color .3s ease; }
.footer-links a:hover{ color: var(--accent); }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background: rgba(5,4,6,.94); z-index: 1500;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition: opacity .35s ease, visibility .35s ease; padding: 30px;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-inner{ width:100%; max-width: 980px; }
.lightbox-inner video{ width:100%; border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.6); background:#000; }
.lightbox-close{
  position:absolute; top:26px; right:32px; background:none; border:none; color:#fff; font-size:2.4rem;
  line-height:1; cursor:pointer; font-family: var(--sans); font-weight:300; transition: color .3s ease, transform .3s ease;
}
.lightbox-close:hover{ color: var(--accent); transform: rotate(90deg); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .about-grid, .musical-grid{ grid-template-columns: 1fr; gap: 46px; }
  .musical-poster{ max-width: 320px; margin: 0 auto; }
  .credits-grid{ grid-template-columns: 1fr 1fr; }
  .video-grid{ grid-template-columns: 1fr; }
  .contact-cards{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 340px; height:100vh;
    background: var(--bg-alt); flex-direction:column; align-items:flex-start; justify-content:center;
    gap: 26px; padding: 40px; transform: translateX(100%); transition: transform .45s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,.4);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-cta{ margin-top:10px; }
  .section{ padding: 90px 0; }
  .headshot-resume-row{ grid-template-columns: 1fr; max-width: 320px; margin-left:auto; margin-right:auto; }
  .credits-grid{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .hero-title{ font-size: clamp(2.6rem, 14vw, 4rem); }
}