/* Shared components: buttons, eyebrow, photo shapes, section basics, post cards, seat badges, brand pattern, CTA band */
/* ---------- buttons: brand "sticker" style ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:var(--ink);
  text-decoration:none;
  padding:15px 32px;
  border-radius:100px;
  font-family:var(--sans); font-weight:700; font-size:1rem;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn-outline{
  background:transparent; color:var(--ink);
  border:2px solid var(--ink); box-shadow:none;
}
.btn-outline:hover{ transform:none; background:var(--ink); color:var(--cream); }

/* =======================================================
   PHOTO SHAPES — exactly two variants from the brand book
   ======================================================= */
.shot-main{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius: var(--r-main) 0 var(--r-main) 0;   /* TL + BR */
  background:var(--navy);
}
.shot-event{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius: 0 var(--r-event) 0 var(--r-event); /* TR + BL */
  background:var(--navy);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:.86rem; letter-spacing:.02em; color:var(--navy);
}
.eyebrow svg{ width:14px; height:16px; color:var(--gold-deep); flex:none; }

/* ---------- section basics ---------- */
.section{ padding:96px 0; }
@media (max-width:640px){ .section{ padding:60px 0; } }
.section h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.6rem,2.9vw,2.3rem); line-height:1.16;
  color:var(--navy); margin:18px 0 20px;
}
.section .sub{ font-size:1.04rem; line-height:1.75; color:rgba(31,42,51,.72); max-width:56ch; margin:0; }

.btn-sm{ padding:11px 24px; font-size:.9rem; box-shadow:3px 3px 0 var(--ink); }
.btn-sm:hover{ box-shadow:1px 1px 0 var(--ink); }

/* ---------- blog ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:46px; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr; } }
a.post{ text-decoration:none; display:block; }
a.post img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:0 var(--r-event) 0 var(--r-event);
  background:var(--navy);
}
a.post .meta{ font-size:.84rem; color:rgba(31,42,51,.55); margin:18px 0 8px; }
a.post h3{
  font-family:var(--serif); font-weight:700; font-size:1.16rem; line-height:1.38;
  color:var(--navy); margin:0 0 8px;
}
a.post p{ font-size:.93rem; line-height:1.62; color:rgba(31,42,51,.7); margin:0; }
a.post:hover h3{ text-decoration:underline; text-decoration-color:var(--gold-deep); text-underline-offset:4px; }

/* ---------- brand-book geometric pattern (dark surfaces only) ---------- */
.patterned{ position:relative; overflow:hidden; isolation:isolate; }
.patterned > .pattern-layer{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.42;
}
.patterned > *:not(.pattern-layer){ position:relative; z-index:1; }
.site-footer.patterned > .pattern-layer{ opacity:.2; }
.card-dark.patterned > .pattern-layer{ opacity:.34; }

/* ---------- CTA ---------- */
.cta-band{ background:var(--navy); border-radius:0 90px 0 90px; padding:68px 52px; }
@media (max-width:640px){ .cta-band{ padding:44px 26px; border-radius:0 48px 0 48px; } }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.cta-inner h2{ font-family:var(--serif); font-weight:700; color:var(--cream); font-size:clamp(1.5rem,2.6vw,2rem); max-width:21ch; margin:0; line-height:1.22; }


/* ---------- seat availability badges ---------- */
.seats{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:100px;
  font-size:.84rem; font-weight:700;
  border:1.5px solid transparent;
}
.seats i{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.seats-ok{ background:rgba(159,207,202,.35); color:#1d5b54; border-color:rgba(29,91,84,.25); }
.seats-low{ background:var(--gold); color:var(--ink); border-color:var(--ink); }
.seats-last{ background:var(--ink); color:var(--gold); border-color:var(--ink); }
.seats-last i{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.seats-none{ background:rgba(31,42,51,.08); color:rgba(31,42,51,.62); border-color:rgba(31,42,51,.18); }

/* ---------- modifiers (replace inline styles) ---------- */
.section--flush-top{ padding-top:0; }
.mb-0{ margin-bottom:0 !important; }
.mb-12{ margin-bottom:12px !important; }
.cta-band--light{ background:var(--paper); border:1px solid var(--line); }
.cta-band--light h2{ color:var(--navy); margin:14px 0 0; }
.cta-band--light .sub{ margin-top:12px; }
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden; padding:0;
  position:absolute; word-wrap:normal !important;
}
.screen-reader-text:focus{
  clip:auto; clip-path:none; height:auto; width:auto; margin:0; padding:12px 20px;
  background:var(--gold); color:var(--ink); z-index:1000; top:8px; left:8px; font-weight:700;
}
:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }