/* Keep the introduction compact and give the readable exhibits the full canvas. */
.home-view { min-height: 960px; }
.home-view .hero-description {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, 1fr) auto;
  align-items: center;
  gap: 30px;
  left: var(--gutter);
  right: var(--gutter);
  top: 158px;
  bottom: auto;
  width: auto;
  max-width: none;
  transform: none;
}
.home-view .hero-description .hero-eyebrow { position: absolute; top: -25px; margin: 0; font-size: 9px; }
.home-view .hero-description h2 { font-size: clamp(30px, 2.9vw, 43px); margin: 0; line-height: 1.4; letter-spacing: -.06em; white-space: nowrap; }
.home-view .hero-description h2 br { display: none; }
.home-view .hero-description .hero-intro { margin: 0; padding-left: 24px; border-left: 1px solid var(--line); font-size: 13px; }
.home-view .hero-description .hero-cta { margin: 0; gap: 16px; white-space: nowrap; }
.home-view .hero-description .hero-index { display: none; }
.home-view .stage { inset: 244px var(--gutter) 104px; overflow: visible; perspective: 3000px; }
.home-view .stage-label { left: 0; right: 0; top: 0; }
.home-view .world { transform: translateY(-32px) rotateX(22deg) rotateZ(-5deg) scale(.82); }
.home-view:not(.workbench-open) .exhibit-memory { left: 70px; top: 225px; }
.home-view:not(.workbench-open) .exhibit-art { left: 540px; top: 190px; }
.home-view:not(.workbench-open) .exhibit-attacker { left: 945px; top: 225px; }
.home-view:not(.workbench-open) .exhibit-jianying { left: 110px; top: 655px; }
.home-view:not(.workbench-open) .exhibit-atlas { left: 960px; top: 655px; }
.home-view:not(.workbench-open) .wordmark { left: 595px; top: 720px; font-size: 126px; letter-spacing: -10px; }
.home-view:not(.workbench-open) .wordmark span:last-child { font-size: 110px; letter-spacing: -10px; margin-left: -65px; }
.home-view .exhibit-caption { font-size: 20px; letter-spacing: -.25px; }
.home-view .scene-note { left: var(--gutter); right: auto; bottom: 97px; }
.home-view .plane-annotation { left: 560px; top: 960px; font-size: 11px; }
.home-view.workbench-open .world { transform: translateY(-10px) rotateX(0) rotateZ(0) scale(.55); }
.home-view.workbench-open .wordmark { left: 610px; top: 440px; font-size: 150px; letter-spacing: -12px; }
.home-view.workbench-open .wordmark span:last-child { font-size: 130px; letter-spacing: -12px; margin-left: -70px; }

