/* =========================================================
   THERMIDOR — Top page
   ========================================================= */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding:
    calc(var(--header-h) + 30px)
    22px
    calc(82px + var(--safe-bottom));
  background:
    radial-gradient(circle at 50% 46%, rgba(95, 77, 61, .10), transparent 36%),
    linear-gradient(to bottom, #12110f, #0c0c0b);
  isolation: isolate;
}

/*
  Publicity-visual motif: a subdued tricolour cloth texture derived for the web.
*/
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.18), rgba(10,10,10,.35)),
    url("../assets/hero-flag.jpg") center 38% / cover no-repeat;
  opacity: .88;
  filter: saturate(.88) contrast(1.02) brightness(.78);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.38), transparent 30%, transparent 70%, rgba(0,0,0,.46)),
    linear-gradient(to top, rgba(0,0,0,.50), transparent 44%);
  pointer-events: none;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 3px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.012) 0px,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 4px);
  mix-blend-mode: screen;
}

.hero-guillotine {
  position: absolute;
  z-index: 1;
  width: min(72vw, 330px);
  height: auto;
  right: -24vw;
  top: 50%;
  transform: translateY(-48%);
  opacity: .70;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  text-align: center;
  transform: translateX(-2px);
}

.eyebrow {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .13em;
}

.hero-title {
  margin: 0;
  font-weight: 400;
}

.hero-title__en {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(2.7rem, 14.2vw, 5.1rem);
  letter-spacing: .035em;
  line-height: .94;
  white-space: nowrap;
  transform: translateX(-.01em);
}

.hero-title__jp {
  display: block;
  margin-top: 13px;
  font-size: .82rem;
  letter-spacing: .24em;
  color: var(--muted);
}

.tagline {
  margin: 38px auto 0;
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP", serif;
  font-size: clamp(1.06rem, 5vw, 1.45rem);
  letter-spacing: .08em;
  line-height: 2.05;
}

.tagline span {
  white-space: nowrap;
}

.hero-meta {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .1em;
}

.hero-meta__line {
  width: 24px;
  border-top: 1px solid rgba(224, 216, 198, .25);
}

.button--hero {
  margin-top: 26px;
  min-width: 180px;
  color: var(--paper-light);
  border-color: rgba(224, 216, 198, .58);
  background: rgba(17, 17, 15, .28);
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(20px + var(--safe-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: rgba(224, 216, 198, .50);
  font-size: .58rem;
  letter-spacing: .18em;
}

.scroll-cue i {
  width: 1px;
  height: 31px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: scrollCue 1.9s ease-in-out infinite;
}

@keyframes scrollCue {
  0%, 100% { transform: scaleY(.45); transform-origin: top; opacity: .4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

.reveal-item {
  opacity: 0;
  transform: translateY(8px);
  animation: openingReveal .9s ease forwards;
}
.reveal-item:nth-child(1) { animation-delay: .22s; }
.reveal-item:nth-child(2) { animation-delay: .52s; }
.reveal-item:nth-child(3) { animation-delay: .90s; }
.reveal-item:nth-child(4) { animation-delay: 1.18s; }
.reveal-item:nth-child(5) { animation-delay: 1.42s; }

@keyframes openingReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Story ---------- */

.story {
  position: relative;
  background: var(--ink);
}

.story-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.story-background {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(11, 10, 9, .55), rgba(11, 10, 9, .72)),
    url("../assets/story-flag.jpg") center center / cover no-repeat,
    linear-gradient(
      to bottom,
      rgba(28, 26, 22, 1),
      rgba(12, 12, 11, 1)
    );
  filter: saturate(.94) brightness(.9);
}

.story-background::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: calc(.08 + var(--story-danger) * .10);
  background:
    linear-gradient(90deg, rgba(0,0,0,.44), transparent 30%, transparent 70%, rgba(0,0,0,.48)),
    repeating-linear-gradient(
      0deg,
      transparent 0 9px,
      rgba(224, 216, 198, .012) 9px 10px
    );
}

.story-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 44%, rgba(23, 59, 85, .12), transparent 28%),
    radial-gradient(circle at 74% 38%, rgba(116, 31, 28, calc(.06 + var(--story-danger) * .18)), transparent 32%),
    linear-gradient(to top, rgba(0,0,0,.36), transparent 48%);
}

.story-year {
  position: absolute;
  left: -3vw;
  top: 13vh;
  color: rgba(224, 216, 198, .045);
  font-size: clamp(7.5rem, 38vw, 13rem);
  line-height: .8;
  letter-spacing: -.08em;
  transition: color .5s ease;
}

.story-guillotine {
  position: absolute;
  width: min(66vw, 310px);
  right: -18vw;
  top: 50%;
  transform: translateY(-46%);
  opacity: calc(.16 + var(--story-danger) * .46);
  transition: opacity .35s ease;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.35));
}



.story-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 30px 0 22px;
}

.story-label {
  position: absolute;
  top: -78px;
  margin: 0;
  color: var(--muted);
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: .92rem;
  letter-spacing: .11em;
}

.story-label span {
  display: block;
  margin-top: 3px;
  font-size: .56rem;
  color: rgba(145, 141, 132, .7);
  letter-spacing: .18em;
}

.story-step {
  position: absolute;
  left: 22px;
  right: 30px;
  top: 50%;
  transform: translateY(-44%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .55s ease;
}

.story-step.is-active {
  opacity: 1;
  transform: translateY(-50%);
}

.story-step p {
  margin: 0 0 18px;
  max-width: 30em;
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP", serif;
  font-size: clamp(1rem, 4.7vw, 1.24rem);
  line-height: 2.15;
  letter-spacing: .045em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .42);
}

.story-step strong {
  font-weight: 600;
}

.story-ideal {
  margin-top: 24px !important;
}

.story-step--turn p {
  max-width: 23em;
  font-size: clamp(1.08rem, 5.1vw, 1.34rem);
  line-height: 2.25;
}

.story-step--impact {
  top: 52%;
}

