:root{
  --paper:#14171A;
  --ink:#EFEDE7;
  --ink-soft:#9A9EA3;
  --line:#2B2F33;
  --accent:#E23D2E;
  --card:#1C2024;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.brand,.nav a,.timecode,.tally,.format-tag,.ph-label,.btn{
  font-family:'Space Grotesk',system-ui,sans-serif;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 32px;}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}

/* header */
.site-header{position:sticky;top:0;background:rgba(20,23,26,0.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:10;}
.header-inner{display:flex;justify-content:space-between;align-items:center;height:64px;}
.brand{font-weight:600;font-size:1.05rem;}
.nav{display:flex;gap:28px;}
.nav a{font-size:0.92rem;color:var(--ink-soft);}
.nav a:hover{color:var(--ink);}

/* hero */
.hero{padding:96px 0 72px;}
.tally{display:inline-flex;align-items:center;gap:8px;font-size:0.78rem;letter-spacing:0.04em;color:var(--accent);font-weight:600;margin-bottom:24px;}
.tally-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.6s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.25;}}
.hero h1{font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.08;font-weight:600;max-width:14ch;}
.hero-sub{margin-top:24px;max-width:56ch;font-size:1.08rem;color:var(--ink-soft);}
.hero-links{display:flex;gap:16px;margin-top:36px;}

.btn{display:inline-block;padding:12px 22px;border-radius:2px;font-size:0.92rem;font-weight:500;border:1px solid transparent;}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--accent);}
.btn-ghost{border-color:var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}

/* section head */
.section-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:40px;}
.section-head h2{font-size:1.6rem;font-weight:600;}
.timecode{font-size:0.72rem;color:var(--ink-soft);letter-spacing:0.03em;}

/* work / reel */
.work{padding:64px 0;}
.reel{display:flex;flex-direction:column;gap:56px;}
.reel-item{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;}
.reel-media{position:relative;border:1px solid var(--line);background:var(--card);}
.reel-media video{width:100%;}
.format-tag{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--paper);font-size:0.68rem;padding:4px 8px;letter-spacing:0.02em;}
.reel-info h3{font-size:1.15rem;font-weight:600;margin-bottom:10px;}
.reel-info p{color:var(--ink-soft);max-width:60ch;}

/* tech */
.tech{padding:64px 0;border-top:1px solid var(--line);}
.tech-intro{color:var(--ink-soft);max-width:68ch;margin-bottom:32px;}
.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.tech-card.placeholder{border:1px dashed var(--line);padding:28px;color:var(--ink-soft);}
.ph-label{display:block;font-size:0.78rem;color:var(--accent);margin-bottom:10px;}

/* about */
.about{padding:64px 0;border-top:1px solid var(--line);}
.about-inner p{max-width:68ch;color:var(--ink-soft);font-size:1.03rem;}

/* contact */
.contact{padding:64px 0 96px;border-top:1px solid var(--line);}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;}
.contact-direct{display:flex;flex-direction:column;gap:12px;}
.contact-link{font-size:1.05rem;font-weight:500;border-bottom:1px solid var(--line);width:fit-content;padding-bottom:2px;}
.contact-link:hover{border-color:var(--accent);color:var(--accent);}
.contact-form{display:flex;flex-direction:column;gap:6px;}
.contact-form label{font-size:0.78rem;color:var(--ink-soft);margin-top:10px;}
.contact-form input,.contact-form textarea{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 12px;font-family:inherit;font-size:0.95rem;border-radius:2px;}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.contact-form button{margin-top:16px;width:fit-content;}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:28px 0;}
.site-footer span{font-size:0.82rem;color:var(--ink-soft);}

/* responsive */
@media (max-width:760px){
  .reel-item{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .tech-grid{grid-template-columns:1fr;}
  .nav{gap:16px;}
}

@media (prefers-reduced-motion:reduce){
  .tally-dot{animation:none;}
}