*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#000; --white:#fff; --gray:#888; --gray2:#555;
  --border:#1c1c1c; --accent:#e8e8e8;
  --magenta:#FF00FF; --yellow:#FFE600;
  --serif:'Space Grotesk',Georgia,serif;
  --sans:'Space Grotesk','Inter',-apple-system,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--black);color:var(--white);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}

#curtain{
  position:fixed;inset:0;background:var(--black);z-index:9999;
  pointer-events:none;opacity:0;transition:opacity .38s var(--ease);
}
#curtain.show{opacity:1;pointer-events:all}

/* ══ NAVBAR ══ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:710;
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 48px;
  transition:background .5s,backdrop-filter .5s;
}
nav.scrolled{
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-logo{
  font-family:var(--serif);font-size:18px;font-weight:700;
  letter-spacing:.02em;color:var(--white);cursor:pointer;text-decoration:none;
  transition:opacity .25s;user-select:none;
}
.nav-logo:hover{opacity:.6}
.burger{
  appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  position:relative;flex-shrink:0;width:44px;height:44px;padding:0;
  color:var(--white);transition:opacity .2s;
}
.burger:hover{opacity:.6}
.burger:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.burger span{
  position:absolute;left:8px;top:21px;width:28px;height:2px;
  background:currentColor;border-radius:2px;
  transition:transform .38s var(--ease),opacity .3s;transform-origin:center;
}
.burger span:nth-child(1){transform:translateY(-8px)}
.burger span:nth-child(3){transform:translateY(8px)}
.burger.open span:nth-child(1){transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg)}

/* ══ SIDE MENU ══ */
#menu-backdrop{
  position:fixed;inset:0;z-index:690;
  background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:opacity .45s var(--ease),backdrop-filter .45s;
}
#menu-backdrop.open{opacity:1;pointer-events:all}
#menu{
  position:fixed;top:0;right:0;bottom:0;z-index:700;
  width:min(400px,88vw);
  background:#050505;
  display:flex;flex-direction:column;
  justify-content:flex-start;padding:112px 52px 28px;
  opacity:0;pointer-events:none;
  transform:translateX(100%);
  transition:transform .5s var(--ease),opacity .3s;
  border-left:1px solid rgba(255,255,255,.06);
  overflow-y:auto;
}
#menu.open{opacity:1;pointer-events:all;transform:translateX(0)}

.menu-top-label{
  font-size:10px;letter-spacing:3px;color:var(--gray2);
  text-transform:uppercase;margin-bottom:36px;padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.menu-item{
  font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.5px;
  color:var(--white);cursor:pointer;padding:14px 0;text-decoration:none;flex-shrink:0;
  border-bottom:1px solid var(--border);
  opacity:0;transform:translateX(16px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),color .2s;
  display:flex;align-items:baseline;gap:16px;
}
.menu-item .mn{font-size:10px;color:var(--gray2);letter-spacing:1px;font-weight:400;flex-shrink:0;margin-top:2px}
.menu-item:hover{color:var(--gray)}
.menu-item:last-of-type{border-bottom:none}
#menu.open .menu-item:nth-child(2){transition-delay:.06s;opacity:1;transform:none}
#menu.open .menu-item:nth-child(3){transition-delay:.12s;opacity:1;transform:none}
#menu.open .menu-item:nth-child(4){transition-delay:.18s;opacity:1;transform:none}
#menu.open .menu-item:nth-child(5){transition-delay:.24s;opacity:1;transform:none}
#menu.open .menu-item:nth-child(6){transition-delay:.30s;opacity:1;transform:none}
#menu.open .menu-item:nth-child(7){transition-delay:.36s;opacity:1;transform:none}
.menu-footer{
  margin-top:auto;flex-shrink:0;gap:16px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--gray2);border-top:1px solid var(--border);
  padding-top:20px;
}

/* ══ PAGES ══ */
.page{display:none;min-height:100vh}
.page.active{display:block}

