:root {
  color-scheme: dark;
  --black: #0b0a0d;
  --blue: #6c7cbd;
  --blue-deep: #17126f;
  --cream: #e9e5d7;
  --ink: #16140f;
  --serif: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --card-w: clamp(380px, 34vw, 620px);
  --card-half-w: clamp(190px, 17vw, 310px);
}

* { box-sizing: border-box; }
html { background: #000; scroll-behavior: smooth; }
body { margin: 0; overflow: hidden; background: #000; color: #f3f0e5; font-family: var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, a { color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible,.zoom-target:focus-visible { outline: 2px solid #78cedc; outline-offset: 4px; }
img, video { display: block; width: 100%; }
::selection { color: var(--cream); background: #17126f; }

.lunar-emblem { --cut:#0b0a0d; position: relative; display: inline-block; flex: 0 0 auto; width: 34px; height: 34px; aspect-ratio: 1; overflow: hidden; color: #f2eee1; background: currentColor; border-radius: 50%; }
.lunar-emblem::before { content: ""; position: absolute; width: 88%; aspect-ratio: 1; left: 30%; top: -8%; background: var(--cut); border-radius: 50%; }
.lunar-emblem::after { content: ""; position: absolute; width: 4px; aspect-ratio: 1; right: 13%; bottom: 17%; background: currentColor; border-radius: 50%; }
.lunar-emblem.large { --cut:#251a87; width: clamp(92px,8vw,126px); height: clamp(92px,8vw,126px); }
.lunar-emblem.large::after { width: 10px; }
.brand.dark .lunar-emblem { --cut:#0b0a0d; color: var(--cream); }

.boot { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; background: #030304; opacity: 1; visibility: visible; transition: opacity .55s ease, visibility .55s; }
.boot.done { opacity: 0; visibility: hidden; }
.boot-screen { position: relative; width: min(92vw,122.6667vh); max-height: 92vh; aspect-ratio: 4 / 3; overflow: hidden; color: #eee9d5; background: radial-gradient(circle at 50% 45%, #3026a5 0, #211782 53%, #160f64 100%); border: 4px solid #08080b; border-radius: 6.5% / 8%; box-shadow: inset 0 0 90px rgba(0,0,0,.58), inset 0 0 12px #03020b, 0 0 32px rgba(50,37,160,.28); text-shadow: 2px 0 #e65a63, -2px 0 #51c7cf; }
.scanlines, .crt-noise { position: absolute; z-index: 10; inset: 0; pointer-events: none; opacity: .23; background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.scanlines::after, .crt-noise::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.boot-center { position: absolute; left: 50%; top: 47%; width: 84%; transform: translate(-50%,-50%); text-align: center; }
.boot-logo { display: flex; justify-content: center; align-items: center; gap: clamp(28px,4vw,65px); }
.boot-logo strong { font-size: clamp(76px,13vw,210px); font-style: italic; line-height: .8; letter-spacing: -.07em; }
.boot-center p { margin: clamp(28px,4vh,54px) 0 clamp(52px,7vh,86px); font-family: "Courier New", monospace; font-size: clamp(13px,1.35vw,23px); font-weight: 700; line-height: 1.15; letter-spacing: .06em; }
.loading-bar { width: 64%; max-width: 720px; height: clamp(34px,4.6vh,56px); margin: auto; padding: 5px; border: 4px solid #eee9d5; }
.loading-bar i { display: block; width: 0; height: 100%; background: #eee9d5; animation: loading 2.2s steps(12,end) .15s forwards; }
.boot-screen > small { position: absolute; left: 7%; right: 7%; bottom: 6%; font-family: "Courier New", monospace; font-size: clamp(10px,1vw,17px); font-weight: 700; letter-spacing: .035em; text-align: center; }
@keyframes loading { to { width: 100%; } }

.catalogue { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: linear-gradient(180deg,#0c0b11 0 36%,#1b1a35 56%,#7183c0 100%); border: 3px solid #040405; border-radius: 3.4vw; box-shadow: inset 0 0 70px rgba(0,0,0,.45); }
.crt-noise { z-index: 10; opacity: .08; }
.site-header { position: absolute; z-index: 50; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 78px; padding: 0 42px; border-bottom: 1px solid rgba(255,255,255,.14); }
.brand { display: flex; align-items: center; gap: 11px; width: max-content; color: inherit; text-decoration: none; }
.brand b { font-size: 28px; font-style: italic; line-height: 1; letter-spacing: -.04em; }
.site-header nav { display: flex; align-items: center; gap: clamp(22px,3.5vw,62px); }
.site-header nav a, .call { font-family: var(--sans); font-size: 17px; font-weight: 700; text-underline-offset: 4px; }
.site-header nav a.active, .site-header nav a:hover, .call:hover { text-decoration: underline; }

.project-stage { position: absolute; inset: 0; overflow: hidden; }
.project-heading { position: absolute; z-index: 30; top: 15.5%; left: 50%; width: min(1080px,90vw); transform: translateX(-50%); text-align: center; }
.project-heading h1 { margin: 0; font-size: clamp(52px,5.35vw,92px); font-weight: 500; line-height: .96; letter-spacing: -.035em; text-wrap: balance; }
.project-heading p { display: flex; justify-content: center; align-items: center; gap: 13px; margin: 15px 0 0; font-size: clamp(15px,1.35vw,23px); font-weight: 700; }
.project-heading i { font-style: normal; }
.project-heading button { padding: 0; background: none; border: 0; font-family: var(--sans); font-size: 17px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.film-window { position: absolute; z-index: 20; top: 36%; left: -8vw; width: 116vw; height: 54%; perspective: 1500px; touch-action: none; cursor: grab; }
.film-window.is-dragging { cursor: grabbing; }
.film-strip { position: absolute; inset: 0; transform-style: preserve-3d; }
.frame { --x: 0px; --y: 0px; --z: 0px; --rz: -5deg; --ry: 0deg; --s: 1; --o: 1; position: absolute; left: 50%; top: 48%; width: var(--card-w); height: clamp(268px,23.95vw,437px); aspect-ratio: 1.42; padding: 42px 10px; overflow: hidden; background: #050507; border: 1px solid rgba(255,255,255,.12); cursor: pointer; opacity: var(--o); filter: saturate(var(--sat,1)) brightness(var(--bright,1)) blur(var(--blur,0px)); transform: translate(-50%,-50%) translate3d(var(--x),var(--y),var(--z)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--s)); transform-origin: center; box-shadow: 0 26px 62px rgba(0,0,0,.42); transition: transform .82s cubic-bezier(.18,.72,.16,1), opacity .62s ease, filter .62s ease, box-shadow .4s; will-change: transform, opacity; }
.frame::before, .frame::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 20px; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(232,231,220,.94) 12px 30px, transparent 30px 43px); }
.frame::before { top: 10px; }
.frame::after { bottom: 10px; }
.frame.active { box-shadow: 0 32px 82px rgba(0,0,0,.58); }
.frame img { height: 100%; object-fit: cover; pointer-events: none; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.film-window.is-dragging .frame { transition: none; }
.absurd-preview { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; overflow: hidden; background: #09090c; }
.absurd-preview img { min-width: 0; }
.absurd-preview b { position: absolute; inset: auto 0 0; padding: 28px 18px 14px; color: #f2eee1; background: linear-gradient(transparent,rgba(0,0,0,.9)); font-size: clamp(17px,1.55vw,26px); font-weight: 500; text-align: left; }
.record-frame { color: #eee9d5; }
.record-scene { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 72% 22%,#6f61ae 0,#3b3279 42%,#171529 100%); }
.record-scene::before { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(115deg,transparent 0 18px,rgba(255,255,255,.12) 19px 20px); }
.vinyl { position: relative; display: grid; place-items: center; width: min(54%,280px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle,#0a090d 0 3px,#242129 4px 6px,#0e0d11 7px 9px); box-shadow: 18px 22px 38px rgba(0,0,0,.46),inset 0 0 0 2px #08070a; }
.vinyl::after { content: ""; position: absolute; width: 4px; aspect-ratio: 1; background: #15131a; border-radius: 50%; }
.vinyl b { display: grid; place-items: center; width: 29%; aspect-ratio: 1; color: #211c3b; background: var(--cream); border-radius: 50%; font-size: clamp(12px,1.15vw,20px); letter-spacing: -.04em; }
.record-scene em { position: absolute; left: 18px; bottom: 15px; font-size: clamp(15px,1.45vw,25px); font-style: normal; }
.record-frame.active .vinyl { animation: record-spin 9s linear infinite; }
@keyframes record-spin { to { transform: rotate(1turn); } }

.arrow { position: absolute; z-index: 35; bottom: 5.2%; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; color: #fff; background: #08080a; border: 0; font-family: Arial,sans-serif; font-size: 27px; cursor: pointer; box-shadow: 1px 0 #cb3b55,-1px 0 #3bb9cd; }
.arrow.prev { left: 6%; }
.arrow.next { right: 6%; }
.arrow:hover { color: #08080a; background: var(--cream); }
.dots { position: absolute; z-index: 35; left: 50%; bottom: 6.8%; display: flex; gap: 13px; transform: translateX(-50%); }
.dots button { width: 9px; height: 9px; padding: 0; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; background: transparent; cursor: pointer; }
.dots button.active { background: #fff; }

.project-dialog { position: fixed; z-index: 200; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow: auto; color: #f3f0e5; background: #09090d; border: 0; opacity: 0; transform: scale(.985); transition: opacity .45s, transform .45s, display .45s allow-discrete, overlay .45s allow-discrete; }
.project-dialog:not([open]) { display: none; }
.project-dialog[open] { opacity: 1; transform: none; }
.project-dialog::backdrop { background: #000; }
@starting-style { .project-dialog[open] { opacity: 0; transform: scale(.975); } }
.project-sheet { min-height: 100%; background: radial-gradient(circle at 50% 112%,rgba(108,124,189,.72),transparent 44%),linear-gradient(180deg,#09090e 0%,#111223 58%,#252d51 100%); background-attachment: fixed; }
.sheet-header { position: sticky; z-index: 10; top: 0; display: flex; justify-content: space-between; align-items: center; height: 86px; padding: 0 40px; border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(9,9,14,.82); backdrop-filter: blur(16px); }
.brand.dark { color: var(--cream); }
.sheet-header button { padding: 12px 18px; color: #f3f0e5; background: #111117; border: 1px solid rgba(255,255,255,.22); font-family: var(--sans); font-size: 15px; cursor: pointer; }
.sheet-header button span { margin-left: 12px; font: 22px/0 Arial,sans-serif; }
.sheet-body { min-height: calc(100vh - 86px); min-height: calc(100svh - 86px); }
.case-page { width: min(1600px,100%); margin: 0 auto; padding: clamp(50px,8vh,110px) 4.3vw 90px; }
.case-intro { display: grid; grid-template-columns: 82px minmax(390px,1.35fr) minmax(300px,.65fr); gap: clamp(24px,3.4vw,58px); align-items: start; padding: clamp(28px,3.4vw,52px); background: rgba(255,255,255,.28); border: 1px solid rgba(0,0,0,.16); }
.case-index { font-size: clamp(32px,3.2vw,54px); line-height: 1; }
.case-title > span { display: block; margin-bottom: 10px; font: 700 12px/1 var(--sans); letter-spacing: .12em; }
.case-title h2 { max-width: 800px; margin: 0; font-size: clamp(48px,5.5vw,90px); font-weight: 400; line-height: .94; letter-spacing: -.045em; }
.case-meta { padding-top: 22px; font-family: var(--sans); }
.case-meta > p { max-width: 620px; margin: 0 0 24px; font-size: clamp(15px,1.15vw,19px); font-weight: 600; line-height: 1.55; }
.case-meta dl { display: grid; grid-template-columns: 100px 1fr; gap: 16px; margin: 0; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.18); font-size: 15px; line-height: 1.55; }
.case-meta dt { font-weight: 800; }
.case-meta dd { margin: 0; }
.case-meta .stats { display: flex; flex-wrap: wrap; gap: 18px 30px; margin-top: 34px; }
.case-meta .stats span { max-width: 230px; font-size: 13px; line-height: 1.35; }
.case-meta .stats strong { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 34px; font-weight: 400; }
.case-page > .case-media { width: 100%; margin-top: clamp(54px,8vh,110px); }
.media-module { min-width: 0; margin: 0; overflow: hidden; background: #f6f2e6; border: 1px solid rgba(0,0,0,.18); box-shadow: 0 14px 40px rgba(50,42,28,.07); }
.module-kicker { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; border-bottom: 1px solid rgba(0,0,0,.14); font: 800 12px/1 var(--sans); letter-spacing: .08em; }
.module-kicker i { font-family: var(--serif); font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: 0; }
.media-viewport { position: relative; overflow: hidden; background: #0b0a0d; }
.media-module .media-viewport > img,.media-module .media-viewport > video { display: block; width: 100%; margin: 0; box-shadow: none; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.media-module .media-viewport > img { cursor: zoom-in; }
.media-module figcaption { min-height: 46px; padding: 14px 16px!important; border-top: 1px solid rgba(0,0,0,.12); font: 700 12px/1.35 var(--sans)!important; letter-spacing: .02em!important; }
@media (hover:hover) {
  .media-module:hover .media-viewport > img { transform: scale(1.045); }
  .frame:hover img { transform: scale(1.035); }
}
.image-viewer { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 70px 5vw 34px; background: rgba(5,5,7,.94); cursor: zoom-out; }
.image-viewer[hidden] { display: none; }
.image-viewer > button { position: fixed; z-index: 2; top: 24px; right: 28px; padding: 13px 18px; color: #fff; background: #0b0a0d; border: 1px solid rgba(255,255,255,.35); font-family: var(--sans); font-size: 15px; cursor: pointer; }
.image-viewer > button span { margin-left: 10px; font-size: 20px; }
.image-viewer > img { display: block; width: auto; max-width: 92vw; height: auto; max-height: 86vh; object-fit: contain; background: transparent; box-shadow: 0 22px 80px rgba(0,0,0,.5); }
.case-layout { display: grid; grid-template-columns: .9fr 1.15fr; min-height: calc(100svh - 86px); padding: clamp(55px,9vh,130px) 4.3vw 42px; gap: 5vw; }
.case-copy { align-self: start; padding-top: 1vh; }
.case-copy h2 { margin: 0 0 16px; font-size: clamp(52px,6.2vw,105px); font-weight: 400; line-height: .92; letter-spacing: -.06em; }
.case-copy h3 { margin: 0 0 35px; font-size: clamp(20px,2vw,32px); font-weight: 700; }
.case-copy p { max-width: 620px; margin: 0 0 22px; font-size: clamp(15px,1.2vw,21px); font-weight: 700; line-height: 1.45; }
.case-copy dl { display: grid; grid-template-columns: 125px 1fr; gap: 14px; max-width: 620px; margin: 44px 0 0; padding-top: 22px; border-top: 1px solid rgba(0,0,0,.24); font-size: 15px; }
.case-copy dt { font-weight: 700; }
.case-copy dd { margin: 0; }
.case-copy .stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; }
.case-copy .stats span { font-size: 14px; }
.case-copy .stats strong { display: block; font-size: 31px; font-weight: 400; }
.case-media { align-self: center; min-width: 0; }
.case-media video, .case-media img { width: 100%; max-height: 72vh; object-fit: contain; background: #111; box-shadow: 0 18px 55px rgba(0,0,0,.13); }
.case-layout:has(.absurd-showcase) { grid-template-columns: minmax(250px,.42fr) minmax(0,1.58fr); align-items: start; }
.case-layout:has(.absurd-showcase) .case-media { align-self: start; }
.case-layout:has(.collection-showcase),.case-layout:has(.experiment-grid),.case-layout:has(.onset-showcase),.case-layout:has(.campus-showcase) { grid-template-columns: minmax(250px,.42fr) minmax(0,1.58fr); align-items: start; }
.case-layout:has(.collection-showcase) .case-media,.case-layout:has(.experiment-grid) .case-media,.case-layout:has(.onset-showcase) .case-media,.case-layout:has(.campus-showcase) .case-media { align-self: start; }
.absurd-showcase { display: grid; gap: 34px; padding-bottom: 60px; }
.film-case { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(210px,.55fr); gap: 24px; padding: clamp(24px,3vw,42px); background: rgba(255,255,255,.22); border: 1px solid rgba(0,0,0,.16); }
.film-case header { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.film-case header span { font: 700 13px/1 var(--sans); letter-spacing: .1em; }
.film-case header h3 { margin: 0; font-size: clamp(34px,4vw,68px); font-weight: 400; line-height: .95; }
.film-case-stats { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 12px 28px; padding-bottom: 8px; }
.film-case-stats b { font-size: clamp(22px,2vw,34px); font-weight: 400; }
.film-case-stats i { display: block; margin-top: 3px; font: 400 12px/1 var(--sans); }
.film-case video { align-self: start; }
.film-case figure, .account-proof figure { margin: 0; }
.film-case .data-proof img { width: auto; max-width: 100%; max-height: 66vh; margin: auto; background: #ececec; }
.film-case .asset-proof { grid-column: 1/-1; }
.film-case .asset-proof img { max-height: none; }
.film-case figcaption, .account-proof figcaption { padding-top: 8px; font: 700 12px/1.25 var(--sans); letter-spacing: .03em; }
.account-proof { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; padding: clamp(24px,3vw,42px); background: rgba(255,255,255,.22); border: 1px solid rgba(0,0,0,.16); }
.account-proof h3 { grid-column: 1/-1; margin: 0 0 8px; font-size: clamp(30px,3vw,52px); font-weight: 400; }
.account-proof img { max-height: 64vh; }
.collection-showcase { display: grid; gap: 34px; padding-bottom: 60px; }
.collection-item { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(180px,.55fr); gap: 24px; padding: clamp(24px,3vw,42px); background: rgba(255,255,255,.22); border: 1px solid rgba(0,0,0,.16); }
.collection-item header { grid-column: 1/-1; }
.collection-item header span { font: 700 13px/1 var(--sans); letter-spacing: .08em; }
.collection-item header h3 { margin: 8px 0 10px; font-size: clamp(34px,4vw,68px); font-weight: 400; line-height: .95; }
.collection-item header p { max-width: 680px; margin: 0; font: 700 clamp(14px,1.1vw,18px)/1.45 var(--sans); }
.collection-item .film-case-stats { grid-column: 2; align-content: start; padding: 20px; border: 1px solid rgba(0,0,0,.14); }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: clamp(24px,3vw,42px); background: rgba(255,255,255,.22); border: 1px solid rgba(0,0,0,.16); }
.evidence-grid h3 { grid-column: 1/-1; margin: 0 0 8px; font-size: clamp(30px,3vw,52px); font-weight: 400; }
.evidence-grid figure,.experiment-grid figure,.onset-grid figure,.campus-showcase figure { margin: 0; }
.evidence-grid figcaption,.experiment-grid figcaption,.onset-grid figcaption,.campus-showcase figcaption { padding-top: 8px; font: 700 12px/1.25 var(--sans); letter-spacing: .03em; }
.experiment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: clamp(24px,3vw,42px); background: rgba(255,255,255,.22); border: 1px solid rgba(0,0,0,.16); }
.experiment-grid video { aspect-ratio: 16/9; object-fit: cover; }
.onset-showcase { display: grid; gap: 28px; padding: clamp(24px,3vw,42px); background: rgba(255,255,255,.22); border: 1px solid rgba(0,0,0,.16); }
.onset-showcase > header { padding-bottom: 22px; border-bottom: 1px solid rgba(0,0,0,.16); }
.onset-showcase > header h3 { margin: 0 0 8px; font-size: clamp(30px,3vw,52px); font-weight: 400; }
.onset-showcase > header p { margin: 0; font: 700 14px/1.4 var(--sans); }
.onset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.onset-grid img { width: 100%; height: clamp(260px,34vw,560px); max-height: none; object-fit: cover; object-position: center; }
.onset-grid figure:nth-child(3n) { grid-column: 1/-1; }
.onset-grid figure:nth-child(3n) img { height: auto; max-height: 72vh; object-fit: contain; }
.campus-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: clamp(24px,3vw,42px); background: rgba(255,255,255,.22); border: 1px solid rgba(0,0,0,.16); }
.campus-showcase video { aspect-ratio: 9/16; max-height: 72vh; object-fit: contain; }
.audio-case { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.audio-row { display: grid; grid-template-columns: 35px 1fr; align-content: start; gap: 16px 12px; min-width: 0; padding: 24px; background: rgba(255,255,255,.28); border: 1px solid rgba(0,0,0,.16); }
.audio-row:last-child { border: 1px solid rgba(0,0,0,.16); }
.audio-row span { display: block; font-size: 18px; }
.audio-row p { margin: 7px 0 4px; font: 700 13px/1.45 var(--sans); opacity: .68; }
.audio-row audio { grid-column: 1/-1; align-self: end; width: 100%; height: 54px; margin-top: auto; }

/* Project pages share the catalogue's dark Shader visual system. */
.case-intro { background: rgba(12,12,20,.76); border-color: rgba(255,255,255,.15); box-shadow: 0 20px 70px rgba(0,0,0,.18); }
.case-title h2 { font-weight: 650; letter-spacing: -.045em; }
.case-title > span,.case-index,.case-meta,.module-kicker,.film-case header span { color: #f3f0e5; }
.case-meta dl { border-color: rgba(255,255,255,.16); }
.case-meta > p,.case-meta dd { color: rgba(243,240,229,.74); }
.media-module { background: #101018; border-color: rgba(255,255,255,.14); box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.module-kicker { color: rgba(243,240,229,.82); border-color: rgba(255,255,255,.13); }
.media-module figcaption { color: rgba(243,240,229,.72); border-color: rgba(255,255,255,.12); }
.film-case,.account-proof,.collection-item,.evidence-grid,.experiment-grid,.onset-showcase,.campus-showcase { background: rgba(12,13,22,.72); border-color: rgba(255,255,255,.14); box-shadow: 0 22px 70px rgba(0,0,0,.18); }
.film-case header h3,.account-proof h3,.collection-item header h3,.evidence-grid h3,.onset-showcase > header h3 { font-weight: 650; letter-spacing: -.035em; }
.onset-showcase > header { border-color: rgba(255,255,255,.14); }
.collection-item .film-case-stats { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.035); }
.audio-row { grid-template-rows: minmax(150px,1fr) auto; min-height: 270px; background: rgba(12,13,22,.76); border-color: rgba(255,255,255,.14); box-shadow: 0 18px 48px rgba(0,0,0,.18); }
.audio-row:last-child { border-color: rgba(255,255,255,.14); }
.audio-row p { color: rgba(243,240,229,.66); }
.film-case-stats b,.case-meta .stats span { position: relative; min-height: 48px; padding-left: 46px; }
.stat-icon { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; color: #f3f0e5; background: rgba(108,124,189,.16); border: 1px solid rgba(116,206,220,.55); border-radius: 50%; font: 500 19px/1 var(--sans); }
.film-case-stats i { color: rgba(243,240,229,.62); }
.data-proof.media-module { width: min(100%,380px); justify-self: center; }
.data-proof .media-viewport { display: grid; place-items: center; min-height: 260px; padding: 18px; }
.account-proof .media-module { width: 100%; }

@media (max-width: 1100px) {
  .case-intro { grid-template-columns: 58px 1fr; gap: 22px; }
  .case-meta { grid-column: 1/-1; padding-top: 8px; }
  .case-title h2 { font-size: clamp(50px,8.5vw,78px); }
  .film-case,.collection-item { grid-template-columns: 1fr; }
  .film-case header,.film-case-stats,.film-case .asset-proof,.collection-item header,.collection-item .film-case-stats { grid-column: 1; }
  .evidence-grid,.experiment-grid,.onset-grid,.campus-showcase { grid-template-columns: 1fr; }
  .evidence-grid h3,.onset-grid figure:nth-child(3n) { grid-column: 1; }
  .film-case .asset-proof img { max-height: none; }
  .onset-grid img { height: auto; max-height: 72vh; object-fit: contain; }
}

@media (max-width: 800px) {
  :root { --card-w: min(82vw,430px); }
  .boot-screen { width: 94vw; border-radius: 26px; }
  .boot-logo { gap: 18px; }
  .loading-bar { width: 70vw; height: 38px; border-width: 3px; }
  .catalogue { border-radius: 24px; }
  .site-header { height: 66px; padding: 0 18px; grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .brand b { font-size: 23px; }
  .lunar-emblem { width: 30px; }
  .project-heading { top: 15.5%; }
  .project-heading h1 { font-size: clamp(43px,12vw,66px); }
  .project-heading p { margin-top: 12px; }
  .film-window { top: 37%; left: -18vw; width: 136vw; height: 53%; }
  .frame { padding: 34px 8px; }
  .frame::before,.frame::after { height: 15px; background: repeating-linear-gradient(90deg,transparent 0 9px,rgba(232,231,220,.94) 9px 23px,transparent 23px 34px); }
  .frame::before { top: 8px; }
  .frame::after { bottom: 8px; }
  .arrow { bottom: 4%; width: 45px; height: 45px; }
  .dots { bottom: 5.5%; gap: 8px; }
  .dots button { width: 7px; height: 7px; border-width: 1px; }
  .sheet-header { height: 68px; padding: 0 16px; }
  .case-page { padding: 40px 20px 60px; }
  .case-intro { grid-template-columns: 48px 1fr; gap: 20px 14px; padding-bottom: 40px; }
  .case-index { font-size: 25px; }
  .case-title h2 { font-size: clamp(48px,14vw,76px); }
  .case-meta { grid-column: 1/-1; padding-top: 14px; }
  .case-meta dl { grid-template-columns: 88px 1fr; }
  .case-page > .case-media { margin-top: 48px; }
  .image-viewer { padding: 64px 14px 20px; }
  .image-viewer > button { top: 12px; right: 12px; }
  .case-layout { grid-template-columns: 1fr; padding: 46px 20px 60px; gap: 38px; }
  .case-layout:has(.absurd-showcase) { grid-template-columns: 1fr; }
  .case-layout:has(.collection-showcase),.case-layout:has(.experiment-grid),.case-layout:has(.onset-showcase),.case-layout:has(.campus-showcase) { grid-template-columns: 1fr; }
  .case-copy h2 { font-size: clamp(50px,16vw,78px); }
  .case-media { grid-row: 1; }
  .case-media video,.case-media img { max-height: 46vh; }
  .absurd-showcase { gap: 54px; }
  .film-case { grid-template-columns: 1fr; }
  .film-case header,.film-case-stats,.film-case .asset-proof { grid-column: 1; }
  .film-case .asset-proof img { max-height: none; }
  .account-proof { grid-template-columns: 1fr; }
  .account-proof h3 { grid-column: 1; }
  .collection-showcase { gap: 54px; }
  .collection-item { grid-template-columns: 1fr; }
  .collection-item header,.collection-item .film-case-stats { grid-column: 1; }
  .evidence-grid,.experiment-grid,.onset-grid,.campus-showcase { grid-template-columns: 1fr; }
  .audio-case { grid-template-columns: 1fr; }
  .evidence-grid h3,.onset-grid figure:nth-child(3n) { grid-column: 1; }
  .onset-grid img { height: auto; max-height: 62vh; object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms!important; transition-duration: .01ms!important; }
}