:root {
  color-scheme: light;
  --paper: #f4efe6;
  --page-ink: #292422;
  --quiet: #645751;
  --rust: #883e31;
  --rule: #d5c8bc;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.66' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.56'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--page-ink); font: 400 1rem/1.65 var(--sans); }
a { color: inherit; text-underline-offset: .24em; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
.masthead, main { width: min(1280px, calc(100% - 72px)); margin-inline: auto; }
.masthead { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--rule); }
.masthead a { font-size: .81rem; }
.masthead > span, .eyebrow { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
.accent, .eyebrow { color: var(--rust); }
main { padding-top: clamp(30px, 4.2vw, 64px); }
.exhibition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, .35fr); align-content: start; gap: 24px clamp(32px, 4.3vw, 74px); align-items: start; }
.intro { grid-column: 2; grid-row: 1; align-self: end; }
.eyebrow { margin: 0; }
.disc { display: inline-block; width: .55em; height: .55em; margin-right: .48em; border-radius: 50%; vertical-align: .13em; background: currentColor; }
h1, h2 { margin: 0; font: 300 clamp(2.7rem, 5.7vw, 5.4rem)/.92 var(--serif); letter-spacing: -.075em; }
h1 { margin: .23em 0 .32em; }
h1 em { color: var(--rust); }
.lede { margin: 0; max-width: 32ch; color: var(--quiet); font-size: .91rem; }
.exhibit { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
figcaption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 5px 16px; margin-top: 12px; color: var(--quiet); font-size: .78rem; }
.controls { grid-column: 2; grid-row: 2; border-top: 1px solid var(--rule); padding-top: 19px; }
.controls-title { margin-bottom: 10px; }
.presets { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.presets button { min-height: 44px; padding-inline: 5px; border: 1px solid #b6a69a; background: transparent; color: var(--page-ink); font-size: .76rem; cursor: pointer; }
.presets button:hover { border-color: var(--rust); }
.presets button[aria-pressed="true"] { background: #402d27; border-color: #402d27; color: var(--paper); }
.adjustment { margin-top: 14px; }
.adjustment > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: .8rem; }
.adjustment output { font-variant-numeric: tabular-nums; color: var(--quiet); }
.adjustment input { display: block; width: 100%; height: 38px; margin: 0; accent-color: var(--rust); cursor: ew-resize; }
.state-note, .no-script { margin: 8px 0 0; font-size: .79rem; color: var(--quiet); }
.print-room { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(35px, 9vw, 145px); margin-top: clamp(38px, 6vw, 83px); padding-block: clamp(30px, 5vw, 65px); border-block: 1px solid var(--rule); }
.print-room h2 { margin: .23em 0 .4em; font-size: clamp(2.6rem, 5vw, 4.4rem); }
.print-copy p:not(.eyebrow) { margin: 0 0 9px; color: var(--quiet); font-size: .91rem; max-width: 62ch; }
.plate-links { align-self: center; }
.plate-links a { display: flex; gap: 14px; align-items: center; padding-block: 13px; min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--rule); font-size: .85rem; }
.plate-links a:first-child { border-top: 1px solid var(--rule); }
.plate-links a:hover { color: var(--rust); }
.plate-links a > span:last-child { margin-left: auto; }
.plate-links small { display: block; color: var(--quiet); }
.plate-letter { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 50%; color: var(--rust); }
footer { padding-block: 20px 33px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; font-size: .76rem; color: var(--quiet); }
footer p { margin: 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 17px; }

/* Both black ink SVGs remain independent. The clip models the circular mount. */
.bench {
  --angle: 0deg;
  isolation: isolate;
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 23% 3%, #ab7350 0%, #70402e 28%, transparent 66%),
    radial-gradient(ellipse at 79% 38%, #51312a 0%, #1f1718 78%);
}
.poster { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; }
.bench[data-ready] .poster { display: none; }
.bench::before, .mount::before, .source-slip::after, .aperture::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--grain) 0 0 / 150px 150px;
  mix-blend-mode: multiply;
  opacity: .5;
}
.bench::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  background:
    linear-gradient(143deg, #ffe1ac21 5%, transparent 45%, #2616166e 94%),
    repeating-linear-gradient(101deg, #d7a68010 0 1px, transparent 1px 5px);
  box-shadow: inset 0 0 9cqw #200e1554;
  mix-blend-mode: multiply;
}
.source-slip {
  position: absolute;
  top: 28%;
  left: 12.8%;
  width: 24.5%;
  height: 56%;
  border-radius: .12cqw;
  transform: rotate(-13deg);
  background: linear-gradient(126deg, #eed8a7, #c4a272 82%);
  box-shadow: .15cqw .45cqw .18cqw #311714, 1.35cqw 2cqw 2.2cqw #1e101499;
}
.source-image {
  position: absolute;
  width: 83%;
  height: 79%;
  top: 5.7%;
  left: 8.5%;
  background: #bd974f url('../../assets/the-listener.jpg') 46% 52% / 223% auto no-repeat;
  filter: saturate(.76) sepia(.18) brightness(.84);
  border: 1px solid #6d514c84;
}
.swatches { display: flex; position: absolute; bottom: 4%; left: 8.5%; gap: .25cqw; }
.swatches i { width: .93cqw; aspect-ratio: 1; background: #af9247; }
.swatches i:nth-child(2) { background: #263a54; }
.swatches i:nth-child(3) { background: #a4aaa3; }
.swatches i:nth-child(4) { background: #a25750; }
.inscription { position: absolute; bottom: 7%; left: 8%; font: italic 300 1.25cqw var(--serif); color: #403630; }
.mount {
  position: absolute;
  width: 59%;
  aspect-ratio: 1;
  top: 12%;
  left: 32.5%;
  transform: rotate(-5.5deg);
  background: linear-gradient(133deg, #f6dfad 0%, #ddbc87 46%, #a37a53 100%);
  box-shadow:
    0 0 .15cqw #28161a, .24cqw .35cqw .1cqw #a77c54,
    .36cqw .64cqw .12cqw #533527, .65cqw 1.28cqw .75cqw #211218ba,
    2.7cqw 4.1cqw 4.3cqw #1b1116a8;
  border-radius: .24cqw;
}
.mount::before { opacity: .66; }
.mount-impression {
  position: absolute;
  inset: 3.25%;
  border: 1px solid #8d674855;
  box-shadow: 0 1px #fdf0ca8c, inset 0 1px #fff3c161;
}
.mount-lettering {
  position: absolute;
  bottom: 4%;
  inset-inline: 5.1%;
  display: flex;
  justify-content: space-between;
  font: 600 .74cqw/1 var(--sans);
  letter-spacing: .15em;
  color: #573b36;
}
.assembly {
  position: absolute;
  inset: 7.1%;
  border-radius: 50%;
  background: #392b25;
  box-shadow: 0 0 0 .19cqw #614431, 0 0 0 .37cqw #f3dba7a9, .3cqw .6cqw 1.2cqw #2e1c206c;
}
.aperture {
  position: absolute;
  inset: 3.5%;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(132deg, #fff0c2 0%, #f4dba0 41%, #dfbb7b 77%, #cfa364 100%);
  box-shadow: inset .38cqw .48cqw 1.15cqw #3d212365;
}
.aperture::after { z-index: 1; opacity: .22; }
#projection {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(clamp(.52px, .13cqw, 1.6px));
}
.rim, .turner, .glass-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.rim {
  z-index: 2;
  border: .18cqw solid #8b6450;
  box-shadow: inset .33cqw .3cqw .18cqw #f5dbab80, inset -.26cqw -.4cqw .5cqw #2f2028cc, 0 .22cqw .3cqw #634b38;
}
.turner {
  z-index: 3;
  inset: 1.7%;
  border: .12cqw solid #edcb9296;
  box-shadow: inset -.07cqw -.11cqw .1cqw #fac98187, inset .08cqw .07cqw .04cqw #fff3ca96;
  transform: rotate(var(--angle));
}
.turner i {
  position: absolute;
  inset: auto auto -.38cqw calc(50% - .09cqw);
  width: .18cqw;
  height: 1.3cqw;
  background: #fff0c6;
  box-shadow: 0 0 .15cqw #302629;
}
.index-tick { position: absolute; inset: auto auto -1.14cqw calc(50% - .08cqw); width: .16cqw; height: .65cqw; background: #62352b; }
.glass-sheen {
  z-index: 4;
  inset: 3.5%;
  opacity: .62;
  background: linear-gradient(133deg, #fff2b7a0, #fff3cc28 26%, transparent 49%),
    linear-gradient(13deg, #24172688, transparent 25%, transparent 82%, #ffcf821a);
  box-shadow: inset .09cqw .12cqw .08cqw #fff5c39e, inset -.2cqw -.22cqw .58cqw #3c283b77;
}
.glass-lift {
  display: none;
  position: absolute;
  z-index: 5;
  width: 38%;
  aspect-ratio: 1;
  top: 18%;
  left: -15%;
  border-radius: 50%;
  transform: rotate(13deg);
  background: linear-gradient(124deg, #d9ebd267, #99c4a81a 31%, #3e5c4e33 58%, #c7a6774d);
  border: .23cqw solid #cbcdab9c;
  box-shadow: inset -.45cqw -.45cqw .56cqw #34201a85, .5cqw .65cqw .84cqw #331c2382;
}
.glass-lift::after { content: ''; position: absolute; inset: 4%; border-radius: inherit; opacity: .33; background: url('plate-b.svg') center / cover no-repeat; }
.bench[data-glass="lifted"] :is(.turner, .glass-sheen) { display: none; }
.bench[data-glass="lifted"] .glass-lift { display: block; }
.lamp {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 17% 0, #ffd88a45 0%, transparent 68%);
  mix-blend-mode: screen;
}

@media (max-width: 840px) {
  .masthead, main { width: calc(100% - 48px); }
  .exhibition { grid-template-columns: minmax(0, 1fr) minmax(210px, .48fr); gap: 20px 25px; }
  .controls { padding-top: 12px; }
}
@media (max-width: 660px) {
  .masthead, main { width: calc(100% - 32px); }
  .masthead { min-height: 58px; }
  .masthead > span { font-size: .54rem; text-align: right; }
  main { padding-top: 28px; }
  .exhibition { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .intro, .exhibit, .controls { grid-area: auto; }
  .lede { max-width: 42ch; }
  .controls { padding-top: 13px; }
  .print-room { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-contrast: more) {
  :root { --rule: #82746a; --quiet: #453831; }
}