/* ============================================================
   New Art — cinematic gallery styles
   ============================================================ */

:root {
  --na-bg: #0A0A0A;
  --na-cream: #EDE8DF;
  --na-red: #FF5C5C;
  --na-parch: #EDE8DF;
  --na-ink: #EDE8DF;
  --na-mute: rgba(237, 232, 223, 0.62);
  --na-rule: rgba(237, 232, 223, 0.18);
  --na-grain: 0.55;

  --na-h: 'Bebas Neue', 'Anton', Impact, sans-serif;
  --na-b: 'Roboto', system-ui, sans-serif;
  --na-s: 'Playfair Display', 'EB Garamond', serif;
  --na-m: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Ambient light-leak brand blooms, appended in front of every section's
     own opaque var(--na-bg) fill — a body-level layer would be painted over
     since almost every section sets its own opaque background. */
  --na-leak:
    conic-gradient(from 160deg at 18% -6%, transparent 0deg, rgba(255,92,92,0.07) 5deg, rgba(255,140,90,0.05) 9deg, transparent 16deg),
    conic-gradient(from 165deg at 52% -8%, transparent 0deg, rgba(240,228,206,0.06) 5deg, transparent 14deg),
    conic-gradient(from 150deg at 88% 8%, transparent 0deg, rgba(255,92,92,0.05) 4deg, transparent 13deg);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--na-bg);
  color: var(--na-ink);
  font-family: var(--na-b);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--na-red); color: var(--na-bg); }

.na-mono {
  font-family: var(--na-m);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--na-mute);
}
.na-italic {
  font-family: var(--na-s);
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   NAV
   ============================================================ */
.na-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 300ms ease, padding 300ms ease, backdrop-filter 300ms ease;
  mix-blend-mode: normal;
}
.na-nav.is-scrolled {
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px 40px;
}
.na-nav__brand {
  color: var(--na-parch);
  display: inline-flex;
}
.na-nav__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 32px;
}
.na-nav__links a {
  font-family: var(--na-m);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--na-parch);
  position: relative;
  padding: 6px 0;
  transition: color 200ms;
}
.na-nav__links a:hover { color: var(--na-red); }
.na-nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--na-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}
.na-nav__links a:hover::after { transform: scaleX(1); }

/* ============================================================
   HERO
   ============================================================ */
/* ============================================================
   HERO / CINEMATIC SHOWREEL INTRO
   ============================================================ */
/* Cinematic vignette — gently darkens the edges of the frame */
/* Full-page ambient coral glow behind everything (breathes + drifts) */



/* Title line: "LET'S CREATE," (Playfair) + NEWART logo, inline on a baseline */
/* Film noise/grain — scoped strictly to the video wrapper */
/* Brush-style scroll indicator below the video */


.na-hero {
  position: relative;
  min-height: 100vh;
  background: var(--na-bg);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* radial vignette */
.na-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 80%, #000 100%),
    radial-gradient(circle at 70% 30%, rgba(192,57,43,0.10), transparent 55%);
  pointer-events: none; z-index: 0;
}

.na-hero__grain {
  position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: var(--na-grain);
  mix-blend-mode: overlay;
  animation: grainShift 1.2s steps(6) infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes grainShift {
  0% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%,-3%); }
  60% { transform: translate(-1%, 1%); }
  80% { transform: translate(3%, -1%); }
  100% { transform: translate(0,0); }
}

