:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 0.93rem/1.65 var(--sans);
}
a { color: inherit; text-underline-offset: 0.24em; }
[hidden] { display: none !important; }
.masthead, main { width: min(calc(100% - 96px), 1380px); margin-inline: auto; }
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}
.masthead a { text-decoration: none; }
.masthead a:hover { text-decoration: underline; }
.masthead span, .overline {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.masthead span span, .separator { color: var(--accent); padding-inline: 0.2em; }
.study {
  display: grid;
  grid-template-columns: minmax(240px, 0.73fr) minmax(0, 1.7fr);
  column-gap: clamp(30px, 5vw, 90px);
  padding-block: clamp(30px, 6vw, 84px) 28px;
  align-items: start;
  align-content: start;
}
.intro { grid-column: 1; grid-row: 1; align-self: end; }
.overline { margin: 0; }
.disc {
  display: inline-block;
  width: 0.47rem;
  height: 0.47rem;
  border-radius: 100%;
  background: #9a5142;
  margin-right: 0.5rem;
  vertical-align: 0.025em;
}
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 300; }
h1 {
  margin-block: 0.22em 0.23em;
  font-size: clamp(3.75rem, 7.8vw, 8.9rem);
  letter-spacing: -0.068em;
  line-height: 0.81;
}
h1 em { display: block; color: #834333; margin-left: 0.27em; font-weight: inherit; }
.lede { color: var(--muted); max-width: 27ch; font-size: clamp(0.9rem, 1.26vw, 1.1rem); }
.exhibit { grid-column: 2; grid-row: 1 / span 2; margin: 0; min-width: 0; }
.gallery {
  display: grid;
  place-items: center;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.36;
  min-height: 390px;
  background:
    radial-gradient(ellipse at 37% 43%, #f3e6d0, transparent 65%),
    linear-gradient(142deg, #c8ad8f 0%, #eee1ca 40%, #dec7a7 82%, #c6a88b);
  box-shadow: inset 0 0 52px #71513823;
  perspective: 1200px;
  container-type: size;
}
.gallery::before, .gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gallery::before {
  z-index: -1;
  background:
    linear-gradient(127deg, #b2937254 7%, #6f514b15 18%, #fdf5d894 25%, #fff0cd4c 43%, transparent 50%),
    repeating-linear-gradient(127deg, transparent 0 20%, #66504507 21% 22%, #f9e8c120 22.5% 42%);
}
.gallery::after { background: url(grain.svg); opacity: 0.19; mix-blend-mode: multiply; }
.poster { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.object {
  --turn: 0deg;
  position: relative;
  width: 45%;
  height: 87%;
  width: min(49cqw, 69cqh);
  height: auto;
  aspect-ratio: 0.743;
  transform: rotateY(var(--turn));
  padding: 1.65%;
  padding: 1.8cqh;
  background:
    url(grain.svg),
    repeating-linear-gradient(93deg, #8f56346b 0 1px, #3b221c00 1px 3px, #4d281a61 3px 4px, #59392200 4px 7px),
    linear-gradient(123deg, #845537, #3f271f 49%, #69432c 93%);
  border: 1px solid #4c3326;
  box-shadow: inset 0 1px 1px #fff5d88c, inset 0 0 0 2px #35211864,
    inset 2px 1px 5px #f2b98261, 2px 3px 1px #503226a6, 6px 8px 0 #503325,
    12px 15px 18px #36211567, 23px 36px 34px #60422a38, 33px 46px 70px #6f4e2f39;
}
.linen {
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    url(grain.svg),
    repeating-linear-gradient(0deg, #5c402814 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #fffbf3b8 0 1px, transparent 1px 4px),
    linear-gradient(125deg, #e9d5af, #e5cfa7 65%, #c9ae87);
  border: 1px solid #42271e;
  box-shadow: inset 3px 5px 8px #2d211887, inset -1px -2px 3px #fff5d6a6;
}
.rim {
  width: 83%;
  aspect-ratio: 132 / 202;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: #493a33;
  box-shadow: 0 0 0 1px #3e2a1e, 0 1px 0 2px #6f4c32,
    0 2px 0 3px #f6e4c199, 2px 3px 5px 3px #3d231e61;
}
.rim::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 3px 6px 14px #2d190c8a, inset -2px -2px 1px #f7d9a66b;
  background: linear-gradient(125deg, #fff3d426 2%, transparent 40%);
}
#view { display: block; width: 100%; height: 100%; }
figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 0.74rem;
}
figcaption span:first-child { color: var(--accent); }
.interaction, .fallback { grid-column: 1; grid-row: 2; max-width: 340px; }
.interaction { margin-top: clamp(20px, 3vw, 42px); }
.position { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#degrees { font: 1.2rem var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
#angle { width: 100%; height: 32px; margin: 5px 0 6px; accent-color: var(--accent); cursor: pointer; }
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
button {
  min-height: 44px;
  border: 1px solid #ae9a82;
  background: transparent;
  color: var(--ink);
  font: 0.8rem var(--sans);
  cursor: pointer;
}
button:hover { background: #ead9c1; }
button[aria-pressed="true"] { border-color: #51362c; background: #51362c; color: #fffbf4; }
.ray-notes { margin-top: clamp(16px, 3.3vw, 46px); }
.ray-bar { display: flex; height: 4px; margin-block: 7px 8px; background: #3c665c; }
#quiet-bar { width: 100%; background: #9c625d; }
#ray-label { margin: 0; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bench {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 8vw, 125px);
  margin-top: 36px;
  padding: 28px clamp(18px, 4vw, 62px);
  background: #eae0cf;
  border-block: 1px solid var(--line);
}
.bench h2 { margin-block: 9px 5px; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -0.045em; }
.bench p:last-child { max-width: 48ch; color: var(--muted); }
.plates { display: grid; align-content: center; }
.plates a { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; min-height: 44px; gap: 6px; border-bottom: 1px solid #bfb29d; text-decoration: none; }
.plates a:hover { text-decoration: underline; }
.plates a:first-child { border-top: 1px solid #bfb29d; }
.plates a span, .plates a small { color: var(--accent); font-size: 0.68rem; letter-spacing: 0.06em; }
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding-block: 18px 28px;
  font-size: 0.77rem;
  color: var(--muted);
}
footer nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
@media (max-width: 850px) {
  .masthead, main { width: min(calc(100% - 38px), 1380px); }
  .study { grid-template-columns: minmax(190px, 0.75fr) minmax(0, 1.55fr); column-gap: 20px; }
  .gallery { min-height: 365px; }
}
@media (max-width: 640px) {
  .masthead { min-height: 58px; }
  .masthead a { font-size: 0.79rem; }
  .masthead span { font-size: 0.58rem; }
  .study { display: flex; flex-direction: column; padding-top: 28px; }
  .intro { align-self: auto; }
  h1 { line-height: 0.97; }
  h1 em { display: inline; margin: 0; }
  .lede { max-width: 39ch; }
  .exhibit { width: 100%; }
  .gallery { min-height: 0; aspect-ratio: 1.16; }
  .object { width: min(56cqw, 63cqh); }
  .interaction { width: 100%; max-width: none; }
  .bench { grid-template-columns: 1fr; row-gap: 10px; margin-top: 8px; }
  footer p { margin: 0; }
}