:root{
  --tw-black:#0a0a0a;
  --tw-white:#ffffff;
  --tw-off:#f5f5f3;
  --tw-grey:#8b8b8b;
  --tw-line:#d9d9d6;
  --tw-darkline:#2a2a2a;
  --tw-max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#111;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block}
a{color:inherit;text-decoration:none}

/* ---------------- PASSWORD / ROOT GATE ---------------- */
.gate-body{
  min-height:100svh;
  background:var(--tw-black);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.gate-card{
  width:min(100%,760px);
  border-top:1px solid #3a3a3a;
  border-bottom:1px solid #3a3a3a;
  padding:46px 0 50px;
}
.gate-logo{
  width:180px;
  height:auto;
  margin-bottom:74px;
}
.gate-kicker,
.section-kicker,
.hero-kicker{
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.gate-kicker{color:#b8b8b8;margin-bottom:18px}
.gate-card h1{
  margin:0;
  max-width:700px;
  font-size:clamp(38px,6vw,70px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:700;
}
.gate-card p{
  max-width:600px;
  margin:24px 0 0;
  color:#bcbcbc;
  font-size:16px;
  line-height:1.65;
}
.gate-client{
  color:#fff!important;
  font-size:13px!important;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.gate-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:38px;
}
.gate-form input{
  min-width:0;
  border:1px solid #424242;
  border-radius:0;
  background:#151515;
  color:#fff;
  padding:16px 18px;
  outline:none;
  font-size:14px;
}
.gate-form input:focus{border-color:#fff}
.gate-form button{
  border:1px solid #fff;
  border-radius:0;
  background:#fff;
  color:#111;
  padding:0 28px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.gate-error{color:#ff8383!important;font-size:13px!important}
.root-gate{border-left:0;border-right:0}

/* ---------------- PROJECT HEADER ---------------- */
.project-body{background:#fff}
.project-nav{
  position:absolute;
  z-index:20;
  top:0;left:0;right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:90px;
  padding:20px clamp(22px,4vw,64px);
  color:#fff;
}
.project-nav .nav-logo{
  width:165px;
  height:auto;
}
.project-nav .nav-meta{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.project-nav .nav-line{width:32px;height:1px;background:rgba(255,255,255,.7)}

/* ---------------- HERO ---------------- */
.project-hero{
  position:relative;
  min-height:82svh;
  background:#111;
  color:#fff;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.project-hero>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.16) 42%,rgba(0,0,0,.78) 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  width:min(100%,var(--tw-max));
  margin:0 auto;
  padding:150px clamp(22px,4vw,64px) clamp(50px,7vw,90px);
}
.hero-kicker{color:#d0d0d0;margin-bottom:20px}
.hero-content h1{
  margin:0;
  max-width:1000px;
  font-size:clamp(46px,7vw,94px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:700;
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:22px 56px;
  padding-top:30px;
  margin-top:34px;
  border-top:1px solid rgba(255,255,255,.35);
  font-size:14px;
}
.hero-meta>div{min-width:140px}
.hero-meta span{
  display:block;
  margin-bottom:7px;
  color:#b8b8b8;
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ---------------- STORY ---------------- */
.project-story{overflow:hidden}
.story{position:relative}

.text-section{
  padding:clamp(74px,8vw,120px) clamp(22px,4vw,64px);
}
.story-copy{
  width:min(100%,1180px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(200px,.55fr) minmax(0,1.45fr);
  gap:clamp(36px,7vw,110px);
  align-items:start;
}
.story-copy:before{
  content:"PROJECT OVERVIEW";
  padding-top:8px;
  border-top:1px solid #111;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.story-copy h2,
.split-copy h2{
  margin:0 0 24px;
  font-size:clamp(32px,4vw,58px);
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:700;
}
.story-copy h2,
.story-copy .richtext{
  grid-column:2;
}
.story-copy h2{grid-row:1}
.story-copy .richtext{grid-row:2}
.richtext{
  max-width:800px;
  color:#484848;
  font-size:clamp(16px,1.45vw,21px);
  line-height:1.65;
}

/* Event imagery should do the heavy lifting */
.full-media{
  width:100%;
  background:#0b0b0b;
}
.full-media img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
.media-caption{
  position:absolute;
  left:clamp(18px,3vw,44px);
  bottom:18px;
  padding:8px 11px;
  background:rgba(0,0,0,.68);
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.media-grid{
  width:min(100%,var(--tw-max));
  margin:0 auto;
  display:grid;
  gap:12px;
  padding:12px clamp(12px,2vw,28px);
}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.media-grid img{
  width:100%;
  height:clamp(340px,45vw,720px);
  object-fit:cover;
}
.grid-3 img{height:clamp(320px,36vw,590px)}

/* A more Tantaworks-like black content panel */
.split-section{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  min-height:650px;
  background:#0a0a0a;
  color:#fff;
}
.split-copy{
  padding:clamp(58px,7vw,105px) clamp(28px,6vw,90px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.split-copy:before{
  content:"CREATIVE DIRECTION";
  width:100%;
  padding-top:10px;
  margin-bottom:42px;
  border-top:1px solid #404040;
  color:#a9a9a9;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.split-copy .richtext{color:#bfbfbf}
.split-media{min-height:650px;background:#181818}
.split-media img{width:100%;height:100%;object-fit:cover}

/* No arbitrary orange / Doris-like giant art statement */
.statement-section{
  background:#f3f3f1;
  color:#111;
  padding:clamp(78px,10vw,145px) clamp(22px,5vw,72px);
}
.statement-section:before{
  content:"THE IDEA";
  display:block;
  width:min(100%,1180px);
  margin:0 auto 35px;
  padding-top:10px;
  border-top:1px solid #111;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.statement-section div{
  width:min(100%,1180px);
  margin:0 auto;
  max-width:1180px;
  font-size:clamp(38px,5.5vw,76px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:700;
}

.video-section{
  padding:0;
  background:#0a0a0a;
}
.video-section video{
  width:100%;
  max-height:100svh;
  margin:auto;
  background:#000;
}
.story-spacer{height:clamp(55px,8vw,120px)}

/* ---------------- TANTAWORKS-STYLE END ---------------- */
.project-footer{
  min-height:540px;
  background:#0a0a0a;
  color:#fff;
  padding:clamp(55px,7vw,100px) clamp(22px,5vw,72px) 34px;
  display:flex;
  flex-direction:column;
}
.footer-inner{
  width:min(100%,var(--tw-max));
  margin:0 auto;
  flex:1;
  display:flex;
  flex-direction:column;
}
.footer-logo{
  width:180px;
  height:auto;
}
.footer-say{
  margin-top:auto;
  padding-top:80px;
  color:#999;
  font-size:12px;
  letter-spacing:.55em;
  font-weight:700;
}
.footer-title{
  margin:12px 0 42px;
  max-width:900px;
  font-size:clamp(42px,6vw,82px);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:700;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-top:22px;
  border-top:1px solid #333;
  color:#929292;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media(max-width:760px){
  .gate-body{padding:20px}
  .gate-card{padding:34px 0}
  .gate-logo{width:150px;margin-bottom:54px}
  .gate-form{grid-template-columns:1fr}
  .gate-form button{padding:16px}
  .project-nav{min-height:74px;padding:16px 18px}
  .project-nav .nav-logo{width:135px}
  .project-nav .nav-meta{font-size:8px}
  .hero-content{padding:120px 20px 42px}
  .project-hero{min-height:72svh}
  .hero-meta{gap:20px 30px}
  .story-copy{grid-template-columns:1fr;gap:28px}
  .story-copy:before{grid-row:auto}
  .story-copy h2,.story-copy .richtext{grid-column:1;grid-row:auto}
  .grid-2,.grid-3,.split-section{grid-template-columns:1fr}
  .media-grid{padding:8px}
  .media-grid img,.grid-3 img{height:82vw}
  .split-media{min-height:90vw}
  .statement-section div{font-size:clamp(34px,10vw,56px)}
  .project-footer{min-height:500px}
  .footer-bottom{display:grid;gap:10px}
}