/* ============================================================
   OKAJ — Studio Site
   Shared design system. Used by all pages.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Palette — light gallery base, gradient elements pop on warm off-white */
  --bg-deep:      #ece5eb;   /* soft lilac-tinted off-white */
  --bg-base:      #f4eff3;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;

  --ink-bright:   #0f111d;   /* near-black for headings */
  --ink:          #2a2c40;
  --ink-muted:    #6a6c80;
  --ink-faint:    #a8aabb;

  /* Vivid hues — gradient palette */
  --hue-yellow:   #f7d569;
  --hue-orange:   #f7c25a;
  --hue-coral:    #eb7b5c;
  --hue-red:      #f03737;
  --hue-lilac:    #bb8dc1;
  --hue-magenta:  #941874;
  --hue-purple:   #711de0;
  --hue-deep:     #38065f;

  /* Primary accent — vivid purple reads cleanly on light */
  --accent:       var(--hue-purple);
  --accent-soft:  var(--hue-lilac);

  --line:         rgba(15, 17, 29, 0.10);
  --line-strong:  rgba(15, 17, 29, 0.22);

  /* Signature gradients — same palette, slightly tuned for light backgrounds */
  --grad-aurora:  linear-gradient(135deg, #38065f 0%, #711de0 30%, #941874 65%, #f03737 100%);
  --grad-sunset:  linear-gradient(120deg, #711de0 0%, #f03737 55%, #f7c25a 100%);
  --grad-soft:    linear-gradient(135deg, #bb8dc1 0%, #eb7b5c 100%);
  --grad-ember:   linear-gradient(135deg, #f03737 0%, #f7c25a 100%);
  --grad-text:    linear-gradient(120deg, #711de0 0%, #f03737 50%, #f7c25a 100%);

  /* Typography — modern gallery sans throughout */
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scale & rhythm */
  --container:    1280px;
  --gutter:       clamp(1.5rem, 4vw, 3.5rem);
  --section-y:    clamp(5rem, 12vw, 10rem);

  /* Motion */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* overflow-x: clip is like hidden but does NOT create a scroll container,
     so position: sticky inside (e.g. .tile-sticky) still works. */
  overflow-x: clip;
  /* Reserve the scrollbar gutter so opening a modal (body overflow:hidden)
     doesn't shift the whole layout sideways. */
  scrollbar-gutter: stable;
}

/* Anchor offset: keep section titles clear of the fixed nav when jumped to */
section[id] { scroll-margin-top: 90px; }
main[id]    { scroll-margin-top: 0; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip rather than hidden so position: sticky still works on .tile-sticky */
  overflow-x: clip;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 280ms var(--ease);
}

button { font: inherit; cursor: pointer; }

/* Visible focus for keyboard users — invisible to mouse/touch interaction */
:focus-visible {
  outline: 2px solid var(--hue-purple);
  outline-offset: 3px;
}

::selection { background: var(--hue-purple); color: var(--ink-bright); }

/* ---------- Atmospheric background canvas ---------- */
#atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.9;
}

/* Soft gradient wash — provides ambient color without darkening anything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 88% 12%, rgba(187, 141, 193, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 8% 88%, rgba(247, 194, 90, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 50% 50%, rgba(235, 123, 92, 0.10) 0%, transparent 70%);
}

body::after {
  content: '';
  position: fixed;
  inset: -12vh -10vw;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(circle 150px at 18% 24%, rgba(32, 214, 199, 0.22), transparent 68%),
    radial-gradient(circle 190px at 82% 18%, rgba(255, 122, 167, 0.20), transparent 70%),
    radial-gradient(circle 130px at 76% 78%, rgba(247, 213, 105, 0.20), transparent 68%),
    radial-gradient(circle 110px at 12% 82%, rgba(242, 123, 45, 0.18), transparent 70%);
  filter: blur(10px) saturate(1.12);
  animation: ambientOrbs 24s ease-in-out infinite alternate;
}

@keyframes ambientOrbs {
  from { transform: translate3d(-1.5vw, -1vh, 0) scale(1); }
  to { transform: translate3d(1.5vw, 1vh, 0) scale(1.04); }
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400; /* above the nav (300) so the bar isn't dimmed by its backdrop */
  width: 100%;
  height: 3px;
  transform-origin: left center;
  pointer-events: none;
}

.scroll-progress::before,
.scroll-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: left center;
}

.scroll-progress::before {
  background: var(--grad-sunset);
  opacity: 0.24;
}

.scroll-progress::after {
  width: var(--scroll-progress, 0%);
  background: var(--grad-sunset);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink-bright);
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin: 0;
}

h1 { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 400; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 500; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 500; letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.005em; }

/* Legacy "display-italic" class — drop italic, keep as styling hook */
.display-italic { font-style: normal; color: var(--ink-bright); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hue-purple);
  margin: 0 0 1.25rem;
}

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  max-width: 60ch;
}

p { margin: 0 0 1.1em; max-width: 64ch; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; position: relative; }

.section.container {
  padding: var(--section-y) var(--gutter);
}

.divider {
  height: 1px;
  width: 100%;
  background: var(--line);
  border: 0;
  margin: 0;
}

