/* ==========================================================
   K255 MEDIA — CMYK / ink / zine
   ========================================================== */
:root{
  --paper:#F6F4EE;
  --k:#101010;
  --c:#00AEEF;
  --m:#EC008C;
  --y:#FFE300;
  --grid:rgba(16,16,16,.06);
  --disp:'Archivo Black',system-ui,sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;
  --zine:'Special Elite',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--k);
  line-height:1.55;
  overflow-x:hidden;
  /* faint halftone paper texture */
  background-image:radial-gradient(rgba(16,16,16,.05) 1px, transparent 1.4px);
  background-size:14px 14px;
}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--y);color:var(--k)}

.type-zine{font-family:var(--zine);letter-spacing:.02em}

/* ---------- ink click canvas ---------- */
#ink{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;mix-blend-mode:multiply}

/* ---------- drips ---------- */
.drips{position:fixed;top:0;left:0;right:0;height:0;z-index:60;pointer-events:none}
.drips span{
  position:absolute;top:0;left:var(--x);width:var(--w);
  height:calc(26px * var(--d));
  background:var(--k);
  border-radius:0 0 999px 999px;
  animation:drip 6s ease-in-out infinite alternate;
  animation-delay:calc(var(--d) * -2s);
}
.drips span::after{
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:calc(var(--w) * .7);height:calc(var(--w) * .7);
  background:var(--k);border-radius:50%;
}
@keyframes drip{from{transform:scaleY(.75)}to{transform:scaleY(1.25)}}
.drips span{transform-origin:top}

/* ---------- header / registration bar ---------- */
.regbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.4rem;
  background:var(--paper);
  border-bottom:3px solid var(--k);
}
.logo{display:flex;align-items:baseline;gap:.5rem;text-decoration:none}
.logo-k{font-family:var(--disp);font-size:1.7rem;letter-spacing:.01em}
.logo-k .c{color:var(--c)}.logo-k .m{color:var(--m)}.logo-k .y{color:var(--y);text-shadow:0 0 0 var(--k), .5px .5px 0 rgba(16,16,16,.4)}
.logo-sub{font-family:var(--zine);font-size:.8rem;letter-spacing:.35em}
.regbar nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.regbar nav a{
  font-weight:700;text-decoration:none;font-size:.92rem;letter-spacing:.05em;
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .5rem;
}
.regbar nav a:hover{background:var(--k);color:var(--paper)}
.dot{width:.65em;height:.65em;border-radius:50%;display:inline-block}
.dc{background:var(--c)}.dm{background:var(--m)}.dy{background:var(--y);outline:1px solid rgba(16,16,16,.35)}.dk{background:var(--k)}
.nav-cta{border:2px solid var(--k)}

/* ---------- crop marks ---------- */
.crop{position:absolute;width:26px;height:26px;border-color:var(--k);border-style:solid;border-width:0;opacity:.7}
.crop.tl{top:14px;left:14px;border-top-width:2px;border-left-width:2px}
.crop.tr{top:14px;right:14px;border-top-width:2px;border-right-width:2px}
.crop.bl{bottom:14px;left:14px;border-bottom-width:2px;border-left-width:2px}
.crop.br{bottom:14px;right:14px;border-bottom-width:2px;border-right-width:2px}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(4rem,10vh,7rem) clamp(1.2rem,6vw,5rem) 3.5rem}
.hero-eyebrow{font-family:var(--zine);font-size:.9rem;letter-spacing:.15em;margin-bottom:1rem}
h1.misprint,h2.misprint{
  position:relative;font-family:var(--disp);
  font-size:clamp(2.4rem,8.5vw,6.5rem);
  line-height:.95;letter-spacing:-.01em;
  text-transform:uppercase;
}
/* CMYK misregistration via layered shadows; animates on hover */
.misprint{
  text-shadow:
    -3px 0 var(--c),
     3px 1px var(--m),
    -1px -3px var(--y);
  transition:text-shadow .35s ease;
}
.misprint:hover{
  text-shadow:
    -8px 2px var(--c),
     8px -2px var(--m),
     0 -8px var(--y);
}
.hero-cols{display:grid;grid-template-columns:minmax(0,60ch) 1fr;gap:2rem;align-items:end;margin-top:2rem}
.hero-lede{font-size:1.2rem}
.hero-note{transform:rotate(-2deg);max-width:26ch;justify-self:end;font-size:.95rem;
  background:var(--y);padding:.7rem .9rem;box-shadow:4px 4px 0 var(--k)}
.hero-cta{margin-top:2.2rem;display:inline-block}
.hero-hint{margin-top:1rem;font-size:.85rem;opacity:.7}

