:root {
  --teal: #00A895;
  --teal-dark: #017E70;
  --teal-light: #4FC5B7;
  --teal-pale: #E4F5F3;
  --ink: #272524;
  --ink-2: #34302E;
  --ink-3: #413C39;
  --paper: #FAF9F6;
  --white: #FFFFFF;
  --text-dark: #272524;
  --text-muted: #6B6662;
  --line-dark: rgba(250, 249, 246, 0.14);
  --line-light: rgba(39, 37, 36, 0.1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--text-dark);
  font-family: "Inter", sans-serif;
  font-size: 1.02rem;
  line-height: 1.6;
}
h1, h2, h3, h4, .display-round, .tile, .footer-wordmark, footer h5,
.level-accidental, .step-card h3 { font-family: "Baloo 2", sans-serif; letter-spacing: -0.01em; }
.eyebrow { font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
.text-teal { color: var(--teal) !important; }
.bg-ink { background: var(--ink) !important; }
.bg-ink-2 { background: var(--ink-2) !important; }
.bg-paper { background: var(--paper) !important; }
.bg-teal-pale { background: var(--teal-pale) !important; }
.photo-frame { border-radius: 14px; overflow: hidden; position: relative; background: var(--ink-3); }
.photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(39, 37, 36, 0.16), rgba(0, 168, 149, 0.1)); mix-blend-mode: multiply; pointer-events: none; }
.photo-treated { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.5) contrast(1.04) brightness(1.02); }
.photo-stage { filter: none; }
.photo-stage + .photo-frame::after, .photo-frame.photo-frame-stage::after { display: none; }

.tile { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--white); font-weight: 700; }
.tile-teal { background: var(--teal); }
.tile-ink { background: var(--ink); border: 1.5px solid rgba(250, 249, 246, 0.28); }
.rot-1 { transform: rotate(-3deg); }
.rot-2 { transform: rotate(2.5deg); }
.rot-3 { transform: rotate(-2deg); }
.rot-4 { transform: rotate(3deg); }

.navbar { padding: 0.85rem 0; background: var(--paper); box-shadow: 0 1px 0 var(--line-light); transition: box-shadow 0.3s ease; }
.navbar.scrolled { box-shadow: 0 6px 18px rgba(39, 37, 36, 0.08); }
.navbar-brand img { height: 34px; display: block; }
.nav-link { color: var(--text-dark) !important; font-size: 0.94rem; font-weight: 600; margin: 0 0.6rem; opacity: 0.8; position: relative; }
.nav-link:hover { opacity: 1; color: var(--teal-dark) !important; }
.btn-teal { background: var(--teal); color: var(--white); font-weight: 700; border: none; padding: 0.6rem 1.5rem; border-radius: 8px; transition: all 0.2s ease; }
.btn-teal:hover { background: var(--teal-dark); color: var(--white); transform: translateY(-1px); }
.btn-outline-light { border: 1.5px solid rgba(250, 249, 246, 0.5); color: var(--paper); font-weight: 600; padding: 0.58rem 1.5rem; border-radius: 8px; background: transparent; }
.btn-outline-light:hover { background: rgba(250, 249, 246, 0.1); color: var(--white); border-color: var(--white); }
.btn-outline-dark { border: 1.5px solid rgba(39, 37, 36, 0.35); color: var(--text-dark); font-weight: 600; padding: 0.58rem 1.5rem; border-radius: 8px; background: transparent; }
.btn-outline-dark:hover { background: rgba(39, 37, 36, 0.06); border-color: var(--text-dark); }