.divider-short {
  height: 2px;
  width: 80px;
  background: var(--grad-sunset);
  border: 0;
  margin: 1.5rem 0;
  border-radius: 2px;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  padding: 1.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* No backdrop-filter here — it would make .nav a containing block for
     position:fixed children (the mobile drawer), clipping it to the nav bar.
     The blur is applied via ::before instead. */
  transition: padding 300ms var(--ease), border-color 300ms var(--ease);
}

/* Frosted-glass effect lives on a pseudo-element so .nav itself has no
   filter/backdrop-filter and doesn't trap its fixed-position children. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(236, 229, 235, 0.85), rgba(236, 229, 235, 0));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: background 300ms var(--ease);
  pointer-events: none;
}

.nav.is-scrolled {
  padding: 0.85rem var(--gutter);
  border-bottom: 1px solid var(--line);
}
.nav.is-scrolled::before {
  background: rgba(255, 255, 255, 0.85);
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  color: var(--ink-bright);
  font-weight: 600;
  position: relative;
  z-index: 300; /* stay above mobile nav-links overlay (z-index 200) */
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
}

.nav-links a {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 0.5rem 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 320ms var(--ease);
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--ink-bright);
}

.nav-links a:hover::after,
.nav-links a.is-active::after { width: 100%; }

/* Dual-icon toggle — hamburger hidden when open, X hidden when closed */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--ink-bright);
  padding: 0.5rem;
  position: relative;
  z-index: 300; /* stay above mobile nav-links overlay (z-index 200) */
}

.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }

  /* ── Mobile side-drawer ─────────────────────────────────────────
     Slides in from the right. Narrow enough that the rest of the
     page is still visible behind a dimmed backdrop. */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 78vw);
    z-index: 200;
    background: #ece5eb;
    box-shadow: -16px 0 48px -20px rgba(15, 17, 29, 0.35);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6rem 2rem 2rem;
    gap: 1.6rem;
    transform: translateX(100%);
    transition: transform 360ms var(--ease);
    pointer-events: none;
  }
  .nav-links.is-open {
    transform: translateX(0);
    pointer-events: auto;
  }
  .nav-links a {
    font-size: 0.95rem;
    width: 100%;
  }

  /* Dimmed backdrop behind the drawer — injected by JS as .nav-backdrop */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(15, 17, 29, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease);
  }
  .nav-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Prevent page from scrolling while drawer is open */
  body.nav-open { overflow: hidden; }
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.85rem;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-bright);
  background: transparent;
  border: 1px solid var(--ink-bright);
  border-radius: 0;
  transition: all 280ms var(--ease);
}

.btn:hover {
  background: var(--ink-bright);
  color: var(--bg-deep);
  transform: translateY(-1px);
}

.btn-solid {
  background: var(--grad-sunset);
  background-size: 180% 180%;
  background-position: 0% 50%;
  color: var(--ink-bright);
  border-color: transparent;
  position: relative;
  transition: background-position 600ms var(--ease), transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.btn-solid:hover {
  background-position: 100% 50%;
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 10px 40px -10px rgba(113, 29, 224, 0.55);
}

.btn-solid:focus-visible {
  color: #ffffff;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-bright);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ink-bright);
  transition: all 320ms var(--ease);
}

.link-arrow .arrow {
  transition: transform 320ms var(--ease);
}

.link-arrow:hover {
  color: var(--hue-purple);
  border-bottom-color: var(--hue-purple);
}

.link-arrow:hover .arrow {
  transform: translateX(6px);
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 8rem 0 6rem;
  overflow: hidden;
}

.hero.container {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.hero-inner {
  /* stays clear of the absolutely-positioned art stack on desktop */
  max-width: min(900px, calc(100% - min(42vw, 540px) - 2rem));
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: clamp(3.75rem, 13vw, 11rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin-bottom: 1.5rem;
  color: var(--ink-bright);
}

.hero-title em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-bright);
}

/* Fragmented hero — each line gets its own indentation for editorial rhythm */
.hero-title .line {
  display: block;
}
.hero-title .line-indent-1 { margin-left: clamp(0.5rem, 5vw, 4rem); }
.hero-title .line-indent-2 { margin-left: clamp(1rem, 10vw, 8rem); }

@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-sub {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 300;
  color: var(--ink);
  max-width: 56ch;
  margin-top: 2rem;
  line-height: 1.55;
}

.hero-art-stack {
  position: absolute;
  inset: 8rem var(--gutter) 5rem auto;
  width: min(42vw, 540px);
  min-width: 320px;
  pointer-events: none;
  z-index: 1;
}

.hero-art-stack::before {
  content: '';
  position: absolute;
  inset: 15% -8% 10% 8%;
  background: radial-gradient(circle, rgba(247, 194, 90, 0.36), transparent 62%);
  filter: blur(8px);
}

.hero-art {
  position: absolute;
  width: clamp(220px, 22vw, 340px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 22px 70px -28px rgba(15, 17, 29, 0.48);
  /* --art-shift is driven by scroll for a gentle per-layer parallax */
  transform: translate3d(0, var(--art-shift, 0px), 0);
  will-change: transform;
}

.hero-art-a {
  top: 5%;
  right: 3%;
}

.hero-art-b {
  top: 37%;
  left: 4%;
  width: clamp(240px, 24vw, 380px);
}

.hero-art-c {
  right: 14%;
  bottom: 0;
  width: clamp(200px, 19vw, 300px);
}

.hero-cta-row {
  display: flex;
  gap: 1.25rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0.7;
}

.scroll-cue::after {
  content: '';
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, var(--hue-coral), var(--hue-purple), transparent);
  animation: scrollPulse 2.6s var(--ease) infinite;
}

@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* ---------- Journey strip ---------- */
.journey-strip {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 8rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)),
    rgba(255,255,255,0.18);
}

