/* ===== Tokens ===== */
:root{
  --bg: #0b0a09;
  --bg-alt: #131110;
  --surface: #191613;
  --surface-2: #211d19;
  --text: #f5f2ee;
  --text-dim: #a89f96;
  --text-faint: #8f867d;
  --accent: #d1293d;
  --accent-2: #ea4b5e;
  --border: rgba(245,242,238,.12);
  --border-strong: rgba(245,242,238,.22);
  --radius: 14px;
  --font-display: 'Outfit', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html,body{background:var(--bg); color:var(--text);}
body{
  font-family: var(--font-display);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
h1,h2,h3{font-weight:700; letter-spacing:-0.02em; line-height:1.05;}
::selection{background:var(--accent); color:#fff;}

.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ===== Reveal (progressive enhancement) ===== */
html.js [data-reveal]{opacity:0; transform:translateY(24px);}
html.js [data-reveal].is-visible{
  opacity:1; transform:translateY(0);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ===== Buttons (bespoke chrome, each CTA its own identity) ===== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-display); font-weight:600; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:999px;
  white-space:nowrap;
}
.btn--primary{
  background: var(--accent); color:#fff;
  transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow: 0 0 0 0 rgba(209,41,61,0);
}
.btn--primary:hover{ background: var(--accent-2); box-shadow: 0 8px 24px -8px rgba(209,41,61,.55); transform:translateY(-2px);}
.btn--primary:active{ transform: translateY(0) scale(.98); }
.btn--primary svg{ transition: transform .35s var(--ease); }
.btn--primary:hover svg{ transform: translateX(3px); }

.btn--ghost{
  border:1px solid var(--border-strong); color:var(--text);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.btn--ghost:hover{ border-color: var(--text); background: rgba(245,242,238,.06); transform:translateY(-2px);}
.btn--ghost:active{ transform: translateY(0) scale(.98); }

.btn--nav{
  padding:.6rem 1.2rem; font-size:.85rem;
  background: transparent; border:1px solid var(--border-strong);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.btn--nav:hover{ background: var(--accent); border-color: var(--accent); }

.btn--full{ width:100%; justify-content:center; }

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem clamp(1.25rem, 5vw, 4rem);
  background: linear-gradient(to bottom, rgba(11,10,9,.75), transparent);
  backdrop-filter: blur(6px);
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{ background: rgba(11,10,9,.85); border-color: var(--border); }

.nav__brand{ display:flex; align-items:center; gap:.65rem; font-weight:600; font-size:1rem; }
.nav__mark{ width:32px; height:32px; border-radius:9px; flex-shrink:0; }

.nav__links{ display:flex; gap:2.2rem; font-size:.92rem; color:var(--text-dim); }
.nav__links a{ position:relative; transition: color .25s var(--ease); }
.nav__links a:hover{ color:var(--text); }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition: transform .3s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__toggle{ display:none; flex-direction:column; gap:5px; width:24px; z-index:60; position:relative; }
.nav__toggle span{ height:2px; background:var(--text); border-radius:2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav__toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-active span:nth-child(2){ opacity:0; }
.nav__toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:49; background: var(--bg);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
  padding: 2rem clamp(1.5rem,6vw,4rem);
  transform: translateY(-100%); transition: transform .45s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{ font-size:1.6rem; font-weight:600; }
.mobile-menu .btn{ margin-top:1rem; }

/* ===== Hero ===== */
.hero{
  position:relative; min-height:100dvh; display:flex; align-items:flex-end;
  overflow:hidden; padding: 0 clamp(1.25rem,5vw,4rem) clamp(3rem,8vw,6rem);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,10,9,.96) 0%, rgba(11,10,9,.55) 42%, rgba(11,10,9,.35) 65%, rgba(11,10,9,.55) 100%),
    linear-gradient(to right, rgba(11,10,9,.4), rgba(11,10,9,0) 55%);
}
.hero__content{ position:relative; z-index:1; max-width:760px; }
.hero__headline{
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  margin-bottom: 1.1rem;
}
.hero__sub{
  color: var(--text-dim); font-size: clamp(1rem,1.6vw,1.15rem);
  max-width:52ch; margin-bottom: 2.1rem;
}
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero__scroll-cue{
  position:absolute; bottom: 2rem; left: 50%; transform:translateX(-50%); z-index:1;
  width:1px; height:48px; background: var(--border-strong); overflow:hidden;
}
.hero__scroll-cue span{
  position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--accent);
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media (prefers-reduced-motion: reduce){ .hero__scroll-cue span{ animation:none; top:0; } }

/* ===== Section shell ===== */
main > section{ padding: clamp(4rem,10vw,7rem) clamp(1.25rem,5vw,4rem); }
.section-head{ max-width: 640px; margin-bottom: clamp(2.5rem,5vw,3.5rem); }
.section-head h2{ font-size: clamp(1.9rem,4vw,2.8rem); }

/* ===== Work grid ===== */
.work{ background: var(--bg); }
.work__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  grid-auto-flow: dense;
}
.project{ display:flex; flex-direction:column; gap:1rem; }
.project--wide{ grid-column: span 2; }

.project__frame{
  position:relative; display:block; width:100%; aspect-ratio: 16/10; overflow:hidden;
  border-radius: var(--radius); background: var(--surface); border:1px solid var(--border);
}
.project--wide .project__frame{ aspect-ratio: 16/9.2; }
.project__frame img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease), filter .5s var(--ease); }
.project__frame:hover img{ transform: scale(1.045); filter:brightness(.7); }

