/*
 * Theme: LSU purple & gold + Mardi Gras green, neon on dark, electric blue accents.
 * Every text/background pair meets WCAG AAA (7:1+) and was checked under
 * protanopia, deuteranopia, tritanopia, and full color blindness.
 * Meaning is never carried by color alone (tags have text, current page is underlined).
 */
:root {
  --bg: #0D0618;
  --surface: #1A0F2E;
  --line: #4A3670;
  --ink: #F7F4FF;
  --muted: #CFC6E8;

  --purple: #B98CFF;   /* neon LSU purple */
  --lsu: #461D7C;      /* official LSU purple, fills only */
  --gold: #FDD023;     /* LSU gold */
  --green: #3DFF8F;    /* neon Mardi Gras green */
  --blue: #2EC5FF;     /* electric blue */

  --radius: 16px;
  --glow-blue: 0 0 24px rgb(46 197 255 / .35);
  --glow-gold: 0 0 28px rgb(253 208 35 / .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
body {
  margin: 0;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(900px 500px at 10% -10%, rgb(70 29 124 / .55), transparent 70%),
    radial-gradient(700px 500px at 100% 10%, rgb(46 197 255 / .12), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 17px/1.65 Inter, system-ui, sans-serif;
}
/* Mardi Gras stripe: purple, gold, green */
body::before {
  content: ""; display: block; height: 5px;
  background: linear-gradient(90deg, var(--purple) 0 33.3%, var(--gold) 33.3% 66.6%, var(--green) 66.6%);
}
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); }

/* Accessibility helpers */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--bg); font-weight: 700;
  padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--bg); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  background: rgb(13 6 24 / .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: Fraunces, serif; font-weight: 800; text-decoration: none;
  font-size: 1.15rem; color: var(--gold);
}
.brand:hover { color: var(--gold); text-shadow: var(--glow-gold); }
.nav nav { display: flex; gap: 18px; align-items: center; }
.nav nav a { text-decoration: none; font-weight: 500; color: var(--muted); }
.nav nav a:hover { color: var(--ink); }
.nav nav a[aria-current="page"] {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 3px; text-underline-offset: 8px;
}

main { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.hero { padding: 96px 0 72px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 700; color: var(--gold); }
.page-dj .eyebrow { color: var(--purple); }
.page-fish .eyebrow { color: var(--green); }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); font-weight: 800; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 {
    background: linear-gradient(95deg, var(--gold) 0%, var(--ink) 45%, var(--blue) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.lead { font-size: 1.2rem; color: var(--muted); max-width: 36em; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Buttons */
.btn, .btn-small {
  display: inline-block; text-decoration: none; font-weight: 700;
  background: var(--gold); color: var(--bg) !important;
  border: 2px solid var(--gold); border-radius: 999px;
  transition: box-shadow .2s, transform .2s;
}
.btn { padding: 14px 26px; text-align: center; overflow-wrap: anywhere; }
.btn-small { padding: 7px 16px; }
.btn:hover, .btn-small:hover { box-shadow: var(--glow-gold); transform: translateY(-1px); }
.btn-alt { background: transparent; color: var(--blue) !important; border-color: var(--blue); }
.btn-alt:hover { box-shadow: var(--glow-blue); }

/* Sections & cards */
.card-section { padding: 56px 0; border-top: 1px solid var(--line); }
.card-section > p { color: var(--muted); max-width: 40em; }
.tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--bg); margin-bottom: 12px;
}
.tag-dj { background: var(--purple); }
.tag-fish { background: var(--green); }
.tag-more { background: var(--gold); }

.grid {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grid li {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius); padding: 22px;
  transition: box-shadow .2s;
}
.grid li:hover { box-shadow: var(--glow-blue); }
.grid li p { margin: 0; color: var(--muted); }
#dj .grid li, .page-dj .grid li { border-top-color: var(--purple); }
#fishing .grid li, .page-fish .grid li { border-top-color: var(--green); }
.more-link { margin-top: 24px; }

.pills { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pills li {
  background: var(--surface); border: 1px solid var(--blue); color: var(--ink);
  border-radius: 999px; padding: 8px 16px; font-weight: 500;
}
.note { color: var(--muted); font-size: .95rem; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; max-width: 44em; }
.steps li { counter-increment: step; position: relative; padding-left: 52px; color: var(--muted); }
.steps li strong { color: var(--ink); }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: var(--bg); font-weight: 700;
}
.page-dj .steps li::before { background: var(--purple); }
.page-fish .steps li::before { background: var(--green); }

.contact {
  margin: 0 -24px; padding: 80px 24px; text-align: center;
  border-top: 1px solid var(--line);
  background: radial-gradient(600px 260px at 50% 100%, rgb(70 29 124 / .6), transparent 75%);
}
.contact p { color: var(--muted); }

footer { text-align: center; padding: 32px; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); }
footer a { color: var(--blue); }

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .btn:hover, .btn-small:hover { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --line: #9A8CC0; --muted: #E6E0F5; }
  .grid li:hover, .btn:hover, .btn-small:hover, .btn-alt:hover { box-shadow: none; }
  .hero h1 { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
}
@media (forced-colors: active) {
  .hero h1 { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
  .btn, .btn-small, .tag { border: 2px solid ButtonText; }
}

/* Mobile */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { padding: 10px 16px; gap: 10px; }
  .brand { font-size: 1rem; white-space: nowrap; }
  .nav nav { gap: 4px; }
  .nav nav a { padding: 10px 8px; font-size: .92rem; }   /* bigger tap targets */
  .nav nav a.btn-small { padding: 8px 14px; margin-left: 4px; }
  main { padding: 0 16px; }

  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .lead { font-size: 1.05rem; }
  .cta { flex-direction: column; }
  .cta .btn, .contact .btn, .more-link { display: block; width: 100%; }

  .card-section { padding: 40px 0; }
  h2 { font-size: 1.6rem; }
  .grid { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .grid li { padding: 18px; }
  .pills { gap: 8px; }
  .pills li { padding: 7px 14px; font-size: .92rem; }
  .steps li { padding-left: 46px; }
  .steps li::before { width: 32px; height: 32px; }

  .contact { margin: 0 -16px; padding: 56px 16px 64px; }
  .contact br { display: none; }
  footer { padding: 24px 16px; }
}

@media (max-width: 360px) {
  .brand { font-size: .9rem; }
  .nav nav a { padding: 10px 5px; font-size: .85rem; }
}

/* Photos: placeholder shows until the image file exists in site/images/ */
.photo {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--surface) 0 14px, #21143a 14px 28px);
  border: 2px dashed var(--blue);
}
.photo:has(img) { border: 1px solid var(--line); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-label {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 4px;
  padding: 16px; text-align: center; color: var(--ink); font-weight: 600;
}
.photo-label small { color: var(--muted); font-weight: 500; font-family: ui-monospace, monospace; }
.photo.wide { margin: 24px 0 0; }

.hero-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.hero-photo { box-shadow: 0 0 60px rgb(70 29 124 / .6); }

.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 24px; }

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo { aspect-ratio: 4/3 !important; }
}
@media (max-width: 640px) {
  .photo.wide { aspect-ratio: 4/3 !important; }
  .gallery { grid-template-columns: 1fr; gap: 12px; }
}

.species-heading { font-family: Inter, system-ui, sans-serif; font-size: .95rem; font-weight: 700; color: var(--green); margin: 24px 0 0; text-transform: uppercase; letter-spacing: .08em; }

/* Packages */
.packages li { display: flex; flex-direction: column; position: relative; }
.packages li p { margin: 0 0 8px; }
.packages .pkg-sub { color: var(--gold); font-weight: 600; font-size: .92rem; }
.packages li.pkg-feature { border: 2px solid var(--gold); border-top-width: 3px; box-shadow: var(--glow-gold); }
.pkg-badge {
  align-self: flex-start; margin-bottom: 10px;
  background: var(--gold); color: var(--bg); font-weight: 700; font-size: .78rem;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em;
}

/* FAQ */
.faq { display: grid; gap: 10px; margin-top: 24px; max-width: 48em; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.faq summary {
  cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 600; color: var(--ink);
  position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--blue); font-size: 1.4rem; font-weight: 700; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 18px 18px; color: var(--muted); }

/* Contact */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.contact-direct { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; align-items: center; }
.contact-direct a { color: var(--blue); font-weight: 600; }
.contact-link { color: var(--gold) !important; }
footer p { margin: 6px 0; }
@media (max-width: 640px) {
  .contact-actions { flex-direction: column; }
  .contact-actions .btn { display: block; width: 100%; }
}

/* ---------- Booking page ---------- */
:root { --field: #9283C4; --error: #FF8FA3; --past: #8F86AD; }
.hero-compact { padding: 64px 0 24px; }
.hero-compact h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.book-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; padding: 24px 0 72px; align-items: start; }
.book-cal, .book-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.book-cal { position: sticky; top: 96px; }

/* Calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.cal-title { margin: 0; font-size: 1.25rem; }
.cal-nav {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--blue);
  background: transparent; color: var(--blue); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.cal-nav:disabled { border-color: var(--line); color: var(--past); cursor: default; }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.cal-grid th { font-size: .78rem; font-weight: 600; color: var(--muted); padding: 4px 0; text-transform: uppercase; letter-spacing: .04em; }
.cal-grid td { padding: 0; }
.cal-day {
  position: relative; width: 100%; aspect-ratio: 1; min-height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: var(--bg); color: var(--ink); border: 2px solid var(--line); border-radius: 10px;
  font: 600 1rem/1 Inter, system-ui, sans-serif; cursor: pointer; padding: 0;
}
.cal-day:hover:not(:disabled) { border-color: var(--blue); }
.cal-day .cal-sym { font-size: .85rem; line-height: 1; margin-top: 3px; min-height: .85rem; }
.cal-day .cal-note { position: absolute; top: 2px; right: 6px; color: var(--blue); }
.cal-day.s-open { border-color: var(--green); }
.cal-day.s-open .cal-sym { color: var(--green); }
.cal-day.s-limited { border-color: var(--gold); border-style: dashed; }
.cal-day.s-limited .cal-sym { color: var(--gold); }
.cal-day.s-booked { background: transparent; border-color: var(--line); color: var(--muted); }
.cal-day.s-booked .cal-num { text-decoration: line-through; }
.cal-day.s-booked .cal-sym { color: var(--muted); }
.cal-day.s-past { background: transparent; border-color: transparent; color: var(--past); cursor: default; }
.cal-day:disabled { cursor: not-allowed; }
.cal-day.is-today { outline: 2px dotted var(--gold); outline-offset: 1px; }
.cal-day.is-selected { background: var(--blue); border-color: var(--blue); border-style: solid; color: var(--bg); box-shadow: var(--glow-blue); }
.cal-day.is-selected .cal-sym, .cal-day.is-selected .cal-note { color: var(--bg); }
.cal-legend { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .9rem; color: var(--muted); }
.cal-legend .cal-sym { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); font-size: .75rem; margin-right: 4px; color: var(--ink); }
.cal-legend .s-open { border-color: var(--green); color: var(--green); }
.cal-legend .s-limited { border-color: var(--gold); border-style: dashed; color: var(--gold); }
.cal-legend .s-booked { color: var(--muted); }

/* Form */
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.req { color: var(--gold); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  border: 2px solid var(--field); border-radius: 12px; background: var(--bg); font-weight: 500;
}
.choice input { width: 20px; height: 20px; accent-color: var(--gold); margin: 0; flex: none; }
.choice:has(input:checked) { border-color: var(--gold); box-shadow: var(--glow-gold); }
.choice:has(input:checked) span { font-weight: 700; }
.choice:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
input:not([type=radio]):not([type=checkbox]), select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 2px solid var(--field); border-radius: 10px; padding: 11px 12px; min-height: 46px;
}
input::placeholder, textarea::placeholder { color: var(--past); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
[aria-invalid="true"] { border-color: var(--error) !important; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }
.help { margin: 0; font-size: .88rem; color: var(--muted); }
.form-error { color: var(--error); font-weight: 600; border-left: 4px solid var(--error); padding: 6px 12px; margin: 0 0 14px; }
.form-error::before { content: "⚠ "; }
.book-form .btn { width: 100%; font-size: 1.05rem; margin-bottom: 10px; cursor: pointer; font-family: inherit; }
.btn:disabled { opacity: .7; cursor: wait; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.thanks { text-align: center; padding: 32px 0; }
.thanks:focus { outline: none; }
[hidden] { display: none !important; }

/* ---------- Admin ---------- */
.admin-login { max-width: 420px; margin: 64px auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.admin-login .btn { width: 100%; cursor: pointer; font-family: inherit; }
.admin-first { border-top: 0; }
.admin-first h1 { font-size: 2.2rem; }
.admin-cal-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.admin-cal-wrap #calendar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.tools-title { font-family: Inter, system-ui, sans-serif; font-size: 1.1rem; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { background: transparent; color: var(--blue); border: 2px solid var(--blue); border-radius: 999px; padding: 8px 14px; font: 600 .9rem Inter, sans-serif; cursor: pointer; min-height: 40px; }
.chip-danger { color: var(--error); border-color: var(--error); }
.status-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.status-btns .btn { cursor: pointer; font-family: inherit; padding: 12px; }
.nav button.btn-small { cursor: pointer; font: inherit; font-weight: 700; }
.inq-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inq-filter { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.inq-filter select { width: auto; }
.inq-list { display: grid; gap: 14px; margin-top: 20px; }
.inq { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 12px; padding: 18px; }
.inq-new { border-left-color: var(--gold); }
.inq-booked { border-left-color: var(--green); }
.inq-declined { opacity: .8; }
.inq header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.inq h3 { margin: 0; }
.inq-badge { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.inq-service { color: var(--purple); font-weight: 600; margin: 4px 0 10px; }
.inq dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 14px; }
.inq dt { color: var(--muted); font-weight: 600; }
.inq dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.inq-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.inq-actions label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.inq-actions select { width: auto; min-height: 40px; padding: 6px 10px; }

@media (max-width: 900px) {
  .book-layout, .admin-cal-wrap { grid-template-columns: 1fr; gap: 24px; }
  .book-cal { position: static; }
}
@media (max-width: 640px) {
  .hero-compact { padding: 40px 0 16px; }
  .book-cal, .book-form { padding: 16px; margin: 0 -4px; }
  .cal-grid { border-spacing: 3px; }
  .cal-day { font-size: .9rem; border-radius: 8px; min-height: 38px; }
  .cal-day .cal-sym { font-size: .75rem; }
  .field-row { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .status-btns { grid-template-columns: 1fr; }
}

/* Live shows */
.cal-day .cal-event { color: var(--gold); }
.cal-day.is-selected .cal-event { color: var(--bg); }
.cal-legend .s-event { border-color: var(--gold); color: var(--gold); }
.shows-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.show {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 16px 20px;
}
.show-date { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: var(--lsu); line-height: 1; }
.show-mon { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.show-day { font: 800 1.6rem Fraunces, serif; color: var(--ink); }
.show-info h3 { margin: 0 0 4px; font-size: 1.15rem; }
.show-info p { margin: 0; color: var(--muted); }
.show .btn { white-space: nowrap; }
.page-book .shows { padding-bottom: 72px; }
@media (max-width: 640px) {
  .show { grid-template-columns: auto 1fr; }
  .show .btn { grid-column: 1 / -1; display: block; width: 100%; }
}

/* Fishing license callout */
.license-box { background: var(--surface); border: 2px solid var(--green); border-radius: var(--radius); padding: 28px; box-shadow: 0 0 28px rgb(61 255 143 / .15); }
.license-box h2 { margin-top: 0; }
.license-box > p { color: var(--muted); max-width: 44em; }
.license-list { padding-left: 1.2em; margin: 16px 0 0; display: grid; gap: 8px; color: var(--muted); }
.license-list strong { color: var(--ink); }
@media (max-width: 640px) { .license-box { padding: 18px; } }

/* Logo in header */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 48px; height: 48px; flex: none; }
@media (max-width: 640px) { .brand-mark { width: 32px; height: 32px; } .brand { gap: 7px; } }
@media (max-width: 440px) {
  /* Logo only on small phones; the name stays available to screen readers */
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand-mark { width: 40px; height: 40px; }
}

/* Veteran-owned badge */
.vet-badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0;
  padding: 8px 18px 8px 8px; border: 2px solid var(--gold); border-radius: 999px;
  background: rgb(70 29 124 / .45); color: var(--ink); font-size: .95rem;
}
.vet-badge::before { content: "★"; color: var(--gold); font-size: 1.1rem; margin-left: 4px; }
.vet-badge:has(img)::before { content: none; }
.vet-badge img { width: 64px; height: 64px; object-fit: contain; flex: none; margin: -4px 0; }
.vet-badge strong { color: var(--gold); }
.foot-vet { color: var(--gold); font-weight: 600; }
@media (max-width: 640px) { .vet-badge { font-size: .88rem; border-radius: 16px; } }

/* "PROUD" in rainbow letters. Every color stop passes 4.5:1 on the badge, including color-blind simulations. */
.proud { font-weight: 800; letter-spacing: .06em; color: var(--gold); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .proud {
    background: linear-gradient(90deg, #FF8F8F 0%, #FFA94D 22%, #FDD023 42%, #3DFF8F 62%, #2EC5FF 80%, #C59CFF 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
@media (forced-colors: active) { .proud { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; } }
@media (prefers-contrast: more) { .proud { background: none; -webkit-text-fill-color: var(--gold); color: var(--gold); } }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Layout standards pass ---------- */
/* Golden ratio (φ ≈ 1.618): hero text/photo columns and body line height */
.hero-split { grid-template-columns: 1.618fr 1fr; }
body { line-height: 1.618; }
/* Comfortable reading length (45–75 characters per line) */
.faq details p { max-width: 62ch; }
.contact p { max-width: 62ch; margin-left: auto; margin-right: auto; }
/* Tap targets: at least 24px everywhere (WCAG 2.5.8), 44px where practical */
.nav nav a { padding: 10px 8px; min-height: 44px; display: inline-flex; align-items: center; }
.nav nav a.btn-small { padding: 8px 16px; }
.choice input { width: 24px; height: 24px; }
.choice { min-height: 52px; }
@media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; } }

/* Stacked hero (tablet / phone): wide photo instead of a tall one, never taller than the screen allows */
@media (max-width: 860px) {
  .hero-photo { aspect-ratio: 16 / 10 !important; max-height: 62vh; width: 100%; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero-photo { max-height: 78vh; }
  .hero { padding-top: 32px; }
}

/* No lonely last card: explicit columns, and a single leftover card spans the full row */
@media (min-width: 641px) and (max-width: 1000px) {
  .grid, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gallery > figure:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9 !important; }
}
@media (min-width: 1001px) {
  .grid:not(.grid-2), .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid:not(.grid-2) > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .gallery > figure:last-child:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 21 / 9 !important; }
}
.hero-photo img { object-position: 50% 32%; }

/* About page story */
.story p { max-width: 62ch; color: var(--muted); font-size: 1.08rem; }
.story p:first-of-type { color: var(--ink); font-size: 1.2rem; }
.story .signoff { font: 800 1.5rem Fraunces, serif; color: var(--gold); margin-top: 24px; }

/* Where I've played */
.gig { grid-template-columns: auto 1fr auto; align-items: start; }
.gig .show-day { font-size: 1.15rem; }
.gig-where { color: var(--gold) !important; font-weight: 600; margin: 0 0 4px !important; }
.gig-links { margin-top: 8px !important; }
.gig-links a { color: var(--blue); font-weight: 600; }
.gig-flyer { margin: 0; width: 140px; border-radius: 12px; overflow: hidden; border: 2px solid var(--purple); }
.gig-flyer img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .gig { grid-template-columns: auto 1fr; } .gig-flyer { grid-column: 1 / -1; width: 100%; max-width: 320px; } }

/* "Coming soon" label: spelled out in text, not shown by color alone */
.soon { display: inline-block; margin-left: .4em; padding: 1px 9px; border: 2px solid var(--gold); border-radius: 999px;
  color: var(--gold); font: 700 .78rem/1.5 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.is-soon { border-style: dashed !important; }

/* Rubber-duck parade (footer). Golden ratio: height = 26px × φ ≈ 42px, gap = 42 / φ³ ≈ 10px so five fit a phone,
   opacity .764 keeps them a quiet accent, never louder than the text. */
.duck-row { display: flex; justify-content: center; gap: 10px; margin: 0 0 16px; }
.duck-row img { height: 42px; width: auto; opacity: .764; }

/* Duck Wild colorways on /merch */
.duck-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 26px; padding: 0; list-style: none; }
.duck-swatches a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; }
.duck-swatches img { height: 26px; width: auto; }
.duckwild-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 16px 0 0; }
.duckwild-hero img { display: block; width: 100%; max-width: 880px; height: auto; margin: 0 auto; }

/* Rubber duckies + neon outline ducks on /merch */
.duck-flock { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; margin: 12px 0 26px; padding: 0; list-style: none; }
.duck-flock li { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 10px 12px; }
.duck-flock img { display: block; height: 96px; width: auto; margin: 0 auto 10px; }
.duck-flock a { display: inline-block; min-height: 24px; }

/* Folding phones / very narrow screens: tighten the header so logo + menu fit without sideways scroll */
@media (max-width: 330px) {
  .nav { padding-left: 10px; padding-right: 10px; }
  .nav nav { gap: 2px; }
  .nav nav a { padding: 10px 4px; font-size: .8rem; }
  .nav nav .btn-small { padding: 6px 10px; }
  .brand-mark { width: 34px; height: 34px; }
}

/* ---------- Disco duck stage (home hero + 404) ----------
   The duck dances, the ball throws light beams, the floor pulses.
   Motion follows the golden ratio: bounce 13px ≈ 8φ, sway 3.8°, beat 0.618s / 1.236s. */
.disco { text-align: center; }
.disco-stage { position: relative; width: min(420px, 82vw); margin: 0 auto; aspect-ratio: 720 / 736; }
.disco-beams { position: absolute; left: 50%; top: 4%; width: 220%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .55;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgb(255 92 200 / .55) 10deg, transparent 13deg 52deg, rgb(46 197 255 / .5) 55deg, transparent 58deg 98deg,
    rgb(253 208 35 / .5) 101deg, transparent 104deg 150deg, rgb(61 255 143 / .5) 153deg, transparent 156deg 200deg, rgb(185 140 255 / .55) 203deg, transparent 206deg 250deg,
    rgb(255 92 200 / .5) 253deg, transparent 256deg 300deg, rgb(46 197 255 / .5) 303deg, transparent 306deg 360deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 62%); mask: radial-gradient(circle, #000 0 18%, transparent 62%);
  animation: disco-spin 9.7s linear infinite; }
.disco-duck { position: relative; display: block; width: 100%; height: auto; transform-origin: 50% 92%; animation: disco-dance 1.236s ease-in-out infinite;
  filter: drop-shadow(0 0 26px rgb(185 140 255 / .5)); }
.disco-floor { position: absolute; left: 8%; right: 8%; bottom: -4%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 92 200 / .55), rgb(46 197 255 / .25) 60%, transparent); animation: disco-pulse .618s ease-in-out infinite alternate; }
.disco-spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px currentColor; opacity: 0; animation: disco-twinkle 1.854s ease-in-out infinite; }
.disco-spark:nth-of-type(1) { left: 6%; top: 18%; color: #FF5CC8; }
.disco-spark:nth-of-type(2) { right: 4%; top: 30%; color: #2EC5FF; animation-delay: .4s; }
.disco-spark:nth-of-type(3) { left: 14%; top: 62%; color: #FDD023; animation-delay: .9s; }
.disco-spark:nth-of-type(4) { right: 12%; top: 70%; color: #3DFF8F; animation-delay: 1.3s; }
.disco .btn { margin-top: 26px; font-size: 1.15rem; padding-left: 32px; padding-right: 32px; }
@keyframes disco-dance { 0%, 100% { transform: translateY(0) rotate(-3.8deg); } 25% { transform: translateY(-13px) rotate(0deg); } 50% { transform: translateY(0) rotate(3.8deg); } 75% { transform: translateY(-13px) rotate(0deg); } }
@keyframes disco-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes disco-pulse { from { opacity: .45; transform: scaleX(.92); } to { opacity: 1; transform: scaleX(1.04); } }
@keyframes disco-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .disco-beams, .disco-duck, .disco-floor, .disco-spark { animation: none; } .disco-spark { opacity: .7; } }
.hero-split .disco-stage { width: min(420px, 100%); }
/* Phones/tablets: the dancing duck leads (visually first; the h1 stays first in the HTML for SEO) */
@media (max-width: 860px) { .hero-split .disco { order: -1; } .hero-split .disco-stage { width: min(320px, 72vw); } .hero-split .disco .btn { margin-top: 20px; } }
body { overflow-x: clip; }   /* light beams run to the screen edge but never cause sideways scroll */

/* Photo pair: portrait + wide stage photo, sized by the golden ratio (1 : φ) */
.photo-pair { display: grid; grid-template-columns: 1fr 1.618fr; gap: 16px; margin-top: 24px; }
.photo-pair .photo { margin: 0; aspect-ratio: 4 / 5; }
.photo-pair .photo.wide { aspect-ratio: auto; }
@media (max-width: 640px) { .photo-pair { grid-template-columns: 1fr; } .photo-pair .photo, .photo-pair .photo.wide { aspect-ratio: 4 / 3 !important; } }

/* Headliner duck (DJ page): a portrait bust, so it nods to the beat instead of dancing,
   and its flat bottom edge melts into the floor glow. Same golden-ratio timing as the disco duck. */
.disco-stage.is-headliner { aspect-ratio: 720 / 693; }
.disco-stage.is-headliner .disco-duck { animation: disco-nod .618s ease-in-out infinite alternate; transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent);
  filter: none; }   /* no drop-shadow here: mask + filter together paint a dark box in Chromium; this duck has its own neon rim light */
@keyframes disco-nod { from { transform: translateY(0) rotate(-1.6deg); } to { transform: translateY(5px) rotate(1.6deg); } }
@media (prefers-reduced-motion: reduce) { .disco-stage.is-headliner .disco-duck { animation: none; } }