:root {
  --color-studio-white: #f8f8f8;
  --color-void-black: #080808;
  --color-bone-white: #f0f0f0;
  --color-pewter-border: #2a2a2a;
  --color-press-ink: #121212;
  --color-paper-white: #ffffff;
  --color-newsprint: #f1f1f1;
  --color-foil-gray: #e1e1e1;
  --color-mute-gray: #c5c5c5;
  --font-cabinet-grotesk: "Cabinet Grotesk", "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-inter: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "PPSupplyMono", "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;
  --radius-cards: clamp(48px, 10vw, 160px);
  --radius-paper: clamp(54px, 15vw, 288px);
  --radius-pill: 9999px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--color-studio-white);
  background: var(--color-void-black);
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: calc(var(--scroll-progress, 0) * 100%);
  height: 100%;
  background: currentColor;
  color: var(--color-studio-white);
}

body.on-paper .scroll-progress span {
  color: var(--color-press-ink);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px clamp(18px, 4vw, 48px);
  pointer-events: none;
  color: var(--color-studio-white);
  transition: color 240ms ease;
}

body.is-scrolled .site-header {
  align-items: center;
}

body.on-paper .site-header {
  color: var(--color-press-ink);
}

body.on-paper .top-actions a {
  background: rgb(255 255 255 / .84);
  backdrop-filter: blur(12px);
}

.wordmark {
  pointer-events: auto;
  max-width: 64vw;
  font-family: var(--font-cabinet-grotesk);
  font-size: clamp(42px, 9vw, 116px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: 0;
  transition: font-size 260ms ease, max-width 260ms ease, line-height 260ms ease;
}

body.is-scrolled .wordmark {
  max-width: 34vw;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1;
}

.top-actions {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.top-actions a,
.pill,
.lightbox-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font: 400 16px/1 var(--font-inter);
  white-space: nowrap;
  cursor: pointer;
}

.top-actions a {
  min-height: 42px;
  padding: 10px 18px;
  transition: min-height 260ms ease, padding 260ms ease;
}

body.is-scrolled .top-actions a {
  min-height: 36px;
  padding: 8px 15px;
}

.subtle {
  border-color: var(--color-pewter-border);
  color: var(--color-bone-white);
}

body.on-paper .subtle {
  border-color: var(--color-foil-gray);
  color: var(--color-press-ink);
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(150px, 21vw, 240px) clamp(18px, 4vw, 56px) 72px;
  overflow: hidden;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 16vh;
  background: linear-gradient(to bottom, rgb(8 8 8 / 0), var(--color-void-black));
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(680px, 58vw);
}

.eyebrow {
  margin: 0 0 15px;
  color: var(--color-bone-white);
  font-family: var(--font-cabinet-grotesk);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.paper-tag {
  margin: 0 0 20px;
  color: inherit;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 2;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-cabinet-grotesk);
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  max-width: 680px;
  font-size: clamp(48px, 7.4vw, 102px);
  line-height: .95;
}

h2 {
  max-width: 980px;
  font-size: clamp(32px, 6vw, 76px);
  line-height: 1;
}

.intro {
  width: min(560px, 100%);
  margin: 24px 0 0;
  color: var(--color-bone-white);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
}

.button-row,
.download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 32px;
}

.hero-gallery {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .82;
  transform: translateY(calc(var(--scroll-progress, 0) * 80px));
}

.frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-studio-white);
  border-radius: var(--radius-cards);
  background: var(--color-void-black);
}

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

.hero-frame {
  position: absolute;
}

.frame-a {
  right: -8vw;
  top: 15vh;
  width: min(38vw, 500px);
  rotate: 2deg;
}

.frame-b {
  right: 16vw;
  bottom: -1vh;
  width: min(29vw, 380px);
  rotate: -5deg;
}

.frame-c {
  right: 1vw;
  bottom: -9vh;
  width: min(34vw, 430px);
  rotate: 4deg;
}

.project-index,
.paper-manifesto,
.exhibition,
.portfolio-strip,
.downloads {
  padding: 72px clamp(18px, 4vw, 56px);
}

.project-index {
  background: var(--color-void-black);
}

.project-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  margin-top: 48px;
}

.project-list a {
  min-height: 150px;
  padding: 24px;
  border: 1px solid var(--color-pewter-border);
  border-radius: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-bone-white);
  transition: border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.project-list a:hover {
  border-color: var(--color-studio-white);
  transform: translateY(-4px);
}

