:root {
  --ink:#16291e;
  --ivory:#f4f3e6;
  --sage:#dce1d0;
  --peach:#ecc7a7;
  --ochre:#e6d7bc;
  --sans:'DM Sans',Arial,Helvetica,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --reading-progress:0%;
  --pointer-x:0px;
  --pointer-y:0px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:55px;
}

body {
  margin:0;
  background:#14251b;
  color:var(--ivory);
  font-family:var(--sans);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

button,
input {
  font:inherit;
}

button {
  cursor:pointer;
  color:inherit;
  border:0;
}

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

button,
a {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px;
}

img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

p,
h1,
h2,
h3,
h4,
figure {
  margin:0;
}

h1,
h2,
h3,
h4 {
  font-weight:400;
}

svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
}

::selection {
  color:var(--ink);
  background:var(--peach);
}

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:100;
  background:var(--ivory);
  color:var(--ink);
  padding:12px;
}

.skip-link:focus {
  top:10px;
}

.site-header {
  position:fixed;
  z-index:60;
  top:0;
  left:0;
  right:0;
  height:54px;
  display:flex;
  align-items:center;
  gap:27px;
  padding:0 23px;
  color:var(--ivory);
  transition:color .25s,background .25s;
  background:linear-gradient(#09190e50,transparent);
}

.brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  letter-spacing:-.05em;
  font-size:20px;
}

.brand svg {
  width:18px;
  height:23px;
}

.header-button {
  background:none;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  padding:8px 0;
  font-weight:500;
}

.header-button svg {
  width:11px;
  height:9px;
}

.collections-toggle {
  margin-left:15px;
}

.motion-toggle {
  font-size:9px;
  background:none;
  padding:7px 0;
  border-bottom:1px solid currentColor;
  opacity:.65;
}

body[data-surface=light] .site-header {
  color:var(--ink);
  background:linear-gradient(#dce1d0e8,#dce1d000);
}

.collections-menu {
  position:fixed;
  z-index:70;
  top:54px;
  left:280px;
  width:290px;
  background:var(--ivory);
  color:var(--ink);
  padding:24px;
  box-shadow:0 10px 50px #0005;
}

.collections-menu[hidden] {
  display:none;
}

.collections-menu p {
  font-size:8px;
  letter-spacing:.09em;
  opacity:.65;
  margin-bottom:18px;
}

.collections-menu>a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:22px;
  letter-spacing:-.04em;
  padding:8px 0;
  border-bottom:1px solid #16291e22;
}

.collections-menu>a span {
  font-family:var(--serif);
  font-size:14px;
  opacity:.6;
}

.collections-menu>a:hover {
  padding-left:4px;
}

.collections-menu>button {
  background:none;
  margin-top:23px;
  padding:0;
  font-size:10px;
  border-bottom:1px solid;
  padding-bottom:3px;
}

.chapter-rail {
  position:fixed;
  left:23px;
  top:80px;
  bottom:28px;
  width:144px;
  z-index:20;
  display:flex;
  flex-direction:column;
  color:var(--ivory);
  transition:color .25s,opacity .4s;
}

.rail-title {
  font-size:22px;
  line-height:.91;
  letter-spacing:-.055em;
  font-weight:650;
}

.rail-title i {
  font-family:var(--serif);
  font-size:30px;
  font-weight:400;
  letter-spacing:-.01em;
}

.rail-navigation {
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-bottom:36px;
}

.rail-navigation a {
  display:flex;
  align-items:baseline;
  gap:5px;
  font-size:13px;
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:600;
  opacity:.55;
  padding:3px 0;
}

.rail-navigation a>span:last-child {
  font-family:var(--serif);
  font-size:12px;
  width:12px;
  text-align:right;
  font-weight:400;
}

.rail-dots {
  border-bottom:1px dotted currentColor;
  flex:1;
  opacity:0;
}

.rail-navigation a:hover,
.rail-navigation a[aria-current] {
  opacity:1;
}

.rail-navigation a[aria-current] .rail-dots {
  opacity:.6;
}