.na-hero__scanlines {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.na-hero__corner {
  position: absolute;
  z-index: 3;
  padding: 0;
}
.na-hero__corner--tl { top: 100px; left: 40px; }
.na-hero__corner--tr { top: 100px; right: 40px; }
.na-hero__corner--bl { bottom: 60px; left: 40px; }
.na-hero__corner--bl .na-mono { color: var(--na-red); }
.na-hero__corner--br { bottom: 60px; right: 40px; }

.na-hero__center {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}
.na-hero__mark {
  margin-bottom: 32px;
}
.na-hero__mark .na-logo {
  height: clamp(60px, 13vw, 200px) !important;
  margin: 0 auto;
  filter: drop-shadow(0 0 24px rgba(255, 92, 92, 0.18));
}
.na-hero__tag {
  font-family: var(--na-h);
  font-size: clamp(28px, 4.5vw, 64px);
  letter-spacing: 0.06em;
  margin: 0 0 24px 0;
  color: var(--na-ink);
  font-weight: 400;
}
.na-hero__rule {
  width: 56px; height: 2px;
  background: var(--na-red);
  margin: 0 auto 22px;
}
.na-hero__sub {
  font-family: var(--na-s);
  font-style: italic;
  font-size: 17px;
  color: var(--na-mute);
  margin: 0;
  line-height: 1.5;
}
.na-hero__scroll {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.na-hero__scrollline {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--na-mute), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.na-manifesto {
  position: relative;
  padding: 100px 40px 140px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 1fr;
  gap: 90px;
}
.na-manifesto__meta {
  grid-column: 1 / -1;
  margin-bottom: 40px;
}
.na-manifesto[data-layout="stacked"] {
  grid-template-columns: 1fr;
}
.na-manifesto__body {
  font-family: var(--na-h);
  font-size: clamp(44px, 6.4vw, 100px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--na-ink);
  min-width: 0;
}
.na-manifesto__statement { margin: 0; text-wrap: pretty; }
.na-manifesto__statement span { white-space: nowrap; }
.na-manifesto__line--em {
  color: var(--na-parch);
  font-family: var(--na-s);
  font-style: italic;
  font-weight: 400;
}
.na-manifesto__line--red {
  color: var(--na-red);
  font-family: var(--na-h);
  font-style: normal;
  letter-spacing: 0.01em;
}
.na-manifesto__word-bebas { font-family: var(--na-h); font-style: normal; color: inherit; }
.na-manifesto__line--small {
  font-family: var(--na-s);
  font-style: italic;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--na-mute);
  display: inline-block;
  margin-top: 28px;
}
.na-manifesto__aside {
  align-self: center;
  margin-top: -40px;
  padding: 10px 0 10px 28px;
  font-size: 15px;
  color: var(--na-parch);
}
.na-manifesto__aside p { margin: 0 0 16px; }
.na-manifesto__philosophy { color: var(--na-red); }
.na-manifesto__aside em {
  color: var(--na-parch);
  font-style: normal;
}
.na-manifesto__sig {
  display: block;
  margin-top: 22px !important;
  color: var(--na-red);
}
.na-manifesto__chapters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 0;
  padding-top: 0;
}
.na-manifesto__chapter > .na-mono {
  display: block;
  color: var(--na-red);
  margin-bottom: 18px;
}
.na-manifesto__chapter p {
  font-family: var(--na-b);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--na-parch);
  margin: 0 0 16px;
}
.na-manifesto__chapter em {
  color: var(--na-parch);
  font-style: normal;
}
.na-manifesto__chapter-close {
  color: var(--na-parch) !important;
  font-family: var(--na-s) !important;
  font-style: italic;
  font-size: 18px !important;
}
@media (max-width: 900px) {
  .na-manifesto__chapters { grid-template-columns: 1fr; gap: 36px; }
}
.na-manifesto__reel-cta { margin-top: 48px; display: flex; justify-content: flex-end; }
.na-manifesto__reel-cta--delayed {
  margin-top: 16px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 380ms ease, transform 380ms ease;
  pointer-events: none;
}
.na-manifesto__reel-cta--delayed.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.na-manifesto__reel-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--na-rule);
  color: var(--na-parch);
  font-family: var(--na-m);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.na-manifesto__reel-btn:hover { border-color: var(--na-red); color: var(--na-red); }
.na-manifesto__reel {
  grid-column: 1 / -1;
  overflow: hidden;
  max-height: 0;
  min-height: 0;
  opacity: 0;
  border-radius: 24px;
  transition: max-height 420ms cubic-bezier(0.65, 0, 0.35, 1), opacity 320ms ease;
}
.na-manifesto__reel > div { margin-top: 24px; }
.na-manifesto__teaser {
  overflow: hidden;
  max-height: 0;
  min-height: 0;
  opacity: 0;
  transition: max-height 420ms cubic-bezier(0.65, 0, 0.35, 1), opacity 320ms ease;
}
.na-manifesto__teaser-text {
  margin: 20px 0 0;
  color: var(--na-parch);
  font-family: var(--na-b);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.7;
  text-align: right;
}

/* ============================================================
   BEHIND THE FRAME (BTS band)
   ============================================================ */
/* ============================================================
   PORTFOLIO
   ============================================================ */
.na-portfolio {
  position: relative;
  padding: 100px 40px 140px;
  background: var(--na-bg);
}
.na-section__head {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 60px;
}

.na-section__title {
  font-family: var(--na-h);
  font-size: clamp(54px, 8vw, 120px);
  letter-spacing: 0.03em;
  margin: 0;
  line-height: 0.9;
  color: var(--na-parch);
}
.na-section__title--ink { color: var(--na-red); }

.na-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 31px;
  align-items: start;
}
/* Each lane stacks and moves independently — a card growing/shrinking only
   shifts the cards below it in its OWN lane, never the other two. */
