:root{
  --ink:#0b0b0d;
  --panel:#151417;
  --panel-2:#1c1a1f;
  --bone:#ede9e1;
  --ash:#8f8d94;
  --ash-dim:#5a585f;
  --rust:#8a2a1f;
  --rust-bright:#c8402c;
  --line: rgba(237,233,225,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--rust-bright);color:var(--bone);}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ash);
}
.drip{
  font-family:'Rubik Wet Paint',cursive;
  font-weight:400;
  line-height:1;
  color:var(--bone);
  -webkit-text-stroke:1px rgba(0,0,0,0.35);
}
h1,h2,h3{
  font-family:'Anton',sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
  line-height:0.95;
  text-transform:uppercase;
}

/* ---------------- LOADER ---------------- */
#loader{
  position:fixed;inset:0;
  background:var(--ink);
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  transition:opacity .7s ease, visibility .7s ease;
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader-frame{
  position:relative;
  width:min(64vw, 320px);
  aspect-ratio:1/1;
  border:1px solid var(--line);
  overflow:hidden;
  filter:grayscale(1) contrast(1.05);
}
.loader-frame img{
  width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  display:block;
  opacity:0.9;
}
.loader-frame::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(11,11,13,0.15) 60%, rgba(11,11,13,0.85) 100%);
}
.scan{
  position:absolute;left:0;right:0;height:2px;
  background:var(--rust-bright);
  box-shadow:0 0 12px 2px var(--rust-bright);
  animation:scan 1.8s ease-in-out infinite;
}
@keyframes scan{
  0%{top:0%}
  50%{top:100%}
  100%{top:0%}
}
.loader-label{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ash);
  display:flex;
  gap:10px;
  align-items:center;
}
.loader-bar{
  width:min(64vw,320px);
  height:3px;
  background:var(--panel-2);
  position:relative;
  overflow:hidden;
}
.loader-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  width:0%;
  background:var(--rust-bright);
  transition:width .1s linear;
}
#loader-pct{color:var(--bone);}

/* ---------------- ZOOM / HERO SEQUENCE ---------------- */
#zoom-track{
  position:relative;
  height:340vh;
}
#zoom-stage{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:var(--ink);
}
#zoom-img-wrap{
  position:absolute;
  inset:0;
  will-change:transform;
  transform-origin:53% 88%;
}
#zoom-img-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 8%;
  display:block;
  filter:grayscale(0.15) contrast(1.08);
}
#zoom-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 53% 88%, transparent 0%, rgba(11,11,13,0.15) 45%, rgba(11,11,13,0.97) 78%);
  pointer-events:none;
}
#zoom-blackout{
  position:absolute;inset:0;
  background:var(--ink);
  opacity:0;
  pointer-events:none;
}
#hero-copy{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  pointer-events:none;
}
#hero-copy .drip{
  font-size:clamp(48px,11vw,140px);
  letter-spacing:0.01em;
}
#hero-copy .eyebrow{margin-bottom:18px;}
#hero-copy .sub{
  margin-top:20px;
  max-width:520px;
  font-size:15px;
  color:var(--ash);
  line-height:1.6;
}
#scroll-cue{
  position:absolute;
  bottom:34px;left:50%;
  transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:0.25em;
  color:var(--ash);
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
#scroll-cue .stick{
  width:1px;height:34px;
  background:linear-gradient(var(--ash), transparent);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0.3;}
  50%{opacity:1;}
}

/* portfolio content revealed after zoom */
#reveal-copy{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  opacity:0;
}
#reveal-copy .eyebrow{margin-bottom:16px;}
#reveal-copy h2{
  font-size:clamp(28px,5vw,52px);
  max-width:760px;
}

/* ---------------- MAIN CONTENT ---------------- */
main{position:relative;background:var(--ink);z-index:2;}
section{
  padding:110px 24px;
  max-width:1120px;
  margin:0 auto;
  position:relative;
}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:56px;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  flex-wrap:wrap;
}
.section-head h2{font-size:clamp(30px,5vw,52px);}

/* about */
#about .about-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:start;
}
#about p{
  font-size:17px;
  line-height:1.8;
  color:#cfccc4;
  margin-bottom:20px;
}
#about p:last-child{margin-bottom:0;}
.patch-card{
  border:1px solid var(--line);
  background:var(--panel);
  padding:26px;
  position:relative;
}
.patch-card::before{
  content:"";
  position:absolute;inset:8px;
  border:1px dashed rgba(237,233,225,0.18);
  pointer-events:none;
}
.patch-card .eyebrow{margin-bottom:14px;}
.patch-list{list-style:none;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ash);}
.patch-list li{
  display:flex;justify-content:space-between;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.patch-list li:first-child{border-top:none;}
.patch-list span:last-child{color:var(--bone);}

/* stats ticker */
#stats{
  padding:70px 24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.stats-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.stat{
  padding:18px 24px;
  border-left:1px solid var(--line);
}
.stat:first-child{border-left:none;}
.stat .num{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(26px,3.6vw,40px);
  color:var(--rust-bright);
  font-weight:700;
}
.stat .lbl{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ash);
  margin-top:8px;
}

/* work / drops */
.drops-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.drop{
  background:var(--panel);
  padding:32px 26px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:background .25s ease;
}
.drop:hover{background:var(--panel-2);}
.drop .tag{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--rust-bright);
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.drop h3{
  font-size:22px;
  margin-top:16px;
}
.drop p{
  margin-top:14px;
  font-size:14px;
  color:var(--ash);
  line-height:1.6;
}

/* collabs marquee */
#collabs{padding-top:100px;padding-bottom:60px;}
.marquee{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex;
  gap:60px;
  animation:scroll-left 26s linear infinite;
}
.marquee span{
  font-family:'Anton',sans-serif;
  font-size:22px;
  letter-spacing:0.03em;
  color:var(--ash-dim);
  text-transform:uppercase;
}
@keyframes scroll-left{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* contact */
#contact{
  text-align:center;
  padding-top:120px;
  padding-bottom:140px;
}
#contact h2{
  font-size:clamp(34px,7vw,84px);
}
#contact p{
  color:var(--ash);
  max-width:460px;
  margin:22px auto 40px;
  line-height:1.7;
}
.links-row{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.link-pill{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--bone);
  border:1px solid var(--line);
  padding:12px 22px;
  text-decoration:none;
  transition:border-color .2s ease, color .2s ease;
}
.link-pill:hover{
  border-color:var(--rust-bright);
  color:var(--rust-bright);
}
footer{
  text-align:center;
  padding:28px 24px 40px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--ash-dim);
  letter-spacing:0.1em;
}

/* responsive */
@media (max-width:860px){
  #about .about-grid{grid-template-columns:1fr;gap:40px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat{border-left:none;border-top:1px solid var(--line);}
  .stat:nth-child(1),.stat:nth-child(2){border-top:none;}
  .drops-grid{grid-template-columns:1fr;}
  section{padding:80px 20px;}
}

@media (prefers-reduced-motion: reduce){
  .scan,#scroll-cue .stick,.marquee-track{animation:none;}
  #loader{transition:none;}
}

a{color:inherit;}