.rail-foot {
  font-size:8px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.rail-foot button {
  font:inherit;
  background:none;
  text-align:left;
  padding:0;
}

.rail-foot button:hover {
  text-decoration:underline;
}

body[data-chapter=top] .chapter-rail {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

body[data-surface=light] .chapter-rail {
  color:var(--ink);
}

.world {
  height:100svh;
  min-height:740px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#173021;
}

.world-art {
  position:absolute;
  inset:-3%;
  z-index:-3;
  transform:translate(var(--pointer-x),var(--pointer-y)) scale(1.04);
  will-change:transform;
  transition:transform 1.3s cubic-bezier(.2,.65,.2,1);
  background:url('assets/hero-poster.webp') center / cover no-repeat;
}

.world-art video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.world-shade {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#061c1220,transparent 28%,#071e1248 43%,#071e1248 60%,transparent 77%),linear-gradient(#0b1a2033,transparent 22%,transparent 70%,#04190e70);
}

.perspective-grid {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.45;
  background-image:linear-gradient(90deg,transparent calc(25% - 1px),#f4f3e610 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),#f4f3e610 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),#f4f3e610 75%,transparent calc(75% + 1px)),linear-gradient(transparent calc(38% - 1px),#f4f3e610 38%,transparent calc(38% + 1px),transparent calc(75% - 1px),#f4f3e610 75%,transparent calc(75% + 1px)),linear-gradient(33deg,transparent calc(50% - .5px),#f4f3e612 50%,transparent calc(50% + .5px)),linear-gradient(-33deg,transparent calc(50% - .5px),#f4f3e612 50%,transparent calc(50% + .5px));
}

.world-frame {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-48%);
  width:338px;
  min-height:442px;
  border:1px solid #f4f3e69c;
  padding:21px 20px 17px;
  z-index:5;
  background:#06170d15;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 80px #0a2a0d10;
}

.world-frame h1 {
  font-size:42px;
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:650;
}

.world-frame h1 em {
  font-family:var(--serif);
  font-size:66px;
  line-height:.88;
  letter-spacing:-.02em;
  font-weight:400;
}

.world-index {
  margin-top:52px;
}

.world-index>p {
  font-family:var(--serif);
  font-size:22px;
  line-height:.94;
  letter-spacing:-.015em;
  margin-bottom:23px;
}

.world-index>p>span {
  font-size:17px;
  display:block;
  margin-top:8px;
  opacity:.85;
}

.world-index nav {
  display:flex;
  flex-direction:column;
  gap:0;
}

.world-index nav a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:19px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.04em;
  transition:padding .2s,color .2s;
}

.world-index nav a>span:last-child {
  font-family:var(--serif);
  font-size:15px;
  font-weight:400;
  opacity:.7;
}

.world-index nav a:hover {
  color:#ffbd8d;
  padding-left:7px;
}

.floating-object {
  position:absolute;
  z-index:4;
  background:none;
  padding:0;
  will-change:transform;
}

.floating-photo {
  width:245px;
  left:13%;
  bottom:12%;
  transform:rotate(-13deg);
  animation:float-photo 9s ease-in-out infinite;
}

.photo-mount {
  background:#e8e3cf;
  display:block;
  padding:11px 11px 8px;
  box-shadow:3px 18px 40px #05140780;
}

.photo-mount img {
  aspect-ratio:1.55;
  filter:grayscale(1);
  object-fit:cover;
}

.floating-record {
  width:236px;
  right:10%;
  bottom:12%;
  transform:rotate(-22deg);
  animation:float-record 11s ease-in-out infinite;
}

.floating-record:hover {
  filter:brightness(1.18);
}

.record-disc {
  display:block;
  aspect-ratio:1;
  width:100%;
  border-radius:50%;
  position:relative;
  background:repeating-radial-gradient(circle,#2a2624 0px,#25221f 1px,#0d1410 2px,#0a100d 3px,#161c16 4px);
  box-shadow:12px 20px 30px #07130ca0,0 0 0 1px #e8e3cf20;
  transform:rotate(-18deg);
}

.record-label {
  position:absolute;
  inset:32%;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:5px;
  background:#dcc5a0;
  color:#1e3326;
  font-size:9px;
  letter-spacing:-.04em;
  border:1px solid #1e332624;
}

.record-label strong {
  font-size:10px;
  line-height:1.05;
  letter-spacing:-.035em;
}

.record-label small {
  font-size:5px;
  letter-spacing:.07em;
}

.record-hole {
  width:5px;
  height:5px;
  background:#14271b;
  border-radius:50%;
  margin-top:3px;
}

@keyframes float-photo {
  0%,
  100% {
    transform:translateY(0) rotate(-13deg);
  }

  50% {
    transform:translateY(-13px) rotate(-10deg);
  }
}

@keyframes float-record {
  0%,
  100% {
    transform:translateY(0) rotate(-22deg);
  }

  50% {
    transform:translateY(14px) rotate(-16deg);
  }
}

.chapter {
  position:relative;
}

.scene {
  position:relative;
  isolation:isolate;
  --scene-progress:0;
  background:#151f16;
}

.scene-backdrop {
  position:sticky;
  top:0;
  z-index:-2;
  width:100%;
  height:100svh;
  overflow:hidden;
}

.scene-image {
  width:100%;
  height:110%;
  position:absolute;
  top:-5%;
  object-fit:cover;
  transform:scale(calc(1.015 + var(--scene-progress)*.045));
  will-change:transform;
}

.scene-wash {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#06171170 0%,#07130e28 40%,transparent 68%),linear-gradient(transparent 25%,#06181125 55%,#071a108a 100%);
}

.scene-content {
  position:relative;
  z-index:3;
  margin-top:-100svh;
}

.scene-opening {
  min-height:100svh;
  padding:28svh 5.5% 10svh 20%;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.scene-opening h2 {
  font-size:clamp(95px,12.2vw,200px);
  line-height:.87;
  letter-spacing:-.075em;
  font-weight:650;
  position:relative;
  z-index:3;
}

.scene-narrative {
  padding:9svh 10% 19svh 20%;
  min-height:54svh;
  display:flex;
  justify-content:center;
  flex-direction:column;
}

.scene-narrative>p {
  font-family:var(--serif);
  font-size:clamp(38px,4.2vw,67px);
  line-height:1.02;
  letter-spacing:-.028em;
  max-width:1000px;
  text-wrap:balance;
}

.flourish {
  font-family:var(--serif);
  font-style:italic;
  font-size:1.5em;
  line-height:.4;
  letter-spacing:-.07em;
  margin-left:-.035em;
  margin-right:.015em;
  font-weight:400;
}

.scene-photography .scene-image {
  filter:grayscale(1) sepia(.2);
  object-position:center 30%;
}

.scene-photography .scene-wash {
  background:linear-gradient(90deg,#082b2270,#082b2225),linear-gradient(transparent 20%,#0a251f20 55%,#0a251fd9 100%);
}

.scene-music {
  background:#301809;
}

.scene-music .scene-image {
  object-fit:contain;
  object-position:right center;
  filter:grayscale(1) sepia(.3);
  width:78%;
  height:110%;
  left:22%;
  opacity:.88;
}

.scene-music .scene-wash {
  background:linear-gradient(90deg,#200d08 0%,#361709e8 25%,#6a35294d 60%,#34130c40),linear-gradient(transparent,#26140b80 80%);
}

.scene-music h2,
.scene-fashion h2,
.scene-design h2 {
  font-size:clamp(130px,16.5vw,264px);
}

.scene-fashion {
  background:#141f2e;
}

.scene-fashion .scene-image {
  filter:brightness(.75);
  opacity:.68;
  object-position:center;
  object-fit:fill;
}

.scene-fashion .scene-wash {
  background:linear-gradient(90deg,#141e36ab,#141e3622),linear-gradient(transparent 30%,#081c2cdb);
}

.fashion-print {
  position:absolute;
  right:9%;
  top:14svh;
  width:24%;
  max-width:370px;
  transform:rotate(9deg);
  z-index:1;
  background:#ede5cd;
  padding:10px 10px 14px;
  box-shadow:10px 20px 50px #080f2070;
}

.fashion-print img {
  height:auto;
}

.scene-fashion .scene-opening {
  padding-top:44svh;
}

.scene-design {
  background:#271610;
}

.scene-design .scene-image {
  opacity:.28;
  filter:blur(2px) sepia(.55);
  object-position:center;
  transform:scale(1.08);
}

.scene-design .scene-wash {
  background:linear-gradient(90deg,#251811ed,#24110f85 48%,#2c160c40),linear-gradient(transparent 30%,#24130fdd);
}

.design-sleeves {
  position:absolute;
  width:34%;
  max-width:530px;
  right:7%;
  top:24svh;
  z-index:1;
  transform:rotate(12deg);
  filter:drop-shadow(10px 25px 15px #0b070680);
}

.design-sleeves>img {
  position:relative;
  border:7px solid #eae2d1;
  transform:rotate(-8deg);
  height:auto;
}

.sleeve-back {
  position:absolute;
  inset:-4%;
  background:#c97750;
  border:9px solid #302312;
  transform:rotate(-11deg);
}

.scene-design .scene-opening {
  padding-top:22svh;
}

.scene-design .scene-narrative>p {
  max-width:900px;
}

.paper {
  position:relative;
  color:var(--ink);
  background:var(--sage);
  z-index:5;
  margin-top:-1px;
}

.paper-sage {
  --paper-color:var(--sage);
}

.paper-ochre {
  --paper-color:var(--ochre);
  background:var(--ochre);
}

.paper-peach {
  --paper-color:var(--peach);
  background:var(--peach);
}

.paper-edge {
  position:absolute;
  left:0;
  right:0;
  top:-42px;
  height:45px;
  background:var(--paper-color,var(--sage));
  clip-path:polygon(0 52%,1% 49%,2% 56%,3% 41%,4% 37%,5% 43%,6% 30%,7% 33%,8% 27%,9% 41%,10% 38%,11% 44%,12% 36%,13% 46%,14% 49%,15% 62%,16% 65%,17% 58%,18% 60%,19% 51%,20% 54%,21% 46%,22% 48%,23% 43%,24% 40%,25% 48%,26% 52%,27% 40%,28% 32%,29% 20%,30% 23%,31% 12%,32% 7%,33% 14%,34% 24%,35% 30%,36% 24%,37% 33%,38% 46%,39% 55%,40% 50%,41% 60%,42% 48%,43% 46%,44% 37%,45% 32%,46% 38%,47% 39%,48% 44%,49% 46%,50% 56%,51% 60%,52% 71%,53% 74%,54% 64%,55% 58%,56% 61%,57% 50%,58% 48%,59% 56%,60% 57%,61% 45%,62% 39%,63% 44%,64% 34%,65% 43%,66% 38%,67% 27%,68% 33%,69% 25%,70% 38%,71% 40%,72% 45%,73% 59%,74% 67%,75% 63%,76% 66%,77% 54%,78% 59%,79% 46%,80% 39%,81% 42%,82% 27%,83% 32%,84% 41%,85% 35%,86% 26%,87% 30%,88% 43%,89% 39%,90% 44%,91% 52%,92% 49%,93% 45%,94% 54%,95% 67%,96% 63%,97% 57%,98% 63%,99% 48%,100% 50%,100% 100%,0 100%);
  filter:drop-shadow(0 -2px 0 #ffffffe6);
}

.paper-inner {
  padding:75px 6% 35px 20%;
}

.interlude-heading {
  margin-bottom:43px;
}

.interlude-heading h3 {
  font-family:var(--serif);
  font-size:clamp(44px,4.8vw,74px);
  line-height:.98;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.photography-study {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:48px;
  align-items:start;
}

.study-image {
  min-width:0;
}

.study-image>img {
  height:auto;
  aspect-ratio:1.6;
  object-fit:contain;
  background:#e9e5d7;
}

.study-image figcaption,
.textile-object figcaption,
.fashion-ad figcaption,
.artifact-caption {
  font-size:7px;
  line-height:1.65;
  letter-spacing:.02em;
  margin-top:13px;
  opacity:.7;
}

.object-story .serif-body {
  font-family:var(--serif);
  font-size:30px;
  line-height:1.07;
  letter-spacing:-.024em;
  margin-bottom:22px;
}

.object-story>p:not(.serif-body) {
  font-size:11px;
  line-height:1.8;
  max-width:355px;
  margin-bottom:24px;
  opacity:.8;
}

.object-story h4 {
  font-size:46px;
  letter-spacing:-.06em;
  line-height:.98;
  font-weight:600;
  margin-bottom:25px;
}

.object-fields {
  font-size:9px;
  margin:26px 0;
}

.object-fields>div {
  display:grid;
  grid-template-columns:70px 1fr;
  gap:12px;
  padding:7px 0;
  border-top:1px solid #16291e20;
}

.object-fields dt {
  opacity:.5;
}

.object-fields dd {
  margin:0;
}

.archive-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  justify-content:space-between;
  font-size:10px;
  line-height:1.2;
  padding:7px 9px;
  background:var(--ivory);
  color:var(--ink);
  box-shadow:0 0 0 1px #16291e12;
}

.archive-link span {
  font-size:14px;
}

.archive-link:hover {
  background:var(--ink);
  color:var(--ivory);
}

.listening-room {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:55px;
  align-items:center;
  padding:24px 0 20px;
}

.record-object {
  position:relative;
  min-height:410px;
  display:flex;
  align-items:center;
  perspective:1000px;
  padding-right:40px;
}

.record-sleeve {
  width:77%;
  max-width:370px;
  z-index:2;
  position:relative;
  transform:rotate(-9deg);
  box-shadow:7px 17px 18px #1e29123d;
  padding:0;
  background:none;
  transition:transform .5s;
}

.record-sleeve img {
  aspect-ratio:1;
  object-fit:cover;
}

.record-object>.record-disc {
  width:77%;
  max-width:390px;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%) rotate(8deg);
  z-index:1;
  transition:transform .5s;
}

.record-object:hover .record-sleeve {
  transform:rotate(-5deg) translateX(-7px);
}

.record-object:hover>.record-disc {
  transform:translate(10px,-50%) rotate(28deg);
}

.record-object .record-label {
  font-size:10px;
  gap:6px;
  inset:31%;
  background:#df5b31;
}

.record-object .record-label strong {
  font-size:12px;
}

.record-object .record-label small {
  font-size:7px;
}

.artifact-caption {
  margin-top:16px;
}

.fashion-study {
  display:grid;
  grid-template-columns:1.2fr 1fr 0.85fr;
  gap:38px;
  align-items:center;
}

.fashion-study .object-story {
  align-self:start;
}

.textile-object {
  padding:15px 0;
}

.textile-object img {
  height:auto;
  max-height:390px;
  object-fit:contain;
  transform:rotate(-6deg);
  box-shadow:3px 8px 12px #19251c24;
  aspect-ratio:.8;
}

.textile-object figcaption {
  margin-top:27px;
}

.fashion-ad {
  align-self:end;
  margin-bottom:45px;
  transform:rotate(5deg);
}

.fashion-ad img {
  height:auto;
  box-shadow:3px 8px 10px #19251c22;
}

.fashion-ad figcaption {
  font-size:6px;
}

.design-study {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:60px;
  align-items:center;
}

.museum-about {
  background:#eeeee1;
  color:var(--ink);
  position:relative;
  z-index:6;
}

.about-inner {
  padding:100px 7% 45px 20%;
  position:relative;
}

.museum-about h2 {
  font-size:clamp(80px,9vw,140px);
  font-weight:600;
  letter-spacing:-.067em;
  line-height:.91;
  max-width:850px;
}

.museum-about h2 em {
  font-family:var(--serif);
  font-size:1.28em;
  font-weight:400;
  letter-spacing:-.025em;
}

.about-copy {
  max-width:400px;
  margin-left:auto;
  margin-top:30px;
}

.about-copy p {
  font-family:var(--serif);
  font-size:27px;
  line-height:1.14;
  margin-bottom:20px;
  letter-spacing:-.02em;
}

.about-copy p+p {
  font-family:var(--sans);
  font-size:11px;
  line-height:1.8;
  letter-spacing:0;
  opacity:.75;
}

.no-motion * {
  animation:none!important;
  transition:none!important;
}

.no-motion .world-art {
  transform:scale(1.04)!important;
}

.no-motion .scene-image {
  transform:none!important;
}

dialog {
  position:fixed;
  max-height:90svh;
  width:1000px;
  max-width:calc(100% - 32px);
  border:0;
  background:var(--ivory);
  color:var(--ink);
  padding:0;
  box-shadow:0 15px 100px #0005;
}

dialog::backdrop {
  background:#071e16cf;
  backdrop-filter:blur(5px);
}

body.dialog-open {
  overflow:hidden;
}

.dialog-close {
  position:absolute;
  top:17px;
  right:17px;
  width:34px;
  height:34px;
  z-index:5;
  display:grid;
  place-items:center;
  background:var(--ivory);
  color:var(--ink);
  font-size:16px;
  border:1px solid #16291e28;
}

.record-dialog[open] {
  display:grid;
  grid-template-columns:45% 55%;
}

.record-dialog-image {
  position:relative;
  min-height:620px;
  background:#deded1;
}

.record-dialog-image img {
  position:absolute;
  inset:0;
  object-fit:contain;
  padding:20px;
}

.record-dialog-image>span {
  position:absolute;
  bottom:14px;
  left:18px;
  right:18px;
  font-size:7px;
  line-height:1.6;
  opacity:.65;
}

.record-dialog-copy {
  padding:65px 40px 38px;
}

.record-dialog h2 {
  font-family:var(--serif);
  font-size:56px;
  line-height:.98;
  letter-spacing:-.025em;
  margin-bottom:20px;
}

.record-person {
  font-size:9px;
  letter-spacing:.02em;
  border-bottom:1px solid #16291e26;
  padding-bottom:20px;
  margin-bottom:21px;
}

#record-body {
  font-size:12px;
  line-height:1.85;
  opacity:.8;
}

#record-body p {
  margin-bottom:17px;
}

.record-actions {
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-top:24px;
}

.record-actions>.archive-link {
  background:#dce1d0;
}

.record-actions>.archive-link:hover {
  background:var(--ink);
}

.save-button {
  border:1px solid #16291e30;
  padding:9px 10px;
  background:none;
  font-size:9px;
}

.save-button[aria-pressed=true] {
  background:var(--ink);
  color:var(--ivory);
}

.save-note {
  font-size:8px;
  margin-top:16px;
  min-height:12px;
  opacity:.6;
}

.index-dialog,
.credits-dialog {
  width:730px;
  padding:58px 40px 35px;
}

.index-dialog h2,
.credits-dialog h2 {
  font-size:48px;
  font-weight:600;
  line-height:.93;
  letter-spacing:-.05em;
  margin-bottom:27px;
}

.index-dialog h2 em,
.credits-dialog h2 em {
  font-family:var(--serif);
  font-size:1.3em;
  font-weight:400;
  letter-spacing:-.025em;
}

.search-field {
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 0;
  border-bottom:1px solid var(--ink);
}

.search-field svg {
  width:22px;
  height:22px;
  flex-shrink:0;
}

.search-field input {
  border:0;
  background:none;
  font-size:13px;
  width:100%;
  color:var(--ink);
  padding:5px;
}

.search-field input:focus-visible {
  outline:1px solid;
  outline-offset:3px;
}

.search-field input::placeholder {
  color:#6d7763;
}

.index-meta {
  font-size:8px;
  opacity:.6;
  margin:23px 0 7px;
}

.index-result {
  display:flex;
  align-items:center;
  gap:17px;
  background:none;
  width:100%;
  border-bottom:1px solid #16291e20;
  padding:15px 0;
  text-align:left;
}

.index-result img {
  width:55px;
  height:58px;
  object-fit:cover;
}

.index-result>div {
  flex:1;
}

.index-result small {
  font-size:7px;
  letter-spacing:.05em;
  display:block;
  opacity:.6;
  margin-bottom:6px;
}

.index-result strong {
  font-family:var(--serif);
  font-size:28px;
  line-height:1;
  font-weight:400;
  display:block;
}

.index-result>span {
  font-size:24px;
}

.index-result:hover strong {
  text-decoration:underline;
  text-underline-offset:4px;
}

.no-results {
  padding:30px 0;
  font-size:12px;
}

.credit-item {
  border-bottom:1px solid #16291e20;
  padding:16px 0;
}

.credit-item a {
  font-size:13px;
  display:block;
  text-decoration:underline;
  text-underline-offset:3px;
}

.credit-item p {
  font-size:9px;
  line-height:1.65;
  opacity:.6;
  margin-top:7px;
}

.credits-dialog>.credit-note {
  margin-top:25px;
  font-size:9px!important;
}

.credit-note a {
  text-decoration:underline;
}

@media(min-width:1700px) {
  .world-frame {
    width:370px;
    min-height:475px;
    padding:25px;
  }

  .world-frame h1 {
    font-size:48px;
  }

  .world-frame h1 em {
    font-size:73px;
  }

  .world-index>p {
    font-size:24px;
  }

  .world-index nav a {
    font-size:21px;
  }

  .world-index {
    margin-top:58px;
  }

  .floating-photo {
    width:290px;
  }

  .floating-record {
    width:285px;
  }

  .paper-inner {
    padding-top:90px;
  }

  .photography-study {
    gap:70px;
  }

  .object-story .serif-body {
    font-size:36px;
  }

  .object-story>p:not(.serif-body) {
    font-size:13px;
  }

  .chapter-rail {
    width:163px;
  }

  .rail-navigation a {
    font-size:15px;
  }

  .rail-title {
    font-size:24px;
  }

  .scene-opening h2 {
    font-size:12vw;
  }

  .scene-music h2,
  .scene-fashion h2,
  .scene-design h2 {
    font-size:16vw;
  }
}

@media(max-width:1100px) {
  .site-header {
    gap:22px;
  }

  .collections-toggle {
    margin-left:12px;
  }

  .collections-menu {
    left:175px;
  }

  .chapter-rail {
    left:18px;
    width:128px;
    top:77px;
  }

  .rail-title {
    font-size:19px;
  }

  .rail-title i {
    font-size:26px;
  }

  .rail-navigation a {
    font-size:11px;
  }

  .scene-opening,
  .scene-narrative {
    padding-left:20%;
    padding-right:5%;
  }

  .scene-narrative>p {
    font-size:45px;
  }

  .world-frame {
    width:316px;
    min-height:430px;
  }

  .world-frame h1 {
    font-size:40px;
  }

  .world-frame h1 em {
    font-size:61px;
  }

  .world-index {
    margin-top:44px;
  }

  .floating-photo {
    left:7%;
    width:210px;
    bottom:9%;
  }

  .floating-record {
    right:7%;
    width:195px;
    bottom:9%;
  }

  .paper-inner {
    padding-left:20%;
    padding-right:5%;
    padding-top:65px;
  }

  .interlude-heading h3 {
    font-size:54px;
  }

  .photography-study {
    gap:30px;
    grid-template-columns:1.25fr 1fr;
  }

  .object-story .serif-body {
    font-size:26px;
  }

  .object-story>p:not(.serif-body) {
    font-size:10px;
  }

  .record-object {
    min-height:300px;
    padding-right:30px;
  }

  .listening-room {
    gap:30px;
    grid-template-columns:1.25fr 1fr;
  }

  .record-object .record-label strong {
    font-size:9px;
  }

  .fashion-study {
    grid-template-columns:1.15fr 1fr;
    gap:30px;
  }

  .fashion-ad {
    display:none;
  }

  .textile-object {
    padding:25px 10px;
  }

  .design-study {
    gap:35px;
    grid-template-columns:1.25fr 1fr;
  }

  .object-story h4 {
    font-size:37px;
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:58px;
  }

  .site-header {
    height:57px;
    padding:0 18px;
    gap:19px;
    background:linear-gradient(#071a17b3,transparent);
  }

  .brand {
    font-size:18px;
  }

  .brand svg {
    width:15px;
    height:20px;
  }

  .collections-toggle {
    margin-left:auto;
    font-size:11px;
    gap:6px;
  }

  .motion-toggle {
    position:absolute;
    right:18px;
    top:68px;
    font-size:7px;
    z-index:6;
    opacity:.7;
  }

  .collections-menu {
    left:auto;
    right:18px;
    top:57px;
    width:min(310px,calc(100% - 36px));
    padding:23px;
  }

  .chapter-rail {
    left:0;
    top:auto;
    bottom:0;
    right:0;
    width:100%;
    height:48px;
    padding:0 17px;
    background:#0d2119eb;
    backdrop-filter:blur(8px);
    flex-direction:row;
    align-items:center;
    border-top:1px solid #f4f3e61c;
    z-index:25;
  }

  .rail-title,
  .rail-foot {
    display:none;
  }

  .rail-navigation {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:0;
    margin:0;
  }

  .rail-navigation a {
    font-size:10px;
    letter-spacing:-.035em;
    gap:5px;
    padding:9px 0;
    opacity:.55;
  }

  .rail-navigation a>span:last-child {
    font-size:10px;
    width:auto;
  }

  .rail-dots {
    display:none;
  }

  .rail-navigation a[aria-current] {
    border-bottom:1px solid currentColor;
  }

  body[data-surface=light] .chapter-rail {
    background:#dce1d0f0;
    border-top-color:#16291e20;
  }

  .world {
    height:100svh;
    min-height:750px;
  }

  .world-art {
    inset:-2%;
    transform:scale(1.04);
    transition:none;
    background-position:29% center;
  }

  .world-art video {
    object-position:29% center;
  }

  .world-shade {
    background:linear-gradient(90deg,#061c125a,#071e1280 35%,#071e1280 90%),linear-gradient(#04190e40,transparent 20%,#04190e45 80%);
  }

  .world-frame {
    width:285px;
    min-height:422px;
    top:49%;
    padding:20px 19px 17px;
    transform:translate(-50%,-50%);
    background:#08211210;
  }

  .world-frame h1 {
    font-size:39px;
  }

  .world-frame h1 em {
    font-size:64px;
  }

  .world-index {
    margin-top:43px;
  }

  .world-index>p {
    font-size:22px;
    margin-bottom:20px;
  }

  .world-index>p>span {
    font-size:16px;
  }

  .world-index nav a {
    font-size:18px;
    line-height:1.23;
  }

  .world-index nav a>span:last-child {
    font-size:14px;
  }

  .floating-photo {
    width:125px;
    left:3%;
    bottom:6%;
    animation:none;
    transform:rotate(-15deg);
    z-index:3;
  }

  .photo-mount {
    padding:6px 6px 5px;
  }

  .floating-record {
    width:110px;
    right:3%;
    bottom:5%;
    animation:none;
    transform:rotate(19deg);
    z-index:3;
  }

  .floating-record .record-label {
    font-size:5px;
    gap:2px;
    inset:29%;
  }

  .floating-record .record-label strong {
    font-size:6px;
  }

  .floating-record .record-label small {
    font-size:3px;
  }

  .record-hole {
    width:3px;
    height:3px;
    margin-top:2px;
  }

  .scene-backdrop {
    height:100svh;
  }

  .scene-content {
    margin-top:-100svh;
  }

  .scene-opening {
    min-height:93svh;
    padding:25svh 6% 20svh;
    justify-content:center;
  }

  .scene-opening h2 {
    font-size:13.3vw;
    letter-spacing:-.065em;
    line-height:.9;
  }

  .scene-music h2,
  .scene-fashion h2,
  .scene-design h2 {
    font-size:22vw;
  }

  .scene-narrative {
    min-height:45svh;
    padding:20px 8% 120px 6%;
    justify-content:center;
  }

  .scene-narrative>p {
    font-size:37px;
    line-height:1.06;
    letter-spacing:-.025em;
    max-width:100%;
  }

  .scene-narrative>p br {
    display:none;
  }

  .scene-photography .scene-image {
    object-fit:cover;
    object-position:28% center;
    width:210%;
    left:-31%;
    height:105%;
    top:-2.5%;
  }

  .scene-photography .scene-wash {
    background:linear-gradient(#07241e55,#07241e90 75%,#07241ed9);
  }

  .scene-music .scene-image {
    width:110%;
    left:0;
    object-fit:cover;
    object-position:center 28%;
    height:108%;
    top:-4%;
  }

  .scene-music .scene-wash {
    background:linear-gradient(90deg,#30150b85,#25100b45),linear-gradient(transparent 10%,#25120caa 75%);
  }

  .fashion-print {
    right:9%;
    top:16svh;
    width:46%;
    max-width:240px;
    transform:rotate(10deg);
    padding:7px 7px 10px;
  }

  .scene-fashion .scene-opening {
    padding-top:51svh;
    padding-bottom:14svh;
  }

  .scene-fashion .scene-image {
    object-fit:cover;
    opacity:.72;
  }

  .scene-fashion .scene-narrative {
    padding-top:40px;
  }

  .design-sleeves {
    width:58%;
    right:4%;
    top:27svh;
  }

  .scene-design .scene-opening {
    padding-top:20svh;
    justify-content:flex-start;
    min-height:95svh;
  }

  .scene-design .scene-narrative>p {
    font-size:36px;
  }

  .paper-inner {
    padding:52px 6% 33px;
  }

  .paper-edge {
    height:30px;
    top:-28px;
  }

  .interlude-heading {
    margin-bottom:32px;
  }

  .interlude-heading h3 {
    font-size:44px;
    line-height:1.02;
  }

  .photography-study {
    grid-template-columns:1fr;
    gap:30px;
  }

  .study-image figcaption {
    font-size:6px;
    line-height:1.7;
    margin-top:11px;
  }

  .object-story .serif-body {
    font-size:29px;
    line-height:1.12;
    margin-bottom:18px;
  }

  .object-story>p:not(.serif-body) {
    font-size:11px;
    line-height:1.85;
    max-width:100%;
    margin-bottom:22px;
  }

  .object-fields {
    margin:24px 0;
    font-size:9px;
  }

  .object-fields>div {
    padding:9px 0;
    grid-template-columns:80px 1fr;
  }

  .archive-link {
    font-size:10px;
    padding:9px 10px;
  }

  .listening-room {
    grid-template-columns:1fr;
    gap:35px;
    padding-top:15px;
  }

  .record-object {
    min-height:330px;
    padding-right:30px;
  }

  .record-sleeve {
    width:77%;
    max-width:280px;
  }

  .record-object>.record-disc {
    width:77%;
    max-width:290px;
    right:2%;
  }

  .record-object .record-label {
    gap:4px;
    font-size:8px;
  }

  .record-object .record-label strong {
    font-size:10px;
  }

  .record-object .record-label small {
    font-size:5px;
  }

  .object-story h4 {
    font-size:49px;
    line-height:.96;
    letter-spacing:-.05em;
  }

  .artifact-caption {
    font-size:7px;
    line-height:1.7;
    margin-top:25px;
  }

  .fashion-study {
    grid-template-columns:1fr 1fr;
    gap:22px;
  }

  .fashion-study .object-story {
    grid-column:1 / -1;
  }

  .textile-object {
    padding:20px 7px 0;
    align-self:center;
  }

  .textile-object img {
    max-height:290px;
  }

  .textile-object figcaption {
    font-size:6px;
    line-height:1.6;
    margin-top:23px;
  }

  .fashion-ad {
    display:block;
    align-self:center;
    margin-top:40px;
    margin-bottom:0;
  }

  .fashion-ad figcaption {
    font-size:6px;
  }

  .design-study {
    grid-template-columns:1fr;
    gap:32px;
  }

  .museum-about h2 {
    font-size:71px;
    letter-spacing:-.055em;
    line-height:.93;
  }

  .museum-about h2 em {
    font-size:1.3em;
  }

  .about-inner {
    padding:65px 6% 40px;
  }

  .about-copy {
    margin:35px 0 0;
    max-width:100%;
  }

  .about-copy>p {
    font-size:29px;
    line-height:1.12;
  }

  .about-copy p+p {
    font-size:11px;
    line-height:1.8;
  }

  .record-dialog[open] {
    display:block;
  }

  .record-dialog {
    width:520px;
    max-height:92svh;
  }

  .record-dialog-image {
    min-height:0;
    height:290px;
  }

  .record-dialog-image img {
    padding:18px 20px 36px;
    object-fit:contain;
  }

  .record-dialog-image>span {
    bottom:9px;
    font-size:6px;
    line-height:1.5;
  }

  .record-dialog-copy {
    padding:30px 24px;
  }

  .record-dialog h2 {
    font-size:44px;
  }

  .record-person {
    font-size:8px;
    line-height:1.5;
  }

  .record-actions {
    gap:15px;
  }

  #record-body {
    font-size:11px;
    line-height:1.85;
  }

  .index-dialog,
  .credits-dialog {
    padding:48px 23px 28px;
    width:520px;
  }

  .index-dialog h2,
  .credits-dialog h2 {
    font-size:43px;
    line-height:.95;
    margin-bottom:24px;
  }

  .dialog-close {
    right:12px;
    top:12px;
    width:31px;
    height:31px;
  }

  .search-field {
    gap:10px;
    padding:13px 0;
  }

  .search-field svg {
    width:18px;
    height:18px;
  }

  .search-field input {
    font-size:11px;
    padding:4px;
  }

  .index-result {
    gap:13px;
    padding:13px 0;
  }

  .index-result img {
    width:45px;
    height:50px;
  }

  .index-result strong {
    font-size:25px;
  }

  .index-result small {
    font-size:6px;
  }

  .index-meta {
    font-size:7px;
  }

  .credit-item a {
    font-size:12px;
  }
}

@media(max-width:380px) {
  .world {
    min-height:710px;
  }

  .world-frame {
    width:272px;
    min-height:404px;
  }

  .world-frame h1 {
    font-size:36px;
  }

  .world-frame h1 em {
    font-size:58px;
  }

  .world-index {
    margin-top:37px;
  }

  .world-index>p {
    font-size:21px;
  }

  .floating-photo {
    width:110px;
    bottom:7%;
  }

  .floating-record {
    width:99px;
    bottom:7%;
  }

  .scene-narrative>p {
    font-size:33px;
  }

  .interlude-heading h3 {
    font-size:39px;
  }

  .record-object {
    min-height:290px;
  }

  .museum-about h2 {
    font-size:63px;
  }

  .rail-navigation a {
    font-size:9px;
  }

  .scene-design .scene-narrative>p {
    font-size:32px;
  }
}

main {
  overflow-x:clip;
}

html {
  scroll-padding-top:0;
}

.paper {
  scroll-margin-top:54px;
}

.paper-edge {
  clip-path:none;
  mask-image:url('assets/paper-edge.svg');
  mask-size:100% 100%;
  mask-repeat:no-repeat;
  filter:drop-shadow(0 -1px 0 #f4f3e6);
}

.scene-design h2 {
  font-size:clamp(130px,14.2vw,235px);
}

.design-sleeves {
  width:30%;
  right:4%;
}

@media(max-width:760px) {
  .scene-design h2 {
    font-size:22vw;
  }

  .design-sleeves {
    width:58%;
    right:4%;
    top:35svh;
  }

  .world-index nav a {
    min-height:36px;
  }

  .world-index {
    margin-top:33px;
  }

  .header-button {
    min-height:44px;
  }

  .rail-navigation a {
    min-height:44px;
    align-items:center;
  }

  .archive-link {
    min-height:36px;
  }

  .dialog-close {
    width:38px;
    height:38px;
  }
}

@media(max-width:760px) {
  .museum-about h2 {
    font-size:12.8vw;
  }
}

.world-frame {
  min-height:491px;
}

.world-index {
  margin-top:141px;
}

.rail-foot {
  min-height:28px;
}

.interlude-heading {
  padding-top:38px;
}

.scene-opening h2 {
  margin-top:35px;
}

.scene-narrative {
  padding-bottom:calc(19svh + 58px);
}

.about-copy {
  min-height:203px;
}

.collections-menu .motion-toggle {
  position:static;
  display:block;
  margin:23px 0 0;
  padding:0 0 4px;
  font-size:10px;
  opacity:.7;
  border-bottom:1px solid currentColor;
}

@media(min-width:1700px) {
  .world-frame {
    min-height:525px;
  }

  .world-index {
    margin-top:150px;
  }
}

@media(max-width:1100px) {
  .world-frame {
    min-height:475px;
  }

  .world-index {
    margin-top:132px;
  }
}

@media(max-width:760px) {
  .world-frame {
    min-height:510px;
  }

  .world-index {
    margin-top:117px;
  }

  .interlude-heading {
    padding-top:34px;
  }

  .scene-opening h2 {
    margin-top:30px;
  }

  .scene-narrative {
    padding-bottom:calc(120px + 77px);
  }

  .about-copy {
    min-height:213px;
  }

  .collections-menu .motion-toggle {
    min-height:36px;
    margin-top:14px;
  }
}

@media(max-width:380px) {
  .world-frame {
    min-height:490px;
  }

  .world-index {
    margin-top:120px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *,
  *:before,
  *:after {
    animation:none!important;
    transition:none!important;
  }

  .world-art {
    transform:scale(1.04)!important;
  }

  .scene-image {
    transform:none!important;
  }
}

.site-header {
  transition:color .25s,background .25s,opacity .28s,transform .28s;
}

.site-header,
.collections-menu {
  will-change:opacity,transform;
}

body:not([data-chapter=top]) .site-header {
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
}

body:not([data-chapter=top]) .collections-menu {
  display:none;
}

@media (max-width:760px), (hover:none) and (pointer:coarse) {
  body[data-chapter] .site-header {
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    visibility:visible;
    transition:color .25s,background .25s,opacity .22s,transform .22s,visibility 0s;
  }
  body.mobile-header-hidden .site-header:not(:has(:focus-visible)) {
    opacity:0;
    transform:translateY(-100%);
    pointer-events:none;
    visibility:hidden;
    transition:color .25s,background .25s,opacity .22s,transform .22s,visibility 0s .22s;
  }
  body[data-chapter] .collections-menu:not([hidden]) {
    display:block;
  }
}

.world-frame {
  overflow:hidden;
  padding:54px 20px;
  color:var(--ink);
  border:0;
  background:#d8c690;
  box-shadow:9px 18px 35px #10211680;
  clip-path:polygon(0 1.1%,1.5% 0,7% .7%,14% 0,22% .8%,31% .1%,39% 1%,48% 0,56% .7%,66% .1%,74% 1%,84% 0,92% .6%,100% 0,99.4% 9%,100% 18%,99.2% 28%,100% 39%,99.3% 49%,100% 60%,99.1% 70%,100% 81%,99.3% 91%,100% 100%,91% 99.3%,82% 100%,73% 99.2%,64% 100%,55% 99.3%,46% 100%,37% 99.1%,28% 100%,19% 99.2%,10% 100%,0 99.1%,.7% 90%,0 80%,.8% 70%,0 60%,.7% 50%,0 40%,.8% 30%,0 20%,.7% 10%);
}

.world-frame::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.82;
  mix-blend-mode:multiply;
  background-image:linear-gradient(117deg,transparent 18%,#755b331c 29%,#fff6d954 30%,transparent 33%),linear-gradient(56deg,transparent 48%,#5e45251e 51%,#fff4cf50 52%,transparent 55%),linear-gradient(-27deg,transparent 65%,#6c512c1a 68%,#fff7dc4c 69%,transparent 72%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  background-size:100% 100%,100% 100%,100% 100%,180px 180px;
}

.world-frame>* {
  position:relative;
  z-index:1;
}

.world-index {
  margin-top:auto;
}

.world-index nav a:hover {
  color:#795128;
}