:root {
  --bg:#0f0f11;
  --bg:#f9f1e8;
  --bgalt:#a40c14;
  --fg:#a40c14;
  --fgalt:#f9f1e8;
  --muted:#aaa;
  --accent:#ffdf6f;
  --radius:18px;
  --fs--2: clamp(0.7rem, 0.4vw + 0.5rem, 0.85rem);
  --fs--1: clamp(0.85rem, 0.5vw + 0.6rem, 1rem);
  --fs-0:  clamp(1rem, 0.6vw + 0.7rem, 1.15rem);
  --fs-1:  clamp(1.15rem, 0.8vw + 0.9rem, 1.4rem);
  --fs-2:  clamp(1.4rem, 1vw + 1rem, 1.8rem);
  --fs-3:  clamp(1.8rem, 1.4vw + 1.2rem, 2.4rem);
}
* { box-sizing:border-box }
body {
  margin:0;
  font-family:'Montserrat', system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
}
.container {
  padding:clamp(2rem,5vw,4rem);
  margin: 0 auto;
  max-width: 1440px;
}
.repertoire {
  background: var(--bgalt);
  color:var(--fgalt);
}
.repertoire__title {
  font-size:clamp(4rem,8vw,6rem);
  margin:.5em 0 1em 0;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  width: fit-content;
  position: relative;
}
.repertoire__title img {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -10%;
}
.repertoire__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}
.production {
  background:#111;
  border-radius:var(--radius);
  overflow:hidden;
  transition:.4s ease;
  container-type: inline-size;
  position: relative;
  height: fit-content;
}
.production:hover {
  transform:translateY(-6px);
}
.production__media {
  position:relative;
  aspect-ratio:3/4;
  background:#222 center/cover no-repeat;
}
.production__overlay {
  position:absolute;
  inset:0;
  background: linear-gradient(
	  to top,
	  rgba(0,0,0,1)   0%,
	  rgba(0,0,0,0.7) 35%,
	  rgba(0,0,0,0)   60%,
	  rgba(0,0,0,0.25) 85%,
	  rgba(0,0,0,0.5) 100%
	);

}
.production__header {
  position:absolute;
  inset:0;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.production__title {
  margin:0 0 .5rem;
  font-size:max(1.2rem, 7cqw);
}
.production__type {
	position: absolute;
    top: 1em;
    text-transform: uppercase;
    font-size: .8em;
    background: var(--accent);
    color: var(--fg);
    font-weight: 700;
    border-radius: .5em;
    padding: .1em .3em;
}
.production__next {
  display:flex;
  gap:.8rem;
  align-items:center;
}
.event-badge {
  background:var(--bg);
  color:#000;
  border-radius:12px;
  padding:.4rem .6rem;
  text-align:center;
  display: flex;
  flex-direction: column;
}
.event-badge__day {
  font-weight:800;
  font-size:max(1.2rem, 7.5cqw);
}
.event-badge__month {
  font-size: max(0.65rem, 3cqw);
  letter-spacing:.08em;
  margin-top: -.5em;
}
.production__time {
	width: 100%;
}
.production__time time {
  color:var(--accent);
  font-weight: 700;
  font-size: .9em;
}
.production__time button {
	font: inherit;
  color:var(--bg);
  font-weight: 400;
  font-size: .7em;
}
.production__cta {
  display:inline-block;
  margin-top:.3rem;
  background:var(--accent);
  color:#000;
  padding:.35rem .6rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size: .85em;
}
.production__dates {
  list-style:none;
  margin:0;
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  padding: 0;
}
.production__dates--other {
	width: 100%;
}
.production__dates.is-open {
  max-height:600px;
}
.production__date {
  display:flex;
  justify-content:space-between;
  padding:.5rem 1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
  align-items: center;
  gap: .8rem;
}

.production__link {
  color:var(--accent);
  text-decoration:none;
}

.production__toggle {
  width:100%;
  background:none;
  border:0;
  color:var(--accent);
  padding:.75rem;
  cursor:pointer;
}
.sticky-cta {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.75rem 1rem;
  background:rgba(15,15,17,.85);
  backdrop-filter:blur(10px);
  transform:translateY(100%);
  transition:.4s ease;
}

.sticky-cta.is-visible {
  transform:translateY(0);
}

.sticky-cta__button {
  background:var(--accent);
  color:#000;
  padding:.6rem 1rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
}

@media (min-width:768px) {
  .sticky-cta { display:none }
}
.calendar {
  margin-bottom:3rem;
}
.calendar__header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
}
.calendar__title {
  font-size:1.4rem;
}
.calendar__nav {
  background:none;
  border:0;
  color:var(--accent);
  font-size:1.5rem;
  cursor:pointer;
}
.calendar__weekdays,
.calendar__days {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:.5rem;
  padding:0;
  margin:0;
  list-style:none;
}

.calendar__weekdays li {
  text-align:center;
  font-size:.75rem;
  color:var(--muted);
}

.calendar__day {
  aspect-ratio:1;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  cursor:pointer;
}

.calendar__day--active {
  background:var(--accent);
  color:#000;
  font-weight:700;
}

.calendar__day--disabled {
  opacity:.3;
  pointer-events:none;
}
.production__info-panel {
  max-height:0;
  overflow:hidden;
  padding:0 1.5rem;
  color:var(--muted);
  transition:max-height .4s ease, padding .3s ease;
}

.production__info-panel.is-open {
  max-height:300px;
  padding:1rem 1.5rem;
}
.production__hour {
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-top:.2rem;
  justify-content: space-between;
  flex-wrap: wrap;
}
.production__hour button {
	font: inherit;
  color:var(--bg);
  font-weight: 400;
  font-size: .7em;
}
.cast-toggle {
  background:none;
  border:0;
  cursor:pointer;
  font-size:1rem;
}

.cast-panel {
  width:100%;
  max-height:0;
  overflow:hidden;
  font-size:.85rem;
  color:var(--muted);
  transition:max-height .3s ease;
  flex-basis: 100%;
	color: var(--bg);
}

.cast-panel.is-open {
  max-height:120px;
}
.production__toggle {
  border-top:1px solid rgba(255,255,255,.08);
}
.production__info {
	position: absolute;
	top: 1em;
	right: 1.5rem;
	width: 1.5rem;
	aspect-ratio: 1;
    font-size: .8em;
    background: var(--accent);
    color: #000;
    font-weight: 700;
    border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: none;
	padding: 0;
}
.footer__text {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.footer__text > * {
	flex-basis: 100%;
}
.footer__text p {
	margin: 0;
	text-align: center;
}
.footer__text--producer {
	text-align: center;
	margin-bottom: 2em;
}
.footer__text--producer p:nth-child(1) {
	font-weight: 700;
	font-size: 1.5em;
	margin-bottom: .3em;
}
.footer__text--producer p:nth-child(2) {
	margin-bottom: 1em;
	font-size: .9em;
}
.footer__text--producer svg {
	width: clamp(250px, 20vw, 400px);
	height: auto;
}
.footer__text--info {
	margin: 1em 0;
}
p.footer__text--title {
	font-family: 'Anton', sans-serif;
	font-size: var(--fs-2);
	margin-bottom: 1rem;
}