@media (min-width: 701px) and (max-width: 1366px) {
  .global-header { gap: 12px; align-items: center; }
  .global-header .brand { font-size: clamp(20px, 2.55vw, 32px); gap: 14px; white-space: nowrap; }
  .global-header .nav { max-width: none; overflow: visible; font-size: clamp(8px, .93vw, 11px); }
  .global-header .nav a { padding-inline: clamp(4px, .65vw, 9px); white-space: nowrap; }
  .lab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .72fr); padding-inline: 16px; }
  .lab-spacer { display: none; }
  .lab-grid .vessel-view { height: clamp(240px, 38vw, 440px); }
  .swarm__caption { width: min(20vw, 175px); }
}
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .material-archive__stage { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 74px 16px 16px; gap: 14px; }
  .material-archive__strip { position: static; width: auto; padding: 0; }
  .material-archive__feature {
    position: static;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
  }
  .material-archive__story { display: contents; }
  .material-archive__copy { grid-row: 1; }
  .material-archive__media-slot { grid-row:2; display:flex; min-height:0; min-width:0; align-items:center; justify-content:center; container-type:size; }
  .material-archive__media { width:min(82cqw,calc(100cqh * .8035714286)); height:auto; aspect-ratio:1440/1792; min-height:0; margin:0; }
  .material-timeline { grid-row: 3; height: auto; }
  .global-advance[data-mobile-controls="true"] { visibility: hidden; }
}
@media (pointer: coarse) {
  .archive-site { overflow-x: clip; }
  .intro-sequence__stage { isolation: isolate; }
  .swarm__viewport canvas { backface-visibility: hidden; }
}

/* The cocoon shares the table's track, never an opaque full-width sticky panel. */
@media (min-width: 701px) and (max-width: 1100px) {
  .colony--motion .colony__register {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .colony--motion .colony__intro { grid-column: 1 / -1; }
  .colony--motion .colony__table-scroll { grid-column: 1; grid-row: 2; min-width: 0; }
  .colony--motion .colony__motion-track {
    grid-column: 1; grid-row: 2;
    align-self: stretch; justify-self: center;
    position: relative; top: auto; left: auto; bottom: auto;
    width: calc(300px * 640 / 880); max-width: 100%; height: auto;
    background: none; transform: none; overflow: visible;
  }
  .colony--motion .colony__motion-stage {
    position: sticky; top: max(96px, 24svh);
    width: 100%; height: auto; aspect-ratio: 640 / 880;
    margin: 0;
  }
}

/* Use the phone masthead on iPad in either orientation. */
@media (min-width: 701px) and (max-width: 1100px),
       (min-width: 701px) and (max-width: 1366px) and (pointer: coarse) {
  .global-header { display: block; padding: 12px; }
  .global-header .brand {
    justify-content: space-between;
    gap: 12px;
    font-size: 24px;
    line-height: 28px;
  }
}

/* Keep the archive controls in the sticky viewport on landscape phones. */
@media (min-width: 701px) and (max-width: 1100px) and (max-height: 620px) {
  .material-archive__stage { min-height: 0; }
  .material-archive__strip { top: 60px; }
  .material-archive__strip h2 { margin-bottom: 4px; }
  .material-archive__strip > p { margin-bottom: 8px; }
  .material-archive__thumb { max-height: clamp(36px, 15svh, 88px); }
  .material-archive__feature { top: 62px; }
  .material-archive__media { width: min(100%, calc((100svh - 78px) * .803571)); }
  .material-archive__story { padding-top: clamp(94px, 27svh, 155px); }
  .material-archive__copy h3, .material-archive__description { font-size: 16px; line-height: 20px; }
  .material-archive__category { margin-top: 4px !important; }
  .material-timeline__phase { display: none; }
  .swarm { min-height: 0; }
  .swarm__fallback { width: min(52vw, calc(100svh - 82px)); }
  .swarm__choices { bottom: 8px; padding: 0; }
  .swarm__choice { height: 44px; }
  .swarm__choice img { width: 42px; height: 42px; }
}

@media (min-width: 1101px), (min-width: 701px) and (orientation: landscape) {
  #research-weaving, #perfume {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    margin: 0;
    aspect-ratio: 16 / 9;
    scroll-margin-top: 0;
  }
  #research-weaving .research-weaving__image, #perfume .perfume-film__media {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  #research-weaving .film__video, #research-weaving .film__poster,
  #perfume .film__video, #perfume .film__poster { object-fit: cover; }
}