.is-lab-page, .is-lab-experience { background: #101113; color: #f0f0ec; --focus-ring-color: #ff6428; }
.lab-intro { display: grid; grid-template-columns: 1fr .65fr; align-items: end; gap: 2rem; padding: clamp(2rem,5vw,5rem) 0 3rem; }
.lab-intro h1 { margin: 0; font-size: clamp(4rem,9vw,8rem); font-weight: 500; line-height: .9; letter-spacing: -.075em; }
.lab-intro p { margin: 0; max-width: 32ch; color: #b1b2ad; font-size: clamp(1rem,1.6vw,1.5rem); line-height: 1.35; }
.lab-collection { padding-bottom: clamp(5rem,9vw,9rem); }
.lab-collection__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.3rem; }
.lab-collection__head h2, .lab-collection__head a { margin: 0; font-size: .9rem; font-weight: 400; }
.lab-collection__head a { color: #b1b2ad; text-underline-offset: .3em; padding: .7rem 0; }
.lab-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(2.5rem,5vw,5rem) clamp(1rem,2vw,2rem); }
.lab-study { display: block; min-width: 0; color: inherit; text-decoration: none; }
.lab-study--featured { grid-column: 1 / -1; }
.lab-study__image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #17191d; }
.lab-study__image img, .lab-study__image video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lab-study__image video { position: absolute; inset: 0; opacity: 0; transition: opacity 220ms ease; }
.lab-study[data-preview-playing] video { opacity: 1; }
.lab-study__action { position: absolute; right: 1rem; bottom: 1rem; padding: .75rem 1rem; border-radius: 999px; background: #f0f0ec; color: #101113; font-size: .8rem; opacity: 0; transform: translateY(5px); transition: opacity 180ms ease,transform 180ms ease; }
.lab-study:is(:hover,:focus-visible) .lab-study__action { opacity: 1; transform: translateY(0); }
.lab-study__caption { display: grid; gap: .6rem; margin-top: 1.2rem; }
.lab-study__caption h3 { margin: 0; font-size: clamp(1.7rem,3vw,2.6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; }
.lab-study__caption p { margin: 0 0 .75rem; max-width: 45ch; font-size: 1rem; line-height: 1.45; }
.lab-study__caption span { color: #b1b2ad; font-size: .8rem; }
.lab-study--featured .lab-study__caption { grid-template-columns: 1fr .65fr; gap: 2rem; }
.lab-study--featured h3 { font-size: clamp(2rem,4vw,3.5rem); }
.lab-study:hover h3 { color: #ff6428; }
.is-lab-page .motion-archive { background: #101113; }
.is-lab-page .motion-archive__head p { font-family: var(--font-sans); text-transform: none; }

.tin-lab-entry { position: relative; background: #101113; color: #f0f0ec; padding: clamp(3rem,6vw,7rem) clamp(1rem,3.5vw,4rem); }
.tin-lab-entry__link { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem,4vw,5rem); align-items: center; text-decoration: none; }
.tin-lab-entry__copy > p { margin: 0 0 1.3rem; font-size: .85rem; color: #b1b2ad; }
.tin-lab-entry__copy h2 { margin: 0 0 1.6rem; font-size: clamp(3rem,6vw,6.5rem); font-weight: 400; letter-spacing: -.065em; line-height: .95; }
.tin-lab-entry__copy span { display: block; max-width: 28ch; font-size: 1rem; line-height: 1.5; }
.tin-lab-entry img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.tin-lab-entry__link:hover h2 { color: #ff6428; }

.is-interior.is-lab-experience #content { margin: 0; padding: 0; max-width: none; }
.is-lab-experience { overflow: hidden; }
.lab-experience { position: relative; width: 100%; height: 100svh; height: 100dvh; min-height: 320px; isolation: isolate; overflow: hidden; }
.lab-experience__head { position: absolute; z-index: 4; top: max(1.5rem,env(safe-area-inset-top)); left: max(1.5rem,env(safe-area-inset-left)); max-width: 25%; }
.lab-experience__head a { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; color: #b1b2ad; text-decoration: none; }
.lab-experience__head h1 { margin: .3rem 0 0; font-size: clamp(1.1rem,1.5vw,1.5rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
.lab-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; outline-offset: -5px; }
.lab-stage:focus-visible { outline: 2px solid #ff6428; }
.lab-stage__poster, .lab-stage__runtime { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab-stage__poster { display: block; object-fit: contain; background: #101113; }
.lab-stage__runtime { opacity: 0; }
.lab-stage__runtime iframe, .lab-stage__runtime > canvas { display: block; border: 0; width: 100%; height: 100%; }
.lab-experience:is([data-state='running'],[data-state='paused']) .lab-stage__runtime { opacity: 1; }
.lab-experience:is([data-state='running'],[data-state='paused']) .lab-stage__poster { visibility: hidden; }
.lab-experience[data-state='paused'] .lab-stage { pointer-events: none; }
.lab-experience__foot { position: absolute; z-index: 5; bottom: max(1.1rem,env(safe-area-inset-bottom)); left: max(1.5rem,env(safe-area-inset-left)); right: max(1.5rem,env(safe-area-inset-right)); display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: center; pointer-events: none; }
.lab-experience__foot > p { margin: 0; max-width: 43ch; font-size: .85rem; line-height: 1.4; text-shadow: 0 1px 12px #000; }
.lab-controls { display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; grid-column: 2; grid-row: 1 / 3; pointer-events: auto; }
.lab-controls button { min-height: 44px; border: 1px solid #7c7e83; border-radius: 999px; padding: .65rem 1rem; background: #101113e8; color: #f0f0ec; font: inherit; font-size: .8rem; cursor: pointer; }
.lab-controls button[data-lab-start] { background: #f0f0ec; color: #101113; border-color: #f0f0ec; }
.lab-controls button:disabled { opacity: .45; cursor: default; }
.lab-controls button[hidden] { display: none; }
.lab-controls button:focus-visible, .lab-credit summary:focus-visible { outline: 2px solid #ff6428; outline-offset: 3px; }
.lab-status { color: #b1b2ad; font-size: .75rem !important; }
.lab-credit { grid-column: 1 / -1; justify-self: start; max-width: min(48rem,100%); pointer-events: auto; font-size: .75rem; }
.lab-credit summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: #b1b2ad; list-style: none; }
.lab-credit p { margin: 0; padding: 1rem; max-height: 30svh; overflow: auto; background: #101113f5; line-height: 1.5; }
.lab-mercury-type { display: none; position: absolute; inset: 0; flex-direction: column; justify-content: center; padding: 8vw; pointer-events: none; }
.lab-mercury-type p { margin: 0; font-size: clamp(3rem,10vw,10rem); letter-spacing: -.07em; line-height: .9; font-weight: 500; }
.lab-experience[data-state='running'] .lab-mercury-type, .lab-experience[data-state='paused'] .lab-mercury-type { display: flex; }
.lab-stage .tin-contact__mercury { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.lab-stage .tin-contact__cursor { position: absolute; inset: 0 auto auto 0; z-index: 3; pointer-events: none; }
.lab-stage.has-tin-cursor { cursor: none; }

@media(max-width: 600px) {
  .lab-intro { grid-template-columns: 1fr; gap: 1.7rem; padding: 1.8rem 0 2rem; }
  .lab-intro h1 { font-size: clamp(3.6rem,17vw,5rem); }
  .lab-intro p { font-size: 1rem; }
  .lab-grid { grid-template-columns: 1fr; gap: 3rem; }
  .lab-study--featured .lab-study__caption { grid-template-columns: 1fr; gap: .8rem; }
  .lab-study__action { opacity: 1; transform: none; font-size: .75rem; padding: .6rem .85rem; right: .7rem; bottom: .7rem; }
  .tin-lab-entry__link { grid-template-columns: 1fr; gap: 2rem; }
  .tin-lab-entry__copy h2 { font-size: clamp(3.3rem,15vw,5rem); }
  .tin-lab-entry__copy h2 br { display: none; }
  .lab-experience__head { top: 4.6rem; left: 1rem; max-width: calc(100% - 2rem); }
  .lab-experience__head a { min-height: 32px; font-size: .75rem; }
  .lab-experience__head h1 { margin-top: 0; font-size: 1.1rem; }
  .lab-experience[data-study='liquid-clock'] .lab-stage__runtime iframe { position: absolute; top: 8.5rem; height: calc(100% - 19rem); }
  .lab-experience__foot { left: 1rem; right: 1rem; grid-template-columns: 1fr; gap: .4rem; }
  .lab-experience__foot > p { font-size: .75rem; max-width: 38ch; }
  .lab-controls { grid-column: 1; grid-row: 2; justify-content: start; }
  .lab-controls button { padding-inline: .85rem; }
  .lab-status { grid-row: 3; }
  .lab-credit summary { min-height: 36px; }
}
@media(prefers-reduced-motion: reduce) {
  .lab-study__image video { display: none; }
  .lab-study__action, .lab-study__image video { transition: none; }
}
