:root {
  /* Surface — warm buff poster-board stock, not a neutral pastel cream */
  --ivory:        #EFDFB8;
  --ivory-deep:   #E2CD98;
  --ink:          #241C15;
  --ink-soft:     #4A3E30;

  /* Panel colors — spent as whole panels, never as accents */
  --cherry:       #8F2418;
  --cherry-ink:   #5C160E;
  --gold:         #D9A62B;
  --gold-deep:    #A97917;
  --teal:         #1F5F58;
  --teal-deep:    #123934;
  --forest:       #2C4A34;
  --forest-deep:  #1A2C20;

  --focus:        var(--cherry);

  /* Type */
  --display: "Anton", "Oswald", Impact, sans-serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ticket:  "JetBrains Mono", "Courier New", monospace;

  /* Fluid scale */
  --t-xs:   clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --t-sm:   clamp(0.9rem, 0.87rem + 0.15vw, 0.98rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --t-lg:   clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --t-xl:   clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --t-2xl:  clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --t-3xl:  clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem);
  --t-4xl:  clamp(2.75rem, 2rem + 4.5vw, 6.4rem);

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 2px;
  --border: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --offset: 4px 4px 0 var(--ink);
  --offset-sm: 2px 2px 0 var(--ink);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--ivory);
  padding: var(--s-3) var(--s-5); font-weight: 700;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.04; text-wrap: balance; }

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.92;
  text-transform: uppercase;
}

h1.display { font-size: var(--t-4xl); }
h2.display { font-size: var(--t-3xl); }
h3.display { font-size: var(--t-2xl); }

h3, h4 { font-family: var(--body); font-weight: 700; line-height: 1.25; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-base); }

p { text-wrap: pretty; }
.lede { font-size: var(--t-lg); color: var(--ink-soft); max-width: 58ch; }
.prose { max-width: 68ch; color: var(--ink-soft); }
.prose p + p { margin-top: var(--s-4); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--cherry); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.caption {
  font-family: var(--body); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--s-3);
}
.caption--on-panel { color: inherit; opacity: 1; }

/* Ticket/stub numerals — reserved for literal stamped data */
.ticket {
  font-family: var(--ticket); font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---------- Layout ---------- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.section { padding-block: clamp(56px, 8vw, 112px); position: relative; }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

.panel { border-block: var(--border) solid var(--ink); }
.panel--cherry { background: var(--cherry); color: var(--ivory); }
.panel--gold   { background: var(--gold); color: var(--ink); }
.panel--teal   { background: var(--teal); color: var(--ivory); }
.panel--forest { background: var(--forest); color: var(--ivory); }
.panel--ink    { background: var(--ink); color: var(--ivory); }

.grid { display: grid; gap: var(--s-6); }
@media (min-width: 760px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); } }
.split--flip > :first-child { order: 0; }
@media (min-width: 900px) { .split--flip > :first-child { order: 2; } }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.section-head { max-width: 60ch; margin-bottom: var(--s-7); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3) var(--s-6);
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--offset);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease),
              background-color 140ms var(--ease), color 140ms var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--offset-sm); }

.btn--primary { background: var(--ink); color: var(--ivory); }
.btn--primary:hover { background: var(--cherry); border-color: var(--ink); }

.btn--ghost { background: var(--ivory); color: var(--ink); }
.btn--ghost:hover { background: var(--gold); }

.btn--on-dark { border-color: var(--ivory); box-shadow: 4px 4px 0 var(--ivory); }
.btn--on-dark:hover { box-shadow: 6px 6px 0 var(--ivory); }
.btn--on-dark:active { box-shadow: 2px 2px 0 var(--ivory); }
.btn--on-dark.btn--ghost { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn--on-dark.btn--primary { background: var(--ivory); color: var(--ink); }
.btn--on-dark.btn--primary:hover { background: var(--gold); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--ivory);
  border-bottom: var(--border) solid var(--ink);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 76px;
}

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand__name {
  font-family: var(--display); font-size: 1.65rem; letter-spacing: 0.01em;
  text-transform: uppercase; line-height: 1;
}
.brand__name em { font-style: normal; color: var(--cherry); }
.brand__loc {
  display: block; font-family: var(--ticket); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.04em; color: var(--ink-soft);
  margin-top: 3px;
}

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: block; } }
.nav ul { display: flex; align-items: center; gap: var(--s-5); list-style: none; padding: 0; }
.nav a {
  text-decoration: none; font-size: var(--t-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--ink);
  padding: var(--s-2) 0; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 3px; background: var(--cherry); transform: scaleX(0);
  transform-origin: left; transition: transform 120ms linear;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: none; }
