/* Sections follow the numbering of the supplied reference screenshots. */
:where(html.shelftopia-v2) .lookback, :where(html.shelftopia-v2) .logic, :where(html.shelftopia-v2) .shifts { scroll-margin-block-start: 6rem; }
:where(html.shelftopia-v2) .lookback, :where(html.shelftopia-v2) .logic { color: #fff; }
:where(html.shelftopia-v2) .lookback { position: relative; margin-block-start: -50px; padding-block: 3rem; background: #000; }
:where(html.shelftopia-v2) .lookback__photos { overflow: hidden; }
:where(html.shelftopia-v2) .lookback__track { display: flex; width: max-content; animation: lookback-gallery var(--gallery-duration, 110s) linear infinite; }
:where(html.shelftopia-v2) .lookback__set { display: flex; flex: none; gap: 1.875rem; padding-inline-end: 1.875rem; }
:where(html.shelftopia-v2) .lookback__set > img { flex: 0 0 clamp(19rem, 28.25vw, 35rem); width: clamp(19rem, 28.25vw, 35rem); aspect-ratio: 1134 / 786; height: auto; object-fit: cover; border-radius: 2rem; }
:where(html.shelftopia-v2) .lookback__photos:hover .lookback__track { animation-play-state: paused; }
@keyframes lookback-gallery { to { transform: translateX(-50%); } }

/* The two checkerboard transitions are decorative images in normal-flow rows.
   Their center anchors stay aligned while their sides crop at smaller widths. */
:where(html.shelftopia-v2) .logic { --scene-scale: 1.4px; position: relative; overflow-x: clip; }
:where(html.shelftopia-v2) .logic__transition { position: relative; }
:where(html.shelftopia-v2) .logic__transition--entry { height: calc(520 * var(--scene-scale)); }
:where(html.shelftopia-v2) .logic__transition--exit { height: calc(493 * var(--scene-scale)); }
:where(html.shelftopia-v2) .logic__transition img { position: absolute; width: max(100%, calc(2048 * var(--scene-scale))); max-width: none; height: 100%; object-fit: cover; left: 50%; transform: translateX(-50%); }
:where(html.shelftopia-v2) .logic__content { position: relative; display: grid; gap: 1.75rem; padding: 4rem 1.5rem 7.5rem; }
:where(html.shelftopia-v2) .logic__title { display: grid; gap: .5rem; width: min(100%, 55rem); margin: 0 auto; }
:where(html.shelftopia-v2) .logic__word { position: relative; width: 55.6%; margin-inline-start: 7%; }
:where(html.shelftopia-v2) .logic__word > img:not(.logic__star) { width: 100%; }
:where(html.shelftopia-v2) .logic__star { position: absolute; width: 19%; left: -13%; top: -15%; }
:where(html.shelftopia-v2) .logic__inverted { justify-self: end; width: 67%; margin-inline-end: 7%; }
:where(html.shelftopia-v2) .logic__copy { text-align: center; font-size: 1.25rem; line-height: 1.5; font-weight: 400; }
:where(html.shelftopia-v2) .logic__copy p { margin: 0; }
:where(html.shelftopia-v2) .logic__copy p + p { margin-block-start: 1rem; }
:where(html.shelftopia-v2) .logic__coin, :where(html.shelftopia-v2) .logic__diamond { position: absolute; width: calc(108 * var(--scene-scale)); pointer-events: none; }
:where(html.shelftopia-v2) .logic__coin { left: max(2rem, calc(50% - 500 * var(--scene-scale))); top: 15rem; }
:where(html.shelftopia-v2) .logic__diamond { right: max(2rem, calc(50% - 580 * var(--scene-scale))); top: 5rem; }

:where(html.shelftopia-v2) .shifts { color: #000; background: linear-gradient(#d4badd, #bb87d8); padding-block-start: 3rem; }
:where(html.shelftopia-v2) .shifts__intro { text-align: center; padding-inline: 1rem; }
:where(html.shelftopia-v2) .shifts__intro h2 { margin: 0; font: 400 clamp(3.5rem, 5vw, 6rem)/1.02 "ShelftopiaV2LookingGlass", serif; text-transform: uppercase; }
:where(html.shelftopia-v2) .shifts__intro h2 span { display: block; color: transparent; -webkit-text-stroke: 1px #000; }
:where(html.shelftopia-v2) .shifts__intro h2 span + span { color: #fff; }
:where(html.shelftopia-v2) .shifts__intro > p { margin: 1.75rem 0 1.5rem; font-size: 1.875rem; font-weight: 600; line-height: 1.5; }
:where(html.shelftopia-v2) .shifts__scene { position: relative; display: grid; max-width: 2060px; margin-inline: auto; }
:where(html.shelftopia-v2) .shifts__art, :where(html.shelftopia-v2) .shifts__windows { grid-area: 1 / 1; }
:where(html.shelftopia-v2) .shifts__art { width: 100%; }
:where(html.shelftopia-v2) .shifts__windows { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; width: 72%; margin-inline: auto; padding-block-start: 17%; }
:where(html.shelftopia-v2) .shift-window { color: #fff; text-align: center; padding-inline: 1.4vw; }
:where(html.shelftopia-v2) .shift-window__copy { width: 100%; max-width: 22rem; margin-inline: auto; padding-inline: clamp(.75rem, 1.25vw, 1.5rem); box-sizing: border-box; }
:where(html.shelftopia-v2) .shift-window__eye { display: none; }
:where(html.shelftopia-v2) .shift-window__number { font: 400 2.5rem/1 "ShelftopiaV2LookingGlass", serif; }
:where(html.shelftopia-v2) .shift-window h3 { margin: .65rem 0 .9rem; color: #c7c5f4; font-size: clamp(.75rem, .75vw, 1rem); line-height: 1.25; font-weight: 600; }
:where(html.shelftopia-v2) .shift-window p { margin: 0; font-size: clamp(.72rem, .72vw, .95rem); line-height: 1.28; font-weight: 400; }

@media (max-width: 70rem) {
  :where(html.shelftopia-v2) .shifts { padding-block: 3rem 4rem; }
  :where(html.shelftopia-v2) .shifts__intro h2 { font-size: clamp(2.5rem, 9vw, 4rem); }
  :where(html.shelftopia-v2) .shifts__intro > p { font-size: clamp(1.15rem, 3vw, 1.75rem); }
  :where(html.shelftopia-v2) .shifts__art { display: none; }
  :where(html.shelftopia-v2) .shifts__windows { grid-area: auto; width: min(100% - 2rem, 32rem); padding-block-start: 7rem; gap: 7rem; }
  :where(html.shelftopia-v2) .shifts__windows { grid-template-columns: 1fr; }
  :where(html.shelftopia-v2) .shift-window { position: relative; padding: 0; border: 1.25rem solid #dcbfe8; border-radius: 50% 50% 0 0 / 11rem 11rem 0 0; box-shadow: 0 0 0 1px #392042, inset 1rem .5rem 0 #7f5593; background: #000; }
  :where(html.shelftopia-v2) .shift-window__copy { padding: 6rem 2rem 3.5rem; }
  :where(html.shelftopia-v2) .shift-window__number { font-size: 2.75rem; }
  :where(html.shelftopia-v2) .shift-window h3 { font-size: 1.125rem; margin-block: 1rem 1.5rem; }
  :where(html.shelftopia-v2) .shift-window p { font-size: 1rem; line-height: 1.55; }
  :where(html.shelftopia-v2) .shift-window__eye { display: block; position: absolute; width: 6rem; height: 6rem; border: .8rem solid #dcbfe8; border-radius: 50%; box-shadow: 0 0 0 1px #392042; background: #7f5593; left: 50%; top: -5.5rem; transform: translateX(-50%); }
  :where(html.shelftopia-v2) .shift-window__eye img { width: 100%; height: 100%; }
}
@media (max-width: 64rem) {
  :where(html.shelftopia-v2) .logic__title { width: min(100%, 48rem); gap: 1.5rem; }
  :where(html.shelftopia-v2) .logic__content { padding-block-end: 13.5rem; }
  :where(html.shelftopia-v2) .logic__word { width: 40%; margin-inline-start: 10%; }
  :where(html.shelftopia-v2) .logic__star { width: 30%; left: -22%; top: -25%; }
  :where(html.shelftopia-v2) .logic__inverted { width: 50%; margin-inline-end: 10%; }
  :where(html.shelftopia-v2) .logic__copy { max-width: 58rem; margin-inline: auto; font-size: 1rem; }
  :where(html.shelftopia-v2) .logic__coin, :where(html.shelftopia-v2) .logic__diamond { display: none; }
}
@media (max-width: 37.5rem) {
  :where(html.shelftopia-v2) .lookback { padding-block: 2rem; }
  :where(html.shelftopia-v2) .lookback__set { gap: 1rem; padding-inline-end: 1rem; }
  :where(html.shelftopia-v2) .lookback__set > img { flex-basis: 82vw; width: 82vw; border-radius: 1.25rem; }
  :where(html.shelftopia-v2) .logic { --scene-scale: .68px; }
  :where(html.shelftopia-v2) .logic__content { padding: 1.5rem 1.25rem 4rem; gap: 1.75rem; }
  :where(html.shelftopia-v2) .logic__title { gap: .75rem; }
  :where(html.shelftopia-v2) .logic__word { width: 65%; margin-inline-start: 8%; }
  :where(html.shelftopia-v2) .logic__star { width: 19%; left: -13%; top: -15%; }
  :where(html.shelftopia-v2) .logic__inverted { width: 80%; margin-inline-end: 0; }
  :where(html.shelftopia-v2) .logic__copy p + p { margin-block-start: 1rem; }
  :where(html.shelftopia-v2) .shift-window__copy { padding: 5rem 1.25rem 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  :where(html.shelftopia-v2) .lookback__track { animation: none; }
  :where(html.shelftopia-v2) .lookback__photos { overflow-x: auto; scrollbar-width: none; }
  :where(html.shelftopia-v2) .lookback__set--clone { display: none; }
}