/* R10: original painted physical bindings. The diagram is part of the paper artwork. */
.binding-showcase {
  margin-top: clamp(60px, 7vw, 116px);
  padding-top: clamp(36px, 5vw, 72px);
  border-top: 1px solid #bcc3b3;
  scroll-margin-top: 130px;
}
.binding-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:28px; }
.binding-heading h3 { font-family:var(--serif); font-size:clamp(30px,3.05vw,48px); font-weight:400; line-height:1.4; margin:0; }
.binding-heading .eyebrow { margin-bottom:16px; }
.binding-intro { max-width:410px; font-size:18px; line-height:1.9; color:var(--muted); margin:0 0 4px; }
.binding-layout { display:grid; grid-template-columns:minmax(210px,.27fr) minmax(0,1fr); align-items:center; gap:clamp(24px,3vw,56px); }
.binding-controls { min-width:0; }
.binding-showcase .binding-picker { display:flex; flex-direction:column; margin:0; gap:0; }
.binding-showcase .binding-picker button {
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:76px; width:100%;
  padding:18px 6px; border:0; border-bottom:1px solid #bcc3b3; border-radius:0;
  background:transparent; color:var(--ink); text-align:left; font-family:var(--serif); font-size:24px; line-height:1.45;
  transition:color 180ms, transform 180ms;
}
.binding-showcase .binding-picker button span:last-child { color:#b6bbae; font-size:26px; }
.binding-showcase .binding-picker button[aria-pressed=true],
.binding-showcase .binding-picker button[aria-pressed=true] span:last-child { color:#946b4d; background:transparent; }
.binding-showcase .binding-picker button:hover { color:#946b4d; }
.binding-showcase .binding-picker button:active { transform:translateY(-2px); }
.binding-showcase .binding-picker button:focus-visible { outline:2px solid #6d7b61; outline-offset:5px; }
.binding-note { min-height:174px; margin-top:30px; }
.binding-note h4 { margin:0 0 12px; color:var(--ink); font-family:var(--serif); font-size:21px; font-weight:400; line-height:1.6; }
.binding-note p { color:var(--muted); font-size:16px; line-height:1.95; margin:0; }
.binding-showcase .binding-art { position:relative; width:100%; max-width:none; min-width:0; padding:0; margin:0; }
.binding-image-stage { position:relative; width:100%; aspect-ratio:3 / 2; isolation:isolate; }
.binding-image {
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity 680ms ease; mix-blend-mode:multiply; pointer-events:none;
}
.binding-image.is-active { opacity:1; }
.binding-caption { min-height:28px; margin:10px 0 0; text-align:center; color:#7f8674; font-size:14px; line-height:1.8; }
.binding-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; text-align:center; color:var(--muted); }
.binding-error[hidden], .binding-note[hidden] { display:none; }
.binding-error p { margin:0; font-size:17px; }
.binding-error button { min-height:44px; padding:9px 22px; border:1px solid #9ca48c; color:var(--ink); font-size:16px; background:#f7f4ed; }
.binding-no-script { font-size:16px; color:var(--muted); }
@media (max-width:980px) {
  .binding-heading { gap:28px; align-items:flex-start; }
  .binding-intro { max-width:310px; font-size:17px; }
  .binding-layout { grid-template-columns:200px minmax(0,1fr); gap:24px; }
  .binding-showcase .binding-picker button { font-size:22px; }
}
@media (max-width:700px) {
  .binding-showcase { scroll-margin-top:156px; }
  .binding-heading { display:block; margin-bottom:24px; }
  .binding-intro { max-width:42em; margin-top:20px; font-size:16px; }
  .binding-layout { display:flex; flex-direction:column; gap:20px; }
  .binding-controls { width:100%; }
  .binding-showcase .binding-picker { flex-direction:row; gap:18px; }
  .binding-showcase .binding-picker button { min-height:56px; padding:10px 0; font-size:21px; gap:4px; }
  .binding-showcase .binding-picker button span:last-child { font-size:22px; }
  .binding-note { min-height:0; margin-top:20px; }
  .binding-note h4 { font-size:20px; margin-bottom:7px; }
  .binding-image-stage { margin:0; }
  .binding-caption { margin-top:8px; font-size:13px; }
  .binding-error { padding:10px; gap:8px; }
  .binding-error p { font-size:16px; }
}
@media (max-width:350px) {
  .binding-showcase .binding-picker { gap:10px; }
  .binding-showcase .binding-picker button { font-size:19px; }
  .binding-showcase .binding-picker button span:last-child { font-size:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .binding-image,.binding-showcase .binding-picker button { transition:none; }
  .binding-showcase .binding-picker button:active { transform:none; }
}
@media (forced-colors:active) {
  .binding-showcase .binding-picker button[aria-pressed=true] { border-bottom:3px solid Highlight; color:Highlight; }
}