/* ============ TOKENS ============ */
:root{
  --bg: #0b0b0c;
  --bg-soft: #131314;
  --fg: #f5f5f0;
  --muted: #9a9a95;
  --cyan: #19c3e6;
  --magenta: #ec1f8f;
  --yellow: #ffd400;
  --line: rgba(245,245,240,0.14);
  --radius: 2px;
  --display: 'Archivo Black', sans-serif;
  --body: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:0.01em;margin:0;}
::selection{background:var(--magenta);color:#fff;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 0.75rem;
}
.eyebrow::before{content:"⊕ ";color:var(--cyan);}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
}

/* ============ CMY CURSOR REGISTRATION MARK ============ */
.reg-cursor{
  position:fixed; top:0; left:0; width:14px; height:14px;
  pointer-events:none; z-index:9999; mix-blend-mode:screen;
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .3s;
}
.reg-cursor.on{opacity:1;}
.reg-cursor span{position:absolute; inset:0; border-radius:50%; opacity:.75;}
.reg-c{background:var(--cyan); transform:translate(-2px,0);}
.reg-m{background:var(--magenta); transform:translate(2px,-1px);}
.reg-y{background:var(--yellow); transform:translate(0,2px);}
@media (hover:none){ .reg-cursor{display:none;} }

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  background:rgba(11,11,12,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:.95rem;letter-spacing:.06em;}
.nav__logo{width:30px;height:30px;object-fit:contain;}
.nav__links{display:flex;align-items:center;gap:2rem;font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;}
.nav__links a{color:var(--muted);transition:color .2s;position:relative;}
.nav__links a:hover{color:var(--fg);}
.nav__cta{
  color:var(--bg) !important;
  background:var(--yellow);
  padding:.5rem 1rem;
  border-radius:var(--radius);
}
.nav__cta:hover{background:var(--cyan);}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:0;}
.nav__burger span{width:22px;height:2px;background:var(--fg);}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;align-items:center;
  padding:6rem clamp(1.25rem,4vw,3rem) 3rem;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero__bg-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:grayscale(35%) contrast(1.05);
  transition:opacity 1.4s ease;
}
.hero__bg-img.active{opacity:.22;}
.hero__bg-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(11,11,12,.55), var(--bg) 92%),
    linear-gradient(90deg, rgba(25,195,230,.10), rgba(236,31,143,.10) 50%, rgba(255,212,0,.08));
  mix-blend-mode:normal;
}
.hero__reg{position:absolute;inset:0;pointer-events:none;z-index:1;}
.reg-mark{
  position:absolute; font-size:1.1rem; color:var(--line); font-family:var(--mono);
}
.reg-mark--1{top:8%;right:6%;color:var(--cyan);opacity:.5;}
.reg-mark--2{bottom:14%;right:16%;color:var(--magenta);opacity:.4;}
.reg-mark--3{top:38%;right:28%;color:var(--yellow);opacity:.35;}
.cmyk-tag{
  position:absolute; right:2%; top:2%;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.3em;
  writing-mode:vertical-rl; color:var(--muted);
}
.cmyk-tag:nth-child(4){right:3.6%;}
.cmyk-tag:nth-child(5){right:5.2%;color:var(--cyan);}
.cmyk-tag:nth-child(6){right:6.8%;color:var(--magenta);}
.cmyk-tag:nth-child(7){right:8.4%;color:var(--yellow);}

.hero__inner{max-width:760px;position:relative;z-index:2;}
.hero__title{
  font-size:clamp(2.6rem,7vw,5.2rem);
  line-height:0.98;
  display:flex;flex-direction:column;
  margin-bottom:1.6rem;
}
.hero__title--accent{
  color:var(--fg);
}

/* CMYK misregistration text: always-on, all four inks visible */
.glitch-text{
  position:relative;
  color:var(--fg);
  text-shadow:
    3px 0 0 var(--magenta),
    -3px 0 0 var(--cyan),
    0 3px 0 var(--yellow),
    0 -3px 0 #000,
    2px 2px 0 rgba(0,0,0,.35);
}
.hero__lede{
  color:var(--muted);
  font-size:clamp(1rem,1.4vw,1.15rem);
  max-width:52ch;
  margin-bottom:2.2rem;
}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;}
.btn{
  font-family:var(--mono);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.9rem 1.6rem;
  border-radius:var(--radius);
  border:1px solid var(--fg);
  transition:all .2s ease;
}
.btn--primary{background:var(--fg);color:var(--bg);}
.btn--primary:hover{background:var(--yellow);border-color:var(--yellow);}
.btn--ghost:hover{background:var(--fg);color:var(--bg);}

.hero__mark{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(46vw,560px); opacity:.9;
  z-index:1;
}
.hero__mark img{filter:drop-shadow(0 0 60px rgba(236,31,143,.15));}
@media (max-width:900px){ .hero__mark{display:none;} }

/* glitch text: base treatment lives in .glitch-text above (always-on CMYK offset).
   On hover, nudge the ink layers slightly for a subtle "reprint" shift. */
.hero:hover .glitch-text{
  animation: inkShift 2.6s infinite steps(3,end);
}
@keyframes inkShift{
  0%,100%{
    text-shadow:
      3px 0 0 var(--magenta), -3px 0 0 var(--cyan),
      0 3px 0 var(--yellow), 0 -3px 0 #000, 2px 2px 0 rgba(0,0,0,.35);
  }
  33%{
    text-shadow:
      -2px 1px 0 var(--magenta), 4px -1px 0 var(--cyan),
      1px -3px 0 var(--yellow), -1px 3px 0 #000, 2px 2px 0 rgba(0,0,0,.35);
  }
  66%{
    text-shadow:
      4px -2px 0 var(--magenta), -1px 2px 0 var(--cyan),
      -2px 3px 0 var(--yellow), 1px -3px 0 #000, 2px 2px 0 rgba(0,0,0,.35);
  }
}