.ticker {
  width: 100%;
  overflow: hidden;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(15, 17, 29, 0.26);
  position: relative;
  --ticker-x: 50%;
  --ticker-y: 50%;
}

.ticker-track {
  display: flex;
  gap: clamp(2rem, 6vw, 5rem);
  width: max-content;
  animation: tickerMove 32s linear infinite;
}

.ticker-color-window {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--ease);
  -webkit-mask-image: radial-gradient(circle 132px at var(--ticker-x) var(--ticker-y), #000 0 58%, transparent 72%);
  mask-image: radial-gradient(circle 132px at var(--ticker-x) var(--ticker-y), #000 0 58%, transparent 72%);
}

.ticker.is-color-active .ticker-color-window {
  opacity: 1;
}

.ticker-color-window .ticker-track {
  color: transparent;
  -webkit-text-stroke: 0;
}

.ticker-color-window span {
  background: linear-gradient(120deg, #f27b2d 0%, #20d6c7 32%, #ff7aa7 66%, #f7d569 100%);
  background-size: 240% 100%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ticker span {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 13rem);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: uppercase;
}

@keyframes tickerMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 0;
  padding-bottom: 0;
}

.journey-card {
  min-height: clamp(280px, 34vw, 430px);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255,255,255,0.72);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  --card-blob-opacity: 0;
  --card-blob-x0: 50%;
  --card-blob-y0: 50%;
  --card-blob-x1: 50%;
  --card-blob-y1: 50%;
  --card-blob-x2: 50%;
  --card-blob-y2: 50%;
  --card-blob-x3: 50%;
  --card-blob-y3: 50%;
}

.journey-card + .journey-card {
  border-left: 1px solid var(--line);
}

.journey-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle 150px at var(--card-blob-x0) var(--card-blob-y0), rgba(32, 214, 199, 0.34), transparent 62%),
    radial-gradient(circle 118px at var(--card-blob-x1) var(--card-blob-y1), rgba(255, 122, 167, 0.30), transparent 64%),
    radial-gradient(circle 86px at var(--card-blob-x2) var(--card-blob-y2), rgba(247, 213, 105, 0.28), transparent 66%),
    radial-gradient(circle 62px at var(--card-blob-x3) var(--card-blob-y3), rgba(242, 123, 45, 0.24), transparent 68%);
  opacity: var(--card-blob-opacity);
  filter: blur(18px) saturate(1.22);
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  transition: opacity 180ms var(--ease);
  pointer-events: none;
}

.journey-card:hover::after {
  --card-blob-opacity: 1;
}

.journey-card > * {
  position: relative;
  z-index: 1;
}

/* ---------- Generic gradient-blob host ----------
   Add class="blob-host" to any section to make the cursor produce
   the same multi-color gradient blob it does inside the journey cards.
   Sized larger than the journey-card version, since sections are bigger. */
.blob-host {
  position: relative;
  --card-blob-opacity: 0;
  --card-blob-x0: 50%;
  --card-blob-y0: 50%;
  --card-blob-x1: 50%;
  --card-blob-y1: 50%;
  --card-blob-x2: 50%;
  --card-blob-y2: 50%;
  --card-blob-x3: 50%;
  --card-blob-y3: 50%;
}

.blob-host::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 280px at var(--card-blob-x0) var(--card-blob-y0), rgba(32, 214, 199, 0.32), transparent 64%),
    radial-gradient(circle 220px at var(--card-blob-x1) var(--card-blob-y1), rgba(255, 122, 167, 0.28), transparent 66%),
    radial-gradient(circle 170px at var(--card-blob-x2) var(--card-blob-y2), rgba(247, 213, 105, 0.26), transparent 68%),
    radial-gradient(circle 120px at var(--card-blob-x3) var(--card-blob-y3), rgba(242, 123, 45, 0.22), transparent 70%);
  opacity: var(--card-blob-opacity);
  filter: blur(22px) saturate(1.2);
  transition: opacity 240ms var(--ease);
}

.blob-host > * {
  position: relative;
  z-index: 1;
}

.journey-number {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--hue-purple);
  font-weight: 700;
}

.journey-card h2 {
  font-size: 3.25rem;
  font-size: clamp(2rem, 12cqw, 4rem);
  line-height: 0.98;
  max-width: 100%;
  text-wrap: balance;
}

.journey-card:nth-child(3) h2 {
  font-size: clamp(1.85rem, 10.8cqw, 3.5rem);
  line-height: 1.02;
}

.journey-card:nth-child(4) {
  padding-right: clamp(2rem, 5cqw, 3.4rem);
}

.journey-card:nth-child(4) h2 {
  font-size: clamp(1.85rem, 10.2cqw, 3.25rem);
  line-height: 1.02;
}

.journey-card p {
  color: var(--ink-muted);
  margin: 2rem 0 0;
  max-width: 34ch;
}