.story-step--impact .story-ending {
  max-width: 24em;
  margin: 0 !important;
  font-size: clamp(1.18rem, 5.8vw, 1.58rem) !important;
  line-height: 2.25;
}

.story-step--impact .story-ending strong {
  display: inline-block;
  margin-top: .35em;
  font-size: 1.08em;
  letter-spacing: .07em;
}

.story-step--last p:first-child {
  color: rgba(224, 216, 198, .76);
}

.story-ending {
  margin-top: 24px !important;
  font-size: clamp(1.08rem, 5.2vw, 1.36rem) !important;
}

.story-ending strong {
  color: #e1d5c3;
}

.brother-line {
  position: absolute;
  left: 12vw;
  right: 12vw;
  bottom: 23vh;
  height: 1px;
  opacity: calc(var(--story-progress) * .58);
}

.brother-line span {
  position: absolute;
  top: 0;
  height: 1px;
  width: 50%;
  background: rgba(224, 216, 198, .44);
  transition: transform .45s ease, width .45s ease;
}

.brother-line__left {
  left: 0;
  transform-origin: left;
  transform:
    translateX(calc(var(--story-danger) * -3px))
    rotate(calc(var(--story-danger) * -0.55deg));
}

.brother-line__right {
  right: 0;
  transform-origin: right;
  transform:
    translateX(calc(var(--story-danger) * 3px))
    rotate(calc(var(--story-danger) * 0.55deg));
}

/* Small separation once danger is high */
.story.is-final .brother-line__left,
.story.is-final .brother-line__right {
  width: calc(50% - 9px);
}

.story-progress {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 30px;
  display: flex;
  gap: 6px;
}

.story-progress span {
  width: 11px;
  height: 1px;
  background: rgba(224, 216, 198, .16);
  transition: background-color .3s ease, width .3s ease;
}

.story-progress span.is-active {
  width: 22px;
  background: rgba(224, 216, 198, .65);
}

.story-scroll-space {
  height: 400svh;
}

/* ---------- Blade transition ---------- */

.blade-transition {
  position: relative;
  height: 52px;
  overflow: hidden;
  background: #090909;
}

.blade-transition div {
  position: absolute;
  inset: -80% -12% -70%;
  background: linear-gradient(110deg, #171411 0%, #0d0c0b 68%, #1b0c0b 100%);
  transform: rotate(-4deg);
  transform-origin: center;
  box-shadow: 0 -1px 0 rgba(224,216,198,.06);
}

/* ---------- Information ---------- */

.information {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 7%, rgba(116,31,28,.12), transparent 31%),
    radial-gradient(circle at 7% 25%, rgba(23,59,85,.07), transparent 28%),
    linear-gradient(to bottom, #11100e 0%, #151310 34%, #0f0f0e 100%);
  color: var(--paper-light);
  padding: 70px 20px 82px;
}

.information::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.009) 0 1px, transparent 1px 6px);
}

.information::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.28), transparent);
}

.information-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1040px);
  margin: 0 auto;
}

.information-heading {
  padding-bottom: 33px;
  border-bottom: 1px solid rgba(224,216,198,.18);
}

.section-kicker {
  margin: 0 0 14px;
  font-size: .74rem;
  letter-spacing: .18em;
  color: rgba(224,216,198,.55);
}

.information h2 {
  margin: 0;
  color: var(--paper-light);
  font-weight: 500;
  font-size: clamp(1.38rem, 6.4vw, 2.45rem);
  line-height: 1.7;
  letter-spacing: .055em;
}

.performance-date {
  padding: 34px 0 31px;
  border-bottom: 1px solid rgba(224,216,198,.18);
}

.performance-date__label,
.info-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(224,216,198,.52);
  font-size: .68rem;
  letter-spacing: .15em;
}

.performance-date__main {
  margin: 0;
  font-family: "Bodoni 72", "Didot", "Bodoni MT", "Times New Roman", serif;
  font-size: clamp(2.6rem, 13vw, 5rem);
  line-height: 1;
  letter-spacing: .025em;
  color: #e1d8c8;
  white-space: nowrap;
}

.performance-date__main span {
  display: inline-block;
  margin: 0 .045em;
  color: rgba(224,216,198,.42);
}

.showtimes {
  border-bottom: 1px solid rgba(224,216,198,.18);
}

.showtime-row {
  padding: 24px 0;
}

.showtime-row + .showtime-row {
  border-top: 1px solid rgba(224,216,198,.12);
}

.showtime-row__name {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-bottom: 14px;
}

.showtime-row__index {
  color: var(--red);
  font-family: "Times New Roman", serif;
  font-size: .72rem;
  letter-spacing: .12em;
}

.showtime-row__name strong {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: .08em;
}

.showtime-row__time {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: rgba(224,216,198,.62);
}

.showtime-row__time b {
  margin-left: 4px;
  color: var(--paper-light);
  font-family: "Times New Roman", serif;
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: .03em;
}

.showtime-row__time i {
  width: 18px;
  height: 1px;
  background: rgba(224,216,198,.22);
}

.info-details {
  display: grid;
  border-bottom: 1px solid rgba(224,216,198,.18);
}

.info-detail {
  padding: 24px 0;
}

.info-detail + .info-detail {
  border-top: 1px solid rgba(224,216,198,.12);
}

.info-detail__primary {
  margin: 0;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 1.16rem;
  letter-spacing: .055em;
  color: var(--paper-light);
}

.info-sub {
  margin: 6px 0 0;
  color: rgba(224,216,198,.54);
  font-size: .76rem;
}

.map-shell {
  position: relative;
  margin-top: 34px;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(224,216,198,.14);
  background: #181714;
}

.map-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 46px rgba(0,0,0,.22);
}

.map-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.75) sepia(.12) brightness(.78) contrast(.95);
}

.map-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;
  color: var(--paper-light);
  background:
    linear-gradient(135deg, rgba(116,31,28,.08), transparent 40%),
    repeating-linear-gradient(90deg, rgba(224,216,198,.035) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(224,216,198,.035) 0 1px, transparent 1px 24px),
    #181714;
}