@media (min-width: 1000px) { .header-cta { display: inline-flex; min-height: 44px; padding: var(--s-2) var(--s-5); font-size: 0.9rem; box-shadow: 3px 3px 0 var(--ink); } }
.header-cta:hover { box-shadow: 5px 5px 0 var(--ink); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-4);
  background: var(--ivory); border: 2px solid var(--ink);
  border-radius: var(--radius); cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 0.9rem;
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none; border-top: var(--border) solid var(--ink);
  background: var(--ivory); padding: var(--s-4) 0 var(--s-6);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; padding: 0; }
.mobile-nav a {
  display: block; padding: var(--s-4) 0; text-decoration: none;
  font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.01em;
  text-transform: uppercase; border-bottom: 2px solid var(--ink-soft);
}
.mobile-nav .btn { width: 100%; margin-top: var(--s-5); }

/* ---------- Hero + scoring-roundel signature ---------- */
.hero {
  position: relative;
  padding-block: clamp(48px, 8vw, 96px) clamp(56px, 8vw, 96px);
  background: var(--ivory);
  background-image: radial-gradient(circle, var(--ivory-deep) 1.6px, transparent 1.8px);
  background-size: 13px 13px;
}
.hero__inner { position: relative; z-index: 2; display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 980px) { .hero__inner { grid-template-columns: 1.1fr 0.9fr; } }

.hero__panel {
  background: var(--ivory);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-7);
  box-shadow: 6px 6px 0 var(--ink);
}
@media (max-width: 599px) { .hero__panel { padding: var(--s-5); box-shadow: 4px 4px 0 var(--ink); } }

.hero .caption { display: inline-flex; align-items: center; gap: var(--s-3); }
.hero .caption::before { content: ""; width: 28px; height: 3px; background: var(--cherry); }

.hero h1 { margin-bottom: var(--s-5); }
.hero h1 .accent { color: var(--cherry); display: block; }
.hero h1 .sub {
  font-family: var(--body); text-transform: none; font-weight: 700;
  color: var(--teal); font-size: clamp(1.1rem, 0.92rem + 0.9vw, 1.7rem); line-height: 1.35;
  display: block; margin-top: 0.5em; letter-spacing: 0;
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-6);
}
.hero__meta span {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--ticket); font-size: var(--t-xs); font-weight: 500;
  background: var(--ivory); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
}
.hero__meta svg { color: var(--cherry); flex-shrink: 0; }

/* Signature: flat scoring roundel, screen-printed rings, no glow/blur */
.roundel { width: min(100%, 420px); margin-inline: auto; position: relative; aspect-ratio: 1; }
.roundel svg { width: 100%; height: 100%; overflow: visible; }
.roundel__label {
  position: absolute; inset: auto 0 -10px 0; text-align: center;
  font-family: var(--ticket); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink-soft);
}
.roundel__needle { transform-origin: 210px 210px; }

@media (prefers-reduced-motion: no-preference) {
  .roundel__needle { animation: needle-sweep 6s var(--ease) infinite; }
  @keyframes needle-sweep {
    0%, 12%   { transform: rotate(-8deg); }
    50%       { transform: rotate(9deg); }
    88%, 100% { transform: rotate(-8deg); }
  }
}

/* ---------- Real photography — duotone to stay native to the flat signage system ---------- */
.photo-frame {
  position: relative; overflow: hidden;
  border: var(--border) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--offset);
  aspect-ratio: var(--photo-ratio, 4 / 5);
}
.photo-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(1.04);
}
.photo-frame::after {
  content: ""; position: absolute; inset: 0;
  background: var(--cherry); mix-blend-mode: color;
}
.photo-frame--teal::after { background: var(--teal); }
/* Wayfinding photos stay true to life. The duotone is right for atmosphere
   shots, but the storefront exists so a guest can recognise the actual
   building from the parking lot — the red brick and the sign ARE the
   landmarks, so stylising them works against the only job this image has. */
.photo-frame--true img { filter: saturate(0.98) contrast(1.03); }
.photo-frame--true::after { background: var(--cherry); opacity: 0.06; }
.photo-frame__tag {
  position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 2;
  background: var(--ink); color: var(--ivory);
  font-family: var(--ticket); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.03em; padding: var(--s-2) var(--s-3);
  border-radius: var(--radius); max-width: calc(100% - var(--s-7));
}

