/* Version 1.5.5: first and second screens only. */
.hero-lab { isolation: isolate; min-height: 820px; background: #09152e; }
.hero-lab::before { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 43%; content: ""; background: #aebfb4; }
.hero-lab::after { position: absolute; z-index: 0; top: 0; right: 43%; bottom: 0; width: 1px; content: ""; background: rgba(255, 253, 248, .18); }
.hero-lab .hero-grain { z-index: 0; opacity: .08; }
.hero-lab-video { position: absolute; z-index: 0; top: 0; right: 0; width: 43%; height: 100%; object-fit: cover; opacity: .48; filter: saturate(.55) contrast(1.08); mix-blend-mode: multiply; pointer-events: none; }
.hero-lab-frame { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(390px, .8fr) minmax(510px, 1.04fr); gap: clamp(58px, 7vw, 118px); align-items: center; padding-top: 145px; padding-bottom: 88px; }
.hero-lab-frame > * { min-width: 0; }
.hero-lab-copy { align-self: center; max-width: 545px; min-width: 0; }
.hero-index { display: flex; justify-content: space-between; gap: 22px; margin-bottom: 58px; border-top: 1px solid rgba(255, 253, 248, .32); padding-top: 11px; color: rgba(255, 253, 248, .62); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero-lab h1 { max-width: 540px; margin-bottom: 27px; font-size: clamp(2.7rem, 4.7vw, 4.45rem); letter-spacing: -.055em; line-height: .96; }
.hero-lab h1 span, .hero-lab h1 em { display: block; }
.hero-lab h1 em { color: #f0c98f; }
.hero-lab .hero-copy { max-width: 505px; margin-bottom: 31px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.58; }
.hero-lab .hero-actions { flex-wrap: wrap; }
.hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 68px 0 0; border-top: 1px solid rgba(255, 253, 248, .24); }
.hero-facts div { min-width: 0; border-right: 1px solid rgba(255, 253, 248, .16); padding: 14px 14px 0 0; }
.hero-facts div + div { padding-left: 14px; }
.hero-facts div:last-child { border-right: 0; }
.hero-facts dt { margin-bottom: 7px; color: #f0c98f; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hero-facts dd { margin: 0; color: rgba(255, 253, 248, .68); font-size: 10px; line-height: 1.45; }
.hero-side-caption { position: absolute; z-index: 2; left: 15px; bottom: 28px; margin: 0; color: rgba(255, 253, 248, .3); font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; transform: rotate(-90deg); transform-origin: left bottom; }
.stage-caption { display: flex; justify-content: space-between; gap: 20px; margin: 0 24px 12px; color: rgba(11, 23, 52, .58); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

.reading-cases-stage { position: relative; align-self: center; width: min(100%, 650px); color: var(--ink); }
.reading-cases-sheet { position: relative; overflow: hidden; border: 1px solid rgba(11, 23, 52, .2); padding: 28px 38px 32px; background: #fffdf7; box-shadow: 18px 22px 0 rgba(11, 23, 52, .12), 0 30px 70px rgba(11, 23, 52, .18); transform: rotate(-.45deg); }
.reading-cases-sheet::before { position: absolute; top: 0; bottom: 0; left: 58px; width: 1px; content: ""; background: rgba(201, 91, 67, .32); }
.reading-cases-sheet::after { position: absolute; top: 15px; left: -8px; width: 15px; height: 66px; content: ""; background: var(--coral); }
.reading-case { position: relative; min-height: 105px; border-bottom: 1px solid rgba(11, 23, 52, .15); padding: 23px 4px 23px 47px; }
.reading-case::before { position: absolute; top: 26px; left: 0; content: attr(data-case); color: var(--coral); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.reading-case p { margin: 0; font-family: var(--serif); font-size: clamp(1.03rem, 1.42vw, 1.28rem); letter-spacing: -.026em; line-height: 1.32; }
.reading-case strong { color: var(--pine); font-weight: 700; }
.reading-case-elephant { margin: 0 -38px -32px; border-bottom: 0; padding: 26px 42px 28px 85px; background: var(--ink); color: var(--paper-strong); }
.reading-case-elephant::before { top: 29px; left: 38px; color: var(--gold); }
.reading-case-elephant strong { color: var(--gold); }

.meaning-screen { position: relative; display: flex; min-height: 100svh; overflow: hidden; align-items: center; background: #e9dfce; }
.meaning-screen-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(460px, .78fr); gap: clamp(70px, 9vw, 145px); align-items: center; }
.meaning-writer-outline { --facing: -1; position: absolute; z-index: 0; top: 50%; right: max(16px, calc((100vw - 1200px) / 2 - 76px)); width: clamp(285px, 26vw, 390px); height: auto; opacity: .14; mix-blend-mode: multiply; pointer-events: none; user-select: none; transform: translateY(-50%) scaleX(var(--facing)); animation: meaning-writer-drift 14s var(--ease-in-out) infinite; }
@keyframes meaning-writer-drift { 0%, 100% { transform: translate3d(0, -50%, 0) scaleX(var(--facing)); } 50% { transform: translate3d(-9px, calc(-50% - 7px), 0) scaleX(var(--facing)); } }
.meaning-statement { max-width: 720px; margin: 0; font-family: var(--serif); font-size: clamp(2.15rem, 2.95vw, 3.35rem); letter-spacing: -.052em; line-height: 1.02; }
.meaning-diagram { position: relative; min-height: 580px; }
.meaning-diagram::before, .meaning-diagram::after { position: absolute; z-index: 0; content: ""; background: rgba(11, 23, 52, .2); }
.meaning-diagram::before { top: 74px; bottom: 72px; left: 50%; width: 1px; }
.meaning-diagram::after { top: 48%; right: 45px; left: 45px; height: 1px; }
.meaning-source, .meaning-versions { position: absolute; z-index: 1; width: 215px; border-top: 1px solid var(--ink); padding: 12px 0 0; background: #e9dfce; color: rgba(11, 23, 52, .72); font-size: 12px; font-weight: 750; line-height: 1.35; }
.meaning-source-history { top: 28px; left: 0; }
.meaning-source-biography { top: 72px; right: 0; }
.meaning-source-symbols { bottom: 82px; left: 0; }
.meaning-versions { right: 0; bottom: 30px; border-color: var(--coral); color: var(--coral); }
.meaning-core { position: absolute; z-index: 2; top: 48%; left: 50%; display: grid; width: 245px; min-height: 168px; place-items: center; border: 1px solid var(--pine); border-radius: 50%; padding: 30px; background: var(--paper-strong); color: var(--pine); font-family: var(--serif); font-size: 23px; text-align: center; letter-spacing: -.035em; line-height: 1.05; transform: translate(-50%, -50%) rotate(-4deg); box-shadow: 11px 13px 0 rgba(23, 107, 93, .11); }

@media (max-width: 1050px) {
  .hero-lab::before { width: 39%; }
  .hero-lab::after { right: 39%; }
  .hero-lab-video { width: 39%; }
  .hero-lab-frame { grid-template-columns: minmax(340px, .78fr) minmax(430px, 1fr); gap: 48px; }
  .hero-index { margin-bottom: 38px; }
  .hero-facts { margin-top: 44px; }
  .reading-cases-sheet { padding-right: 28px; padding-left: 31px; }
  .reading-case { padding-left: 42px; }
  .reading-case-elephant { margin-right: -28px; margin-left: -31px; padding-right: 32px; padding-left: 73px; }
  .reading-case-elephant::before { left: 31px; }
  .meaning-screen-grid { grid-template-columns: minmax(0, 1fr) minmax(410px, .8fr); gap: 60px; }
}

@media (max-width: 850px) {
  .hero-lab { min-height: auto; }
  .hero-lab::before { top: auto; left: 0; width: auto; height: 44%; }
  .hero-lab::after { display: none; }
  .hero-lab-video { top: auto; bottom: 0; width: 100%; height: 44%; }
  .hero-lab-frame { grid-template-columns: minmax(0, 1fr); gap: 62px; padding-top: 142px; padding-bottom: 94px; }
  .hero-lab-copy { max-width: 620px; }
  .hero-lab h1 { max-width: 620px; font-size: clamp(2.8rem, 10vw, 4.6rem); }
  .reading-cases-stage { justify-self: center; width: min(100% - 26px, 620px); }
  .stage-caption { color: rgba(255, 253, 248, .62); }
  .meaning-screen { min-height: auto; }
  .meaning-screen-grid { grid-template-columns: minmax(0, 1fr); gap: 65px; }
  .meaning-writer-outline { top: auto; right: 0; bottom: 36px; width: 280px; opacity: .1; transform: scaleX(var(--facing)); animation: none; }
  .meaning-statement { max-width: 760px; }
  .meaning-diagram { width: min(100%, 620px); min-height: 560px; justify-self: center; }
}

@media (max-width: 500px) {
  .hero-lab-frame { gap: 50px; padding-top: 126px; padding-bottom: 78px; }
  .hero-index { display: grid; gap: 6px; margin-bottom: 34px; }
  .hero-lab h1 { max-width: 100%; font-size: 2.6rem; line-height: .98; overflow-wrap: anywhere; }
  .hero-lab .hero-copy { overflow-wrap: anywhere; }
  .hero-lab .hero-actions { gap: 18px; }
  .hero-lab .button-primary { width: 100%; }
  .hero-facts { grid-template-columns: 1fr; gap: 0; margin-top: 42px; }
  .hero-facts div, .hero-facts div + div { border-right: 0; border-bottom: 1px solid rgba(255, 253, 248, .14); padding: 12px 0; }
  .hero-facts div:last-child { border-bottom: 0; }
  .reading-cases-stage { width: 100%; }
  .stage-caption { margin-right: 0; margin-left: 0; }
  .reading-cases-sheet { padding: 15px 20px 22px; box-shadow: 10px 13px 0 rgba(11, 23, 52, .12), 0 20px 48px rgba(11, 23, 52, .16); transform: none; }
  .reading-cases-sheet::before { left: 48px; }
  .reading-case { min-height: 0; padding: 21px 0 21px 39px; }
  .reading-case p { font-size: 1.05rem; }
  .reading-case-elephant { margin: 0 -20px -22px; padding: 23px 20px 25px 59px; }
  .reading-case-elephant::before { top: 26px; left: 20px; }
  .hero-side-caption { display: none; }
  .meaning-statement { font-size: 2.05rem; line-height: 1.03; }
  .meaning-writer-outline { right: 0; bottom: 64px; width: 220px; opacity: .09; }
  .meaning-diagram { display: grid; min-height: 0; gap: 11px; }
  .meaning-diagram::before, .meaning-diagram::after { display: none; }
  .meaning-source, .meaning-versions, .meaning-core { position: relative; inset: auto; width: auto; min-height: 0; transform: none; }
  .meaning-source, .meaning-versions { padding: 14px 0; }
  .meaning-source-history { order: 1; }
  .meaning-source-biography { order: 2; }
  .meaning-source-symbols { order: 3; }
  .meaning-versions { order: 4; }
  .meaning-core { order: 5; min-height: 150px; margin-top: 15px; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lab-video { display: none; }
  .reading-cases-sheet, .meaning-core { transform: none; }
  .meaning-writer-outline { animation: none; }
}