/* Public site styles: landing page, attendee manage page, privacy and terms.
   Visual language follows the flyer: cream field, deep navy serif display type,
   restrained metallic gold, near-black wave shapes. Mobile first. */

:root {
  --cream: #faf6ee;
  --cream-deep: #f3ecdd;
  --paper: #fffdf9;
  --navy: #1c3a4e;
  --navy-deep: #132a39;
  --ink: #191415;
  --ink-soft: #2a2224;
  --text: #25333d;
  --muted: #55626b;
  --line: #e2d7c1;
  --line-strong: #cdbf9f;
  /* Outlines of things people operate (date cards, radio rings): at least 3:1 against white. */
  --control-line: #948a74;
  --gold: #b98a2e;
  --gold-deep: #76550f;
  --gold-soft: #ecd594;
  --danger: #a1261d;
  --danger-bg: #fbeeec;
  --success: #1d6642;
  --success-bg: #ebf5ee;
  --focus: #0b63a8;

  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "DM Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(25, 20, 21, .06), 0 4px 14px rgba(25, 20, 21, .06);
  --shadow-2: 0 2px 4px rgba(25, 20, 21, .08), 0 18px 44px rgba(25, 20, 21, .16);
  --gutter: 20px;
  --wrap: 1120px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }

h1, h2, h3 { font-family: var(--serif); color: var(--navy); margin: 0; line-height: 1.12; font-weight: 700; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0 0 1em; overflow-wrap: break-word; }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-soft); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.pre-line { white-space: pre-line; }
.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; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  border: 1.5px solid transparent; border-radius: 10px;
  font: 600 17px/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; text-align: center;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 18px rgba(28, 58, 78, .22); }