/* ---------- Scroll tile threshold ---------- */
.tile-threshold {
  position: relative;
  height: 430vh;        /* full length — tiles need room to play out their motion */
}

.tile-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.tile-stage {
  position: relative;
  width: min(1440px, calc(100vw - 1.5rem));
  height: min(820px, 86vh);
}

.tile-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(460px, 84vw);
  z-index: 8;
  text-align: center;
  transform: translate(-50%, -50%) scale(var(--copy-scale, 0.92));
  opacity: var(--copy-opacity, 0);
  transition: opacity 120ms linear, transform 120ms linear;
  pointer-events: none;
}

.tile-copy h2 {
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: 0.88;
  margin-bottom: 1.25rem;
}

.tile-copy p:not(.eyebrow) {
  margin: 0 auto;
  color: var(--ink-muted);
}

.tile-scroll-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  color: var(--ink-bright);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tile-scroll-indicator::before {
  content: '';
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--hue-purple), var(--hue-coral), transparent);
  animation: scrollPulse 1.8s var(--ease) infinite;
}

.art-tile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(220px, 20vw, 330px);
  aspect-ratio: 5 / 6;
  z-index: var(--z, 1);
  padding: clamp(1rem, 2vw, 1.8rem);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 24px 70px -42px rgba(15, 17, 29, 0.34);
  transform:
    translate(-50%, -50%)
    translate3d(var(--tile-x, 0px), var(--tile-y, 0px), 0)
    rotate(var(--tile-r, 0deg));
  will-change: transform;
  opacity: var(--tile-opacity, 0);
}

.art-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-1 { --z: 3; width: clamp(230px, 22vw, 360px); }
.tile-2 { --z: 4; width: clamp(230px, 22vw, 360px); }
.tile-3 { --z: 7; width: clamp(240px, 24vw, 390px); }
.tile-4 { --z: 5; width: clamp(210px, 20vw, 330px); }
.tile-5 { --z: 2; width: clamp(210px, 20vw, 330px); }
.tile-6 { --z: 6; width: clamp(190px, 18vw, 300px); aspect-ratio: 1 / 1; }
.tile-7 { --z: 1; width: clamp(210px, 20vw, 330px); }

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  padding: 11rem 0 5rem;
  border-bottom: 1px solid var(--line);
}

.page-header h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.page-header .lead { margin-top: 1.75rem; }

/* ---------- Sections — generic two-column ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.split.split-narrow { grid-template-columns: 1fr 1.3fr; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 3rem; }
  .hero-inner { max-width: 900px; } /* art stacks below — full width available */
  .hero {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 8rem;
    padding-bottom: 7rem;
  }
  .hero-art-stack {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    height: 340px;
    margin-top: 3rem;
  }
  .hero-art-a { right: 6%; }
  .hero-art-b { left: 8%; }
  .hero-art-c { right: 20%; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-card {
    min-height: 260px;
  }
  .journey-card + .journey-card {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .tile-threshold {
    height: 360vh;
  }
  .tile-stage {
    width: calc(100vw - 2rem);
    height: 82vh;
  }
  .art-tile {
    width: clamp(150px, 42vw, 220px);
    padding: 0.85rem;
  }
  .tile-3 {
    width: clamp(170px, 50vw, 260px);
  }
}

.media-frame {
  position: relative;
  background: var(--bg-surface);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(15, 17, 29, 0.04),
              0 24px 60px -30px rgba(15, 17, 29, 0.18);
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1.4s var(--ease);
  backface-visibility: hidden;
}

.media-frame:hover img {
  opacity: 0.96;
}

.media-frame.placeholder {
  background: linear-gradient(135deg, var(--bg-base), var(--bg-deep));
}
.media-frame.placeholder::after {
  content: 'Image: ' attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- Featured work block ---------- */
.featured-work .work-meta {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
  margin-top: 1.5rem;
}

.featured-work .work-meta .price {
  color: var(--hue-purple);
  font-weight: 600;
  margin-left: 1rem;
}

.featured-work h2 {
  font-style: normal;
  margin-top: 0.5rem;
}

.featured-work .work-desc {
  margin-top: 1.5rem;
  color: var(--ink);
}

.featured-work .work-cta { margin-top: 2.25rem; }

/* ---------- Gallery grid ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 640px) {
  :root {
    --gutter: 1.5rem; /* fixed 24 px floor on small phones */
  }

  .hero-title .line-indent-1,
  .hero-title .line-indent-2 {
    margin-left: 0;
  }

  .section {
    padding-block: clamp(4rem, 14vw, 6rem);
  }

  .section.container {
    padding-inline: var(--gutter); /* re-assert horizontal gutter — some browsers drop it when padding-block overrides above */
  }

  .btn,
  .newsletter-form button {
    width: 100%;
    justify-content: center;
  }

  .portal,
  .newsletter,
  .journey-card {
    padding-inline: 1.5rem;
  }
}

.work-card {
  display: flex;
  flex-direction: column;
}

.work-card .media-frame {
  aspect-ratio: 4 / 5;
  margin-bottom: 1.5rem;
  cursor: none;
}

.media-frame,
.media-frame *,
.hero-art,
.art-tile,
.art-tile *,
.art-modal-image,
.purchase-art-image {
  cursor: none !important;
}