.map-placeholder span {
  display: block;
  font-family: "Times New Roman", serif;
  font-size: 1rem;
  letter-spacing: .2em;
}

.map-placeholder p {
  margin: 11px 0 0;
  color: rgba(224,216,198,.50);
  font-size: .73rem;
}

.ticket-panel {
  position: relative;
  margin-top: 45px;
  padding: 31px 20px 23px;
  border: 1px solid rgba(224,216,198,.20);
  background:
    linear-gradient(135deg, rgba(116,31,28,.105), transparent 43%),
    rgba(8,8,8,.20);
}

.ticket-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20px;
  width: 58px;
  height: 2px;
  background: var(--red);
}

.ticket-panel__small {
  margin: 0;
  color: rgba(224,216,198,.45);
  font-family: "Times New Roman", serif;
  font-size: .62rem;
  letter-spacing: .21em;
}

.ticket-panel h3 {
  margin: 5px 0 0;
  color: var(--paper-light);
  font-weight: 500;
  font-size: 1.58rem;
  letter-spacing: .07em;
}

.ticket-panel__lead {
  margin: 17px 0 0;
  color: rgba(224,216,198,.65);
  font-size: .82rem;
  line-height: 1.8;
}

.ticket-options {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.ticket-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid rgba(224,216,198,.44);
  color: var(--paper-light);
  background: rgba(255,255,255,.015);
  font-size: .84rem;
  letter-spacing: .055em;
  transition: border-color .25s ease, background-color .25s ease;
}

.ticket-button i {
  font-style: normal;
  color: rgba(224,216,198,.68);
  font-size: 1rem;
}

.ticket-note {
  margin: 14px 0 0;
  color: rgba(224,216,198,.40);
  font-size: .68rem;
}

/* ---------- More ---------- */

.more {
  background: var(--ink);
  color: var(--paper-light);
  padding: 76px 20px 84px;
}

.more-inner {
  width: min(100%, 900px);
  margin: 0 auto;
}

.section-kicker--light {
  color: var(--paper-light);
  margin-bottom: 34px;
  font-size: 1.16rem;
  line-height: 1.7;
}

.more-link {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  min-height: 76px;
  border-top: 1px solid rgba(224, 216, 198, .16);
}

.more-link:last-child {
  border-bottom: 1px solid rgba(224, 216, 198, .16);
}

.more-link__number {
  color: var(--muted);
  font-size: .68rem;
}

.more-link__title {
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: 1.05rem;
  letter-spacing: .07em;
}

.more-link__arrow {
  font-size: 1.2rem;
  transition: transform .25s ease;
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  background: #0b0b0a;
  text-align: center;
  padding: 84px 20px calc(94px + var(--safe-bottom));
  overflow: hidden;
}

.footer-mark {
  width: 84px;
  height: 44px;
  margin: 0 auto 22px;
  position: relative;
}

.footer-mark::before,
.footer-mark::after,
.footer-mark span {
  content: "";
  position: absolute;
  height: 1px;
  background: rgba(224, 216, 198, .35);
}

.footer-mark::before {
  left: 0;
  right: 44px;
  top: 21px;
  transform: rotate(-5deg);
}

.footer-mark::after {
  left: 44px;
  right: 0;
  top: 21px;
  transform: rotate(5deg);
}

.footer-title {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: .13em;
}

.footer-copy {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .1em;
}

/* ---------- Floating ticket ---------- */

.floating-ticket {
  position: fixed;
  z-index: 25;
  right: 14px;
  bottom: calc(14px + var(--safe-bottom));
  background: rgba(17, 17, 15, .92);
  color: var(--paper-light);
  border: 1px solid rgba(224, 216, 198, .45);
  padding: 10px 14px;
  font-size: .72rem;
  letter-spacing: .08em;
  backdrop-filter: blur(9px);
  transition: opacity .25s ease, transform .25s ease;
}

.floating-ticket.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}


/* ---------- Desktop enhancements ---------- */

@media (min-width: 760px) {
  :root {
    --header-h: 76px;
  }

  .site-header {
    padding-left: 34px;
    padding-right: 34px;
  }

  .brand-en {
    font-size: .82rem;
  }

  .hero {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hero-guillotine {
    right: 8vw;
    width: min(30vw, 360px);
  }

  .hero-content {
    transform: translateX(-2px);
  }

  .hero-title__en {
    font-size: clamp(4rem, 8.8vw, 6.7rem);
    letter-spacing: .045em;
    max-width: none;
  }

  .tagline {
    font-size: 1.3rem;
  }

  .story-copy {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 0 48px;
  }

  .story-step {
    left: 48px;
    right: auto;
    width: min(56vw, 620px);
  }

  .story-year {
    left: auto;
    right: 7vw;
    top: 11vh;
    font-size: clamp(12rem, 23vw, 20rem);
  }

  .story-guillotine {
    right: 4vw;
    width: min(28vw, 330px);
  }

  .brother-line {
    left: 48%;
    right: 9%;
    bottom: 22vh;
  }

  .information {
    padding: 106px 42px 112px;
  }

  .information-heading {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) 1.35fr;
    align-items: end;
    gap: 60px;
  }

  .information-heading .section-kicker {
    margin-bottom: 8px;
  }

  .performance-date {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) 1.35fr;
    align-items: end;
    gap: 60px;
  }

  .performance-date__label {
    margin: 0 0 7px;
  }

  .showtime-row {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) 1.35fr;
    align-items: center;
    gap: 60px;
  }

  .showtime-row__name {
    margin-bottom: 0;
  }

  .info-details {
    grid-template-columns: minmax(220px, .65fr) 1.35fr;
  }

  .info-detail + .info-detail {
    border-top: 0;
    border-left: 1px solid rgba(224,216,198,.12);
    padding-left: 60px;
  }

  .map-shell {
    aspect-ratio: 16 / 7;
  }

  .ticket-panel {
    padding: 38px 42px 30px;
  }

  .ticket-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }





  .map-shell {
    aspect-ratio: 16 / 7;
  }

  .ticket-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .more {
    padding: 110px 42px 120px;
  }

  .more-link {
    min-height: 92px;
  }

  .more-link__title {
    font-size: 1.3rem;
  }

  .more-link:hover .more-link__arrow {
    transform: translateX(7px);
  }

  .button:hover {
    background: var(--red);
    color: var(--paper-light);
    border-color: var(--red);
  }

  .ticket-button:hover {
    border-color: rgba(116,31,28,.90);
    background: rgba(116,31,28,.18);
  }

  .global-menu__inner {
    width: min(100%, 900px);
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  .global-menu a {
    font-size: clamp(1.8rem, 4vw, 3rem);
  }

  .floating-ticket {
    right: 26px;
    bottom: 24px;
  }
}

