/* Integration proposal. Load after type.css. No font files are distributed.
   Apple: native SF through -apple-system/BlinkMacSystemFont.
   Other platforms: their native system UI font; shapes and wraps differ. */
:root {
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--font);
  --db-reveal-duration: 520ms;
  --db-interaction-duration: 180ms;
  --db-reveal-ease: cubic-bezier(.22, .61, .36, 1);
}
/* Keep the existing type scale. Use this section size for the new gallery. */
.scenario-heading { font-family: var(--display); font-size: 3rem; line-height: 1.08334; font-weight: 600; letter-spacing: -.003em; }
.scenario-caption { color: #6e6e73; font-size: 1.0625rem; line-height: 1.35295; letter-spacing: -.016em; padding: 28px 16px 0; }
.scenario-caption strong { color: #1d1d1f; font-weight: 600; }
.scenario-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--scenario-gutter, 24px); overscroll-behavior-x: contain; }
.scenario-card { flex: 0 0 min(65vw, 830px); min-width: 0; scroll-snap-align: start; }
.scenario-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
/* Only elements prepared below the viewport wait for their first entry fade. */
.motion-ready [data-enter="pending"] { opacity: 0; transform: translateY(18px); }
/* Shared choice-card geometry and state live in components.css. */
.lid-choice, .lid-choice[aria-pressed="true"] { min-width: 0;}
.lid-choice > span:nth-child(2) { min-width: 0;}
.lid-choice .swatch { width: 34px; height: 34px;}
.lid-art[data-crossfade-stage] { position: relative; aspect-ratio: 4 / 3; }
.lid-art[data-crossfade-stage] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; transition: none; }
/* Created by JS only: a failed import or disabled JS leaves a usable page. */
.duobook-preloader { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; gap: 16px; background: white; pointer-events: none; }
.duobook-preloader-mark { color: #1d1d1f; font: 600 21px/25px var(--font); letter-spacing: -.025em; text-align: center; }
.duobook-preloader-activity { width: 5px; height: 5px; margin-inline: auto; border-radius: 50%; background: #86868b; animation: db-activity 900ms ease-in-out infinite alternate; }
@keyframes db-activity { to { opacity: .25; } }
@media (max-width: 1068px) { .scenario-heading { font-size: 2.5rem; line-height: 1.1; letter-spacing: 0; } }
@media (max-width: 650px) {
  .scenario-heading { font-size: 2rem; line-height: 1.125; letter-spacing: .004em; }
  .scenario-card { flex-basis: calc(100vw - 72px); }
  .scenario-caption { font-size: 1rem; line-height: 1.375; letter-spacing: -.014em; padding-top: 24px; }
  .lid-choice .swatch { width: 30px; height: 30px;}
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-ready [data-enter="pending"] { opacity: 1; transform: none; }
  .lid-choice, .choice-tick{ animation: none;} .duobook-preloader-activity { animation: none; transition: none; }
  .scenario-track { scroll-behavior: auto; }
}