.work-card .media-frame::before {
  content: 'View work';
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 0.55rem 0.75rem;
  background: rgba(255,255,255,0.82);
  color: var(--ink-bright);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}

.work-card .media-frame:hover::before,
.work-card .media-frame:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

.work-card .work-title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.018em;
  color: var(--ink-bright);
  margin: 0 0 0.6rem;
}

.work-card .work-meta {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: 1.1rem;
}

.work-card .work-meta .price {
  color: var(--hue-purple);
  font-weight: 600;
  margin-left: 0.85rem;
}

.work-card .work-desc {
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  max-width: 52ch;
}

.work-card .inquire {
  align-self: flex-start;
}

/* ---------- Artwork modal ---------- */
.art-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}

.art-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.art-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 29, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.art-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  height: min(820px, 90vh);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
  background: var(--bg-surface);
  box-shadow: 0 30px 90px -36px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.art-modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: var(--bg-base);
}

.art-modal-copy {
  padding: clamp(3rem, 5vw, 4.75rem) clamp(2rem, 4vw, 3.75rem) clamp(2rem, 4vw, 3.25rem);
  overflow-y: auto;
  overflow-x: hidden;
  align-self: stretch;
  min-width: 0;
}

.art-modal-copy .work-meta {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.art-modal-title {
  margin: 0.75rem 0 1.35rem;
  font-size: clamp(2.15rem, 3.4vw, 3.75rem);
  line-height: 0.98;
  max-width: 100%;
  overflow-wrap: break-word;
}

.art-modal-desc {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.65;
}

.art-modal-link {
  margin-top: 1rem;
}

.art-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.88);
  color: var(--ink-bright);
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 260ms var(--ease), transform 260ms var(--ease);
}

.art-modal-close:hover {
  background: var(--ink-bright);
  color: var(--bg-surface);
  transform: rotate(90deg);
}

body.modal-open { overflow: hidden; }

/* ---------- Purchase request flow ---------- */
.purchase-modal {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}

.purchase-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.purchase-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(232, 239, 246, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.purchase-panel {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: 94vh;
  overflow: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 17, 29, 0.12);
  padding: clamp(1.75rem, 4vw, 2.35rem);
  box-shadow: 0 24px 70px -34px rgba(15, 17, 29, 0.34);
}

.purchase-panel.request-step {
  width: min(520px, 100%);
}

.purchase-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #f7f8fa;
  color: var(--ink-bright);
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.purchase-panel h2 {
  font-size: clamp(1.65rem, 4vw, 2.05rem);
  margin: 0 2.5rem 0.4rem 0;
  letter-spacing: -0.01em;
}

.purchase-panel p,
.purchase-panel label {
  font-size: 0.92rem;
  line-height: 1.55;
}

.purchase-panel a {
  color: var(--ink-bright);
  border-bottom: 1px solid currentColor;
}

.purchase-sub {
  color: var(--ink-muted);
  font-size: 0.78rem !important;
  margin-bottom: 1rem;
}

.privacy-check {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin: 1.4rem 0 1.1rem;
  padding: 1rem;
  border: 1px solid rgba(106, 108, 128, 0.22);
  background: #f8fafc;
}

.privacy-check input,
.shipping-fieldset input {
  width: 16px;
  height: 16px;
  accent-color: var(--hue-purple);
}

.purchase-submit {
  width: 100%;
  border: 0;
  background: var(--ink-bright);
  color: #ffffff;
  padding: 1rem 1.25rem;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.purchase-submit:hover {
  transform: translateY(-1px);
}

.purchase-submit:disabled {
  background: #b9b9bd;
  color: #ffffff;
  transform: none;
  cursor: not-allowed;
}

.purchase-status {
  min-height: 1.2rem;
  color: var(--ink-muted);
  font-size: 0.78rem !important;
  margin: -0.25rem 0 0;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px !important;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.purchase-art {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 1rem;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.2rem 0;
  margin: 1rem 0 1.2rem;
}

.purchase-art-image {
  width: 70px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-base);
}

.purchase-art h3 {
  font-size: 1.15rem;
  line-height: 1.15;
  margin-bottom: 0.25rem;
}

.purchase-art-meta {
  color: var(--ink-muted);
  font-size: 0.74rem !important;
  margin: 0 0 0.25rem;
}

.purchase-art-price {
  display: block;
  color: var(--hue-purple);
  font-size: 0.85rem;
}

.purchase-form {
  display: grid;
  gap: 0.85rem;
}

.shipping-fieldset {
  border: 1px solid rgba(106, 108, 128, 0.28);
  padding: 0.75rem 0.9rem;
  margin: 0 0 0.2rem;
}

.shipping-fieldset legend,
.purchase-form label {
  color: var(--ink-muted);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
}

.shipping-fieldset label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-bright);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  margin: 0.3rem 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.purchase-form input,
.purchase-form textarea,
.inquiry-form input,
.inquiry-form textarea {
  width: 100%;
  margin-top: 0.25rem;
  border: 1px solid rgba(106, 108, 128, 0.34);
  background: #fbfcfe;
  color: var(--ink-bright);
  padding: 0.65rem 0.72rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  border-radius: 0;
}

