:root {
  --maroon: #730d1d;
  --deep-maroon: #4f0814;
  --gold: #be7915;
  --cream: #fbf5e9;
  --ink: #301d1d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: Montserrat, Arial, sans-serif; }
.hero {
  height: 100vh;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream) url("assets/hero-background.png") center center / cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -5% -11% -5%;
  height: 21%;
  border-top: 10px solid #d19a45;
  background: var(--deep-maroon);
  border-radius: 50% 50% 0 0 / 45% 45% 0 0;
  transform: rotate(-3deg);
  box-shadow: inset 0 16px 0 #f5dfad, inset 0 28px 0 #8d1f2c;
}
.people-art {
  position: absolute;
  z-index: -2;
  right: 11%;
  bottom: 9%;
  width: min(34vw, 490px);
  max-height: 66vh;
  object-fit: contain;
  object-position: bottom;
}
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 5.2vw 0;
}
.brand {
  display: block;
  width: 300px;
  max-width: 100%;
  margin-top: 0;
}
.brand img { display: block; width: 300px; max-width: 100%; height: auto; }
.coming-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--maroon);
  border-radius: 30px;
  padding: 14px 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  height: calc(100vh - 76px);
  min-height: 0;
  align-items: center;
  padding: 1vh 5vw 13vh;
}
.copy {
  width: 54%;
  max-width: 770px;
  max-height: 100%;
  margin-top: -1vh;
  text-align: center;
}
.heartbeat { display: flex; align-items: center; justify-content: center; height: 82px; color: var(--maroon); }
.heartbeat-line { width: 25%; height: 32px; border-top: 3px solid var(--maroon); border-radius: 50%; transform: rotate(-7deg); }
.heartbeat-line--right { transform: scaleX(-1) rotate(-7deg); }
.heart { margin: 0 5px; color: var(--maroon); font-size: 56px; line-height: 1; text-shadow: 0 0 0 #fff, 2px 2px #d9a431; }
.eyebrow { margin: 10px 0 8px; color: var(--maroon); font: 600 clamp(21px, 2vw, 29px) "Cormorant Garamond", serif; letter-spacing: .22em; line-height: .9; }
.title-mark { color: var(--gold); font: inherit; letter-spacing: inherit; }
h1, h2 { margin: 0; color: var(--maroon); font-family: "Cormorant Garamond", serif; text-transform: uppercase; }
h1 { font-size: clamp(34px, 3.4vw, 54px); font-weight: 600; letter-spacing: .015em; line-height: .88; }
h2 { margin-top: 10px; font-size: clamp(23px, 2.1vw, 34px); line-height: .98; }
h2 sup { font-size: .45em; }
.lead { margin: 15px 0 5px; font-size: clamp(13px, 1.05vw, 17px); line-height: 1.25; }
.tagline { margin: 0; color: #83501e; font: italic 500 clamp(17px, 1.5vw, 24px) "Cormorant Garamond", serif; line-height: 1.05; }
.event-meta { display: flex; justify-content: center; gap: clamp(18px, 4vw, 58px); margin-top: 18px; color: var(--maroon); font-size: clamp(11px, 1vw, 15px); }
.event-meta i { margin-right: 9px; font-size: 17px; }
.event-meta sup { font-size: .6em; }
.actions { display: flex; justify-content: center; margin-top: 20px; }
.register-action { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.register-action small { color: var(--maroon); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; color: var(--maroon); border: 2px solid var(--gold); border-radius: 30px; padding: 11px 20px; font-size: 12px; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.button--primary { border: 0; }
.button--primary span { display: inline-grid; place-items: center; margin-left: 24px; width: 27px; height: 27px; color: var(--maroon); background: white; border-radius: 50%; font-size: 19px; }
.button--disabled { cursor: default; opacity: .9; }
.hero-footer { position: absolute; z-index: 2; bottom: 0; left: 44%; display: flex; align-items: center; gap: 28px; width: 53%; color: #f4d898; padding: 26px 3% 17px; }
.footer-item,
.makassar { display: none; }
.footer-item { display: flex; align-items: center; gap: 11px; padding-right: 23px; border-right: 1px solid #b16c49; text-align: center; text-transform: uppercase; }
.footer-item span { font-size: 31px; }
.footer-item small { font-size: 9px; letter-spacing: .1em; }
.makassar { margin-left: auto; color: #e7b84c; font: italic 38px "Cormorant Garamond", serif; white-space: nowrap; }
.makassar small { display: block; color: #f4d898; font: 9px Montserrat, sans-serif; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.hero-footer .footer-item,
.hero-footer .makassar { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@media (max-width: 1100px) {
  .hero-content { padding-top: 1vh; }
  .hero-footer { left: 42%; width: 57%; gap: 12px; }
  .footer-item { padding-right: 10px; }
  .makassar { font-size: 28px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .copy { margin-top: 6vh; }
}
@media (max-width: 760px) {
  .hero { background-position: 25% center; }
  .site-header { padding: 12px 16px 0; }
  .brand, .brand img { width: min(300px, 62vw); }
  .coming-soon { padding: 10px 14px; font-size: 9px; letter-spacing: .06em; }
  .hero-content { height: calc(100vh - 70px); padding: 2vh 20px 145px; align-items: flex-start; }
  .copy { width: 100%; }
  .heartbeat { height: 48px; }
  .heart { font-size: 38px; }
  .eyebrow { font-size: 21px; }
  h1 { font-size: 35px; line-height: .9; }
  h2 { margin-top: 8px; font-size: 23px; line-height: .95; }
  .lead { font-size: 13px; }
  .tagline { font-size: 21px; }
  .event-meta { flex-direction: column; gap: 8px; margin-top: 18px; font-size: 12px; }
  .actions { margin-top: 20px; }
  .button { min-width: 210px; }
  .people-art {	right: -9%;	bottom: 9%;	width: 52vw;	max-height: 40vh;	opacity: .9;}
  .hero::after { bottom: -3%; height: 15%; }
  .hero-footer { left: 0; width: 100%; justify-content: center; padding: 9px 12px; gap: 8px; }
  .footer-item { display: block; padding-right: 8px; }
  .footer-item span { display: block; font-size: 22px; }
  .footer-item small { font-size: 7px; }
  .makassar { display: none; }
}
@media (min-width: 600px) and (max-width: 760px) {
  .hero-content { align-items: center; }
  .copy { margin-top: 0; }
}