/*
 * La Crosse & District Pipes & Drums
 * Main Stylesheet — v2
 *
 * Color palette drawn from:
 *   Campbell of Cawdor tartan: deep green, navy and black ground, with
 *                              bright red and bright blue overchecks
 *   50th Anniversary logo:     royal blue #1B3D8F, silver/white
 *
 * NOTE: the UI tokens below are deliberately lighter than the real cloth so
 * text stays legible on them. The true sett colours are the --sett-* tokens
 * further down, traced from a photo of the band's own tartan.
 *
 * Logo files (save to images/):
 *   logo-50th.png    — 50th anniversary logo (blue bg, silver design)
 *   logo-standard.png — general circular band logo
 */

/* ========================================================
   VARIABLES & RESET
   ======================================================== */
:root {
  /* Brand */
  --royal-blue:  #1B3D8F;   /* logo background, primary */
  --blue-mid:    #274FAF;
  --navy:        #0D1F4F;   /* header / footer */
  --green:       #1A5228;   /* tartan dominant */
  --green-mid:   #236B34;
  --crimson:     #C41E3A;   /* tartan thin accent */
  --silver:      #C8CCCE;   /* logo silver elements */
  --gold:        #C4A432;   /* warm CTA accent */
  --cream:       #F0EDE6;
  --gray:        #6B6B6B;
  --gray-light:  #EEE9E2;
  --border:      #D4CFCC;
  --text-dark:   #1A1A1A;

  --font-heading: 'Cinzel', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 6px 24px rgba(0,0,0,0.14);
  --shadow-lg:  0 14px 40px rgba(0,0,0,0.20);
  --radius:     8px;
  --transition: 0.22s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ========================================================
   SECTION BACKGROUND HELPERS
   Tartan used only as the narrow stripe divider.
   Sections use solid colors — cleaner, more professional.
   ======================================================== */
.bg-tartan       { background: #0D1F4F; }         /* fallback solid navy */
.bg-tartan-blue  { background: #0D1F4F; }         /* solid deep navy */
.bg-tartan-light { background: var(--cream); }    /* warm off-white */

/* ========================================================
   CAMPBELL OF CAWDOR SETT
   Traced from a photograph of the band's own cloth: a Black
   Watch-style ground (deep green / navy / black blocks) with
   a bright red and a bright blue overcheck line. These are
   the true cloth colours and are deliberately darker and
   more saturated than the UI palette tokens above.
   One sett = 104px, laid out by --sett-* stops below.
   ======================================================== */
:root {
  --sett-green:  #1A6B45;
  --sett-navy:   #142C63;
  --sett-black:  #0B1115;
  --sett-red:    #E01B1B;   /* overcheck */
  --sett-blue:   #1A4FD0;   /* overcheck */
}

/* Ground bands of one 104px sett, reused in both directions.
   black4 · navy22 · black22 · navy4 · black4 · green22 · black22 · green4 */
.tartan-stripe {
  height: 8px;
  background:
    /* overcheck lines sit on top of the ground */
    repeating-linear-gradient(
      90deg,
      transparent 0px,   transparent 13px,
      var(--sett-blue) 13px, var(--sett-blue) 16px,
      transparent 16px,  transparent 64px,
      var(--sett-red) 64px,  var(--sett-red) 67px,
      transparent 67px,  transparent 104px
    ),
    repeating-linear-gradient(
      90deg,
      var(--sett-black) 0px,   var(--sett-black) 4px,
      var(--sett-navy)  4px,   var(--sett-navy)  26px,
      var(--sett-black) 26px,  var(--sett-black) 48px,
      var(--sett-navy)  48px,  var(--sett-navy)  52px,
      var(--sett-black) 52px,  var(--sett-black) 56px,
      var(--sett-green) 56px,  var(--sett-green) 78px,
      var(--sett-black) 78px,  var(--sett-black) 100px,
      var(--sett-green) 100px, var(--sett-green) 104px
    );
}

/* ========================================================
   NAVIGATION
   ======================================================== */
header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

/* Logo uses the standard circular image */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 64px;
  width: 64px;
  object-fit: contain;
  /* Round on top/sides like a circle; near-square at bottom so "PIPES & DRUMS"
     banner isn't clipped */
  border-radius: 32px 32px 6px 6px;
  background: #fff;
  display: block;
  flex-shrink: 0;
}
.nav-logo-img-fallback {
  width: 46px;
  height: 46px;
  background: var(--royal-blue);
  border: 2px solid var(--silver);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.nav-logo-text { color: var(--cream); }
.nav-logo-text .band-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.nav-logo-text .band-short {
  display: block;
  font-size: 10px;
  color: var(--silver);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The corporate name is long enough that the old 2.5px tracking pushed the
   header wider than a small phone. Tighten it further below ~400px so the
   logo lockup and the menu button still share one row. */
@media (max-width: 400px) {
  .nav-logo-text .band-short { font-size: 9px; letter-spacing: 0.4px; }
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2px;
  align-items: center;
}
nav ul li a {
  color: rgba(245,240,232,0.88);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 7px 12px;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
  text-transform: uppercase;
  white-space: nowrap;
}
nav ul li a:hover,
nav ul li a.active {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
nav ul li a.nav-cta {
  background: var(--royal-blue);
  color: #fff;
  border: 1px solid var(--blue-mid);
  padding: 7px 16px;
  border-radius: 20px;
  margin-left: 4px;
}
nav ul li a.nav-cta:hover {
  background: var(--blue-mid);
}
nav ul li a.nav-fb {
  background: #1877F2;
  color: #fff;
  border-radius: 4px;
  margin-left: 4px;
  padding: 6px 12px;
  font-size: 12px;
}
nav ul li a.nav-fb:hover {
  background: #166FE5;
  color: #fff;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 26px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* ========================================================
   PAGE HERO
   ======================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px 24px 90px;
  min-height: 86vh;
  overflow: hidden;
  color: var(--cream);
}
.hero.hero-compact {
  min-height: 34vh;
  padding: 64px 24px 52px;
}

/* Hero background: real band photo + dark gradient overlay */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Piper leading parade — dramatic hero photo */
  background:
    url('../Images/492085933_1263644329100829_8268936962833214009_n.jpg')
    center / cover no-repeat;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Left-to-right gradient: royal blue → green-black; keeps text crisp */
  background: linear-gradient(
    135deg,
    rgba(13,31,79,0.88) 0%,
    rgba(13,31,79,0.72) 45%,
    rgba(21,43,26,0.82) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

/* 50th logo — absolutely positioned, flush to hero bottom-left corner */
.hero-logo-50th-corner {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
/* Overflow clip removes all white border from PNG (~20% cropped per side) */
.hero-logo-50th-clip {
  width: 256px;
  height: 256px;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 6px 0 28px rgba(0,0,0,0.5);
}
/* Inner image scaled up so ~20% overflows and is clipped on each side */
.hero-logo-50th {
  width: 422px;
  height: 422px;
  margin: -83px 0 0 -83px;
  display: block;
  max-width: none;
}
.hero-logo-50th-fallback {
  display: none;
}

.hero-eyebrow {
  display: inline-block;
  border: 1px solid rgba(200,204,206,0.6);
  color: var(--silver);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 6px 22px;
  margin-bottom: 24px;
  border-radius: 2px;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 10px;
  color: #fff;
  text-shadow: 0 3px 24px rgba(0,0,0,0.6);
}
.hero h1 em {
  font-style: normal;
  color: var(--silver);
  display: block;
}
.hero .hero-sub {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  color: rgba(245,240,232,0.8);
  letter-spacing: 1px;
  font-style: italic;
  margin-bottom: 6px;
}
.hero .hero-location {
  font-size: 0.88rem;
  color: var(--silver);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 46px;
}
.hero-compact h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================================
   BUTTONS
   ======================================================== */
.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--royal-blue);
  color: #fff;
  border-color: var(--royal-blue);
}
.btn-primary:hover {
  background: var(--blue-mid);
  border-color: var(--blue-mid);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27,61,143,0.4);
}
.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: rgba(245,240,232,0.65);
}
.btn-outline:hover {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--cream);
  transform: translateY(-2px);
}
.btn-green {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}
.btn-green:hover {
  background: var(--green-mid);
  border-color: var(--green-mid);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,82,40,0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--royal-blue);
  border-color: var(--royal-blue);
}
.btn-ghost:hover {
  background: var(--royal-blue);
  color: #fff;
}
.btn-lg  { padding: 15px 38px; font-size: 14px; }
.btn-sm  { padding: 8px 18px; font-size: 12px; }
.btn-full { width: 100%; text-align: center; }

/* ========================================================
   SECTIONS
   ======================================================== */
section { padding: 84px 24px; }
.section-inner  { max-width: 1200px; margin: 0 auto; }
.section-narrow { max-width: 780px;  margin: 0 auto; }

.section-header { text-align: center; margin-bottom: 56px; }
.section-header .eyebrow {
  display: inline-block;
  color: var(--silver);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
/* eyebrow on white bg */
section:not(.bg-tartan-blue):not(.bg-tartan) .section-header .eyebrow {
  color: var(--royal-blue);
}
.section-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.2;
}
.section-header p {
  font-size: 1.02rem;
  color: var(--gray);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
}
/* on dark/tartan backgrounds */
.bg-tartan-blue .section-header h2,
.bg-tartan     .section-header h2  { color: #fff; }
.bg-tartan-blue .section-header p,
.bg-tartan     .section-header p   { color: rgba(245,240,232,0.72); }

section.bg-navy   { background: var(--navy); }
section.bg-dark   { background: var(--navy); }
section.bg-green  { background: var(--green); }
section.bg-cream  { background: var(--cream); }
section.bg-gray   { background: var(--gray-light); }
section.bg-tartan-light { /* applied via class, defined above */ }

.bg-navy .section-header h2,
.bg-green .section-header h2 { color: #fff; }
.bg-navy .section-header p,
.bg-green .section-header p  { color: rgba(245,240,232,0.72); }

/* ========================================================
   EVENT BARS  (homepage — skinny horizontal stacked)
   ======================================================== */
.event-bars { display: flex; flex-direction: column; }

.event-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  padding: 18px 24px 18px 20px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.event-bar + .event-bar { border-top: none; }
.event-bar:first-child  { border-radius: var(--radius) var(--radius) 0 0; }
.event-bar:last-child   { border-radius: 0 0 var(--radius) var(--radius); }
.event-bar:first-child:last-child { border-radius: var(--radius); }

.event-bar.next-up { border-left-color: var(--royal-blue); }

.event-bar:hover,
article.event-bar:hover {
  background: #f6f4f0;
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
article.event-bar { cursor: pointer; }
article.event-bar:hover .eb-arrow { color: var(--royal-blue); transform: translateX(3px); }

/* Nested links inside event bars */
.eb-calendar-link,
.eb-maps-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: color var(--transition);
}
.eb-calendar-link:hover .eb-day,
.eb-calendar-link:hover .eb-month { color: var(--royal-blue); }
.eb-maps-link:hover { color: var(--royal-blue); }

/* "UP NEXT" badge on first bar */
.eb-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--royal-blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0 calc(var(--radius) - 1px) 0 6px;
}

.eb-date {
  text-align: center;
  min-width: 48px;
  flex-shrink: 0;
}
.eb-month {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1;
  margin-bottom: 2px;
}
.event-bar.next-up .eb-month { color: var(--royal-blue); }
.eb-day {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.eb-rule {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}

.eb-info { flex: 1; min-width: 0; }
.eb-info h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-location {
  font-size: 0.83rem;
  color: var(--gray);
}

.eb-arrow {
  color: var(--border);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: color var(--transition), transform var(--transition);
}
.event-bar:hover .eb-arrow {
  color: var(--royal-blue);
  transform: translateX(3px);
}

/* ========================================================
   EVENT CARDS (events page — detailed list)
   ======================================================== */
.events-list { display: flex; flex-direction: column; gap: 20px; }
.event-list-item {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--royal-blue);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: start;
  transition: box-shadow var(--transition);
}
.event-list-item:hover { box-shadow: var(--shadow-md); }
.event-list-date { text-align: center; }
.event-list-date .month {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--royal-blue);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.event-list-date .day {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.event-list-date .year {
  display: block;
  font-size: 11px;
  color: var(--gray);
}
.event-list-info h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.event-detail {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 7px;
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.5;
}
.event-detail .icon { font-size: 13px; margin-top: 2px; flex-shrink: 0; }

/* Past events (archived) */
.event-list-item.past { border-left-color: var(--border); opacity: 0.72; }
.event-list-item.past .event-list-date .month { color: var(--gray); }
.event-list-item.past .event-list-date .day   { color: var(--gray); }

/* ========================================================
   ACTION CARDS
   ======================================================== */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.action-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(200,204,206,0.22);
  border-radius: 10px;
  padding: 34px 22px 28px;
  text-align: center;
  text-decoration: none;
  color: var(--cream);
  display: block;
  transition: all var(--transition);
}
.action-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--silver);
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.35);
}
.action-card .action-icon { font-size: 44px; display: block; margin-bottom: 14px; }
.action-card h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--silver);
  margin-bottom: 10px;
}
.action-card p {
  font-size: 0.87rem;
  color: rgba(245,240,232,0.7);
  line-height: 1.6;
}