.purchase-form input:focus,
.purchase-form textarea:focus,
.inquiry-form input:focus,
.inquiry-form textarea:focus {
  outline: none;
  border-color: var(--hue-purple);
  background: #ffffff;
}

.purchase-total {
  border: 1px solid rgba(106, 108, 128, 0.22);
  background: #f8fafc;
  padding: 0.9rem 1rem;
}

.purchase-total div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--ink);
}

.purchase-total div + div {
  margin-top: 0.35rem;
}

.purchase-total div:nth-child(3) {
  border-top: 1px solid var(--line);
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  color: var(--ink-bright);
}

.purchase-total p {
  color: var(--ink-muted);
  font-size: 0.72rem !important;
  margin: 0.65rem 0 0;
}

.inquiry-modal {
  position: fixed;
  inset: 0;
  z-index: 430;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}

.inquiry-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.inquiry-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(232, 239, 246, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.inquiry-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: 94vh;
  overflow: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 17, 29, 0.12);
  padding: clamp(1.75rem, 4vw, 2.35rem);
  box-shadow: 0 24px 70px -34px rgba(15, 17, 29, 0.34);
}

.inquiry-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #f7f8fa;
  color: var(--ink-bright);
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.inquiry-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 2.5rem 0.6rem 0;
}

.inquiry-sub {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.inquiry-form {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.2rem;
}

.inquiry-form label {
  color: var(--ink-muted);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
}

.inquiry-status {
  min-height: 1.2rem;
  color: var(--ink-muted);
  font-size: 0.78rem !important;
  margin: -0.25rem 0 0;
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Spotlight / passage blocks ---------- */
.passage {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.passage .lead { margin: 0 auto; }

/* ---------- Portal cards (virtual gallery / shop) ---------- */
.portals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 820px) {
  .portals { grid-template-columns: 1fr; }
  .art-modal {
    padding: 1rem;
  }
  .art-modal-panel {
    grid-template-columns: 1fr;
    height: 90vh;
  }
  .art-modal-image {
    height: 46vh;
    min-height: 0;
    object-fit: cover;
  }
  .art-modal-copy {
    padding: 1.5rem;
  }
  .art-modal-title {
    max-width: 11ch;
  }
}

.portal {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem);
  background: var(--bg-surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: all 500ms var(--ease);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 1px rgba(15, 17, 29, 0.03);
}

.portal::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(113, 29, 224, 0.18), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(247, 194, 90, 0.18), transparent 55%);
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

.portal:hover {
  border-color: var(--ink-bright);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(15, 17, 29, 0.15);
}

.portal:hover::before { opacity: 1; }

.portal .portal-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hue-purple);
  margin-bottom: 1.5rem;
}

.portal h3 {
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}

.portal p {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

/* ---------- CV / Exhibition list ---------- */
.cv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.cv-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.cv-list .year {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--hue-purple);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.cv-list .event-title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.15rem;
  color: var(--ink-bright);
  margin: 0 0 0.25rem;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.cv-list .event-meta {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 0;
}

.cv-list .cv-entry + .cv-entry {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 600px) {
  .cv-list li { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-block .label {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hue-purple);
  margin-bottom: 1rem;
}

.contact-block .value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-bright);
  line-height: 1.4;
}

.contact-block .value a:hover { color: var(--hue-purple); }

/* ---------- Newsletter form ---------- */
.newsletter {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(15, 17, 29, 0.03);
}

.newsletter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-aurora);
  opacity: 0.85;
}

.newsletter::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(113, 29, 224, 0.06), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(247, 194, 90, 0.10), transparent 50%);
}

.newsletter > * { position: relative; z-index: 1; }

.newsletter h2 {
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.newsletter p {
  color: var(--ink-muted);
  margin: 0 auto 2.5rem;
  max-width: 50ch;
}

.newsletter-form {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.newsletter-form input[type="email"] {
  flex: 1 1 240px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--ink-bright);
  padding: 0.95rem 1.25rem;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: border-color 280ms var(--ease), background 280ms var(--ease);
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--hue-purple);
  background: var(--bg-surface);
}

