/* The introduction is a single viewport; museum articles keep their own scrolling. */
html.intro-page{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
.intro-page body{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
.intro-page body,.intro-page body *{-webkit-user-select:none;user-select:none}
.intro-page a,.intro-page svg,.intro-page canvas{-webkit-user-drag:none}
.intro-page .welcome-world{height:100%;min-height:0}
.intro-page .welcome-header{flex-shrink:0}
.intro-page .welcome-main{flex:1 1 0%;height:auto;min-height:0;margin:0 auto;grid-template-rows:minmax(0,1fr)}
.intro-page .scene-shell,.intro-page .scene-shell canvas{height:100%;min-height:0}
.intro-page #fossil-canvas{touch-action:none}
.intro-page .sr-only{top:0;left:0}
.intro-page .model-switcher{pointer-events:none}
.intro-page .model-switcher button{pointer-events:auto}

/* One proportional desktop composition, based on the user's 1707 × 845 reference.
   Scale the whole visual system together; do not cap the page at 1720px. */
@media(min-width:901px) and (min-height:561px){
  .intro-page{--intro-unit:min(calc(100vw / 1707),calc(100dvh / 845))}
  .intro-page .welcome-header{height:calc(115 * var(--intro-unit));margin:0 7%;gap:calc(25 * var(--intro-unit))}
  .intro-page .welcome-brand{gap:calc(12 * var(--intro-unit));font-size:calc(12 * var(--intro-unit));letter-spacing:calc(1.1 * var(--intro-unit))}
  .intro-page .welcome-brand svg{width:calc(45 * var(--intro-unit))}
  .intro-page .welcome-brand>span>span{font-size:calc(7 * var(--intro-unit));letter-spacing:calc(1.6 * var(--intro-unit));margin-top:calc(4 * var(--intro-unit))}
  .intro-page .welcome-location{display:flex;font-size:calc(9 * var(--intro-unit));letter-spacing:calc(1.7 * var(--intro-unit));gap:calc(9 * var(--intro-unit))}
  .intro-page .welcome-location>span{width:calc(5 * var(--intro-unit));height:calc(5 * var(--intro-unit))}
  .intro-page .header-actions{gap:calc(12 * var(--intro-unit))}
  .intro-page .model-info-link{width:calc(34 * var(--intro-unit));height:calc(34 * var(--intro-unit))}
  .intro-page .model-info-link svg{width:calc(18 * var(--intro-unit));height:calc(18 * var(--intro-unit))}
  .intro-page .direct-link{font-size:calc(11 * var(--intro-unit));padding:calc(12 * var(--intro-unit)) calc(17 * var(--intro-unit));gap:calc(20 * var(--intro-unit))}
  .intro-page .direct-link>span{font-size:calc(20 * var(--intro-unit))}
  .intro-page .welcome-main{max-width:none;padding:0 7%;grid-template-columns:.85fr 1.15fr}
  .intro-page .welcome-copy{padding:0 0 calc(142 * var(--intro-unit))}
  .intro-page .welcome-copy h1{font-size:calc(120 * var(--intro-unit));letter-spacing:calc(-4 * var(--intro-unit));margin:0 0 calc(22 * var(--intro-unit))}
  .intro-page .welcome-description{font-size:calc(16 * var(--intro-unit))}
  .intro-page .copy-rule{display:block;width:calc(35 * var(--intro-unit));height:calc(1 * var(--intro-unit));margin:calc(25 * var(--intro-unit)) 0 calc(19 * var(--intro-unit))}
  .intro-page .welcome-detail{display:block;font-size:calc(13 * var(--intro-unit))}
  .intro-page .scene-shell{margin:0 -11% 0 -9%}
  .intro-page .scene-shell canvas{position:absolute;top:50%;height:calc(730 * var(--intro-unit));max-height:100%;transform:translateY(-50%)}
  .intro-page .scene-topline{top:calc(26 * var(--intro-unit));left:12%;right:6%;font-size:calc(9 * var(--intro-unit));letter-spacing:calc(1.8 * var(--intro-unit))}
  .intro-page .scene-topline>span:first-child{gap:calc(7 * var(--intro-unit))}
  .intro-page .scene-topline i{width:calc(4 * var(--intro-unit));height:calc(4 * var(--intro-unit))}
  .intro-page .model-switcher{bottom:calc(55 * var(--intro-unit));gap:calc(30 * var(--intro-unit))}
  .intro-page .model-switcher>div{min-width:calc(170 * var(--intro-unit))}
  .intro-page .model-switcher>button{width:calc(45 * var(--intro-unit));height:calc(45 * var(--intro-unit));font-size:calc(21 * var(--intro-unit))}
  .intro-page .model-kicker{font-size:calc(8 * var(--intro-unit));letter-spacing:calc(1.8 * var(--intro-unit))}
  .intro-page #model-name{font-size:calc(30 * var(--intro-unit));margin-top:calc(5 * var(--intro-unit))}
  .intro-page .model-dots{gap:calc(8 * var(--intro-unit));margin-top:calc(12 * var(--intro-unit))}
  .intro-page .model-dots button{width:calc(5 * var(--intro-unit));height:calc(5 * var(--intro-unit))}
  .intro-page .entry-panel{left:7%;bottom:calc(49 * var(--intro-unit));gap:calc(28 * var(--intro-unit))}
  .intro-page .entry-specimen{display:flex;gap:calc(13 * var(--intro-unit))}
  .intro-page .specimen-mark{font-size:calc(30 * var(--intro-unit))}
  .intro-page .entry-caption{font-size:calc(8 * var(--intro-unit));letter-spacing:calc(1.5 * var(--intro-unit))}
  .intro-page .entry-specimen p{font-size:calc(22 * var(--intro-unit));margin-top:calc(5 * var(--intro-unit))}
  .intro-page .entry-specimen p i{font-size:calc(12 * var(--intro-unit));margin-left:calc(10 * var(--intro-unit))}
  .intro-page .enter-button{font-size:calc(14 * var(--intro-unit));min-width:calc(300 * var(--intro-unit));gap:calc(35 * var(--intro-unit));padding:calc(11 * var(--intro-unit)) calc(11 * var(--intro-unit)) calc(11 * var(--intro-unit)) calc(25 * var(--intro-unit))}
  .intro-page .enter-arrow{width:calc(38 * var(--intro-unit));height:calc(38 * var(--intro-unit));font-size:calc(23 * var(--intro-unit))}
}

@media(max-width:560px){
  .intro-page .welcome-header{height:clamp(56px,9dvh,76px);min-height:0}
  .intro-page .welcome-copy{top:clamp(12px,2.5dvh,21px)}
  .intro-page .welcome-copy h1{font-size:clamp(32px,7dvh,58px)}
  .intro-page .scene-shell{top:clamp(64px,12dvh,102px);bottom:calc(clamp(76px,11dvh,94px) + env(safe-area-inset-bottom));height:auto}
  .intro-page .scene-shell canvas{height:calc(100% - 44px)}
  .intro-page .scene-topline{top:clamp(26px,7dvh,61px)}
  .intro-page .model-switcher{bottom:clamp(14px,2.3dvh,22px)}
  .intro-page .entry-panel{bottom:max(14px,env(safe-area-inset-bottom))}
}

@media(min-width:561px) and (max-height:560px){
  .intro-page .welcome-header{height:56px}
  .intro-page .scene-shell canvas{height:calc(100% - 44px)}
  .intro-page .welcome-copy{padding-bottom:60px}
  .intro-page .welcome-copy h1{font-size:clamp(30px,10dvh,58px);margin-bottom:12px}
  .intro-page .welcome-description{font-size:11px}
  .intro-page .entry-panel{bottom:18px}
  .intro-page .model-switcher{bottom:18px}
  .intro-page .scene-topline{top:14px}
}