/* ========================================================
   FORMS
   ======================================================== */
.form-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 44px 48px;
  box-shadow: var(--shadow-md);
  max-width: 720px;
  margin: 0 auto;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid #DDD5C2;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-dark);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--royal-blue);
  box-shadow: 0 0 0 3px rgba(27,61,143,0.1);
}
.form-group textarea { resize: vertical; min-height: 110px; }

/* Checkboxes and radios need their native appearance back.
 *
 * The rule above sets `appearance: none` on every `.form-group input`, which is
 * right for text inputs — it strips the OS styling so the border and radius
 * apply cleanly. On a checkbox it also removes the tick, and on a radio the
 * dot, leaving a control that toggles perfectly well and shows absolutely
 * nothing. Nothing else in the stylesheet draws a `:checked` state, so the box
 * simply never looked selected.
 *
 * That made "Show this gig on the public website" appear stuck, and would have
 * done the same to the notification-channel radios on the settings page.
 *
 * `accent-color` tints the native control to the band blue, which is all the
 * customisation these need — a hand-drawn checkbox is a lot of CSS and a
 * keyboard-accessibility risk for no gain.
 */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  accent-color: var(--royal-blue);
  flex-shrink: 0;
  cursor: pointer;
}
.form-group input[type="checkbox"]:focus-visible,
.form-group input[type="radio"]:focus-visible {
  outline: 2px solid var(--royal-blue);
  outline-offset: 2px;
  box-shadow: none;
}
.form-note { font-size: 12px; color: var(--gray); margin-top: 5px; }