/* ══ REVEALS ══ */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* ══ MARQUEES ══ */
@keyframes mL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mwrap{overflow:hidden}
.mwrap:hover .mtrack{animation-play-state:paused}
.mtrack{white-space:nowrap;display:inline-block;will-change:transform}
.ml{animation:mL linear infinite}
.mr{animation:mR linear infinite}

/* ══ SHARED LAYOUT ══ */
.site-footer{
  border-top:1px solid var(--border);
  padding:22px 48px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--gray2);
}
.footer-credit{font-size:12px;color:var(--gray2);display:flex;align-items:center;gap:6px}
.footer-credit a{color:var(--gray);text-decoration:none;transition:color .2s}
.footer-credit a:hover{color:var(--white)}
.gh-btn{
  width:34px;height:34px;border:1px solid #2e2e2e;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .25s,transform .25s;
}
.gh-btn:hover{border-color:#666;transform:scale(1.1)}

.proj-nav{
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;padding:36px 60px;
}
.pn{cursor:pointer}
.pn.r{text-align:right}
.pn-lbl{font-size:10px;letter-spacing:2px;color:var(--gray2);margin-bottom:8px;text-transform:uppercase}
.pn-t{font-size:clamp(14px,2.2vw,22px);font-weight:700;color:var(--white);transition:color .2s}
.pn:hover .pn-t{color:var(--gray)}

.split{display:flex;gap:60px;padding:80px 60px;max-width:920px;margin:0 auto}
.sl{flex:0 0 220px}
.sl h2{font-size:clamp(22px,3vw,38px);font-weight:900;line-height:1.05;letter-spacing:-1px}
.sr{flex:1;font-size:14px;line-height:2;color:#bbb}
.sr p+p{margin-top:20px}

.btext{max-width:660px;margin:0 auto;padding:72px 40px;font-size:17px;line-height:1.85;color:#ddd}
.btext.c{text-align:center}
.btext p+p{margin-top:22px}

.ic{max-width:840px;margin:0 auto;padding:40px 40px 0;overflow:hidden}
.ic img{width:100%;transition:transform .7s var(--ease)}
.ic:hover img{transform:scale(1.015)}
.clbl{text-align:center;font-size:12px;color:var(--gray2);margin:14px 0 40px;letter-spacing:1px;text-transform:uppercase}

.dots{text-align:center;padding:10px 0 20px;color:var(--gray);font-size:22px;letter-spacing:6px}
.sec-lbl{text-align:center;padding:64px 40px 0;font-size:10px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--gray2)}
.info-block{display:flex;gap:60px;padding:50px 60px;max-width:920px;margin:0 auto;border-top:1px solid var(--border)}
.ilbl{font-size:13px;font-weight:700;letter-spacing:2px;flex-shrink:0;width:80px;text-transform:uppercase;color:var(--gray2)}
.itxt{font-size:14px;color:var(--gray);line-height:1.9}

/* ══ PARALLAX HERO ══ */
.p-hero{
  position:relative;width:100%;height:100vh;min-height:620px;
  overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 60px 72px;
}
.p-hero .bg{
  position:absolute;inset:-8%;
  background-size:cover;background-position:center;
  will-change:transform;transition:filter .5s;
}
.p-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%);
}
.p-hero .txt{position:relative;z-index:2}

/* ══ HOME HERO ══ */
.home-hero{justify-content:flex-end}
.home-hero .bg{z-index:0}
.home-hero::after{
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.05) 100%);
}
.home-hero .txt{position:relative;z-index:2;padding-bottom:8px}
#home .hero-title{
  font-family:var(--serif);
  font-size:clamp(60px,12vw,140px);font-weight:900;
  line-height:.88;letter-spacing:-2px;color:var(--white);
  opacity:0;transform:translateY(32px);
  transition:opacity 1s .2s var(--ease),transform 1s .2s var(--ease);
}
#home.active .hero-title{opacity:1;transform:none}
#home .lead{
  font-size:13px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gray);margin-top:20px;margin-bottom:0;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s .5s var(--ease),transform .9s .5s var(--ease);
}
#home.active .lead{opacity:1;transform:none}