@media (max-width: 430px) {
  .hero-title__en {
    font-size: clamp(2.5rem, 13.4vw, 4.2rem);
    letter-spacing: .028em;
  }

  .hero-guillotine {
    width: min(68vw, 290px);
    right: -28vw;
  }

  .story-guillotine {
    width: min(64vw, 280px);
    right: -22vw;
  }
}

@media (max-width: 390px) {
  .hero::before,
  .story-background {
    filter: saturate(.82) brightness(.84);
  }

  .hero-title__jp {
    letter-spacing: .18em;
  }

  .hero-content {
    transform: translateX(-3px);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .story-step {
    transition: none;
  }
}



/* =========================================================
   v6 visual refinements
   - Use the supplied publicity visual directly
   - Keep the story visible at the end, but heavily darkened
   - Remove the standalone STORY label
   - Keep performance information in the same dark world
   ========================================================= */

.hero::before {
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  height: auto;
  background:
    linear-gradient(to bottom,
      rgba(8,8,8,.06) 0%,
      rgba(8,8,8,.10) 38%,
      rgba(8,8,8,.38) 64%,
      rgba(8,8,8,.94) 100%),
    url("../assets/thermidor-visual.png") center top / 100% auto no-repeat,
    #0c0c0b;
  clip-path: none;
  transform: none;
  opacity: .98;
  filter: saturate(.94) contrast(1.03) brightness(.80);
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 28%, transparent 72%, rgba(0,0,0,.42)),
    linear-gradient(to top, rgba(0,0,0,.64), transparent 48%);
}

.hero-guillotine,
.story-guillotine {
  display: none !important;
}

.hero-title {
  text-shadow: 0 4px 18px rgba(0,0,0,.55);
}

.hero-title__en {
  width: 100%;
  max-width: 100%;
  font-size: clamp(2.26rem, 12.1vw, 4.9rem);
  letter-spacing: .014em;
  white-space: nowrap;
}

.hero-title__jp {
  letter-spacing: .13em;
}

.tagline,
.hero-meta {
  text-shadow: 0 3px 14px rgba(0,0,0,.52);
}

.story-background {
  background:
    linear-gradient(to bottom,
      rgba(8,8,8, calc(.08 + var(--story-danger) * .16)),
      rgba(8,8,8, calc(.16 + var(--story-danger) * .22))),
    url("../assets/thermidor-visual.png") 62% center / cover no-repeat,
    #0b0b0a;
  filter:
    saturate(calc(.96 - var(--story-danger) * .20))
    brightness(calc(.88 - var(--story-danger) * .22))
    contrast(calc(1.02 - var(--story-danger) * .03));
}

.story-background::before {
  opacity: calc(.10 + var(--story-danger) * .32);
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.46), transparent 28%, transparent 70%, rgba(0,0,0,.52)),
    radial-gradient(circle at 50% 48%,
      transparent 0%, rgba(0,0,0,.10) 56%, rgba(0,0,0,.40) 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0 10px,
      rgba(224,216,198,.010) 10px 11px
    );
}

.story-background::after {
  background:
    radial-gradient(circle at 22% 44%,
      rgba(23,59,85, calc(.10 - var(--story-danger) * .05)), transparent 28%),
    radial-gradient(circle at 76% 38%,
      rgba(116,31,28, calc(.10 - var(--story-danger) * .02)), transparent 32%),
    linear-gradient(to top,
      rgba(0,0,0, calc(.22 + var(--story-danger) * .26)),
      transparent 54%);
}

.story-label {
  display: none !important;
}

.story-copy {
  padding: 0 28px 0 24px;
}

.story-step {
  left: 24px;
  right: 28px;
}

.story-step p {
  text-shadow: 0 2px 18px rgba(0,0,0,.66);
}

.brother-line {
  opacity: calc(var(--story-progress) * (.58 - var(--story-danger) * .18));
}

.story.is-final .brother-line__left,
.story.is-final .brother-line__right {
  width: calc(50% - 8px);
}

.blade-transition {
  background: #0b0b0a;
}

.blade-transition div {
  background: linear-gradient(135deg, rgba(12,11,10,1), rgba(17,15,13,1));
}

