/* ===== Tokens ===== */
:root{
  --ink: #12201E;
  --paper: #F7F3EA;
  --paper-2: #EFE9DA;
  --coral: #FF6A47;
  --gold: #D9A441;
  --text: #1F2420;
  --text-muted: #5C6B64;
  --line: rgba(18,32,30,0.14);
  --radius: 14px;

  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
}
.wrap{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 .4em;
  color:var(--ink);
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(247,243,234,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:700;
  text-decoration:none;
  color:var(--ink);
}
.logo span{color:var(--coral);}
.nav{display:flex; gap:28px;}
.nav a{
  text-decoration:none;
  font-weight:500;
  font-size:.95rem;
  color:var(--text);
  position:relative;
}
.nav a:hover{color:var(--coral);}
.nav-toggle{
  display:none;
  background:none; border:none; font-size:1.4rem; cursor:pointer;
}

/* ===== Hero ===== */
.hero{padding:72px 0 40px;}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:center;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--coral);
  text-transform:uppercase;
}
h1{
  font-size:clamp(2.1rem, 4vw, 3.2rem);
  line-height:1.08;
  margin-top:.5em;
}
.hero-sub{
  color:var(--text-muted);
  max-width:44ch;
  margin:1.1em 0 1.6em;
}
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  padding:14px 26px;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper);
}
.btn-primary:hover{transform:translateY(-2px); background:#0A1512;}

/* --- Boarding pass hero visual --- */
.pass-ticket{
  background:var(--ink);
  color:var(--paper);
  border-radius:18px;
  position:relative;
  box-shadow:0 24px 50px -18px rgba(18,32,30,0.45);
  overflow:hidden;
}
.pass-top{
  display:flex; justify-content:space-between;
  padding:18px 22px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--gold);
  border-bottom:1px dashed rgba(247,243,234,0.25);
}
.pass-main{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 16px;
  padding:26px 22px 30px;
}
.pass-field span{
  display:block;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.08em;
  color:rgba(247,243,234,0.55);
  margin-bottom:4px;
}
.pass-field strong{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
}
.pass-perf{
  height:0;
  border-top:2px dashed rgba(247,243,234,0.3);
  position:relative;
  margin:0 0;
}
.pass-perf::before,.pass-perf::after{
  content:"";
  position:absolute; top:-11px;
  width:22px; height:22px;
  background:var(--paper);
  border-radius:50%;
}
.pass-perf::before{left:-11px;}
.pass-perf::after{right:-11px;}
.pass-stub{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.05em;
  color:rgba(247,243,234,0.6);
}
.pass-code{color:var(--coral); font-weight:700;}

/* ===== Section shared ===== */
section{padding:64px 0;}
.section-title{font-size:1.8rem;}
.section-sub{color:var(--text-muted); margin-top:-.4em; margin-bottom:1.6em;}

/* ===== Catalog grid ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:24px;
}
.ticket{
  background:var(--paper-2);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ticket:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 32px -18px rgba(18,32,30,0.35);
}
.ticket-image{
  position:relative;
  aspect-ratio:4/3;
  background:#ddd6c4;
  overflow:hidden;
}
.ticket-image img{width:100%; height:100%; object-fit:cover; display:block;}
.badge{
  position:absolute; top:10px; left:10px;
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.04em;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(18,32,30,0.85);
  color:var(--paper);
}
.badge-discount{
  left:auto; right:10px;
  background:var(--coral);
  color:#1a0f0a;
}
.ticket-body{
  padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:10px;
  position:relative;
}
.ticket-body::before{
  content:"";
  position:absolute; top:0; left:18px; right:18px;
  border-top:1.5px dashed var(--line);
}
.ticket-title{
  font-size:1.02rem;
  font-weight:600;
  color:var(--ink);
  font-family:var(--font-body);
}
.price-row{display:flex; align-items:baseline; gap:8px;}
.price-now{font-family:var(--font-mono); font-weight:700; font-size:1.15rem; color:var(--ink);}
.price-was{font-family:var(--font-mono); font-size:.85rem; color:var(--text-muted); text-decoration:line-through;}
.ticket-cta{
  margin-top:4px;
  font-size:.85rem;
  font-weight:600;
  color:var(--coral);
}

/* ===== How it works ===== */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.step-num{
  font-family:var(--font-mono);
  color:var(--coral);
  font-weight:700;
}
.step h3{margin-top:.3em;}
.step p{color:var(--text-muted); margin:0;}

/* ===== FAQ ===== */
.faq-list details{
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.faq-list summary{
  cursor:pointer;
  font-weight:600;
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--ink);
}
.faq-list p{color:var(--text-muted); margin:.7em 0 0;}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--line);
  padding:26px 0;
}
.footer-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.85rem;
  color:var(--text-muted);
}
.footer-links a{text-decoration:none; color:var(--text-muted);}
.footer-links a:hover{color:var(--coral);}

/* ===== Modal ===== */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(18,32,30,0.55);
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  z-index:100;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--paper);
  border-radius:18px;
  max-width:780px; width:100%;
  max-height:88vh;
  overflow-y:auto;
  position:relative;
}
.modal-close{
  position:absolute; top:14px; right:14px;
  background:var(--ink); color:var(--paper);
  border:none; width:34px; height:34px; border-radius:50%;
  font-size:1.2rem; cursor:pointer; z-index:2;
}
.modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.modal-image{position:relative; background:#ddd6c4;}
.modal-image img{width:100%; height:100%; object-fit:cover; display:block; min-height:260px;}
.modal-info{padding:28px 28px 32px;}
.modal-price-row{display:flex; align-items:center; gap:10px; margin:8px 0 18px; flex-wrap:wrap;}
.btn-buy{width:100%; text-align:center; margin-bottom:22px;}
.tab-heads{display:flex; gap:18px; border-bottom:1px solid var(--line); margin-bottom:14px;}
.tab-head{
  background:none; border:none; cursor:pointer;
  padding:8px 2px 12px;
  font-weight:600; color:var(--text-muted);
  border-bottom:2px solid transparent;
}
.tab-head.active{color:var(--ink); border-color:var(--coral);}
.tab-body{display:none; color:var(--text-muted); font-size:.94rem; line-height:1.65;}
.tab-body.active{display:block;}
.tab-body p{margin:0 0 .8em;}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .modal-grid{grid-template-columns:1fr;}
  .modal-image img{min-height:200px;}
}
@media (max-width: 640px){
  .nav{
    display:none;
    position:absolute; top:72px; left:0; right:0;
    background:var(--paper);
    flex-direction:column;
    padding:16px 24px;
    border-bottom:1px solid var(--line);
  }
  .nav.open{display:flex;}
  .nav-toggle{display:block;}
}