/* Shared controls and a readable type scale, after the scene-specific styles. */
@font-face {
  /* Corrected font tables align the CTA across Safari, Android and Windows. */
  font-family: 'Arabella CTA';
  src: url('assets/fonts/arabella/Arabella-CTA-Terminal-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { --ui-ease: cubic-bezier(.22, .61, .36, 1); }
/* Keep native wheel/touch momentum from moving the document during the ending
   hold. Its scroll position and sticky geometry remain intact. */
html[data-story-scroll-hold] { overflow-y: hidden; overscroll-behavior-y: none; }
.replay-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  vertical-align: middle;
  overflow: visible;
  transition: translate .22s var(--ui-ease), rotate .22s var(--ui-ease);
}

.site-header nav { font-size: 15px; gap: 36px; }
.site-header nav :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 5px;
  transition: background .2s, box-shadow .2s;
}
.site-header nav .action-arrow { width: 19px; height: 19px; }
/* Keep the stage labels above the print and pickup animation. */
.edition { z-index: 6; pointer-events: none; font-size: 12px; letter-spacing: 1.2px; opacity: .8; }
.edition > span { font-size: 11px; }
.eyebrow { font-size: 12px; letter-spacing: 1.2px; }
.story-copy p { font-size: clamp(17px, 1.15vw, 19px); line-height: 1.65; max-width: 480px; opacity: .84; }
.text-action { font-size: 15px; min-height: 44px; gap: 26px; padding: 8px 0; transition: box-shadow .2s; }
.reconstruction-note { font-size: 12px; line-height: 1.5; opacity: .85; }
.recon-coordinate, .physical-coordinate { font-size: 11px; letter-spacing: .8px; }
.physical-coordinate { top: 12%; }
.physical-material { font-size: 10px; }
.physical-status { font-size: 13px; opacity: .9; }
.physical-percent { font-size: 12px; }
.physical-tag { font-size: 11px; }
.how-heading p, .how-steps p, .simple-dialog p { font-size: 17px; line-height: 1.7; opacity: .82; }
.how-steps p { max-width: 360px; }
.how-steps h3 { font-size: 22px; }
.step-number { font-size: 13px; opacity: .75; }
.step-symbol .action-arrow { width: 26px; height: 26px; }
.process-disclosure { font-size: 13px; max-width: 800px; opacity: .75; }
.pill-button { font-size: 15px; min-height: 52px; transition: background .2s, box-shadow .2s, translate .2s; }
.back-top { align-items: center; font-size: 14px; min-height: 44px; padding: 8px 0; transition: box-shadow .2s; }
.footer-bottom { font-size: 13px; opacity: .85; align-items: center; gap: 20px; }
.footer-bottom button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; }
.footer-bottom button, #play-label { text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.dialog-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #382f4526; border-radius: 50%; transition: background .2s, color .2s, rotate .2s; }

/* Individual transform properties leave the story's animated transform intact. */
.order-sticker { transition: background .22s, box-shadow .22s, scale .22s var(--ui-ease); }
.order-sticker:hover { filter: none; }
.order-sticker .sticker-title { font-family: 'Arabella CTA', cursive; }
.sticker-small { font-size: 10px; letter-spacing: .9px; }
.sticker-bottom { font-size: 9px; letter-spacing: .7px; }
.sticker-title .action-arrow { position: absolute; right: -35px; bottom: 0; width: 30px; height: 30px; }