.information {
  background:
    radial-gradient(circle at 16% 18%, rgba(23,59,85,.05), transparent 25%),
    radial-gradient(circle at 82% 14%, rgba(116,31,28,.06), transparent 28%),
    linear-gradient(to bottom, #12110f, #151311 18%, #12110f 100%);
  color: var(--paper-light);
}

.information h2 {
  color: var(--paper-light);
}

.information .section-kicker,
.info-label,
.info-sub,
.ticket-panel__small,
.ticket-note,
.map-placeholder p {
  color: rgba(224,216,198,.58);
}

.info-grid {
  border-top-color: rgba(224,216,198,.18);
}

.info-block {
  border-bottom-color: rgba(224,216,198,.18);
}

.info-block p,
.map-placeholder span,
.ticket-panel h3 {
  color: var(--paper-light);
}

.map-shell {
  background: #23201c;
}

.map-placeholder {
  background:
    linear-gradient(135deg, rgba(224,216,198,.04), transparent 50%),
    repeating-linear-gradient(90deg, rgba(224,216,198,.04) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(224,216,198,.04) 0 1px, transparent 1px 24px);
}

.ticket-panel {
  border-top: 1px solid rgba(224,216,198,.34);
}

.button--dark {
  border-color: rgba(224,216,198,.65);
  color: var(--paper-light);
  background: rgba(255,255,255,.02);
}

@media (min-width: 760px) {
  .hero::before {
    background:
      linear-gradient(to bottom,
        rgba(8,8,8,.08) 0%,
        rgba(8,8,8,.16) 58%,
        rgba(8,8,8,.78) 100%),
      url("../assets/thermidor-visual.png") 62% center / cover no-repeat,
      #0c0c0b;
  }

  .hero-title__en {
    font-size: clamp(3.7rem, 8.2vw, 6.2rem);
    letter-spacing: .032em;
  }

}

@media (max-width: 430px) {
  .hero-title__en {
    font-size: clamp(2.16rem, 11.6vw, 3.8rem);
    letter-spacing: .008em;
  }

  .hero-title__jp {
    letter-spacing: .10em;
  }
}

@media (max-width: 360px) {
  .hero-title__en {
    font-size: clamp(2.00rem, 10.9vw, 3.45rem);
  }
}

@media (max-width: 430px) {
  .story-step[data-step="1"] p,
  .story-step[data-step="2"] p {
    font-size: clamp(.96rem, 4.35vw, 1.16rem);
    line-height: 2.05;
  }
  .story-step[data-step="1"] p + p,
  .story-step[data-step="2"] p + p { margin-top: 13px; }
  .story-step--turn { top: 51%; }
  .story-step--impact { top: 52%; }
}


/* =========================================================
   v8 — cumulative synopsis reveal
   ========================================================= */

/* The story section begins with a short, intentional empty beat. */
.story-step {
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .48s ease;
}

.story-step.is-active {
  opacity: 1;
  transform: translateY(-50%);
}

/* Hidden lines keep their space so already-visible text does not jump when
   the next sentence is added beneath it. */
.story-line {
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px);
  transition: opacity .48s ease, transform .55s ease, visibility 0s linear .48s;
}

.story-line.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Step 2 intentionally uses the same typography as the original version. */
.story-step--build p {
  font-size: clamp(1rem, 4.7vw, 1.24rem);
  line-height: 2.15;
  letter-spacing: .045em;
}

.story-step--build p + p {
  margin-top: 0;
}

/* Two final sentences share one screen. Only the last is slightly stronger. */
.story-step--closing {
  top: 51%;
}

.story-step--closing p {
  max-width: 28em;
  font-size: clamp(1rem, 4.7vw, 1.24rem);
  line-height: 2.15;
  letter-spacing: .045em;
}

.story-step--closing .story-ending {
  margin-top: 18px !important;
  font-size: clamp(1.06rem, 5.0vw, 1.34rem) !important;
  line-height: 2.18;
}

.story-step--closing .story-ending strong {
  color: #e1d5c3;
  font-size: 1.04em;
  letter-spacing: .055em;
}

/* Three logical screens, while the internal sentences reveal independently. */
.story-scroll-space {
  height: 390svh;
}

@media (max-width: 430px) {
  .story-step--build p,
  .story-step--closing p {
    font-size: clamp(.96rem, 4.35vw, 1.16rem);
    line-height: 2.05;
  }

  .story-step--build p + p {
    margin-top: 13px;
  }

  .story-step--closing .story-ending {
    margin-top: 16px !important;
    font-size: clamp(1.02rem, 4.75vw, 1.25rem) !important;
  }
}


/* ---------- v10: real performance information ---------- */
.performance-date__main em {
  margin: 0 .14em;
  color: rgba(224,216,198,.38);
  font-style: normal;
  font-size: .54em;
  vertical-align: .12em;
}

.map-link-wrap {
  margin: 12px 0 0;
  text-align: right;
}

.map-link {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 5px 0;
  color: rgba(224,216,198,.66);
  font-size: .76rem;
  letter-spacing: .07em;
  border-bottom: 1px solid rgba(224,216,198,.24);
}

.map-link span {
  transition: transform .25s ease;
}

@media (hover: hover) {
  .map-link:hover {
    color: var(--paper-light);
    border-color: rgba(224,216,198,.58);
  }
  .map-link:hover span {
    transform: translateX(4px);
  }
}

@media (max-width: 430px) {
  .performance-date__main {
    font-size: clamp(2.15rem, 11.4vw, 3.7rem);
    letter-spacing: -.012em;
  }

  .showtime-row__name strong {
    font-size: .94rem;
  }

  .ticket-button span {
    font-size: .86rem;
  }
}


/* ---------- Ticket: both performances ---------- */
.ticket-button--both {
  position: relative;
  margin-top: 8px;
  border-color: rgba(224,216,198,.60);
  background:
    linear-gradient(100deg, rgba(116,31,28,.13), rgba(255,255,255,.012));
}

.ticket-button--both span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ticket-button--both small {
  color: rgba(224,216,198,.48);
  font-size: .63rem;
  font-weight: 400;
  letter-spacing: .08em;
}

.ticket-note + .ticket-note {
  margin-top: 5px;
}

.ticket-note--prototype {
  color: rgba(224,216,198,.30);
}