.project-list span {
  color: var(--color-studio-white);
  font-family: var(--font-cabinet-grotesk);
  font-size: 24px;
}

.section-heading {
  margin-bottom: 48px;
}

.paper-manifesto {
  position: relative;
  overflow: hidden;
  color: var(--color-press-ink);
  background:
    radial-gradient(circle at 20% 18%, rgb(18 18 18 / .035), transparent 22%),
    radial-gradient(circle at 80% 70%, rgb(18 18 18 / .04), transparent 26%),
    linear-gradient(135deg, rgb(18 18 18 / .035) 0 1px, transparent 1px 12px),
    var(--color-paper-white);
  padding-top: clamp(86px, 12vw, 144px);
  padding-bottom: clamp(110px, 16vw, 190px);
  border-radius: clamp(56px, 12vw, 160px) clamp(56px, 12vw, 160px) 0 0;
}

.paper-manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 24%, rgb(18 18 18 / .035) 24.2%, transparent 24.6%),
    linear-gradient(180deg, transparent 0 58%, rgb(18 18 18 / .035) 58.2%, transparent 58.6%);
}

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

.paper-manifesto h2,
.manifesto-line {
  max-width: none;
  font-family: "Helvetica Neue", var(--font-inter);
  font-size: clamp(64px, 13vw, 180px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.highlights {
  padding-bottom: clamp(96px, 13vw, 170px);
}

.paper-manifesto p:not(.paper-tag) {
  width: min(720px, 100%);
  margin: 40px auto 0;
  color: var(--color-press-ink);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.6;
  text-align: center;
}

.manifesto-line {
  display: flex;
  width: max-content;
  gap: clamp(30px, 6vw, 90px);
  margin-top: clamp(72px, 11vw, 140px);
  animation: drift-line 22s linear infinite;
  white-space: nowrap;
}

.highlight-wall {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(70px, 10vw, 130px);
}

.highlight-card {
  display: grid;
  gap: 18px;
  color: var(--color-press-ink);
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  opacity: .82;
  transform: translateY(28px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.highlight-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.highlight-card:nth-child(1) {
  grid-column: 1 / span 5;
}

.highlight-card:nth-child(2) {
  grid-column: 7 / span 5;
  margin-top: 86px;
}

.highlight-card:nth-child(3) {
  grid-column: 2 / span 4;
  margin-top: -18px;
}

.highlight-card:nth-child(4) {
  grid-column: 7 / span 6;
  margin-top: 72px;
}

.highlight-card img {
  width: 100%;
  border: 1px solid var(--color-press-ink);
  border-radius: var(--radius-paper);
  aspect-ratio: 17 / 12;
  object-fit: cover;
}

.book-reader {
  --book-scale: .54;
  --book-opacity: .78;
  --book-exit: 0;
  --turn-progress: 0;
  position: relative;
  min-height: 760vh;
  color: var(--color-studio-white);
  background:
    radial-gradient(circle at 52% 45%, rgb(255 255 255 / .08), transparent 34%),
    radial-gradient(circle at 50% 100%, rgb(255 255 255 / .055), transparent 42%),
    var(--color-void-black);
}

.book-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
}

.book-reader.is-pinned .book-sticky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 80;
  background:
    radial-gradient(circle at 52% 45%, rgb(255 255 255 / .09), transparent 34%),
    radial-gradient(circle at 50% 100%, rgb(255 255 255 / .06), transparent 42%),
    var(--color-void-black);
}

.book-reader.is-after .book-sticky {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
}

.book-copy {
  position: absolute;
  left: clamp(18px, 4vw, 56px);
  top: clamp(88px, 11vw, 140px);
  z-index: 2;
  max-width: min(520px, 44vw);
  color: var(--color-studio-white);
  opacity: calc(1 - min(var(--book-reading, 0) * 1.35, 1));
  transform: translateY(calc(var(--book-reading, 0) * -28px));
  pointer-events: none;
}

.book-copy h2 {
  font-family: "Helvetica Neue", var(--font-inter);
  font-size: clamp(42px, 6vw, 84px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .94;
  text-transform: uppercase;
}

.book-copy p:not(.paper-tag) {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.55;
}

.book-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.dom-book {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(78vw, 980px);
  aspect-ratio: 1.5454545;
  transform-style: preserve-3d;
  perspective: 2200px;
  pointer-events: none;
  filter: drop-shadow(0 44px 56px rgb(0 0 0 / .42));
}

.dom-book::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -9%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / .48), rgb(0 0 0 / .18) 44%, transparent 72%);
  filter: blur(18px);
  transform: translateZ(-80px);
  pointer-events: none;
}

