/* ==========================================================================
   NEW MEDIA NETWORK — "Chromatic Motion" concept
   Design system: shared across index.html / work.html / contact.html

   Palette rationale (not generic tech-blue):
   Heritage print & darkroom inks — poster red, burnt orange, hot magenta
   silkscreen, heritage signage green and gold — paired with a warm,
   almost-black "ink" ground instead of cool slate/indigo. The brand sits
   at business × art × culture × tech, so the palette comes from physical
   print/film craft (gels, inks, darkroom paper) rather than software UI.
   ========================================================================== */

:root{
  /* ---- ground ---- */
  --ink:        #140F0B;   /* near-black, warm (not cool slate) */
  --ink-2:      #1F1712;
  --paper:      #FBF3E6;   /* warm cream paper */
  --paper-dim:  #EFE4D2;

  /* ---- chromatic system: heritage print inks, not tech gradient ---- */
  --red:      #E63A1A;   /* poster red */
  --orange:   #FF8A1E;   /* burnt orange */
  --magenta:  #E8127E;   /* hot silkscreen magenta */
  --green:    #2E8F4E;   /* heritage signage green */
  --gold:     #F2B134;   /* heritage gold */

  --ink-rgb: 20,15,11;
  --paper-rgb: 251,243,230;

  /* ---- type ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --fs-display-xl: clamp(3.4rem, 11vw, 11.5rem);
  --fs-display-l:  clamp(2.6rem, 7vw, 6.5rem);
  --fs-display-m:  clamp(1.8rem, 4vw, 3.2rem);
  --fs-body-l: 1.25rem;
  --fs-body: 1.05rem;
  --fs-label: 0.78rem;

  /* ---- spacing ---- */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.6rem;
  --sp-4: 2.4rem;
  --sp-5: 4rem;
  --sp-6: 6.4rem;
  --sp-7: 10rem;

  --radius: 3px;
  --border-w: 2px;
  --ease-kinetic: cubic-bezier(.16,.84,.3,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a{ color: inherit; }
h1,h2,h3,p,figure{ margin: 0; }
img{ max-width: 100%; display:block; }

.u-visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* --------------------------------------------------------------------
   Blob field system — pure CSS, GPU-friendly transforms only.
   An SVG feTurbulence/feDisplacementMap filter is applied on top for
   organic, non-geometric chromatic motion (no gradients-on-everything,
   no glassmorphism — these are opaque, saturated ink fields).
   -------------------------------------------------------------------- */
.field{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--ink);
  filter: url(#nmn-turbulence);
}
.field__blob{
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
  opacity: .92;
}
.field--spectrum .field__blob:nth-child(1){
  width: 60vw; height: 60vw; left:-10vw; top:-15vw;
  background: var(--red);
  animation: drift-a 26s var(--ease-kinetic) infinite alternate;
}
.field--spectrum .field__blob:nth-child(2){
  width: 50vw; height: 50vw; right:-15vw; top:0vw;
  background: var(--orange);
  animation: drift-b 22s var(--ease-kinetic) infinite alternate;
}
.field--spectrum .field__blob:nth-child(3){
  width: 55vw; height: 55vw; left: 20vw; bottom:-25vw;
  background: var(--magenta);
  animation: drift-c 30s var(--ease-kinetic) infinite alternate;
}
.field--spectrum .field__blob:nth-child(4){
  width: 38vw; height: 38vw; right: 5vw; bottom:-10vw;
  background: var(--green);
  animation: drift-d 24s var(--ease-kinetic) infinite alternate;
}

@keyframes drift-a{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(12vw, 10vh) scale(1.25); }
}
@keyframes drift-b{
  0%{ transform: translate(0,0) scale(1.1); }
  100%{ transform: translate(-14vw, 14vh) scale(.85); }
}
@keyframes drift-c{
  0%{ transform: translate(0,0) rotate(0deg) scale(1); }
  100%{ transform: translate(8vw,-12vh) rotate(25deg) scale(1.2); }
}
@keyframes drift-d{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(-8vw,-8vh) scale(1.3); }
}

@media (prefers-reduced-motion: reduce){
  .field__blob{ animation: none !important; }
}

/* single-hue field variants used on work.html rows + contact hero.
   These use the same 3-blob layout as .field--spectrum but every
   blob shares one accent color instead of four. */
