:root {
  --paper: #f6efdf;
  --ink: #253730;
  --muted: #4e5d50;
  --line: #cabc9d;
  --accent: #8a4938;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(ellipse at 30% 0, #f9f4e8, transparent 65%), var(--paper);
  font: 400 .92rem/1.55 var(--sans);
}
.mast, main, footer {
  width: min(1360px, calc(100% - clamp(36px, 10vw, 152px)));
  margin: 0 auto;
}
.mast, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.mast {
  min-height: 66px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
a { color: inherit; text-underline-offset: .24em; }
.mast a { text-decoration: none; }
.mast a:hover { text-decoration: underline; }
.mast span span, .mast a span, .spec span { color: var(--accent); padding-inline: .2em; }
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .45fr);
  align-items: end;
  gap: 30px;
  padding: clamp(34px, 5vw, 76px) 0 clamp(25px, 3.5vw, 50px);
}
.eyebrow {
  color: var(--accent);
  margin: 0 0 .85rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.marker::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 8px;
  margin-right: 9px;
  background: repeating-linear-gradient(90deg, #aa7160 0 1px, transparent 1px 4px);
}
h1, h2 { margin: 0; font: 350 1rem/1.03 var(--serif); }
h1 { font-size: clamp(3.4rem, 7.7vw, 8rem); letter-spacing: -.06em; }
em { color: var(--accent); font-weight: 350; }
.intro-copy {
  max-width: 24ch;
  margin: 0 0 3px;
  color: var(--muted);
  font: 350 clamp(1.2rem, 2.2vw, 1.78rem)/1.32 var(--serif);
}
.exhibit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .30fr); gap: 28px; }
figure { margin: 0; min-width: 0; }
.scene {
  overflow: hidden;
  background: #d9c2a1;
  aspect-ratio: 1080 / 660;
  box-shadow: 0 0 0 1px rgb(95 68 41 / 15%);
}
.scene > *, .plates img { display: block; width: 100%; height: auto; }
.scene [hidden] { display: none; }
figcaption, .spec {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.bench {
  align-self: start;
  border: 1px solid var(--line);
  padding: clamp(16px, 2.1vw, 30px);
  background: rgb(255 252 241 / 46%);
}
.bench h2 { font-size: clamp(1.75rem, 2.6vw, 2.55rem); letter-spacing: -.035em; }
.bench-top p:last-child { color: var(--muted); margin: .75em 0 1.35em; font-size: .85rem; }
fieldset { margin: 0; border: 0; padding: 0; min-inline-size: 0; }
legend, .range label { padding: 0; font-size: .76rem; font-weight: 600; }
.switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #9d9b83;
  margin-block: 8px 18px;
}
.switch label { display: grid; position: relative; }
.switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch span {
  padding: 9px 3px;
  text-align: center;
  font-size: .8rem;
}
.switch input:checked + span { background: #32483b; color: #fffbec; }
.switch input:focus-visible + span { outline: 3px solid #a35c42; outline-offset: 3px; z-index: 1; }
.range { margin-block: 0 16px; }
.range-head, .range-scale { display: flex; justify-content: space-between; gap: 8px; }
.range output { color: var(--accent); font-variant-numeric: tabular-nums; font-size: .79rem; }
.range input { display: block; width: 100%; height: 22px; margin: 3px 0 0; accent-color: #486753; cursor: pointer; }
.range-scale { color: var(--muted); font-size: .62rem; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
button {
  color: var(--ink);
  background: transparent;
  border: 1px solid #9e987f;
  padding: 8px 10px;
  min-height: 36px;
  font: 600 .69rem var(--sans);
  cursor: pointer;
}
button:hover { background: #e9ddc7; }
.spec { justify-content: flex-start; border-top: 1px solid var(--line); margin: 16px 0 0; padding-top: 12px; gap: 3px; }
.status { color: var(--accent); font-size: .76rem; }
.status:empty { display: none; }
.observations {
  margin-top: clamp(44px, 6vw, 86px);
  padding-top: clamp(22px, 4vw, 50px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 30px;
  border-top: 1px solid var(--line);
}
.notes h2 { font-size: clamp(2.15rem, 4vw, 3.9rem); letter-spacing: -.05em; }
.notes h2 + p { color: var(--muted); max-width: 34ch; }
.notes a { font-size: .76rem; }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plates img { aspect-ratio: 1.38; object-fit: cover; }
footer { margin-top: clamp(36px, 6vw, 75px); padding: 14px 0 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; }
footer div { display: flex; flex-wrap: wrap; gap: 6px 22px; }

@media (max-width: 810px) {
  .exhibit, .observations { grid-template-columns: minmax(0, 1fr); }
  .exhibit { gap: 18px; }
  .bench { max-width: 32rem; width: 100%; }
}
@media (max-width: 600px) {
  .intro { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .intro-copy { max-width: 29ch; }
  .scene { aspect-ratio: 1.3; }
  .scene > * { height: 100%; object-fit: cover; }
  .plates { gap: 10px; }
  .plates img { aspect-ratio: 1.05; }
  .mast { min-height: 54px; letter-spacing: .08em; }
}