.newsletter-form input[type="email"]::placeholder {
  color: var(--ink-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.newsletter-form button {
  background: var(--grad-sunset);
  background-size: 180% 180%;
  background-position: 0% 50%;
  color: #ffffff;
  border: 0;
  padding: 0.95rem 1.85rem;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background-position 600ms var(--ease), transform 280ms var(--ease), box-shadow 320ms var(--ease);
}

.newsletter-form button:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(113, 29, 224, 0.45);
}

.newsletter-note {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 1.25rem;
}

/* Inline confirmation after a successful Kit subscription */
.newsletter-thanks {
  border: 1px solid var(--line);
  padding: 1.6rem 1.8rem;
  background: rgba(255, 255, 255, 0.5);
  border-left: 3px solid transparent;
  border-image: var(--grad-sunset) 1;
  border-image-slice: 0 0 0 1;
  animation: newsletterFade 500ms var(--ease) both;
}
.newsletter-thanks .eyebrow {
  margin: 0 0 0.6rem;
  color: var(--hue-purple);
}
.newsletter-thanks p {
  margin: 0;
  color: var(--ink-bright);
  max-width: 48ch;
}
@keyframes newsletterFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 3rem 0 2.5rem;
  margin-top: var(--section-y);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer .brand {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  font-size: 1.1rem;
  color: var(--ink);
}

.footer-meta {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.footer-social {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0; padding: 0;
}

.footer-social a {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.footer-social a:hover { color: var(--accent); }

/* ---------- Page transitions ---------- */
/* Leaving fade — JS adds .page-leaving to <html> just before navigating
   to another page on this site. */
body {
  transition: opacity 220ms var(--ease-soft);
}

html.page-leaving body {
  opacity: 0;
  pointer-events: none;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger via inline custom prop: style="--d: 0.2s" */
.fade-in[style*="--d"] { transition-delay: var(--d, 0s); }

/* ---------- Utilities ---------- */
.t-center { text-align: center; }
.t-italic { font-style: italic; }

/* Legacy gradient-text classes — now monochrome (color via :root --ink-bright).
   Kept as no-ops so older HTML still renders cleanly. */
.grad-text,
.grad-text-aurora {
  color: var(--ink-bright);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }

/* ---------- CV / Exhibitions — dark row layout (Cappen-inspired) ----------
   Black section. Rows dim by default, brighten on hover. Title left,
   year center, venue tags right. */
.cv-dark {
  /* Static black is the safe default — the section holds light text, so it
     must never sit on the light page background (touch devices, reduced
     motion, JS off). When the scroll-driven .cv-bg-box animation takes
     over, JS adds .cv-animated to make this transparent so the box can
     grow from the viewport center instead. */
  background-color: #07080f;
  color: #ece5eb;
  padding-block: clamp(5rem, 10vw, 8rem);
  position: relative;
  isolation: isolate;
}

.cv-dark.cv-animated {
  background-color: transparent;
}

/* Scroll-driven black "box" backdrop. Sits fixed to viewport; its `inset`
   is driven by scroll progress through the CV section in JS. */
.cv-bg-box {
  position: fixed;
  /* inset starts collapsed at viewport center; JS animates it to 0 as scroll progresses */
  inset: 50%;
  background: #07080f;
  z-index: 0;
  pointer-events: none;
  will-change: inset;
}

/* Make sure the CV content renders above the box */
.cv-dark > .container,
.cv-dark > .cv-dark-head,
.cv-dark > .cv-rows {
  position: relative;
  z-index: 1;
}

.cv-dark-head {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.cv-dark-head .eyebrow {
  color: var(--hue-yellow);
}

.cv-dark-head h2 {
  color: #ffffff;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  letter-spacing: -0.028em;
  font-weight: 500;
  line-height: 1.0;
}

.cv-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cv-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 80px minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1rem, 1.6vw, 1.4rem) 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.40);
  transition: color 320ms var(--ease), padding 320ms var(--ease);
}

.cv-row:hover {
  color: #ffffff;
}

.cv-row-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: inherit;
}

.cv-row-year {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-align: center;
  color: inherit;
  opacity: 0.78;
}

.cv-row-tags {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cv-tag {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: inherit;
  white-space: nowrap;
  font-weight: 500;
  transition: border-color 320ms var(--ease), background-color 320ms var(--ease);
}

.cv-row:hover .cv-tag {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 720px) {
  .cv-dark {
    background-color: #07080f; /* scroll-driven bg-box unreliable on mobile — hard-set black */
  }
  .cv-row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.5rem 0.25rem;
  }
  .cv-row-year {
    text-align: left;
  }
  .cv-row-tags {
    justify-content: flex-start;
  }
}

/* ---------- Inverted attention section ----------
   When this section scrolls into view, its background fades to near-black to
   pull the eye. The portal cards inside stay white. The cursor naturally
   inverts across the boundary because of mix-blend-mode on the cursor layer. */
.inverted-section {
  background-color: transparent;
  color: var(--ink);
  transition: background-color 700ms var(--ease), color 700ms var(--ease);
  position: relative;
  isolation: isolate; /* keeps blend modes scoped to this section */
}

.inverted-section.is-active {
  background-color: #07080f;
  color: #ece5eb;
}

/* Heading + eyebrow flip to light when section goes dark */
.inverted-section.is-active .eyebrow {
  color: var(--hue-yellow);
}

.inverted-section.is-active h2,
.inverted-section.is-active h3 {
  color: #ffffff;
}

/* Portal cards keep their white face — explicit overrides so they don't inherit */
.inverted-section.is-active .portal {
  background: #ffffff;
  border-color: transparent;
}

.inverted-section.is-active .portal h3,
.inverted-section.is-active .portal .link-arrow {
  color: var(--ink-bright);
}

.inverted-section.is-active .portal p {
  color: var(--ink-muted);
}

.inverted-section.is-active .portal .link-arrow {
  border-bottom-color: var(--ink-bright);
}

.inverted-section.is-active .portal .portal-eyebrow {
  color: var(--hue-purple);
}

/* When the section is dark, boost the gradient blob so colors pop on black.
   The blob is the .blob-host::before element. */
.inverted-section.is-active::before {
  background:
    radial-gradient(circle 320px at var(--card-blob-x0) var(--card-blob-y0), rgba(32, 214, 199, 0.62), transparent 64%),
    radial-gradient(circle 250px at var(--card-blob-x1) var(--card-blob-y1), rgba(255, 122, 167, 0.55), transparent 66%),
    radial-gradient(circle 200px at var(--card-blob-x2) var(--card-blob-y2), rgba(247, 213, 105, 0.50), transparent 68%),
    radial-gradient(circle 150px at var(--card-blob-x3) var(--card-blob-y3), rgba(242, 123, 45, 0.45), transparent 70%);
  filter: blur(28px) saturate(1.3);
  mix-blend-mode: screen;  /* screen blend makes bright colors pop on the black bg */
}

/* When cursor is over a portal inside the inverted section, reveal the
   white-difference-blend cursor (which appears DARK on the white card),
   even though card-gradient-cursor body class is normally hiding it. */
body.card-gradient-cursor.over-inverted-portal .cursor-goo,
body.card-gradient-cursor.over-inverted-portal .cursor-ring,
body.card-gradient-cursor.over-inverted-portal .cursor-dot {
  opacity: 1;
}

/* ---------- Ripple overlay ---------- */
/* Full-viewport canvas where colored ripples are drawn. Sits below the
   cursor layer but above all content so ripples appear "in front of" text. */
#ripple-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  mix-blend-mode: multiply;
}

