@font-face {
  font-family: 'Chorus';
  src: url('../fonts/chorus.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Baskerville';
  src: url('../fonts/baskerville.woff') format('woff');
  font-display: swap;
}

:root{
  --ink: #EDE7D6;
  --deep: #FBF8EF;
  --mid: #C9D6DE;
  --gold: #D9B876;
  --terracotta: #C17C54;
  --navy: #0D2337;
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--navy);
  font-family: 'Baskerville', Georgia, 'Times New Roman', serif;
  color: var(--deep);
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: clamp(20px,6vh,64px) 5vw clamp(24px,7vh,72px);
  text-align:center;
  overflow:hidden;
}

.hero-bg{
  position:absolute; inset:0;
  z-index:0;
}
.hero-bg img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
}
.hero-bg .tint{
  position:absolute; inset:0;
  background:#1B3D5F;
  mix-blend-mode:color;
  opacity:0.92;
}
.hero-bg .depth{
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(7,20,33,0.80) 0%,
    rgba(7,20,33,0.52) 20%,
    rgba(9,25,40,0.30) 42%,
    rgba(10,28,45,0.28) 58%,
    rgba(8,22,36,0.48) 75%,
    rgba(6,17,28,0.82) 100%);
}

.frame-outer{
  position:absolute;
  top:clamp(14px,2.6vmin,28px); left:clamp(14px,2.6vmin,28px);
  right:clamp(14px,2.6vmin,28px); bottom:clamp(14px,2.6vmin,28px);
  border:1.4px solid rgba(217,184,118,0.7);
  z-index:2;
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:780px;
  width:100%;
}

.anchor-mark{ width:clamp(16px,3vmin,24px); height:clamp(16px,3vmin,24px); margin-bottom:clamp(6px,1.6vmin,14px); }

.crest{ width:clamp(76px,14vmin,120px); margin-bottom:clamp(4px,1.2vmin,10px); }

h1.title{
  margin-top:clamp(4px,1.4vmin,10px);
  font-family:'Baskerville', Georgia, serif;
  font-weight:400;
  font-size:clamp(20px,5vmin,42px);
  letter-spacing:clamp(0.12em,0.35em,0.35em);
  text-transform:uppercase;
  color: var(--deep);
}

.for-text{
  margin-top:clamp(6px,1.6vmin,12px);
  font-family:'Baskerville', Georgia, serif;
  font-style:italic;
  font-size:clamp(15px,3vmin,28px);
  color: var(--ink);
}

.names{
  margin-top:clamp(6px,2vmin,16px);
  font-family:'Chorus','Baskerville',serif;
  font-size:clamp(40px,11vmin,108px);
  line-height:1;
  color: var(--deep);
}

.amp{
  display:block;
  font-family:'Baskerville', Georgia, serif;
  font-style:italic;
  font-size:clamp(16px,3.6vmin,34px);
  color: var(--ink);
  margin: clamp(4px,1.2vmin,10px) 0 clamp(2px,0.8vmin,6px);
}

.date-line{
  margin-top:clamp(10px,2.6vmin,22px);
  font-weight:500;
  font-size:clamp(16px,2.8vmin,26px);
  letter-spacing:clamp(2px,0.6vmin,4px);
  color: var(--deep);
}

.venue-name{
  margin-top:clamp(6px,1.6vmin,12px);
  font-weight:600;
  font-size:clamp(14px,2.4vmin,22px);
  letter-spacing:clamp(1.5px,0.5vmin,3px);
  text-transform:uppercase;
  color: var(--deep);
  line-height:1.35;
  max-width: 90%;
  margin-left:auto;
  margin-right:auto;
}

.venue-city{
  margin-top:clamp(3px,0.8vmin,6px);
  font-size:clamp(10px,1.6vmin,14px);
  letter-spacing:clamp(1.5px,0.5vmin,3px);
  text-transform:uppercase;
  color: var(--mid);
}

.mini-divider{ margin-top:clamp(12px,2.6vmin,22px); width:clamp(90px,12vmin,130px); }

.two-cel-title{
  margin-top:clamp(8px,1.8vmin,14px);
  font-family:'Baskerville', Georgia, serif;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:0.25em;
  font-size:clamp(10px,1.6vmin,13px);
  color: var(--gold);
}

.two-cel-row{
  margin-top:clamp(5px,1.2vmin,8px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  row-gap:6px;
  font-weight:500;
  font-size:clamp(12px,2vmin,18px);
  letter-spacing:1.5px;
  color: var(--mid);
}
.two-cel-row span{ white-space:nowrap; }
.two-cel-row .sep{ margin:0 clamp(6px,1.4vmin,12px); color: var(--terracotta); }
.two-cel-row .year{ font-size:1.35em; color: var(--deep); }

.subtext{
  margin-top:clamp(8px,2vmin,16px);
  font-family:'Baskerville', Georgia, serif;
  font-style:italic;
  font-size:clamp(11px,2vmin,17px);
  color: var(--ink);
}