/* A form that failed to send says so. The booking form used to show its
   thank-you regardless of what happened, which is the one thing a form must
   never do — the visitor walks away believing the band has their request. */
.form-error {
  margin-top: 16px; padding: 12px 16px;
  background: #FBE7EA; border: 1px solid #E7A9B4; border-left: 4px solid var(--crimson);
  border-radius: 6px;
  font-size: 14px; line-height: 1.6; color: #7C1220;
}

/* Honeypot. Hidden from people and from screen readers, left empty by every
   real visitor; a bot fills in every input it can find. Not `display:none`,
   which some bots specifically skip. */
.hp-field {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.form-submit {
  width: 100%;
  padding: 15px;
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: var(--royal-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  margin-top: 6px;
}
.form-submit:hover { background: var(--blue-mid); transform: translateY(-2px); }
.form-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }

.info-box {
  background: #E8EEF8;
  border-left: 4px solid var(--royal-blue);
  border-radius: 0 6px 6px 0;
  padding: 15px 18px;
  margin-bottom: 26px;
  font-size: 0.9rem;
  color: var(--navy);
  line-height: 1.6;
}
.info-box strong { display: block; margin-bottom: 4px; }

.payment-notice {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.7;
}
.payment-notice strong { color: var(--navy); }

/* ========================================================
   HIDDEN MEANS HIDDEN

   The `hidden` attribute is only `display: none` at the very
   bottom of the cascade, so ANY class that sets a display —
   .confidential-note is display:flex — silently beats it. A
   panel written as hidden then shows anyway, and nothing
   errors. Stated once here so `el.hidden = true` can be
   trusted everywhere on the site.
   ======================================================== */
[hidden] { display: none !important; }

/* ========================================================
   DONATE TIERS

   These used to be buttons that set an amount on a form that
   went nowhere. The donor now chooses the amount on PayPal,
   so these describe what a gift pays for and are deliberately
   NOT interactive — no cursor, no hover, nothing that invites
   a click that does nothing.
   ======================================================== */
.donate-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.donate-tier {
  border: 1px solid var(--border);
  border-left: 3px solid var(--royal-blue);
  border-radius: var(--radius);
  padding: 16px 14px;
  text-align: center;
  background: #fff;
}
.donate-tier .amount {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--royal-blue);
  display: block;
  line-height: 1;
}
.donate-tier .donate-label {
  display: block;
  font-size: 12px;
  color: var(--gray);
  line-height: 1.45;
  margin-top: 6px;
}