/* splat button */
.splat-btn{
  font-family:var(--disp);font-size:1.05rem;letter-spacing:.04em;
  background:var(--k);color:var(--paper);
  border:none;cursor:pointer;text-decoration:none;
  padding:1rem 1.6rem;display:inline-block;position:relative;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:6px 6px 0 var(--c), 12px 12px 0 var(--m);
}
.splat-btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--c), 16px 16px 0 var(--m), 22px 22px 0 var(--y)}
.splat-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--c), 4px 4px 0 var(--m)}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;background:var(--k);color:var(--paper);border-block:3px solid var(--k)}
.ticker-track{display:flex;white-space:nowrap;animation:tick 28s linear infinite;font-family:var(--disp);font-size:1rem;padding:.55rem 0}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- plates ---------- */
.plates-intro{padding:3rem 1.4rem 0;text-align:center}
.plates-intro h2{font-size:1.25rem;transform:rotate(-1deg)}
.plates{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
  padding:2.2rem clamp(1.2rem,5vw,4rem) 4rem;
}
.plate{
  position:relative;border:3px solid var(--k);background:var(--paper);
  padding:1.6rem 1.4rem 2.2rem;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.plate:nth-child(1){transform:rotate(-1.2deg)}
.plate:nth-child(2){transform:rotate(.8deg)}
.plate:nth-child(3){transform:rotate(-.6deg)}
.plate:hover{transform:rotate(0) translateY(-6px)}
.plate-c:hover{box-shadow:10px 10px 0 var(--c)}
.plate-m:hover{box-shadow:10px 10px 0 var(--m)}
.plate-y:hover{box-shadow:10px 10px 0 var(--y)}
.plate-chip{
  font-family:var(--zine);font-size:.75rem;letter-spacing:.18em;
  display:inline-block;padding:.25rem .55rem;border:2px solid var(--k);margin-bottom:.8rem;
}
.plate-c .plate-chip{background:var(--c);color:var(--k)}
.plate-m .plate-chip{background:var(--m);color:var(--paper)}
.plate-y .plate-chip{background:var(--y)}
.plate h3{font-family:var(--disp);font-size:2rem;letter-spacing:.02em}
.plate-tag{margin:.2rem 0 1rem;opacity:.75}
.plate-list{list-style:none}
.plate-list li{padding:.5rem 0;border-bottom:1.5px dashed rgba(16,16,16,.35);font-weight:500}
.plate-list li::before{content:"✕ ";font-weight:700}
.plate-c .plate-list li::before{color:var(--c)}
.plate-m .plate-list li::before{color:var(--m)}
.plate-y .plate-list li::before{color:#c9b400}
.halftone{
  position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%;
  background-image:radial-gradient(currentColor 2px, transparent 2.6px);
  background-size:11px 11px;opacity:.25;pointer-events:none;
}
.plate-c .halftone{color:var(--c)}
.plate-m .halftone{color:var(--m)}
.plate-y .halftone{color:#b7a600}

/* ---------- K plate section ---------- */
.kplate{
  position:relative;background:var(--k);color:var(--paper);
  padding:clamp(3rem,8vh,5.5rem) clamp(1.4rem,7vw,6rem);
  text-align:center;
}
.plate-chip.inverse{border-color:var(--paper);color:var(--paper)}
.kplate h2{font-family:var(--disp);font-size:clamp(1.9rem,5.5vw,3.6rem);margin:.9rem 0 1rem;
  text-shadow:-3px 0 var(--c),3px 0 var(--m)}
.kplate p{max-width:64ch;margin:0 auto;font-size:1.1rem}
.swatches{display:flex;justify-content:center;gap:.6rem;margin-top:2rem;flex-wrap:wrap}
.sw{font-family:var(--zine);font-size:.8rem;padding:.5rem .8rem;letter-spacing:.1em}
.swc{background:var(--c);color:var(--k)}
.swm{background:var(--m)}
.swy{background:var(--y);color:var(--k)}
.swk{background:var(--paper);color:var(--k)}

/* ---------- contact ---------- */
.contact{padding:clamp(3rem,9vh,6rem) clamp(1.2rem,6vw,5rem)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
.contact-copy h2{font-size:clamp(2rem,5vw,3.4rem)}
.contact-copy p{margin-top:1rem;font-size:1.1rem}
.contact-ways{list-style:none;margin-top:1.6rem}
.contact-ways li{display:flex;gap:1rem;align-items:baseline;padding:.6rem 0;border-bottom:2px solid var(--k)}
.way-label{font-family:var(--zine);font-size:.75rem;letter-spacing:.2em;min-width:4.5rem}
.contact-ways a{font-weight:700;text-decoration-thickness:3px;text-decoration-color:var(--m)}
.contact-ways a:hover{background:var(--y);text-decoration:none}
.contact-scrawl{margin-top:1.6rem;transform:rotate(-1.5deg)}

.jobform{border:3px solid var(--k);padding:1.8rem;background:#fff;
  box-shadow:8px 8px 0 var(--c),16px 16px 0 var(--m),24px 24px 0 var(--y)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--zine);font-size:.8rem;letter-spacing:.15em;margin-bottom:.35rem;text-transform:uppercase}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:1rem;
  border:2px solid var(--k);background:var(--paper);padding:.7rem .8rem;border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--c);outline-offset:2px}
.hp{position:absolute;left:-5000px}

/* ---------- footer ---------- */
.foot{border-top:3px solid var(--k);padding:2rem 1.4rem 4rem;text-align:center}
.foot-marks{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-bottom:1rem}
.reg-target{width:22px;height:22px;border:2px solid var(--k);border-radius:50%;position:relative}
.reg-target::before,.reg-target::after{content:"";position:absolute;background:var(--k)}
.reg-target::before{left:50%;top:-4px;bottom:-4px;width:2px;transform:translateX(-50%)}
.reg-target::after{top:50%;left:-4px;right:-4px;height:2px;transform:translateY(-50%)}
.foot-bars{display:flex}
.foot-bars i{width:34px;height:14px;display:block}
.bc{background:var(--c)}.bm{background:var(--m)}.by{background:var(--y)}.bk{background:var(--k)}
.foot p{font-size:.92rem}
.foot-zine{margin-top:.5rem;opacity:.65}
.foot a{font-weight:700}

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

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .plates{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero-cols{grid-template-columns:1fr}
  .hero-note{justify-self:start}
  .jobform{box-shadow:6px 6px 0 var(--c),12px 12px 0 var(--m)}
}
@media (max-width:560px){
  .regbar{flex-direction:column;align-items:flex-start}
  .regbar nav{gap:.5rem}
  .drips{display:none}
}