/* Study48 opening: unboxed utility chrome above one shared portrait stage. */
.study48 .s13-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(48px, auto) 30px;
  align-items: center;
  gap: 0 28px;
  min-height: 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid #493d42;
  border-left: 0;
  background: none;
}
.study48 .s13-header::after { display: none; }
.study48 .s13-header .s13-brand { grid-column: 1; grid-row: 1; min-width: 0; }
.study48 .s13-header .s13-brand img { filter: none; }
.study48 .s13-header #s14-nav { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: clamp(12px, 1.5vw, 22px); }
.study48 .s13-header #s14-nav a { min-height: 44px; font: 600 12px/1.3 Arial, sans-serif; letter-spacing: .035em; gap: 5px; }
.study48 .s13-header #s14-nav .s41-lettering--nav { height: 10px; }
.study48 .s13-header .s14-menu-toggle { display: none; }
.study48 .s13-header > .hero-now {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  margin: 0;
  padding: 2px 0 4px;
  border: 0;
  border-top: 1px solid #332a32;
  border-bottom: 1px solid #332a32;
  border-left: 0;
  background: none;
  color: #c9c0c7;
  text-decoration: none;
}
.study48 .s13-header > .hero-now > .ui-icon { width: 15px; height: 15px; color: #a99eaa; }
.study48 .s13-header > .hero-now > .ui-icon:last-child { grid-column: 4; grid-row: 1; color: #a99eaa; }
.study48 .hero-now-label { grid-column: 2; grid-row: 1; padding: 0 8px 0 0; border-right: 1px solid #504148; font: 700 11px/1.25 Arial, sans-serif !important; letter-spacing: .06em; color: #cbbdba; }
.study48 .s13-header > .hero-now #hero-live-names { grid-column: 3; grid-row: 1; min-width: 0; font-size: 12px; line-height: 1.35; color: #eee8e8; overflow-wrap: anywhere; }
.study48 .s13-header > .hero-now[data-state="live"] { border-color: #67533d; }
.study48 .s13-header > .hero-now[data-state="live"] > .ui-icon:first-child,
.study48 .s13-header > .hero-now[data-state="live"] .hero-now-label { color: #dfbd74; }
.study48 .s13-header > .hero-now[data-state="live"] #hero-live-names { color: #f4e3bd; }
.study48 .s13-header > .hero-now:focus-visible { outline: 2px solid #dfbd74; outline-offset: 3px; }

.study48 .s14-opening { width: 100%; }
.study48 .s21-ensemble {
  width: min(1180px, calc(100% - 2 * var(--page-pad, 18px)));
  margin: 8px auto 0;
  padding: 0;
  border: 0;
  background: none;
}
.study48 .s27-stage { display: flex; flex-direction: column; gap: 4px; position: relative; isolation: isolate; }
.study48 .s21-heading {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 4px 24px;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0 0 8px;
}
.study48 .s21-identity { grid-column: 1; grid-row: 1 / 3; min-width: 0; }
.study48 .s21-identity > p { margin: 0 0 7px; color: #b9a98c; font: 600 10px/1.35 Arial, sans-serif; letter-spacing: .11em; }
.study48 .s21-identity h1 { width: min(350px, 32vw); max-width: 100%; margin: 0; line-height: 0; background: #e5c681; mask: url('assets/wordmark.png') center / 100% 100% no-repeat; }
.study48 .s21-identity h1 img { display: block; width: 100%; height: auto; opacity: 0; }
.study48 .s21-description { grid-column: 2; grid-row: 1; max-width: 31em; margin: 0; color: #c8c0c4; font-size: 13px; line-height: 1.6; text-align: right; }
.study48 .s21-description br { display: none; }
.study48 .s21-members-link { grid-column: 2; grid-row: 2; justify-self: end; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #dccb9d; font: 600 12px/1.4 Arial, sans-serif; letter-spacing: .08em; }
.study48 .s21-members-link .ui-icon { width: 14px; height: 14px; }
.study48 .s21-members-link:focus-visible { outline: 2px solid #dfbd74; outline-offset: 3px; }

.study48 .s27-company {
  position: relative;
  width: 100%;
  height: clamp(430px, 41vw, 550px);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #110d12;
}
.study48 .s27-wave {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
  opacity: .52;
  pointer-events: none;
}
.study48 .s27-wave { display: none; }
.study48 .s21-lineup {
  position: absolute;
  inset: auto 0 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0 12px;
}
.study48 .s22-pair { display: contents; }
.study48 .s21-member { position: relative; align-self: end; min-width: 0; margin: 0; padding: 0; }
.study48 .s21-profile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; color: inherit; text-decoration: none; }
.study48 .s21-art { position: relative; width: 100%; height: clamp(285px, 30vw, 390px); overflow: visible; }
.study48 .s21-portrait {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(100%, calc(clamp(285px, 30vw, 390px) * var(--aw) / var(--ah)));
  max-width: 340px;
  aspect-ratio: var(--aw) / var(--ah);
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
}
.study48 .s21-portrait img { position: absolute; top: calc(-100% * var(--ay) / var(--ah)); left: calc(-100% * var(--ax) / var(--aw)); width: calc(100% / var(--aw)); max-width: none; height: auto; }
.study48 .s21-caption { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 42px; padding: 5px 2px 0; }
.study48 .s21-caption h2 { margin: 0; padding: 0; color: #f2ece6; background: none; font: 600 17px/1.3 "Zen Kaku Gothic New", "Yu Gothic", sans-serif; text-align: center; text-shadow: 0 1px 7px #100c10; white-space: normal; overflow-wrap: anywhere; }
.study48 .s21-caption > .ui-icon { display: none; }
.study48 .s21-caption .s13-live-badge { position: absolute; left: 50%; top: 0; bottom: auto; margin: 0; padding: 3px 6px; transform: translate(-50%, -100%); border: 0; background: #dfbd74; color: #16100e; font: 700 10px/1.2 Arial, sans-serif; letter-spacing: .06em; }
.study48 .s21-profile:focus-visible { outline: 2px solid #dfbd74; outline-offset: 3px; }
.study48 .s27-products { display: none; }

/* Explicitly outrank inherited per-member compositions (study27c/d). */
.study48.study27 .s21-member[data-live-member] {
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  z-index: auto;
  margin: 0;
  padding: 0;
}
.study48.study27 .s21-member[data-live-member] .s21-profile { flex-direction: column; }
.study48.study27 .s21-member[data-live-member] .s21-caption { position: relative; inset: auto; width: 100%; margin: 0; }
.study48.study27 .s21-member[data-live-member] .s21-caption h2 { font-size: 17px; padding: 0; white-space: normal; }
.study48.study27 .s21-member[data-live-member] .s21-caption .s13-live-badge {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  width: max-content;
  margin: 0;
  transform: translate(-50%, -100%);
}
.study48.study27 .s27-company {
  grid-column: auto;
  grid-row: auto;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  container-type: normal;
}
.study48.study27 .s27-company:has(.s13-live-badge:not([hidden])) { margin: 0; }

/* Desktop uses repeating roster-scale cells as one shared floor, only behind
   the art slots. The fixed 44px name strip below it stays clear. */
@media (min-width: 761px) {
  .study48.study27 .s21-lineup { isolation: isolate; }
  .study48.study27 .s21-lineup::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 44px;
    height: 114px;
    background: url("assets/study48-wave-lower.svg") left bottom / 192px 114px repeat-x;
    opacity: .48;
    pointer-events: none;
  }
  .study48.study27 .s21-member[data-live-member] { z-index: 1; }
  .study48.study27 .s21-member[data-live-member] .s21-art { position: relative; z-index: 1; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .study48 .s13-header { gap: 0 16px; }
  .study48 .s13-header #s14-nav { gap: 10px; }
  .study48 .s13-header #s14-nav a { font-size: 10px; }
  .study48 .s13-header #s14-nav .ui-icon { width: 16px; height: 16px; flex-basis: 16px; }
  .study48 .s13-header #s14-nav .s41-lettering--nav { display: none; }
  .study48 .s21-identity h1 { width: min(320px, 34vw); }
  .study48 .s27-company { height: clamp(410px, 48vw, 520px); }
  .study48 .s21-art { height: clamp(280px, 34vw, 360px); }
  .study48 .s21-portrait { width: min(100%, calc(clamp(280px, 34vw, 360px) * var(--aw) / var(--ah))); }
}

@media (max-width: 760px) {
  .study48 .s13-header {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: minmax(56px, auto) auto;
    gap: 0 9px;
    min-height: 56px;
    padding: 0 10px;
  }
  .study48 .s13-header .s13-brand { grid-column: 1; grid-row: 1; width: 32px; min-width: 0; min-height: 44px; gap: 0; padding:0; border:0; }
  .study48 .s13-header .s13-brand img { width: 28px; height: 38px; object-fit: contain; }
  .study48 .s13-header .s13-brand span { display: none; }
  .study48 .s13-header #s14-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; width: 100%; margin: 0; padding: 6px 0 8px; border-top: 1px solid #332a32; }
  .study48[data-s14-nav="closed"] .s13-header #s14-nav { display: none; }
  .study48 .s13-header #s14-nav a { display: flex; flex-direction: row; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 48px; padding: 6px 0; font: 600 12px/1.3 Arial, sans-serif; white-space: nowrap; }
  .study48 .s13-header #s14-nav .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; }
  .study48 .s13-header #s14-nav .s41-lettering--nav { display: none; }
  .study48 .s13-header .s14-menu-toggle { grid-column: 3; grid-row: 1; display: inline-flex; justify-self: end; min-width: 70px; min-height: 44px; padding: 5px 8px; gap: 5px; border: 0; color: #ddd4d0; font-size: 11px; }
  .study48 .s13-header .s14-menu-toggle .ui-icon { width: 17px; height: 17px; }
  .study48 .s13-header > .hero-now { grid-column: 2; grid-row: 1; grid-template-columns: 14px auto minmax(0, 1fr); gap: 5px; min-height: 44px; margin: 0; padding: 4px 0; border: 0; }
  .study48 .s13-header > .hero-now > .ui-icon:first-child { width: 14px; height: 14px; }
  .study48 .s13-header > .hero-now > .ui-icon:last-child { display: none; }
  .study48 .hero-now-label { padding-right: 5px; font-size: 10px !important; }
  .study48 .s13-header > .hero-now #hero-live-names { font-size: 11px; line-height: 1.3; }
  .study48 .s14-opening { width: 100%; }
  .study48 .s21-ensemble { width: calc(100% - 20px); margin-top: 4px; }
  .study48 .s27-stage { gap: 2px; }
  .study48 .s21-heading { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 1px 8px; padding: 0 2px 5px; }
  .study48 .s21-identity { grid-column: 1; grid-row: 1 / 3; }
  .study48 .s21-identity > p { margin-bottom: 4px; font-size: 8px; letter-spacing: .08em; }
  .study48 .s21-identity h1 { width: min(190px, 58vw); }
  .study48 .s21-description { display: none; }
  .study48 .s21-members-link { grid-column: 2; grid-row: 1 / 3; align-self: center; min-height: 44px; gap: 6px; font-size: 10px; letter-spacing: .04em; }
  .study48 .s21-members-link .ui-icon { width: 12px; height: 12px; }
  .study48 .s27-company { height: auto; min-height: 0; overflow: hidden; background: #110d12; }
  .study48.study27 .s27-company { height: auto; min-height: 0; aspect-ratio: auto; }
  .study48 .s27-wave { display: none; }
  .study48 .s21-lineup { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 8px; padding: 0 4px 8px; }
  .study48.study27 .s22-pair { position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 4px 10px; min-width: 0; isolation: isolate; }
  .study48.study27 .s22-pair::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 34px;
    height: 114px;
    background-position: left bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: .46;
    pointer-events: none;
  }
  .study48.study27 .s22-pair:first-child::before { background-image: url("assets/study48-wave-upper.svg"); }
  .study48.study27 .s22-pair:last-child::before { background-image: url("assets/study48-wave-lower.svg"); }
  .study48.study27 .s22-pair .s21-member[data-live-member] { z-index: 1; }
  .study48.study27 .s22-pair .s21-member[data-live-member] .s21-art { position: relative; z-index: 1; }
  .study48 .s21-member { align-self: end; }
  .study48 .s21-art { height: clamp(150px, 47vw, 190px); }
  .study48 .s21-portrait { width: min(100%, calc(clamp(150px, 47vw, 190px) * var(--aw) / var(--ah))); max-width: 240px; }
  .study48 .s21-caption { min-height: 30px; gap: 3px; padding-top: 2px; }
  .study48 .s21-caption h2 { font-size: 14px; line-height: 1.25; }
  .study48 .s21-caption .s13-live-badge { font-size: 9px; padding: 2px 5px; }
  .study48.study27 .s21-member[data-live-member] .s21-caption h2 { font-size: 14px; }
}

@media (max-width: 360px) {
  .study48 .s13-header { gap: 0 6px; padding-inline: 7px; }
  .study48 .s13-header > .hero-now { grid-template-columns: 13px auto minmax(0, 1fr); gap: 4px; }
  .study48 .s13-header > .hero-now #hero-live-names { font-size: 10px; }
  .study48 .s13-header #s14-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study48 .s21-identity h1 { width: min(170px, 55vw); }
  .study48 .s21-members-link { gap: 4px; font-size: 9px; }
  .study48 .s21-lineup { column-gap: 5px; }
  .study48 .s21-art { height: clamp(142px, 46vw, 165px); }
  .study48 .s21-portrait { width: min(100%, calc(clamp(142px, 46vw, 165px) * var(--aw) / var(--ah))); }
  .study48 .s21-caption h2 { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .study48 .s13-header *, .study48 .s27-company * { animation: none !important; transition: none !important; }
}

@media (max-width: 760px) {
  .study48.study27 .s21-caption { box-sizing: border-box; height: 34px; min-height: 34px; padding: 0 2px; }
  .study48.study27 .s21-caption h2 { line-height: 1.2; }
}