.journey-bottom { grid-template-columns: 310px minmax(0, 1fr) 64px; gap: 28px; }
.journey-bottom .story-transport button { min-height: 44px; font-size: 14px; gap: 10px; border-radius: 28px; }
.journey-bottom .story-transport button > #play-symbol {
  width: 44px;
  height: 44px;
  background: transparent;
  color: inherit;
  transition: background .2s, color .2s, scale .2s var(--ui-ease), box-shadow .2s;
}
#play-symbol svg { width: 17px; height: 17px; fill: currentColor; }
#play-symbol .pause-icon, #play-symbol .replay-icon { display: none; }
#play-story[data-playing="true"] .play-icon { display: none; }
#play-story[data-playing="true"] .pause-icon { display: block; }
#play-story[data-playback="replay"] .play-icon { display: none; }
#play-story[data-playback="replay"] .replay-icon { display: block; }
.journey-bottom .story-transport .scroll-instruction {
  font-size: 13px;
  gap: 5px;
  padding: 6px;
  border-radius: 5px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: background .2s, opacity .2s, text-decoration-color .2s;
}
.scroll-instruction .action-arrow { width: 16px; height: 16px; margin-left: 4px; }
.journey-bottom .chapters button { position: relative; font-size: 14px; transition: opacity .2s, box-shadow .2s, translate .2s; }
.journey-bottom .chapters button span { font-size: 12px; }
.journey-bottom .story-page { font-size: 12px; white-space: nowrap; }
.timeline-track, .timeline-track > div::after { transition: height .2s, scale .2s; }
.timeline:focus-within .timeline-track > div::after { scale: 1.6; }
.model-turn { font-size: 12px; gap: 14px; }
.model-turn button { width: 40px; height: 40px; display: grid; place-items: center; transition: background .2s, color .2s, scale .2s; }
.model-turn .action-arrow { width: 20px; height: 20px; }