/* The photo replaces the hero's illustrated target; the roundel survives as a
   smaller stamped seal on the photo's corner, keeping the one authored motion
   moment without asking a synthetic graphic to carry the whole hero. */
.hero__photo { position: relative; }
.hero__seal {
  position: absolute; z-index: 3;
  width: min(32%, 148px); aspect-ratio: 1;
  top: -20px; right: -14px;
  transform: rotate(9deg);
  filter: drop-shadow(3px 3px 0 var(--ink));
}
@media (max-width: 599px) { .hero__seal { width: min(30%, 108px); top: -14px; right: -8px; } }
.hero__seal .roundel { width: 100%; margin: 0; }
.hero__seal .roundel__label { display: none; }

.photo-wide { --photo-ratio: 3 / 2; }

/* ---------- Proximity strip — ticket stubs ---------- */
.prox { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .prox { grid-template-columns: repeat(5, 1fr); } }
.stub {
  position: relative; background: var(--ivory); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: var(--s-5) var(--s-3); text-align: center;
}
.stub::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px;
  background-image: radial-gradient(circle at 8px 0, var(--ivory) 4px, transparent 4.5px);
  background-size: 16px 8px; background-position: 4px 0;
}
.stub b { display: block; font-family: var(--display); font-size: var(--t-xl); color: var(--cherry); line-height: 1; }
.stub span { font-family: var(--ticket); font-size: var(--t-xs); color: var(--ink-soft); }

/* ---------- Game-board panels (the three offerings) ---------- */
.lanes { display: grid; gap: 0; border: var(--border) solid var(--ink); }
@media (min-width: 900px) { .lanes { grid-template-columns: repeat(3, 1fr); } }

.lane {
  position: relative;
  padding: var(--s-7) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
  text-decoration: none;
  border-bottom: var(--border) solid var(--ink);
}
@media (min-width: 900px) {
  .lane { border-bottom: 0; border-right: var(--border) solid var(--ink); }
  .lane:last-child { border-right: 0; }
}
.lane:last-child { border-bottom: 0; }

.lane__num { font-family: var(--ticket); font-size: var(--t-xs); letter-spacing: 0.04em; }
.lane__title { font-family: var(--display); font-size: var(--t-xl); text-transform: uppercase; line-height: 0.98; }
.lane__body { font-size: var(--t-sm); flex: 1; opacity: 0.92; }
.lane__facts { list-style: none; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.lane__facts li { display: flex; gap: var(--s-3); }
.lane__facts li::before { content: "\25A0"; font-size: 0.6em; margin-top: 0.4em; flex-shrink: 0; }
.lane__go {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--display); font-size: 1rem; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lane:hover .lane__go svg, .lane:focus-visible .lane__go svg { transform: translateX(5px); }
.lane__go svg { transition: transform 160ms var(--ease); }

/* ---------- Status pill — static, verified contrast ---------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: flex-start;
  padding: 4px var(--s-3);
  border: 2px solid currentColor;
  border-radius: 999px;
  font-family: var(--ticket); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* ---------- Day-tier pricing — ticket stubs ---------- */
.tiers { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
.tier {
  position: relative;
  background: var(--ivory); border: var(--border) solid var(--ink); border-radius: var(--radius);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2);
  box-shadow: var(--offset);
}
.tier--value { background: var(--gold); }
.tier__burst {
  position: absolute; top: -16px; right: -14px; z-index: 1;
  width: 78px; height: 78px; transform: rotate(9deg);
}
.tier__burst svg { width: 100%; height: 100%; }
.tier__burst span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 10px;
  font-family: var(--display); font-size: 0.6rem; line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--ivory);
}
.tier__days { font-family: var(--ticket); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tier__amt { font-family: var(--display); font-size: var(--t-3xl); line-height: 0.92; color: var(--cherry); }
.tier--value .tier__amt { color: var(--ink); }
.tier__note { font-size: var(--t-sm); color: var(--ink-soft); }
.tier--value .tier__note { color: var(--ink); }
.tier__tag {
  font-family: var(--ticket); font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-soft);
}
.tier--value .tier__tag { color: var(--ink); }

/* ---------- Cards ---------- */
.card {
  background: var(--ivory);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.card--on-dark { background: var(--ivory); color: var(--ink); }
.card__k { font-family: var(--ticket); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); }
.card__t { font-family: var(--display); font-size: var(--t-lg); text-transform: uppercase; letter-spacing: 0.01em; }
.card p { color: var(--ink-soft); font-size: var(--t-sm); }