.na-lane { display: flex; flex-direction: column; row-gap: 41px; }

.na-card {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  width: 100%;
  isolation: isolate;
}
/* Every card's box follows its own frame — no reserved height. A row's height
   is set by its tallest frame, so when a frame snaps the cards below move. */
.na-card--r0 { aspect-ratio: auto; }
.na-card--r1 { aspect-ratio: auto; }
/* r2's box follows its frame (no reserved height), so when it snaps back to
   4:5 the cards below visibly move up with it. */
.na-card--r2 { aspect-ratio: auto; }
.na-card--r3 { aspect-ratio: auto; }
.na-card--r4 { aspect-ratio: auto; }
/* Scroll-reveal: new cards rise up from below and settle with a light
   overshoot as they enter the viewport, instead of a flat fade. */
.na-card--reveal {
  transform: translateY(120px);
  transition: transform 900ms cubic-bezier(0.22, 1.1, 0.36, 1),
              opacity 600ms ease;
  transition-delay: var(--card-d, 0ms);
}
.na-card--reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Active-zone crop: only the FRAME's height changes as a card crosses the
   viewport's middle band — width is fixed by the grid column and the media
   inside keeps one constant scale (the plate). The frame's aspect-ratio is
   written per frame by the scroll loop in components.jsx, so the motion is
   directly scroll-linked instead of a toggled transition. */
.na-card__video,
.na-card__poster,
.na-card__media > svg {
  position: absolute;
  inset: auto auto auto 0;
  top: 50%;
  width: 100%;
  height: var(--na-plate, 125cqw);
  transform: translateY(-50%) translateY(var(--na-shift-y, 0px)) scale(var(--na-scale, 1));
  transition: transform 900ms cubic-bezier(0.65, 0, 0.2, 1);
}
/* Plate height per variant = that variant's TALLEST crop, so the media covers
   the frame at its tallest and never rescales. */
.na-card__media { width: 100%; }
.na-card--r0 .na-card__media { aspect-ratio: 16 / 9; --na-plate: 56.25cqw; }
.na-card--r1 .na-card__media { aspect-ratio: 16 / 9; --na-plate: 125cqw; }
.na-card--r2 .na-card__media { aspect-ratio: 4 / 5; --na-plate: 177.8cqw; }
.na-card--r3 .na-card__media { aspect-ratio: 2.39 / 1; --na-plate: 56.25cqw; }
.na-card--r4 .na-card__media { aspect-ratio: 2.39 / 1; --na-plate: 75.4cqw; }
@media (prefers-reduced-motion: reduce) {
  .na-card--reveal { opacity: 1; transform: none; transition: none; }
  .na-card__media { transition: none; }
}
/* Vertical rhythm varies with the crop: tall frames sit closer to their
   neighbour, wide/cinematic ones get a little more air. */
.na-card--r1, .na-card--r4 { margin-bottom: 0; }
.na-card--r3 { margin-bottom: 0; }
.na-card--r0, .na-card--r2 { margin-bottom: 0; }
/* Clickable/hover area is the frame itself, never the reserved box around it */
.na-card--link { cursor: default; pointer-events: none; }
.na-card--link .na-card__media { pointer-events: auto; cursor: pointer; }

.na-card__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #050505;
  isolation: isolate;
  border-radius: 45px;
  container-type: inline-size;
}
/* First card: Vimeo embed fills the media area (cover) with a crossfading poster */
.na-card__video { overflow: hidden; border-radius: inherit; }
.na-card__video iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* width/height set by JS to cover-crop the 16:9 video into the frame */
  border: 0;
  pointer-events: none;
}
.na-card__video .na-card__poster { inset: auto; background-repeat: no-repeat; border-radius: 0; }
.na-card__poster {
  z-index: 2;
  background-size: cover;
  background-position: center;
  background-color: #050505;
  opacity: 1;
  transition: opacity 0.5s ease;
  border-radius: inherit;
}
.na-card__poster.is-playing { opacity: 0; }

.na-card__media svg {
  transition: transform 1200ms cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 600ms ease;
  filter: saturate(0.85) contrast(1.05);
}
.na-card.is-active .na-card__media svg {
  transform: translateY(-50%) scale(1.045);
  filter: saturate(0.7) contrast(1.15);
}

.na-card__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  animation: grainShift 0.9s steps(6) infinite;
}
.na-card.is-active .na-card__grain { opacity: 0.75; }

.na-card__vignette {
  position: absolute; inset: 0;
  pointer-events: none;
}
.na-card__media { position: relative; isolation: isolate; }
/* Hover glow tracks the FRAME's animated crop (not the fixed reserved box).
   Applied as a filter on the media element itself: drop-shadow renders after
   the element paints, so it is not clipped by the frame's own overflow and
   needs no negative z-index behind its opaque background. */
