*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:   #d42b2b;
  --cream: #f5edd8;
  --gold:  #c9a84c;
  --black: #1a1008;
}

html { scroll-behavior: smooth; }

body {
  font-family: Georgia, serif;
  background: var(--red);
  color: var(--cream);
  overflow-x: hidden;
}

body p {
  margin-bottom: 1rem;
}

body a {
  color: inherit;
  font-weight: bold;
}

/* ── Header ── */
header {
  background: #a82222;
  border-bottom: 3px solid var(--gold);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative; position: sticky;
  top: 0;
  z-index: 20;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}

.logo-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #1a3a6b;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 2px var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
  text-align: center;
}
.logo-circle .l-top { font-size: 0.42rem; color: var(--cream); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }
.logo-circle .l-mid { font-size: 1rem;    color: var(--gold);  font-weight: 900; letter-spacing: 0.04em; line-height: 1; }
.logo-circle .l-bot { font-size: 0.38rem; color: var(--cream); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }

.site-name {
  color: var(--cream);
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.site-name small {
  display: block;
  color: var(--gold);
  font-size: 0.7em;
  font-weight: normal;
  letter-spacing: 0.1em;
}

nav { display: flex; gap: 1.5rem; }
nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ── Hamburger ── */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.burger span {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--cream);
  border-radius: 2px;
  transition: all .3s;
}
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mob-nav {
  display: none;
  flex-direction: column;
  background: rgba(0,0,0,0.5);
  border-top: 2px solid var(--gold);
  padding: 1rem 2rem;
  gap: 0.75rem;
  position: relative;
  z-index: 19;
}
.mob-nav.open { display: flex; }
.mob-nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(245,237,216,0.2);
}
.mob-nav a:hover { color: var(--gold); }

/* ── Hero ── */
.hero {
  text-align: center;
  padding: 5rem 2rem 6rem;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    rgba(245,237,216,0.05) 0deg 9deg, transparent 9deg 18deg,
    rgba(245,237,216,0.05) 18deg 27deg, transparent 27deg 36deg,
    rgba(245,237,216,0.05) 36deg 45deg, transparent 45deg 54deg,
    rgba(245,237,216,0.05) 54deg 63deg, transparent 63deg 72deg,
    rgba(245,237,216,0.05) 72deg 81deg, transparent 81deg 90deg,
    rgba(245,237,216,0.05) 90deg 99deg, transparent 99deg 108deg,
    rgba(245,237,216,0.05) 108deg 117deg, transparent 117deg 126deg,
    rgba(245,237,216,0.05) 126deg 135deg, transparent 135deg 144deg,
    rgba(245,237,216,0.05) 144deg 153deg, transparent 153deg 162deg,
    rgba(245,237,216,0.05) 162deg 171deg, transparent 171deg 180deg,
    rgba(245,237,216,0.05) 180deg 189deg, transparent 189deg 198deg,
    rgba(245,237,216,0.05) 198deg 207deg, transparent 207deg 216deg,
    rgba(245,237,216,0.05) 216deg 225deg, transparent 225deg 234deg,
    rgba(245,237,216,0.05) 234deg 243deg, transparent 243deg 252deg,
    rgba(245,237,216,0.05) 252deg 261deg, transparent 261deg 270deg,
    rgba(245,237,216,0.05) 270deg 279deg, transparent 279deg 288deg,
    rgba(245,237,216,0.05) 288deg 297deg, transparent 297deg 306deg,
    rgba(245,237,216,0.05) 306deg 315deg, transparent 315deg 324deg,
    rgba(245,237,216,0.05) 324deg 333deg, transparent 333deg 342deg,
    rgba(245,237,216,0.05) 342deg 351deg, transparent 351deg 360deg
  );
  pointer-events: none;
}

.hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  position: relative;
}

h1 {
  font-size: clamp(3.5rem, 13vw, 9rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  color: var(--cream);
  text-shadow: 5px 5px 0 var(--black);
  letter-spacing: -0.02em;
  position: relative;
}
h1 .on {
  display: block;
  font-size: 0.42em;
  color: var(--gold);
  letter-spacing: 0.3em;
  text-shadow: 3px 3px 0 var(--black);
}

.hero-rule {
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.75rem auto;
  position: relative;
}

.hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-style: italic;
  max-width: 520px;
  margin: 0 auto 2.5rem;
  line-height: 1.65;
  position: relative;
}

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 2.25rem;
  border: 3px solid var(--black);
  box-shadow: 5px 5px 0 var(--black);
  transition: transform .15s, box-shadow .15s;
  position: relative;
}
.btn:hover  { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--black); }
.btn:active { transform: translate(2px,2px);   box-shadow: 3px 3px 0 var(--black); }