.hero { background: radial-gradient(120% 100% at 12% 0%, #3A3532 0%, var(--ink) 55%); color: var(--paper); padding-top: 5.5rem; position: relative; overflow: hidden; }
.hero-inner { padding: 4.5rem 0 0; }
.hero .eyebrow { color: var(--teal-light); }
.hero h1 { font-size: clamp(3rem, 7vw, 6rem); font-weight: 800; line-height: 0.98; margin: 0.7rem 0 1.4rem; }
.hero h1 span { color: var(--teal); }
.hero p.lead { color: rgba(250, 249, 246, 0.75); max-width: 34rem; font-size: 1.12rem; }
.hero-cta { margin-top: 2.2rem; }
.staff-wrap { margin-top: 4.5rem; }
.staff-wrap svg { display: block; width: 100%; height: auto; }
.staff-line { stroke: rgba(250, 249, 246, 0.14); stroke-width: 1; }

.stats-strip { background: var(--paper); padding: 1rem 0; }
.stat-item { display: flex; align-items: center; gap: 1rem; padding: 1.6rem 1rem; }
.stat-tile { width: 56px; height: 56px; font-size: 1.15rem; flex: 0 0 auto; }
.stat-label { font-size: 0.86rem; color: var(--text-muted); line-height: 1.35; }
.satz-section { background: var(--ink); color: var(--paper); padding: 6.5rem 0; }
.satz-section .eyebrow { color: var(--teal-light); }
.satz-title { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; margin-bottom: 3.5rem; }
.satz-card { height: 100%; }
.satz-num-tile { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: 1.2rem; }
.satz-card h3 { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.2rem; }
.satz-card .en { font-size: 0.85rem; color: rgba(250, 249, 246, 0.5); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; display: block; }
.satz-card p { color: rgba(250, 249, 246, 0.72); font-size: 0.98rem; }
.next-shows { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--line-dark); }
.next-shows-lead { color: rgba(250, 249, 246, 0.65); font-size: 0.95rem; max-width: 18rem; margin-top: 0.6rem; }
.show-list { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.2rem; }
.show-item { display: flex; align-items: center; gap: 1.1rem; }
.show-date { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 10px; background: var(--teal); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "Baloo 2", sans-serif; line-height: 1.05; }
.show-day { font-size: 1.25rem; font-weight: 700; }
.show-month { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; }
.show-title { font-weight: 700; font-size: 1rem; }
.show-venue { font-size: 0.86rem; color: rgba(250, 249, 246, 0.58); }
.show-link { color: var(--teal-light); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.show-link:hover { color: var(--white); }
.ensemble-section, .team-section, .steps-section { background: var(--paper); padding: 6.5rem 0; }
.ensemble-section .eyebrow, .team-section .eyebrow, .steps-section .eyebrow { color: var(--teal-dark); }
.ensemble-section h2, .team-section h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; margin: 0.6rem 0 1.4rem; }
.ensemble-visual { background: var(--ink); border-radius: 14px; padding: 2.5rem 1.5rem; aspect-ratio: 4 / 3.2; display: flex; align-items: center; justify-content: center; }
.ensemble-visual svg { width: 100%; height: 100%; }
.level-section { background: var(--ink-2); color: var(--paper); padding: 6.5rem 0; }
.level-section .eyebrow { color: var(--teal-light); }
.level-title { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; margin-bottom: 0.8rem; }
.level-sub { color: rgba(250, 249, 246, 0.68); max-width: 38rem; margin-bottom: 3.5rem; }
.level-track { display: flex; overflow-x: auto; gap: 1.3rem; padding: 0.6rem 0 1.6rem; }
.level-card { flex: 0 0 auto; width: 148px; border-radius: 14px; padding: 1.4rem 1rem; text-align: center; color: var(--white); }
.level-accidental { font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; }
.level-num { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.level-name { font-size: 0.88rem; font-weight: 700; margin-top: 0.3rem; }
.team-section h2 { margin-bottom: 3rem; }
.team-card { text-align: center; }
.team-avatar { width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: "Baloo 2", sans-serif; font-size: 2rem; font-weight: 700; color: var(--white); margin-bottom: 1rem; }
.team-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.1rem; }
.team-card .role { font-size: 0.85rem; color: var(--text-muted); }
.about-section { background: var(--ink); color: var(--paper); padding: 6.5rem 0; }
.about-section .eyebrow { color: var(--teal-light); }
.about-section h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; margin: 0.6rem 0 1.4rem; }
.about-section p { color: rgba(250, 249, 246, 0.75); }
.about-portrait { background: var(--ink-3); border-radius: 14px; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border: 1px solid var(--line-dark); }
.about-portrait svg { width: 70%; }
.steps-section { text-align: center; }
.steps-section h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; margin: 0.6rem 0 0.9rem; }
.steps-lead { color: var(--text-muted); max-width: 34rem; margin: 0 auto 3.5rem; font-size: 1.05rem; }
.step-card { position: relative; text-align: center; padding: 0 0.5rem; }
.step-card::after { content: ""; position: absolute; top: 34px; left: calc(50% + 44px); right: calc(-50% + 44px); height: 2px; background: repeating-linear-gradient(90deg, rgba(39, 37, 36, 0.22) 0 8px, transparent 8px 16px); }
.step-card:last-child::after { display: none; }
.step-tile { width: 68px; height: 68px; font-size: 1.5rem; margin: 0 auto 1.3rem; }
.step-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.step-card p { color: var(--text-muted); font-size: 0.94rem; max-width: 19rem; margin: 0 auto; }
.steps-cta { margin-top: 3.5rem; }
footer { background: var(--ink); color: rgba(250, 249, 246, 0.65); padding: 4rem 0 2rem; border-top: 1px solid var(--line-dark); }
.footer-copy { max-width: 20rem; }
.footer-wordmark { font-weight: 700; font-size: 1.4rem; color: var(--paper); margin-bottom: 1rem; }
.footer-wordmark span { color: var(--teal); }
footer a { color: rgba(250, 249, 246, 0.65); text-decoration: none; font-size: 0.92rem; }
footer a:hover { color: var(--teal-light); }
footer h5 { color: var(--paper); font-weight: 700; margin-bottom: 1rem; font-size: 1.05rem; }
footer .foot-line { list-style: none; padding: 0; margin: 0; }
footer .foot-line li { margin-bottom: 0.55rem; }
.foot-bottom { border-top: 1px solid var(--line-dark); margin-top: 3rem; padding-top: 1.5rem; font-size: 0.8rem; color: rgba(250, 249, 246, 0.4); }
@media (max-width: 767px) {
  body { overflow-x: hidden; }
  .container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .navbar { padding: 0.7rem 0; }
  .navbar-brand { min-width: 0; }
  .navbar-brand img { width: auto; max-width: min(190px, 60vw); height: 30px; }
  .navbar-collapse { padding-top: 0.75rem; }
  .nav-link { margin: 0.25rem 0; }
  .navbar-nav .btn-teal { display: inline-block; margin-top: 0.5rem; }

  .hero { padding-top: 4.5rem; }
  .hero-inner { padding-top: 3.25rem; }
  .hero h1 { font-size: clamp(3rem, 16vw, 4.5rem); }
  .hero p.lead { font-size: 1rem; }
  .hero-cta .btn { width: 100%; }
  .staff-wrap { margin-top: 3rem; }

  .stats-strip { padding: 0.5rem 0; }
  .stat-item { min-width: 0; padding: 1.1rem 0.25rem; gap: 0.75rem; }
  .stat-tile { width: 48px; height: 48px; font-size: 1rem; }
  .stat-label { min-width: 0; font-size: 0.78rem; overflow-wrap: anywhere; }

  .satz-section, .ensemble-section, .team-section, .steps-section { padding: 4.5rem 0; }
  .level-section, .about-section { padding: 4.5rem 0; }
  .satz-title, .level-title { margin-bottom: 2.5rem; }
  .next-shows { margin-top: 3rem; padding-top: 2.25rem; }
  .show-item { align-items: flex-start; gap: 0.8rem; }
  .show-date { width: 52px; height: 52px; }
  .show-title, .show-venue { overflow-wrap: anywhere; }
  .show-link { display: inline-block; margin-top: 0.25rem; }

  .ensemble-visual { max-width: 26rem; margin: 0 auto; padding: 1.5rem 1rem; }
  .level-track { margin-right: -20px; padding-right: 20px; gap: 1rem; }
  .level-card { width: 132px; padding: 1.2rem 0.75rem; }
  .team-avatar { max-width: 13rem; margin-left: auto; margin-right: auto; }
  .about-portrait { max-width: 18rem; margin: 0 auto; }
  .step-card::after { display: none; }
  .step-card p { max-width: 22rem; }
  .footer-copy { max-width: 22rem; }
}