@media (min-width: 760px) {
  .ticket-button--both {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   v42 — Top credits / STAFF
   ========================================================= */

/* Small principal credits beneath the title */
.hero-credits {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 11px;
  margin: 22px auto 0;
  color: rgba(224,216,198,.66);
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP", serif;
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .055em;
}

.hero-credits span {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  white-space: nowrap;
}

.hero-credits small {
  color: rgba(224,216,198,.40);
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Yu Gothic", "Hiragino Kaku Gothic ProN",
    sans-serif;
  font-size: .72em;
  letter-spacing: .07em;
}

.hero-credits i {
  width: 18px;
  border-top: 1px solid rgba(224,216,198,.20);
}

/* Slightly tighten the next block so the extra credit line
   does not make the 100svh opening feel crowded. */
.hero-credits + .tagline {
  margin-top: 30px;
}

/* ---------- Staff ---------- */

.staff {
  position: relative;
  padding: 84px 22px 92px;
  background:
    radial-gradient(circle at 84% 8%, rgba(116,31,28,.07), transparent 30%),
    #0d0d0c;
  color: var(--paper-light);
  border-top: 1px solid rgba(224,216,198,.08);
}

.staff-inner {
  width: min(100%, 900px);
  margin: 0 auto;
}

.staff-heading {
  margin-bottom: 34px;
}

.staff-heading__en {
  margin: 0 0 7px;
  color: rgba(224,216,198,.34);
  font-family: "Times New Roman", Georgia, serif;
  font-size: .58rem;
  letter-spacing: .28em;
}

.staff-heading h2 {
  margin: 0;
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: clamp(1.55rem, 7vw, 2.35rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .07em;
}

.staff-list {
  border-top: 1px solid rgba(224,216,198,.14);
}

.staff-row {
  display: grid;
  grid-template-columns: minmax(88px, .42fr) 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(224,216,198,.10);
}

.staff-role {
  color: rgba(224,216,198,.38);
  font-size: .68rem;
  letter-spacing: .06em;
}

.staff-name {
  color: rgba(224,216,198,.78);
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: .86rem;
  line-height: 1.65;
  letter-spacing: .045em;
}

@media (min-width: 760px) {
  .hero-credits {
    margin-top: 24px;
    font-size: .78rem;
  }

  .staff {
    padding: 112px 42px 124px;
  }

  .staff-heading {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) 1.35fr;
    gap: 60px;
    align-items: end;
  }

  .staff-heading__en {
    margin-bottom: 8px;
  }

  .staff-heading h2 {
    font-size: 2.6rem;
  }

  .staff-row {
    grid-template-columns: minmax(220px, .65fr) 1.35fr;
    gap: 60px;
    padding: 17px 0;
  }

  .staff-role {
    font-size: .72rem;
  }

  .staff-name {
    font-size: .96rem;
  }
}

/* Short mobile screens: preserve the opening without shrinking the title. */
@media (max-width: 759px) and (max-height: 720px) {
  .hero {
    padding-top: calc(var(--header-h) + 18px);
    padding-bottom: calc(66px + var(--safe-bottom));
  }

  .eyebrow {
    margin-bottom: 18px;
  }

  .hero-title__jp {
    margin-top: 9px;
  }

  .hero-credits {
    margin-top: 15px;
  }

  .hero-credits + .tagline {
    margin-top: 22px;
  }

  .tagline {
    line-height: 1.85;
  }

  .hero-meta {
    margin-top: 24px;
  }

  .button--hero {
    margin-top: 20px;
  }
}


/* =========================================================
   v43 — CAST section
   ========================================================= */

.cast {
  position: relative;
  padding: 88px 22px 92px;
  background:
    radial-gradient(circle at 16% 12%, rgba(116,31,28,.075), transparent 28%),
    linear-gradient(180deg, #10100f, #0d0d0c);
  color: var(--paper-light);
  border-top: 1px solid rgba(224,216,198,.08);
}

.cast-inner {
  width: min(100%, 920px);
  margin: 0 auto;
}

.cast-heading {
  margin-bottom: 42px;
}

.cast-heading__en {
  margin: 0 0 7px;
  color: rgba(224,216,198,.34);
  font-family: "Times New Roman", Georgia, serif;
  font-size: .58rem;
  letter-spacing: .28em;
}

.cast-heading h2 {
  margin: 0;
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: clamp(1.65rem, 7.2vw, 2.45rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .07em;
}

.cast-grid {
  display: grid;
  gap: 32px;
}

.cast-row {
  display: grid;
  gap: 16px;
  align-items: start;
}

.cast-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cast-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cast-person {
  min-width: 0;
  text-align: center;
}

.cast-role {
  margin: 0 0 7px;
  color: rgba(224,216,198,.36);
  font-size: .64rem;
  line-height: 1.45;
  letter-spacing: .055em;
}

.cast-name {
  margin: 0;
  color: rgba(224,216,198,.84);
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: clamp(.82rem, 3.9vw, 1rem);
  line-height: 1.55;
  letter-spacing: .04em;
}

.cast-double {
  display: grid;
  gap: 4px;
}

.cast-double p {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .5em;
  margin: 0;
}

.cast-double span {
  color: rgba(224,216,198,.30);
  font-family: "Times New Roman", Georgia, serif;
  font-size: .56rem;
  letter-spacing: .08em;
}

.cast-double strong {
  color: rgba(224,216,198,.84);
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .035em;
}

.cast-ensemble {
  margin-top: 58px;
  padding-top: 28px;
  border-top: 1px solid rgba(224,216,198,.12);
  text-align: center;
}

.cast-ensemble__en {
  margin: 0 0 4px;
  color: rgba(224,216,198,.30);
  font-family: "Times New Roman", Georgia, serif;
  font-size: .55rem;
  letter-spacing: .22em;
}

.cast-ensemble__jp {
  margin: 0 0 22px;
  color: rgba(224,216,198,.48);
  font-size: .68rem;
  letter-spacing: .07em;
}

.cast-ensemble__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}

.cast-ensemble__names span {
  color: rgba(224,216,198,.74);
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: .78rem;
  line-height: 1.6;
  letter-spacing: .04em;
}

@media (max-width: 420px) {
  .cast-row--3 {
    gap: 10px;
  }

  .cast-role {
    font-size: .58rem;
  }

  .cast-name {
    font-size: .78rem;
  }

  .cast-double strong {
    font-size: .74rem;
  }
}

@media (min-width: 760px) {
  .cast {
    padding: 112px 42px 124px;
  }

  .cast-heading {
    margin-bottom: 58px;
  }

  .cast-heading h2 {
    font-size: 2.65rem;
  }

  .cast-grid {
    gap: 42px;
  }

  .cast-row {
    gap: 30px;
  }

  .cast-role {
    font-size: .7rem;
  }

  .cast-name {
    font-size: 1.04rem;
  }

  .cast-double strong {
    font-size: .94rem;
  }

  .cast-ensemble {
    margin-top: 72px;
    padding-top: 34px;
  }

  .cast-ensemble__names {
    gap: 14px 34px;
  }

  .cast-ensemble__names span {
    font-size: .88rem;
  }
}


/* =========================================================
   v44 — CAST order / other named cast
   ========================================================= */

.cast-other {
  margin-top: 58px;
  padding-top: 28px;
  border-top: 1px solid rgba(224,216,198,.12);
  text-align: center;
}

.cast-other__en {
  margin: 0 0 4px;
  color: rgba(224,216,198,.30);
  font-family: "Times New Roman", Georgia, serif;
  font-size: .55rem;
  letter-spacing: .22em;
}

.cast-other__jp {
  margin: 0 0 24px;
  color: rgba(224,216,198,.48);
  font-size: .68rem;
  letter-spacing: .07em;
}

.cast-other__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 18px;
}

@media (min-width: 760px) {
  .cast-other {
    margin-top: 72px;
    padding-top: 34px;
  }

  .cast-other__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
  }
}


/* =========================================================
   v45 — CAST hierarchy without subsection labels
   ========================================================= */

/*
 * No "other cast" / "ensemble" headings.
 * Hierarchy is communicated only by spacing and type scale.
 */

.cast-other {
  margin-top: 52px;
  padding-top: 0;
  border-top: 0;
}

.cast-other__grid {
  gap: 20px 16px;
}

.cast-other .cast-role {
  color: rgba(224,216,198,.30);
  font-size: .56rem;
}

.cast-other .cast-name {
  color: rgba(224,216,198,.68);
  font-size: .76rem;
}

/* Ensemble = names only, visually quieter than named roles. */
.cast-ensemble {
  margin-top: 44px;
  padding-top: 0;
  border-top: 0;
}

.cast-ensemble__names {
  gap: 10px 22px;
}

.cast-ensemble__names span {
  color: rgba(224,216,198,.52);
  font-size: .7rem;
}

/* Old subsection labels are no longer used. */
.cast-other__en,
.cast-other__jp,
.cast-ensemble__en,
.cast-ensemble__jp {
  display: none;
}

@media (min-width: 760px) {
  .cast-other {
    margin-top: 64px;
  }

  .cast-other .cast-role {
    font-size: .62rem;
  }

  .cast-other .cast-name {
    font-size: .88rem;
  }

  .cast-ensemble {
    margin-top: 54px;
  }

  .cast-ensemble__names span {
    font-size: .8rem;
  }
}


/* =========================================================
   v46 — Four secondary named cast members in one row
   ========================================================= */

.cast-other__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 8px;
}