.na-card__media {
  transition: aspect-ratio 900ms cubic-bezier(0.65, 0, 0.2, 1), filter 280ms ease, width 900ms cubic-bezier(0.65, 0, 0.2, 1), margin-left 900ms cubic-bezier(0.65, 0, 0.2, 1);
}
.na-card.is-active .na-card__media {
  filter: drop-shadow(0 8px 18px rgba(255, 92, 92, 0.45));
}
.na-card--breakout { z-index: 40; }
body.na-breakout-active .na-card:not(.na-card--breakout) { opacity: 0.06; pointer-events: none; transition: opacity 0.7s ease; }
.na-card { transition: opacity 0.7s ease; }
.na-card.na-card--reveal { transition: transform 900ms cubic-bezier(0.22, 1.1, 0.36, 1) var(--card-d, 0ms), opacity 0.7s ease; }
body.na-breakout-active .na-card.na-card--reveal:not(.na-card--breakout) { transition: opacity 0.7s ease; }

.na-card__meta {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms ease, transform 280ms ease;
}
.na-card.is-active .na-card__meta { opacity: 1; transform: translateY(0); }

/* na-card__caption: permanent title written below the frame */
.na-card__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.na-card__caption-title {
  font-family: var(--na-h);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 22px;
  color: var(--na-parch);
  line-height: 1.1;
}
.na-card__caption-type {
  font-family: var(--na-mono, var(--na-h));
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 13px;
  color: var(--na-parch);
  opacity: 0.55;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   ARTISTS (horizontal pinned scroll, GSAP-driven) — DARK STUDIO WALL
   ============================================================ */
.na-artists {
  position: relative;
  background: var(--na-bg);
  color: var(--na-ink);
}

/* Stage — title + rail pinned together as ONE unit, so the title is part
   of the scrolling section and never behaves like a standalone sticky header. */
.na-artists__stage {
  position: relative;
  background: var(--na-bg);
}
.na-artists__head {
  position: relative;
  padding: 16px 40px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 40px;
  align-items: end;
}

/* Pin wrapper — GSAP ScrollTrigger pins the rail centered in viewport */
.na-artists__pin {
  position: relative;
  height: auto;
  padding: 12px 0;
  background: var(--na-bg);
}

.na-artists__head .na-mono { color: var(--na-mute); grid-column: 1; }
.na-artists__head .na-section__title {
  grid-column: 1; grid-row: 2;
  color: var(--na-parch);
  font-size: clamp(28px, 3.5vw, 48px);
}
.na-artists__sub {
  grid-column: 2; grid-row: 2;
  font-family: var(--na-s);
  font-style: italic;
  font-size: 15px;
  color: var(--na-mute);
  margin: 0;
  align-self: end;
  max-width: 460px;
  justify-self: end;
  text-align: right;
}

/* Rail — tightly wraps the cards (no oversized vertical framing) */
.na-artists__rail {
  position: relative;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 22px;
  z-index: 2;
}
.na-artists__track {
  position: relative;
  left: 0;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 34px;
  will-change: transform;
}
.na-artists__spacer-l { flex: 0 0 112px; }
.na-artists__spacer-r { flex: 0 0 30vw; }

.na-pin {
  flex: 0 0 auto;
  width: 280px;
  margin: 0 0 4rem 0;
  padding-bottom: 3.5rem;
  position: relative;
  overflow: visible;
  transition: transform 400ms ease;
}
.na-pin__frame {
  position: relative;
  overflow: visible;
}
.na-pin__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.4),
    0 18px 30px -12px rgba(0,0,0,0.6),
    0 4px 10px -4px rgba(0,0,0,0.4);
}
.na-pin__duotone {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(255, 92, 92, 0.2), rgba(13,13,13,0.5));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.na-pin__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: opacity 260ms ease;
}
.na-pin__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.na-pin:hover .na-pin__img--hover { opacity: 1; }
.na-pin:hover .na-pin__img:not(.na-pin__img--hover) { opacity: 0; }

