:root{
  --blue:#0b65c2;
  --blue-dark:#083e7c;
  --blue-soft:#e7f1ff;
  --gold:#f7bd2b;
  --gold-dark:#986c00;
  --cream:#fff8e8;
  --cream-2:#f7f0df;
  --paper:#ffffff;
  --ink:#1b2430;
  --muted:#607089;
  --line:#e7eef8;
  --shadow:0 14px 34px rgba(8,62,124,.12);
  --radius:22px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 5%,rgba(247,189,43,.22),transparent 28rem),
    radial-gradient(circle at 88% 0,rgba(11,101,194,.16),transparent 26rem),
    linear-gradient(180deg,var(--cream) 0,var(--cream-2) 100%);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.5;
}
a{color:var(--blue-dark);}
h1,h2,h3{line-height:1.08;}
h1,h2{font-family:Georgia,"Times New Roman",serif;color:var(--blue-dark);}
img{max-width:100%;}

.siteTop{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:22px;
  padding:14px clamp(18px,4vw,44px);
  background:rgba(8,62,124,.94);
  color:#fff;
  border-bottom:4px solid var(--gold);
  box-shadow:0 10px 30px rgba(5,43,87,.18);
  backdrop-filter:blur(14px);
}
.siteBrand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  font:800 clamp(22px,2.3vw,31px)/1 Georgia,"Times New Roman",serif;
  letter-spacing:-.02em;
}
.siteBrand span:last-child{color:var(--gold);}
.siteBrandIcon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:16px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.25);
  font-family:system-ui;
  font-size:24px;
}
.siteNav{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.siteNav a,
.siteNav button{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  white-space:nowrap;
}
.siteNav a:hover,.siteNav a:focus{background:rgba(255,255,255,.13);outline:none;}
.siteNav .navCheckout{color:#231700;}

.wrap{max-width:1180px;margin:0 auto;padding:42px clamp(18px,4vw,30px);}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:12px 19px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,#ffd76a,var(--gold));
  color:#231700;
  font-weight:950;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 9px 20px rgba(152,108,0,.16);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.btn:hover,.btn:focus{transform:translateY(-1px);box-shadow:0 12px 24px rgba(152,108,0,.22);outline:none;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
.btnLarge{min-height:54px;padding:15px 24px;font-size:17px;}
.secondary{background:#eef4ff;color:var(--blue-dark);box-shadow:none;}
.ghostBtn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none;}
.wide{width:100%;text-align:center;}
.small{font-size:13px;color:var(--muted);}
.kicker{margin:0 0 10px;color:var(--gold-dark);font-size:13px;font-weight:950;letter-spacing:.13em;text-transform:uppercase;}

.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(62px,8vw,110px) clamp(18px,7vw,92px);
}
.premiumHero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:clamp(28px,5vw,58px);
  align-items:center;
  background:
    linear-gradient(135deg,rgba(8,62,124,.98),rgba(11,101,194,.86)),
    repeating-linear-gradient(45deg,#fff 0 26px,#e7f1ff 26px 52px);
  color:#fff;
  isolation:isolate;
}
.premiumHero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(247,189,43,.32),transparent 18rem),
    radial-gradient(circle at 84% 15%,rgba(255,255,255,.18),transparent 15rem),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:auto,auto,56px 56px,56px 56px;
  z-index:-1;
}
.heroContent{max-width:760px;}
.heroContent .kicker{color:#ffe6a1;}
.hero h1{
  margin:0;
  max-width:820px;
  color:#fff;
  font-size:clamp(48px,7vw,90px);
  letter-spacing:-.05em;
  text-shadow:0 4px 20px rgba(0,0,0,.2);
}
.heroLead{max-width:660px;margin:20px 0 0;color:#edf6ff;font-size:clamp(18px,2vw,23px);}
.heroMeta{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0;}
.heroMeta span,.miniBadges span,.status{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:#edf1f6;
  color:#314257;
  font-size:13px;
  font-weight:950;
}
.heroMeta span{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);color:#fff;}
.heroButtons{display:flex;gap:12px;flex-wrap:wrap;}
.heroShowpiece{
  position:relative;
  padding:30px;
  border-radius:30px;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  box-shadow:0 24px 58px rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.7);
}
.heroShowpiece::before{
  content:'';
  position:absolute;
  inset:16px;
  border:2px dashed rgba(247,189,43,.7);
  border-radius:22px;
  pointer-events:none;
}
.heroShowpiece h2{margin:8px 0 8px;font-size:34px;}
.heroShowpiece p{color:#43546a;font-weight:700;}
.heroShowpiece ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;}
.heroShowpiece li{padding:11px 12px;border-radius:14px;background:#f5f9ff;font-weight:900;color:var(--blue-dark);}
.steinBadge{width:76px;height:76px;display:grid;place-items:center;border-radius:24px;background:var(--gold);font-size:42px;box-shadow:0 12px 28px rgba(152,108,0,.22);}

.sectionIntro{padding-top:54px;}
.sectionHeading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:20px;}
.sectionHeading h2{margin:0;font-size:clamp(34px,4vw,52px);letter-spacing:-.03em;}
.sectionHeading p{max-width:680px;margin:10px 0 0;color:#43546a;font-size:18px;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(241,221,172,.9);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}
.card h2,.card h3{margin-top:0;color:var(--blue-dark);}
.ticketShowcase{display:grid;gap:18px;}
.showcaseTicket{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:22px;
  align-items:stretch;
  padding:18px;
  border-radius:26px;
  background:#fff;
  border:1px solid #f1ddac;
  box-shadow:var(--shadow);
}
.vipShowcaseTicket{border-color:rgba(247,189,43,.9);background:linear-gradient(90deg,#fff,#fff8df);}
.ticketStub{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:160px;
  padding:18px;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(160deg,var(--blue-dark),var(--blue));
  overflow:hidden;
}
.ticketStub::after{content:'🍺';position:absolute;right:-8px;bottom:-20px;font-size:86px;opacity:.16;}
.ticketStub span{font-weight:950;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:#ffe6a1;}
.ticketStub strong{font-size:28px;line-height:1;}
.showcaseTicket h3{margin:2px 0 8px;font-size:28px;color:var(--blue-dark);}
.showcaseTicket p{margin:8px 0;color:#42536a;}
.miniBadges{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0;}
.miniBadges span{background:#eef4ff;color:var(--blue-dark);}

.premiumBand{
  margin:34px 0;
  padding:56px 0;
  background:
    linear-gradient(135deg,rgba(8,62,124,.96),rgba(11,101,194,.9)),
    repeating-linear-gradient(45deg,#fff 0 20px,#e7f1ff 20px 40px);
  color:#fff;
}
.premiumBand .kicker{color:#ffe6a1;}
.expectGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.expectGrid article{padding:22px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);}
.expectGrid span{font-size:34px;}
.expectGrid h3{margin:12px 0 8px;color:#fff;font-size:22px;}
.expectGrid p{margin:0;color:#eef7ff;}
.splitFeature{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch;}
.featureCard{min-height:320px;background:linear-gradient(135deg,#fff,#fff8df);}
.featureCard h2{font-size:clamp(34px,4vw,52px);margin:0 0 12px;}
.featureCard p{max-width:680px;color:#43546a;font-size:18px;}
.stepsCard ol{margin:0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:steps;}
.stepsCard li{counter-increment:steps;display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:13px;border-radius:16px;background:#f5f9ff;}
.stepsCard li::before{content:counter(steps);display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:var(--gold);color:#231700;font-weight:950;}
.stepsCard strong,.stepsCard span{display:block;}
.stepsCard strong{color:var(--blue-dark);}
.stepsCard span{color:var(--muted);}

.pageBanner{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:#fff;}
.pageBanner h1{margin:0;color:#fff;font-size:clamp(42px,6vw,72px);}
.pageBanner p:not(.kicker){max-width:720px;color:#eaf4ff;font-size:19px;}
.ticketGrid{align-items:stretch;}
.ticketCard{display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;}
.ticketCard::after{content:'';position:absolute;right:-70px;top:-70px;width:150px;height:150px;border-radius:50%;background:rgba(247,189,43,.18);pointer-events:none;}
.vipTicketCard{border-color:rgba(247,189,43,.9);box-shadow:0 16px 40px rgba(152,108,0,.14);}
.ticketCardTop{position:relative;z-index:1;}
.ticketTypePill{display:inline-flex;margin-bottom:12px;padding:6px 10px;border-radius:999px;background:#eef4ff;color:var(--blue-dark);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;}
.ticketCard h2{font-size:30px;margin-bottom:8px;}
.ticketCard h3{margin:0;font-size:32px;}
.ticketCardFoot{margin-top:auto;padding-top:12px;border-top:1px solid #eef1f5;}
.emptyState{text-align:center;}

.drawer{
  position:fixed;
  right:-680px;
  top:0;
  z-index:60;
  width:640px;
  max-width:94vw;
  height:100%;
  overflow:auto;
  padding:22px;
  background:#fff;
  box-shadow:0 0 48px rgba(0,0,0,.28);
  transition:right .25s ease;
}
.drawer.open{right:0;}
.drawer .x{float:right;border:0;border-radius:12px;background:#f1f4f8;padding:10px 12px;font-weight:950;cursor:pointer;}
.drawer h2{margin-top:8px;}
.basketLine{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid #eef1f5;padding:12px 0;}
.basketLine button{border:0;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:800;}
.field{display:grid;margin:11px 0;}
.field label{font-weight:900;color:var(--blue-dark);}
.field input,.field select,textarea{
  width:100%;
  margin-top:6px;
  padding:11px 12px;
  border:1px solid #cfd9e7;
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  font:inherit;
}
textarea{min-height:130px;resize:vertical;}
.notice{margin:14px 0;padding:13px;border-radius:14px;background:#fff4cc;border:1px solid #f3d77d;color:#5a4100;}
.error{margin:14px 0;padding:13px;border-radius:14px;background:#ffe8e8;color:#8a1010;border:1px solid #ffbaba;}
.checkoutBox{margin-top:18px;padding-top:18px;border-top:4px solid var(--blue);}
.checkoutBox fieldset{margin:15px 0;padding:14px;border:2px dashed #d7e7ff;border-radius:16px;}
.checkoutBox legend{padding:0 8px;font-weight:950;color:var(--blue-dark);}
.check{display:block;margin:14px 0;font-weight:800;}
.guestBlock{margin:10px 0;padding:13px;border:1px solid #d7e7ff;border-radius:14px;background:#f7fbff;}
.guestBlock h4{margin:0 0 8px;color:var(--blue-dark);}
.vipFieldset{border-color:var(--gold)!important;background:#fffdf4;}
.thanks h1{color:var(--blue-dark);}
footer{padding:36px 18px;text-align:center;color:var(--muted);}

/* Admin/shared layout helpers */
.admin table{width:100%;border-collapse:collapse;background:#fff;}
.admin th,.admin td{padding:10px;border-bottom:1px solid #ddd;text-align:left;}
.admin nav a{margin-right:0;}
.adminTabs,.buttonTabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 20px;}
.adminTabs a,.tabButton{padding:10px 14px;border-radius:999px;background:#fff;color:var(--blue-dark);text-decoration:none;border:2px solid #d7e7ff;font-weight:800;}
.adminTabs a.active,.tabButton.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.adminForm h2{margin-top:0;}
.helpText{font-size:13px;color:var(--muted);margin:5px 0 0;}
.formGrid{display:grid;gap:14px 18px;align-items:end;}
.formGrid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.formGrid.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.formGrid.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.formGrid.compact .field{margin:0;}
.span2{grid-column:span 2;}
.switchLine{display:block;margin:16px 0;font-weight:900;}
.actionCell{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.actionCell form{display:inline;}
.miniBtn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 10px;border:0;border-radius:10px;background:#eef4ff;color:var(--blue-dark);font-weight:900;text-decoration:none;cursor:pointer;}
.miniBtn.danger,.danger{background:#ffe4e4;color:#8a1010;}
.checkField{display:flex;align-items:center;min-height:70px;padding:10px 12px;border:1px solid #d7e7ff;border-radius:12px;background:#f9fcff;}
.checkField label{display:flex;gap:8px;align-items:center;}
.sectionTitle{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:20px 0 10px;}
.emailLayout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start;}
.templateList{padding:12px;}
.templateItem{display:block;margin:4px 0;padding:12px;border-radius:12px;color:var(--blue-dark);font-weight:900;text-decoration:none;}
.templateItem:hover,.templateItem.active{background:#eef4ff;}
.placeholderBox{margin:14px 0;padding:13px;border-radius:14px;background:#f7fbff;border:1px solid #d7e7ff;color:#42536a;}
.placeholderBox code{display:inline-block;margin:3px;padding:3px 6px;border-radius:7px;background:#fff;border:1px solid #e3eaf5;}
.designerLayout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:start;}
.ticketPreviewPanel{position:sticky;top:90px;}
.previewTicket{background:#fff;border-radius:18px;overflow:hidden;border:3px solid var(--ticketPrimary);box-shadow:var(--shadow);}
.previewTicketHeader{background:var(--ticketPrimary);color:#fff;padding:20px;border-bottom:8px solid var(--ticketAccent);}
.previewTicketHeader img{max-width:180px;max-height:90px;background:#fff;border-radius:10px;padding:8px;margin-bottom:12px;}
.previewTicketHeader h2{margin:0;color:#fff;}
.previewTicketBody{padding:20px;}
.fakeQr{width:110px;height:110px;display:flex;align-items:center;justify-content:center;border:4px solid var(--ticketPrimary);background:repeating-linear-gradient(45deg,#fff,#fff 8px,#eee 8px,#eee 16px);font-weight:950;color:var(--ticketPrimary);margin-top:14px;}
.previewTicket p{padding:0 20px;}
.previewTicketFooter{background:var(--cream);border-top:1px solid #f2dfaf;padding:16px 20px;font-size:13px;}
.uploadField input[type=file]{padding:10px;background:#fff;}
.logoPreview{max-width:190px;max-height:90px;padding:8px;border-radius:12px;background:#fff;border:1px solid #e3eaf5;}
.tableFrame{overflow-x:auto;}

@media(max-width:1020px){
  .premiumHero{grid-template-columns:1fr;}
  .expectGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .splitFeature{grid-template-columns:1fr;}
  .designerLayout,.emailLayout{grid-template-columns:1fr;}
  .ticketPreviewPanel{position:static;}
}
@media(max-width:760px){
  .siteTop{position:static;align-items:flex-start;flex-direction:column;gap:12px;padding:13px 14px;}
  .siteNav{width:100%;margin-left:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .siteNav a,.siteNav button{width:100%;background:rgba(255,255,255,.09);}
  .siteNav .navCheckout{background:var(--gold);}
  .hero{padding:48px 18px;}
  .heroShowpiece{padding:24px;}
  .sectionHeading{display:block;}
  .sectionHeading .btn{margin-top:16px;}
  .showcaseTicket{grid-template-columns:1fr;}
  .ticketStub{min-height:120px;}
  .expectGrid{grid-template-columns:1fr;}
  .formGrid.two,.formGrid.three,.formGrid.four{grid-template-columns:1fr;}
  .span2{grid-column:auto;}
  .drawer{right:-100vw;width:calc(100vw - 24px);padding:18px;}
  .wrap{padding:30px 16px;}
}

/* Classic premium homepage — less modern, more warm Oktoberfest hall */
.classicHero{
  padding:0;
  background:
    linear-gradient(180deg,rgba(255,248,232,.96),rgba(247,240,223,.96)),
    repeating-linear-gradient(45deg,#fff 0 28px,#e7f1ff 28px 56px);
  border-bottom:1px solid #ecd9a6;
}
.classicHeroInner{
  max-width:1240px;
  margin:0 auto;
  padding:clamp(54px,7vw,88px) clamp(18px,5vw,34px);
  display:grid;
  grid-template-columns:minmax(0,1.12fr) 360px;
  gap:clamp(26px,5vw,56px);
  align-items:center;
}
.classicHero .kicker{color:var(--gold-dark);}
.classicHero h1{
  margin:0;
  max-width:820px;
  color:var(--blue-dark);
  font-size:clamp(46px,6.5vw,82px);
  letter-spacing:-.045em;
  text-shadow:none;
}
.classicHero .heroLead{
  max-width:720px;
  margin:20px 0 0;
  color:#354861;
  font-size:clamp(18px,2vw,22px);
}
.classicHero .heroMeta span{
  background:#fff;
  border:1px solid #f1ddac;
  color:var(--blue-dark);
  box-shadow:0 6px 18px rgba(8,62,124,.06);
}
.classicHero .secondary{
  background:#fff;
  border:1px solid #d7e7ff;
  color:var(--blue-dark);
}
.classicHeroCard{
  position:relative;
  padding:30px;
  border-radius:28px;
  background:#fffdf5;
  border:2px solid #f1ddac;
  box-shadow:0 16px 38px rgba(8,62,124,.11);
}
.classicHeroCard::before{
  content:'';
  position:absolute;
  inset:14px;
  border:2px dashed rgba(247,189,43,.72);
  border-radius:20px;
  pointer-events:none;
}
.classicHeroCard h2{
  position:relative;
  margin:12px 0 10px;
  color:var(--blue-dark);
  font-size:32px;
}
.classicHeroCard p{
  position:relative;
  margin:0;
  color:#43546a;
  font-weight:750;
}
.classicBeerIcon{
  position:relative;
  display:grid;
  place-items:center;
  width:82px;
  height:82px;
  border-radius:26px;
  background:var(--gold);
  border:4px solid #fff;
  box-shadow:0 12px 28px rgba(152,108,0,.2);
  font-size:44px;
}
.expectBand{
  margin:34px 0;
  padding:46px 0;
  background:linear-gradient(180deg,#fffdf5,#fff6d9);
  border-top:1px solid #f1ddac;
  border-bottom:1px solid #f1ddac;
}
.expectBand .expectGrid article{
  background:#fff;
  border:1px solid #f1ddac;
  box-shadow:0 10px 24px rgba(8,62,124,.06);
  backdrop-filter:none;
}
.expectBand .expectGrid h3{color:var(--blue-dark);}
.expectBand .expectGrid p{color:#43546a;}
.homepageEditor textarea{min-height:96px;}
@media(max-width:1020px){
  .classicHeroInner{grid-template-columns:1fr;}
  .classicHeroCard{max-width:620px;}
}
@media(max-width:760px){
  .classicHeroInner{padding:44px 16px;}
  .classicHero h1{font-size:clamp(40px,13vw,58px);}
}

/* Red-and-gold VIP treatment */
.vipShowcaseTicket,
.vipTicketCard{
  position:relative;
  border:2px solid #f7bd2b;
  background:
    linear-gradient(135deg,rgba(143,18,18,.98),rgba(82,7,7,.98));
  color:#fff8e8;
  box-shadow:0 20px 48px rgba(82,7,7,.22),0 0 0 5px rgba(247,189,43,.18);
}
.vipShowcaseTicket::before,
.vipTicketCard::before{
  content:'VIP';
  position:absolute;
  right:18px;
  top:16px;
  z-index:2;
  padding:7px 12px;
  border-radius:999px;
  background:#f7bd2b;
  color:#4b0505;
  font-weight:950;
  letter-spacing:.12em;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}
.vipShowcaseTicket h3,
.vipShowcaseTicket p,
.vipTicketCard h2,
.vipTicketCard h3,
.vipTicketCard p,
.vipTicketCard .small{color:#fff8e8;}
.vipShowcaseTicket .ticketStub{background:linear-gradient(160deg,#f7bd2b,#c99510);color:#4b0505;}
.vipShowcaseTicket .ticketStub span{color:#4b0505;}
.vipShowcaseTicket .miniBadges span,
.vipTicketCard .miniBadges span,
.vipTicketCard .ticketTypePill{background:#f7bd2b;color:#4b0505;border:1px solid rgba(255,255,255,.24);}
.vipTicketCard .ticketCardFoot{border-color:rgba(247,189,43,.35);}
.vipTicketCard .btn,
.vipShowcaseTicket .btn{background:linear-gradient(180deg,#ffe28a,#f7bd2b);color:#3b0505;}
.vipTicketCard::after{background:rgba(247,189,43,.22);}

.vipHomeSection{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:22px;
  align-items:stretch;
}
.vipHomeHeader{
  position:relative;
  padding:32px;
  border-radius:28px;
  background:linear-gradient(135deg,#8f1212,#520707);
  color:#fff8e8;
  border:2px solid #f7bd2b;
  box-shadow:0 20px 48px rgba(82,7,7,.18),0 0 0 5px rgba(247,189,43,.16);
  overflow:hidden;
}
.vipHomeHeader::after{content:'VIP';position:absolute;right:-18px;bottom:-30px;font-size:120px;font-weight:950;color:rgba(247,189,43,.11);letter-spacing:-.08em;}
.vipHomeHeader .kicker{color:#ffe28a;}
.vipHomeHeader h2{position:relative;margin:0 0 12px;color:#fff;font-size:clamp(36px,5vw,60px);}
.vipHomeHeader p{position:relative;max-width:640px;color:#fff8e8;font-size:18px;}
.vipHomeHeader .btn{position:relative;background:linear-gradient(180deg,#ffe28a,#f7bd2b);color:#3b0505;}
.vipHomeItems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.vipHomeItems article{padding:22px;border-radius:22px;background:#fff;border:1px solid #f1ddac;box-shadow:0 10px 26px rgba(82,7,7,.08);}
.vipHomeItems span{font-size:32px;}
.vipHomeItems h3{margin:10px 0 8px;color:#8f1212;font-size:22px;}
.vipHomeItems p{margin:0;color:#43546a;}
.entryStepsSection{padding-top:0;}
.entryStepsSection .stepsCard{max-width:820px;margin:0 auto;}

/* Designer/PDF preview. This mirrors the generated PDF structure. */
.designerTicketPaper{background:#fff;border-radius:20px;overflow:hidden;border:3px solid var(--ticketPrimary);box-shadow:var(--shadow);}
.designerTicketVip{border-color:#f7bd2b;background:#fffdf6;}
.designerTicketHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px;background:var(--ticketPrimary);border-bottom:10px solid var(--ticketAccent);color:#fff;}
.designerTicketVip .designerTicketHeader{background:#8f1212;border-bottom-color:#f7bd2b;}
.designerTicketHeader img{max-width:180px;max-height:82px;padding:8px;border-radius:12px;background:#fff;}
.designerTicketBrand{display:grid;place-items:center;width:78px;height:78px;border-radius:22px;background:var(--ticketAccent);font-size:42px;}
.designerTicketVipBadge{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:#f7bd2b;color:#4b0505;font-weight:950;letter-spacing:.13em;}
.designerTicketTitle{padding:22px 22px 8px;}
.designerTicketTitle p{margin:0 0 6px;padding:0;color:#607089;font-weight:950;text-transform:uppercase;letter-spacing:.1em;font-size:12px;}
.designerTicketTitle h2{margin:0;color:var(--ticketPrimary);font-size:30px;}
.designerTicketVip .designerTicketTitle h2{color:#8f1212;}
.designerTicketBody{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:18px;padding:12px 22px 22px;align-items:start;}
.designerTicketText{white-space:normal;color:#1b2430;line-height:1.55;font-weight:650;}
.designerTicketQr{display:grid;place-items:center;min-height:128px;border:4px solid var(--ticketPrimary);background:repeating-linear-gradient(45deg,#fff,#fff 8px,#eee 8px,#eee 16px);color:var(--ticketPrimary);font-weight:950;}
.designerTicketVip .designerTicketQr{border-color:#8f1212;color:#8f1212;}
.designerTicketQr span{font-size:32px;}
.designerTicketQr em{font-style:normal;font-size:10px;color:#314257;text-align:center;padding:0 6px;}
.designerTicketLink{margin:0;padding:0 22px 18px!important;font-weight:900;}
.designerTicketFooter{background:#fff8e8;border-top:1px solid #f1ddac;padding:16px 22px;color:#43546a;font-size:13px;font-weight:750;}
@media(max-width:1020px){.vipHomeSection{grid-template-columns:1fr;}.vipHomeHeader{min-height:auto;}}
@media(max-width:760px){.vipHomeItems{grid-template-columns:1fr;}.designerTicketBody{grid-template-columns:1fr;}.designerTicketQr{width:142px;}}

/* Final polish: clean centred ticket PDF preview and global footer socials */
.siteFooter{
  margin-top:54px;
  padding:30px 18px;
  background:#092d56;
  color:#fff8e8;
  text-align:center;
}
.footerInner{display:grid;gap:12px;justify-items:center;max-width:1100px;margin:0 auto;font-weight:800;}
.footerSocials{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;}
.footerSocials a{color:#ffe28a;text-decoration:none;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,226,138,.35);background:rgba(255,255,255,.06);}
.footerSocials a:hover,.footerSocials a:focus{background:#ffe28a;color:#092d56;}

.designerTicketCanvas{
  display:grid;
  place-items:center;
  min-height:740px;
  padding:34px;
  border-radius:24px;
  background:#fff;
  border:1px solid #e8edf4;
  box-shadow:0 18px 44px rgba(8,62,124,.08);
}
.designerTicketPaper{
  width:min(100%,520px);
  min-height:690px;
  background:#fff!important;
  border-radius:0;
  overflow:hidden;
  border:3px solid var(--ticketPrimary)!important;
  box-shadow:0 22px 58px rgba(19,37,64,.12);
  font-family:Arial,Helvetica,sans-serif;
  color:#1b2430;
}
.designerTicketVip{border-color:#f7bd2b!important;box-shadow:0 24px 62px rgba(143,18,18,.18),0 0 0 5px rgba(247,189,43,.12);}
.designerTicketLogoRow{display:flex;align-items:center;padding:34px 34px 18px;border-top:12px solid var(--ticketAccent);}
.designerLogoLeft{justify-content:flex-start;}.designerLogoCenter{justify-content:center;}.designerLogoRight{justify-content:flex-end;}
.designerTicketLogoRow img{display:block;width:var(--ticketLogoSize);max-width:100%;max-height:130px;object-fit:contain;}
.designerTicketBrand{display:grid;place-items:center;width:104px;height:104px;border-radius:28px;background:var(--ticketAccent);font-size:56px;margin:0 auto;}
.designerTicketVipRibbon{margin:0 34px 8px;padding:10px 14px;text-align:center;background:#8f1212;color:#ffe28a;font-weight:950;letter-spacing:.16em;border:2px solid #f7bd2b;}
.designerTicketTitle{text-align:center;padding:12px 34px 8px;}
.designerTicketTitle p{margin:0 0 8px;color:#607089;font-weight:950;text-transform:uppercase;letter-spacing:.12em;font-size:12px;}
.designerTicketTitle h2{margin:0;color:var(--ticketPrimary);font-size:30px;line-height:1.08;font-weight:950;}
.designerTicketVip .designerTicketTitle h2{color:#8f1212;}
.designerTicketBody{display:grid;grid-template-columns:minmax(0,1fr) 138px;gap:22px;padding:26px 34px 20px;align-items:start;}
.designerTicketText{white-space:normal;color:#1b2430;line-height:1.58;font-size:15px;font-weight:650;}
.designerTicketQr{display:grid;place-items:center;min-height:138px;border:3px solid var(--ticketPrimary);background:#fff;color:var(--ticketPrimary);font-weight:950;}
.designerTicketVip .designerTicketQr{border-color:#8f1212;color:#8f1212;}
.designerTicketQr span{font-size:34px;}.designerTicketQr em{font-style:normal;font-size:10px;color:#314257;text-align:center;padding:0 6px;}
.designerTicketLink{margin:0!important;padding:0 34px 22px!important;text-align:center;font-weight:900;}
.designerTicketLink a{color:var(--ticketPrimary);}
.designerTicketFooter{margin:8px 34px 30px;padding:18px 0 0;background:#fff!important;border-top:1px solid #ece7dc;text-align:center;color:#43546a;font-size:13px;font-weight:750;}
.designerTicketSocials{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;}
.designerTicketSocials a{font-size:12px;text-decoration:none;color:var(--ticketPrimary);font-weight:950;border-bottom:1px solid currentColor;}
@media(max-width:760px){.designerTicketCanvas{padding:14px;min-height:auto}.designerTicketBody{grid-template-columns:1fr;}.designerTicketQr{width:150px;}.designerTicketTitle h2{font-size:26px;}}

/* Tickets page ordering/state */
.ticketCard.ticketUnavailable,
.showcaseTicket.ticketUnavailable{
  filter:grayscale(.35);
  opacity:.68;
  background:#f0f2f5!important;
  color:#5a6677!important;
  border-color:#d8dee8!important;
  box-shadow:none!important;
}
.ticketCard.ticketUnavailable::before,
.showcaseTicket.ticketUnavailable::before{display:none!important;}
.ticketCard.ticketUnavailable h2,
.ticketCard.ticketUnavailable h3,
.ticketCard.ticketUnavailable p,
.ticketCard.ticketUnavailable .small,
.showcaseTicket.ticketUnavailable h3,
.showcaseTicket.ticketUnavailable p{color:#5a6677!important;}
.ticketUnavailable .ticketStub,
.ticketUnavailable .ticketTypePill,
.ticketUnavailable .miniBadges span{background:#d8dee8!important;color:#4e5968!important;border-color:#cbd3df!important;}
.ticketUnavailable .btn{background:#d8dee8!important;color:#596578!important;box-shadow:none!important;cursor:not-allowed;}
.ticketStatusNote{margin:0;color:#8f1212;font-weight:950;}
.vipTicketCard .ticketStatusNote{color:#ffe28a;}
.ticketUnavailable .ticketStatusNote{color:#596578!important;}

/* ==========================================================================
   STELLAR OVERHAUL LAYER — premium Worthing-Oktoberfest festival design.
   Appended as a cascade layer so every earlier rule (incl. admin-shared
   helpers) keeps working; these refinements simply win where they overlap.
   ========================================================================== */

:root{
  --blue:#0b65c2;
  --blue-dark:#083e7c;
  --blue-deep:#052a55;
  --blue-soft:#e7f1ff;
  --gold:#f2b722;
  --gold-bright:#ffd76a;
  --gold-dark:#8f6a00;
  --festRed:#8f1212;
  --festRed-deep:#520707;
  --cream:#fdf6e6;
  --cream-2:#f6edd8;
  --ink:#17202c;
  --muted:#5c6b83;
  --line:#eadfc2;
  --shadow:0 18px 44px rgba(6,42,85,.12);
  --shadow-soft:0 10px 26px rgba(6,42,85,.08);
  --radius:22px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  /* Bavarian rauten (diamond) lattice used across festival surfaces */
  --rauten-light:
    repeating-linear-gradient(45deg,transparent 0 26px,rgba(11,101,194,.05) 26px 52px),
    repeating-linear-gradient(-45deg,transparent 0 26px,rgba(11,101,194,.05) 26px 52px);
  --rauten-dark:
    repeating-linear-gradient(45deg,transparent 0 26px,rgba(255,255,255,.045) 26px 52px),
    repeating-linear-gradient(-45deg,transparent 0 26px,rgba(255,255,255,.045) 26px 52px);
}

body{
  font-family:var(--font-body);
  line-height:1.6;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 4%,rgba(242,183,34,.16),transparent 30rem),
    radial-gradient(circle at 92% 2%,rgba(11,101,194,.12),transparent 28rem),
    linear-gradient(180deg,var(--cream) 0,var(--cream-2) 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;}
h3{font-family:var(--font-body);}
::selection{background:var(--gold);color:#231700;}

a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
  border-radius:6px;
}

/* --- Header: deep festival blue with a gold festival trim ------------------ */
.siteTop{
  gap:24px;
  padding:14px clamp(18px,4vw,48px);
  background:linear-gradient(180deg,rgba(5,42,85,.97),rgba(8,62,124,.95));
  border-bottom:0;
  box-shadow:0 12px 34px rgba(4,28,58,.28);
  backdrop-filter:blur(16px) saturate(1.2);
}
.siteTop::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:6px;
  background:
    linear-gradient(90deg,var(--gold) 0,var(--gold-bright) 50%,var(--gold) 100%);
  box-shadow:0 3px 10px rgba(143,106,0,.35);
}
.siteBrand{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.015em;
}
.siteBrandIcon{
  background:linear-gradient(160deg,rgba(255,215,106,.28),rgba(255,255,255,.08));
  border:1px solid rgba(255,215,106,.4);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.siteNav a{font-weight:700;letter-spacing:.01em;transition:background .18s ease,transform .18s ease;}
.siteNav a:hover,.siteNav a:focus{background:rgba(255,215,106,.16);}
.siteNav .navCheckout{box-shadow:0 8px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.5);}

/* --- Festival bunting under the header ------------------------------------ */
.bunting{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
  gap:clamp(10px,2vw,26px);
  padding:0 10px;
  height:26px;
  overflow:hidden;
  background:transparent;
  pointer-events:none;
}
.bunting::before{
  content:'';
  position:absolute;
  top:3px;left:-20px;right:-20px;
  height:2px;
  background:rgba(8,62,124,.35);
  border-radius:2px;
}
.bunting span{
  width:clamp(18px,2.4vw,28px);
  height:clamp(16px,2.2vw,24px);
  margin-top:4px;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:var(--blue);
  box-shadow:0 4px 8px rgba(6,42,85,.15);
  transform-origin:top center;
  animation:buntingSway 5.5s ease-in-out infinite;
}
.bunting span:nth-child(3n+1){background:var(--gold);}
.bunting span:nth-child(3n+2){background:#fff;}
.bunting span:nth-child(3n){background:var(--blue);}
.bunting span:nth-child(2n){animation-delay:-2.6s;}
.bunting span:nth-child(3n){animation-delay:-1.2s;}
@keyframes buntingSway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@media (prefers-reduced-motion:reduce){.bunting span{animation:none;}}

/* --- Buttons: gilded, tactile --------------------------------------------- */
.btn{
  position:relative;
  border-radius:14px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 62%,#e2a80f);
  box-shadow:0 10px 22px rgba(143,106,0,.24),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(120,84,0,.22);
  font-weight:800;
  letter-spacing:.01em;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.btn:hover,.btn:focus{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(143,106,0,.3),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(120,84,0,.22);
  filter:saturate(1.06);
}
.btn:active{transform:translateY(0);box-shadow:0 6px 14px rgba(143,106,0,.24),inset 0 2px 4px rgba(120,84,0,.25);}
.btn:disabled{transform:none;filter:grayscale(.35);}
.secondary{
  background:#fff;
  color:var(--blue-dark);
  border:1.5px solid #d3e2f6;
  box-shadow:0 6px 16px rgba(6,42,85,.08);
}
.secondary:hover,.secondary:focus{box-shadow:0 12px 24px rgba(6,42,85,.13);border-color:var(--blue);}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--gold-dark);
  font-weight:800;
  letter-spacing:.16em;
}
.kicker::before{
  content:'';
  width:26px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  border-radius:2px;
}

/* --- Hero: warm hall, Bavarian lattice, gilded flourish -------------------- */
.classicHero{
  background:
    var(--rauten-light),
    radial-gradient(circle at 82% 8%,rgba(242,183,34,.14),transparent 24rem),
    linear-gradient(180deg,#fffdf6 0,var(--cream) 58%,var(--cream-2) 100%);
  border-bottom:1px solid var(--line);
}
.classicHeroInner{
  padding:clamp(58px,7vw,104px) clamp(18px,5vw,34px);
  grid-template-columns:minmax(0,1.14fr) 380px;
}
.classicHero h1{
  font-weight:900;
  font-size:clamp(48px,6.8vw,92px);
  letter-spacing:-.035em;
  line-height:1.02;
  color:var(--blue-deep);
}
.classicHero .heroLead{color:#3a4d68;font-weight:500;}
.classicHero .heroMeta{margin:28px 0;}
.classicHero .heroMeta span{
  min-height:34px;
  padding:6px 14px;
  font-weight:700;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(6,42,85,.07);
}
.classicHeroCard{
  background:linear-gradient(180deg,#fffef9,#fdf6e4);
  border:1.5px solid #eeda9e;
  border-radius:26px;
  box-shadow:0 26px 56px rgba(6,42,85,.14),0 0 0 6px rgba(242,183,34,.1);
  animation:heroCardFloat 7s ease-in-out infinite;
}
@keyframes heroCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.classicHeroCard{animation:none;}}
.classicHeroCard::before{border-color:rgba(226,168,15,.55);}
.classicHeroCard h2{font-size:30px;letter-spacing:-.02em;color:var(--blue-deep);}
.classicBeerIcon{
  background:radial-gradient(circle at 30% 25%,var(--gold-bright),var(--gold) 70%);
  border:4px solid #fff;
  box-shadow:0 14px 30px rgba(143,106,0,.28),inset 0 2px 0 rgba(255,255,255,.5);
}

/* --- Section headings ------------------------------------------------------ */
.sectionHeading h2{color:var(--blue-deep);font-weight:900;letter-spacing:-.028em;}
.sectionHeading p{color:#43546a;}

/* --- Compact homepage ticket grid ------------------------------------------ */
.homeTicketsSection{padding-top:58px;}
.ticketMiniGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:18px;
  align-items:stretch;
}
.ticketMini{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px 20px 18px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.ticketMini::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:5px;
  background:linear-gradient(90deg,var(--blue-dark),var(--blue) 55%,var(--gold));
}
.ticketMini:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e0cf9b;}
.ticketMiniTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:2px;
}
.ticketMiniPill{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border-radius:999px;
  background:var(--blue-soft);
  color:var(--blue-dark);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.ticketMiniPrice{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:800;
  color:var(--blue-deep);
  letter-spacing:-.02em;
}
.ticketMini h3{
  margin:2px 0 0;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--blue-deep);
  line-height:1.12;
}
.ticketMiniWhen{margin:2px 0 0;font-size:13.5px;font-weight:700;color:var(--gold-dark);}
.ticketMiniDesc{margin:4px 0 0;font-size:14px;color:#4b5b73;line-height:1.5;}
.ticketMini .miniBadges{margin:10px 0 4px;}
.ticketMini .miniBadges span{font-size:12px;}
.ticketMiniActions{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:16px;
}
/* Perforated ticket tear-line with punched notches */
.ticketMiniActions::before{
  content:'';
  position:absolute;
  top:0;left:-20px;right:-20px;
  border-top:2px dashed #e4d7b2;
}
.ticketMiniActions::after{
  content:'';
  position:absolute;
  top:-9px;
  left:-29px;
  right:-29px;
  height:18px;
  pointer-events:none;
  background:
    radial-gradient(circle at 9px 9px,var(--cream) 8px,transparent 9px) left center/18px 18px no-repeat,
    radial-gradient(circle at 9px 9px,var(--cream) 8px,transparent 9px) right center/18px 18px no-repeat;
}
.ticketMini .btn{min-height:42px;padding:9px 16px;font-size:14.5px;}
.ticketMiniLink{
  font-size:13.5px;
  font-weight:800;
  color:var(--blue-dark);
  text-decoration:none;
  white-space:nowrap;
  transition:color .16s ease,transform .16s ease;
}
.ticketMiniLink:hover,.ticketMiniLink:focus{color:var(--gold-dark);transform:translateX(2px);}

/* VIP compact card: red & gold showpiece */
.vipTicketMini{
  background:
    var(--rauten-dark),
    linear-gradient(150deg,var(--festRed) 0,var(--festRed-deep) 92%);
  border:1.5px solid rgba(242,183,34,.85);
  box-shadow:0 20px 44px rgba(82,7,7,.28),0 0 0 5px rgba(242,183,34,.14);
}
.vipTicketMini::before{background:linear-gradient(90deg,var(--gold-bright),var(--gold) 55%,#c99510);height:6px;}
.vipTicketMini h3,.vipTicketMini .ticketMiniPrice{color:#fff8e8;}
.vipTicketMini .ticketMiniWhen{color:#ffe28a;}
.vipTicketMini .ticketMiniDesc{color:#ffeccb;}
.vipTicketMini .ticketMiniPill{background:var(--gold);color:#4b0505;}
.vipTicketMini .miniBadges span{background:rgba(242,183,34,.92);color:#4b0505;border:1px solid rgba(255,255,255,.22);}
.vipTicketMini .ticketMiniActions::before{border-top-color:rgba(242,183,34,.4);}
.vipTicketMini .ticketMiniLink{color:#ffe28a;}
.vipTicketMini .ticketMiniLink:hover,.vipTicketMini .ticketMiniLink:focus{color:#fff;}
.vipTicketMini .btn{background:linear-gradient(180deg,#ffe28a,var(--gold) 62%,#d29c0c);color:#3b0505;}
.vipTicketMini .ticketStatusNote{color:#ffe28a;}

/* Unavailable compact cards match the greyed treatment elsewhere */
.ticketMini.ticketUnavailable{
  filter:grayscale(.35);
  opacity:.68;
  background:#f0f2f5!important;
  border-color:#d8dee8!important;
  box-shadow:none!important;
  transform:none!important;
}
.ticketMini.ticketUnavailable::before{background:#cbd3df;}
.ticketMini.ticketUnavailable h3,
.ticketMini.ticketUnavailable .ticketMiniPrice,
.ticketMini.ticketUnavailable .ticketMiniWhen,
.ticketMini.ticketUnavailable .ticketMiniDesc,
.ticketMini.ticketUnavailable .ticketMiniLink{color:#5a6677!important;}
.ticketMini.ticketUnavailable .ticketMiniPill,
.ticketMini.ticketUnavailable .miniBadges span{background:#d8dee8!important;color:#4e5968!important;border-color:#cbd3df!important;}
.ticketMini.ticketUnavailable .btn{background:#d8dee8!important;color:#596578!important;box-shadow:none!important;cursor:not-allowed;}
.ticketMini.ticketUnavailable .ticketStatusNote{color:#596578!important;}

/* --- What to expect band: warm gold hall glow ------------------------------ */
.expectBand{
  margin:44px 0;
  padding:54px 0;
  background:
    var(--rauten-light),
    linear-gradient(180deg,#fffdf5,#fbf0d2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.expectBand .expectGrid article{
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease,box-shadow .2s ease;
}
.expectBand .expectGrid article:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.expectBand .expectGrid span{
  display:inline-grid;
  place-items:center;
  width:58px;height:58px;
  border-radius:18px;
  background:linear-gradient(160deg,var(--blue-soft),#fff);
  border:1px solid #d9e7fa;
  font-size:30px;
  box-shadow:inset 0 1px 0 #fff;
}
.expectBand .expectGrid h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.015em;}

/* --- Videos section -------------------------------------------------------- */
.videoSection{padding-top:16px;}
.videoGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.videoCard{
  margin:0;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease,box-shadow .2s ease;
}
.videoCard:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.videoFrame{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(160deg,var(--blue-deep),var(--blue-dark));
}
.videoFrame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.videoCard figcaption{
  padding:13px 16px;
  font-weight:700;
  font-size:14.5px;
  color:var(--blue-deep);
  border-top:3px solid var(--gold);
  background:#fffdf6;
}
.videoPlaceholder .videoFrame{
  background:
    var(--rauten-dark),
    radial-gradient(circle at 50% 30%,rgba(242,183,34,.2),transparent 14rem),
    linear-gradient(160deg,var(--blue-dark),var(--blue-deep));
}
.videoPlaceholderInner{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:6px;
  text-align:center;
  color:#fff;
  padding:16px;
}
.videoPlaceholderInner strong{font-family:var(--font-display);font-size:18px;letter-spacing:-.01em;}
.videoPlaceholderInner em{font-style:normal;font-size:13px;color:#cfe2fa;font-weight:600;}
.videoPlayGlyph{
  display:grid;
  place-items:center;
  width:58px;height:58px;
  margin-bottom:6px;
  border-radius:50%;
  padding-left:5px;
  background:radial-gradient(circle at 32% 28%,var(--gold-bright),var(--gold) 72%);
  color:#3b2600;
  font-size:20px;
  box-shadow:0 12px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .2s ease;
}
.videoPlaceholder:hover .videoPlayGlyph{transform:scale(1.08);}

/* --- VIP homepage section refinements -------------------------------------- */
.vipHomeHeader{
  background:
    var(--rauten-dark),
    linear-gradient(140deg,var(--festRed) 0,var(--festRed-deep) 88%);
  border:1.5px solid rgba(242,183,34,.85);
  box-shadow:0 24px 54px rgba(82,7,7,.24),0 0 0 6px rgba(242,183,34,.13);
}
.vipHomeHeader h2{font-weight:900;letter-spacing:-.03em;}
.vipHomeItems article{
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease,box-shadow .2s ease;
}
.vipHomeItems article:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(82,7,7,.14);}
.vipHomeItems h3{font-family:var(--font-display);letter-spacing:-.015em;}

/* --- Tickets page banner + cards ------------------------------------------- */
.pageBanner{
  position:relative;
  background:
    var(--rauten-dark),
    radial-gradient(circle at 84% 10%,rgba(242,183,34,.2),transparent 20rem),
    linear-gradient(140deg,var(--blue-deep),var(--blue-dark) 62%,var(--blue));
  border-bottom:5px solid var(--gold);
}
.pageBanner h1{font-weight:900;letter-spacing:-.035em;}
.pageBanner .kicker{color:#ffe28a;}
.pageBanner .kicker::before{background:linear-gradient(90deg,#ffe28a,transparent);}
.ticketCard{transition:transform .2s ease,box-shadow .2s ease;}
.ticketCard:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(6,42,85,.16);}
.ticketCard h2{font-weight:800;letter-spacing:-.02em;}
.ticketCard h3{font-family:var(--font-display);letter-spacing:-.02em;}
.vipTicketCard{
  background:
    var(--rauten-dark),
    linear-gradient(135deg,var(--festRed) 0,var(--festRed-deep) 92%);
}
.vipTicketCard:hover{box-shadow:0 24px 52px rgba(82,7,7,.3),0 0 0 5px rgba(242,183,34,.2);}
.ticketCard.ticketUnavailable:hover,
.showcaseTicket.ticketUnavailable:hover{transform:none;}

/* --- Footer: deep-blue festival close -------------------------------------- */
.siteFooter{
  margin-top:64px;
  padding:38px 18px;
  background:
    var(--rauten-dark),
    linear-gradient(180deg,#0a3463,var(--blue-deep));
  border-top:5px solid var(--gold);
}
.footerInner{font-weight:700;}
.footerSocials a{transition:background .18s ease,color .18s ease,transform .18s ease;}
.footerSocials a:hover,.footerSocials a:focus{transform:translateY(-2px);}

/* --- Basket drawer polish --------------------------------------------------- */
.drawer{border-left:5px solid var(--gold);}
.drawer h2{font-family:var(--font-display);color:var(--blue-deep);letter-spacing:-.02em;}
.field input:focus,.field select:focus,textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(11,101,194,.14);
}

/* --- Scroll reveal (progressive enhancement; visible without JS) ----------- */
body.jsReveal .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
}
body.jsReveal .reveal.inView{opacity:1;transform:none;}
body.jsReveal .revealDelay{transition-delay:.12s;}
@media (prefers-reduced-motion:reduce){
  body.jsReveal .reveal{opacity:1;transform:none;transition:none;}
}

/* --- Responsive refinements ------------------------------------------------- */
@media(max-width:1020px){
  .videoGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .classicHeroInner{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .bunting{height:22px;}
  .videoGrid{grid-template-columns:1fr;}
  .ticketMiniGrid{grid-template-columns:1fr;}
  .ticketMiniActions{flex-wrap:wrap;}
  .siteTop::after{position:static;display:block;width:100%;margin-top:10px;border-radius:3px;}
  .classicHero h1{font-size:clamp(40px,12.5vw,58px);}
}

/* ==========================================================================
   LAYER 2 — living hero, day-grouped tickets, updates signup, SVG icon set.
   ========================================================================== */

/* --- SVG icons -------------------------------------------------------------- */
.svgIcon{display:inline-block;vertical-align:middle;flex:none;}
.textIcon{font-size:28px;line-height:1;}
.metaIcon{margin-right:3px;color:var(--gold-dark);}
.pillIcon{margin-right:4px;position:relative;top:-1px;}
.siteBrandIcon{color:#ffe28a;}
.siteBrandIcon .svgIcon{display:block;}
.classicBeerIcon{color:#3b2600;}
.classicBeerIcon .svgIcon{display:block;}
.itemIconTile{
  display:inline-grid;
  place-items:center;
  width:58px;height:58px;
  border-radius:18px;
  background:linear-gradient(160deg,var(--blue-soft),#fff);
  border:1px solid #d9e7fa;
  color:var(--blue-dark);
  box-shadow:inset 0 1px 0 #fff;
}
.vipHomeItems .itemIconTile{
  background:linear-gradient(160deg,#fdeeee,#fff);
  border-color:#f2caca;
  color:var(--festRed);
}
.vipHomeItems span.itemIconTile{font-size:28px;}
.videoPlayGlyph{padding-left:0;color:#3b2600;}
.videoPlayGlyph .svgIcon{display:block;margin-left:3px;}
.ticketMiniPrice .svgIcon{color:var(--blue-deep);}

/* --- Living hero ------------------------------------------------------------ */
.classicHero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 8%,rgba(242,183,34,.14),transparent 24rem),
    linear-gradient(180deg,#fffdf6 0,var(--cream) 58%,var(--cream-2) 100%);
}
/* Slowly drifting Bavarian lattice */
.classicHero::before{
  content:'';
  position:absolute;
  inset:-120px;
  z-index:0;
  background:
    repeating-linear-gradient(45deg,transparent 0 26px,rgba(11,101,194,.055) 26px 52px),
    repeating-linear-gradient(-45deg,transparent 0 26px,rgba(11,101,194,.055) 26px 52px);
  background-position:0 0,0 0;
  animation:rautenDrift 42s linear infinite;
  pointer-events:none;
}
@keyframes rautenDrift{to{background-position:104px 104px,-104px 104px;}}
/* Breathing festival glow */
.classicHero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle 22rem at 18% 20%,rgba(242,183,34,.22),transparent 70%),
    radial-gradient(circle 26rem at 86% 70%,rgba(11,101,194,.14),transparent 70%);
  animation:heroGlow 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes heroGlow{
  0%{opacity:.55;transform:translate3d(0,0,0) scale(1);}
  100%{opacity:1;transform:translate3d(2%, -2%,0) scale(1.06);}
}
.classicHeroInner{position:relative;z-index:2;}

/* Drifting festival sprites */
.heroFloats{position:absolute;inset:0;z-index:1;pointer-events:none;}
.floatSprite{
  position:absolute;
  color:var(--blue-dark);
  opacity:.1;
  animation:spriteDrift 9s ease-in-out infinite alternate;
  will-change:transform;
}
.floatSprite .svgIcon{display:block;stroke-width:2.2;}
.floatStein{top:12%;right:6%;color:var(--gold-dark);opacity:.16;animation-duration:10s;}
.floatPretzel{bottom:14%;left:4%;opacity:.12;animation-duration:12s;animation-delay:-4s;}
.floatMusic{top:5%;left:46%;opacity:.1;animation-duration:8.5s;animation-delay:-2s;}
.floatCheers{bottom:10%;right:24%;color:var(--gold-dark);opacity:.13;animation-duration:11s;animation-delay:-6s;}
.floatSparkle{top:36%;left:2.5%;color:var(--gold-dark);opacity:.16;animation-duration:7.5s;animation-delay:-3s;}
.floatTicket{top:64%;right:4%;opacity:.1;animation-duration:13s;animation-delay:-8s;}
@keyframes spriteDrift{
  0%{transform:translate3d(0,0,0) rotate(-5deg);}
  100%{transform:translate3d(10px,-20px,0) rotate(6deg);}
}

/* Staggered hero entrance */
.classicHero .heroContent > *{animation:heroRise .8s cubic-bezier(.22,.61,.36,1) both;}
.classicHero .heroContent > *:nth-child(1){animation-delay:.05s;}
.classicHero .heroContent > *:nth-child(2){animation-delay:.14s;}
.classicHero .heroContent > *:nth-child(3){animation-delay:.24s;}
.classicHero .heroContent > *:nth-child(4){animation-delay:.32s;}
.classicHero .heroContent > *:nth-child(5){animation-delay:.4s;}
.classicHero .heroContent > *:nth-child(6){animation-delay:.48s;}
@keyframes heroRise{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:none;}
}
/* Hand-drawn gold flourish that draws itself in under the headline.
   Needs its own combined animation so the stagger rule above doesn't
   replace the draw effect. */
.classicHero .heroContent > .heroFlourish{
  animation:heroRise .8s cubic-bezier(.22,.61,.36,1) .24s both,flourishDraw 1.1s ease .55s forwards;
}
.heroFlourish{
  display:block;
  width:min(260px,52%);
  height:auto;
  margin:14px 0 4px;
  color:var(--gold);
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:flourishDraw 1.1s ease .55s forwards;
  filter:drop-shadow(0 2px 3px rgba(143,106,0,.25));
}
@keyframes flourishDraw{to{stroke-dashoffset:0;}}

/* Hero card: rise in, then float, with a passing sheen */
.classicHeroCard{
  position:relative;
  overflow:hidden;
  animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .3s both,heroCardFloat 7s ease-in-out 1.4s infinite;
}
.classicHeroCard::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  background-size:260% 100%;
  background-position:120% 0;
  animation:cardSheen 7s ease-in-out 2.2s infinite;
  pointer-events:none;
}
@keyframes cardSheen{
  0%,72%{background-position:120% 0;}
  88%,100%{background-position:-140% 0;}
}
@media (prefers-reduced-motion:reduce){
  .classicHero::before,
  .classicHero::after,
  .floatSprite,
  .classicHero .heroContent > *,
  .classicHeroCard,
  .classicHeroCard::after{animation:none;}
  .heroFlourish,.classicHero .heroContent > .heroFlourish{animation:none;stroke-dashoffset:0;}
}

/* --- Day-grouped tickets ---------------------------------------------------- */
.ticketDayGroup{margin-top:34px;}
.ticketDayGroup:first-of-type{margin-top:8px;}
.dayHeading{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0 0 16px;
}
.dayHeading::before{
  content:'';
  align-self:center;
  width:12px;height:12px;
  flex:none;
  background:var(--gold);
  transform:rotate(45deg);
  border-radius:2px;
  box-shadow:0 3px 8px rgba(143,106,0,.3);
}
.dayHeading h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(24px,3vw,32px);
  letter-spacing:-.02em;
  color:var(--blue-deep);
}
.dayHeading span{
  font-weight:700;
  font-size:14px;
  color:var(--gold-dark);
  letter-spacing:.02em;
  white-space:nowrap;
}
.dayHeading::after{
  content:'';
  align-self:center;
  flex:1;
  height:2px;
  background:linear-gradient(90deg,var(--line),transparent);
  border-radius:2px;
}

/* --- Updates signup band ---------------------------------------------------- */
.signupBand{
  position:relative;
  margin-top:54px;
  padding:10px 0;
  background:
    var(--rauten-dark),
    radial-gradient(circle at 16% 20%,rgba(242,183,34,.16),transparent 22rem),
    linear-gradient(140deg,var(--blue-deep),var(--blue-dark) 70%,#0a4a92);
  border-top:5px solid var(--gold);
  overflow:hidden;
}
.signupInner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(26px,5vw,56px);
  align-items:center;
  padding-top:52px;
  padding-bottom:56px;
}
.signupCopy{color:#eaf4ff;}
.signupCopy .kicker{color:#ffe28a;}
.signupCopy .kicker::before{background:linear-gradient(90deg,#ffe28a,transparent);}
.signupCopy h2{
  margin:6px 0 12px;
  color:#fff;
  font-weight:900;
  font-size:clamp(32px,4.4vw,50px);
  letter-spacing:-.03em;
}
.signupCopy p:not(.kicker){max-width:560px;margin:0;color:#dcebfc;font-size:17.5px;}
.signupIcon{
  display:inline-grid;
  place-items:center;
  width:64px;height:64px;
  margin-bottom:18px;
  border-radius:20px;
  color:#ffe28a;
  background:rgba(255,226,138,.12);
  border:1px solid rgba(255,226,138,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.signupFormWrap{position:relative;}
.signupForm,.signupSuccess{
  padding:26px;
  border-radius:22px;
  background:#fffdf6;
  border:1.5px solid #eeda9e;
  box-shadow:0 24px 54px rgba(3,20,42,.4),0 0 0 6px rgba(242,183,34,.14);
}
.signupForm .field{margin:0 0 13px;}
.signupForm .field:first-of-type{margin-top:2px;}
.signupSmall{margin:12px 0 0;text-align:center;}
.signupHoneypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.signupSuccess{
  color:#3d4d64;
  font-size:17px;
  border-color:var(--gold);
  background:linear-gradient(180deg,#fffdf6,#fdf3d6);
}
.signupSuccess strong{font-family:var(--font-display);font-size:24px;color:var(--blue-deep);letter-spacing:-.015em;}
.signupError{margin:0 0 14px;}

@media(max-width:1020px){
  .signupInner{grid-template-columns:1fr;}
  .floatMusic,.floatTicket{display:none;}
}
@media(max-width:760px){
  .dayHeading{flex-wrap:wrap;gap:10px;}
  .dayHeading::after{display:none;}
  .floatSparkle{display:none;}
  .floatSprite{opacity:.08;}
  .floatStein{opacity:.12;}
  .signupForm,.signupSuccess{padding:20px;}
  .heroFlourish{width:min(220px,64%);}
}

/* ==========================================================================
   LAYER 3 — showpiece centred hero, in-hero bunting, 1-2-3 booking steps.
   ========================================================================== */

/* --- Bunting now lives inside the hero: no strip of background above ------- */
.classicHero .bunting{
  position:absolute;
  top:0;left:0;right:0;
  z-index:3;
  height:30px;
}

/* --- Centred, editorial hero ------------------------------------------------ */
.heroCentered .classicHeroInner{
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  text-align:center;
  max-width:1120px;
  padding:clamp(88px,10vw,134px) clamp(18px,5vw,34px) clamp(60px,7vw,92px);
}
.heroCentered .heroContent{
  max-width:940px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.heroKicker{justify-content:center;}
.heroKicker::after{
  content:'';
  width:26px;height:2px;
  background:linear-gradient(270deg,var(--gold),transparent);
  border-radius:2px;
}
.heroCentered h1{
  max-width:1000px;
  font-size:clamp(50px,7.4vw,104px);
  line-height:1;
  letter-spacing:-.04em;
  text-wrap:balance;
}
.heroCentered .heroFlourish{margin:18px auto 4px;}
.heroCentered .heroLead{
  max-width:680px;
  margin:18px auto 0;
  font-size:clamp(18px,2vw,21.5px);
}
.heroCentered .heroMeta{justify-content:center;margin:26px 0 4px;}
.heroCentered .heroButtons{justify-content:center;margin-top:20px;}
.heroCentered .btnLarge{min-height:58px;padding:16px 30px;font-size:17.5px;}

/* Trust markers: quiet, credible, professional */
.heroTrust{
  list-style:none;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 30px;
  width:100%;
  max-width:720px;
  margin:34px auto 0;
  padding:22px 0 0;
  border-top:1px solid rgba(8,62,124,.14);
}
.heroTrust li{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:650;
  color:#4b5d78;
  letter-spacing:.01em;
}
.trustIcon{color:var(--gold-dark);}

/* Extend the entrance stagger to the trust row */
.classicHero .heroContent > *:nth-child(7){animation-delay:.56s;}

/* Sprites re-choreographed around the centred column */
.heroCentered .floatStein{top:15%;right:5%;left:auto;}
.heroCentered .floatPretzel{bottom:13%;left:5%;top:auto;}
.heroCentered .floatMusic{top:13%;left:8%;right:auto;}
.heroCentered .floatCheers{bottom:17%;right:8%;top:auto;left:auto;}
.heroCentered .floatSparkle{top:47%;left:2.5%;}
.heroCentered .floatTicket{top:45%;right:2.5%;}

/* --- Easy 1-2-3 how it works ------------------------------------------------ */
.howSection{padding-top:14px;}
.howGrid{
  position:relative;
  list-style:none;
  margin:6px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  counter-reset:none;
}
/* Dotted journey line running behind the step medallions */
.howGrid::before{
  content:'';
  position:absolute;
  top:27px;
  left:11%;
  right:11%;
  border-top:2px dashed #e0cf9b;
}
.howStep{
  position:relative;
  text-align:center;
  padding:0 10px;
}
.howStepTop{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.howNumber{
  display:grid;
  place-items:center;
  width:54px;height:54px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,var(--gold-bright),var(--gold) 72%);
  color:#3b2600;
  font-family:var(--font-display);
  font-size:25px;
  font-weight:900;
  box-shadow:0 12px 26px rgba(143,106,0,.28),inset 0 1px 0 rgba(255,255,255,.55),0 0 0 5px #fffdf6;
}
.howIcon{
  display:grid;
  place-items:center;
  width:54px;height:54px;
  border-radius:17px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--blue-dark);
  box-shadow:var(--shadow-soft);
}
.howStep h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:23px;
  letter-spacing:-.015em;
  color:var(--blue-deep);
}
.howStep p{
  max-width:330px;
  margin:0 auto;
  font-size:15px;
  line-height:1.6;
  color:#4b5b73;
}

/* --- Close the gap between the signup band and the footer ------------------- */
.signupBand + .siteFooter{margin-top:0;}

@media(max-width:1020px){
  .howGrid{grid-template-columns:1fr;gap:30px;}
  .howGrid::before{display:none;}
}
@media(max-width:760px){
  .classicHero .bunting{height:24px;}
  .heroCentered .classicHeroInner{padding:76px 16px 52px;}
  .heroCentered h1{font-size:clamp(42px,12.5vw,60px);}
  .heroTrust{gap:12px 20px;}
  .heroCentered .btnLarge{width:100%;}
  .heroCentered .heroButtons{width:100%;max-width:420px;}
}

/* ==========================================================================
   LAYER 4 — hero brand lockup. The logo is treated as the lit centrepiece of
   the hero: a warm halo grounds it on the lattice, a slow ray fan extends the
   artwork's own sunburst outward, and the type below is rebalanced so the
   lockup leads and the tagline supports it.
   ========================================================================== */

.heroLogoWrap{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:0 0 6px;
}
/* Warm halo + ray fan that continues the logo's drawn sunburst into the page */
.heroLogoWrap::before{
  content:'';
  position:absolute;
  top:48%;
  left:50%;
  width:min(760px,132%);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,rgba(255,247,225,.95) 0 22%,rgba(253,240,206,.62) 42%,rgba(242,183,34,.16) 62%,transparent 74%);
  animation:logoHalo 9s ease-in-out infinite alternate;
  pointer-events:none;
}
.heroLogoRays{
  position:absolute;
  top:48%;
  left:50%;
  width:min(900px,158%);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(143,106,0,.13) 0deg 1.1deg,transparent 1.1deg 7.5deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 30%,#000 46%,transparent 68%);
  mask-image:radial-gradient(circle,transparent 0 30%,#000 46%,transparent 68%);
  animation:logoRays 90s linear infinite;
  pointer-events:none;
}
@keyframes logoHalo{
  0%{opacity:.72;transform:translate(-50%,-50%) scale(.97);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1.04);}
}
@keyframes logoRays{to{transform:translate(-50%,-50%) rotate(360deg);}}

.heroLogo{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  height:auto;
  max-width:min(348px,74vw);
  filter:drop-shadow(0 16px 26px rgba(94,64,4,.22)) drop-shadow(0 2px 0 rgba(255,255,255,.55));
  animation:logoFloat 8.5s ease-in-out 1.2s infinite;
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-9px) rotate(-.4deg);}
}

/* Lockup leads the entrance, then the type follows */
.heroWithLogo .heroContent > *:nth-child(1){animation:logoEnter 1s cubic-bezier(.22,.61,.36,1) both;animation-delay:.02s;}
.heroWithLogo .heroContent > *:nth-child(2){animation-delay:.34s;}
.heroWithLogo .heroContent > *:nth-child(3){animation-delay:.42s;}
.heroWithLogo .heroContent > *:nth-child(4){animation-delay:.5s;}
.heroWithLogo .heroContent > *:nth-child(5){animation-delay:.58s;}
.heroWithLogo .heroContent > *:nth-child(6){animation-delay:.64s;}
.heroWithLogo .heroContent > *:nth-child(7){animation-delay:.7s;}
.heroWithLogo .heroContent > *:nth-child(8){animation-delay:.76s;}
.heroWithLogo .heroContent > .heroFlourish{
  animation:heroRise .8s cubic-bezier(.22,.61,.36,1) .5s both,flourishDraw 1.1s ease .82s forwards;
}
@keyframes logoEnter{
  from{opacity:0;transform:translateY(16px) scale(.94);}
  to{opacity:1;transform:none;}
}

/* Type rebalanced: the lockup is the star, the tagline is the promise */
.heroWithLogo .heroKicker{margin-top:14px;}
.heroWithLogo h1{
  max-width:860px;
  font-size:clamp(34px,4.6vw,62px);
  line-height:1.04;
  letter-spacing:-.032em;
}
.heroWithLogo .heroFlourish{width:min(210px,44%);margin-top:14px;}
.heroWithLogo .heroLead{margin-top:16px;font-size:clamp(17px,1.8vw,20px);}
.heroWithLogo .classicHeroInner{padding-top:clamp(64px,7vw,96px);}
/* The lockup already carries a stein, so the hero glow stays quieter */
.heroWithLogo.classicHero::after{opacity:.55;}

@media (prefers-reduced-motion:reduce){
  .heroLogoWrap::before,.heroLogoRays,.heroLogo,
  .heroWithLogo .heroContent > *:nth-child(1){animation:none;}
  .heroWithLogo .heroContent > .heroFlourish{animation:none;stroke-dashoffset:0;}
}
@media(max-width:760px){
  .heroLogo{max-width:min(244px,72vw);}
  .heroLogoRays{width:min(560px,168%);}
  .heroWithLogo .heroFlourish{width:min(170px,52%);}
}

/* --- Hero vertical rhythm: keep the lockup grand but the CTA above the fold -- */
.heroWithLogo .classicHeroInner{
  padding-top:clamp(38px,4.4vw,62px);
  padding-bottom:clamp(42px,5vw,66px);
}
.heroLogo{
  /* Scale with the viewport's height as well as its width, so the lockup stays
     imposing on tall screens without pushing the buttons off short ones. */
  max-height:min(338px,34vh);
}
.heroWithLogo .heroKicker{margin-top:10px;}
.heroWithLogo h1{font-size:clamp(32px,4.1vw,56px);}
.heroWithLogo .heroFlourish{margin-top:10px;}
.heroWithLogo .heroLead{margin-top:13px;}
.heroWithLogo .heroMeta{margin:18px 0 0;}
.heroWithLogo .heroButtons{margin-top:18px;}
.heroWithLogo .heroTrust{margin-top:24px;padding-top:17px;}

@media (max-height:845px) and (min-width:761px){
  .heroWithLogo .classicHeroInner{padding-top:30px;padding-bottom:34px;}
  .heroLogo{max-height:30vh;}
  .heroWithLogo .heroLead{font-size:17px;}
  .heroWithLogo .heroTrust{margin-top:18px;padding-top:14px;}
}

/* Mobile: the wrapped header already eats a third of the screen, so the
   lockup and its spacing tighten up to keep "Book tickets" near the fold. */
@media(max-width:760px){
  .heroWithLogo .classicHeroInner{padding-top:26px;padding-bottom:34px;}
  .heroLogo{max-width:min(200px,58vw);max-height:26vh;}
  .heroWithLogo .heroKicker{margin-top:6px;}
  .heroWithLogo .heroLead{margin-top:11px;}
  .heroWithLogo .heroMeta{margin-top:14px;gap:8px;}
  .heroWithLogo .heroButtons{margin-top:14px;gap:10px;}
  .heroWithLogo .heroTrust{margin-top:18px;padding-top:14px;}
}

/* ==========================================================================
   LAYER 5 — header brand lockup built from the logo's own stein mark, and a
   three-column tickets grid.
   ========================================================================== */

/* --- Header mark: the logo's stein, wordmark to its right ------------------ */
.siteBrandIcon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:42px;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  flex:none;
}
/* Warm halo echoing the hero's lit lockup, so the mark belongs to the header
   rather than sitting on top of it. */
.siteBrandIcon::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:74px;
  height:74px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,138,.26) 0 30%,rgba(255,226,138,.1) 52%,transparent 70%);
  pointer-events:none;
}
.siteBrandIcon picture,
.siteBrandIcon img{
  position:relative;
  display:block;
  height:42px;
  width:auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.siteBrand{gap:12px;}
.siteBrandText{line-height:1.15;}
.siteBrand:hover .siteBrandIcon img,
.siteBrand:focus-visible .siteBrandIcon img{transform:translateY(-1px) scale(1.03);}
.siteBrandIcon img{transition:transform .2s ease;}

/* --- Tickets page: three columns ------------------------------------------- */
.cards.ticketGrid{grid-template-columns:repeat(3,minmax(0,1fr));}

@media(max-width:1020px){
  .cards.ticketGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .cards.ticketGrid{grid-template-columns:1fr;}
  .siteBrandIcon,
  .siteBrandIcon picture,
  .siteBrandIcon img{height:36px;}
  .siteBrandIcon::before{width:62px;height:62px;}
  .siteBrand{gap:10px;}
}

/* --- Footer credit ---------------------------------------------------------- */
.footerCredit{
  margin:4px 0 0;
  padding-top:14px;
  width:100%;
  max-width:420px;
  text-align:center;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:rgba(220,235,252,.75);
  border-top:1px solid rgba(255,226,138,.18);
}
.footerCredit a{
  color:#ffe28a;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid rgba(255,226,138,.35);
  padding-bottom:1px;
  transition:color .18s ease,border-color .18s ease;
}
.footerCredit a:hover,.footerCredit a:focus{color:#fff;border-bottom-color:#fff;}

/* ==========================================================================
   LAYER 6 — Ticket Designer preview, matched to the redesigned PDF so what
   admins see in the browser is what the customer receives.
   ========================================================================== */
.designerTicketCanvas{
  background:
    repeating-linear-gradient(45deg,transparent 0 17px,rgba(11,101,194,.05) 17px 34px),
    repeating-linear-gradient(-45deg,transparent 0 17px,rgba(11,101,194,.05) 17px 34px),
    #f3efe4;
}
.designerTicketPaper{
  background:#fff;
  border:0!important;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 46px rgba(40,32,10,.18);
  padding:0!important;
}
.designerTicketBand{
  background:var(--ticketPrimary);
  border-bottom:5px solid var(--ticketAccent);
  padding:20px 26px 16px;
  text-align:center;
}
.designerTicketLogoRow{display:flex;margin:0 0 16px;}
.designerTicketLogoRow.designerLogoCenter{justify-content:center;}
.designerTicketLogoRow.designerLogoLeft{justify-content:flex-start;}
.designerTicketLogoRow.designerLogoRight{justify-content:flex-end;}
.designerTicketMedallion{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 15px;
  background:#fff;
  border-radius:12px;
}
.designerTicketMedallion img{
  display:block;
  max-width:var(--ticketLogoSize,220px);
  max-height:84px;
  width:auto;height:auto;
}
.designerTicketEvent{
  margin:0;
  color:#fff;
  font-family:var(--font-body);
  font-size:21px;
  font-weight:800;
  letter-spacing:-.01em;
}
.designerTicketDate{
  margin:4px 0 0;
  color:var(--ticketAccent);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
}
.designerTicketMain{padding:26px 30px 6px;text-align:center;}
.designerTicketCancelled,
.designerTicketVipRibbon{
  display:inline-block;
  margin:0 0 14px;
  padding:6px 16px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
}
.designerTicketCancelled{background:#8f1212;color:#fff;}
.designerTicketVipRibbon{background:var(--ticketAccent);color:#4b0505;}
.designerTicketHeading{
  margin:0;
  color:var(--ticketPrimary);
  font-family:var(--font-display,Georgia,serif);
  font-size:27px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.12;
}
.designerTicketRule{
  display:block;
  width:68px;height:3px;
  margin:12px auto 20px;
  border-radius:3px;
  background:var(--ticketAccent);
}
.designerTicketBody{
  display:grid;
  grid-template-columns:minmax(0,1fr) 168px;
  gap:22px;
  align-items:start;
  text-align:left;
}
.designerTicketText{font-size:13.5px;line-height:1.55;color:#242d3a;}
.designerTicketQrWrap{text-align:center;}
.designerTicketQr{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  border-radius:10px;
  background:#fbf9f3;
  border:1px solid #e2dbc7;
  color:#8a93a3;
  font-weight:800;
  letter-spacing:.1em;
}
.designerTicketQrWrap em{
  display:block;
  margin-top:7px;
  font-style:normal;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.12em;
  color:#6b7688;
}
.designerTicketTear{
  position:relative;
  height:1px;
  margin:24px 16px 0;
  border-top:2px dashed #cdc5b1;
}
.designerTicketTear::before,
.designerTicketTear::after{
  content:'';
  position:absolute;
  top:-10px;
  width:18px;height:18px;
  border-radius:50%;
  background:#f3efe4;
}
.designerTicketTear::before{left:-25px;}
.designerTicketTear::after{right:-25px;}
.designerTicketStub{padding:20px 30px 4px;}
.designerTicketStubTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
}
.designerTicketStubTop span{
  display:block;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  color:#98a0ae;
}
.designerTicketStubTop strong{
  display:block;
  margin-top:3px;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ticketPrimary);
}
.designerTicketStubRight{text-align:right;}
.designerTicketStubRows{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:5px 0;
  margin:0;
}
.designerTicketStubRows dt{
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  color:#98a0ae;
  align-self:center;
}
.designerTicketStubRows dd{
  margin:0;
  font-size:12.5px;
  color:#242d3a;
  align-self:center;
}
.designerTicketFooter{
  margin-top:18px;
  padding:16px 30px 24px;
  border-top:1px solid #ece7dc;
  text-align:center;
  font-size:11.5px;
  color:#5c6675;
}
.designerTicketFooter .designerTicketLink{margin:8px 0 0;}
.designerTicketFooter .designerTicketLink a{color:var(--ticketPrimary);font-weight:700;font-size:11px;}
.designerTicketSocials{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:10.5px;
}
.designerTicketSocials a{color:#98a0ae;text-decoration:none;}
.designerTicketVip .designerTicketHeading,
.designerTicketVip .designerTicketStubTop strong{color:#8f1212;}
@media(max-width:760px){
  .designerTicketBody{grid-template-columns:1fr;}
  .designerTicketQrWrap{max-width:190px;margin:0 auto;}
  .designerTicketHeading{font-size:22px;}
}