.dom-spread {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform-style: preserve-3d;
  border-radius: 18px;
  background: transparent;
  box-shadow:
    0 16px 34px rgb(0 0 0 / .22);
}

.dom-spine-ridge {
  position: absolute;
  left: calc(50% - 10px);
  top: 1.4%;
  bottom: -2.4%;
  z-index: 6;
  width: 20px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .32), rgb(255 255 255 / .72) 47%, rgb(0 0 0 / .26));
  box-shadow: 0 0 22px rgb(0 0 0 / .2);
  opacity: .72;
  pointer-events: none;
}

.dom-page,
.dom-cover,
.dom-turn,
.dom-face {
  overflow: hidden;
  border: 1px solid rgb(42 34 24 / .12);
  background-color: #f4f0e8;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  backface-visibility: hidden;
}

.dom-page {
  position: relative;
  z-index: 3;
  box-shadow:
    inset 0 0 28px rgb(25 18 10 / .06),
    inset 0 -18px 28px rgb(80 55 25 / .06);
}

.dom-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
}

.dom-left {
  border-radius: 18px 3px 3px 18px;
  transform: translateZ(6px) rotateY(.6deg);
}

.dom-right {
  border-radius: 3px 18px 18px 3px;
  transform: translateZ(7px) rotateY(-.6deg);
}

.dom-left::after {
  background: linear-gradient(90deg, rgb(0 0 0 / .05), transparent 16%, transparent 84%, rgb(0 0 0 / .18));
}

.dom-right::after {
  background: linear-gradient(90deg, rgb(0 0 0 / .18), transparent 16%, transparent 84%, rgb(0 0 0 / .05));
}

.dom-spine-shadow {
  position: absolute;
  inset: 0 calc(50% - 24px);
  z-index: 9;
  background: linear-gradient(90deg, rgb(0 0 0 / .3), rgb(255 255 255 / .22) 48%, rgb(0 0 0 / .24));
  filter: blur(10px);
  opacity: .58;
  pointer-events: none;
}

.dom-cover {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 16;
  border-radius: 4px 20px 20px 4px;
  background-color: #101010;
  background-size: cover;
  transform-origin: left center;
  transform-style: preserve-3d;
  box-shadow: 0 28px 34px rgb(0 0 0 / .34);
}

.dom-cover-content {
  position: absolute;
  inset: 8% 8%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid rgb(248 248 248 / .8);
  padding: 8%;
  color: #f8f8f8;
  font-family: "Helvetica Neue", var(--font-inter);
  font-size: clamp(18px, 3.1vw, 42px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.05em;
}

.dom-cover-content small {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1vw, 15px);
  font-weight: 400;
  letter-spacing: 0;
}

.dom-turn {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 22;
  border: 0;
  background: transparent;
  transform-origin: left center;
  transform-style: preserve-3d;
  filter: drop-shadow(0 24px 24px rgb(0 0 0 / .22));
  opacity: var(--turn-opacity, 1);
}

.dom-face {
  position: absolute;
  inset: 0;
  border-radius: 3px 18px 18px 3px;
  transform: translateZ(4px);
  box-shadow:
    inset 0 0 18px rgb(0 0 0 / .05),
    inset -22px 0 34px rgb(0 0 0 / .08),
    -10px 8px 22px rgb(0 0 0 / .13);
}

.dom-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .2), transparent 13%, transparent 76%, rgb(255 255 255 / .25)),
    radial-gradient(circle at calc(var(--turn-progress, 0) * 100%) 50%, rgb(255 255 255 / .34), transparent 28%);
  opacity: calc(.4 + var(--turn-progress, 0) * .28);
  pointer-events: none;
}

.dom-face.back {
  border-radius: 18px 3px 3px 18px;
  transform: rotateY(180deg) translateZ(4px);
}

.dom-turn-shadow {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 10;
  border-radius: 3px 18px 18px 3px;
  background: linear-gradient(90deg, rgb(0 0 0 / .26), transparent 34%);
  opacity: var(--turn-shadow-opacity, 0);
  transform-origin: left center;
  pointer-events: none;
}

