.proof-page {
  --proof-night: #202e3b;
  --proof-gold: #cbb08a;
  max-width: 1330px;
  padding-bottom: 52px;
}

.proof-header {
  border-top: 1px solid var(--merch-line);
  padding-top: clamp(22px, 4vw, 47px);
}

.proof-page h1 {
  margin: 8px 0 14px;
  font: 300 clamp(47px, 7.6vw, 104px)/.94 var(--font-serif);
  letter-spacing: -.06em;
}

.proof-page h1 em { color: var(--merch-rust); }
.proof-intro { max-width: 57ch; font-size: clamp(15px, 1.6vw, 18px); }
.proof-note { max-width: 77ch; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--merch-line); font-size: 13px; }
.proof-status { color: #70483e; font-size: 13px; }
.proof-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 9px 14px; margin: 16px 0; }
.proof-controls :is(button, select, input) { min-height: 44px; font: inherit; accent-color: var(--merch-rust); }
.proof-controls :is(button, select) { padding: 5px 11px; border: 1px solid #a9927c; color: var(--merch-ink); background: #fff9ef; }
.proof-controls button { cursor: pointer; }
.proof-controls :is(button, select, input):focus-visible { outline: 3px solid var(--merch-rust); outline-offset: 3px; }

.demos-intro { display: grid; grid-template-columns: 1.75fr 1fr; align-items: end; gap: 16px 42px; padding-bottom: clamp(24px, 4vw, 46px); }
.demos-jump { display: grid; margin: 0 0 4px; }
.demos-jump a { display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 7px 0; border-top: 1px solid var(--merch-line); font-size: 14px; }
.demos-jump .eyebrow { color: var(--merch-rust); font-variant-numeric: tabular-nums; }
.demos-set { scroll-margin-top: 14px; }
.demos-set + .demos-set { margin-top: clamp(28px, 5vw, 64px); }
.demos-set-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; border-top: 1px solid var(--merch-line); padding: 11px 0 15px; }
.demos-set-heading h2 { font: 300 clamp(27px, 4vw, 49px)/1 var(--font-serif); letter-spacing: -.04em; }
.demos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 30px); }
.demo-entry { min-width: 0; }
.demo-entry-link { display: flex; flex-direction: column; height: 100%; background: #efe5d5; border: 1px solid var(--merch-line); color: var(--merch-ink); text-decoration: none; }
.demo-entry-link:hover { border-color: var(--merch-rust); color: var(--merch-ink); }
.demo-visual { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; padding: 13px; aspect-ratio: 5 / 3; background: #bd9b7e; }
.demo-visual-gravity { background: #7a8780; }
.demo-visual-rain { background: #b3ac83; }
.demo-visual-cutwork { background: #a68e8b; }
.demo-visual-cam { background: #b99275; }
.demo-visual-geneva { background: #7c877e; }
.demo-visual-humidity { background: #91a39e; }
.demo-visual-breeze { background: #b6b499; }
.demo-visual-balance { background: #aea1a6; }
.demo-visual-snap { background: #b2877e; }
.demo-visual img { display: block; width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 4px 8px 13px #493b3450; }
.demo-copy { display: flex; flex: 1; flex-direction: column; align-items: start; padding: clamp(14px, 3vw, 27px); }
.demo-copy h3 { margin: 5px 0 9px; font: 300 clamp(26px, 3.3vw, 43px)/1.01 var(--font-serif); letter-spacing: -.04em; }
.demo-copy p:not(.eyebrow) { max-width: 43ch; font-size: 14px; }
.demo-action { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: auto; padding-top: 10px; color: var(--merch-rust); font-size: 13px; text-decoration: underline; text-underline-offset: .24em; }

@media (max-width: 700px) {
  .demos-intro { grid-template-columns: 1fr; }
  .demos-grid { gap: 14px; }
}

@media (max-width: 525px) {
  .demos-grid { grid-template-columns: 1fr; }
}