.cast-other .cast-role {
  font-size: .52rem;
  letter-spacing: .03em;
}

.cast-other .cast-name {
  font-size: .68rem;
  letter-spacing: .02em;
}

@media (min-width: 760px) {
  .cast-other__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
  }

  .cast-other .cast-role {
    font-size: .62rem;
  }

  .cast-other .cast-name {
    font-size: .88rem;
  }
}


/* =========================================================
   v47 — Compact STAFF credits
   ========================================================= */

.staff {
  padding: 76px 22px 84px;
}

.staff-heading {
  margin-bottom: 30px;
}

.staff-heading h2 {
  font-size: clamp(1.45rem, 6.5vw, 2.15rem);
}

.staff-credits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}

.staff-credit {
  display: grid;
  grid-template-columns: minmax(84px, .42fr) 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 10px 0;
}

.staff-credit + .staff-credit {
  border-top: 1px solid rgba(224,216,198,.055);
}

.staff-credit .staff-role {
  color: rgba(224,216,198,.32);
  font-size: .62rem;
  line-height: 1.55;
  letter-spacing: .055em;
}

.staff-credit .staff-name {
  color: rgba(224,216,198,.70);
  font-family:
    "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: .82rem;
  line-height: 1.65;
  letter-spacing: .035em;
}

@media (min-width: 760px) {
  .staff {
    padding: 96px 42px 108px;
  }

  .staff-heading {
    display: block;
    margin-bottom: 38px;
  }

  .staff-heading h2 {
    font-size: 2.3rem;
  }

  .staff-credits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
  }

  .staff-credit {
    grid-template-columns: 112px 1fr;
    gap: 22px;
    padding: 12px 0;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(224,216,198,.055);
  }

  .staff-credit .staff-role {
    font-size: .66rem;
  }

  .staff-credit .staff-name {
    font-size: .9rem;
  }
}


/* =========================================================
   v48 — STAFF multiple-name support
   ========================================================= */

.staff-name--multi {
  display: block;
}

.staff-name--multi br {
  line-height: 1.9;
}


/* =========================================================
   v49 — STAFF type size aligned with ensemble
   ========================================================= */

.staff-credit .staff-role,
.staff-credit .staff-name {
  font-size: .7rem;
}

@media (min-width: 760px) {
  .staff-credit .staff-role,
  .staff-credit .staff-name {
    font-size: .8rem;
  }
}




/* =========================================================
   v52 — Three prefilled reservation buttons
   ========================================================= */

.ticket-note + .ticket-note {
  margin-top: 5px;
}


/* =========================================================
   CAST performer-name hierarchy
   役名サイズは変更せず、出演者名のみ4段階に調整
   ========================================================= */

/* 1: オーギュスタン / マクシミリアン */
.cast-grid > .cast-row:nth-child(1) .cast-name {
  font-size: 1rem;
}

/* 2: アンヌ / ダントン / シャルロット / フーシェ */
.cast-grid > .cast-row:nth-child(2) .cast-double strong,
.cast-grid > .cast-row:nth-child(3) .cast-name {
  font-size: .88rem;
}

