:root {
  --bg: #070711;
  --bg-soft: #0c0b19;
  --ink: #f6f4ff;
  --muted: #b8b3c9;
  --line: rgba(255,255,255,.14);
  --violet: #b18aff;
  --blue: #70c6ff;
  --pink: #f287d8;
  --max: 1220px;
  --pad: clamp(20px, 4vw, 64px);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 15%, rgba(84, 60, 161, .16), transparent 27rem),
    radial-gradient(circle at 90% 52%, rgba(22, 92, 155, .12), transparent 32rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: 12px; transform: translateY(-180%); background: white; color: #000; padding: .7rem 1rem; border-radius: 999px; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad);
  background: linear-gradient(to bottom, rgba(7,7,17,.9), rgba(7,7,17,.25), transparent);
  backdrop-filter: blur(8px);
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { background: rgba(7,7,17,.88); border-color: var(--line); }
.wordmark { display: inline-flex; gap: .45rem; text-decoration: none; font-size: .86rem; font-weight: 800; letter-spacing: .22em; }
.wordmark span:last-child { color: var(--violet); }
.site-nav { display: flex; gap: clamp(18px, 3vw, 42px); align-items: center; }
.site-nav a { text-decoration: none; color: rgba(255,255,255,.76); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease; }
.site-nav a:hover, .site-nav a.active { color: white; }
.menu-button { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-button > span:not(.sr-only) { display:block; width: 25px; height: 1px; background: white; margin: 5px 0; }

.hero { min-height: 100svh; position: relative; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-image { position: absolute; inset: 0; z-index: -3; background: url('hero-v3.webp') center center / cover no-repeat; transform: scale(1.03); animation: drift 15s ease-out both; }
.hero-vignette { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4,4,13,.86) 0%, rgba(4,4,13,.25) 55%, rgba(4,4,13,.56) 100%), linear-gradient(to top, #070711 0%, transparent 36%, rgba(0,0,0,.25) 100%); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.22; background-image: radial-gradient(circle at 20% 30%, white 0 1px, transparent 1.5px), radial-gradient(circle at 70% 55%, white 0 1px, transparent 1.5px), radial-gradient(circle at 85% 20%, white 0 .8px, transparent 1.4px); background-size: 180px 180px, 240px 240px, 130px 130px; }
.hero-content { width: min(100%, var(--max)); margin: 0 auto; padding: 160px var(--pad) clamp(48px, 7vh, 78px); }
.eyebrow, .kicker { margin: 0 0 1rem; color: var(--violet); text-transform: uppercase; letter-spacing: .17em; font-size: .72rem; font-weight: 800; }
.hero h1 { margin: 0; max-width: 900px; font-size: clamp(4.4rem, 15vw, 12rem); line-height: .76; letter-spacing: -.075em; text-transform: uppercase; font-weight: 900; }
.hero h1 span { display: block; }
.hero h1 span:last-child { margin-left: clamp(2rem, 13vw, 12rem); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.8); }
.hero-intro { max-width: 580px; margin: 2.4rem 0 2rem; font-size: clamp(1.05rem, 1.7vw, 1.35rem); color: rgba(255,255,255,.82); }
.scroll-cue { display: inline-flex; align-items:center; gap: 1rem; text-decoration: none; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; }
.scroll-cue span { display: grid; place-items:center; width: 37px; height:37px; border:1px solid rgba(255,255,255,.45); border-radius:50%; }
.hero-credit { position:absolute; right:var(--pad); bottom:30px; margin:0; color:rgba(255,255,255,.56); font-size:.72rem; letter-spacing:.08em; }

.section { position: relative; width: min(100%, calc(var(--max) + var(--pad) * 2)); margin: 0 auto; padding: clamp(88px, 12vw, 170px) var(--pad); }
.section + .section { border-top: 1px solid var(--line); }
.section-label { position:absolute; top: clamp(40px, 6vw, 72px); left:var(--pad); color:rgba(255,255,255,.35); font-size:.69rem; text-transform:uppercase; letter-spacing:.18em; }
h2 { margin: 0; font-size: clamp(2.4rem, 6.5vw, 5.8rem); line-height: .98; letter-spacing: -.045em; font-weight: 650; }
h3 { margin:0; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -.035em; }
p { color: var(--muted); }

.project-grid { display:grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: clamp(48px, 9vw, 120px); align-items:start; }
.project-copy { padding-top: 2.7rem; }
.project-copy > p { margin:0 0 1.2rem; font-size:clamp(1rem,1.35vw,1.18rem); }
.meta-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:2.5rem; }
.meta-row span { border:1px solid var(--line); border-radius:999px; padding:.52rem .84rem; color:rgba(255,255,255,.72); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }

.section-heading { display:grid; grid-template-columns: 1.35fr .65fr; gap: clamp(40px, 8vw, 100px); align-items:end; margin-bottom:clamp(60px,9vw,120px); }
.section-heading > p { max-width: 420px; margin:0 0 .5rem; }
.book-gallery { display:grid; grid-template-columns: .86fr 1.28fr .86fr; gap: clamp(18px,3vw,42px); align-items:end; }
.gallery-card { margin:0; min-width:0; }
.image-button { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.gallery-card .image-button { min-height: clamp(310px, 40vw, 590px); display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background: radial-gradient(circle at 50% 40%, rgba(115,86,183,.16), transparent 60%), rgba(255,255,255,.025); }
.gallery-card img { width:100%; height:100%; object-fit:contain; padding: clamp(16px,2vw,32px); transition: transform .45s ease; }
.gallery-card:hover img { transform:scale(1.035); }
.gallery-card figcaption { display:flex; flex-direction:column; gap:.15rem; margin-top:1rem; }
.gallery-card figcaption strong { font-size:.92rem; }
.gallery-card figcaption span { color:var(--muted); font-size:.78rem; }
.card-spread { transform: translateY(-24px); }

.artbook-callout { display:grid; grid-template-columns: 1.15fr .85fr; gap:clamp(40px,7vw,96px); align-items:center; margin-top:clamp(110px,15vw,190px); padding:clamp(24px,5vw,70px); border:1px solid var(--line); border-radius:clamp(26px,5vw,48px); overflow:hidden; background:linear-gradient(135deg,rgba(87,63,163,.16),rgba(17,28,54,.06)); }
.artbook-visual { min-height:380px; display:grid; place-items:center; }
.artbook-visual img { filter:drop-shadow(0 30px 36px rgba(0,0,0,.38)); transform:rotate(-3deg) scale(1.08); }
.artbook-copy p { max-width:480px; }
.button { display:inline-flex; align-items:center; gap:.8rem; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:.82rem 1.15rem; text-decoration:none; color:white; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; transition:background .2s,color .2s,transform .2s; }
.button:hover { background:white; color:#0a0814; transform:translateY(-2px); }
.microcopy { font-size:.72rem; opacity:.65; }

.poster-feature { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(38px,8vw,110px); align-items:center; margin-top:clamp(110px,16vw,210px); }
.poster-copy { position:sticky; top:130px; align-self:start; }
.poster-copy p:last-child { max-width:440px; }
.poster-frame { max-width:760px; margin-left:auto; border-radius:28px; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.42); }
.poster-frame img { width:100%; }

.research-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(46px,8vw,120px); align-items:start; }
.research-text p { font-size:clamp(1rem,1.25vw,1.14rem); }
.research-text h2 { margin-bottom:2rem; }
.video-shell { position:sticky; top:110px; }
.video-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:#000; box-shadow:0 30px 90px rgba(0,0,0,.4); }
.video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-note { margin:.7rem 0 0; text-align:right; font-size:.68rem; text-transform:uppercase; letter-spacing:.15em; }

.artist-card { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(48px,9vw,130px); align-items:center; padding:clamp(30px,6vw,86px); border-radius:clamp(30px,6vw,58px); border:1px solid var(--line); background:linear-gradient(145deg,rgba(93,63,158,.15),rgba(255,255,255,.025)); overflow:hidden; }
.portrait-wrap { position:relative; width:min(100%,390px); aspect-ratio:1; margin:auto; display:grid; place-items:center; }
.portrait-halo { position:absolute; inset:2%; border-radius:50%; background:radial-gradient(circle at 38% 30%, rgba(242,135,216,.45), rgba(83,49,146,.25) 35%, rgba(31,122,173,.18) 57%, transparent 69%); filter:blur(8px); }
.portrait-wrap::before, .portrait-wrap::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.portrait-wrap::before { inset:5%; }
.portrait-wrap::after { inset:-7%; border-style:dashed; animation:spin 30s linear infinite; }
.portrait-wrap img { position:relative; z-index:1; width:58%; aspect-ratio:1; object-fit:cover; border-radius:50%; image-rendering:auto; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.artist-copy h2 { font-size:clamp(2.5rem,5vw,5rem); }
.artist-copy h2 span { display:block; margin-top:.65rem; color:var(--violet); font-size:.22em; letter-spacing:.1em; text-transform:uppercase; }
.artist-lead { font-size:clamp(1.2rem,2vw,1.65rem); color:white; max-width:700px; }
.artist-meta { display:grid; gap:0; margin:2rem 0; border-top:1px solid var(--line); }
.artist-meta div { display:grid; grid-template-columns:120px 1fr; gap:20px; padding:.8rem 0; border-bottom:1px solid var(--line); }
.artist-meta dt { color:rgba(255,255,255,.5); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
.artist-meta dd { margin:0; font-size:.9rem; }
.contact-links { display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.text-link { text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:.15rem; }

.site-footer { width:min(100%,calc(var(--max) + var(--pad)*2)); margin:0 auto; padding:45px var(--pad) 55px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 2fr 1fr; gap:30px; align-items:center; font-size:.75rem; }
.site-footer p { margin:0; text-align:center; }
.site-footer > a:last-child { text-align:right; text-decoration:none; }
.footer-mark { text-decoration:none; font-weight:900; letter-spacing:.15em; }

.lightbox { width:min(94vw,1300px); max-height:94vh; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:24px; color:white; background:rgba(7,7,17,.96); box-shadow:0 30px 120px rgba(0,0,0,.8); }
.lightbox::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(12px); }
.lightbox img { width:100%; max-height:82vh; object-fit:contain; padding:28px 28px 0; }
.lightbox p { margin:.9rem 28px 1.4rem; font-size:.83rem; }
.lightbox-close { position:absolute; z-index:2; right:15px; top:12px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.6); font-size:1.8rem; line-height:1; cursor:pointer; }

@keyframes drift { from { transform:scale(1.08) translate3d(-1%,0,0); } to { transform:scale(1.03) translate3d(0,0,0); } }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 900px) {
  .menu-button { display:block; z-index:2; }
  .site-nav { position:fixed; inset:0; padding:110px var(--pad) 40px; flex-direction:column; align-items:flex-start; gap:1.3rem; background:rgba(7,7,17,.97); transform:translateY(-100%); transition:transform .35s ease; }
  .site-nav.open { transform:translateY(0); }
  .site-nav a { font-size:clamp(1.7rem,8vw,3.4rem); text-transform:none; letter-spacing:-.03em; }
  .project-grid, .section-heading, .artbook-callout, .poster-feature, .research-grid, .artist-card { grid-template-columns:1fr; }
  .project-copy { padding-top:0; }
  .section-heading { align-items:start; }
  .book-gallery { grid-template-columns:1fr; }
  .card-spread { transform:none; }
  .gallery-card .image-button { min-height:380px; }
  .artbook-visual { min-height:280px; }
  .poster-copy, .video-shell { position:static; }
  .poster-frame { margin:0 auto; max-width:650px; }
  .research-text { order:2; }
  .video-shell { order:1; }
  .artist-card { text-align:left; }
  .portrait-wrap { max-width:320px; }
  .site-footer { grid-template-columns:1fr; text-align:center; }
  .site-footer p, .site-footer > a:last-child { text-align:center; }
}

@media (max-width: 600px) {
  :root { --pad:20px; }
  .site-header { min-height:64px; }
  .hero-content { padding-top:150px; padding-bottom:48px; }
  .hero h1 { font-size:clamp(4rem,24vw,7rem); }
  .hero h1 span:last-child { margin-left:1.2rem; }
  .hero-intro { font-size:1rem; max-width:90%; }
  .hero-credit { display:none; }
  .section { padding-top:100px; padding-bottom:100px; }
  .section-label { top:35px; }
  h2 { font-size:clamp(2.45rem,13vw,4rem); }
  .gallery-card .image-button { min-height:300px; }
  .artbook-callout { padding:22px; }
  .artbook-visual { min-height:240px; }
  .poster-feature { margin-top:110px; }
  .artist-card { padding:25px 20px 35px; }
  .artist-meta div { grid-template-columns:1fr; gap:3px; }
  .lightbox img { padding:50px 10px 0; }
  .lightbox p { margin:.8rem 14px 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}