/* TAPES — all solid red, z-index above photo, varied corners */
.na-pin__tape {
  position: absolute;
  display: block;
  height: 22px;
  background: #ff5c5c;
  z-index: 30;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.08) inset;
  transform-origin: center;
  /* torn left/right edges via a jagged clip-path (top/bottom stay straight) */
  clip-path: polygon(
    2% 0%, 5% 1.5%, 8% 0%, 11% 1%, 14% 0%, 17% 1.5%, 20% 0%, 23% 1%, 26% 0%,
    29% 1.5%, 32% 0%, 35% 1%, 38% 0%, 41% 1.5%, 44% 0%, 47% 1%, 50% 0%,
    53% 1.5%, 56% 0%, 59% 1%, 62% 0%, 65% 1.5%, 68% 0%, 71% 1%, 74% 0%,
    77% 1.5%, 80% 0%, 83% 1%, 86% 0%, 89% 1.5%, 92% 0%, 95% 1%, 98% 0%, 100% 0%,
    97% 5%, 100% 10%, 96% 15%, 100% 20%, 97% 25%, 100% 30%, 96% 35%,
    100% 40%, 97% 45%, 100% 50%, 96% 55%, 100% 60%, 97% 65%, 100% 70%,
    96% 75%, 100% 80%, 97% 85%, 100% 90%, 96% 95%, 100% 100%,
    98% 100%, 95% 98.5%, 92% 100%, 89% 99%, 86% 100%, 83% 98.5%, 80% 100%,
    77% 99%, 74% 100%, 71% 98.5%, 68% 100%, 65% 99%, 62% 100%, 59% 98.5%,
    56% 100%, 53% 99%, 50% 100%, 47% 98.5%, 44% 100%, 41% 99%, 38% 100%,
    35% 98.5%, 32% 100%, 29% 99%, 26% 100%, 23% 98.5%, 20% 100%, 17% 99%,
    14% 100%, 11% 98.5%, 8% 100%, 5% 99%, 2% 100%, 0% 100%,
    4% 90%, 0% 85%, 3% 80%, 0% 75%, 4% 70%, 0% 65%, 3% 60%,
    0% 55%, 4% 50%, 0% 45%, 3% 40%, 0% 35%, 4% 30%, 0% 25%,
    3% 20%, 0% 15%, 4% 10%, 0% 5%
  );
  /* fibrous washi-tape texture: soft length-wise streaks, no crosshatch */
  background-image:
    repeating-linear-gradient(0.5deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 4px, rgba(0,0,0,0.05) 4px, rgba(0,0,0,0.05) 5px, transparent 5px, transparent 9px),
    linear-gradient(
      90deg,
      rgba(0,0,0,0.08) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(0,0,0,0.06) 70%,
      rgba(255,255,255,0.05) 100%
    );
  background-color: #ff5c5c;
}
.na-pin__tape--tl { top: -12px; left: -16px; }
.na-pin__tape--tr { top: -12px; right: -16px; }
.na-pin__tape--tc { top: -14px; left: 50%; }

.na-pin__cap {
  margin-top: 22px;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 0 4px 1rem;
}
.na-pin__sig {
  font-family: 'Caveat', 'Playfair Display', cursive;
  font-style: italic;
  font-size: 28px;
  color: var(--na-parch);
  line-height: 1.1;
  border-bottom: 1px solid rgba(240, 234, 214, 0.25);
  padding-bottom: 6px;
  margin-bottom: 0.5rem;
  align-self: flex-start;
}
.na-pin__role {
  color: var(--na-mute);
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  line-height: 1.4;
  position: relative;
  display: inline-block;
}
.na-pin__role-text, .na-pin__role-email {
  transition: opacity 220ms ease;
}
.na-pin__role-email {
  position: absolute;
  inset: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  color: var(--na-red);
  pointer-events: none;
}
.na-pin__role:hover .na-pin__role-text { opacity: 0; }
.na-pin__role:hover .na-pin__role-email { opacity: 1; }

/* ============================================================
   VACANCIES (Become a New Artist)
   ============================================================ */
.na-vac {
  padding: 40px 40px 60px;
  display: flex;
  flex-direction: column;
  gap: 90px;
}
.na-vac__block { display: flex; flex-direction: column; gap: 20px; position: relative; }
/* Small hidden brush icon — a subtle easter-egg link, in the brand red,
   tucked into the corner rather than announced as a normal button. */
.na-vac__easter {
  position: absolute;
  top: 0; right: 21%;
  width: 78px; height: 78px;
  color: var(--na-red);
  opacity: 0.32;
  transition: opacity 220ms ease, transform 220ms ease;
}
.na-vac__easter svg { width: 100%; height: 100%; display: block; }
.na-vac__easter:hover { transform: scale(1.15) rotate(-4deg); }
/* Hero intro block: title centered above, lead copy filling the full
   available width edge to edge instead of sitting in a narrow column. */