/* ---------- Schedule table ---------- */
.sched { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.sched th, .sched td { text-align: left; padding: var(--s-4) var(--s-3); border-bottom: 2px solid var(--ivory-deep); }
.sched th { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.02em; text-transform: uppercase; }
.sched td:first-child { font-family: var(--ticket); font-weight: 600; }
.sched tr:last-child td { border-bottom: 0; }

/* ---------- FAQ — sentence case ---------- */
.faq { border-top: 2px solid var(--ink); padding-top: var(--s-2); }
.faq details { border-bottom: 2px solid var(--ivory-deep); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-5) var(--s-8) var(--s-5) 0;
  font-family: var(--body); font-weight: 700; font-size: var(--t-lg);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cherry); }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 1.8rem; color: var(--cherry); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding-bottom: var(--s-5); color: var(--ink-soft); max-width: 72ch; }

/* ---------- Reviews ---------- */
.quote {
  border-left: var(--border) solid var(--ink);
  padding-left: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.quote p { font-size: var(--t-lg); line-height: 1.45; }
.quote cite { font-style: normal; font-family: var(--ticket); font-size: var(--t-sm); color: var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--ivory); padding-block: var(--s-8) var(--s-6); }
.footer-grid { display: grid; gap: var(--s-7); }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-grid h3 { font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-4); }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer-grid a { text-decoration: none; color: var(--ivory); opacity: 0.82; font-size: var(--t-sm); }
.footer-grid a:hover { opacity: 1; color: var(--gold); }
.footer-grid address { font-style: normal; color: var(--ivory); opacity: 0.82; font-size: var(--t-sm); line-height: 1.8; }
.footer-bottom {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 2px solid rgba(239,223,184,0.24);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-family: var(--ticket); font-size: var(--t-xs); color: var(--ivory); opacity: 0.7;
}
.social { display: flex; gap: var(--s-3); }
.social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 2px solid rgba(239,223,184,0.4); border-radius: var(--radius);
}
.social a:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Sticky mobile book bar ---------- */
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink); color: var(--ivory);
  border-top: var(--border) solid var(--ink);
  box-shadow: 0 -2px 0 var(--ink);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--s-4);
}
.book-bar .btn { flex: 1; }
.book-bar__note { display: none; font-family: var(--ticket); font-size: var(--t-xs); opacity: 0.75; }
@media (min-width: 560px) { .book-bar__note { display: block; } }
@media (min-width: 1000px) { .book-bar { display: none; } }
@media (max-width: 999px) { body { padding-bottom: 84px; } }

/* ---------- Scroll reveal — one grammar, modest amplitude ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Scoped to html.js so that if the reveal script ever fails to run, the
     content simply shows rather than staying invisible. Without this, a single
     JS error blanks ~20 elements including both photos. */
  html.js .reveal { opacity: 0; transform: translateY(14px); }
  html.js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
    transition-delay: var(--d, 0ms);
  }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.muted { color: var(--ink-soft); font-size: var(--t-sm); }
.on-dark .muted { color: var(--ivory); opacity: 0.75; }


