:root{
  --bg:#15100c;
  --bg-wood:#211710;
  --panel:#1b140f;
  --line:rgba(233,196,143,.14);
  --cream:#f3e9d8;
  --muted:#b9a68d;
  --amber:#e0902f;
  --amber-2:#c86a1f;
  --amber-soft:rgba(224,144,47,.15);

  --font-display:'Oswald', sans-serif;
  --font-script:'Caveat', cursive;
  --font-body:'Manrope', sans-serif;

  --radius:14px;
  --wrap:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(224,144,47,.10), transparent 45%),
    radial-gradient(ellipse at 100% 0%, rgba(224,144,47,.08), transparent 40%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
    var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
img{max-width:100%; display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Ambient steam ---------- */
.steam{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.steam span{
  position:absolute; bottom:-20%; width:40vw; height:80vh;
  background:radial-gradient(closest-side, rgba(240,220,190,.05), transparent 70%);
  filter:blur(30px);
  animation:rise 22s linear infinite;
}
.steam span:nth-child(1){left:-5%; animation-delay:0s;}
.steam span:nth-child(2){left:35%; animation-duration:28s; animation-delay:-8s;}
.steam span:nth-child(3){left:70%; animation-duration:25s; animation-delay:-15s;}
@keyframes rise{
  0%{transform:translateY(10%) scale(1); opacity:0;}
  15%{opacity:1;}
  100%{transform:translateY(-120%) scale(1.3); opacity:0;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  font-size:14px; padding:14px 24px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:linear-gradient(180deg, #ecab52, var(--amber-2));
  color:#241407; box-shadow:0 8px 22px -8px rgba(224,144,47,.65);
}
.btn-primary:hover{box-shadow:0 10px 26px -6px rgba(224,144,47,.8); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--amber); border-color:var(--amber);}
.btn-outline:hover{background:var(--amber-soft);}
.btn-ghost{background:rgba(255,255,255,.04); color:var(--cream); border-color:var(--line);}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.btn-small{padding:10px 18px; font-size:12px;}
.btn-block{width:100%;}
.btn-icon{font-size:16px; line-height:1;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(21,16,12,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo-badge{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; font-size:16px;
}
.logo-text{font-family:var(--font-display); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); line-height:1.3;}
.logo-text em{font-style:normal; color:var(--cream); display:block;}
.nav{display:flex; gap:28px; margin-left:auto; margin-right:24px;}
.nav a{
  font-size:13px; text-transform:uppercase; letter-spacing:.06em; text-decoration:none;
  color:var(--muted); font-family:var(--font-display); font-weight:500;
  transition:color .15s ease;
}
.nav a:hover{color:var(--amber);}
.nav-toggle{display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px; cursor:pointer;}
.nav-toggle span{width:22px; height:2px; background:var(--cream); border-radius:2px;}

/* ---------- Hero ---------- */
.hero{position:relative; padding:64px 0 40px; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.eyebrow{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-size:12px;
  color:var(--amber); margin:0 0 14px;
}
.hero-title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(48px, 8vw, 84px); line-height:.92; letter-spacing:.01em;
  margin:0; color:var(--cream);
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.hero-script{
  font-family:var(--font-script); font-size:clamp(30px, 4vw, 42px); color:var(--amber);
  margin:2px 0 20px; position:relative; display:inline-block;
}
.hero-script::after{
  content:''; position:absolute; left:2px; bottom:-6px; width:78%; height:3px;
  background:var(--amber); border-radius:3px; opacity:.7;
}
.hero-text{color:var(--muted); font-size:16px; max-width:46ch; margin:0 0 30px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px;}
.hero-counter{margin:18px 0 0; font-size:13px; color:var(--muted); min-height:18px;}
.hero-counter strong{color:var(--amber);}

.hero-media{position:relative;}
.hero-photo{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
  aspect-ratio:4/4.6;
}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:top;}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(21,16,12,.85) 100%),
             linear-gradient(90deg, rgba(21,16,12,.35), transparent 30%);
}
.countdown{
  position:absolute; left:-18px; bottom:-22px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px 20px; box-shadow:0 20px 40px -16px rgba(0,0,0,.8);
  min-width:230px;
}
.countdown-label{margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
.countdown-numbers{display:flex; gap:14px;}
.countdown-numbers div{text-align:center;}
.countdown-numbers span{display:block; font-family:var(--font-display); font-size:26px; color:var(--amber); line-height:1;}
.countdown-numbers small{display:block; margin-top:2px; font-size:10px; text-transform:uppercase; color:var(--muted); letter-spacing:.06em;}

/* ---------- Details bar ---------- */
.details{padding:8px 0 56px; position:relative; z-index:1;}
.details-grid{
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:34px 12px;
}
.detail-item{
  text-align:center; padding:0 18px; position:relative;
}
.detail-item + .detail-item::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--line);
}
.detail-icon{font-size:22px; display:block; margin-bottom:10px;}
.detail-label{
  margin:0 0 6px; font-family:var(--font-display); font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--amber);
}
.detail-value{margin:0; font-size:15px; font-weight:600;}
.detail-value a{text-decoration:none; border-bottom:1px dashed var(--muted);}
.detail-value .muted{font-weight:400;}
.muted{color:var(--muted); font-weight:400;}

/* ---------- Section title ---------- */
.section-title{
  text-align:center; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.05em; font-size:clamp(26px,3.6vw,36px); margin:0 0 44px;
}
.section-title span{position:relative; display:inline-block; padding:0 26px;}
.section-title span::before, .section-title span::after{
  content:''; position:absolute; top:50%; width:60px; height:1px; background:var(--line);
}
.section-title span::before{right:100%;}
.section-title span::after{left:100%;}

/* ---------- Program timeline ---------- */
.program{padding:70px 0; position:relative; z-index:1;}
.timeline{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
  position:relative;
}
.timeline::before{
  content:''; position:absolute; top:29px; left:10%; right:10%; height:1px;
  background:var(--line); z-index:0;
}
.timeline li{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  position:relative; z-index:1; padding:0 6px;
}
.timeline-icon{
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--amber); font-size:22px; margin-bottom:6px;
}
.timeline-time{font-family:var(--font-display); color:var(--amber); font-size:14px; letter-spacing:.04em;}
.timeline-name{font-weight:700; font-size:15px;}
.timeline-desc{color:var(--muted); font-size:12.5px; max-width:16ch;}

/* ---------- FAQ ---------- */
.faq{padding:20px 0 80px; position:relative; z-index:1;}
.accordion{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
.accordion details{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px;
}
.accordion summary{
  cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary::after{content:'+'; color:var(--amber); font-size:20px; margin-left:12px;}
.accordion details[open] summary::after{content:'–';}
.accordion p{margin:12px 0 0; color:var(--muted); font-size:14.5px;}

/* ---------- Footer banner ---------- */
.footer-banner{padding:0 0 70px; position:relative; z-index:1;}
.footer-banner-grid{
  display:grid; grid-template-columns:.8fr 1.6fr; gap:24px; align-items:center;
}
.wood-sign{
  background:var(--panel); border:1px solid var(--amber); border-radius:16px;
  padding:28px; text-align:center;
  transform:rotate(-2deg);
}
.wood-sign p{
  margin:0; font-family:var(--font-display); text-transform:uppercase; font-size:20px;
  line-height:1.3; letter-spacing:.02em; color:var(--amber);
}
.footer-photo{border-radius:16px; overflow:hidden; border:1px solid var(--line);}
.footer-photo img{width:100%; height:100%; object-fit:cover;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:26px 0; position:relative; z-index:1;}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:13px;}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none;}
.modal.is-open{display:block;}
.modal-overlay{position:absolute; inset:0; background:rgba(10,7,5,.72); backdrop-filter:blur(3px);}
.modal-box{
  position:relative; z-index:1; max-width:440px; margin:8vh auto; background:var(--panel);
  border:1px solid var(--line); border-radius:18px; padding:32px 28px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
  max-height:84vh; overflow-y:auto;
  animation:pop .18s ease;
}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
.modal-close{
  position:absolute; top:16px; right:16px; background:none; border:none; color:var(--muted);
  font-size:26px; line-height:1; cursor:pointer;
}
.modal-close:hover{color:var(--cream);}
.modal-box h3{font-family:var(--font-display); text-transform:uppercase; margin:0 0 8px; font-size:22px;}
.modal-sub{color:var(--muted); font-size:14px; margin:0 0 22px;}

.form{display:flex; flex-direction:column; gap:16px;}
.form label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); font-weight:600;}
.optional{font-weight:400; color:var(--muted); text-transform:none;}
.form input, .form textarea{
  font-family:var(--font-body); background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:10px; padding:11px 14px; color:var(--cream); font-size:14.5px; resize:vertical;
}
.form input:focus, .form textarea:focus{border-color:var(--amber);}
.form-status{margin:2px 0 0; font-size:13px; min-height:18px;}
.form-status.ok{color:#8fce7f;}
.form-status.err{color:#e08585;}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr; gap:64px;}
  .hero-media{order:-1; max-width:420px; margin:0 auto;}
  .details-grid{grid-template-columns:repeat(2,1fr); row-gap:26px;}
  .detail-item:nth-child(3)::before{display:none;}
  .timeline{grid-template-columns:1fr; gap:22px; max-width:360px; margin:0 auto;}
  .timeline::before{display:none;}
  .timeline li{flex-direction:row; text-align:left; gap:16px;}
  .timeline-icon{margin-bottom:0; flex-shrink:0;}
  .timeline-desc{max-width:none;}
  .footer-banner-grid{grid-template-columns:1fr;}
  .wood-sign{transform:none;}
}
@media (max-width: 720px){
  .nav{
    position:fixed; top:64px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg-wood); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav.is-open{max-height:260px;}
  .nav a{padding:16px 24px; border-top:1px solid var(--line);}
  .header-inner .btn-small{display:none;}
  .nav-toggle{display:flex;}
  .countdown{position:static; margin-top:-30px; margin-left:auto; margin-right:auto; width:fit-content;}
}