.na-vac__intro { align-items: stretch; }
.na-vac__intro .na-vac__lead { max-width: none; width: 100%; }
.na-vac__title {
  font-family: var(--na-h);
  font-size: clamp(28px, 3.5vw, 48px);
  letter-spacing: 0.03em;
  color: var(--na-parch);
  margin: 0 0 4px;
}
.na-vac__title .na-italic { color: var(--na-parch); }
.na-vac__title-serif { font-family: var(--na-s); font-style: italic; font-weight: 400; text-transform: none; }
.na-vac__title-slab { font-family: var(--na-h); color: var(--na-parch); }
.na-vac__lead, .na-vac__text {
  font-family: var(--na-b);
  font-weight: 300;
  color: var(--na-parch);
  font-size: 17px;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0;
}
.na-vac__subtitle {
  font-family: var(--na-h);
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0.02em;
  color: var(--na-parch);
  margin: 0;
}
/* Squares can lay out side by side; each square keeps its own dropdown
   directly beneath it via the shared column wrapper. align-items:flex-start
   keeps the row from stretching one column to match a taller open sibling. */
.na-vac__role-col { display: flex; flex-direction: column; width: 100%; max-width: 407px; }
.na-vac__roles-row { display: flex; align-items: flex-start; gap: 30px; position: relative; }
.na-vac__roles-row .na-vac__role-col { flex: 0 0 220px; width: 220px; max-width: none; }
/* Clickable 1:1 teaser square, styled like a Gallery film card, that expands
   into the full role details below it. */
.na-vac__square {
  width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 45px;
  background: #050505;
  border: 1px solid var(--na-rule);
  color: var(--na-parch);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
  transition: border-color 200ms ease, box-shadow 280ms ease;
  font-family: var(--na-b);
}
.na-vac__square:hover, .na-vac__square.is-open {
  border-color: var(--na-red);
  box-shadow: 0 8px 24px 0px rgba(255, 92, 92, 0.3);
}
.na-vac__square-title {
  font-family: var(--na-h);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.na-vac__square-cta {
  font-family: var(--na-m);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--na-red);
}
.na-vac__role--accordion {
  overflow: hidden;
  max-height: 0;
  min-height: 0;
  opacity: 0;
  transition: max-height 420ms cubic-bezier(0.65, 0, 0.35, 1), opacity 320ms ease;
}
.na-vac__role-inner { padding-top: 8px; display: flex; flex-direction: column; gap: 14px; }
/* The shared stage-role panel sits below the squares row, full content width,
   left-aligned like the rest of the page — not the 220px square column. */
.na-vac__role--full { width: 100%; max-width: 620px; margin-top: 8px; }
.na-vac__film { border-radius: 45px; overflow: hidden; }
.na-vac__role h4 {
  font-family: var(--na-h);
  font-size: 20px;
  color: var(--na-parch);
  margin: 0;
}
.na-vac__list {
  font-family: var(--na-b);
  font-weight: 300;
  margin: 0;
  padding-left: 22px;
  color: var(--na-parch);
  font-size: 16px;
  line-height: 1.8;
}
.na-vac__text a, .na-vac__lead a { color: var(--na-red); text-decoration: underline; }
.na-vac__text a:hover, .na-vac__lead a:hover { color: var(--na-parch); }
.na-vac__apply { align-items: flex-start; gap: 40px; padding-top: 20px; }
.na-vac__stamp {
  font-family: var(--na-s);
  font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--na-parch);
  margin: 0;
}
.na-vac__stamp-slab { font-family: var(--na-h); font-style: normal; }
@media (max-width: 700px) {
  .na-vac { padding: 120px 20px 50px; gap: 64px; }
  .na-vac__roles-row { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; gap: 16px; }
  .na-vac__roles-row::-webkit-scrollbar { display: none; }
  .na-vac__roles-row .na-vac__role-col { scroll-snap-align: start; scroll-margin-left: 20px; }
  .na-vac__roles-row::after { content: ""; flex: 0 0 4px; }
}

/* ============================================================
   CONTACT PAGE (intro split panel)
   ============================================================ */
