:root{
  --stone-950:#120d09;
  --stone-900:#1b140e;
  --stone-800:#2a2018;
  --stone-700:#3a2c1f;
  --parchment:#ecdfb8;
  --parchment-dim:#cdbb8c;
  --gold:#c9a24a;
  --gold-bright:#eecf8c;
  --ink-navy:#26365470;
  --burgundy:#6d322666;
  --flame:#f2b23d;
  --line: rgba(201,162,74,0.35);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(109,50,38,0.28), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(38,54,84,0.28), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,0.55), transparent 60%),
    var(--stone-950);
  color:var(--parchment);
  font-family:'EB Garamond', serif;
  overflow-x:hidden;
  position:relative;
}

/* subtle stone grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
  mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 3px);
}

@media (prefers-reduced-motion: no-preference){
  .flame-glow{ animation: flicker 4.5s ease-in-out infinite; }
  .fade-up{ animation: fadeUp 1.1s ease both; }
  .hero-frame{ animation: frameIn 1.3s cubic-bezier(.2,.8,.2,1) both; }
}

@keyframes flicker{
  0%,100%{ opacity:.55; transform:scale(1); }
  30%{ opacity:.85; transform:scale(1.08); }
  45%{ opacity:.5; transform:scale(0.96); }
  60%{ opacity:.9; transform:scale(1.05); }
  80%{ opacity:.6; transform:scale(1); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes frameIn{
  from{ opacity:0; transform:translateY(28px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.wrap{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- HEADER SIGN ---------- */
header{
  padding:56px 24px 20px;
  text-align:center;
  position:relative;
  z-index:1;
}

.eyebrow{
  font-family:'Cormorant SC', serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:13px;
  color:var(--gold);
  opacity:.9;
  margin:0 0 18px;
}

h1.sign{
  font-family:'Cinzel Decorative', serif;
  font-weight:900;
  font-size:clamp(42px, 8vw, 96px);
  line-height:1;
  margin:0;
  letter-spacing:.01em;
  background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, #8a6a2c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 1px 0 rgba(0,0,0,.4),
    0 2px 8px rgba(0,0,0,.55);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}

.subname{
  font-family:'Cinzel', serif;
  font-weight:500;
  font-size:clamp(15px, 2.4vw, 22px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--parchment-dim);
  margin-top:14px;
}

/* ---------- HERO ---------- */
.hero-section{
  position:relative;
  padding:36px 0 10px;
}

.hero-frame{
  position:relative;
  max-width:980px;
  margin:0 auto;
  border-radius:6px;
  padding:14px;
  background:
    linear-gradient(155deg, #4a3620, #2a1d10 40%, #1a1209 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 30px 80px -20px rgba(0,0,0,.85),
    0 0 120px -20px rgba(242,178,61,0.18);
}

.hero-frame .inner{
  position:relative;
  border-radius:2px;
  overflow:hidden;
  border:1px solid rgba(201,162,74,0.45);
}

.hero-frame img{
  display:block;
  width:100%;
  height:auto;
}

/* corner brackets, echoing wrought-metal fittings */
.corner{
  position:absolute;
  width:34px; height:34px;
  z-index:2;
  pointer-events:none;
}
.corner::before, .corner::after{
  content:"";
  position:absolute;
  background:var(--gold);
  opacity:.85;
}
.corner::before{ width:100%; height:2px; top:0; left:0; }
.corner::after{ width:2px; height:100%; top:0; left:0; }
.corner.tl{ top:6px; left:6px; }
.corner.tr{ top:6px; right:6px; transform:rotate(90deg); }
.corner.bl{ bottom:6px; left:6px; transform:rotate(-90deg); }
.corner.br{ bottom:6px; right:6px; transform:rotate(180deg); }

.flame-glow{
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,178,61,0.55), rgba(242,178,61,0) 70%);
  filter:blur(6px);
  z-index:0;
  pointer-events:none;
}
.flame-glow.left{ top:8%; left:-40px; }
.flame-glow.right{ bottom:6%; right:-40px; animation-delay:1.4s; }

/* ribbon caption under image */
.caption-plaque{
  max-width:640px;
  margin:-26px auto 0;
  position:relative;
  z-index:3;
  text-align:center;
  padding:16px 30px;
  background:
    linear-gradient(180deg, #3a2c1f, #241a10);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
}
.caption-plaque p{
  margin:0;
  font-family:'Cinzel', serif;
  font-size:clamp(13px,1.7vw,16px);
  letter-spacing:.06em;
  color:var(--gold-bright);
}

/* ---------- MESSAGE ---------- */
.message{
  max-width:680px;
  margin:88px auto 0;
  text-align:center;
  padding:0 12px;
}
.message h2{
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:clamp(24px,4vw,34px);
  color:var(--parchment);
  margin:0 0 22px;
  letter-spacing:.02em;
}
.message p{
  font-size:19px;
  line-height:1.75;
  color:var(--parchment-dim);
  font-style:italic;
  margin:0 0 12px;
}

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:40px auto 0;
  max-width:340px;
}
.divider .line{
  height:1px;
  flex:1;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider .mark{
  width:8px;height:8px;
  background:var(--gold);
  transform:rotate(45deg);
  box-shadow:0 0 10px var(--flame);
}

/* ---------- ACTIVITY CHIPS ---------- */
.chips{
  max-width:820px;
  margin:44px auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  padding:0 12px;
}
.chip{
  font-family:'Cormorant SC', serif;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--parchment);
  border:1px solid var(--line);
  background:rgba(42,32,24,0.55);
  padding:9px 18px;
  border-radius:2px;
  white-space:nowrap;
}

/* ---------- CONTACT ---------- */
.contact{
  max-width:560px;
  margin:80px auto 0;
  text-align:center;
  padding:34px 26px 40px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.contact p{
  color:var(--parchment-dim);
  font-size:16px;
  margin:0 0 18px;
}
.contact a.cta{
  display:inline-block;
  font-family:'Cinzel', serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:14px;
  color:var(--stone-950);
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  padding:14px 34px;
  border-radius:2px;
  text-decoration:none;
  box-shadow:0 12px 30px -10px rgba(201,162,74,0.55);
  transition:transform .25s ease, box-shadow .25s ease;
}
.contact a.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px -10px rgba(201,162,74,0.75);
}
.contact a.cta:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
}

footer{
  text-align:center;
  padding:36px 24px 56px;
  font-family:'Cormorant SC', serif;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--parchment-dim);
  opacity:.75;
}

@media (max-width:640px){
  header{ padding:40px 16px 12px; }
  .hero-frame{ padding:8px; }
  .caption-plaque{ margin-top:-16px; padding:12px 18px; }
  .message{ margin-top:60px; }
  .chips{ gap:8px; }
  .chip{ font-size:12.5px; padding:7px 13px; }
}