.field--red .field__blob,
.field--orange .field__blob,
.field--magenta .field__blob,
.field--green .field__blob,
.field--gold .field__blob{
  width: 42vw; height: 42vw;
}
.field--red .field__blob:nth-child(1){ left:-8vw; top:-12vw; background: var(--red); animation: drift-a 26s var(--ease-kinetic) infinite alternate; }
.field--red .field__blob:nth-child(2){ right:-10vw; top:6vw; background: var(--red); animation: drift-b 22s var(--ease-kinetic) infinite alternate; }
.field--red .field__blob:nth-child(3){ left:18vw; bottom:-18vw; background: var(--red); animation: drift-c 30s var(--ease-kinetic) infinite alternate; }

.field--orange .field__blob:nth-child(1){ left:-8vw; top:-12vw; background: var(--orange); animation: drift-a 24s var(--ease-kinetic) infinite alternate; }
.field--orange .field__blob:nth-child(2){ right:-10vw; top:6vw; background: var(--orange); animation: drift-b 20s var(--ease-kinetic) infinite alternate; }
.field--orange .field__blob:nth-child(3){ left:18vw; bottom:-18vw; background: var(--orange); animation: drift-d 28s var(--ease-kinetic) infinite alternate; }

.field--magenta .field__blob:nth-child(1){ left:-8vw; top:-12vw; background: var(--magenta); animation: drift-c 25s var(--ease-kinetic) infinite alternate; }
.field--magenta .field__blob:nth-child(2){ right:-10vw; top:6vw; background: var(--magenta); animation: drift-a 21s var(--ease-kinetic) infinite alternate; }
.field--magenta .field__blob:nth-child(3){ left:18vw; bottom:-18vw; background: var(--magenta); animation: drift-b 27s var(--ease-kinetic) infinite alternate; }

.field--green .field__blob:nth-child(1){ left:-8vw; top:-12vw; background: var(--green); animation: drift-d 23s var(--ease-kinetic) infinite alternate; }
.field--green .field__blob:nth-child(2){ right:-10vw; top:6vw; background: var(--green); animation: drift-c 19s var(--ease-kinetic) infinite alternate; }
.field--green .field__blob:nth-child(3){ left:18vw; bottom:-18vw; background: var(--green); animation: drift-a 26s var(--ease-kinetic) infinite alternate; }

.field--gold .field__blob:nth-child(1){ left:-8vw; top:-12vw; background: var(--gold); animation: drift-b 24s var(--ease-kinetic) infinite alternate; }
.field--gold .field__blob:nth-child(2){ right:-10vw; top:6vw; background: var(--gold); animation: drift-d 22s var(--ease-kinetic) infinite alternate; }
.field--gold .field__blob:nth-child(3){ left:18vw; bottom:-18vw; background: var(--gold); animation: drift-c 29s var(--ease-kinetic) infinite alternate; }

/* --------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------- */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  mix-blend-mode: difference;
  pointer-events: none;
}
.nav *{ pointer-events: auto; }
.nav__mark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--paper);
}
.nav__links{
  display:flex;
  gap: var(--sp-4);
  list-style: none;
  margin:0; padding:0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.nav__links a{ text-decoration:none; color: var(--paper); border-bottom: var(--border-w) solid transparent; transition: border-color .25s var(--ease-kinetic); }
.nav__links a:hover,
.nav__links a[aria-current="page"]{ border-color: var(--paper); }
.nav__links a:focus-visible{ outline: 2px solid var(--paper); outline-offset: 4px; }

/* --------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------- */
.wrap{ position: relative; z-index: 2; }
.section{
  position: relative;
  padding: var(--sp-6) var(--sp-4);
}
.section--tight{ padding: var(--sp-5) var(--sp-4); }
.container{
  max-width: 1280px;
  margin: 0 auto;
}

.kicker{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .18em;
  opacity: .8;
  display:block;
  margin-bottom: var(--sp-3);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: .6em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration:none;
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-w) solid currentColor;
  border-radius: var(--radius);
  color: var(--paper);
  background: transparent;
  transition: background .25s var(--ease-kinetic), color .25s var(--ease-kinetic), transform .2s var(--ease-kinetic);
}
.btn:hover{ background: var(--paper); color: var(--ink); transform: translateY(-2px); }
.btn:focus-visible{ outline: 2px solid var(--paper); outline-offset: 3px; }
.btn--solid{ background: var(--paper); color: var(--ink); }
.btn--solid:hover{ background: transparent; color: var(--paper); }

