@font-face {
  font-family: Replica;
  src: url('/fonts/Replica Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #191717;
  --ink: #eee9df;
  --muted: #aaa39a;
  --fill: #191717;
  --accent: #eee9df;
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --sans: Replica, Arial, sans-serif;
  --ease: cubic-bezier(.22, .68, 0, 1);
  --D: clamp(340px, 35vw, 510px);
  --tilt: 52deg;
  --step: 170px;
  --focus: 40vh;
  --hero-x: -16vw;
  --hero-y: 52vh;
  --hero-s: 1.18;
  --hero-rx: 3deg;
  --hero-ry: -12deg;
  --sy: 0px;
  --count: 8;
}

* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html.is-open { overflow: hidden; }
body { margin: 0; color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { appearance: none; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
button:disabled { opacity: .3; cursor: default; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 7px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eyebrow { font: 12px/1.5 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font: 14px/1.4 var(--sans); }
.text-link > span { display: inline-block; transition: transform 220ms ease; }
.text-link:hover > span { transform: translate(2px, -2px); }

.atmosphere { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 48% 42%, #34272955, transparent 65%); }
/* The pulled-out disc's colour. Lives under the stage so the disc can animate out over it. */
.bg-fill { position: fixed; inset: 0; z-index: 1; background: var(--fill); opacity: 0; pointer-events: none; transition: opacity 550ms var(--ease) 150ms; }
#app[data-state='open'] .bg-fill { opacity: 1; transition-delay: 250ms; }
.masthead { position: fixed; z-index: 8; top: 0; left: 0; right: 0; padding: 31px 42px; display: flex; justify-content: space-between; align-items: flex-start; transition: opacity 300ms ease; }
.wordmark { display: inline-flex; gap: 15px; align-items: center; font-size: 31px; line-height: 1; letter-spacing: -.035em; }
.wordmark svg { width: 39px; height: 39px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.wordmark-subtitle { display: block; margin-top: 7px; font-size: 15px; font-style: italic; letter-spacing: 0; color: var(--muted); }
.masthead-meta { padding-top: 3px; display: flex; flex-direction: column; gap: 7px; font: 12px/1.4 var(--sans); text-align: right; }
.masthead-meta > span { color: var(--muted); }
.masthead-meta a span { margin-left: 8px; }

/* The native page scroll and the object stack share exactly the same offset. */
.scroll-track { height: calc(100svh + (var(--count) - 1) * var(--step)); pointer-events: none; }
.stage { position: fixed; inset: 0; z-index: 2; perspective: 2000px; perspective-origin: 48% 40%; pointer-events: none; }
.pile { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.disc {
  position: absolute; top: 0; left: 47%; width: var(--D); height: var(--D);
  margin: calc(var(--D) / -2) 0 0 calc(var(--D) / -2); border-radius: 50%;
  --px: 0px; --py: calc(var(--focus) + var(--i) * var(--step));
  --rx: var(--tilt); --ry: -5deg; --rz: var(--jitter, 0deg); --s: 1; --lift: 0px; --sheen: 200deg;
  transform: translate3d(var(--px), var(--py), 0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) translateZ(var(--lift)) scale(var(--s));
  transform-style: preserve-3d; transition: transform 700ms var(--ease), opacity 450ms ease;
  pointer-events: auto; user-select: none; -webkit-user-select: none;
}
.disc.is-hot { --px: 18px; --lift: 14px; transition-duration: 420ms, 450ms; }
.disc.is-open { --px: var(--hero-x); --py: calc(var(--hero-y) + var(--sy)); --rx: var(--hero-rx); --ry: var(--hero-ry); --rz: -4deg; --s: var(--hero-s); transition-duration: 1000ms, 450ms; }
.disc.is-settled { transition-duration: 250ms, 450ms; }
/* while one disc is out, the others sink a little as they fade */
#app[data-state='open'] .stage .disc:not(.is-open) { opacity: 0; --lift: -36px; pointer-events: none; }
#app[data-state='open'] .stage .disc.is-open { pointer-events: none; }
.disc:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.disc > i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 0 20%, var(--edge) 20.3%); transform: translateZ(calc(var(--k) * -.8px)); pointer-events: none; }
.face { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 0 12.4%, #88868155 12.6% 19%, #e7e5dbb0 19.3% 20%, var(--label) 20.3% 98.5%, #c3c0b1 99%); }
.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--art-pos, 50% 50%); border-radius: 50%; mask: radial-gradient(circle closest-side, transparent 0 20%, #000 20.3% 98%, transparent 98.7%); -webkit-mask: radial-gradient(circle closest-side, transparent 0 20%, #000 20.3% 98%, transparent 98.7%); opacity: 0; transition: opacity 300ms ease; }
.has-art .art { opacity: 1; }
.face::before, .face::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mask: radial-gradient(circle closest-side, transparent 0 12.4%, #000 12.7%); -webkit-mask: radial-gradient(circle closest-side, transparent 0 12.4%, #000 12.7%); }
.face::before { z-index: 2; background: conic-gradient(from var(--sheen), transparent, #ffe4df16 12%, transparent 27%, #d6e8f810 50%, transparent 68%, #fff2cd22 80%, transparent); box-shadow: inset 0 0 1px 2px #ffffff38; }
.face::after { z-index: 3; background: linear-gradient(165deg, #00000045 18%, transparent 60%); transition: opacity 450ms ease; }
.disc:first-child .face::after, .disc.is-open .face::after { opacity: 0; }
.tag { position: absolute; left: 12%; right: 12%; top: 65%; text-align: center; color: var(--face-ink); font-size: 24px; line-height: 1.1; }
.tag small { display: block; font-size: 14px; font-style: italic; margin-top: 8px; }
.has-art .tag { display: none; }
.stage-fade { position: fixed; z-index: 3; inset: auto 0 0; height: 20vh; background: linear-gradient(transparent, var(--bg) 94%); pointer-events: none; }

.collection-nav { position: fixed; z-index: 7; top: 50%; left: 32px; transform: translateY(-50%); transition: opacity 300ms; }
.rail-label { display: block; color: var(--muted); font: 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 16px 10px; }
.marker { display: flex; position: relative; height: 32px; width: 52px; align-items: center; gap: 10px; padding-left: 10px; }
.marker.is-gap { margin-top: 16px; }
.marker i { height: 1px; width: 14px; background: var(--ink); opacity: .25; transition: width 250ms, opacity 250ms; }
.marker[aria-current='true'] i { width: 29px; opacity: 1; }
.marker-number { font: 10px/1 var(--sans); opacity: 0; transition: opacity 200ms; }
.marker[aria-current='true'] .marker-number { opacity: .8; }
.marker:hover i, .marker:focus-visible i { opacity: 1; }
.marker-name { position: absolute; left: 76px; white-space: nowrap; font: 14px/1.4 var(--sans); background: var(--bg); padding: 8px 10px; opacity: 0; pointer-events: none; transition: opacity 180ms; }
.marker:hover .marker-name, .marker:focus-visible .marker-name { opacity: 1; }

.selection { position: fixed; z-index: 4; left: 72%; right: 4%; top: calc(var(--focus) - 49px); transition: opacity 300ms; }
.selection .eyebrow { color: var(--muted); margin: 0 0 18px; }
.selection h1 { margin: 0; font-size: clamp(28px, 3vw, 46px); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.selection-by { font-size: 18px; font-style: italic; line-height: 1.4; color: var(--muted); margin: 14px 0 27px; }
.selection .text-link { border-bottom: 1px solid #eee9df40; padding-bottom: 4px; }
.selection.is-changing { animation: caption-in 360ms var(--ease); }
@keyframes caption-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.collection-bottom { position: fixed; z-index: 7; bottom: 0; left: 42px; right: 42px; height: 87px; display: flex; align-items: center; justify-content: space-between; transition: opacity 300ms; font: 12px/1.4 var(--sans); }
.about-link { font-size: 12px; gap: 10px; }
.scroll-hint { position: absolute; left: 47%; transform: translateX(-50%); color: var(--muted); display: flex; align-items: center; gap: 12px; }
.scroll-hint > span { color: var(--ink); font-size: 19px; }
.position { display: flex; align-items: center; gap: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
#position-current { color: var(--ink); }
.progress-track { display: block; width: 70px; height: 1px; background: #eee9df30; }
#progress { display: block; height: 1px; background: var(--ink); transform-origin: left; transition: transform 250ms ease; }

.about { position: relative; z-index: 9; min-height: 100svh; background: #eae7df; color: #292620; padding: 48px 8vw 40px; }
.about-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #29262030; padding-bottom: 18px; }
.about h2 { font-weight: 400; font-size: clamp(42px, 6.7vw, 100px); letter-spacing: -.055em; line-height: 1.1; margin: 75px 0 50px; }
.about-copy { max-width: 720px; margin-left: 25%; font-size: clamp(20px, 2vw, 27px); line-height: 1.55; }
.about-copy p { margin: 0 0 24px; }
.about-bottom { display: flex; gap: 24px; justify-content: space-between; border-top: 1px solid #29262030; margin-top: 70px; padding-top: 24px; font: 12px/1.5 var(--sans); }
#app[data-footer='true'] .collection-nav, #app[data-footer='true'] .selection, #app[data-footer='true'] .collection-bottom { opacity: 0; pointer-events: none; }

/* Native dialog supplies keyboard focus containment and an inert background. */
.detail { margin: 0; padding: 0; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; color: var(--accent); background: transparent; overflow-y: auto; overscroll-behavior: contain; }
.detail::backdrop { background: transparent; }
.detail[open] { opacity: 1; transition: opacity 450ms ease 300ms; }
@starting-style { .detail[open] { opacity: 0; } }
.detail.is-closing { opacity: 0; transition: opacity 220ms ease; }
.detail-top { position: absolute; top: 0; left: 42px; right: 42px; height: 98px; display: flex; justify-content: space-between; align-items: center; z-index: 4; }
.detail-top > .eyebrow { opacity: .65; }
.close-button { display: flex; align-items: center; gap: 22px; font: 14px/1.4 var(--sans); min-height: 44px; }
.close-button > span { font: 30px/1 var(--sans); }
.panel { position: relative; z-index: 3; margin-left: 58%; margin-right: 7%; padding: 23vh 0 60px; }
.panel > .eyebrow { margin: 0 0 23px; opacity: .6; }
.panel h2 { font-size: clamp(40px, 4.5vw, 70px); letter-spacing: -.04em; line-height: 1.04; font-weight: 400; margin: 0; text-wrap: balance; }
.byline { font-style: italic; opacity: .75; margin: 20px 0 0; font-size: 22px; line-height: 1.4; }
.note { font: 16px/1.6 var(--sans); margin-top: 32px; }
.note:empty { display: none; }
.details { margin: 46px 0 0; font: 14px/1.5 var(--sans); }
.details > div { display: flex; justify-content: space-between; gap: 26px; border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding: 15px 0; }
.details > div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.details dt { opacity: .6; flex-shrink: 0; }
.details dd { margin: 0; text-align: right; }
.detail-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }
.detail-navigation .text-link { gap: 12px; }
.detail-navigation .eyebrow { opacity: .6; }
.keyboard-hint { opacity: .45; font: 12px/1.4 var(--sans); margin-top: 22px; text-align: right; }
.keyboard-hint span { padding: 0 8px; }
.mobile-art { display: none; }
#app[data-state='open'] > .masthead, #app[data-state='open'] > .selection, #app[data-state='open'] > .collection-nav, #app[data-state='open'] > .collection-bottom, #app[data-state='open'] > .stage-fade { opacity: 0; pointer-events: none; }
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; }

@media (min-width: 1600px) { :root { --step: 195px; } }
@media (max-width: 1000px) and (min-width: 701px) {
  :root { --D: 350px; --step: 150px; --hero-s: 1.05; --hero-x: -18vw; }
  .selection { left: 72%; right: 3%; }
  .selection .text-link { font-size: 12px; gap: 8px; }
  .panel { margin-left: 54%; margin-right: 5%; }
  .panel h2 { font-size: 44px; }
  .details { font-size: 13px; }
}
@media (max-width: 700px) {
  :root { --D: min(77vw, 380px); --focus: 37svh; --step: 140px; }
  .masthead { padding: 23px 22px; }
  .wordmark { font-size: 27px; gap: 11px; }
  .wordmark svg { width: 32px; height: 32px; }
  .wordmark-subtitle { font-size: 13px; }
  .masthead-meta { font-size: 10px; gap: 6px; padding-top: 2px; }
  .masthead-meta > span { display: none; }
  .stage { perspective-origin: 50% 37%; }
  .disc { left: 53%; }
  .collection-nav { left: 6px; top: 41%; }
  .rail-label, .marker-number { display: none; }
  .marker { width: 38px; height: 34px; padding-left: 8px; }
  .marker i { width: 9px; }
  .marker[aria-current='true'] i { width: 20px; }
  .marker-name { display: none; }
  .stage-fade { height: 46svh; background: linear-gradient(transparent, var(--bg) 44%); }
  .selection { left: 24px; right: 24px; top: auto; bottom: 91px; }
  .selection .eyebrow { font-size: 10px; margin-bottom: 10px; }
  .selection h1 { font-size: 34px; max-width: 320px; }
  .selection-by { font-size: 17px; margin: 9px 0 10px; }
  .selection .text-link { min-height: 36px; font-size: 13px; }
  .collection-bottom { left: 24px; right: 24px; height: 64px; border-top: 1px solid #eee9df25; }
  .scroll-hint { display: none; }
  .about-link { font-size: 11px; gap: 8px; }
  .position { font-size: 11px; gap: 9px; }
  .progress-track { width: 45px; }
  .about { padding: 24px; }
  .about h2 { margin: 60px 0 32px; font-size: 52px; }
  .about-copy { margin-left: 0; font-size: 22px; }
  .about-bottom { flex-wrap: wrap; gap: 16px 28px; margin-top: 45px; }
  .about-bottom > span { width: 100%; }
  .about-top .eyebrow { font-size: 10px; }
  .about-top .text-link { font-size: 12px; }
  .detail-top { position: relative; top: auto; left: auto; right: auto; padding: 16px 24px; height: 78px; }
  .detail-top .eyebrow { font-size: 10px; }
  .close-button { font-size: 12px; gap: 13px; }
  #app[data-state='open'] .stage { visibility: hidden; }
  .mobile-art { display: block; position: relative; height: min(86vw, 390px); }
  .mobile-art .disc { --D: min(73vw, 330px); position: absolute; left: 50%; top: 50%; margin: calc(var(--D) / -2); transform: rotateZ(-5deg); pointer-events: none; }
  .panel { margin: 0; padding: 19px 25px max(40px, env(safe-area-inset-bottom)); }
  .panel > .eyebrow { font-size: 11px; margin-bottom: 15px; }
  .panel h2 { font-size: 46px; }
  .byline { font-size: 21px; margin-top: 14px; }
  .details { margin-top: 33px; font-size: 14px; }
  .details > div { gap: 16px; padding: 14px 0; }
  .keyboard-hint { display: none; }
}
@media (max-width: 700px) and (max-height: 650px) {
  :root { --focus: 31svh; --D: min(68vw, 290px); --step: 110px; }
  .selection { bottom: 76px; }
  .selection h1 { font-size: 28px; }
  .selection-by { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}