/* Privacy notice bar */
.cs-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:var(--ink,#241C15);
    color:var(--ivory,#FBF4E4);border-top:3px solid var(--gold,#D9A62B);padding:14px 18px;
    display:none;font-family:var(--body,Archivo,system-ui,sans-serif);font-size:.88rem;line-height:1.5}
  .cs-cookie.is-on{display:block}
  .cs-cookie__in{max-width:1180px;margin:0 auto;display:flex;gap:16px;align-items:center;
    justify-content:space-between;flex-wrap:wrap}
  .cs-cookie p{margin:0;max-width:70ch}
  .cs-cookie a{color:var(--gold,#D9A62B)}
  .cs-cookie__btns{display:flex;gap:10px;flex-wrap:wrap}
  .cs-cookie button{font:inherit;font-weight:600;cursor:pointer;padding:9px 16px;
    border:2px solid var(--ivory,#FBF4E4);background:transparent;color:var(--ivory,#FBF4E4)}
  .cs-cookie button.is-primary{background:var(--ivory,#FBF4E4);color:var(--ink,#241C15)}
  .cs-cookie button:focus-visible,.cs-optout:focus-visible{outline:3px solid var(--gold,#D9A62B);outline-offset:2px}
  /* Keep UserWay clear of the notice bar and the mobile booking bar. */
  body.cs-cookie-open .uwy{bottom:96px!important}
  @media (max-width:999px){ .uwy{bottom:96px!important} }
  @media (max-width:560px){ .cs-cookie__in{flex-direction:column;align-items:flex-start} }

/* ---------- Utilities added for the SEO landing pages ---------- */

/* Screen-reader-only text. Used for table captions so the table has a
   programmatic name without showing a duplicate visible heading. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Small uppercase kicker above a page title. */
.eyebrow {
  font-family: var(--ticket);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--s-2);
}

/* Breadcrumb trail. */
.crumb a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: var(--cherry); }
.crumb [aria-current="page"] { color: var(--ink); font-weight: 600; }
.crumb li { display: inline; }

/* Footer column headings. Marked up as h2 to keep the heading outline clean,
   styled to match the h3 they replaced. */
.footer-grid .footer-h {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-4);
  line-height: 1.04;
}

/* Landing-page tables inherit body type rather than the ticket font. */
.shell table { font-size: var(--t-sm); }
.shell table td, .shell table th { vertical-align: top; }

/* ---------- Dark-panel corrections ----------
   .prose and .lede hard-code dark ink colours, which are unreadable when
   nested inside a dark panel. .btn--on-dark on its own never set a text
   colour, so a bare "btn btn--on-dark" rendered ink-on-cherry (invisible).
   Both are fixed here rather than by inlining colours on every page. */

.panel--cherry, .panel--teal, .panel--forest, .panel--ink { color: var(--ivory); }

.panel--cherry .prose, .panel--teal .prose,
.panel--forest .prose, .panel--ink .prose,
.panel--cherry .lede,  .panel--teal .lede,
.panel--forest .lede,  .panel--ink .lede,
.panel--cherry p,      .panel--teal p,
.panel--forest p,      .panel--ink p,
.panel--cherry li,     .panel--teal li,
.panel--forest li,     .panel--ink li { color: var(--ivory); }

.panel--cherry .prose strong, .panel--teal .prose strong,
.panel--forest .prose strong, .panel--ink .prose strong,
.panel--cherry strong,        .panel--teal strong,
.panel--forest strong,        .panel--ink strong { color: #FFFFFF; }

.panel--cherry .display, .panel--teal .display,
.panel--forest .display, .panel--ink .display { color: var(--gold); }

/* Links on dark panels use ivory + underline rather than gold: gold on teal
   is only 3.33:1, which fails WCAG AA for normal-size text. The underline
   also means colour is not the only cue (WCAG 1.4.1). */
.panel--cherry a:not(.btn), .panel--teal a:not(.btn),
.panel--forest a:not(.btn), .panel--ink a:not(.btn) {
  color: var(--ivory);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.panel--cherry a:not(.btn):hover, .panel--teal a:not(.btn):hover,
.panel--forest a:not(.btn):hover, .panel--ink a:not(.btn):hover { color: #FFFFFF; }

/* A bare .btn--on-dark (no --primary / --ghost) needs an explicit light
   label, otherwise it inherits the dark .btn colour.
   NOTE: the selector must out-specify `.prose a` (0-1-1), which sets
   var(--cherry). A plain `.btn--on-dark` is only 0-1-0 and loses, which
   rendered these buttons cherry-on-cherry (invisible until :hover, whose
   0-2-0 rule did win). Anchoring on `a.` and `.prose a.` fixes that. */
.btn--on-dark,
a.btn--on-dark,
.prose a.btn--on-dark { color: var(--ivory); background: transparent; }
.btn--on-dark:hover,
a.btn--on-dark:hover,
.prose a.btn--on-dark:hover { background: rgba(239, 223, 184, 0.14); color: var(--ivory); }

/* ...but the --primary / --ghost variants have an ivory FILL, so their label
   must stay dark. These have to out-specify the bare rule above, which is
   why they are re-stated here with the same `.prose a.` anchoring. */
.btn--on-dark.btn--primary,
a.btn--on-dark.btn--primary,
.prose a.btn--on-dark.btn--primary,
.btn--on-dark.btn--ghost,
a.btn--on-dark.btn--ghost,
.prose a.btn--on-dark.btn--ghost {
  color: var(--ink); background: var(--ivory);
}
.btn--on-dark.btn--primary:hover,
a.btn--on-dark.btn--primary:hover,
.prose a.btn--on-dark.btn--primary:hover {
  color: var(--ink); background: var(--gold);
}

/* Gold panels keep dark text, so their buttons stay in the dark treatment. */
.panel--gold, .panel--gold .prose, .panel--gold p, .panel--gold li { color: var(--ink); }
.panel--gold .display { color: var(--ink); }
.panel--gold .prose strong, .panel--gold strong { color: var(--ink); }
.panel--gold a:not(.btn) { color: var(--cherry-ink); }