/* ═══ Vertical Rectangle · the shelf ═══
   The brand shape is the interface: every project is a 1:2 vertical rectangle
   standing on a bookcase. Spines open in place; the open spine morphs into its page.
   Light: Rosé Pine Dawn. Dark: strict 1-bit. Rect stands in the room and never speaks. */

:root {
  --wrap: 1200px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --b3: 3px solid var(--ink);
  --b4: 4px solid var(--ink);
  --bar-h: 72px;
  --spine-w: 124px;
  --spine-h: 272px;
  --spine-open: 400px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.label { font: 600 12px/1.25 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.page { scroll-margin-top: var(--bar-h); }
section[id] { scroll-margin-top: calc(var(--bar-h) + 12px); }

.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px;
  border: var(--b3); background: var(--surface); color: var(--ink);
  font: 800 15px/1 'Inter', sans-serif; letter-spacing: -0.005em; text-decoration: none;
  box-shadow: 5px 5px 0 var(--ink); transition: transform .1s ease, box-shadow .1s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.btn--ink { background: var(--ink); color: var(--bg); }

/* ── Top bar ── */
.bar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: var(--b4); }
.bar-in { display: flex; align-items: center; gap: 28px; height: var(--bar-h); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand svg.logo { width: 36px; height: 36px; }
.brand .wordmark { font-size: 18px; line-height: 1; }
.nav { display: flex; gap: 26px; list-style: none; }
.nav a {
  position: relative; display: block; padding: 6px 0; color: var(--ink); text-decoration: none;
  font: 700 15px/1 'Inter', sans-serif; letter-spacing: -0.005em;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: var(--b3);
  background: var(--surface); color: var(--ink); font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 3px 3px 0 var(--ink);
}
.toggle::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* ═══ Hero: the wordmark and a vertical screen ═══ */
.hero { border-bottom: var(--b4); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; padding-top: 56px; }
.hero-copy { padding-bottom: 72px; }
.hero-copy svg.logo { width: 72px; height: 72px; margin-bottom: 30px; }
.hero h1 { font-size: clamp(50px, 7.6vw, 104px); }
.hero-tag { margin-top: 22px; font-size: clamp(20px, 2vw, 26px); font-weight: 400; letter-spacing: -0.015em; color: var(--subtle); }
.hero-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

.stagefloor { display: flex; align-items: flex-end; gap: 18px; }
.monolith {
  position: relative; width: 264px; aspect-ratio: 1 / 2; background: #000;
  border: var(--b4); box-shadow: 12px 12px 0 var(--ink); margin-bottom: 0;
}
.monolith video { width: 100%; height: 100%; object-fit: cover; }
.monolith figcaption { position: absolute; left: -4px; right: -4px; top: calc(100% + 4px); padding: 8px 0; }
.hero-rect { width: 170px; height: auto; aspect-ratio: 200 / 240; margin-bottom: -18px; }
:root:not([data-theme='dark']) .hero-rect { --r-body: var(--gold); --r-a1: var(--rose); }

/* ═══ Bookcase ═══ */
.sec { padding: 88px 0 24px; }
.sec-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; }
.sec-head h2 { font-size: clamp(36px, 4.6vw, 58px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.sec-head p { color: var(--subtle); font-size: 18px; }
.sec-head .label { margin-left: auto; color: var(--subtle); }

.case { border: var(--b4); background: var(--overlay); box-shadow: 10px 10px 0 var(--ink); padding: 22px 22px 0; }
.shelf {
  position: relative; list-style: none; display: flex; align-items: flex-end; gap: 12px;
  padding: 34px 6px 0; border-bottom: 12px solid var(--ink); margin-bottom: 22px; min-height: calc(var(--spine-h) + 34px); overflow: hidden;
}
.shelf:last-child { margin-bottom: 0; }

.spine {
  --c: var(--gold);
  position: relative; flex: 0 0 var(--spine-w); height: var(--spine-h);
  background: var(--c); border: var(--b3); border-bottom-width: 0; overflow: hidden;
  box-shadow: 5px 0 0 var(--ink);
  transform-origin: 50% 100%;
  transition: flex-basis .5s cubic-bezier(.3,.8,.2,1), transform .28s cubic-bezier(.3,.8,.2,1);
}
:is(.spine, .name-spine, .book, .dhead).c-gold { --c: var(--gold); } :is(.spine, .name-spine, .book, .dhead).c-rose { --c: var(--rose); } :is(.spine, .name-spine, .book, .dhead).c-foam { --c: var(--foam); }
:is(.spine, .name-spine, .book, .dhead).c-iris { --c: var(--iris); } :is(.spine, .name-spine, .book, .dhead).c-love { --c: var(--love); } :is(.spine, .name-spine, .book, .dhead).c-pine { --c: var(--pine); }
.spine:not(.is-open):hover, .spine:not(.is-open):focus-within { transform: translateY(-14px); }
.spine:not(.is-open):hover + .spine:not(.is-open) { transform: rotate(-2.5deg); transform-origin: 0 100%; }
.spine:not(.is-open):has(+ .spine:not(.is-open):hover) { transform: rotate(2.5deg); transform-origin: 100% 100%; }
.spine.is-open { flex-basis: var(--spine-open); height: auto; min-height: var(--spine-h); }
/* Opening a spine makes room: the furniture steps aside and the closed spines may narrow a little. */
.shelf:has(.is-open) :is(.bookend, .ornament) { display: none; }
.shelf:has(.is-open) .spine:not(.is-open) { flex-shrink: 1; min-width: 96px; }

.spine-face {
  position: absolute; inset: 0; width: 100%; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit;
}
.spine-face:focus-visible { outline-offset: -8px; }
.spine .no { position: absolute; left: 10px; top: 10px; padding: 4px 6px; background: var(--surface); border: 2px solid var(--ink); font: 600 11px/1 var(--mono); }
.spine .plate {
  position: absolute; left: 50%; top: 46px; bottom: 54px; transform: translateX(-50%);
  writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px 7px; background: var(--surface); border: var(--b3); max-width: calc(100% - 26px);
  font: 900 15px/1.08 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .01em;
  transition: opacity .2s ease;
}
.spine .glyph { position: absolute; left: 50%; bottom: 10px; width: 38px; height: 38px; margin-left: -19px; padding: 5px; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); }
.spine .glyph svg { display: block; width: 100%; height: 100%; }
.spine .x { position: absolute; right: 12px; top: 10px; font: 700 18px/1 'Inter', sans-serif; visibility: hidden; }
.spine.is-open .spine-face { bottom: auto; height: 52px; }
.spine.is-open .plate, .spine.is-open .glyph { visibility: hidden; }
.spine.is-open .x { visibility: visible; }

.spine-body {
  position: absolute; left: 0; top: 52px; bottom: 0; width: calc(var(--spine-open) - 6px);
  background: var(--surface); border-top: var(--b3); padding: 16px 18px; display: flex; flex-direction: column; gap: 9px;
  visibility: hidden;
}
/* Open, the body sits in the flow, so the spine grows to hold all of it. */
.spine.is-open .spine-body {
  position: relative; top: 0; bottom: auto; margin-top: 52px; min-height: calc(var(--spine-h) - 52px);
  visibility: visible; animation: unfold .45s cubic-bezier(.3,.8,.2,1) .1s both;
}
@keyframes unfold { from { transform: translateY(100%); } }
.spine-body h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.spine-body p { font-size: 15px; line-height: 1.45; color: var(--subtle); }
.spine-body .meta { margin-top: auto; color: var(--ink); }
.spine-body a { align-self: flex-start; font-weight: 800; color: var(--ink); text-decoration: none; border-bottom: 3px solid currentColor; }

/* The feature spine: the newest project, pulled out of the row, its video playing in its own spine. */
.shelf:has(.spine--feature) { padding-top: 52px; }
.spine--feature { flex-basis: calc(var(--spine-w) * 1.3); height: calc(var(--spine-h) + 26px); box-shadow: 8px 0 0 var(--ink); }
.spine--feature.is-open { flex-basis: var(--spine-open); min-height: calc(var(--spine-h) + 26px); }
.spine--feature.is-open .spine-body { min-height: calc(var(--spine-h) - 26px); }
.spine-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.spine--feature .plate { top: auto; bottom: 58px; left: 10px; right: 10px; max-width: none; transform: none; writing-mode: horizontal-tb; padding: 7px 8px; font-size: 18px; }
.spine--feature .glyph { background: var(--ink); color: var(--surface); }
.spine--feature .x { padding: 3px 6px; background: var(--surface); border: 2px solid var(--ink); }
.sticker {
  --burst: polygon(50% 0%, 57.6% 11.7%, 69.1% 3.8%, 71.7% 17.6%, 85.4% 14.6%, 82.4% 28.3%, 96.2% 30.9%, 88.3% 42.4%, 100% 50%, 88.3% 57.6%, 96.2% 69.1%, 82.4% 71.7%, 85.4% 85.4%, 71.7% 82.4%, 69.1% 96.2%, 57.6% 88.3%, 50% 100%, 42.4% 88.3%, 30.9% 96.2%, 28.3% 82.4%, 14.6% 85.4%, 17.6% 71.7%, 3.8% 69.1%, 11.7% 57.6%, 0% 50%, 11.7% 42.4%, 3.8% 30.9%, 17.6% 28.3%, 14.6% 14.6%, 28.3% 17.6%, 30.9% 3.8%, 42.4% 11.7%);
  position: absolute; right: 6px; top: 6px; width: 64px; height: 64px; display: grid; place-items: center; isolation: isolate;
  background: var(--gold); clip-path: var(--burst); color: var(--surface);
  font: 900 13px/1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .02em;
  transform: rotate(12deg); animation: sticker 2.4s cubic-bezier(.5, 0, .5, 1) infinite;
}
.sticker::after { content: ""; position: absolute; inset: 5px; z-index: -1; background: var(--ink); clip-path: var(--burst); }
@keyframes sticker { 50% { transform: rotate(-8deg) scale(1.1); } }
.spine.is-open .sticker { visibility: hidden; }

/* Bookcase furniture: Rect as a bookend, a sphere on a stand, horizontal rectangles lying down. */
.bookend { flex: 0 0 auto; width: calc(var(--spine-h) * .833); height: var(--spine-h); align-self: flex-end; }
.bookend svg { width: 100%; height: 100%; }
:root:not([data-theme='dark']) .bookend { --r-body: var(--foam); }
.ornament { margin-left: auto; align-self: flex-end; display: flex; align-items: flex-end; gap: 16px; padding-right: 10px; }
.ornament svg { display: block; overflow: visible; }
.orb { fill: var(--gold); stroke: var(--ink); stroke-width: 3; }
.orb-stand { fill: var(--ink); }
.slab { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.slab.s2 { fill: var(--rose); } .slab.s3 { fill: var(--pine); }
:root[data-theme='dark'] .orb { fill: url(#d-dots); stroke: #fff; }
:root[data-theme='dark'] .slab { fill: #000; stroke: #fff; }
:root[data-theme='dark'] .slab.s2 { fill: url(#d-hatch); }

/* Dark: every spine is black; pattern tells them apart. */
:root[data-theme='dark'] .case { background: #000; }
:root[data-theme='dark'] :is(.spine, .name-spine, .book) { background-color: #000; background-image: var(--pat); background-size: var(--pat-s, auto); }
:root[data-theme='dark'] :is(.name-spine .plate, .book span) { background: #000; }
:is(.spine, .name-spine, .book, .dhead).c-gold { --pat: radial-gradient(#fff 1.3px, transparent 1.7px); --pat-s: 7px 7px; }
:is(.spine, .name-spine, .book, .dhead).c-rose { --pat: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 8px); }
:is(.spine, .name-spine, .book, .dhead).c-foam { --pat: radial-gradient(#fff 2px, transparent 2.4px); --pat-s: 12px 12px; }
:is(.spine, .name-spine, .book, .dhead).c-iris { --pat: repeating-linear-gradient(0deg, #fff 0 2px, transparent 2px 7px); }
:is(.spine, .name-spine, .book, .dhead).c-love { --pat: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 7px); }
:is(.spine, .name-spine, .book, .dhead).c-pine { --pat: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0); --pat-s: 6px 6px; }

/* ═══ Research: papers standing on the desk ═══ */
.papers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.paper {
  display: flex; flex-direction: column; gap: 14px; min-height: 440px; padding: 30px 30px 26px;
  background: var(--surface); border: var(--b3); box-shadow: 8px 8px 0 var(--ink); color: var(--ink); text-decoration: none;
  transform: rotate(var(--r, 0deg)); transition: transform .3s cubic-bezier(.3,.8,.2,1), box-shadow .3s;
}
.paper:nth-child(1) { --r: -1.2deg; }
.paper:nth-child(2) { --r: 1deg; margin-top: 34px; }
a.paper:hover { transform: rotate(0) translate(-3px, -3px); box-shadow: 12px 12px 0 var(--ink); }
.paper .label { padding-bottom: 12px; border-bottom: var(--b3); display: flex; justify-content: space-between; }
.paper h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.paper p { font-size: 17px; line-height: 1.55; color: var(--subtle); }
.paper dl { margin-top: auto; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding-top: 14px; border-top: var(--b3); }
.paper dt { font: 600 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--subtle); }
.paper dd { font-size: 14px; font-weight: 600; }

/* ═══ Artists: one shelf per artist; every photo stands on its own name plate ═══ */
.artist + .artist { margin-top: 56px; }
.artist-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
.artist-head h3 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.artist-head .label { color: var(--subtle); }
.artist-head p { flex-basis: 100%; font-size: 17px; color: var(--subtle); max-width: 62ch; }
.artist-head p a { color: var(--link); }
.artist-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 6px; }
.artist-links a { display: inline-block; padding: 6px 10px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); text-decoration: none; font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.artist-links a:hover { background: var(--ink); color: var(--bg); }

.shelf--artist { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; min-height: 0; padding-top: 22px; }
.shelf--artist > li { flex: none; }
.name-spine {
  --c: var(--gold);
  position: relative; width: 92px; height: var(--spine-h); background: var(--c);
  border: var(--b3); border-bottom-width: 0; box-shadow: 5px 0 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.name-spine .plate {
  writing-mode: vertical-rl; padding: 10px 7px; background: var(--surface); border: var(--b3); max-height: calc(100% - 32px);
  font: 900 16px/1.05 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .01em; text-align: center;
}
.book { --c: var(--rose); width: 70px; height: var(--h, 230px); background: var(--c); border: var(--b3); border-bottom-width: 0; box-shadow: 5px 0 0 var(--ink); display: flex; align-items: center; justify-content: center; }
.book span { writing-mode: vertical-rl; padding: 8px 5px; background: var(--surface); border: 2px solid var(--ink); font: 600 11px/1.1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.book.lean { transform: rotate(-9deg); transform-origin: 100% 100%; margin-left: 16px; }

.sleeve, .member { display: flex; flex-direction: column; background: var(--surface); border: var(--b3); border-bottom-width: 0; box-shadow: 5px 0 0 var(--ink); transition: transform .25s cubic-bezier(.3,.8,.2,1); }
.sleeve:hover, .member:hover { transform: translateY(-10px); }
.sleeve { width: 184px; }
.sleeve img { width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: var(--b3); }
.sleeve figcaption { padding: 9px 10px; }
.member { width: 176px; }
.member figcaption { padding: 10px 11px 12px; display: grid; gap: 4px; }
.member b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.member .role { font-size: 13px; line-height: 1.35; color: var(--subtle); }
.member .ml { display: flex; gap: 10px; margin-top: 4px; }
.member .ml a { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }

.skim { position: relative; aspect-ratio: 3 / 4; border-bottom: var(--b3); overflow: hidden; touch-action: pan-y; cursor: ew-resize; background: #000; }
.skim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.skim img.on { visibility: visible; }
.skim-ticks { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.skim-ticks i { flex: 1; height: 5px; background: var(--surface); border: 2px solid var(--ink); }
.skim-ticks i.on { background: var(--ink); border-color: var(--surface); }
.shelf--artist .bookend { height: 190px; width: 158px; }

/* Depravity: one closed box set on the shelf; opening it pulls a drawer of members out below. */
.artist[id] { scroll-margin-top: calc(var(--bar-h) + 16px); }
.shelf--artist { margin-bottom: 0; }
.box {
  --c: var(--iris);
  position: relative; display: block; width: 380px; height: 214px; padding: 0; cursor: pointer; text-align: left;
  color: var(--ink); font: inherit; background: var(--c); border: var(--b3); border-bottom-width: 0; box-shadow: 5px 0 0 var(--ink);
  transition: transform .25s cubic-bezier(.3,.8,.2,1);
}
.box:hover, .box[aria-expanded="true"] { transform: translateY(-10px); }
.box-lid {
  position: absolute; left: -3px; right: -3px; top: -3px; height: 34px; background: var(--surface); border: var(--b3);
  transform-origin: 0 100%; transition: transform .45s cubic-bezier(.3,1.4,.5,1);
}
.box[aria-expanded="true"] .box-lid { transform: translate(6px, -18px) rotate(-7deg); }
.box-face { position: absolute; inset: 46px 14px 14px; background: var(--surface); border: var(--b3); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.box-face b { font: 900 34px/1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: -0.02em; }
.box-face .label { color: var(--subtle); }
.tabs { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.tabs i { font: 600 11px/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; border: 2px solid var(--ink); }
:root[data-theme='dark'] .box { background-color: #000; background-image: repeating-linear-gradient(0deg, #fff 0 2px, transparent 2px 7px); }
:root[data-theme='dark'] :is(.box-lid, .box-face) { background: #000; }
.shelf--artist .bookend.small { height: 170px; width: 142px; }

.drawer { display: none; }
.drawer.is-open { display: block; animation: pull .45s cubic-bezier(.3,.8,.2,1); }
@keyframes pull { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.drawer-in { overflow: hidden; }
.shelf--drawer { margin-top: 22px; border-top: var(--b3); padding-top: 26px; }
.drawer.is-open .member { animation: rise .5s cubic-bezier(.3,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes rise { from { transform: translateY(105%); } }

/* ═══ Footer ═══ */
.footer { margin-top: 110px; border-top: var(--b4); }
.footer-in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding: 64px 28px 54px; }
.footer h2 { font-size: clamp(36px, 4.6vw, 58px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 22px; }
.mail { display: inline-block; font-size: clamp(22px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; border-bottom: 5px solid currentColor; }
.footer .socials { margin-top: 20px; display: flex; gap: 14px; }
.footer .brand-end { text-align: right; }
.footer .brand-end svg.logo { width: 54px; height: 54px; margin-left: auto; margin-bottom: 14px; }
.footer .brand-end .wordmark { font-size: 24px; }
.footer .brand-end p { margin-top: 10px; color: var(--subtle); }

/* ═══ Detail pages ═══ */
.back { display: inline-block; margin: 36px 0 22px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 3px solid currentColor; }
/* The page header wears its spine's colour as a frame; the words sit on a panel so every colour reads. */
.dhead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: stretch;
  background: var(--c, var(--gold)); border: var(--b4); box-shadow: 12px 12px 0 var(--ink); padding: 22px;
}
.dhead > div { background: var(--surface); border: var(--b3); padding: 26px 30px 30px; }
.dhead .no { display: inline-block; padding: 5px 8px; background: var(--surface); border: 2px solid var(--ink); font: 600 12px/1 var(--mono); }
.dhead h1 { margin-top: 22px; font-size: clamp(44px, 7vw, 92px); font-weight: 900; letter-spacing: -0.045em; line-height: .92; }
.dhead p { margin-top: 18px; max-width: 34ch; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.35; }
.dhead .hero-links { margin-top: 26px; }
.dhead .kicker { display: block; margin-top: 14px; }
.dhead .plate {
  writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; padding: 14px 12px;
  background: var(--surface); border: var(--b3); font: 900 22px/1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .02em;
}
:root[data-theme='dark'] .dhead { background-color: #000; background-image: var(--pat); background-size: var(--pat-s, auto); }
:root[data-theme='dark'] .dhead > div { background: #000; }

.reel { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 34px; margin-top: 70px; align-items: start; }
.reel .monolith { width: 100%; }
.loops { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.loops video { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--b3); background: #000; }
.viewer { border: var(--b4); background: var(--surface); box-shadow: 10px 10px 0 var(--ink); }
.viewer-img { aspect-ratio: 1237 / 1180; background: #000; border-bottom: var(--b3); overflow: hidden; }
.viewer-img img { width: 100%; height: 100%; object-fit: cover; }
.viewer-img img.swap { animation: swap .38s cubic-bezier(.3,1.3,.5,1); }
@keyframes swap { from { transform: scale(1.06); } }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); }
.thumbs button { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-right: var(--b3); background: var(--surface); color: var(--ink); cursor: pointer; font: 600 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; text-align: left; }
.thumbs button:last-child { border-right: 0; }
.thumbs button img { width: 46px; height: 44px; object-fit: cover; border: 2px solid var(--ink); flex: none; }
.thumbs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.copy { max-width: 68ch; margin: 80px auto 0; font-size: 20px; line-height: 1.65; }
.spec { width: 100%; max-width: 760px; margin: 64px auto 0; border-collapse: collapse; border: var(--b4); background: var(--surface); box-shadow: 10px 10px 0 var(--ink); }
.spec th, .spec td { border: var(--b3); padding: 15px 18px; text-align: left; }
.spec th { width: 34%; background: var(--ink); color: var(--bg); font: 600 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.spec td { font-size: 17px; font-weight: 600; }
.ends { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 760px; margin: 52px auto 0; }

/* ═══ Detail: mk-mmd (the video, the exported scene beside it) ═══ */
.sound { width: 100%; justify-content: center; margin-top: 26px; }
.sound[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.caption { margin-top: 14px; text-align: center; color: var(--subtle); }
.stage-frame { border: var(--b4); background: var(--surface); box-shadow: 10px 10px 0 var(--ink); }
.stage-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: var(--b3); background: var(--ink); color: var(--bg); }
.stage-frame iframe { display: block; width: 100%; height: 640px; border: 0; background: var(--surface); }
.spec--credits { margin-top: 40px; }
.spec--credits caption { padding: 0 0 10px; text-align: left; }
.spec--credits a { color: inherit; }
.copy code { font: 600 .88em var(--mono); }

/* ═══ Detail: a clip ═══ */
.clip { max-width: 560px; margin: 70px auto 0; border: var(--b4); box-shadow: 12px 12px 0 var(--ink); background: #000; }
.clip video { width: 100%; aspect-ratio: 1; }

/* ═══ Detail: A Digital Prayer (the article, its figures drawn through tokens) ═══ */
.reel--dp { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; }
.reel--dp .copy { margin-top: 0; font-size: 19px; }
.reel--dp .spec { margin: 44px 0 0; }
.dp-render { border: var(--b4); box-shadow: 12px 12px 0 var(--ink); background: var(--surface); }
.dp-render img { width: 100%; height: auto; }
.dp-render figcaption { padding: 10px 12px; border-top: var(--b3); }
.dp { max-width: 820px; margin: 0 auto; }
.adp-figure { margin-top: 72px; }
.adp-figure + .adp-figure { margin-top: 36px; }
.adp-fig-frame {
  --dp-amber: var(--gold); --dp-red: var(--love); --dp-strap: var(--rose); --dp-screen: var(--ink); --dp-fill: var(--overlay); --dp-mid: var(--muted);
  border: var(--b4); background: var(--surface); box-shadow: 10px 10px 0 var(--ink); padding: 18px; color: var(--ink);
}
.adp-fig-frame svg { display: block; width: 100%; height: auto; }
.adp-figcaption { margin-top: 20px; font: 600 12px/1.45 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.adp-s1 { stroke: currentColor; stroke-width: 1.4; fill: none; }
.adp-s05 { stroke: currentColor; stroke-width: .8; fill: none; opacity: .55; }
.adp-s03 { stroke: currentColor; stroke-width: .7; fill: none; opacity: .35; }
.adp-sd { stroke: currentColor; stroke-width: .8; fill: none; opacity: .45; stroke-dasharray: 4 3; }
.adp-lbl, .adp-lbl-a, .adp-lbl-r { font: 700 9px 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; fill: currentColor; }
.adp-lbl-a { fill: var(--dp-amber); }
.adp-lbl-r { fill: var(--dp-red); }
.adp-lbl-d { font: 600 8.5px 'Inter', sans-serif; letter-spacing: .08em; fill: var(--subtle); }
.adp-strap { stroke: var(--dp-strap); stroke-width: 2.2; fill: none; }
.adp-force { stroke: var(--dp-red); stroke-width: 1.3; fill: none; stroke-dasharray: 4 3; }
:root[data-theme='dark'] .adp-fig-frame { --dp-amber: #fff; --dp-red: #fff; --dp-strap: #fff; --dp-screen: #000; --dp-fill: #000; --dp-mid: #fff; }
:root[data-theme='dark'] .adp-fig-frame svg :is([opacity], .adp-s05, .adp-s03, .adp-sd) { opacity: 1; }
:root[data-theme='dark'] .adp-fig-frame svg [stroke-opacity] { stroke-opacity: 1; }
:root[data-theme='dark'] .adp-fig-frame svg [fill-opacity] { fill-opacity: 1; }
:root[data-theme='dark'] .adp-fig-frame svg .tint { display: none; }
:root[data-theme='dark'] .adp-fig-frame svg .tint-fill { fill: none !important; }
.adp-section { margin-top: 96px; padding-top: 30px; border-top: var(--b4); }
.adp-sec-no { display: inline-block; padding: 6px 9px; background: var(--ink); color: var(--bg); font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.adp-sec-header { margin-top: 20px; font-size: clamp(32px, 4.4vw, 52px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.adp-sec-sub { margin-top: 14px; max-width: 52ch; font-size: 20px; line-height: 1.4; font-weight: 600; }
.adp-body { max-width: 68ch; margin-top: 26px; font-size: 18.5px; line-height: 1.72; }
.adp-body + .adp-body { margin-top: 18px; }
:is(.adp-body, .adp-rules) strong { font-weight: 800; }
.adp-pull {
  margin-top: 40px; padding: 28px 32px; background: var(--surface); border: var(--b4); border-left: 16px solid var(--rose);
  box-shadow: 10px 10px 0 var(--ink); font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
}
.adp-cite { display: block; margin-top: 16px; font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.adp-litany { margin-top: 36px; padding: 34px 36px; background: var(--ink); color: var(--bg); font-size: 20px; line-height: 1.6; font-weight: 600; }
.adp-litany .cue { font: 600 11px/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .12em; }
.adp-amen { display: block; margin-top: 24px; font-size: 22px; font-weight: 900; letter-spacing: .06em; }
.adp-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; }
.adp-step { padding: 9px 12px; background: var(--surface); border: var(--b3); box-shadow: 4px 4px 0 var(--ink); font: 600 13px/1.3 var(--mono); }
.adp-arr { font-weight: 900; }
.adp-mini { margin-top: 48px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.adp-rules { margin-top: 20px; list-style: none; counter-reset: rule; background: var(--surface); border: var(--b3); }
.adp-rules li { position: relative; padding: 14px 18px 14px 62px; border-top: var(--b3); font-size: 17px; line-height: 1.55; counter-increment: rule; }
.adp-rules li:first-child { border-top: 0; }
.adp-rules li::before { content: counter(rule, decimal-leading-zero); position: absolute; left: 18px; top: 16px; font: 600 13px/1.2 var(--mono); }
.adp-bom { width: 100%; margin-top: 20px; border-collapse: collapse; background: var(--surface); border: var(--b4); box-shadow: 10px 10px 0 var(--ink); }
.adp-bom th { padding: 12px 14px; background: var(--ink); color: var(--bg); text-align: left; font: 600 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.adp-bom td { padding: 12px 14px; border-top: 2px solid var(--ink); font-size: 16px; }
.adp-bom .adp-price { text-align: right; white-space: nowrap; font-weight: 800; }
.adp-note { margin-top: 30px; font: 600 13px/1.5 var(--mono); }
.spec.spec--in { max-width: none; margin: 36px 0 0; }

/* ═══ Detail: research paper ═══ */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 64px; }
.ahead { background: var(--surface); border: var(--b3); box-shadow: 10px 10px 0 var(--ink); padding: 34px 36px 30px; }
.ahead .label { padding-bottom: 12px; border-bottom: var(--b3); display: flex; justify-content: space-between; gap: 12px; }
.ahead h1 { margin-top: 22px; font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; }
.ahead a { display: inline-block; margin-top: 20px; color: var(--link); font-weight: 600; }
.prose { max-width: 68ch; margin-top: 52px; font-size: 18.5px; line-height: 1.72; }
.prose p, .prose ol { margin-bottom: 1.1em; }
.prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { font: 600 .85em var(--mono); }
.prose h2 { font-size: 27px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin: 52px 0 14px; }
.prose code { font: 500 .86em var(--mono); background: var(--overlay); border: 2px solid var(--ink); padding: 1px 5px; }
.prose strong { font-weight: 700; }
.prose .lead { font-size: 23px; line-height: 1.45; font-weight: 500; border-left: 8px solid var(--ink); padding-left: 22px; margin: 30px 0 34px; }
.article .spec, .article .ends { margin-left: 0; }
.margin { position: sticky; top: calc(var(--bar-h) + 36px); align-self: start; }
.margin svg.rect { width: 100%; height: auto; aspect-ratio: 200 / 240; }
:root:not([data-theme='dark']) .margin { --r-body: var(--iris); }

/* ═══ Page transitions: site.js names the spine and its page header while it navigates ═══ */
html.vt-nav::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.3,.8,.2,1); }
html.vt-nav::view-transition-old(*), html.vt-nav::view-transition-new(*) { height: 100%; object-fit: cover; }
html.vt-nav::view-transition-old(root) { animation: vt-out .3s ease both; }
html.vt-nav::view-transition-new(root) { animation: vt-in .4s ease .1s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ═══ Mobile ═══ */
@media (max-width: 900px) {
  :root { --bar-h: 64px; --spine-w: 104px; --spine-h: 208px; --spine-open: 292px; }
  .wrap { padding: 0 16px; }
  .bar-in { gap: 10px; }
  .brand .wordmark { display: none; }
  .brand svg.logo { width: 30px; height: 30px; }
  .nav { gap: 11px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; margin-bottom: -4px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 13px; letter-spacing: -0.02em; white-space: nowrap; }
  .toggle { padding: 8px; font-size: 0; gap: 0; }
  .hero-in { grid-template-columns: 1fr; gap: 10px; padding-top: 34px; }
  .hero-copy { padding-bottom: 28px; }
  .hero-copy svg.logo { width: 54px; height: 54px; margin-bottom: 20px; }
  .stagefloor { justify-content: center; }
  .monolith { width: 180px; }
  .hero-rect { width: 110px; }
  .sec { padding-top: 64px; }
  .sec-head .label { margin-left: 0; }
  .case { padding: 14px 0 0; box-shadow: 6px 6px 0 var(--ink); }
  .shelf { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 30px 14px 0; }
  .spine { scroll-snap-align: center; }
  .spine .plate { font-size: 13px; }
  .spine--feature .plate { font-size: 16px; }
  .shelf:has(.is-open) .spine:not(.is-open) { flex-shrink: 0; }
  .ornament { display: none; }
  .papers { grid-template-columns: 1fr; }
  .sleeve { width: 150px; }
  .member { width: 156px; }
  .box { width: 216px; }
  .box-face b { font-size: 24px; }
  .shelf--artist .bookend.small { display: none; }
  .paper { min-height: 0; }
  .paper:nth-child(2) { margin-top: 0; }
  .footer-in { grid-template-columns: 1fr; padding: 48px 16px; }
  .footer .brand-end { text-align: left; }
  .footer .brand-end svg.logo { margin-left: 0; }
  .dhead { grid-template-columns: 1fr; padding: 12px; }
  .dhead > div { padding: 20px 20px 24px; }
  .dhead .plate { display: none; }
  .reel { grid-template-columns: 1fr; }
  .reel .monolith { width: 200px; margin: 0 auto; }
  .dp-render { max-width: 300px; margin: 0 auto; }
  .adp-section { margin-top: 72px; }
  .adp-body { font-size: 17px; }
  .adp-litany { padding: 26px 22px; font-size: 18px; }
  .adp-fig-frame { padding: 8px; }
  .adp-bom th, .adp-bom td { padding: 10px 8px; font-size: 14px; }
  .sound { display: flex; max-width: 200px; margin-inline: auto; }
  .copy { font-size: 18px; }
  .article { grid-template-columns: 1fr; }
  .margin { display: none; }
  .ahead { padding: 24px; }
  .thumbs button span { display: none; }
}