/* At the wider scale, the original small mockup labels need readable type. */
.home-view .window-bar { font-size: 14px; }
.home-view :is(.small-title, .memory-note) { font-size: 14px; color: #626b6e; }
.home-view .memory-block { font-size: 15px; line-height: 1.65; }
.home-view .memory-pills i { font-size: 13px; }
.home-view .composer { font-size: 14px; color: #687174; }
.home-view :is(.terminal-line, .terminal-output) { font-size: 14px; }
.home-view .terminal-line { color: #aeb9bf; }
.home-view .terminal-footer { font-size: 11px; letter-spacing: .1px; }
.home-view .atlas-flow > span { font-size: 14px; }
.home-view .atlas-heading > span { font-size: 11px; letter-spacing: 1px; }
.home-view .atlas-footer { font-size: 13px; }
.home-view .edit-header { font-size: 13px; }
.home-view .edit-title { font-size: 24px; }
.home-view .timeline-track { font-size: 12px; }
.home-view .edit-foot { font-size: 11px; letter-spacing: 1.1px; }

@media (min-width: 1600px) {
  .home-view { min-height: 980px; }
  .home-view .world { transform: translateY(-32px) rotateX(22deg) rotateZ(-5deg) scale(.92); }
  .home-view.workbench-open .world { transform: translateY(-10px) rotateX(0) rotateZ(0) scale(.63); }
}
@media (min-width: 951px) and (max-width: 1250px) {
  .home-view { min-height: 860px; }
  .home-view .world { transform: translateY(-22px) rotateX(22deg) rotateZ(-5deg) scale(.68); }
  .home-view .hero-description { gap: 20px; grid-template-columns: 1.25fr 1fr auto; }
  .home-view .hero-description h2 { font-size: 31px; }
  .home-view .hero-description .hero-intro { font-size: 12px; padding-left: 18px; }
  .home-view.workbench-open .world { transform: translateY(-10px) rotateX(0) rotateZ(0) scale(.49); }
}
/* Narrow screens use full-size upright exhibits instead of a miniature desktop. */
@media (max-width: 950px) {
  .home-view { display: flex; flex-direction: column; min-height: 0; height: auto; padding: 143px var(--gutter) 126px; }
  .home-view .hero-description { order: 0; position: relative; inset: auto; display: grid; grid-template-columns: 1fr auto; gap: 20px; width: 100%; margin: 0 0 43px; }
  .home-view .hero-description h2 { grid-column: 1 / -1; font-size: clamp(25px, 8.3vw, 42px); }
  .home-view .hero-description .hero-intro { grid-column: 1 / -1; padding: 0; border: 0; }
  .home-view .hero-description .hero-cta { grid-column: 1 / -1; justify-self: start; }
  .home-view .stage { order: 1; position: relative; inset: auto; width: 100%; height: auto; margin: 0; padding: 39px 0 0; perspective: none; overflow: visible; }
  .home-view .stage-label { left: 0; right: 0; top: 0; }
  .home-view .world, .home-view.workbench-open .world {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    transform: none;
    translate: none;
  }
  .home-view:not(.workbench-open) .world .exhibit,
  .home-view.workbench-open .world .exhibit {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    transform: none;
  }
  .home-view:not(.workbench-open) .world .exhibit:is(:hover, :focus-visible, :active),
  .home-view.workbench-open .world .exhibit:is(:hover, :focus-visible, :active),
  .home-view:not(.workbench-open) .world .exhibit:hover:not(:focus-visible):not(:active),
  .home-view.workbench-open .world .exhibit:hover:not(:focus-visible):not(:active) { transform: none; }
  .home-view:not(.workbench-open) .world .wordmark,
  .home-view.workbench-open .world .wordmark { position: relative; inset: auto; margin: 0 auto 6px; font-size: 62px; letter-spacing: -6px; line-height: .85; transform: none; }
  .home-view:not(.workbench-open) .world .wordmark span:last-child,
  .home-view.workbench-open .world .wordmark span:last-child { font-size: 55px; margin: 6px 0 0 -26px; letter-spacing: -6px; }
  .home-view .plane-grid, .home-view .plane-annotation { display: none; }
  .home-view .exhibit-caption { font-size: 12px; padding: 13px 1px 0; }
  .home-view .scene-note { order: 2; position: relative; inset: auto; justify-content: center; margin: 30px 0 0; }
  .home-view .memory-page { padding: 18px 14px; }
  .home-view .memory-rail { width: 38px; padding-inline: 9px; }
  .home-view .memory-question { font-size: 22px; }
  .home-view .terminal-content { padding: 20px 18px; }
  .home-view .terminal-line, .home-view .terminal-output { font-size: 12px; }
  .home-view .terminal-footer { font-size: 10px; }
  .home-view .exhibit-jianying .exhibit-face { height: auto; min-height: 222px; }
  .home-view .exhibit-art .art-cover { height: 210px; }
  .home-view .wordmark { order: 0; }
  .home-view .exhibit-atlas { order: 1; }
  .home-view .exhibit-attacker { order: 2; }
  .home-view .exhibit-memory { order: 3; }
  .home-view .exhibit-art { order: 4; }
  .home-view .exhibit-jianying { order: 5; }
}
@media (min-width: 601px) and (max-width: 950px) {
  .home-view .hero-description .hero-intro { grid-column: 1; }
  .home-view .hero-description .hero-cta { grid-column: 2; }
  .home-view .world, .home-view.workbench-open .world { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; align-items: start; }
  .home-view .world .wordmark { grid-column: 1 / -1; }
  .home-view:not(.workbench-open) .world .exhibit-jianying,
  .home-view.workbench-open .world .exhibit-jianying { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; }
}