/* ========================================================
   STEPS
   ======================================================== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 36px;
  text-align: center;
}
.step-number {
  width: 56px;
  height: 56px;
  background: var(--royal-blue);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.step-card h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 9px;
}
.step-card p { font-size: 0.9rem; color: var(--gray); line-height: 1.7; }
.bg-tartan-blue .step-card h3,
.bg-green .step-card h3 { color: #fff; }
.bg-tartan-blue .step-card p,
.bg-green .step-card p  { color: rgba(245,240,232,0.72); }

/* ========================================================
   TWO-COLUMN  (About / Join image+text)
   ======================================================== */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.two-col img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  object-fit: cover;
}
.text-col h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  color: var(--navy);
  margin-bottom: 18px;
  line-height: 1.2;
}
.text-col p {
  font-size: 0.98rem;
  color: var(--gray);
  margin-bottom: 16px;
  line-height: 1.8;
}
.text-col p:last-child { margin-bottom: 0; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.stat-item {
  text-align: center;
  padding: 20px 14px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.stat-num {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--royal-blue);
  display: block;
  line-height: 1;
  margin-bottom: 5px;
}
.stat-label {
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ========================================================
   MISC
   ======================================================== */
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.badge-blue   { background: #D6E0F5; color: var(--royal-blue); }
.badge-green  { background: #D1FAE5; color: var(--green); }
.badge-gold   { background: #FEF3C7; color: #92400E; }

.tax-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--gray);
}
.tax-note .icon { font-size: 20px; flex-shrink: 0; }

.page-intro {
  background: #E8EEF8;
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 44px;
  border-left: 5px solid var(--royal-blue);
}
.page-intro p { font-size: 1rem; color: var(--navy); line-height: 1.8; }

/* Success states */
.success-msg {
  text-align: center;
  padding: 56px 40px;
  background: #EBF5EF;
  border-radius: 12px;
  border: 1px solid #A7D7BB;
}
.success-msg .success-icon { font-size: 4rem; margin-bottom: 14px; }
.success-msg h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--green);
  margin-bottom: 10px;
}
.success-msg p { color: var(--gray); }

/* ========================================================
   SHOP EMBED
   ======================================================== */
.shop-embed-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.shop-embed-wrap iframe {
  width: 100%;
  min-height: 820px;
  border: none;
  display: block;
}
.shop-fallback {
  display: none;
  text-align: center;
  padding: 48px 24px;
  background: var(--cream);
}
.shop-fallback p { color: var(--gray); margin-bottom: 20px; }

/* ========================================================
   JOIN PAGE — REHEARSAL INFO SECTION
   ======================================================== */
.rehearsal-info-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-bottom: 22px;
  color: var(--cream);
}
.rehearsal-info-card .ri-icon { font-size: 2.2rem; flex-shrink: 0; margin-top: 2px; }
.rehearsal-info-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 6px;
}
.rehearsal-info-card p {
  font-size: 0.9rem;
  color: rgba(245,240,232,0.82);
  margin-bottom: 4px;
  line-height: 1.6;
}
.heritage-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 36px;
  color: rgba(245,240,232,0.88);
  font-size: 0.92rem;
  line-height: 1.7;
}
.heritage-note .heritage-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.heritage-note strong { color: #fff; }
.free-lessons-notice {
  background: rgba(196,164,50,0.12);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 24px;
  color: #fff;
  font-size: 0.97rem;
  line-height: 1.65;
  text-align: center;
  margin-bottom: 28px;
}
.free-lessons-notice strong { color: var(--gold); font-size: 1.1rem; }

/* Dark-background form variant (used in navy/green sections) */
.form-dark .form-group label {
  color: rgba(245,240,232,0.85);
}
.form-dark .form-group input,
.form-dark .form-group select,
.form-dark .form-group textarea {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
  color: var(--cream);
}
.form-dark .form-group input::placeholder,
.form-dark .form-group textarea::placeholder {
  color: rgba(245,240,232,0.38);
}
.form-dark .form-group input:focus,
.form-dark .form-group select:focus,
.form-dark .form-group textarea:focus {
  border-color: var(--silver);
  box-shadow: 0 0 0 3px rgba(200,204,206,0.14);
}

/* ========================================================
   TIMELINE (About page)
   ======================================================== */
.timeline { position: relative; padding-left: 36px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 10px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border);
}
.timeline-item { position: relative; margin-bottom: 32px; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -30px; top: 6px;
  width: 12px; height: 12px;
  background: var(--royal-blue);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--royal-blue);
}
.timeline-item .t-year {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--royal-blue);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.timeline-item h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1rem;
  margin-bottom: 6px;
}
.timeline-item p { font-size: 0.9rem; color: var(--gray); line-height: 1.7; }