.na-cpage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 160px 40px 100px;
  max-width: 1400px;
  margin: 0 auto;
}
.na-cpage__meta { grid-column: 1 / -1; margin-bottom: 20px; }
.na-cpage__media {
  aspect-ratio: 4 / 3.6;
  overflow: hidden;
  background: #050505;
  position: relative;
  border-radius: 45px;
}
.na-fade-slideshow { position: relative; width: 100%; height: 100%; }
.na-fade-slideshow img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
  opacity: 0;
  transition: opacity 1200ms ease;
}
.na-fade-slideshow img.is-active { opacity: 1; }
.na-cpage__title {
  font-family: var(--na-h);
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--na-parch);
  margin: 0 0 28px;
  line-height: 1.15;
}
.na-cpage__kicker { display: block; margin-bottom: 20px; }
.na-cpage__text {
  color: var(--na-parch);
  font-size: 17px;
  line-height: 1.7;
  max-width: 46ch;
  margin: 0 0 48px;
}
.na-cpage__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.na-cpage__col-h { display: block; color: var(--na-red); margin-bottom: 14px; letter-spacing: 0.1em; }
.na-cpage__cols p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--na-parch); }
.na-cpage__cols a { color: var(--na-parch); text-decoration: underline; transition: color 200ms; }
.na-cpage__cols a:hover { color: var(--na-red); }
@media (max-width: 900px) {
  .na-cpage { grid-template-columns: 1fr; padding: 120px 20px 60px; gap: 36px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.na-contact {
  position: relative;
  padding: 140px 40px 50px;
  overflow: hidden;
  isolation: isolate;
}
.na-contact__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
  animation: grainShift 1.2s steps(6) infinite;
}
.na-contact__head { margin-bottom: 28px; }

.na-contact__title {
  font-family: var(--na-h);
  font-size: clamp(64px, 12vw, 200px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0 0 80px 0;
  color: var(--na-parch);
}
.na-contact__title-em {
  color: var(--na-red);
  font-style: italic;
  font-family: var(--na-s);
  font-weight: 400;
  border-bottom: 4px solid var(--na-red);
  padding-bottom: 6px;
}

/* Hover-swap: "something beautiful." → "New Art." when hovering "beautiful".
   State (opacity/transform/filter) is driven by inline styles from React;
   CSS only owns layout + the transition timing. */
.na-contact__swap {
  display: inline-grid;
  position: relative;
}
.na-contact__swap-default,
.na-contact__swap-alt {
  grid-area: 1 / 1;
  align-self: start;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s ease;
  will-change: opacity, transform, filter;
}
.na-contact__swap-alt {
  pointer-events: none;
  white-space: nowrap;
}
.na-contact__beautiful { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .na-contact__swap-default,
  .na-contact__swap-alt { transition: opacity 0.2s ease; }
}

.na-contact__cta {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 100px;
  flex-wrap: wrap;
}
.na-contact__mail {
  font-family: var(--na-h);
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: 0.02em;
  color: var(--na-parch);
  position: relative;
  padding-bottom: 4px;
}
.na-contact__mail::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--na-red);
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform 400ms ease;
}
.na-contact__mail:hover::after { transform: scaleX(1); }
.na-contact__rule {
  width: 60px; height: 1px;
  background: var(--na-rule);
}
.na-contact__phone {
  font-family: var(--na-m);
  font-size: 16px;
  letter-spacing: 0.15em;
  color: var(--na-mute);
}

.na-contact__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-top: 50px;
  margin-bottom: 60px;
}
.na-contact__col-h {
  display: block;
  margin-bottom: 14px;
}
.na-contact__cols p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--na-mute);
}
.na-contact__cols a {
  color: var(--na-parch);
  transition: color 200ms;
}
.na-contact__cols a:hover { color: var(--na-red); }

.na-contact__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
  color: var(--na-parch);
}
.na-contact__terms-link { color: var(--na-mute); text-decoration: none; transition: color 200ms; }
.na-contact__terms-link:hover { color: var(--na-red); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .na-nav, .na-nav.is-scrolled { padding: 16px 20px; transition: background 300ms ease, backdrop-filter 300ms ease; }
  .na-nav__links { gap: 18px; }
  .na-nav__links a { font-size: 10px; letter-spacing: 0.16em; }
  .na-hero__corner--tl, .na-hero__corner--tr { top: 80px; }
  .na-hero__corner--tl, .na-hero__corner--bl { left: 20px; }
  .na-hero__corner--tr, .na-hero__corner--br { right: 20px; }
  .na-manifesto { grid-template-columns: 1fr; padding: 120px 20px; gap: 50px; }
  .na-portfolio { padding-left: 20px; padding-right: 20px; }
  .na-artists__head { padding-left: 20px; padding-right: 20px; }
  .na-artists__pin-progress { left: 20px; right: 20px; }
  .na-contact { padding-left: 20px; padding-right: 20px; }
  .na-grid { grid-template-columns: repeat(2, 1fr); }
  .na-artists__head { grid-template-columns: 1fr; }
  .na-artists__head .na-section__title,
  .na-artists__sub { grid-column: 1; }
  .na-artists__sub { grid-row: 3; justify-self: end; text-align: right; margin-top: 8px; }
  .na-contact__cols { grid-template-columns: 1fr; }
}