/* ---------- Custom cursor ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transition: opacity 220ms var(--ease),
              width 320ms var(--ease),
              height 320ms var(--ease),
              background 320ms var(--ease),
              border-color 320ms var(--ease);
  will-change: transform;
  mix-blend-mode: difference;
}
.cursor.is-visible { opacity: 1; }

.cursor-goo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: difference;
  filter: url('#cursor-goo-filter');
  opacity: 0;
  transition: opacity 180ms var(--ease);
}

.cursor-goo.is-visible {
  opacity: 1;
}

body.card-gradient-cursor .cursor-goo {
  opacity: 0;
}

body.artwork-cursor .cursor-goo {
  opacity: 0;
}

.cursor-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 76px;
  height: 76px;
  border-radius: 0;
  background: #ffffff;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.cursor-trail.trail-0 {
  width: 90px;
  height: 90px;
}

.cursor-trail.trail-1 {
  width: 102px;
  height: 102px;
}

.cursor-trail.trail-2 {
  width: 120px;
  height: 120px;
}

.cursor-trail.trail-3 {
  width: 35px;
  height: 35px;
}

.cursor-trail.trail-4 {
  width: 25px;
  height: 25px;
}

.cursor-trail.trail-5 {
  width: 47px;
  height: 47px;
}

.cursor-trail.trail-6 {
  width: 20px;
  height: 20px;
}

.cursor-trail.trail-7 {
  width: 62px;
  height: 62px;
}

.cursor-trail.trail-8 {
  width: 30px;
  height: 30px;
}

.cursor-trail.trail-9 {
  width: 16px;
  height: 16px;
}

.cursor-trail.trail-10 {
  width: 42px;
  height: 42px;
}

.cursor-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  mix-blend-mode: difference;
  /* Smooth size + bg transitions for the resting-eye state.
     mix-blend-mode itself isn't animatable, so we let it switch sharply. */
  transition: width 380ms var(--ease),
              height 380ms var(--ease),
              background 380ms var(--ease),
              box-shadow 380ms var(--ease);
}

/* Pupil — pseudo-element inside the dot. Hidden by default; revealed only
   when the dot enters the resting "eye" state. Position is offset via
   --pupil-x / --pupil-y CSS vars that JS updates for slow glances. */
.cursor-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0f111d;
  transform: translate(-50%, -50%) translate(var(--pupil-x, 0px), var(--pupil-y, 0px));
  transition: transform 520ms cubic-bezier(0.34, 1.2, 0.6, 1),
              opacity 280ms var(--ease);
  opacity: 0;
  pointer-events: none;
}

/* Resting eye state — added by JS after the cursor is idle for a moment. */
.cursor-dot.is-resting {
  width: 26px;
  height: 26px;
  background: #ffffff;
  mix-blend-mode: normal;   /* override inherited difference blend */
  box-shadow: 0 0 0 1px rgba(15, 17, 29, 0.12),
              0 8px 22px -8px rgba(15, 17, 29, 0.22);
}

.cursor-dot.is-resting::before {
  opacity: 1;
}

.cursor-ring {
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: 1.5px solid #ffffff;
  background: transparent;
  mix-blend-mode: normal;
}

.cursor.is-hover.cursor-dot {
  width: 4px;
  height: 4px;
  opacity: 0;
}
.cursor.is-hover.cursor-ring {
  width: 56px;
  height: 56px;
  background: transparent;
}

/* Hide native cursor when custom is active (only on fine pointers) */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, input, label, textarea, select { cursor: none; }
}

/* Don't show cursor on touch / coarse pointer devices */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* Make magnetic elements transition smoothly when pulled */
.btn, .link-arrow, .nav-brand {
  transition: transform 280ms var(--ease), color 280ms var(--ease),
              background 280ms var(--ease), border-color 280ms var(--ease),
              box-shadow 280ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  #atmosphere { display: none; }
  .cursor { display: none; }
  body { cursor: auto; }
  /* Reveal animations resolve instantly — content must never hide */
  .fade-in { opacity: 1; transform: none; }
  /* The scroll-driven tile journey is purely decorative motion (the works
     repeat in the gallery below) — remove its 430vh scroll runway entirely */
  .tile-threshold { display: none; }
}