:root {
  --teal: #0d5c63; --teal-dark: #083f45; --teal-soft: #e3f2f1;
  --orange: #f07f2a; --orange-dark: #a8480b; --cream: #fff8ef;
  --ink: #1d2b30; --muted: #4f5f63; --line: #ecdcc8;
  color-scheme: light; font-family: "Segoe UI", system-ui, sans-serif; color: var(--ink);
  background: var(--cream); line-height: 1.6;
}
* { box-sizing: border-box; }
html { overflow-wrap: anywhere; }
fieldset, main, .card, .split > *, .banner > *, .inline > * { min-width: 0; }
body { margin: 0; background: radial-gradient(circle at 100% 0, #ffe7cf 0, transparent 40rem), var(--cream); min-height: 100vh; }
header {
  background: linear-gradient(120deg, var(--teal-dark), var(--teal) 60%, #13777f);
  color: white; padding: .8rem max(1rem, calc((100% - 70rem)/2));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  box-shadow: 0 .25rem 0 var(--orange);
}
header a { color: white; }
.brand { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; font-weight: 750; text-decoration: none; letter-spacing: -.01em; }
.brand img { background: var(--cream); border-radius: .8rem; padding: .2rem; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; padding: .35rem .8rem; border-radius: 999px; font-weight: 600; }
nav a:hover { background: rgb(255 255 255 / .15); }
nav form { margin: 0; }
nav button.secondary { background: transparent; color: white; border-color: rgb(255 255 255 / .6); padding: .3rem .9rem; }
main { max-width: 70rem; margin: 1.5rem auto; padding: 0 1rem; min-height: 65vh; }
footer { text-align: center; padding: 1.5rem; color: var(--muted); font-size: .9rem; }
h1, h2, h3 { line-height: 1.2; color: var(--teal-dark); letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
a { color: var(--teal); text-underline-offset: .15em; }
button {
  font: inherit; font-weight: 650; background: var(--orange-dark); color: white;
  border: 2px solid var(--orange-dark); border-radius: 999px; padding: .5rem 1.3rem; cursor: pointer; min-height: 2.75rem;
  transition: transform .1s, box-shadow .1s;
}
button:hover { transform: translateY(-1px); box-shadow: 0 .3rem .8rem rgb(168 72 11 / .3); }
button.secondary { background: white; color: var(--teal-dark); border-color: var(--teal); }
button.secondary:hover { box-shadow: 0 .3rem .8rem rgb(13 92 99 / .2); }
input:not([type=checkbox],[type=hidden]), select, textarea {
  font: inherit; border: 2px solid #c9b8a3; border-radius: .6rem; padding: .5rem .7rem;
  width: 100%; max-width: 32rem; background: white; color: var(--ink);
  min-width: 0; min-height: 2.75rem;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); }
input[type=checkbox] { width: 1.25rem; height: 1.25rem; vertical-align: middle; margin-right: .4rem; accent-color: var(--teal); }
label { display: block; font-weight: 600; }
label:has(input[type=checkbox]) { min-height: 2.75rem; display: flex; align-items: center; }
summary { cursor: pointer; min-height: 2.75rem; padding-block: .5rem; }
form p { margin: 1rem 0; }
.card {
  background: white; padding: clamp(1rem, 3vw, 2rem); margin: 1.25rem 0;
  border: 1px solid var(--line); border-radius: 1.2rem; box-shadow: 0 .6rem 1.5rem rgb(120 70 20 / .07);
}
.narrow { max-width: 42rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); align-items: center; max-width: 60rem; margin-inline: auto; }
.hero-art { width: 100%; height: auto; border-radius: 1rem; }
.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: linear-gradient(110deg, var(--teal-soft), #fff1e2); border-radius: 1.2rem; padding: 0 0 0 clamp(1rem, 3vw, 2rem); overflow: hidden;
}
.banner h1 { margin-bottom: .2rem; }
.banner p { margin-top: 0; color: var(--muted); }
.banner img { width: clamp(8rem, 25vw, 14rem); height: clamp(8rem, 25vw, 14rem); object-fit: cover; border-radius: 50% 0 0 50%; }
.meals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1rem; }
.meals article { background: var(--cream); border: 2px dashed var(--line); border-radius: 1rem; padding: 1rem 1.2rem; }
.meals article.booked { background: var(--teal-soft); border: 2px solid var(--teal); }
.meals article.booked h3::after { content: " ✓"; color: var(--teal); }
.notice, .message { border-left: .35rem solid var(--orange-dark); background: #fff1dc; padding: .8rem 1rem; border-radius: .6rem; }
.message { border-color: #297550; background: #edf9f1; }
.redeem .message.success {
  min-height: 9rem; padding-left: 10rem; display: flex; align-items: center; font-size: 1.5rem; font-weight: 700;
  background: #edf9f1 url("redeemed.1fca660baba7.webp") no-repeat 1rem center / 8rem; animation: pop .35s ease-out;
}
@keyframes pop { from { transform: scale(.95); opacity: 0; } }
.muted, .helptext { color: var(--muted); }
.errorlist { color: #a32020; padding-left: 1.5rem; }
.inline { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.inline p { margin: 0; }
.inline > p { flex: 1 1 14rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { background: var(--teal-soft); color: var(--teal-dark); }
th, td { padding: .7rem; border-bottom: 1px solid var(--line); }
tbody tr:hover { background: #fffaf3; }
caption { text-align: left; font-weight: 600; margin-bottom: .5rem; }
.attendance-note { min-width: 14rem; }
.attendance-note textarea { display: block; margin-bottom: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
hr { border: 0; border-top: 2px dashed var(--line); margin: 1.5rem 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.skip { position: absolute; top: -5rem; background: white; padding: .8rem; z-index: 1; }
.skip:focus { top: 0; }
@media (max-width: 40rem) {
  header { gap: .75rem; padding: .75rem; }
  nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  nav a, nav button { width: 100%; justify-content: center; text-align: center; }
  main { margin: 1rem auto; padding: 0 .75rem; }
  .card { padding: .85rem; }
  input, select, textarea { font-size: 1rem !important; }
  form > button, fieldset > button { width: 100%; margin-top: .5rem; }
  fieldset { margin-inline: 0; padding: .75rem; }
  .banner { padding: 1rem; }
  .banner img { display: none; }
  .split { grid-template-columns: 1fr; }
  .inline { align-items: stretch; }
  .inline > * { flex-basis: 100%; }
  .hero-art { max-height: 14rem; object-fit: cover; }
  .date-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: center; }
  .date-nav a { flex-shrink: 0; min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
  .mobile-table, .mobile-table caption, .mobile-table tbody { display: block; width: 100%; }
  .mobile-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-table tr { display: grid; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: .75rem; }
  .mobile-table td, .mobile-table th { display: block; min-width: 0; }
  .mobile-table td:last-child { border-bottom: 0; border-radius: 0 0 .75rem .75rem; }
  .mobile-table td[data-label]::before { content: attr(data-label); display: block; color: var(--teal-dark); font-weight: 650; margin-bottom: .25rem; }
  .attendance-note { min-width: 0; }
  .redeem .message.success { padding-left: 7rem; background-size: 5rem; font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.status { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-weight: 600; font-size: .9em; }
.status-redeemed { background: #dff3e6; color: #17603a; }
.status-registered { background: var(--teal-soft); color: var(--teal-dark); }
.status-no-show { background: #b42318; color: white; }
.no-show-row td { background: #fff1ef; }
tr.group th { background: var(--cream); color: var(--orange-dark); border-top: 2px solid var(--line); }
.date-nav a { display: inline-block; padding: 0 .6rem; border-radius: .5rem; text-decoration: none; background: var(--teal-soft); color: var(--teal-dark); }
.special { color: var(--orange-dark); font-weight: 700; margin: .2rem 0; }