/* Shared styles for the show page and the program.
   Palette and section themes follow ruskingrouptheatre.com. */
:root {
  --beige: #EBE1D8;
  --terracotta: #CB6C52;
  --oxblood: #641213;
  --charcoal: #262323;
  --blue: #3D82CD;
  --berry: #7B1833;
  --heading: 'Libre Baskerville', Georgia, serif;
  --body: 'Afacad Flux', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --button: 'Almarai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--beige); color: var(--terracotta); font-family: var(--body); font-size: 23px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--heading); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
a { color: inherit; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 620px) { .wrap, .narrow { padding: 0 20px; } }
.center { text-align: center; }

/* Section themes. Names follow the main site's section colors:
   oxblood = dark-bold, beige = white-bold, blue = dark,
   charcoal = light-bold, terracotta = black. */
.t-oxblood { background: var(--oxblood); color: var(--beige); }
.t-beige { background: var(--beige); color: var(--terracotta); }
.t-beige h2, .t-beige h3 { color: var(--blue); }
.t-blue { background: var(--blue); color: var(--beige); }
.t-charcoal { background: var(--charcoal); color: var(--terracotta); }
.t-charcoal h2, .t-charcoal h3 { color: var(--blue); }
.t-terracotta { background: var(--terracotta); color: var(--beige); }
section { padding: 80px 0; }
@media (max-width: 620px) { section { padding: 56px 0; } }
.kicker { margin: 0 0 10px; font-family: var(--button); font-size: 16px; letter-spacing: .16em; text-transform: uppercase; }

/* Buttons: solid fill in the section's button color, or outline. */
.btn { display: inline-block; padding: 16px 30px; border: 2px solid transparent; background: var(--beige); color: var(--terracotta); font-family: var(--button); font-size: 18px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.btn:hover, .btn:focus-visible { opacity: .85; }
.btn.blue { background: var(--blue); color: var(--beige); }
.btn.berry { background: var(--berry); color: var(--beige); }
.btn.outline { background: transparent; border-color: currentColor; color: inherit; }
.btn.outline:hover, .btn.outline:focus-visible { background: var(--beige); border-color: var(--beige); color: var(--oxblood); opacity: 1; }
.t-beige .btn.outline:hover, .t-beige .btn.outline:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--beige); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 34px 0 0; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(235, 225, 216, .18); }
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.site-header nav { display: flex; align-items: center; gap: 24px; font-size: 20px; }
.site-header nav a:not(.btn) { text-decoration: none; }
.site-header nav a:not(.btn):hover { text-decoration: underline; }
.site-header .right { justify-content: flex-end; }
.site-header .logo { width: 170px; }
.site-header .btn { padding: 10px 18px; font-size: 16px; }
@media (max-width: 860px) {
  .site-header .wrap { grid-template-columns: auto 1fr; gap: 12px; }
  .site-header .left { display: none; }
  .site-header .logo { width: 130px; }
  .site-header nav { gap: 16px; font-size: 17px; }
}
@media (max-width: 480px) { .site-header .right a:not(.btn) { display: none; } }

/* Footer */
footer { padding: 60px 0 40px; font-size: 20px; }
footer .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
footer p { margin: 0 0 6px; }
footer strong { font-family: var(--heading); font-weight: 400; font-size: 23px; }
footer .fine { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(235, 225, 216, .25); font-size: 16px; opacity: .8; text-align: center; }
footer .btn { margin: 12px 10px 0 0; padding: 12px 22px; font-size: 16px; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr; text-align: center; } footer .btn { margin: 12px 5px 0; } }

/* Cast & creative team, dotted-leader style from the show pages */
.team h2 { margin: 0 0 26px; font-family: var(--button); font-size: 21px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.list { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.list li { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 21px; }
.list .dots { flex: 1; min-width: 24px; border-bottom: 2px dotted currentColor; opacity: .5; transform: translateY(-5px); }
.list .who { text-align: right; }
.list .role { flex: none; }
.list.cast li { font-size: 24px; }
.list.cast .who { font-family: var(--heading); text-align: left; }
.equity { margin: 18px 0 0; text-align: center; font-size: 17px; opacity: .85; }
@media (max-width: 520px) { .list li { flex-wrap: wrap; gap: 0 8px; } .list .dots { display: none; } .list .role { flex-basis: 100%; font-size: 17px; opacity: .85; } .list .who { text-align: left; } .list.cast li { flex-direction: column; gap: 0; } }

/* Mobile ticket bar */
.ticket-bar { display: none; }
@media (max-width: 620px) {
  .ticket-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--blue); color: var(--beige); font-size: 17px; box-shadow: 0 -4px 18px rgba(0, 0, 0, .25); }
  .ticket-bar .btn { padding: 12px 18px; font-size: 16px; }
  body.has-ticket-bar { padding-bottom: 72px; }
}

@media print {
  .site-header, .ticket-bar, .no-print, footer .btn { display: none !important; }
  body { font-size: 12pt; padding: 0 !important; }
  section { padding: 24px 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}