/* --------------------------------------------------------------------
   Kinetic display type
   -------------------------------------------------------------------- */
.display{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.display-xl{ font-size: var(--fs-display-xl); }
.display-l{ font-size: var(--fs-display-l); }
.display-m{ font-size: var(--fs-display-m); }

/* text that visibly reacts with the color field behind it */
.ink-react{
  mix-blend-mode: difference;
  color: var(--paper);
}

/* --------------------------------------------------------------------
   Footer (shared)
   -------------------------------------------------------------------- */
.site-footer{
  position: relative;
  z-index: 2;
  background: var(--paper);
  color: var(--ink);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.site-footer .container{
  display:flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-end;
  justify-content: space-between;
  border-top: var(--border-w) solid var(--ink);
  padding-top: var(--sp-3);
}
.site-footer__mark{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-transform: uppercase;
  font-weight: 700;
}
.site-footer__links{
  display:flex;
  gap: var(--sp-4);
  list-style:none;
  margin:0; padding:0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.site-footer__links a{ text-decoration:none; border-bottom: 1px solid transparent; }
.site-footer__links a:hover{ border-color: var(--ink); }
.site-footer__copy{
  width:100%;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  opacity:.65;
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------
   Clients strip (wordmark placeholders — no logos, no icons)
   -------------------------------------------------------------------- */
.clients{
  display:flex;
  flex-wrap:wrap;
  gap: var(--sp-5) var(--sp-6);
  align-items:center;
}
.clients__item{
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  text-transform: uppercase;
  opacity: .55;
  transition: opacity .25s var(--ease-kinetic);
}
.clients__item:hover{ opacity: 1; }

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width: 640px){
  .nav{ padding: var(--sp-2) var(--sp-3); }
  .nav__links{ gap: var(--sp-3); }
  .section{ padding: var(--sp-5) var(--sp-3); }
}

/* --------------------------------------------------------------------
   CTA split (home) + chromatic index (work)
   -------------------------------------------------------------------- */
.cta-split{ transition: transform .35s var(--ease-kinetic); }
.cta-split span{ transition: transform .35s var(--ease-kinetic); }
.cta-split:hover span{ transform: scale(1.06); }
.cta-split:focus-visible{ outline: 3px solid var(--ink); outline-offset: -6px; }

@media (max-width: 760px){
  section > .cta-split{ padding: var(--sp-6) var(--sp-3) !important; }
  section[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  .container[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; gap: var(--sp-5) !important; }
}

.index-row{
  position: relative;
  border-top: var(--border-w) solid rgba(var(--paper-rgb), .18);
}
.index-row:last-child{ border-bottom: var(--border-w) solid rgba(var(--paper-rgb), .18); }
.index-row__trigger{
  position: relative;
  z-index: 2;
  width: 100%;
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: var(--sp-4) 0;
}
.index-row__trigger:focus-visible{ outline: 2px solid var(--paper); outline-offset: 4px; }
.index-row__num{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  opacity: .6;
  margin-right: var(--sp-3);
}
.index-row__name{ font-family: var(--font-display); font-weight:700; text-transform:uppercase; font-size: clamp(1.8rem, 5vw, 4.2rem); line-height: .9; }
.index-row__plus{ font-family: var(--font-mono); font-size: 1.4rem; transition: transform .3s var(--ease-kinetic); }
.index-row[data-open="true"] .index-row__plus{ transform: rotate(45deg); }
.index-row__panel{
  position: relative;
  z-index: 2;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease-kinetic);
}
.index-row__panel-inner{
  padding: 0 0 var(--sp-5);
  display:flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.index-row__panel p{ max-width: 56ch; font-size: var(--fs-body-l); }
.index-row__field{
  position:absolute;
  inset:0;
  opacity: 0;
  transition: opacity .5s var(--ease-kinetic);
  pointer-events: none;
  z-index: 0;
}
.index-row[data-open="true"] .index-row__field{ opacity: .55; }
.index-row__tags{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap: var(--sp-1);
  font-family: var(--font-mono); font-size: var(--fs-label); text-transform:uppercase; letter-spacing:.08em; opacity:.8;
  min-width: 14rem;
}