/* Tartan swatch */
.tartan-swatch {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 22px 26px;
  border: 1px solid var(--border);
}
/* Woven Campbell of Cawdor: warp (90deg) is opaque, weft (0deg) is laid
   over it at partial alpha so the two sets of bands blend where they
   cross — the same way the real twill reads. Overchecks go on top. */
.tartan-preview {
  width: 168px; height: 168px;
  border-radius: 6px;
  flex-shrink: 0;
  background-color: var(--sett-green);
  background-image:
    /* 1 · overcheck lines, both directions */
    repeating-linear-gradient(
      0deg,
      transparent 0px,   transparent 13px,
      var(--sett-blue) 13px, var(--sett-blue) 15px,
      transparent 15px,  transparent 64px,
      var(--sett-red) 64px,  var(--sett-red) 66px,
      transparent 66px,  transparent 104px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,   transparent 13px,
      var(--sett-blue) 13px, var(--sett-blue) 15px,
      transparent 15px,  transparent 64px,
      var(--sett-red) 64px,  var(--sett-red) 66px,
      transparent 66px,  transparent 104px
    ),
    /* 2 · weft ground (semi-transparent, blends over the warp) */
    repeating-linear-gradient(
      0deg,
      rgba(11,17,21,0.50)   0px,   rgba(11,17,21,0.50)   4px,
      rgba(20,44,99,0.50)   4px,   rgba(20,44,99,0.50)   26px,
      rgba(11,17,21,0.50)   26px,  rgba(11,17,21,0.50)   48px,
      rgba(20,44,99,0.50)   48px,  rgba(20,44,99,0.50)   52px,
      rgba(11,17,21,0.50)   52px,  rgba(11,17,21,0.50)   56px,
      rgba(26,107,69,0.42)  56px,  rgba(26,107,69,0.42)  78px,
      rgba(11,17,21,0.50)   78px,  rgba(11,17,21,0.50)   100px,
      rgba(26,107,69,0.42)  100px, rgba(26,107,69,0.42)  104px
    ),
    /* 3 · warp ground (opaque) */
    repeating-linear-gradient(
      90deg,
      var(--sett-black) 0px,   var(--sett-black) 4px,
      var(--sett-navy)  4px,   var(--sett-navy)  26px,
      var(--sett-black) 26px,  var(--sett-black) 48px,
      var(--sett-navy)  48px,  var(--sett-navy)  52px,
      var(--sett-black) 52px,  var(--sett-black) 56px,
      var(--sett-green) 56px,  var(--sett-green) 78px,
      var(--sett-black) 78px,  var(--sett-black) 100px,
      var(--sett-green) 100px, var(--sett-green) 104px
    );
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* Real photograph of the cloth, when present, beats the CSS weave */
.tartan-photo {
  width: 168px; height: 168px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
@media (max-width: 560px) {
  .tartan-swatch { flex-direction: column; align-items: flex-start; }
  .tartan-preview, .tartan-photo { width: 100%; height: 120px; }
}
.tartan-info h3 {
  font-family: var(--font-heading);
  color: var(--navy); font-size: 1.05rem; margin-bottom: 6px;
}
.tartan-info p { font-size: 0.87rem; color: var(--gray); line-height: 1.65; }

/* ========================================================
   FOOTER
   ======================================================== */
footer {
  background: #070d1a;
  color: var(--cream);
  padding: 60px 24px 26px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
  margin-bottom: 44px;
}

.footer-logo-img {
  height: 72px;
  width: auto;
  margin-bottom: 16px;
}

.footer-brand h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--silver);
  margin-bottom: 4px;
}
.footer-brand .footer-sub {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(245,240,232,0.38);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-brand p {
  font-size: 0.84rem;
  color: rgba(245,240,232,0.58);
  line-height: 1.75;
  margin-bottom: 18px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  text-decoration: none;
  font-size: 15px;
  transition: all var(--transition);
}
.footer-social a:hover { background: var(--royal-blue); border-color: var(--royal-blue); }

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--silver);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
  color: rgba(245,240,232,0.58);
  text-decoration: none;
  font-size: 0.84rem;
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--cream); }
.footer-contact p {
  font-size: 0.84rem;
  color: rgba(245,240,232,0.58);
  margin-bottom: 8px;
  line-height: 1.5;
}
.footer-contact a { color: var(--silver); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom p,
.footer-501c3 { font-size: 0.8rem; color: rgba(245,240,232,0.32); }

/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .two-col { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  section { padding: 56px 20px; }

  nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 74px; left: 0; right: 0;
    background: #0d1f4f;
    padding: 10px 16px 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    gap: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  }
  nav ul.open { display: flex; }
  nav ul li a { display: block; padding: 11px 14px; }
  nav ul li a.nav-cta { margin-left: 0; border-radius: 4px; }
  .nav-toggle { display: block; }

  .hero { min-height: 68vh; padding: 64px 20px 52px; }
  .hero-logo-50th-corner { display: none; } /* hide corner logo on mobile — avoid text overlap */
  .form-wrap { padding: 26px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .event-list-item { grid-template-columns: 1fr; gap: 10px; }

  .eb-info h3 { white-space: normal; }
}

@media (max-width: 520px) {
  .footer-grid  { grid-template-columns: 1fr; }
  .stats-row    { grid-template-columns: 1fr 1fr; }
  .hero h1      { font-size: 1.9rem; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .action-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .action-grid { grid-template-columns: 1fr; }
}

/* Shown by js/events-public.js when the gig database answers with no upcoming
   public performances. Deliberately a real state rather than falling back to
   a hand-written list, which would advertise gigs that have already happened. */
.events-empty {
  text-align: center;
  padding: 40px 28px;
  background: var(--gray-light);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--gray);
  line-height: 1.75;
}
.events-empty a { color: var(--royal-blue); font-weight: 600; }

/* ========================================================
   TICKETING, RSVP AND SHARED STATE COMPONENTS

   The three primitives at the top (.confidential-note,
   .empty-state, .gig-toast) were in members.css until the
   public ticket and RSVP pages needed them too. They live
   here now, once; members.css loads after this file and
   still gets them.
   ======================================================== */

/* ── Confidentiality / warning notice ── */
.confidential-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FEF3C7;
  border: 1px solid #E4CE7A;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 32px;
  font-size: 0.87rem;
  color: #6B551A;
  line-height: 1.65;
}
.confidential-note .cn-icon { font-size: 1.15rem; flex-shrink: 0; line-height: 1.4; }
.confidential-note strong { color: #4A3A0F; }

/* ── Empty / setup states ── */
.empty-state {
  text-align: center;
  padding: 56px 30px;
  background: #fff;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
}
.empty-state .es-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.55; }
.empty-state h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 10px;
}
.empty-state p {
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.75;
  max-width: 460px;
  margin: 0 auto;
}

