/* MOSHOO / Obsidian study. Product light, quiet type, a precise instrument edge. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: detail-root-out 240ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: detail-root-in 450ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes detail-root-out { to { opacity: 0; } }
@keyframes detail-root-in { from { opacity: 0; } to { opacity: 1; } }

body.collection-preview {
  --detail-edge: clamp(24px, 4.6vw, 88px);
  --detail-bone: #eee9e0;
  --detail-secondary: #b1a5a4;
  --detail-quiet: #938489;
  --detail-red: #cf3948;
  --detail-hairline: #ddc6c21f;
  --detail-control-bottom: 183px;
  --detail-safe-bottom: env(safe-area-inset-bottom, 0px);
  --detail-wall-opacity: .035;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-interface, sans-serif);
  color: var(--detail-bone);
  background: #080709;
}
.collection-preview button,
.collection-preview input { font-family: var(--font-interface, sans-serif); }
.collection-preview :is(button, a, input, [tabindex]):focus-visible { outline: 1px solid #f1b1b6; outline-offset: 4px; }
.collection-preview button:disabled { opacity: .35; }

/* A shallow arch and etched wall sit behind the untouched WebGL canvas. */
body.collection-preview .stage {
  height: 100dvh;
  min-height: 0;
  overflow: clip;
  background: radial-gradient(ellipse at 64% 39%, #38101b55, transparent 53%), linear-gradient(115deg, #080709 7%, #110a0e 59%, #080709);
}
.collection-preview .stage::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 35%;
  right: 12%;
  top: 12%;
  bottom: 25%;
  border: 1px solid #bd697b0d;
  border-bottom-color: transparent;
  border-radius: 48% 48% 0 0;
  background: linear-gradient(106deg, #eccdc803, transparent 31%, #da3b5705 74%, transparent);
  box-shadow: inset 15px 0 55px #10080c70, 0 0 65px #3c11200c;
  pointer-events: none;
}
.collection-preview .stage::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: .12;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #f7dbd305 3px 4px), repeating-linear-gradient(90deg, transparent 0 5px, #0000000a 5px 6px);
  pointer-events: none;
}
.collection-preview .ambient {
  z-index: 0;
  inset: -8%;
  background: radial-gradient(ellipse at 69% 28%, #9c173c38, transparent 38%), radial-gradient(ellipse at 58% 77%, #8e173028, transparent 44%);
  filter: blur(44px);
  animation-duration: 28s;
}
.collection-preview .halo { z-index: 0; left: 34%; top: 43%; width: 52vw; height: 30vw; background: radial-gradient(ellipse, #b41e3f1b, transparent 70%); filter: blur(42px); }
.collection-preview .wordmark { z-index: 0; top: 18%; right: 14%; left: auto; width: min(35vw, 540px); height: min(16vw, 245px); font-size: 0; background: url('/assets/brand/moshoo-lockup.svg') center / contain no-repeat; filter: blur(.5px); transform: perspective(1000px) rotateY(-8deg); }
body.collection-preview .stage[data-phase] .wordmark { opacity: var(--detail-wall-opacity); }
.collection-preview .floor-line { z-index: 0; top: 74%; left: 31%; right: 6%; opacity: .22; }
.collection-preview #scene { z-index: 1; }

/* Header and product annotation share the same fine, warm metal line. */
body.collection-preview .topbar { height: 94px; padding: 0 var(--detail-edge); background: linear-gradient(#080709ed, #08070954 66%, transparent); }
.collection-preview .brand { min-width: 44px; min-height: 44px; }
.collection-preview .brand img { width: 106px; height: auto; opacity: .9; }
.collection-preview .topbar nav { gap: 28px; font-size: 10px; letter-spacing: .065em; }
.collection-preview .topbar nav :is(a, button) { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 2px; color: #c7b9b6; }
.collection-preview .topbar nav :is(a, button):hover { color: #f2c7c9; }
.collection-preview .topbar nav .collection-link { display: inline-flex; }
.collection-preview .edition { color: var(--detail-quiet); font: 8px/1.6 var(--font-mono, monospace); letter-spacing: .13em; }
.collection-preview .edition span { color: #c18c94; }

body.collection-preview .chapter { z-index: 3; left: var(--detail-edge); top: 26%; right: auto; width: min(29vw, 350px); }
.collection-preview .eyebrow { gap: 9px; color: #c08f95; font-family: var(--font-interface, sans-serif); font-size: 8px; font-weight: 400; line-height: 1.5; letter-spacing: .15em; }
.collection-preview .eyebrow i { width: 3px; height: 3px; border-radius: 0; box-shadow: none; background: var(--detail-red); }
body.collection-preview h1 { margin: 20px 0 19px; font: 400 clamp(32px, 3.5vw, 54px)/1.42 var(--font-editorial, serif); letter-spacing: .025em; text-wrap: balance; }
.collection-preview h1 .title-line { display: block; }
.collection-preview .chapter p { max-width: 260px; margin: 0 0 27px; color: var(--detail-secondary); font-size: 11px; line-height: 2.05; letter-spacing: .035em; }
body.collection-preview .intro .explore,
.collection-preview #retry-model { position: static; display: flex; width: fit-content; min-width: 160px; min-height: 48px; align-items: center; justify-content: space-between; gap: 40px; margin: 0; padding: 0 17px; border: 1px solid #bb3c4c; border-radius: 1px; background: #98283a; color: #fff0e9; box-shadow: 0 8px 28px #6b051d20; font-size: 11px; letter-spacing: .07em; transition: background .24s ease, border-color .24s ease, color .24s ease; }
.collection-preview .intro .explore:hover,
.collection-preview #retry-model:hover { background: #b73546; border-color: #ec8691; color: #fff8f3; }
.collection-preview .explore span { font-size: 17px; }
.collection-preview .small-note { max-width: 240px; margin-top: 26px; color: var(--detail-quiet); font: 8px/1.8 var(--font-mono, monospace); letter-spacing: .09em; }

/* Inspection withdraws the editorial copy; the return action stays reachable. */
body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .chapter { top: 120px; width: 230px; padding-left: 14px; border-left: 1px solid #b86b792c; }
body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) h1 { margin: 12px 0 17px; font-size: 22px; line-height: 1.5; letter-spacing: .025em; }
.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .chapter :is(p, .small-note) { display: none; }
body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .intro .explore { min-width: 132px; min-height: 44px; gap: 27px; padding: 0 12px; border-color: #93616b70; background: #130b103d; box-shadow: none; font-size: 10px; }
.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .intro .explore:hover { background: #80283d40; border-color: #cd7e8a; }

body.collection-preview .chapter-nav { z-index: 3; top: 32%; right: calc(var(--detail-edge) - 8px); gap: 4px; }
.collection-preview .chapter-nav button { min-width: 68px; min-height: 44px; padding: 0 8px; gap: 12px; }
.collection-preview .chapter-nav span { color: #c1b3b1; font-size: 9px; letter-spacing: .09em; }
.collection-preview .chapter-nav i { width: 3px; height: 3px; background: #816972; }
.collection-preview .chapter-nav .active i { background: #e58a95; box-shadow: 0 0 0 5px #c3475910; }
body.collection-preview .model-label,
body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .model-label { z-index: 3; top: 48%; left: auto; right: calc(var(--detail-edge) + 63px); width: 140px; }
.collection-preview .model-label > span { display: inline-block; padding: 0 0 10px; border-bottom: 1px solid #bd7b8638; color: #c69aa1; font: 11px/1.2 var(--font-mono, monospace); letter-spacing: .025em; }
body.collection-preview .model-label h3 { margin: 13px 0 7px; font: 400 24px/1.5 var(--font-editorial, serif); letter-spacing: .045em; }
.collection-preview .model-label p { margin: 0; color: var(--detail-secondary); font-size: 10px; line-height: 1.9; letter-spacing: .025em; }
.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .model-label p { color: var(--detail-quiet); }

/* Every control is a 44px target; ranges keep the same interaction geometry. */
body.collection-preview .viewer-controls { z-index: 3; bottom: calc(var(--detail-control-bottom) + var(--detail-safe-bottom)); gap: 0; padding: 4px; border: 1px solid var(--detail-hairline); border-radius: 3px; background: #100b0eeb; box-shadow: 0 12px 36px #00000026; backdrop-filter: blur(16px); }
.collection-preview .viewer-controls > button { min-width: 54px; min-height: 44px; padding: 0 15px; border-radius: 1px; color: #d6cac5; font-size: 10px; letter-spacing: .02em; }
.collection-preview .viewer-controls > button:hover { color: #f6d2d2; background: #b13c4c12; }
.collection-preview .viewer-controls > button[aria-pressed="true"] { color: #ffd0d2; background: #8a25392e; }
.collection-preview .rotate-icon { font-size: 21px; }
.collection-preview .zoom-control { padding: 0 7px; gap: 0; border-color: var(--detail-hairline); }
.collection-preview .zoom-control button { width: 44px; height: 44px; min-width: 44px; color: #ddc9c9; font-size: 17px; font-weight: 300; }
.collection-preview .zoom-control input { width: 60px; min-width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; accent-color: var(--detail-red); cursor: pointer; appearance: none; -webkit-appearance: none; }
.collection-preview .zoom-control input::-webkit-slider-runnable-track { height: 2px; border: 0; border-radius: 2px; background: #76505b; }
.collection-preview .zoom-control input::-webkit-slider-thumb { width: 9px; height: 9px; margin-top: -3.5px; border: 1px solid #f4acb5; border-radius: 50%; background: #c74a60; box-shadow: 0 0 9px #bc30442b; appearance: none; -webkit-appearance: none; }
.collection-preview .zoom-control input::-moz-range-track { height: 2px; border: 0; border-radius: 2px; background: #76505b; }
.collection-preview .zoom-control input::-moz-range-progress { height: 2px; border-radius: 2px; background: #c74a60; }
.collection-preview .zoom-control input::-moz-range-thumb { width: 9px; height: 9px; border: 1px solid #f4acb5; border-radius: 50%; background: #c74a60; }
.collection-preview .zoom-control input:disabled { opacity: .35; cursor: wait; }
body.collection-preview .interaction-hint { z-index: 3; bottom: calc(var(--detail-control-bottom) - 25px + var(--detail-safe-bottom)); color: #ad949d; font-size: 8px; line-height: 1.4; letter-spacing: .055em; }
.collection-preview .interaction-hint > span { font-size: 16px; line-height: 1; color: #bda3ac; }
.collection-preview .interaction-hint i { background: #77515c; }

/* A restrained contact sheet; the shaft series deliberately remains scrollable. */
body.collection-preview .collection { z-index: 3; left: 24%; right: 24%; bottom: calc(54px + var(--detail-safe-bottom)); }
.collection-preview .collection-heading { margin: 0 0 10px; color: #b8a5aa; font-size: 8px; line-height: 1.4; letter-spacing: .1em; }
.collection-preview .collection-heading > span:last-child { color: #b6959d; font: 8px/1.4 var(--font-mono, monospace); }
.collection-preview .swatches { gap: 7px; overflow-x: auto; padding: 1px 1px 5px; scrollbar-width: thin; scrollbar-color: #6f3b48 transparent; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
body.collection-preview .swatch { height: 64px; min-width: 44px; min-height: 44px; flex: 1 0 44px; border: 1px solid #b58f991e; border-bottom-color: #b58f9940; border-radius: 1px; background: #1710148c; scroll-snap-align: start; transition: border-color .24s ease, background .24s ease; }
.collection-preview .swatch img { left: 50%; top: -24px; height: 106px; opacity: .62; transform: translateX(-50%) rotate(8deg); }
.collection-preview .swatch.active img,
.collection-preview .swatch:hover img { transform: translateX(-50%) rotate(3deg); opacity: .95; }
body.collection-preview .swatch span { padding: 9px 0 7px; color: #c7b8bd; background: linear-gradient(transparent, #130c10 62%); font: 400 9px/1.2 var(--font-mono, monospace); letter-spacing: .03em; }
.collection-preview .swatch.active { border-color: #c6596a; background: #6821342e; box-shadow: inset 0 -1px #ca6579; }
.collection-preview .swatch.active span { color: #f5c5cb; }
.collection-preview .swatch.pending::after { width: 10px; height: 10px; top: 7px; right: 5px; }
body.collection-preview[data-series="shaft"] .swatches { justify-content: flex-start; }
body.collection-preview[data-series="shaft"] .swatch { flex: 0 0 88px; max-width: 96px; height: 51px; min-width: 44px; align-items: center; }
body.collection-preview[data-series="shaft"] .swatch span { padding: 0; background: none; font-family: var(--font-interface, sans-serif); font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
body.collection-preview .stage-footer { left: var(--detail-edge); right: var(--detail-edge); bottom: calc(7px + var(--detail-safe-bottom)); min-height: 44px; color: var(--detail-quiet); font: 7px/1.5 var(--font-mono, monospace); letter-spacing: .11em; }
.collection-preview .stage-footer button { min-width: 44px; min-height: 44px; padding: 0; color: #b7a0a8; font-size: 9px; letter-spacing: .04em; }

/* Waiting, references and material comparison use the same exhibition finish. */
body.collection-preview #loading { left: 59%; top: 44%; transform: translate(-50%, -50%); padding: 18px 22px; border: 1px solid #c37c8b15; border-radius: 2px; background: #100a0edb; }
.collection-preview #loading b { color: #d6c2c9; font-family: var(--font-interface, sans-serif); font-size: 10px; letter-spacing: .055em; }
body.collection-preview #model-error { padding: 28px; border: 1px solid #915666; border-radius: 2px; background: #110b10f5; color: var(--detail-bone); }
.collection-preview #model-error h2 { font-family: var(--font-editorial, serif); font-size: 22px; }
.collection-preview #retry-model { margin: 15px auto 0; justify-content: center; }
.collection-preview dialog { max-height: calc(100dvh - 28px); border-color: #b97c8c36; border-radius: 2px; background: #100c0f; color: var(--detail-bone); }
.collection-preview dialog::backdrop { background: #050306d9; backdrop-filter: blur(14px); }
.collection-preview dialog .close { min-width: 44px; min-height: 44px; color: #d1b8c1; font-weight: 300; }
body.collection-preview #about-modal { width: 520px; padding: 46px 40px 34px; overflow: auto; }
.collection-preview #about-modal h2 { margin: 22px 0; font: 400 27px/1.65 var(--font-editorial, serif); letter-spacing: .025em; }
.collection-preview #about-modal p { color: #c3b0b7; font-size: 12px; line-height: 2; letter-spacing: .015em; }
.collection-preview #about-modal .material-panel { padding-top: 22px; border-top: 1px solid var(--detail-hairline); }
.collection-preview .material-switch { gap: 4px; padding: 4px; background: #080609; border-color: #8d647436; }
.collection-preview .material-switch button { min-width: 44px; min-height: 44px; font-size: 11px; }
.collection-preview .material-switch button[aria-pressed="true"] { color: #f9d8dc; background: #692236; }
.collection-preview .modal-bar { padding: 20px 24px; border-color: var(--detail-hairline); }
.collection-preview .modal-bar h2 { font-family: var(--font-editorial, serif); font-weight: 400; }
.collection-preview .reference-image { height: calc(100dvh - 228px); background: #09070a; }
.collection-preview .modal-bottom { padding: 10px 22px; }
.collection-preview .modal-bottom button { min-height: 44px; min-width: 76px; color: #d8bcc6; }
.collection-preview .modal-bottom span { color: #b299a3; font-family: var(--font-mono, monospace); }
.collection-preview #toast { max-width: calc(100vw - 32px); border-radius: 2px; background: #edcbd3; color: #37141f; font-size: 12px; text-align: center; }

@media (max-width: 1100px) {
  body.collection-preview .chapter { width: 27vw; }
  body.collection-preview h1 { font-size: clamp(29px, 3.4vw, 39px); }
  body.collection-preview .model-label,
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .model-label { right: calc(var(--detail-edge) + 38px); width: 110px; }
  body.collection-preview .model-label h3 { font-size: 21px; }
  body.collection-preview .collection { left: 19%; right: 19%; }
}

/* Portrait: one narrow editorial column leaves the product's centre unobstructed. */
@media (max-width: 680px) {
  body.collection-preview { --detail-edge: 20px; --detail-control-bottom: 174px; --detail-wall-opacity: .026; }
  body.collection-preview .topbar { height: 79px; padding-top: env(safe-area-inset-top, 0px); }
  .collection-preview .brand img { width: 85px; }
  .collection-preview .topbar nav { gap: 11px; }
  .collection-preview .topbar nav :is(a, button) { font-size: 10px; letter-spacing: 0; }
  .collection-preview .edition { display: none; }
  .collection-preview .stage::before { left: 26%; right: -18%; top: 22%; bottom: 29%; border-radius: 49% 49% 0 0; }
  body.collection-preview .wordmark { right: 5%; top: 29%; width: 62vw; height: 28vw; }
  .collection-preview .ambient { background: radial-gradient(ellipse at 68% 44%, #a51b392c, transparent 49%), radial-gradient(ellipse at 17% 84%, #5e11251f, transparent 42%); filter: blur(34px); }
  .collection-preview .halo { width: 90vw; height: 80vw; left: 20%; top: 36%; }
  .collection-preview .floor-line { left: 21%; right: -25%; top: 73%; }
  body.collection-preview .chapter { top: calc(99px + env(safe-area-inset-top, 0px)); left: var(--detail-edge); width: 145px; }
  .collection-preview .eyebrow { font-size: 7px; line-height: 1.5; letter-spacing: .08em; white-space: nowrap; }
  body.collection-preview h1 { margin: 13px 0 18px; font-size: 27px; line-height: 1.4; letter-spacing: .015em; }
  .collection-preview .chapter :is(p, .small-note) { display: none; }
  body.collection-preview .intro .explore { min-width: 132px; min-height: 44px; padding: 0 12px; gap: 24px; font-size: 10px; }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .chapter { top: calc(97px + env(safe-area-inset-top, 0px)); width: 160px; padding-left: 11px; }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) h1 { margin: 9px 0 12px; font-size: 17px; line-height: 1.5; }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .intro .explore { min-width: 123px; gap: 22px; padding: 0 10px; font-size: 10px; }
  body.collection-preview .model-label,
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .model-label { top: 43%; left: var(--detail-edge); right: auto; width: 105px; }
  .collection-preview .model-label > span { padding-bottom: 8px; font-size: 10px; }
  body.collection-preview .model-label h3 { margin: 10px 0 5px; font-size: 20px; line-height: 1.4; letter-spacing: .03em; }
  .collection-preview .model-label p { font-size: 9px; line-height: 1.8; }
  body.collection-preview .chapter-nav { top: 38%; right: 8px; gap: 0; }
  .collection-preview .chapter-nav button { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; gap: 6px; }
  .collection-preview .chapter-nav span { display: inline; color: #b7a5a9; opacity: .72; font-size: 8px; letter-spacing: 0; }
  .collection-preview .chapter-nav .active span { color: #ebc5cb; opacity: 1; }
  body.collection-preview .viewer-controls { max-width: calc(100% - 32px); padding: 3px; }
  .collection-preview .viewer-controls > button { min-width: 44px; padding: 0 11px; font-size: 10px; }
  .collection-preview .control-label { display: none; }
  .collection-preview .zoom-control { padding: 0; }
  .collection-preview .zoom-control input { width: 44px; }
  .collection-preview .interaction-hint { gap: 8px; font-size: 8px; letter-spacing: .015em; }
  body.collection-preview .collection { left: var(--detail-edge); right: var(--detail-edge); bottom: calc(62px + var(--detail-safe-bottom)); }
  .collection-preview .collection-heading { margin-bottom: 8px; font-size: 8px; }
  .collection-preview .swatches { gap: 6px; }
  body.collection-preview .swatch { flex: 0 0 46px; height: 57px; }
  .collection-preview .swatch img { top: -22px; height: 94px; }
  body.collection-preview .swatch span { padding: 7px 0 6px; font-size: 9px; }
  body.collection-preview[data-series="shaft"] .swatch { flex: 0 0 80px; min-width: 44px; height: 50px; }
  body.collection-preview[data-series="shaft"] .swatch span { font-size: 11px; letter-spacing: .015em; }
  body.collection-preview .stage-footer { bottom: calc(7px + var(--detail-safe-bottom)); font-size: 6px; letter-spacing: .08em; }
  .collection-preview .stage-footer button { font-size: 9px; }
  body.collection-preview #loading { left: 60%; top: 45%; padding: 16px; }
  .collection-preview #loading b { font-size: 10px; }
  body.collection-preview #about-modal { padding: 42px 24px 28px; }
  .collection-preview #about-modal h2 { font-size: 24px; }
  .collection-preview .modal-bar { padding: 15px 18px; }
  .collection-preview .reference-image { height: calc(100dvh - 205px); min-height: 100px; }
  .collection-preview .modal-bottom { padding: 6px 16px; }
  .collection-preview .modal-bottom button { font-size: 10px; }
}

@media (max-width: 360px) {
  body.collection-preview { --detail-edge: 14px; }
  .collection-preview .brand img { width: 73px; }
  .collection-preview .topbar nav { gap: 8px; }
  .collection-preview .topbar nav :is(a, button) { font-size: 9px; }
  body.collection-preview .chapter { width: 135px; }
  body.collection-preview h1 { font-size: 25px; }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .chapter { width: 148px; }
  .collection-preview .viewer-controls > button { padding: 0 8px; }
  .collection-preview .stage-footer > span { max-width: 140px; font-size: 6px; }
}

@media (max-height: 740px) and (min-width: 681px) {
  body.collection-preview { --detail-control-bottom: 158px; }
  body.collection-preview .topbar { height: 75px; }
  body.collection-preview .chapter { top: 23%; }
  body.collection-preview h1 { margin: 14px 0; font-size: clamp(28px, 3vw, 40px); }
  .collection-preview .chapter p { margin-bottom: 18px; }
  .collection-preview .small-note { margin-top: 19px; }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .chapter { top: 99px; }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) h1 { font-size: 20px; }
  body.collection-preview .collection { bottom: calc(48px + var(--detail-safe-bottom)); }
  body.collection-preview .swatch { height: 54px; }
  .collection-preview .swatch img { height: 96px; }
}

@media (max-height: 700px) and (max-width: 680px) and (orientation: portrait) {
  body.collection-preview { --detail-control-bottom: 161px; }
  body.collection-preview .topbar { height: 70px; }
  body.collection-preview .chapter { top: calc(84px + env(safe-area-inset-top, 0px)); }
  body.collection-preview h1 { margin: 10px 0 14px; font-size: 24px; }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .chapter { top: calc(84px + env(safe-area-inset-top, 0px)); }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) h1 { font-size: 16px; margin: 8px 0 10px; }
  body.collection-preview .model-label,
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .model-label { top: 39%; width: 93px; }
  body.collection-preview .model-label h3 { font-size: 18px; }
  .collection-preview .model-label p { font-size: 8px; }
  body.collection-preview .chapter-nav { top: 35%; }
  body.collection-preview .collection { bottom: calc(57px + var(--detail-safe-bottom)); }
  body.collection-preview .swatch { height: 51px; }
  .collection-preview .swatch img { height: 86px; }
  body.collection-preview[data-series="shaft"] .swatch { height: 47px; }
  body.collection-preview .stage-footer { bottom: calc(4px + var(--detail-safe-bottom)); }
}

/* Landscape dedicates a clear centre strip to the model and its controls. */
@media (max-height: 500px) and (min-width: 481px) and (orientation: landscape) {
  body.collection-preview { --detail-edge: 24px; --detail-control-bottom: 96px; }
  body.collection-preview .topbar { height: 61px; padding-top: 0; }
  .collection-preview .brand img { width: 80px; }
  .collection-preview .topbar nav { gap: 19px; }
  .collection-preview .topbar nav :is(a, button) { font-size: 10px; }
  .collection-preview .edition { display: none; }
  body.collection-preview .chapter { top: 78px; width: 25%; }
  body.collection-preview h1 { margin: 11px 0; font-size: clamp(21px, 3vw, 28px); line-height: 1.4; }
  .collection-preview .chapter :is(p, .small-note) { display: none; }
  body.collection-preview .intro .explore { min-width: 132px; min-height: 44px; gap: 24px; padding: 0 12px; font-size: 10px; }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .chapter { top: 77px; width: 190px; padding-left: 11px; }
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) h1 { margin: 8px 0 10px; font-size: 17px; line-height: 1.4; }
  body.collection-preview .model-label,
  body.collection-preview .stage:is([data-phase="1"], [data-phase="2"]) .model-label { left: auto; right: 57px; top: 26%; width: 105px; }
  body.collection-preview .model-label h3 { margin: 8px 0 5px; font-size: 18px; }
  .collection-preview .model-label > span { font-size: 10px; padding-bottom: 7px; }
  .collection-preview .model-label p { font-size: 8px; }
  body.collection-preview .chapter-nav { top: 20%; right: 9px; gap: 0; }
  .collection-preview .chapter-nav button { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; gap: 6px; }
  .collection-preview .chapter-nav span { display: inline; color: #b7a5a9; opacity: .72; font-size: 8px; letter-spacing: 0; }
  .collection-preview .chapter-nav .active span { color: #ebc5cb; opacity: 1; }
  body.collection-preview .viewer-controls { left: 58%; padding: 2px; }
  .collection-preview .viewer-controls > button { min-width: 44px; padding: 0 11px; }
  .collection-preview .control-label { display: none; }
  .collection-preview .zoom-control { padding: 0; }
  .collection-preview .zoom-control input { width: 46px; }
  body.collection-preview .interaction-hint { display: none; }
  body.collection-preview .collection { left: 30%; right: 6%; bottom: calc(12px + var(--detail-safe-bottom)); }
  .collection-preview .collection-heading { margin-bottom: 6px; font-size: 8px; }
  .collection-preview .swatches { gap: 5px; padding: 1px 1px 3px; }
  body.collection-preview .swatch { flex: 1 0 44px; height: 50px; min-width: 44px; }
  .collection-preview .swatch img { top: -20px; height: 83px; }
  body.collection-preview[data-series="shaft"] .swatch { flex: 0 0 80px; height: 48px; }
  body.collection-preview[data-series="shaft"] .swatch span { font-size: 10px; }
  body.collection-preview .stage-footer { left: var(--detail-edge); right: auto; bottom: calc(8px + var(--detail-safe-bottom)); }
  .collection-preview .stage-footer > span { display: none; }
  .collection-preview .stage-footer button { font-size: 9px; }
  body.collection-preview .wordmark { top: 17%; right: 13%; width: 40vw; height: 18vw; }
  body.collection-preview #loading { top: 43%; left: 57%; }
  .collection-preview dialog { max-height: calc(100dvh - 20px); }
  body.collection-preview #about-modal { padding: 30px 28px; }
  .collection-preview .reference-image { min-height: 60px; height: calc(100dvh - 175px); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .collection-preview .ambient { animation: none; transform: none; }
  .collection-preview .chapter,
  .collection-preview .swatch,
  .collection-preview .swatch img,
  .collection-preview .intro .explore { transition: none; }
}