.btn-primary:hover { background: var(--navy-deep); }
.btn-primary .arrow { transition: transform .18s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(3px); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: rgba(28, 58, 78, .07); }
.btn-quiet { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn-quiet:hover { background: rgba(28, 58, 78, .05); border-color: var(--navy); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #84201a; }
.btn-gold { background: linear-gradient(180deg, #f0dc9c, #d9b659); color: var(--navy-deep); border-color: #c9a548; }
.btn-gold:hover { background: linear-gradient(180deg, #f4e3ae, #dfbf68); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; flex: none; }
.spinner-dark { border-color: rgba(28, 58, 78, .2); border-top-color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Shared small parts ---------- */

.eyebrow { font: 600 13px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 14px; }
.rule { display: block; width: 56px; height: 2px; background: linear-gradient(90deg, #9c7420, #e4c874, #9c7420); border: 0; margin: 18px 0; }
.rule-center { margin-left: auto; margin-right: auto; }

.section { padding: 64px 0; position: relative; }
.section-head { max-width: 680px; margin: 0 0 32px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); }
.section-head p { color: var(--muted); margin: 14px 0 0; }

.notice { border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--radius); padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; }
.notice svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.notice p { margin: 0; }
.notice-error { border-color: #e2b3ae; background: var(--danger-bg); color: #6f1a14; }
.notice-success { border-color: #b6d6c2; background: var(--success-bg); color: #164d32; }

/* ---------- Header + hero ---------- */

.hero { position: relative; padding: 0 0 56px; overflow: clip; }
.waves-corner { position: absolute; top: 0; width: clamp(132px, 27vw, 380px); height: auto; color: var(--cream); pointer-events: none; z-index: 0; }
.waves-corner.left { left: 0; }
.waves-corner.right { right: 0; transform: scaleX(-1); }

.site-header { position: relative; z-index: 2; text-align: center; padding: 34px var(--gutter) 0; }
.wordmark { display: inline-block; max-width: min(46vw, 420px); font: 500 13px/1.35 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--navy); text-decoration: none; padding: 10px 4px; }
a.wordmark:hover { text-decoration: underline; }

.hero-grid { position: relative; z-index: 1; display: grid; gap: 40px; padding-top: 40px; }
.hero-copy { text-align: center; min-width: 0; }
.hero h1 { font-size: clamp(2.35rem, 1.3rem + 5.4vw, 4.4rem); font-weight: 800; letter-spacing: -.01em; }
.hero-sub { font: italic 500 clamp(1.25rem, 1rem + 1.3vw, 1.75rem)/1.3 var(--serif); color: var(--navy); margin: 16px 0 0; }
.hero-intro { color: var(--text); max-width: 34em; margin: 18px auto 0; }
.hero .rule { margin: 22px auto; }

.next-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 22px 20px 20px; margin: 44px auto 0; max-width: 460px; text-align: center; }
.next-card::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #9c7420, #ecd594 45%, #b98a2e); }
.next-label { font: 600 12px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 8px; }
.next-date { font: 700 1.35rem/1.25 var(--serif); color: var(--navy); margin: 0; }
.next-time { color: var(--muted); margin: 4px 0 0; }
.next-soon { font: 500 1.15rem/1.45 var(--serif); color: var(--navy); margin: 0; }

.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.countdown li { text-align: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 2px 8px; }
.countdown b { display: block; font: 700 1.7rem/1 var(--serif); color: var(--navy); font-variant-numeric: tabular-nums lining-nums; }
.countdown span { display: block; margin-top: 6px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.next-card .btn { margin-top: 18px; }
.next-seat { margin: 12px 0 0; font-size: 15px; color: var(--muted); }

.hero-art { position: relative; justify-self: center; width: min(76vw, 340px); }
.flyer { margin: 0; background: #fff; padding: 8px; border-radius: 6px; box-shadow: var(--shadow-2); transform: rotate(-1.5deg); }
.flyer img { width: 100%; border-radius: 2px; background: var(--cream-deep); }
.gold-tag { position: absolute; right: -10px; top: -34px; width: 104px; height: auto; transform: rotate(9deg); filter: drop-shadow(0 6px 10px rgba(25, 20, 21, .28)); z-index: 2; }

/* ---------- Videos ---------- */

.videos-grid { display: grid; gap: 28px; }
.video-card { margin: 0; min-width: 0; }
.video-frame { position: relative; background: var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 16 / 9; max-height: 78vh; margin: 0 auto; }
.video-frame video, .video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.video-frame img { object-fit: cover; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; border: 0; padding: 0; background: linear-gradient(180deg, rgba(25, 20, 21, .05), rgba(25, 20, 21, .4)); cursor: pointer; color: #fff; }
.video-play .disc { width: 76px; height: 76px; border-radius: 50%; background: rgba(250, 246, 238, .96); color: var(--navy); display: grid; place-items: center; box-shadow: 0 8px 26px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); }
.video-play:hover .disc { transform: scale(1.06); }
.video-play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-card figcaption { margin-top: 14px; font: 600 1.15rem/1.3 var(--serif); color: var(--navy); }
.video-card .dur { font: 400 14px var(--sans); color: var(--muted); margin-left: 8px; white-space: nowrap; }

/* ---------- What you'll learn (navy band) ---------- */

.on-dark { background: var(--navy); color: #eef2f4; }
.on-dark h2, .on-dark h3 { color: #fff; }
.on-dark .eyebrow { color: var(--gold-soft); }
.on-dark .section-head p { color: #cfdbe2; }
.learn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: learn; }
.learn-list li { counter-increment: learn; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 20px 18px; border: 1px solid rgba(236, 213, 148, .28); border-radius: var(--radius); background: rgba(255, 255, 255, .04); font-size: 1.06rem; line-height: 1.5; overflow-wrap: anywhere; }
.learn-list li::before { content: counter(learn, decimal-leading-zero); font: italic 700 1.9rem/1 var(--serif); color: var(--gold-soft); padding-top: 2px; }

/* ---------- Presenters ---------- */

.presenters-grid { display: grid; gap: 22px; }
.presenter { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center; box-shadow: var(--shadow-1); min-width: 0; }
.presenter-photo { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 18px; overflow: hidden; background: var(--ink); border: 4px solid var(--ink); box-shadow: 0 0 0 2px var(--gold-soft); display: grid; place-items: center; }
.presenter-photo img { width: 100%; height: 100%; object-fit: cover; }
.presenter-photo span { font: 700 2.4rem/1 var(--serif); color: var(--gold-soft); }
.presenter h3 { font-size: 1.4rem; }
.presenter .role { font: 600 12.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 8px 0 0; }
.presenter .bio { margin: 14px 0 0; color: var(--text); font-size: 16px; text-align: left; }

/* ---------- Reserve: dates + form ---------- */

.reserve { background: var(--cream-deep); }
.reserve-grid { display: grid; gap: 28px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); padding: 24px 18px; min-width: 0; }
.step { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 0; }
.step-num { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 16px/1 var(--serif); }
.step-title { font: 700 1.3rem/1.2 var(--serif); color: var(--navy); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; width: 100%; }

.date-list { display: grid; gap: 12px; }
.date-card { position: relative; display: grid; grid-template-columns: 68px 1fr 26px; gap: 14px; align-items: center; background: var(--paper); border: 1.5px solid var(--control-line); border-radius: var(--radius); padding: 14px; min-height: 96px; cursor: pointer; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease); -webkit-tap-highlight-color: transparent; }
.date-card:hover { border-color: var(--navy); }
.date-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.date-card.is-selected { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 2px var(--navy), var(--shadow-1); }
.date-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.date-card.is-full { cursor: not-allowed; background: #f4efe4; border-style: dashed; }
.date-card.is-full:hover { border-color: var(--control-line); }
/* A full date is told apart by the dashed border, the grey tile and the "Full" pill. Every colour is set
   outright (no see-through fade) so the text keeps a contrast of at least 4.5:1 on the card. */
.date-card.is-full .date-tile { background: #66727b; }
.date-card.is-full .date-tile .m, .date-card.is-full .date-tile .w { color: #fff; }
.date-card.is-full .date-when, .date-card.is-full .date-time, .date-card.is-full .date-title { color: #565c62; }
.date-tile { display: grid; justify-items: center; align-content: center; width: 68px; height: 72px; border-radius: 10px; background: var(--navy); color: #fff; text-align: center; }
.date-tile .m { font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }
.date-tile .d { font: 700 1.75rem/1.05 var(--serif); margin-top: 3px; font-variant-numeric: lining-nums; }
.date-tile .w { font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; color: #d3dfe6; }
.date-main { min-width: 0; }
.date-when { display: block; font: 600 1.05rem/1.3 var(--sans); color: var(--navy); text-wrap: balance; }
.date-time { display: block; color: var(--text); font-size: 15.5px; margin-top: 2px; }
.date-title { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; overflow-wrap: anywhere; }
.seat { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font: 600 13px/1.3 var(--sans); }
.seat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.seat-open { background: var(--success-bg); color: #175c3a; }
.seat-few { background: #fbf0cf; color: #6b4b06; }
.seat-full { background: #e9e3d6; color: #4b4740; }
.radio-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--control-line); display: grid; place-items: center; background: #fff; justify-self: end; }
.radio-dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); transform: scale(0); transition: transform .16s var(--ease); }
.date-card.is-selected .radio-dot { border-color: var(--navy); }
.date-card.is-selected .radio-dot::after { transform: scale(1); }
.date-card.is-full .radio-dot { visibility: hidden; }
.tz-note { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }

.form-grid { display: grid; gap: 16px; }
.field { min-width: 0; }
.field label, .field .label { display: block; font: 600 15px/1.3 var(--sans); color: var(--navy); margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"] {
  display: block; width: 100%; min-height: 52px; padding: 12px 14px;
  font: 400 17px/1.3 var(--sans); color: var(--ink);
  background: #fff; border: 1.5px solid #8a806c; border-radius: 10px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder { color: #6a7076; opacity: 1; }
.field input:hover { border-color: var(--navy); }
.field input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(11, 99, 168, .28); }
.field input[aria-invalid="true"]:not([type="checkbox"]) { border-color: var(--danger); background-color: #fffafa; }
.hint { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); }
.field-error { margin: 6px 0 0; font: 500 14.5px/1.4 var(--sans); color: var(--danger); display: flex; gap: 6px; align-items: flex-start; }
.field-error::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: var(--icon-alert) center / contain no-repeat; mask: var(--icon-alert) center / contain no-repeat; }
:root { --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E"); }

.hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

.consent { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 16px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--cream); }
.consent.has-error { border-color: var(--danger); }
/* A 44px tap area around a 26px drawn box. */
.consent input { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; margin: -7px 0 0 -9px; border-radius: 10px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect x='1' y='1' width='24' height='24' rx='5' fill='white' stroke='%235b564b' stroke-width='2'/%3E%3C/svg%3E") center / 26px no-repeat; }
.consent input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect x='1' y='1' width='24' height='24' rx='5' fill='%231c3a4e' stroke='%231c3a4e' stroke-width='2'/%3E%3Cpath d='M7 13.500l4 4 8-9' fill='none' stroke='white' stroke-width='2.600' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.consent input:focus-visible { outline-offset: -4px; }
.consent-body { min-width: 0; }
.consent-title { display: block; font: 600 16px/1.35 var(--sans); color: var(--navy); cursor: pointer; padding: 3px 0; }
.consent-text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.consent-text a { font-weight: 600; }
.consent-optional { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }

.form-foot { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); text-align: center; }
.form-alert { margin-bottom: 4px; }

.confirm { text-align: center; }
.confirm-badge { width: 68px; height: 68px; border-radius: 50%; margin: 4px auto 18px; display: grid; place-items: center; background: var(--success-bg); color: var(--success); border: 2px solid #b6d6c2; }
.confirm-badge svg { width: 34px; height: 34px; }
.confirm h3 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); }
.confirm-when { margin: 12px 0 0; font: 600 1.08rem/1.4 var(--sans); color: var(--navy); }
.confirm-title { margin: 4px 0 0; color: var(--muted); font-size: 15.5px; }
.next-steps { text-align: left; margin: 24px 0 0; padding: 20px 18px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }
.next-steps h4 { margin: 0 0 12px; font: 600 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.next-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
.next-steps li { counter-increment: st; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 16px; line-height: 1.5; }
.next-steps li::before { content: counter(st); width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--sans); margin-top: 1px; }
.actions { display: grid; gap: 12px; margin: 22px 0 0; }
.link-btn { background: none; border: 0; padding: 12px 8px; min-height: 44px; font: 500 16px var(--sans); color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.soon { text-align: center; max-width: 620px; margin: 0 auto; padding: 40px 22px; }
.soon svg { width: 44px; height: 44px; color: var(--gold); margin: 0 auto 14px; display: block; }
.soon h3 { font-size: 1.6rem; }
.soon p { margin: 12px 0 0; color: var(--text); }

/* ---------- FAQ ---------- */

.faq-list { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line-strong); }
.faq-list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 20px 4px; min-height: 60px; font: 600 1.12rem/1.35 var(--serif); color: var(--navy); overflow-wrap: anywhere; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3a4e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .2s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .answer { padding: 0 44px 22px 4px; margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* ---------- Footer ---------- */

.footer-waves { display: block; width: 100%; height: clamp(54px, 9vw, 120px); color: var(--cream); margin-bottom: -1px; }
.site-footer { background: var(--ink); color: #e9e2d6; padding: 36px 0 40px; font-size: 16px; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 26px; }
.footer-org { font: 700 1.45rem/1.2 var(--serif); color: #fff; margin: 0 0 10px; }
.footer-text { color: #d6cec1; max-width: 46ch; margin: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 22px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; }
.footer-label { font: 600 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 6px; }
.footer-fine { border-top: 1px solid rgba(233, 226, 214, .2); margin-top: 28px; padding-top: 20px; color: #c3bbae; font-size: 14.5px; }
.footer-fine p { margin: 0 0 8px; }
[data-contact=""] { display: none !important; }

/* ---------- Sticky reserve bar (small screens) ---------- */

.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255, 253, 249, .97); border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 26px rgba(25, 20, 21, .12); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; transform: translateY(110%); visibility: hidden; transition: transform .26s var(--ease), visibility 0s linear .26s; }
.sticky-cta.is-on { transform: none; visibility: visible; transition: transform .26s var(--ease), visibility 0s; }
.sticky-cta .when { min-width: 0; font: 600 14.5px/1.3 var(--sans); color: var(--navy); }
.sticky-cta .when small { display: block; font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.sticky-cta .btn { min-height: 48px; padding: 12px 18px; font-size: 16px; white-space: nowrap; }
body.has-sticky { padding-bottom: 0; }
body.has-sticky .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Manage page ---------- */

.page-plain .site-header { padding-bottom: 8px; }
.manage { padding: 28px 0 72px; position: relative; z-index: 1; }
.manage-card { max-width: 620px; margin: 0 auto; }
.manage-card > h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.7rem); text-align: center; }
.manage-lead { text-align: center; color: var(--muted); margin: 12px 0 0; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font: 600 14px/1.3 var(--sans); }
.status-pill svg { width: 16px; height: 16px; }
.status-ok { background: var(--success-bg); color: #175c3a; }
.status-off { background: #e9e3d6; color: #4b4740; }
.status-warn { background: #fbf0cf; color: #6b4b06; }
.panel.ticket { margin: 26px 0 0; padding: 0; overflow: hidden; }
.ticket-top { padding: 22px 20px; display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; }
.ticket-top .date-tile { width: 76px; height: 84px; }
.ticket-top .date-tile .d { font-size: 2rem; }
.ticket-when { font: 700 1.3rem/1.25 var(--serif); color: var(--navy); margin: 0; }
.ticket-time { margin: 4px 0 0; color: var(--text); }
.ticket-title { margin: 4px 0 0; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.ticket-status { padding: 0 20px 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-sec { border-top: 1px dashed var(--line-strong); padding: 20px; }
.ticket-sec h2 { font: 600 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 10px; }
.ticket-sec p { margin: 0 0 12px; }
.ticket-sec p:last-child { margin-bottom: 0; }
.join-box { background: var(--navy); color: #eef2f4; }
.join-box h2 { color: var(--gold-soft); }
.join-wait { display: flex; gap: 12px; align-items: flex-start; }
.join-wait svg { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--muted); }
.manage-foot { text-align: center; margin-top: 26px; }
.skeleton { border-radius: var(--radius); background: linear-gradient(100deg, #efe7d6 30%, #f8f2e6 50%, #efe7d6 70%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

dialog.modal { border: 0; border-radius: 16px; padding: 26px 22px 22px; width: min(92vw, 440px); background: var(--paper); color: var(--text); box-shadow: var(--shadow-2); }
dialog.modal::backdrop { background: rgba(25, 20, 21, .55); }
dialog.modal h2 { font-size: 1.5rem; }
dialog.modal p { margin: 12px 0 0; }
dialog.modal .actions { margin-top: 22px; }

/* ---------- Legal pages ---------- */

.legal { padding: 24px 0 72px; position: relative; z-index: 1; }
.legal-body { max-width: 720px; margin: 0 auto; }
.legal-body h1 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3rem); margin-top: 18px; }
.legal-body h2 { font-size: 1.4rem; margin: 2.1em 0 .6em; scroll-margin-top: 20px; }
.legal-body .lede { font-size: 1.1rem; color: var(--text); margin-top: 18px; }
.legal-body .callout { border-left: 3px solid var(--gold); background: var(--paper); padding: 16px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.back-link svg { width: 18px; height: 18px; }
.legal-nav { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 6px 26px; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- Larger screens ---------- */

@media (min-width: 480px) {
  .form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .actions.row { grid-template-columns: 1fr 1fr; }
  .panel { padding: 28px 24px; }
}
@media (max-width: 479.98px) {
  .form-grid .two { display: grid; gap: 16px; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
  body { font-size: 18px; }
  .section { padding: 88px 0; }
  .site-header { padding-top: 40px; }
  .wordmark { font-size: 14px; }
  .videos-grid.multi { grid-template-columns: 1fr 1fr; }
  .videos-grid.single { max-width: 880px; margin: 0 auto; }
  .learn-list { grid-template-columns: 1fr 1fr; gap: 18px; }
  .learn-list.odd-one { grid-template-columns: 1fr; max-width: 720px; }
  .presenters-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .presenters-grid.few { max-width: 760px; margin: 0 auto; }
  .panel { padding: 32px; }
  .hero-art { width: 360px; }
  .gold-tag { width: 124px; right: -22px; top: -40px; }
  .sticky-cta { display: none; }
  body.has-sticky .site-footer { padding-bottom: 40px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
  .date-list.many { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .hero { padding-bottom: 88px; }
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; padding-top: 64px; }
  .hero-copy { text-align: left; }
  .hero .rule { margin-left: 0; }
  .hero-intro { margin-left: 0; }
  .next-card { margin-left: 0; max-width: 500px; text-align: left; padding: 26px 26px 24px; }
  .next-card .btn { width: auto; min-width: 250px; }
  .hero-art { width: min(100%, 420px); justify-self: end; margin-right: 26px; }
  .flyer { transform: rotate(2deg); padding: 10px; }
  .gold-tag { width: 138px; right: -34px; top: -44px; }
  .reserve-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
  .reserve-grid.is-done { grid-template-columns: minmax(0, 680px); justify-content: center; }
  .date-list.many { grid-template-columns: 1fr; }
  .learn-list.three { grid-template-columns: repeat(3, 1fr); }
  .learn-list.three li { grid-template-columns: 1fr; gap: 12px; padding: 26px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .spinner { animation: spin 1.6s linear infinite !important; }
}

@media print {
  .sticky-cta, .waves-corner, .footer-waves, .skip-link { display: none !important; }
  body { background: #fff; }
}

/* ── additions after the review pass ───────────────────────────────────────── */

/* A long headline (the admin may type up to 120 characters) steps down in size instead of
   filling the screen and pushing the Reserve button out of sight. */
.hero h1.is-long { font-size: clamp(1.95rem, 1.2rem + 3.6vw, 3.2rem); }
.hero h1.is-xlong { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.45rem); font-weight: 700; }
@media (min-width: 1000px) {
  .hero-grid:has(h1.is-long), .hero-grid:has(h1.is-xlong) { align-items: start; }
}

/* The intro paragraph arrives in the page itself, so nothing moves when the script starts. */
.hero-intro:empty { display: none; }
/* Room is kept for the date card while its placeholder is showing. */
#next-body.expect-date { min-height: 262px; }
@media (min-width: 1000px) { #next-body.expect-date { min-height: 252px; } }
.next-seat.is-full { color: var(--text); font-weight: 500; }

/* "You already have a seat": the private link this browser remembers. */
.have-seat { max-width: 680px; margin: 0 auto 22px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line-strong); border-left: 4px solid var(--gold); border-radius: var(--radius); }
.have-seat-h { margin: 0; font: 600 15px/1.3 var(--sans); color: var(--navy); }
.have-seat ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.have-seat li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; color: var(--text); font-size: 15.5px; }
.have-seat-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--navy); }

/* Every date full: one calm notice where the form would be. */
.all-full { text-align: center; padding: 36px 22px; align-self: start; }
.all-full h3 { font-size: 1.45rem; }
.all-full:focus { outline: none; }
.all-full .all-full-lead { margin: 0 0 14px; padding: 12px 14px; background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-sm); font-weight: 500; }
.all-full p { margin: 10px 0 0; color: var(--text); }

/* The "are you a person" check keeps its space, so the button below does not jump when it loads. */
.turnstile-box .hint { margin: 0 0 8px; }
#turnstile-widget { min-height: 65px; }

/* ── reminder choice ─────────────────────────────────────────────────────── */
.choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-legend { display: block; padding: 0; margin: 0 0 10px; font: 600 16px/1.35 var(--sans); color: var(--navy); }
.choice-legend .req { font-weight: 500; font-size: 13px; letter-spacing: .04em; color: var(--gold-deep); margin-left: 6px; }
.choice-list { display: grid; gap: 10px; }
.choice-opt { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 14px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.choice-opt:hover { border-color: var(--navy); }
.choice-opt:has(input:checked) { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 1.5px var(--navy); }
.choice-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.choice-opt input { position: relative; z-index: 1; appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 1px 0 0; border-radius: 50%; border: 2px solid var(--control-line); background: #fff; cursor: pointer; display: grid; place-items: center; }
.choice-opt input::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); transform: scale(0); transition: transform .15s var(--ease); }
.choice-opt input:checked { border-color: var(--navy); }
.choice-opt input:checked::after { transform: scale(1); }
.choice-opt input:focus-visible { outline: none; }
/* The whole card answers the question: the label is stretched over it (the links in the disclosure stay above). */
.choice-title { display: block; font: 600 16px/1.35 var(--sans); color: var(--navy); cursor: pointer; padding: 2px 0; }
.choice-title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.choice-body { min-width: 0; }
.choice-body .consent-text a { position: relative; z-index: 1; }
.choice-hint { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.choice.has-error .choice-opt { border-color: var(--danger); }
.choice-follow { padding: 14px 14px 4px; margin-top: -4px; border-left: 3px solid var(--gold); background: rgba(236, 213, 148, .14); border-radius: 0 var(--radius) var(--radius) 0; }
.choice-follow .choice-list { padding-bottom: 10px; }
.submit-hint { text-align: center; margin-top: 8px; }
.submit-hint[hidden] { display: none; }

/* ── the extra signup question ───────────────────────────────────────────── */
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); pointer-events: none; }
.field select { display: block; width: 100%; min-height: 52px; padding: 12px 44px 12px 14px; font: 400 17px/1.3 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid #8a806c; border-radius: 10px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.field select:hover { border-color: var(--navy); }
.field select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(11, 99, 168, .28); }
.field select[aria-invalid="true"] { border-color: var(--danger); }
.field .optional { font-weight: 500; font-size: 13.5px; color: var(--muted); margin-left: 6px; }

/* ── skip the line ───────────────────────────────────────────────────────── */
.skip-line { padding: 48px 0; }
.skip-card { display: grid; gap: 20px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-1); }
.skip-card h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.9rem); }
.skip-card .eyebrow { margin-bottom: 8px; }
.skip-text { margin: 10px 0 0; color: var(--text); max-width: 40em; }
.skip-btn { justify-self: start; }
.skip-btn svg { width: 18px; height: 18px; }
@media (min-width: 760px) {
  .skip-card { grid-template-columns: 1fr auto; padding: 30px 34px; gap: 32px; }
}
.skip-hero { margin: 16px auto 0; font-size: 15.5px; color: var(--muted); text-align: center; }
.skip-hero a { font-weight: 600; }
.skip-mini { margin: 22px 0 0; padding: 16px 16px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); background: var(--cream); text-align: left; }
.skip-mini h4, .skip-mini h2 { margin: 0; font: 700 1.05rem/1.3 var(--serif); color: var(--navy); }
.skip-mini p { margin: 6px 0 0; font-size: 15px; color: var(--text); }
.skip-mini .btn { margin-top: 12px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 15.5px; }
.skip-mini .btn svg { width: 16px; height: 16px; }

/* ── changing reminders on the registration page ─────────────────────────── */
.pref-form { margin-top: 14px; }
.pref-form .choice-list { gap: 8px; }
.pref-consent { margin-top: 12px; }
.pref-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* A legend normally sits on the fieldset's top edge; floated, it stays inside the tinted box. */
.choice > .choice-legend { float: left; width: 100%; }
.choice > .choice-list, .choice > .field-error { clear: both; }