.na-no-thumbs .na-card__poster:not(.na-card__poster--keep){display:none!important}
.na-no-thumbs .na-card__poster{transition:none!important}
.na-no-thumbs .na-card__video iframe{opacity:1!important;transition:none!important}

.na-grid.na-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.na-artists__rail.na-artists__rail--swipe{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}
.na-artists__rail--swipe::-webkit-scrollbar{display:none}
.na-artists__rail--swipe .na-pin{scroll-snap-align:center}
.na-artists__rail--swipe .na-artists__spacer-l{flex-basis:20px}
.na-artists__rail--swipe .na-artists__spacer-r{flex-basis:20px}
.na-artists__stage.na-artists__stage--swipe{padding-top:90px}
.na-artists__rail.na-artists__rail--swipe{zoom:0.7}
.na-artists__rail--swipe .na-pin{margin-bottom:0;padding-bottom:0}
.na-artists__rail--swipe .na-pin__role{margin-bottom:1rem}
.na-artists:has(.na-artists__rail--swipe) ~ .na-vac,.na-artists:has(.na-artists__rail--swipe) + * .na-vac{padding-top:40px}
@media (max-width:900px){.na-cpage{padding-bottom:0}.na-cpage + .na-contact,.na-cpage ~ .na-contact{padding-top:40px}.na-cpage__reel{margin-top:-36px}}
@media (max-width:900px){.na-vac{padding-bottom:0}.na-vac + .na-contact,.na-vac ~ .na-contact{padding-top:40px}}
@media (max-width:900px){.na-pin{margin-bottom:0;padding-bottom:0}.na-pin__role{margin-bottom:1rem}.na-vac{padding-top:40px}}
@media (max-width:900px){.na-manifesto{padding-bottom:0}.na-contact{padding-top:40px}.na-manifesto__reel{margin-top:-24px}}
@media (max-width:900px){.na-portfolio{padding-bottom:0}.na-portfolio .na-card{margin-bottom:0}}
.na-portfolio{padding-bottom:0}.na-portfolio + .na-contact{padding-top:60px}
.na-contact__social{display:flex;flex-direction:column;align-items:flex-start;gap:0}.na-contact__social a{display:inline-flex;align-items:center;gap:8px}.na-contact__social svg{width:15px;height:15px;flex:0 0 auto}
@media (max-width:900px){html,body{overflow-x:hidden;overflow-x:clip;max-width:100%;overscroll-behavior-x:none}#root{overflow-x:clip;max-width:100vw}.na-artists__rail--swipe,.na-vac__roles-row{overscroll-behavior-x:contain;touch-action:pan-x pan-y}}
.na-swipe-hint{position:absolute;left:20px;right:20px;z-index:5;display:flex;align-items:center;gap:12px;pointer-events:none;opacity:0;transition:opacity .25s}.na-swipe-hint.is-on{opacity:1}.na-swipe-hint__track{flex:1;height:2px;background:rgba(240,232,220,.14);position:relative;overflow:hidden}.na-swipe-hint__thumb{position:absolute;top:0;bottom:0;left:0;background:var(--na-red)}.na-swipe-hint__lbl{font-family:var(--na-m,monospace);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--na-red);white-space:nowrap}
.has-swipe-hint{margin-bottom:36px !important}
.na-grid--2{column-gap:7px}.na-grid--2 .na-lane{row-gap:17px}.na-grid--2 .na-card__caption{gap:8px;margin-top:-2px;align-items:flex-start}.na-grid--2 .na-card__caption-type{line-height:1;padding-top:3px}.na-grid--2 .na-card__caption-title{font-size:16px;letter-spacing:.02em}.na-grid--2 .na-card__caption-type{font-size:9px;letter-spacing:.12em;text-align:right;flex:0 0 auto}
@media (max-width:900px){.na-portfolio:has(.na-grid--2){padding-left:12px;padding-right:12px}}
.na-card__caption{align-items:flex-start}.na-card__caption-type{line-height:1;padding-top:4px;flex:0 0 auto;text-align:right}
.na-pin{margin-bottom:0;padding-bottom:16px}.na-artists__pin{padding-bottom:0}
.na-vac{padding-top:20px;padding-bottom:0}.na-vac + .na-contact,.na-vac ~ .na-contact{padding-top:40px}
#contact .na-contact__grain{display:none}
.na-manifesto{padding-bottom:0}.na-manifesto + .na-contact{padding-top:60px}.na-manifesto__reel{margin-top:-60px}
.na-cpage{padding-bottom:0}.na-cpage + .na-contact,.na-cpage ~ .na-contact{padding-top:60px}.na-cpage__reel{margin-top:-40px}