/* ── Toast ── */
.gig-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--navy); color: var(--cream);
  padding: 13px 22px; border-radius: var(--radius);
  font-size: 0.88rem; box-shadow: var(--shadow-lg);
  opacity: 0; transition: all var(--transition); z-index: 2000;
  max-width: min(560px, calc(100vw - 40px)); text-align: center;
}
.gig-toast.show { opacity: 1; transform: translate(-50%, 0); }
.gig-toast.is-error { background: var(--crimson); }

.tk-error {
  background: #FBE7EA; border: 1px solid #E9B6BF; border-left: 4px solid var(--crimson);
  color: #7C1220; border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 18px; font-size: 0.88rem; line-height: 1.6;
}

/* ========================================================
   PUBLIC TICKET PAGE
   ======================================================== */

.tk-event {
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--royal-blue);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 26px;
}
.tk-event h2 {
  font-family: var(--font-heading); font-size: 1.5rem;
  color: var(--navy); margin: 0 0 8px;
}
.tk-when { font-weight: 600; color: var(--royal-blue); margin: 0 0 6px; }
.tk-where { color: var(--gray); font-size: 0.9rem; margin: 0 0 10px; }
.tk-addr { font-size: 0.85rem; }
.tk-desc { font-size: 0.92rem; line-height: 1.75; margin: 12px 0 0; }