/* ============ STRIP ============ */
.strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
}
.strip__item{
  font-family:var(--mono); font-size:.8rem; color:var(--muted);
  padding:1.1rem 1.4rem; border-right:1px solid var(--line);
  display:flex; align-items:center; gap:.6rem;
}
.strip__item:last-child{border-right:0;}
.strip__item span{color:var(--yellow); font-weight:600;}
@media (max-width:820px){
  .strip{grid-template-columns:repeat(2,1fr);}
  .strip__item:nth-child(2){border-right:0;}
}

/* ============ GALLERY ============ */
.gallery{padding:6rem clamp(1.25rem,4vw,3rem) 2rem;}
.section-head{max-width:640px;margin-bottom:2.5rem;}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.4rem);}

.filters{
  display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem;
}
.filter{
  font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  background:transparent; color:var(--muted); border:1px solid var(--line);
  padding:.55rem 1rem; border-radius:999px; cursor:pointer; transition:all .2s;
}
.filter:hover{color:var(--fg); border-color:var(--fg);}
.filter.active{background:var(--fg); color:var(--bg); border-color:var(--fg);}

.grid{
  columns:4 260px; column-gap:1.1rem;
}
@media (max-width:1100px){ .grid{columns:3 220px;} }
@media (max-width:720px){ .grid{columns:2 160px;} }
@media (max-width:460px){ .grid{columns:1; } }

.card{
  break-inside:avoid; margin:0 0 1.1rem; position:relative;
  border:1px solid var(--line); background:var(--bg-soft);
  cursor:pointer; overflow:hidden; border-radius:var(--radius);
}
.card img{width:100%; display:block; transition:transform .5s ease;}
.card::before,.card::after{
  content:""; position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; mix-blend-mode:screen; transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.card:hover img{transform:scale(1.04);}
.card:hover::before{opacity:.55; background:var(--cyan); mix-blend-mode:hue; transform:translate(-3px,0);}
.card:hover::after{opacity:.4; background:var(--magenta); mix-blend-mode:hue; transform:translate(3px,0);}

.card figcaption{
  padding:.85rem 1rem 1rem;
  display:flex; flex-direction:column; gap:.15rem;
}
.cap-title{font-family:var(--body); font-weight:600; font-size:.92rem;}
.cap-tag{font-family:var(--mono); font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}

.card.hide{display:none;}

/* Process section: same grid mechanics, quieter presentation */
.gallery--process{padding-top:4rem;}
.section-lede{color:var(--muted); font-size:.95rem; max-width:56ch; margin-top:.6rem;}
.grid--process{opacity:.92;}
.card--process img{filter:grayscale(55%) contrast(1.02);}
.card--process:hover img{filter:grayscale(0%);}
.card--process .cap-tag{color:var(--cyan);}

/* ============ ABOUT ============ */
.about{
  display:grid; grid-template-columns:220px 1fr; gap:3rem; align-items:center;
  padding:5rem clamp(1.25rem,4vw,3rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-soft);
}
.about__mark img{
  width:100%; filter:invert(1); opacity:.9;
}
.about__text h2{font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:1.2rem;}
.about__text p{color:var(--muted); max-width:60ch; margin:0 0 1rem;}
@media (max-width:760px){
  .about{grid-template-columns:1fr; text-align:left;}
  .about__mark{width:140px;}
}

/* ============ CONTACT ============ */
.contact{padding:6rem clamp(1.25rem,4vw,3rem);}
.contact__inner{max-width:640px;}
.contact h2{font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:1rem;}
.contact__lede{color:var(--muted); margin-bottom:2rem;}
.contact__row{display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.2rem;}
.contact__link{
  font-family:var(--mono); font-size:1rem; padding-bottom:.3rem;
  border-bottom:1px solid var(--fg);
}
.contact__link:hover{color:var(--yellow); border-color:var(--yellow);}
.contact__note{font-family:var(--mono); font-size:.75rem; color:var(--muted);}
.contact__note code{color:var(--cyan);}

/* ============ FOOTER ============ */
.footer{
  display:flex; align-items:center; gap:.8rem;
  padding:2rem clamp(1.25rem,4vw,3rem);
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.75rem; color:var(--muted);
}
.footer__logo{width:22px;height:22px;object-fit:contain;}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; background:rgba(6,6,7,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:2rem; z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:min(90vw,900px); max-height:76vh; object-fit:contain; border:1px solid var(--line);}
.lightbox__cap{font-family:var(--mono); font-size:.8rem; color:var(--muted);}
.lightbox__consult{margin-top:.4rem;}
.lightbox__close{
  position:absolute; top:1.5rem; right:1.5rem;
  background:none; border:1px solid var(--line); color:var(--fg);
  width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1rem;
}
.lightbox__close:hover{background:var(--magenta); border-color:var(--magenta);}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .hero:hover .glitch-text{animation:none !important;}
  .card img{transition:none;}
}

/* ============ MOBILE NAV ============ */
@media (max-width:820px){
  .nav__links{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--bg); flex-direction:column; align-items:flex-start;
    padding:2rem 1.5rem; gap:1.4rem; font-size:1rem;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .nav__links.open{transform:translateX(0);}
  .nav__burger{display:flex;}
}