/* ══ HOME MY WORK ══ */
.wh{text-align:center;padding:96px 40px 56px}
.wh .eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--gray2);margin-bottom:18px}
.wh h1{font-family:var(--serif);font-size:clamp(36px,7vw,80px);font-weight:700;letter-spacing:-1px;margin-bottom:14px}
.wh p{font-size:14px;color:var(--gray);margin-bottom:20px}
.wh hr{width:60px;border:none;border-top:1px solid #2a2a2a;margin:0 auto}

.hp{display:block;max-width:840px;margin:0 auto;padding:0 40px;cursor:pointer;overflow:hidden;position:relative}
.hp img{width:100%;transition:transform .7s var(--ease),filter .5s}
.hp:hover img{transform:scale(1.022);filter:brightness(.8)}
.hpl{
  text-align:center;font-size:11px;color:var(--gray2);
  margin:14px 0 56px;letter-spacing:2px;text-transform:uppercase;
}

/* ══ F1 ══ */
#f1 .p-hero{justify-content:flex-end;padding:64px}
#f1 .hero-text{opacity:0;transform:translateY(22px);transition:opacity .8s .3s var(--ease),transform .8s .3s var(--ease)}
#f1.active .hero-text{opacity:1;transform:none}
#f1 .hero-text h1{font-family:var(--serif);font-size:clamp(44px,9vw,114px);font-weight:900;line-height:.95;letter-spacing:-2px}
#f1 .hero-text .sub{font-size:14px;color:rgba(255,255,255,.6);margin-top:14px;max-width:500px;line-height:1.65;letter-spacing:.3px}

/* ══ TRAIN ══ */
#train .t-hero{position:relative;width:100%;height:100vh;min-height:620px;overflow:hidden}
#train .t-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 8s var(--ease)}
#train.active .t-hero img{transform:scale(1)}
#train .t-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 50%)}

/* ══ NISSAN ══ */
#nissan .ptitle{text-align:center;padding:120px 40px 60px}
#nissan .ptitle h1{font-family:var(--serif);font-size:clamp(28px,5.5vw,62px);font-weight:700;margin-bottom:14px;letter-spacing:-.5px}
#nissan .ptitle p{font-size:15px;color:var(--gray);margin-bottom:18px;line-height:1.65}
#nissan .ptitle hr{width:60px;border:none;border-top:1px solid #2a2a2a;margin:0 auto}
.nwrap{overflow:hidden;height:210px;display:flex;align-items:center}
.nbig{
  font-size:clamp(98px,19vw,218px);font-weight:900;letter-spacing:-6px;line-height:.88;
  padding-right:80px;
  background:linear-gradient(180deg,#d2d2d2 0%,#585858 55%,#a8a8a8 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
#nissan .pwrap{max-width:420px;margin:60px auto;padding:0 40px;overflow:hidden}
#nissan .pwrap img{width:100%;transition:transform .7s var(--ease)}
#nissan .pwrap:hover img{transform:scale(1.018)}

/* ══ JJK ══ */
#jjk .ptitle{text-align:center;padding:120px 40px 60px}
#jjk .ptitle h1{font-size:clamp(26px,6vw,64px);font-weight:800;line-height:1.08;letter-spacing:-1.5px;margin-bottom:22px}
#jjk .ptitle hr{width:60px;border:none;border-top:1px solid #2a2a2a;margin:0 auto}
.mbig{font-size:clamp(56px,11vw,124px);font-weight:900;letter-spacing:-3px;line-height:1;color:var(--magenta);padding-right:100px}
.cstrip{background:var(--magenta);overflow:hidden;padding:12px 0}
.ctxt{font-size:26px;font-weight:900;color:var(--black);padding-right:24px;line-height:1}
#jjk .jwrap{max-width:700px;margin:40px auto;padding:0 40px;overflow:hidden}
#jjk .jwrap img{width:100%;transition:transform .7s var(--ease)}
#jjk .jwrap:hover img{transform:scale(1.012)}

/* Evangelion uses the landscape panel from the poster as its full-screen cover. */
body:has(#evangelion.active) nav{
  padding:16px 3%;border-top:8px solid #e31313;
}
body:has(#evangelion.active) .nav-logo{
  font-family:"Times New Roman",serif;font-size:clamp(26px,2.4vw,48px);
  font-weight:400;letter-spacing:0;
}
#evangelion .p-hero{
  height:100vh;height:100svh;min-height:480px;
  justify-content:flex-start;padding:clamp(100px,5.25vw,140px) 6.15% 0;
}
#evangelion .bg{
  inset:0;background-image:url('evangelion-hero.webp');
  background-position:center;background-size:cover;
}
#evangelion .p-hero::after{display:none}
#evangelion .hero-text h1{
  font-family:"Times New Roman",serif;font-size:6.1vw;font-weight:700;
  line-height:1;letter-spacing:.46em;text-transform:uppercase;color:#ff0000;
  white-space:nowrap;margin:0;
}
#evangelion .hero-text .sub{
  font-family:"Times New Roman",serif;text-transform:uppercase;
  font-size:clamp(12px,1.25vw,25px);letter-spacing:.25em;color:#ff0000;
  margin:0;
}