/* ── Sections ── */
section {
  padding: 4.5rem 2rem;
  position: relative;
}

.inner {
  max-width: 900px;
  margin: 0 auto;
}

.inner h3 {
  margin-bottom: 1rem;
  }

.s-label {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

h2 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 4px 4px 0 var(--black);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

/* ── About ── */
#about {
  background: rgba(0,0,0,0.2);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: rgba(0,0,0,0.25);
  border: 2px solid var(--gold);
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: transform .2s;
}
.card:hover { transform: translateY(-3px); }
.card .icon { font-size: 2.2rem; margin-bottom: 0.75rem; display: block; }
.card h3 {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.card p { font-size: 0.92rem; line-height: 1.6; opacity: 0.9; }

/* ── Venue ── */
#venue { text-align: center; }

.venue-box {
  display: inline-block;
  background: rgba(0,0,0,0.25);
  border: 3px solid var(--gold);
  padding: 2.25rem 2.75rem;
  margin-top: 1.5rem;
  max-width: 560px;
  width: 100%;
  position: relative;
}
.venue-box::before {
  content: '★';
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: var(--gold);
  font-size: 1.4rem;
  padding: 0 0.5rem;
}
.venue-box h3 {
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.6rem;
}
.venue-box p { font-size: 0.97rem; line-height: 1.7; opacity: 0.9; }
.venue-meta {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201,168,76,0.35);
  font-size: 0.88rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}

/* ── Contact ── */
#contact {
  background: rgba(0,0,0,0.2);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  text-align: center;
}

.contact-box {
  background: var(--cream);
  color: var(--black);
  display: inline-block;
  padding: 2.5rem 3rem;
  border: 4px solid var(--black);
  box-shadow: 7px 7px 0 var(--black);
  margin-top: 1.75rem;
  max-width: 520px;
  width: 100%;
}
.contact-box h3 {
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.contact-box p { font-size: 0.93rem; color: #444; line-height: 1.6; margin-bottom: 1.5rem; }

.email-btn {
  display: block;
  background: var(--red);
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.8rem 1.75rem;
  border: 3px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  word-break: break-all;
  transition: transform .15s, box-shadow .15s;
  margin-bottom: 0.75rem;
}
.email-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--black); }

.web-link {
  display: block;
  font-size: 0.88rem;
  color: #555;
  text-decoration: none;
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}
.web-link:hover { color: var(--black); text-decoration: underline; }

/* ── Footer ── */
footer {
  background: var(--black);
  color: var(--cream);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
footer .f-name { color: var(--gold); font-weight: bold; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.5rem; }
footer p { opacity: 0.55; line-height: 1.7; }
footer a { color: var(--gold); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 700px) {
  nav { display: none; }
  .burger { display: flex; }
  .contact-box { padding: 2rem 1.25rem; }
  .venue-box { padding: 2rem 1.25rem; }
  section { padding: 3.5rem 1.25rem; }
}
@media (max-width: 420px) {
  header { padding: 0.75rem 1rem; }
  .logo-circle { width: 54px; height: 54px; }
  .logo-circle .l-mid { font-size: 0.85rem; }
}

/* ── Fade in ── */
.fi { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.fi.vis { opacity: 1; transform: translateY(0); }

/* ── What's On ── */
.season-block {
  background: rgba(0,0,0,0.2);
  border: 2px solid var(--gold);
  border-left: 6px solid var(--gold);
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}

.season-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.season-icon {
  font-size: 1.5rem;
}

.season-block h3 {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
}

.date-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.date-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.4rem 1rem;
}

.date-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.97rem;
  color: var(--cream);
  opacity: 0.9;
}

.date-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── About text block ── */
.about-text {
  background: rgba(0,0,0,0.2);
  border-left: 6px solid var(--gold);
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-text p {
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.92;
  margin-bottom: 1rem;
}

.about-text p:last-child {
  margin-bottom: 0;
}

.about-text a {
  color: var(--gold);
  font-weight: bold;
  text-decoration: none;
}

.about-text a:hover {
  text-decoration: underline;
}