/* 3: エレオノール / サン＝ジュスト / アントワネット */
.cast-grid > .cast-row:nth-child(4) .cast-name {
  font-size: .78rem;
}

/* 4: タリアン / バラス / フレロン / ロラン */
.cast-other .cast-name {
  font-size: .72rem;
}

@media (min-width: 760px) {
  /* 1: オーギュスタン / マクシミリアン */
  .cast-grid > .cast-row:nth-child(1) .cast-name {
    font-size: 1.22rem;
  }

  /* 2: アンヌ / ダントン / シャルロット / フーシェ */
  .cast-grid > .cast-row:nth-child(2) .cast-double strong,
  .cast-grid > .cast-row:nth-child(3) .cast-name {
    font-size: 1.06rem;
  }

  /* 3: エレオノール / サン＝ジュスト / アントワネット */
  .cast-grid > .cast-row:nth-child(4) .cast-name {
    font-size: .94rem;
  }

  /* 4: タリアン / バラス / フレロン / ロラン */
  .cast-other .cast-name {
    font-size: .84rem;
  }
}


/* =========================================================
   MORE — Past productions / archive link
   ========================================================= */

/*
  「テルミドールをもっと知る」と同じ横幅・リンク構造を使い、
  少し余白を空けることで「今回の作品」と「劇団の過去」を分ける。
*/
.more-archive {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(224, 216, 198, .12);
}

.more-archive__label {
  margin: 0 0 12px;
  color: rgba(224, 216, 198, .38);
  font-family: "Times New Roman", Georgia, serif;
  font-size: .58rem;
  line-height: 1.5;
  letter-spacing: .22em;
}

/* wrapper側に区切り線があるため、リンク上端の線は消して二重線を防ぐ */
.more-link--archive {
  border-top: 0;
  border-bottom: 1px solid rgba(224, 216, 198, .16);
  opacity: .82;
}

/* PAST の位置も 01〜03 と同じ40px幅に収める */
.more-link--archive .more-link__number {
  display: block;
}

@media (min-width: 760px) {
  .more-archive {
    margin-top: 56px;
    padding-top: 30px;
  }

  .more-archive__label {
    margin-bottom: 14px;
    font-size: .6rem;
  }
}

/* =========================================================
   2026-09-11 Readability pass
   ========================================================= */

.eyebrow { font-size: .82rem; }
.hero-meta { font-size: .8rem; }
.hero-credits { font-size: .8rem; }
.hero-credits small { font-size: .76rem; }
.section-kicker { font-size: .82rem; }
.performance-date__label,
.info-label { font-size: .78rem; }
.showtime-row__index { font-size: .8rem; }
.showtime-row__time { font-size: .9rem; }
.info-sub { font-size: .84rem; line-height: 1.75; }
.map-placeholder p { font-size: .82rem; }
.ticket-panel__small { font-size: .72rem; }
.ticket-panel__lead { font-size: .9rem; line-height: 1.9; }
.ticket-button { font-size: .94rem; }
.ticket-note { font-size: .78rem; line-height: 1.7; }
.more-link__number { font-size: .76rem; }
.more-link__title { font-size: 1.12rem; }
.footer-copy { font-size: .78rem; }
.floating-ticket { font-size: .8rem; }

.cast-heading__en,
.staff-heading__en { font-size: .66rem; }
.cast-role { font-size: .7rem; }
.cast-name { font-size: clamp(.9rem, 4.15vw, 1.05rem); }
.cast-double span { font-size: .64rem; }
.cast-double strong { font-size: .9rem; }
.cast-other .cast-role { font-size: .64rem; }
.cast-other .cast-name { font-size: .84rem; }
.cast-ensemble__names span { font-size: .78rem; }
.staff-role { font-size: .72rem; }
.staff-name,
.staff-credit .staff-name { font-size: .82rem; line-height: 1.75; }

@media (max-width: 420px) {
  .cast-role { font-size: .66rem; }
  .cast-name { font-size: .86rem; }
  .cast-double strong { font-size: .84rem; }
}

@media (min-width: 760px) {
  .section-kicker { font-size: .86rem; }
  .performance-date__label,
  .info-label { font-size: .82rem; }
  .showtime-row__time { font-size: .96rem; }
  .info-sub { font-size: .9rem; }
  .ticket-panel__lead { font-size: .96rem; }
  .ticket-button { font-size: 1rem; }
  .ticket-note { font-size: .82rem; }
  .cast-role { font-size: .76rem; }
  .cast-name { font-size: 1.08rem; }
  .cast-double strong { font-size: 1rem; }
  .cast-other .cast-role { font-size: .68rem; }
  .cast-other .cast-name { font-size: .94rem; }
  .cast-ensemble__names span { font-size: .88rem; }
  .staff-role { font-size: .78rem; }
  .staff-name,
  .staff-credit .staff-name { font-size: .94rem; }
}


/* =========================================================
   2026-09-11 Readability refinement 2
   ========================================================= */

/* Make functional secondary copy easier to read on dark backgrounds. */
.information .section-kicker,
.info-label,
.info-sub,
.ticket-panel__small,
.ticket-note,
.map-placeholder p {
  color: rgba(224,216,198,.72);
}

.cast-role {
  color: rgba(224,216,198,.62);
}

.cast-double span {
  color: rgba(224,216,198,.58);
}

.cast-other .cast-role {
  color: rgba(224,216,198,.56);
}

.cast-other .cast-name {
  color: rgba(224,216,198,.82);
}

.cast-ensemble__names span {
  color: rgba(224,216,198,.70);
}

.staff-role,
.staff-credit .staff-role {
  color: rgba(224,216,198,.58);
}

.staff-name,
.staff-credit .staff-name {
  color: rgba(224,216,198,.84);
}

/* A clearer persistent reservation CTA. */
.floating-ticket {
  min-width: 104px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: .86rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .floating-ticket {
    min-width: 118px;
    font-size: .92rem;
  }
}