/* Keyboard focus gets the same feedback as hover, plus the existing outline. */
:is(a, button):focus-visible .action-arrow { translate: var(--arrow-x) var(--arrow-y); }
button:focus-visible .replay-icon { rotate: -35deg; }
.site-header nav :is(a, button):focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); }
:is(.text-action, .back-top):focus-visible { box-shadow: 0 2px 0 currentColor; }
.pill-button:focus-visible { background: #594168; box-shadow: 0 6px 16px #382f4526; translate: 0 -2px; }
.order-sticker:focus-visible { background: #e7ffa6; scale: 1.04; box-shadow: 2px 6px 0 #b8d269, 0 21px 32px #0003; }
#play-story:focus-visible #play-symbol { background: var(--scene-ink); color: var(--scene-bg); scale: 1.08; }
.journey-bottom .chapters button:focus-visible { box-shadow: 0 2px 0 currentColor; }
.model-turn button:focus-visible { background: #e5d9c5; color: #17121d; }
.dialog-close:focus-visible { background: var(--ink); color: var(--paper); rotate: 90deg; }
.footer-bottom button:focus-visible { text-decoration: underline; }
.journey-bottom .story-transport .scroll-instruction:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); text-decoration-color: currentColor; opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover:not(:disabled) .action-arrow { translate: var(--arrow-x) var(--arrow-y); }
  button:hover .replay-icon { rotate: -35deg; }
  .site-header nav :is(a, button):hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  :is(.text-action, .back-top):hover { box-shadow: 0 2px 0 currentColor; }
  .pill-button:hover { background: #594168; box-shadow: 0 6px 16px #382f4526; translate: 0 -2px; }
  .order-sticker:hover { background: #e7ffa6; scale: 1.04; box-shadow: 2px 6px 0 #b8d269, 0 21px 32px #0003; }
  #play-story:hover #play-symbol { background: var(--scene-ink); color: var(--scene-bg); scale: 1.08; }
  #play-story:hover #play-label, .footer-bottom button:hover { text-decoration: underline; }
  .journey-bottom .chapters button:hover { box-shadow: 0 2px 0 currentColor; translate: 0 -2px; }
  .timeline:hover .timeline-track > div::after { scale: 1.6; }
  .model-turn button:hover { background: #e5d9c5; color: #17121d; }
  .dialog-close:hover { background: var(--ink); color: var(--paper); rotate: 90deg; }
  .journey-bottom .story-transport .scroll-instruction:hover { background: color-mix(in srgb, currentColor 10%, transparent); text-decoration-color: currentColor; opacity: 1; }
}
button:active:not(:disabled) .action-arrow { translate: 0 0; }
.pill-button:active:not(:disabled) { translate: 0 0; box-shadow: none; }
.order-sticker:active { scale: .98; }
#play-story:active #play-symbol, .model-turn button:active { scale: .94; }
.site-header nav :is(a, button):active { background: color-mix(in srgb, currentColor 18%, transparent); }
.scroll-instruction:active { background: color-mix(in srgb, currentColor 18%, transparent); }

/* Put transport above the timeline before its enlarged labels get crowded. */
@media (max-width: 1350px) {
  .journey-bottom { grid-template-columns: minmax(0, 1fr) 64px; gap: 18px; bottom: 30px; }
  .journey-bottom .story-transport { position: absolute; left: 0; bottom: calc(100% + 14px); }
}
@media (min-width: 901px) {
  .story-copy h1 { font-size: clamp(62px, min(6.6vw, 11vh), 110px); }
  .story-copy h2 { font-size: clamp(58px, min(6.1vw, 10.5vh), 102px); }
  .story-copy[data-story="4"] h2, .story-copy[data-story="5"] h2 { font-size: clamp(58px, min(5.9vw, 10.5vh), 98px); }
}
@media (max-height: 780px) and (min-width: 901px) {
  .story-copy p { font-size: 16px; line-height: 1.55; }
  .story-copy .eyebrow { font-size: 11px; }
  .reconstruction-note { margin-top: 20px; }
}
@media (max-width: 900px) {
  /* Follow Chrome's changing toolbar height throughout the pinned story. */
  .stage { height: 100svh; height: 100dvh; min-height: 0; max-height: none; }
  .site-header nav { font-size: 14px; gap: 14px; }
  .edition { font-size: 11px; }
  .eyebrow { font-size: 10px; letter-spacing: .8px; }
  .story-copy p { font-size: 15px; line-height: 1.55; }
  .text-action { font-size: 14px; }
  .recon-coordinate, .physical-coordinate { font-size: 9px; }
  .physical-material { font-size: 9px; }
  .physical-status { font-size: 11px; }
  .physical-percent { font-size: 10px; }
  .sticker-small { font-size: 8px; }
  .sticker-bottom { font-size: 7px; }
  .journey-bottom .chapters button { font-size: 13px; }
  .journey-bottom .chapters button span { font-size: 11px; }
  .how-heading p, .how-steps p, .simple-dialog p { font-size: 16px; }
  .how-steps h3 { font-size: 20px; }
}
@media (max-width: 600px) {
  .site-header nav { gap: 6px; font-size: 13px; }
  .site-header nav :is(a, button) { gap: 5px; padding: 8px 3px; white-space: nowrap; }
  .site-header nav > a { display: none; }
  .site-header nav .login-link { display: inline-flex; }
  .site-header nav .action-arrow { width: 17px; height: 17px; }
  .stage {
    --mobile-label-top: 104px;
    --mobile-copy-top: 118px;
    --mobile-art-top: clamp(270px, 36svh, 310px);
    --mobile-art-height: max(180px, calc(100svh - var(--mobile-art-top) - 174px));
  }
  /* Share one quiet label row, leaving the full width for the script below. */
  .edition, .story-copy .eyebrow { font-size: clamp(6px, 1.85vw, 8.5px); letter-spacing: .3px; line-height: 1.6; white-space: nowrap; }
  .edition { top: var(--mobile-label-top); left: 6%; right: 6%; }
  .story-copy { top: var(--mobile-copy-top); left: 6%; width: 88%; }
  .story-copy .eyebrow { position: absolute; top: calc(var(--mobile-label-top) - var(--mobile-copy-top)); right: 0; justify-content: flex-end; }
  .story-copy .small-orbit { display: none; }
  .visual-field { left: 4%; width: 92%; top: var(--mobile-art-top); height: var(--mobile-art-height); }
  .monitor { width: min(100%, calc(var(--mobile-art-height) * 1.25)); left: 50%; top: 14%; translate: -50% 0; }
  .mother-wrap { width: min(150%, calc(var(--mobile-art-height) * 1.8)); left: 50%; top: -8%; translate: -50% 0; }
  .story-copy p, .story-copy[data-story] p { font-size: 13px; line-height: 1.55; max-width: 100%; text-wrap: balance; }
  .story-copy p br { display: none; }
  .story-copy[data-story="5"] p { max-width: 56%; }
  .text-action { font-size: 13px; margin-top: 10px; gap: 20px; min-height: 36px; padding: 5px 0; }
  .text-action .action-arrow, .text-action .replay-icon { width: 20px; height: 20px; }
  .reconstruction-note { position: absolute; top: calc(var(--mobile-art-top) + var(--mobile-art-height) - var(--mobile-copy-top) + 8px); left: 0; width: 100%; font-size: 9px; margin: 0; }
  .physical-tag { font-size: 9px; margin-top: 12px; }
  .sticker-small { font-size: 7px; letter-spacing: .4px; }
  .sticker-bottom { font-size: 6px; letter-spacing: .25px; }
  /* Retain the desktop sticker at a phone-friendly size, above the status. */
  .order-sticker { left: 0; right: auto; bottom: calc(50px + max(0px, (var(--mobile-art-height) - 92vw) / 2)); width: clamp(112px, 31vw, 132px); min-height: 0; padding: 12px 8px; aspect-ratio: 1; border-radius: 50%; }
  .order-sticker::before { inset: 5px; }
  .order-sticker .sticker-small { font-size: 5px; letter-spacing: .45px; }
  .order-sticker .sticker-bottom { font-size: 4.5px; letter-spacing: .3px; }
  .order-sticker .sticker-title { font-size: clamp(32px, 8.5vw, 38px); line-height: .75; margin: 12px 0; }
  .order-sticker .action-arrow { right: -19px; bottom: 0; width: 17px; height: 17px; }
  .reconstruction-target { inset: 0; }
  .physical-status { bottom: -20px; left: 3%; right: 3%; }
  .recon-coordinate { display: none; }
  .journey-bottom { grid-template-columns: minmax(0, 1fr) 28px; gap: 10px; bottom: 24px; }
  .journey-bottom .story-transport { bottom: calc(100% + 10px); gap: 15px; }
  .journey-bottom .story-transport button { font-size: 12px; min-height: 36px; }
  .journey-bottom .story-transport button > #play-symbol { width: 36px; height: 36px; }
  #play-symbol svg { width: 14px; height: 14px; }
  .journey-bottom .story-transport .scroll-instruction { font-size: 12px; }
  .journey-bottom .chapters button { font-size: 12px; }
  .journey-bottom .chapters button span { font-size: 10px; }
  .journey-bottom .story-page { font-size: 10px; white-space: normal; }
  .physical-status { font-size: 10px; }
  .model-turn { font-size: 11px; bottom: 0; left: 50%; white-space: nowrap; }
  .model-turn button { width: 36px; height: 36px; }
  .how-steps p { max-width: 100%; }
  .pill-button { font-size: 14px; }
  .process-disclosure, .footer-bottom { font-size: 12px; }
  .footer-bottom button { font-size: 13px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .stage { --mobile-art-top: 250px; }
  .monitor { top: 22%; }
}
@media (max-width: 600px) and (max-height: 650px) {
  .stage { --mobile-label-top: 96px; --mobile-copy-top: 110px; --mobile-art-top: 244px; --mobile-art-height: max(120px, calc(100svh - var(--mobile-art-top) - 174px)); }
  .order-sticker { width: 100px; bottom: 24px; }
  .order-sticker .sticker-title { font-size: 30px; margin: 10px 0; }
  .edition { display: flex; }
  .story-copy p, .story-copy[data-story] p { font-size: 12px; line-height: 1.5; }
  .text-action { margin-top: 6px; min-height: 30px; font-size: 12px; }
}
@media (max-width: 360px) {
  .journey-bottom .chapters button { font-size: 11px; }
  .journey-bottom .story-transport { gap: 10px; }
  .journey-bottom .story-transport .scroll-instruction { font-size: 11px; }
}
@media (max-width: 600px) and (max-height: 550px) {
  .order-sticker { width: 76px; bottom: 28px; padding: 8px 6px; }
  .order-sticker::before { inset: 4px; }
  .order-sticker .sticker-title { font-size: 24px; margin: 6px 0; }
  .order-sticker .sticker-small { font-size: 4px; letter-spacing: .15px; }
  .order-sticker .sticker-bottom { font-size: 3.5px; letter-spacing: .1px; }
  .order-sticker .action-arrow { width: 14px; height: 14px; right: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .action-arrow, .replay-icon, .pill-button, .order-sticker, #play-symbol,
  .journey-bottom .chapters button, .dialog-close { translate: none !important; scale: none !important; }
  .replay-icon, .dialog-close { rotate: none !important; }
}