.book-meta {
  position: absolute;
  left: clamp(18px, 4vw, 56px);
  right: clamp(18px, 4vw, 56px);
  bottom: clamp(26px, 4vw, 54px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--color-bone-white);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  pointer-events: none;
}

.book-fallback {
  display: none;
}

.book-fallback img {
  width: min(82vw, 440px);
  margin: 0 auto;
  border: 1px solid var(--color-studio-white);
  border-radius: 36px;
  background: var(--color-paper-white);
}

.book-reader::after {
  content: "FULL PORTFOLIO";
  position: absolute;
  left: -4vw;
  bottom: 4vh;
  color: rgb(255 255 255 / .035);
  font-family: "Helvetica Neue", var(--font-inter);
  font-size: clamp(96px, 22vw, 300px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .8;
  pointer-events: none;
}

@keyframes drift-line {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-24%);
  }
}

.spark-row {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
  margin-bottom: 72px;
}

.spark-row span {
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.exhibition,
.portfolio-strip,
.downloads {
  color: var(--color-press-ink);
  background: var(--color-paper-white);
}

.exhibition {
  display: grid;
  grid-template-columns: minmax(260px, 34vw) 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  padding-top: clamp(72px, 10vw, 130px);
}

.archive-copy {
  position: sticky;
  top: 118px;
}

.archive-copy h2 {
  font-family: "Helvetica Neue", var(--font-inter);
  font-size: clamp(44px, 7vw, 92px);
  font-weight: 700;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.archive-copy p:not(.paper-tag) {
  margin: 24px 0 0;
  max-width: 520px;
  color: var(--color-press-ink);
  font-size: 17px;
  line-height: 1.6;
}

.archive-cards {
  display: grid;
  gap: clamp(36px, 7vw, 96px);
}

.archive-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--color-press-ink);
  opacity: .55;
  transform: translateY(32px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.archive-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.archive-card span {
  align-self: start;
  font-family: var(--font-mono);
  font-size: 16px;
}

.archive-card img {
  width: 100%;
  border-radius: var(--radius-paper);
  border: 1px solid var(--color-press-ink);
  aspect-ratio: 17 / 11;
  object-fit: cover;
}

.archive-card strong,
.archive-card em {
  grid-column: 2;
  font-style: normal;
}

.archive-card strong {
  margin-top: 20px;
  font-family: "Helvetica Neue", var(--font-inter);
  font-size: clamp(32px, 6vw, 76px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.archive-card em {
  color: var(--color-press-ink);
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
}

.plate-field {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 48px 24px;
  align-items: start;
}

.plate-card {
  position: relative;
  grid-column: span 4;
  margin: 0;
  transform: translateY(var(--shift, 0));
  opacity: .24;
  transition: opacity 520ms ease, transform 520ms ease;
}

.plate-card.is-visible {
  opacity: 1;
  transform: translateY(var(--shift, 0)) rotate(var(--tilt, 0deg));
}

.plate-card:nth-child(6n + 1) {
  grid-column: 1 / span 4;
  --shift: 0;
  --tilt: -1.5deg;
}

.plate-card:nth-child(6n + 2) {
  grid-column: 5 / span 4;
  --shift: 58px;
  --tilt: 1deg;
}

.plate-card:nth-child(6n + 3) {
  grid-column: 9 / span 4;
  --shift: -18px;
  --tilt: -2deg;
}

.plate-card:nth-child(6n + 4) {
  grid-column: 2 / span 4;
  --shift: 26px;
  --tilt: 1.5deg;
}

.plate-card:nth-child(6n + 5) {
  grid-column: 6 / span 4;
  --shift: -34px;
  --tilt: -1deg;
}

.plate-card:nth-child(6n) {
  grid-column: 9 / span 3;
  --shift: 42px;
  --tilt: 2deg;
}

.plate-button {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-press-ink);
  border-radius: var(--radius-paper);
  background: transparent;
  cursor: zoom-in;
}

.plate-button img {
  width: 100%;
  aspect-ratio: 17 / 22;
  object-fit: cover;
}

.plate-card figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: var(--color-press-ink);
  font-family: var(--font-mono);
  font-size: 14px;
}

.downloads {
  min-height: 58vh;
  padding-bottom: clamp(96px, 14vw, 180px);
  color: var(--color-press-ink);
  background: var(--color-paper-white);
}

.downloads h2,
.portfolio-strip h2 {
  font-family: "Helvetica Neue", var(--font-inter);
  font-weight: 700;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.downloads .pill {
  color: var(--color-press-ink);
  border-radius: 40px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px clamp(18px, 4vw, 56px) 48px;
  color: var(--color-press-ink);
  background: var(--color-paper-white);
  border-top: 1px solid var(--color-press-ink);
}

.site-footer p {
  margin: 0;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: 20px;
  background: rgb(8 8 8 / .96);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-close {
  justify-self: end;
}

.lightbox img {
  justify-self: center;
  align-self: center;
  max-width: min(100%, 1100px);
  max-height: 82vh;
  border: 1px solid var(--color-studio-white);
  border-radius: clamp(28px, 5vw, 80px);
  object-fit: contain;
}

.lightbox p {
  margin: 0;
  color: var(--color-bone-white);
  text-align: center;
}

@media (max-width: 980px) {
  .site-header {
    position: absolute;
  }

  .top-actions {
    flex-direction: column;
    align-items: flex-end;
  }

  .hero {
    min-height: auto;
    padding-top: 150px;
  }

  .hero-copy {
    width: 100%;
  }

  h1 {
    max-width: 850px;
  }

  .hero-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 48px;
    opacity: 1;
  }

  .hero-frame {
    position: static;
    width: auto;
    rotate: 0deg;
  }

  .frame-c {
    grid-column: 1 / -1;
    width: 72%;
    justify-self: end;
  }

  .project-list {
    grid-template-columns: 1fr;
  }

  .project-list a {
    min-height: 112px;
  }

  .plate-field {
    grid-template-columns: 1fr 1fr;
  }

  .paper-manifesto h2,
  .manifesto-line {
    font-size: clamp(54px, 16vw, 112px);
  }

  .highlight-wall {
    grid-template-columns: 1fr 1fr;
  }

  .highlight-card:nth-child(n) {
    grid-column: auto;
    margin-top: 0;
  }

  .book-copy {
    position: absolute;
    left: clamp(18px, 4vw, 56px);
    top: clamp(88px, 11vw, 140px);
    max-width: min(520px, 44vw);
    margin-bottom: 0;
  }

  .book-sticky {
    align-content: center;
  }

  .book-stage {
    width: 100%;
  }

  .exhibition {
    display: block;
  }

  .archive-copy {
    position: static;
    margin-bottom: 56px;
  }

  .archive-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .plate-card,
  .plate-card:nth-child(n) {
    grid-column: auto;
    transform: none;
  }

  .plate-card.is-visible {
    transform: none;
  }
}

@media (max-width: 640px) {
  .site-header {
    align-items: flex-start;
    padding-top: 18px;
  }

  .wordmark {
    max-width: 58vw;
    font-size: clamp(34px, 13vw, 56px);
  }

  body.is-scrolled .wordmark {
    max-width: 44vw;
    font-size: 22px;
  }

  .top-actions a:nth-child(1) {
    display: none;
  }

  .top-actions a:nth-child(2) {
    display: none;
  }

  .hero {
    padding-top: 128px;
  }

  .hero-gallery,
  .plate-field,
  .highlight-wall {
    grid-template-columns: 1fr;
  }

  .paper-manifesto {
    border-radius: 54px 54px 0 0;
  }

  .spark-row {
    gap: 24px;
    margin-bottom: 48px;
  }

  .archive-card {
    display: block;
  }

  .archive-card span,
  .archive-card strong,
  .archive-card em {
    display: block;
  }

  .archive-card img {
    margin: 18px 0;
  }

  .book-reader {
    min-height: 620vh;
  }

  .book-sticky {
    height: 100svh;
    min-height: 0;
    padding-top: 0;
  }

  .book-copy {
    display: none;
  }

  .book-stage {
    width: 100%;
    height: 100%;
  }

  .book-meta {
    display: grid;
    gap: 8px;
    text-align: center;
  }

  .book-fallback {
    display: none;
  }

  .frame-c {
    width: 100%;
  }

  .pill,
  .top-actions a {
    width: 100%;
  }

  .button-row,
  .download-row {
    flex-direction: column;
  }

  .site-footer {
    flex-direction: column;
  }
}