.project__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.project__play svg{
  width:56px; height:56px; padding:16px; box-sizing:border-box;
  border-radius:50%; background: rgba(11,10,9,.55); border:1px solid rgba(245,242,238,.35);
  backdrop-filter: blur(3px);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.project__frame:hover .project__play svg{ transform: scale(1.1); background: var(--accent); border-color: var(--accent); }

.project__meta{ display:flex; flex-direction:column; gap:.35rem; }
.project__tag{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--text-faint);
}
.project__meta h3{ font-size:1.15rem; }
.project__meta p{ color: var(--text-dim); font-size:.92rem; max-width:46ch; }

/* ===== About ===== */
.about{
  background: var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem,6vw,5rem); align-items:start;
}
.about__text h2{ font-size: clamp(1.9rem,4vw,2.6rem); margin-bottom:1.4rem; }
.about__bio{ color: var(--text-dim); font-size:1.05rem; max-width:52ch; }

.about__list{ display:flex; flex-direction:column; }
.about__list li{
  display:flex; gap:1.25rem; padding: 1.4rem 0; border-top:1px solid var(--border);
}
.about__list li:last-child{ border-bottom:1px solid var(--border); }
.about__num{ font-family: var(--font-mono); color: var(--accent); font-size:.85rem; padding-top:.2rem; }
.about__list h3{ font-size:1.05rem; margin-bottom:.3rem; }
.about__list p{ color: var(--text-dim); font-size:.92rem; }

/* ===== Contact ===== */
.contact{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,5rem);
}
.contact__text h2{ font-size: clamp(1.9rem,4vw,2.6rem); margin-bottom:1.1rem; }
.contact__text p{ color: var(--text-dim); max-width:44ch; margin-bottom:1.6rem; }
.contact__email{
  font-family: var(--font-mono); font-size:1.05rem; color:var(--text);
  border-bottom:1px solid var(--border-strong); padding-bottom:.3rem; display:inline-block;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.contact__email:hover{ color:var(--accent); border-color:var(--accent); }

.contact__form{ display:flex; flex-direction:column; gap:1.2rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); }
.field input, .field textarea{
  background: var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:.85rem 1rem; color:var(--text); font-family: var(--font-display); font-size:.95rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  resize: vertical;
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--accent); background: var(--surface-2); }
.field__note{ font-size:.85rem; color: var(--text-dim); min-height:1.2em; }
.field__note.is-error{ color: var(--accent-2); }

/* ===== Footer ===== */
.footer{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
  padding: 2.4rem clamp(1.25rem,5vw,4rem);
  border-top:1px solid var(--border);
  color: var(--text-dim); font-size:.85rem;
}
.footer__email{ transition: color .25s var(--ease); }
.footer__email:hover{ color: var(--accent); }
.footer__top{ font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.footer__top:hover{ color: var(--text); }

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; z-index:100; background: rgba(6,5,5,.94);
  display:flex; align-items:center; justify-content:center; padding: 2rem;
  opacity:0; pointer-events:none; transition: opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox video{ max-width:min(92vw, 900px); max-height:86vh; border-radius:12px; background:#000; }
.lightbox__close{
  position:absolute; top:1.5rem; right:1.5rem; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border-strong);
  color:var(--text); transition: background .25s var(--ease), transform .25s var(--ease);
}
.lightbox__close:hover{ background: var(--accent); border-color:var(--accent); transform: rotate(90deg); }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .about, .contact{ grid-template-columns: 1fr; }
  .work__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .nav__links, .nav > .btn--nav{ display:none; }
  .nav__toggle{ display:flex; }
  .work__grid{ grid-template-columns: 1fr; }
  .project--wide{ grid-column: span 1; }
  .hero{ align-items:flex-end; padding-bottom: 3.5rem; }
}