/* Open Studio media studies: three hero treatments on the selected design system. */
:root {
  --study-white: #ffffff;
  --study-paper: #f5f5f2;
  --study-ink: #16181a;
  --study-muted: #62676a;
  --study-blue: #dcebf7;
  --study-gold: #c5a552;
  --study-line: #bfc3c2;
  --study-target: 2.75rem;
}

.studies-page {
  min-width: 20rem;
  padding-bottom: 5.75rem;
  color: var(--study-ink);
  background: var(--study-paper);
}

.studies-page main { min-height: 100svh; }
.studies-page img,
.studies-page video { width: 100%; display: block; }

.study-switcher {
  position: absolute;
  z-index: 4;
  top: calc(var(--header-height) + 1rem);
  right: clamp(1.25rem, 3vw, 3.5rem);
  display: grid;
  grid-template-columns: auto repeat(3, minmax(4.5rem, 1fr));
  border: 1px solid currentColor;
  color: var(--study-ink);
  background: rgba(255, 255, 255, .94);
}

.study-switcher a {
  min-height: var(--study-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .45rem .75rem;
  border-right: 1px solid currentColor;
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.study-switcher__label {
  min-height: var(--study-target);
  display: inline-flex;
  align-items: center;
  padding: .45rem .75rem;
  border-right: 1px solid currentColor;
  font-size: .6rem;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.study-switcher a:last-child { border-right: 0; }
.study-switcher a:hover,
.study-switcher a[aria-current="page"] { color: var(--study-white); background: var(--study-ink); }
.study-switcher__name { font-weight: 550; letter-spacing: .01em; text-transform: none; }

.study-kicker,
.prototype-note,
.study-index,
.track-label span {
  font-size: .64rem;
  font-weight: 720;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.study-title {
  max-width: 10.5ch;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(3.6rem, 7.3vw, 8.2rem);
  font-weight: 480;
  line-height: .87;
  letter-spacing: -.07em;
  text-wrap: balance;
}

.study-title em { font-family: var(--font-display); font-weight: 400; }
.study-support { max-width: 29rem; margin: 0; color: var(--study-muted); font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.5; }

.study-cta {
  width: fit-content;
  min-height: var(--study-target);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: .55rem 1rem;
  color: var(--primary-gold-text);
  background-color: #d9bd68;
  background-image: var(--primary-gold-shine), var(--primary-gold-gradient);
  background-position: -220% 50%, 0 50%;
  background-size: 220% 100%, 200% 100%;
  border: 1px solid var(--primary-gold-border);
  font-size: .7rem;
  font-weight: 760;
  letter-spacing: .075em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-position 220ms ease, border-color 220ms ease, transform 170ms ease;
}

.study-cta::after { content: "\2192"; font-size: 1.1rem; }
.study-cta:hover,
.study-cta:focus-visible { background-position: 220% 50%, 100% 50%; }
.study-cta:active { transform: scale(.98); }
.prototype-note { margin: 0; color: var(--study-muted); line-height: 1.45; }

.track {
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}

.track-label { display: grid; gap: .2rem; margin: 0 0 .7rem; font-style: normal; }
.track-label strong { font-size: .86rem; font-weight: 700; }
.track-label small { color: var(--study-muted); font-size: .72rem; line-height: 1.45; }
.track iframe { width: 100%; height: 80px; min-height: 80px; display: block; border: 0; }
.track-fallback { min-height: var(--study-target); display: inline-flex; align-items: center; font-size: .73rem; text-underline-offset: .2rem; }
.track-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
}
.recordings-cta {
  min-height: var(--study-target);
  display: inline-flex;
  align-items: center;
  padding-inline: .8rem;
  border: 1px solid currentColor;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}
.recordings-cta:hover { color: var(--study-ink); background: var(--study-white); }

/* Detached review tooling contains exactly the two requested destinations. */
.studies-page .review-dock {
  right: auto;
  bottom: max(.75rem, env(safe-area-inset-bottom, 0px));
  left: 50%;
  width: auto;
  max-width: calc(100vw - 1.5rem);
  display: flex;
  padding: .35rem;
  color: #f5f5f2;
  background: rgba(22, 24, 26, .97);
  border: 1px solid #565a5c;
  border-radius: 0;
  box-shadow: none;
  transform: translateX(-50%);
  backdrop-filter: none;
}

.studies-page .review-dock a {
  min-height: var(--study-target);
  padding-inline: 1rem;
  border-radius: 0;
}

.studies-page .review-dock a[aria-current="page"] { color: var(--study-ink); background: var(--study-white); }

/* A / Open Lesson */
.lesson-hero {
  min-height: 100svh;
  padding: calc(var(--header-height) + 5.5rem) clamp(1.25rem, 3vw, 3.5rem) 7rem;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .72fr);
  gap: clamp(2rem, 4vw, 5rem);
  background: var(--study-white);
  border-bottom: 1px solid var(--study-ink);
}

.lesson-media { min-width: 0; margin: 0; display: grid; grid-template-rows: 1fr auto; align-self: stretch; }
.lesson-media img { min-height: 33rem; height: 100%; object-fit: cover; object-position: 54% center; }
.lesson-media figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .7rem; border-top: 1px solid var(--study-ink); }
.lesson-copy { min-width: 0; display: flex; flex-direction: column; gap: clamp(1.25rem, 2.4vh, 2rem); }
.lesson-copy .study-kicker { margin: 0; padding-bottom: .9rem; border-bottom: 1px solid var(--study-line); }
.lesson-copy .study-title { margin-top: auto; font-size: clamp(3.2rem, 5.3vw, 6.4rem); }
.lesson-copy .track { margin-top: auto; }

/* B / Immersive Welcome */
.immersive-hero {
  position: relative;
  height: 100svh;
  height: 100dvh;
  padding-top: 0;
  display: grid;
  overflow: hidden;
  color: var(--study-white);
  background: var(--study-ink);
}

.immersive-hero__image { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% center; }
.immersive-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 13, 15, .94) 0%, rgba(10, 13, 15, .8) 34%, rgba(10, 13, 15, .62) 68%, rgba(10, 13, 15, .66) 100%); }
.selected-immersive .immersive-hero__award {
  position: absolute;
  z-index: 2;
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  left: clamp(1.25rem, 3vw, 3.5rem);
  width: clamp(6.5rem, 9vw, 8.5rem);
  height: auto;
  filter: drop-shadow(0 .35rem .65rem rgba(10, 13, 15, .32));
}
.immersive-hero .study-switcher { color: var(--study-white); background: rgba(22, 24, 26, .78); }
.immersive-hero .study-switcher a[aria-current="page"],
.immersive-hero .study-switcher a:hover { color: var(--study-ink); background: var(--study-white); }
.immersive-copy {
  position: relative;
  z-index: 2;
  width: min(42rem, 49vw);
  height: 100dvh;
  padding: clamp(6.5rem, 14dvh, 8.5rem) clamp(1.25rem, 4vw, 5rem) clamp(6.5rem, 13dvh, 8rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.immersive-copy .study-kicker { margin: 0; color: #d7c37e; }
.immersive-copy .study-title { margin: clamp(.85rem, 2dvh, 1.35rem) 0 0; font-size: clamp(3.2rem, 9dvh, 6.4rem); }
.immersive-copy .study-support { margin-top: clamp(1.1rem, 2.2dvh, 1.65rem); color: #d9ddde; }
.immersive-copy .study-cta { margin-top: clamp(1.4rem, 3dvh, 2.2rem); }
.immersive-copy .study-cta { color: var(--primary-gold-text); background-color: #d9bd68; background-image: var(--primary-gold-shine), var(--primary-gold-gradient); background-position: -220% 50%, 0 50%; background-size: 220% 100%, 200% 100%; border-color: var(--primary-gold-border); }
.immersive-copy .study-cta:hover,
.immersive-copy .study-cta:focus-visible { background-position: 220% 50%, 100% 50%; }
.immersive-listening {
  position: absolute;
  z-index: 2;
  right: clamp(1.25rem, 3vw, 3.5rem);
  bottom: clamp(5.65rem, 9dvh, 6.5rem);
  width: clamp(24rem, 28vw, 26rem);
  color: var(--study-white);
}
.immersive-listening .track { padding-top: clamp(.5rem, 1.2dvh, .8rem); }
.immersive-listening .track-label { margin-bottom: .45rem; }
.immersive-listening .track-label small { color: #d9ddde; }

.selected-immersive { min-height: 100dvh; padding-bottom: 0; overflow-x: clip; background: var(--study-ink); }
.selected-immersive main { height: 100%; min-height: 0; }

/* C / Touch in Motion */
.motion-hero {
  min-height: 100svh;
  padding-top: var(--header-height);
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(24rem, .68fr);
  background: var(--study-white);
  border-bottom: 1px solid var(--study-ink);
}

.motion-media { position: relative; min-width: 0; min-height: calc(100svh - var(--header-height)); overflow: hidden; background: var(--study-ink); }
.motion-media video,
.motion-media__poster { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.motion-media__poster { display: none; }
.motion-media .prototype-note { position: absolute; z-index: 2; right: 1.25rem; bottom: 5.5rem; left: 1.25rem; width: fit-content; padding: .55rem .7rem; color: var(--study-white); background: rgba(22, 24, 26, .85); }
.motion-copy { min-width: 0; padding: 7rem clamp(1.5rem, 3.5vw, 4rem) 6.5rem; display: flex; flex-direction: column; gap: 1.6rem; background: var(--study-blue); border-left: 1px solid var(--study-ink); }
.motion-copy .study-kicker { margin: 0; }
.motion-copy .study-title { margin-top: auto; font-size: clamp(3.45rem, 5.3vw, 6.5rem); }
.motion-copy .track { margin-top: auto; }

/* Studies index */
.studies-index {
  min-height: 100svh;
  padding: calc(var(--header-height) + 5.75rem) clamp(1.25rem, 3vw, 3.5rem) 7rem;
  background: var(--study-paper);
}

.studies-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(17rem, .6fr); gap: clamp(2rem, 7vw, 8rem); align-items: end; margin-bottom: clamp(3rem, 7vh, 5rem); }
.studies-intro .study-kicker { margin: 0 0 1.5rem; }
.studies-intro__aside { display: grid; gap: 1.4rem; }
.studies-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--study-ink); border-bottom: 1px solid var(--study-ink); }
.study-card { min-width: 0; padding: 1rem; display: grid; grid-template-rows: auto 15rem auto; gap: 1rem; border-right: 1px solid var(--study-ink); }
.study-card:last-child { border-right: 0; }
.study-card__top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.study-card__media { position: relative; min-width: 0; overflow: hidden; background: var(--study-blue); }
.study-card__media img,
.study-card__media video { height: 100%; object-fit: cover; }
.study-card__media video { position: absolute; inset: 0; }
.study-card__media .motion-media__poster { position: absolute; inset: 0; }
.study-card:nth-child(2) .study-card__media::after { position: absolute; inset: 0 48% 0 0; content: ""; background: rgba(10, 13, 15, .38); }
.study-card h2 { margin: 0 0 .45rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -.025em; }
.study-card p { margin: 0; color: var(--study-muted); font-size: .85rem; line-height: 1.5; }
.study-card a { min-height: var(--study-target); display: inline-flex; align-items: center; font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; text-underline-offset: .3rem; }
.studies-track { margin-top: 3rem; display: grid; grid-template-columns: minmax(14rem, .55fr) minmax(18rem, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }

@media (max-width: 64rem) {
  .study-switcher { top: 6rem; }
  .lesson-hero { padding-top: 11rem; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); }
  .lesson-media img { min-height: 35rem; }
  .immersive-hero__image,
  .immersive-hero__scrim { inset-block-start: 0; height: 100%; }
  .immersive-copy { width: 66vw; height: 100dvh; }
  .motion-hero { padding-top: 5rem; grid-template-columns: 1.15fr .85fr; }
  .motion-media { min-height: calc(100svh - 5rem); }
  .motion-copy { padding-top: 7rem; }
  .studies-index { padding-top: 11rem; }
}

@media (max-width: 48rem) {
  .studies-page { padding-bottom: 5.25rem; }
  .selected-immersive { padding-bottom: 0; }
  .study-switcher { position: absolute; top: 5.75rem; right: 1rem; left: 1rem; grid-template-columns: repeat(3, 1fr); }
  .study-switcher__label { min-height: 1.75rem; grid-column: 1 / -1; padding: .25rem .55rem; border-right: 0; border-bottom: 1px solid currentColor; }
  .study-switcher a { padding-inline: .35rem; }
  .study-switcher__name { display: inline; }
  .lesson-hero { min-height: auto; padding: 10.25rem 1.25rem 6rem; grid-template-columns: 1fr; gap: 2rem; }
  .lesson-media { order: 1; }
  .lesson-media img { min-height: 0; height: clamp(20rem, 69vh, 34rem); object-position: 54% center; }
  .lesson-copy { order: 2; }
  .lesson-copy .study-title { margin-top: .5rem; font-size: clamp(3.4rem, 15vw, 4.7rem); }
  .lesson-media figcaption { display: grid; }
  .selected-immersive .immersive-hero { height: auto; min-height: max(50rem, 100svh); padding-top: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .selected-immersive .immersive-hero__image { position: absolute; inset: 0; height: 100%; object-position: 52% 50%; }
  .selected-immersive .immersive-hero__scrim {
    inset: 0;
    height: 100%;
    background:
      linear-gradient(180deg, rgba(10, 13, 15, .2) 0%, rgba(10, 13, 15, .45) 38%, rgba(10, 13, 15, .9) 70%, rgba(10, 13, 15, .97) 100%),
      linear-gradient(90deg, rgba(10, 13, 15, .7) 0%, rgba(10, 13, 15, .18) 100%);
  }
  .selected-immersive .immersive-hero__award { top: 6.25rem; bottom: auto; left: 1rem; width: 5rem; }
  .selected-immersive .immersive-copy {
    grid-row: 1;
    width: 100%;
    height: auto;
    min-height: clamp(31rem, 68dvh, 38rem);
    padding: 7.25rem 1rem 2rem;
    justify-content: center;
    gap: 0;
    background: transparent;
  }
  .selected-immersive .immersive-copy .study-title { margin-top: clamp(.45rem, 1.1dvh, .65rem); }
  .selected-immersive .immersive-copy .study-title { font-size: clamp(2.7rem, 12.6vw, 3.2rem); line-height: .86; }
  .selected-immersive .immersive-copy .study-support { margin-top: clamp(.55rem, 1.25dvh, .75rem); font-size: .84rem; line-height: 1.3; }
  .selected-immersive .immersive-copy .study-cta { min-height: 2.75rem; margin-top: clamp(.7rem, 1.7dvh, 1rem); padding-block: .35rem; }
  .selected-immersive .immersive-listening { position: relative; inset: auto; grid-row: 2; align-self: start; width: 100%; padding: clamp(1rem, 2.4dvh, 1.4rem) 1rem 2rem; }
  .selected-immersive .immersive-listening .track { width: 100%; padding-top: .35rem; }
  .selected-immersive .track-label { width: 100%; min-width: 0; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; row-gap: .05rem; align-items: baseline; margin-bottom: .25rem; overflow: hidden; }
  .selected-immersive .track-label > * { min-width: 0; }
  .selected-immersive .track-label strong,
  .selected-immersive .track-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .selected-immersive .track-label span { grid-row: 1 / span 2; }
  .selected-immersive .track-label strong { font-size: .76rem; }
  .selected-immersive .track-label small { display: none; }
  .selected-immersive .track-actions { gap: .45rem; margin-top: clamp(.65rem, 1.5dvh, .9rem); }
  .selected-immersive .recordings-cta { padding-inline: .55rem; font-size: .61rem; }

  .home-page.selected-immersive .immersive-hero { min-height: auto; grid-template-rows: 34rem auto; }
  .home-page.selected-immersive .immersive-copy { min-height: 0; padding: clamp(10.5rem, 27.5dvh, 14.5rem) 1rem 1.5rem; justify-content: flex-start; }

  .motion-hero { min-height: auto; display: flex; flex-direction: column; padding-top: 5rem; }
  .motion-media { min-height: 50svh; margin-top: 5.25rem; order: 1; }
  .motion-copy { order: 2; min-height: 42rem; padding: 2.25rem 1.25rem 6rem; border-top: 1px solid var(--study-ink); border-left: 0; }
  .motion-copy .study-title { margin-top: 1.5rem; font-size: clamp(3.5rem, 15vw, 4.7rem); }
  .studies-index { padding: 10.25rem 1.25rem 6rem; }
  .studies-intro { grid-template-columns: 1fr; }
  .studies-grid { grid-template-columns: 1fr; }
  .study-card { grid-template-rows: auto 18rem auto; border-right: 0; border-bottom: 1px solid var(--study-ink); }
  .study-card:last-child { border-bottom: 0; }
  .studies-track { grid-template-columns: 1fr; }
}

@media (min-width: 40rem) and (max-width: 48rem) {
  .selected-immersive { --immersive-mobile-image: clamp(16rem, 31dvh, 18.5rem); }
  .selected-immersive .immersive-hero__image { object-position: 52% 34%; }
}

/* Short-phone first-slice compression; touch targets remain 44px. */
@media (max-width: 48rem) and (max-height: 43rem) {
  .selected-immersive { --immersive-mobile-image: 7.5rem; }
  .selected-immersive .immersive-copy { padding-top: .4rem; }
  .selected-immersive .immersive-copy .study-kicker { font-size: .58rem; }
  .selected-immersive .immersive-copy .study-title { margin-top: .25rem; font-size: 2.35rem; line-height: .88; }
  .selected-immersive .immersive-copy .study-support { margin-top: .35rem; font-size: .75rem; line-height: 1.15; }
  .selected-immersive .immersive-copy .study-cta { min-height: 2.75rem; margin-top: .5rem; padding-block: .25rem; }
  .selected-immersive .immersive-hero__award { bottom: .5rem; width: 4.75rem; }
  .selected-immersive .immersive-listening { padding-top: .85rem; padding-bottom: 1.25rem; }
  .selected-immersive .track-label { grid-template-columns: auto 1fr; margin-bottom: .15rem; }
  .selected-immersive .track-label span { grid-row: auto; }
  .selected-immersive .track-label small { display: none; }
  .selected-immersive .track-actions { min-height: 2.75rem; margin-top: .4rem; }
  .selected-immersive .review-dock { bottom: .35rem; padding: .2rem; }
  .home-page.selected-immersive .immersive-hero { grid-template-rows: 25rem auto; }
  .home-page.selected-immersive .immersive-copy { padding-top: 6rem; padding-bottom: 1rem; }
}

@media (min-width: 48.001rem) and (max-height: 50rem) {
  .selected-immersive .immersive-copy { padding-top: .65rem; padding-bottom: 4.7rem; }
  .selected-immersive .immersive-copy .study-title { margin-top: .35rem; font-size: clamp(3rem, 8.2dvh, 4rem); }
  .selected-immersive .study-support { margin-top: .45rem; font-size: .9rem; line-height: 1.3; }
  .selected-immersive .study-cta { min-height: 2.75rem; margin-top: .65rem; }
  .selected-immersive .track-label { grid-template-columns: auto 1fr; column-gap: .6rem; row-gap: .05rem; align-items: baseline; margin-bottom: .25rem; }
  .selected-immersive .track-label span { grid-row: 1 / span 2; }
  .selected-immersive .immersive-listening { bottom: 4.5rem; }
}

@media (max-width: 24.375rem) {
  .study-title { overflow-wrap: normal; }
  .study-switcher { right: .75rem; left: .75rem; }
  .lesson-hero,
  .studies-index { padding-inline: 1rem; }
  .motion-copy,
  .immersive-copy { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-media video,
  .study-card__media video { display: none; }
  .motion-media__poster,
  .study-card__media .motion-media__poster { display: block; }
  .study-cta { transition: none; }
  .study-cta:active { transform: none; }
}

@media (hover: none) and (pointer: coarse) {
  .study-cta:hover,
  .immersive-copy .study-cta:hover { background-position: -220% 50%, 0 50%; }
}