.tk-list { margin-bottom: 26px; }
.tk-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 12px;
}
.tk-row.is-disabled { opacity: 0.6; background: #FAFAF8; }
.tk-row-main h3 {
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  color: var(--navy); margin: 0 0 4px;
}
.tk-row-main p { font-size: 0.85rem; color: var(--gray); margin: 0; line-height: 1.6; }
.tk-row-price {
  font-family: var(--font-heading); font-size: 1.2rem;
  font-weight: 700; color: var(--royal-blue); white-space: nowrap;
}
.tk-row-qty { display: flex; align-items: center; gap: 8px; }
.tk-qty-label { font-size: 0.75rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.06em; }
.tk-qty {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-body); font-size: 0.95rem; background: #fff; min-width: 64px;
}
.tk-unavailable { color: var(--gray); font-size: 1.1rem; padding: 0 18px; }

.tk-flag {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--gray-light); color: var(--gray); vertical-align: middle;
}
.tk-flag.is-low { background: #FEF3C7; color: #92400E; }
.tk-flag.is-out { background: #FBE7EA; color: var(--crimson); }

.tk-form {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 28px;
}
.tk-total-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 0 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.tk-total-bar strong { font-family: var(--font-heading); font-size: 1.6rem; color: var(--navy); }
.tk-form .btn { width: 100%; }

.tk-event-link {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--royal-blue);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 12px;
  text-decoration: none; transition: all var(--transition);
}
.tk-event-link:hover { border-left-color: var(--gold); box-shadow: var(--shadow-lg); }
.tk-event-link h3 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--navy); margin: 0 0 4px; }
.tk-event-link p { font-size: 0.85rem; color: var(--gray); margin: 0; }
.tk-event-go { color: var(--royal-blue); font-weight: 600; font-size: 0.88rem; white-space: nowrap; }

@media (max-width: 640px) {
  .tk-row { grid-template-columns: 1fr auto; }
  .tk-row-qty { grid-column: 1 / -1; justify-content: flex-end; }
  .tk-event-link { flex-direction: column; align-items: flex-start; }
}

/* ========================================================
   THE TICKET ITSELF
   Read on a phone, at a door, in poor light. High contrast,
   large type, and the QR is the biggest thing on the page.
   ======================================================== */

.ticket-paid-banner {
  background: #E8F5EC; border: 1px solid #A8D5B8; border-left: 4px solid var(--green);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 22px;
  font-weight: 700; color: #14512A;
}
.ticket-paid-banner span { display: block; font-weight: 400; font-size: 0.86rem; margin-top: 4px; }

.ticket-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; margin-bottom: 26px;
  padding: 28px 26px; text-align: center;
}
.ticket-card.is-used { opacity: 0.85; }
.ticket-index {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 14px;
}
.ticket-head h2 {
  font-family: var(--font-heading); font-size: 1.4rem; color: var(--navy); margin: 0 0 8px;
}
.ticket-when { font-weight: 600; color: var(--royal-blue); margin: 0 0 4px; }
.ticket-where, .ticket-addr { font-size: 0.86rem; color: var(--gray); margin: 0 0 4px; }

.ticket-qr {
  margin: 24px auto 20px; max-width: 280px;
  padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
}
.ticket-qr svg { display: block; width: 100%; height: auto; }
.ticket-qr-fallback {
  margin: 20px 0; padding: 18px; background: var(--gray-light);
  border-radius: var(--radius); font-size: 0.88rem; color: var(--gray);
}

.ticket-used-banner {
  margin: 22px 0; padding: 20px; border-radius: var(--radius);
  background: #FBE7EA; color: #7C1220;
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700;
}
.ticket-used-banner span {
  display: block; font-family: var(--font-body); font-size: 0.85rem;
  font-weight: 400; margin-top: 6px;
}

.ticket-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px; text-align: left; margin: 20px 0 0;
  padding-top: 20px; border-top: 1px dashed var(--border);
}
.ticket-facts dt {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 3px;
}
.ticket-facts dd { margin: 0; font-weight: 600; font-size: 0.92rem; color: var(--navy); }

.ticket-code {
  margin-top: 18px; padding: 10px; background: var(--gray-light); border-radius: 6px;
  font-family: 'Courier New', monospace; font-size: 0.85rem;
  letter-spacing: 0.08em; color: var(--gray); word-break: break-all;
}
.ticket-warning {
  margin: 16px 0 0; padding: 12px; background: #FBE7EA;
  border-radius: 6px; font-size: 0.85rem; color: #7C1220;
}
.ticket-tip {
  text-align: center; font-size: 0.86rem; color: var(--gray);
  line-height: 1.7; margin-top: 8px;
}

