:root {
  --ink: #f3f0eb;
  --muted: #aaa7b1;
  --night: #08080b;
  --line: rgba(255,255,255,.18);
  --acid: #d8ff3e;
  --pink: #ff4eaf;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--night);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: 72px;
  padding: 0 2.6vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(8,8,11,.82);
  backdrop-filter: blur(14px);
}
.wordmark { font-weight: 800; letter-spacing: .16em; }
.topbar nav { display: flex; gap: 2rem; color: var(--muted); font-size: .88rem; }
.topbar nav a:hover, .links a:hover { color: var(--acid); }
.download { justify-self: end; font-size: .88rem; }
.download span { color: var(--acid); }

.opening {
  min-height: 100svh;
  padding: 15vh 4vw 5vh;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(340px, 1fr);
  gap: 6vw;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.opening::before {
  content: "";
  position: absolute;
  width: 42vw;
  aspect-ratio: 1;
  border: 1px solid rgba(216,255,62,.16);
  border-radius: 50%;
  left: -18vw;
  top: 18vh;
}
.eyebrow, .kicker { color: var(--acid); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; }
.opening .eyebrow { color: #55555c; }
h1, h2, blockquote { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
h1 { margin: 1.4rem 0 2rem; font-size: clamp(4rem, 8vw, 9rem); line-height: .83; letter-spacing: -.065em; }
h1 em, h2 em { color: var(--pink); font-weight: 400; }
.intro { max-width: 33rem; color: #d1ced4; font-size: clamp(1rem, 1.35vw, 1.3rem); }
.hero-art { width: min(100%, 570px); margin: 0 auto; position: relative; }
.hero-art img { width: 100%; height: auto; object-fit: contain; border-radius: 0; }
figcaption { margin-top: .75rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.scroll-cue { position: absolute; left: 4vw; bottom: 4vh; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; }
.scroll-cue span { color: #55555c; margin-left: .7rem; }

.signs { padding: 16vh 5vw 18vh; border-top: 1px solid var(--line); background: #f0eee9; color: #111116; }
.signs-head { display: grid; grid-template-columns: .7fr 1.5fr 1fr; gap: 4vw; align-items: end; margin-bottom: 11vh; }
.signs-head .eyebrow { color: #7356ff; align-self: start; }
.signs-head h2 { margin: 0; font-size: clamp(4rem, 7vw, 8rem); line-height: .84; letter-spacing: -.065em; }
.signs-head h2 em { color: #ff2893; }
.signs-head > p:last-child { margin: 0; font-size: 1.05rem; }
.signs-gallery { max-width: 1480px; margin: 0 auto; }
.sign { margin: 0; padding: 0; border: 1px solid #111116; overflow: hidden; background: transparent; box-shadow: none; }
.format-grid { display: grid; gap: clamp(8px, 1.2vw, 18px); }
.format-grid + .format-grid { margin-top: clamp(8px, 1.2vw, 18px); }
.format-grid--landscape { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.format-grid--portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.format-grid--landscape .sign { aspect-ratio: 1.414 / 1; }
.format-grid--portrait .sign { aspect-ratio: .72 / 1; }
.format-grid .sign img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; filter: contrast(1.12) saturate(1.05); opacity: 1; transform: translateX(-2%); transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.format-grid .sign:nth-child(even) img { transform: translateX(2%); }
.format-grid .sign:hover img,
.format-grid .sign:focus-within img { transform: translateX(0); }
.swap-view { position: relative; overflow: hidden; }
.swap-view img { transition: opacity .55s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.swap-view .swap-view__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f0eee9; opacity: 0; transform: scale(1.015); z-index: 2; }
.swap-view:hover .swap-view__work, .swap-view:focus .swap-view__work { opacity: 0; }
.swap-view:hover .swap-view__room, .swap-view:focus .swap-view__room { opacity: 1; transform: scale(1); }
.format-grid .sign.swap-view .swap-view__room { opacity: 0; transform: scale(1.015); object-fit: contain; }
.format-grid .sign.swap-view:hover .swap-view__work, .format-grid .sign.swap-view:focus .swap-view__work { opacity: 0; }
.format-grid .sign.swap-view:hover .swap-view__room, .format-grid .sign.swap-view:focus .swap-view__room { opacity: 1; transform: scale(1); }
.installation-view .swap-view__room { object-fit: cover; background: #ecebea; transform: scale(.985); transition: opacity .5s ease, transform 3.8s cubic-bezier(.2,.65,.25,1); }
.installation-view:hover .swap-view__room, .installation-view:focus .swap-view__room { transform: scale(1.14); }
.series-note { max-width: 980px; margin: 13vh auto 0; font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.9rem, 3.5vw, 4rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.02; text-align: center; color: #222228; }

.statement { min-height: 86vh; padding: 15vh 8vw; border-top: 1px solid var(--line); display: grid; grid-template-columns: 120px 1fr; column-gap: 6vw; align-items: start; position: relative; isolation: isolate; overflow: hidden; }
.statement::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,8,11,.9) 0%, rgba(8,8,11,.72) 58%, rgba(8,8,11,.58) 100%); }
.statement-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.chapter-mark { position: sticky; top: 15vh; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; }
.chapter-mark video { display: block; width: 100%; height: 100%; object-fit: cover; }
.statement-content { max-width: 900px; }
.statement-content h2 { margin: 1rem 0 4rem; font-size: clamp(3.5rem, 7vw, 8rem); line-height: .88; letter-spacing: -.06em; }
.statement-body { max-width: 760px; color: #cfccd2; font-size: 1.1rem; }
.statement-body p { margin: 0 0 1.5rem; }
.statement-audio { max-width: 760px; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.statement-audio p { margin: 0 0 1rem; color: var(--acid); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; }
.statement-audio audio { display: block; width: min(100%, 520px); }

.work-grid { padding: 8vh 4vw 18vh; display: grid; grid-template-columns: repeat(12, 1fr); gap: 12vh 2vw; }
.work-card figure { margin: 0; background: #101015; }
.work-card figure img { max-height: 82vh; object-fit: contain; }
.work-card--landscape figure { overflow: hidden; }
.work-card--landscape .astronaut-edge-fix { transform: scale(1.012); }
.work-card--portrait, .work-card--landscape, .work-card--feature { grid-column: 2 / span 10; }
.work-card--landscape { margin-top: 0; }
.work-card--feature { padding-inline: 8vw; }
.astronaut-one-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .38fr); gap: 2vw; align-items: end; }
.astronaut-one-pair figure { margin: 0; }
.astronaut-one-main img, .astronaut-one-detail img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
.work-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.work-meta h2 { margin: 0; font-size: 1.35rem; }
.work-meta p { margin: 0; color: var(--muted); font-size: .75rem; text-align: right; }
.work-sign-link { display: block; width: 100%; }
.work-sign-link img { display: block; width: 100%; height: auto; border: 1px solid #111116; }
.remaining-works { grid-column: 1 / -1; margin-top: 6vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18vh 2vw; align-items: start; }
.portfolio-work, .portfolio-work:nth-child(2), .portfolio-work:nth-child(3), .portfolio-work:nth-child(5), .portfolio-work--wide { grid-column: 2 / span 10; padding-inline: 8vw; }
.portfolio-work figure { margin: 0; overflow: hidden; background: transparent; }
.portfolio-work img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; object-position: center; }
.portfolio-work--no-signal { grid-column: 1 / -1 !important; padding-inline: 2vw !important; }
.portfolio-work--no-signal img { width: auto; max-width: 100%; max-height: 110vh; margin: 0 auto; }
.work-caption { max-width: 36rem; margin: 1.25rem 0 0; color: var(--muted); font-family: Georgia, serif; font-size: 1rem; font-style: italic; }

.tv-interlude { min-height: 100svh; padding: 10vh 4vw; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(3rem, 7vh, 6rem); overflow: hidden; background: #050506; }
.tv-set { position: relative; width: min(94vw, 1180px); }
.tv-found { width: min(82vw, 760px); }
.tv-found p { margin: .8rem 0 0; color: #77777f; font-size: .75rem; letter-spacing: .08em; }
.tv-frame { position: relative; z-index: 3; display: block; width: 100%; height: auto; pointer-events: none; }
.tv-screen { position: absolute; z-index: 4; top: 13.7%; left: 13.55%; width: 62.6%; height: 63.9%; overflow: hidden; border-radius: 10% / 8%; background: #050505; }
.tv-screen video { width: 100%; height: 100%; object-fit: cover; object-position: center; background: #050505; filter: grayscale(0) contrast(1.08) brightness(.9); opacity: 0; transform: scale(1.01); }
.tv-screen.is-playing video { animation: tv-video-reveal .35s linear 2.7s forwards, tv-treatment 17s steps(1, end) 3.1s infinite, tv-jitter 9s steps(1, end) 3.1s infinite; }
.tv-static, .tv-scanlines { position: absolute; inset: 0; pointer-events: none; }
.tv-static { z-index: 2; opacity: 0; background-color: #777; background-image: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, #111 1px 2px, transparent 2px 4px), repeating-radial-gradient(circle at 73% 61%, #d8d8d8 0 1px, #242424 1px 3px, transparent 3px 5px); background-size: 7px 5px, 11px 9px; }
.tv-screen.is-playing .tv-static { animation: tv-power-on 2.8s steps(12, end) forwards, tv-static-bursts 13s steps(1, end) 3.2s infinite; }
.tv-scanlines { z-index: 5; opacity: .22; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.16) 1px 3px); mix-blend-mode: screen; }
@keyframes tv-power-on { 0%, 28% { opacity: 0; transform: translateX(0); } 30%, 72% { opacity: 1; transform: translateX(0); } 82% { opacity: .9; transform: translateX(-2%); } 100% { opacity: 0; transform: translateX(0); } }
@keyframes tv-video-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes tv-static-bursts { 0%, 32%, 35%, 68%, 70%, 100% { opacity: 0; } 33%, 34% { opacity: .3; } 69% { opacity: .18; } }
@keyframes tv-treatment { 0%, 26%, 29%, 60%, 66%, 88%, 100% { filter: grayscale(0) contrast(1.08) brightness(.9); } 27%, 28%, 61%, 65%, 89%, 94% { filter: grayscale(1) contrast(1.22) brightness(.82); } }
@keyframes tv-jitter { 0%, 41%, 43%, 76%, 78%, 100% { transform: scale(1.01) translate(0); } 42% { transform: scale(1.018) translate(-3px, 1px); } 77% { transform: scale(1.015) translate(2px, -1px); } }
.project { padding: 14vh 8vw; min-height: 100vh; display: grid; grid-template-columns: .7fr 1fr; gap: 8vw; align-items: center; background: #f0eee9; color: #111116; }
.project h2, .context h2, .about h2 { margin: 1rem 0 2rem; font-size: clamp(3.5rem, 7vw, 8rem); line-height: .88; letter-spacing: -.06em; }
.project-copy > p:not(.eyebrow):not(.caption-line) { max-width: 34rem; font-size: 1.15rem; }
.project .eyebrow { color: #7356ff; }
.caption-line { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #aaa; font-family: Georgia, serif; font-style: italic; }
.project figure { margin: 0; }

.context { padding: 16vh 6vw; }
.context-head { display: grid; grid-template-columns: 1fr 2fr; column-gap: 5vw; align-items: end; margin-bottom: 10vh; }
.context-head .eyebrow { grid-column: 1; }
.context-head h2 { grid-column: 1 / -1; margin-bottom: 2rem; }
.context-head > p:last-child { grid-column: 2; max-width: 42rem; color: var(--muted); font-size: 1.1rem; }
.context-images { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3vw; align-items: end; }
.context-images figure { margin: 0; }
.context-images figure:first-child { padding-left: 8vw; }
.context-videos { width: min(100%, 960px); margin: 12vh auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
.context-videos figure { margin: 0; }
.context-videos video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: #050506; }
.context-videos figcaption { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.context-flyers { margin-top: 12vh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); align-items: stretch; }
.context-flyers figure { margin: 0; padding: clamp(.8rem, 1.4vw, 1.2rem); border: 1px solid #111116; display: flex; flex-direction: column; background: #f2f0ea; min-width: 0; }
.context-flyers img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; padding: clamp(.55rem, 1vw, .9rem); object-fit: contain; object-position: center; background: #fff; border: 0; }
.context-flyers figcaption { margin-top: auto; padding-top: 1rem; color: #55555c; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

.about { min-height: 100svh; padding: 15vh 8vw; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.about h2 { font-size: clamp(3.5rem, 6vw, 7rem); }
.about-copy { max-width: 620px; color: #cfccd2; font-size: 1.1rem; }
.links { margin-top: 4rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink); }
footer { padding: 2rem 4vw; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }

.back-link { justify-self: end; color: var(--muted); font-size: .85rem; }
.back-link:hover { color: var(--ink); }
.artwork-page { background: #efede8; color: #111116; }
.artwork-page .topbar { grid-template-columns: 1fr 1fr; background: rgba(239,237,232,.88); border-color: rgba(17,17,22,.18); }
.artwork-detail { min-height: 100svh; padding: 14vh 5vw 8vh; display: grid; grid-template-columns: minmax(360px, 1.2fr) minmax(320px, .8fr); gap: 8vw; align-items: start; }
.artwork-image { margin: 0; }
.artwork-image img { width: 100%; height: auto; }
.artwork-information { position: sticky; top: 15vh; padding-top: 2vh; }
.artwork-information .eyebrow { color: #55555c; }
.artwork-information h1 { margin: 1.2rem 0 3.5rem; font-family: Georgia, serif; font-size: clamp(4rem, 7vw, 8rem); font-weight: 400; line-height: .88; letter-spacing: -.06em; }
.artwork-data { margin: 0 0 4rem; border-top: 1px solid rgba(17,17,22,.25); }
.artwork-data div { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgba(17,17,22,.25); }
.artwork-data dt { color: #68686e; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.artwork-data dd { margin: 0; }
.artwork-description { max-width: 34rem; font-family: Georgia, serif; font-size: 1.25rem; line-height: 1.55; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .topbar { height: 62px; grid-template-columns: 1fr auto; padding: 0 5vw; }
  .topbar nav { display: none; }
  .download { font-size: .72rem; }
  .opening { padding: 14vh 5vw 10vh; grid-template-columns: 1fr; gap: 5vh; }
  h1 { font-size: clamp(3.8rem, 18vw, 6rem); }
  .hero-art { width: 88%; }
  .hero-art img { max-height: none; }
  .scroll-cue { display: none; }
  .signs { padding: 12vh 5vw; }
  .signs-head { display: block; margin-bottom: 8vh; }
  .signs-head h2 { margin: 1rem 0 2rem; font-size: clamp(3.5rem, 16vw, 6rem); }
  .format-grid--landscape, .format-grid--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .format-grid .sign img, .format-grid .sign:nth-child(even) img { opacity: 1; transform: none; }
  .series-note { margin-top: 10vh; text-align: left; }
  .statement { padding: 12vh 6vw; grid-template-columns: 1fr; }
  .chapter-mark { grid-row: auto; margin-bottom: 3rem; }
  .chapter-mark { position: relative; top: auto; }
  .statement-content h2 { margin-bottom: 3rem; font-size: clamp(3.5rem, 16vw, 6rem); }
  .work-grid { display: block; padding: 5vh 5vw 13vh; }
  .work-card, .work-card--landscape { margin: 0 0 13vh; }
  .work-card--feature { padding-inline: 0; }
  .astronaut-one-pair { grid-template-columns: 1fr; gap: 2vh; }
  .astronaut-one-detail { width: 44%; justify-self: end; }
  .remaining-works { display: block; margin-top: 0; }
  .portfolio-work { margin-bottom: 12vh; padding-inline: 0; }
  .portfolio-work--no-signal img { max-height: 92vh; }
  .tv-interlude { min-height: 78svh; padding: 8vh 2vw; }
  .tv-set { width: 100%; }
  .tv-found { width: 92%; }
  .project, .about { grid-template-columns: 1fr; padding: 12vh 6vw; }
  .project { gap: 5vh; }
  .context { padding: 12vh 5vw; }
  .context-head { display: block; }
  .context-images { grid-template-columns: 1fr; gap: 10vh; }
  .context-images figure:first-child { padding-left: 0; }
  .context-videos { grid-template-columns: 1fr; width: min(100%, 520px); gap: 8vh; }
  .context-flyers { grid-template-columns: 1fr; gap: 8vh; }
  .context-flyers img { height: auto; max-height: none; aspect-ratio: 4 / 5; }
  figcaption { flex-direction: column; }
  .artwork-page .topbar { display: grid; }
  .artwork-detail { padding: 12vh 5vw 8vh; grid-template-columns: 1fr; gap: 8vh; }
  .artwork-information { position: static; padding-top: 0; }
  .artwork-information h1 { font-size: clamp(4rem, 18vw, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .statement-video { display: none; }
}