/* ══ RESPONSIVE ══ */
@media(max-width:768px){
  nav{padding:18px 24px}
  .p-hero{padding:0 24px 48px}
  #f1 .p-hero{padding:28px}
  .split{flex-direction:column;padding:56px 22px;gap:24px}
  .sl{flex:none}
  .proj-nav{padding:28px 22px}
  .info-block{flex-direction:column;padding:36px 22px;gap:14px}
  .btext{padding:56px 22px;font-size:15px}
  .hp,.ic{padding:0 18px}
  #nissan .pwrap,.jjk-pw{padding:0 18px}
  #menu{padding:100px 28px 24px}
  .menu-top-label,.menu-footer{left:28px;right:28px}
  .site-footer{padding:18px 22px}
  .wh{padding:72px 22px 40px}
  .slide-overlay{padding:32px 24px}
  .slide-dots{right:24px}
}


/* ══ SLIDESHOW OVERLAY TEXT ══ */
#home .slideshow{position:relative;height:78vh;min-height:500px;overflow:hidden;cursor:pointer}
#home .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;pointer-events:none;transition:opacity 1.1s var(--ease)}
#home .slide.active{opacity:1;z-index:1;pointer-events:auto}
#home .slideshow::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.05) 100%);pointer-events:none;z-index:2}
.slide-overlay{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:48px 60px;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:8px;
}
.slide-num{font-size:10px;letter-spacing:4px;color:rgba(255,255,255,.45);text-transform:uppercase;font-weight:600}
.slide-title{font-family:var(--serif);font-size:clamp(32px,5.5vw,68px);font-weight:900;line-height:1;color:var(--white);letter-spacing:-.5px}
.slide-sub{font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.3px;margin-top:2px}
.slide-cta{
  display:inline-block;margin-top:16px;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--white);border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:2px;width:fit-content;
  transition:border-color .2s,color .2s;
}
#home .slide:hover .slide-cta{border-color:var(--white);color:var(--white)}
.slide-dots{
  position:absolute;bottom:28px;right:48px;z-index:4;
  display:flex;gap:8px;align-items:center;
}
.slide-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.3);border:none;padding:0;cursor:pointer;
  transition:background .3s,transform .3s;
}
.slide-dot.active{background:var(--white);transform:scale(1.4)}
@media(max-width:768px){
  .slide-overlay{padding:32px 24px}
  .slide-dots{right:24px;bottom:20px}
}


.proj-nav a{color:inherit;text-decoration:none}