/* ========================================================
   RSVP FROM A TEXT MESSAGE
   One-handed, outdoors, in a hurry. The buttons are large,
   full width on a phone, and above anything that scrolls.
   ======================================================== */

.rsvp-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 30px 28px;
}
.rsvp-greeting { font-size: 0.95rem; color: var(--gray); margin: 0 0 10px; }
.rsvp-card h1 {
  font-family: var(--font-heading); font-size: 1.55rem;
  color: var(--navy); margin: 0 0 10px; line-height: 1.25;
}
.rsvp-when { font-weight: 700; color: var(--royal-blue); margin: 0 0 6px; }
.rsvp-where { font-size: 0.9rem; color: var(--gray); margin: 0 0 16px; }
.rsvp-desc { font-size: 0.9rem; line-height: 1.75; margin: 0 0 18px; }

.rsvp-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin: 0 0 22px; padding: 16px 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.rsvp-facts dt {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 3px;
}
.rsvp-facts dd { margin: 0; font-weight: 600; color: var(--navy); }

.rsvp-current {
  background: #F4F6FB; border-left: 3px solid var(--royal-blue);
  padding: 12px 16px; border-radius: 6px; font-size: 0.88rem; margin: 0 0 20px;
}
/* Answered by tapping a button in the email: the answer is already recorded
   by the time this is read, so it is a receipt, not an instruction. Green, and
   above buttons that are still live in case the wrong one was pressed. */
.rsvp-current.is-saved {
  background: #E8F5EC; border-left-color: var(--green); color: #14512A;
}

.rsvp-choices { display: grid; gap: 12px; margin-bottom: 22px; }
.rsvp-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 20px 22px;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 700;
  border: 2px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--navy); cursor: pointer;
  transition: all var(--transition); text-align: left;
}
.rsvp-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.rsvp-btn:disabled { opacity: 0.55; cursor: default; }
.rsvp-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--gray-light); font-size: 1.05rem;
}
.rsvp-btn.is-yes:hover, .rsvp-btn.is-yes.is-chosen {
  border-color: var(--green); background: #E8F5EC; color: #14512A;
}
.rsvp-btn.is-yes.is-chosen .rsvp-btn-icon { background: var(--green); color: #fff; }
.rsvp-btn.is-maybe:hover, .rsvp-btn.is-maybe.is-chosen {
  border-color: var(--gold); background: #FEF3C7; color: #6B551A;
}
.rsvp-btn.is-maybe.is-chosen .rsvp-btn-icon { background: var(--gold); color: #3A2E05; }
.rsvp-btn.is-no:hover, .rsvp-btn.is-no.is-chosen {
  border-color: var(--crimson); background: #FBE7EA; color: #7C1220;
}
.rsvp-btn.is-no.is-chosen .rsvp-btn-icon { background: var(--crimson); color: #fff; }

.rsvp-note { margin-bottom: 12px; }
.rsvp-foot { font-size: 0.85rem; color: var(--gray); margin: 18px 0 0; }
.rsvp-note-line { font-size: 0.88rem; color: var(--gray); line-height: 1.7; margin: 10px 0 0; }
.rsvp-cancelled {
  background: #FBE7EA; color: #7C1220; border-radius: 6px;
  padding: 12px 16px; font-weight: 700; margin-bottom: 16px;
}

.rsvp-done { text-align: center; }
.rsvp-tick {
  width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem;
}
.rsvp-answer-big {
  font-family: var(--font-heading); font-size: 1.5rem;
  color: var(--green); margin: 0 0 14px;
}

/* ========================================================
   SIGN IN
   One card, one field. This is the first thing a member
   ever sees of the system, and possibly the only thing
   they see if it goes wrong, so it says what is happening
   in full sentences rather than in status codes.
   ======================================================== */

.signin-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 38px 34px;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}
.signin-card h1 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--navy);
  margin: 0 0 12px;
}
.signin-lead {
  font-size: 0.95rem;
  color: var(--gray);
  line-height: 1.7;
  margin: 0 0 24px;
}
.signin-card .form-group { text-align: left; margin-bottom: 18px; }
.signin-card .btn { width: 100%; }
.signin-foot {
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.7;
  margin: 20px 0 0;
}
.signin-notice {
  background: #E8F5EC;
  border: 1px solid #A8D5B8;
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 0.88rem;
  color: #14512A;
  text-align: left;
}
.signin-tick {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--royal-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
}
.signin-card .tk-error { text-align: left; }

/* ── Public form: the honeypot, and the one error line ──────────────────────
   The honeypot is moved off-screen rather than display:none — plenty of bots
   specifically skip hidden inputs, and the point is that they fill this one
   in. aria-hidden and tabindex="-1" keep it away from anybody real. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}
.form-error {
  background: #FBE7EA; border-left: 4px solid var(--crimson);
  border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px;
  font-size: 0.88rem; line-height: 1.6; color: #7A0E20;
}