/* Event Studio — public attendee surfaces (editorial-poster aesthetic).
 *
 * Loaded by templates/events/base.html via the extra_styles block.
 * Classes are namespaced .evp-* (events-public) so they never collide
 * with operator surfaces in surfaces.css.
 *
 * Aesthetic anchors:
 *   - Oversized Fraunces date numerals stacked vertically on a left rail.
 *   - Monumental event titles in Fraunces 500.
 *   - JetBrains Mono used for event codes, eyebrows, "X going" counters,
 *     and the metadata stripe at the foot of every event surface.
 *   - Two-tone hairline rules (1px solid + 1px dashed at 4px offset)
 *     beneath major section headings.
 *   - Subtle paper-grain noise on detail + confirmation surfaces only.
 *   - Cream-on-ink colour inversion reserved for the live watch room.
 *
 * Single mobile breakpoint at 720px (per CLAUDE.md rule 7). Below that
 * the date stack flips to a horizontal banner; the detail page collapses
 * from rail+pane to stacked banner+body; the calendar grid collapses to
 * a date-grouped list.
 *
 * Sections (in order):
 *   A. Page chrome (.evp page wrapper, eyebrow, rule, grain)
 *   B. Editorial primitives (date stack, monument title, mono code,
 *      host pill, format tag, cta block, counter, meta stripe)
 *   C. Master calendar (.evp-calendar, hero, this-week rail, filters,
 *      grid, chips, coming-up list)
 *   D. Event detail (.evp-detail, head grid, body sections, speakers,
 *      related, knowledge sidebar)
 *   E. Page-load motion (typographic stagger, prefers-reduced-motion)
 *
 * Commits B + C will extend below section E with the register / ticket /
 * watch / series surfaces.
 */


/* ============================================================ A. PAGE === */

.evp {
  /* Override the inherited .container padding so the editorial layout
   * can use its own gutter. Page-canvas containers in the operator
   * surfaces cap at --container-max; the editorial surfaces breathe
   * to --canvas-max with a fluid left gutter for the date rail. */
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 7vh, 5rem);
  position: relative;
  color: var(--color-text);
}

/* Paper-grain noise. Applied only to detail + ticket + watch
 * (pre-live state) via .evp--grain. The calendar grid sits on
 * a clean surface so the grid lines stay legible. */
.evp--grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.evp > * { position: relative; z-index: 1; }

.evp-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}
.evp-eyebrow--oxblood { color: var(--color-oxblood); }

/* Two-tone hairline rule. Used under h2s in body sections; the dashed
 * row at 4px offset is the "newspaper" tell — a single solid rule is
 * what every CMS already does. */
.evp-rule {
  height: 5px;
  margin: 0 0 1.25rem;
  border: 0;
  background:
    linear-gradient(to right, var(--color-oxblood) 0, var(--color-oxblood) 100%) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--color-oxblood) 0 6px, transparent 6px 12px) 0 4px / 100% 1px no-repeat;
}
.evp-rule--muted {
  background:
    linear-gradient(to right, var(--color-rule-strong) 0, var(--color-rule-strong) 100%) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--color-rule-strong) 0 6px, transparent 6px 12px) 0 4px / 100% 1px no-repeat;
}


/* ================================================== B. PRIMITIVES === */

/* ----- Date stack: THU / 04 / JUN ---------------------------------- */
/* Desktop: vertical stack, monument size. Mobile: horizontal banner,
 * single line at the top of the page so the date is still the anchor. */
.evp-date-stack {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}
.evp-date-stack > span { display: block; }
.evp-date-stack-day {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  font-weight: 500;
  margin-bottom: 0.2em;
}
.evp-date-stack-num {
  font-size: var(--type-poster);
  font-feature-settings: "lnum" 1;
}
.evp-date-stack-mon {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 500;
  margin-top: 0.15em;
}
.evp-date-stack-time {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: -0.01em;
  margin-top: 0.5em;
  color: var(--color-text);
}

/* Mobile: collapse to a horizontal line. The numerals stay heavy but
 * sit on a single baseline so the title slot below them still gets the
 * top half of the screen. */
@media (max-width: 720px) {
  .evp-date-stack {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4em;
    flex-wrap: wrap;
  }
  .evp-date-stack-day,
  .evp-date-stack-mon {
    font-size: 1.05rem;
    color: var(--color-oxblood);
    margin: 0;
  }
  .evp-date-stack-num {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }
  .evp-date-stack-time {
    flex-basis: 100%;
    margin-top: 0.15em;
    font-size: 1.05rem;
  }
}

/* Compressed variant for chips + the series 6-stub strip. One line,
 * mono-styled, no oversized numeral. */
.evp-date-mini {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  font-family: var(--font-mono);
  color: var(--color-oxblood);
}
.evp-date-mini-day {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.2em;
}
.evp-date-mini-num {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.evp-date-mini-mon {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 0.1em;
}

/* ----- Monument title (event / series titles) ---------------------- */
.evp-monument {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-monument);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.evp-monument--wide { max-width: 24ch; }

/* ----- Lede (first paragraph under monument title) ----------------- */
.evp-lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--color-muted);
  margin: 0;
  max-width: 50ch;
  text-wrap: pretty;
}

/* ----- Host pill: "MMTUK" / "Bill's Substack" ---------------------- */
.evp-host-pill {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-host-pill::before { content: ""; }

/* ----- Format tag: IN PERSON / ONLINE / HYBRID --------------------- */
.evp-format-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  color: var(--color-text);
  background: var(--color-bg);
}
.evp-format-tag--online {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}

/* ----- CTA block: "Save my seat" + counter ------------------------- */
.evp-cta-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0;
}
.evp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.95em 1.5em;
  min-height: 56px;
  background: var(--color-oxblood);
  color: var(--color-bg);
  border: 1px solid var(--color-oxblood);
  border-radius: 2px;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
/* Outlined variant — same typography + sizing as .evp-cta but light
 * background + oxblood text + oxblood border. Use when sitting next
 * to a primary .evp-cta as the secondary action (e.g. "Host an event"
 * primary + "Submit an event" outlined). */
.evp-cta--outline {
  background: var(--color-bg);
  color: var(--color-oxblood);
}
.evp-cta--outline:hover {
  background: var(--color-cream);
  color: var(--color-oxblood);
}
.evp-cta:hover {
  background: var(--color-oxblood-hover);
  color: var(--color-bg);
  transform: translateY(-1px);
}
.evp-cta:focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 3px;
}
.evp-cta-arrow {
  font-family: var(--font-serif);
  font-size: 1.2em;
  line-height: 1;
  transition: transform var(--transition-fast);
}
.evp-cta:hover .evp-cta-arrow { transform: translateX(3px); }

/* "47 going" counter beside the CTA. */
.evp-counter {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.evp-counter strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ----- Mono event code (E-7F3K2) ---------------------------------- */
.evp-code {
  font-family: var(--font-mono);
  font-size: var(--type-code);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ----- Metadata stripe at the foot of every event surface --------- */
/* Mono row with dot separators: E-7F3K2 · Add to calendar · Share · etc */
.evp-meta-stripe {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 1.2em;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-meta-stripe a {
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.evp-meta-stripe a:hover {
  color: var(--color-oxblood);
  border-bottom-color: var(--color-oxblood);
}
.evp-meta-stripe-sep {
  color: var(--color-rule-strong);
  user-select: none;
}

/* ----- Body section (h2 with two-tone rule + prose) --------------- */
.evp-section {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.evp-section-head {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-h2);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-text);
}
.evp-prose {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--color-text);
  max-width: 64ch;
}
.evp-prose p { margin: 0 0 1em; }
.evp-prose p:last-child { margin-bottom: 0; }
.evp-prose a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* ================================================ C. MASTER CALENDAR === */

.evp-calendar {
  /* Master calendar wrapper — same .evp base, just no grain (it
   * fights the grid lines). */
}

/* ----- Hero --------------------------------------------------------- */
.evp-calendar-hero {
  display: grid;
  gap: 0.85rem;
  margin-bottom: clamp(2rem, 4vh, 3rem);
}
.evp-calendar-hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-monument);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.evp-calendar-hero-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-muted);
  margin: 0;
  max-width: 50ch;
}
.evp-calendar-hero-filterline {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}
.evp-calendar-hero-filterline strong {
  color: var(--color-oxblood);
  font-weight: 600;
}

/* ----- "This week" rail -------------------------------------------- */
.evp-this-week {
  margin-bottom: clamp(2rem, 4vh, 3rem);
}
.evp-this-week-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.evp-this-week-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.evp-this-week-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 88px;
}
.evp-this-week-card:hover {
  border-color: var(--color-oxblood);
  background: var(--color-cream);
  color: var(--color-text);
}
.evp-this-week-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.evp-this-week-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  /* Two-line clamp; the title gets the visual weight, the metadata
   * lives in the host pill below. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evp-this-week-empty {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-muted);
  margin: 0;
}

/* ----- Primary filter bar (region / type / format / view) --------- */
/* Always-visible row of select fields. Auto-submit on change so users
 * never have to find an "Apply" button. The region filter is the
 * leftmost (and most-requested) one — geography matters more than
 * "week vs month" view toggle. */
.evp-filter-bar {
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  padding: 0.85rem 1rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.evp-filter-bar-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.evp-filter-bar-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.evp-filter-bar-label-text {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-filter-bar select {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 0.55rem 0.7rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
}
.evp-filter-bar select:focus {
  outline: none;
  border-color: var(--color-oxblood);
  box-shadow: 0 0 0 2px rgba(92, 31, 31, 0.15);
}
.evp-filter-bar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em 1em;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-filter-bar-actions-spacer {
  margin-left: auto;
}
.evp-filter-bar-sub,
.evp-filter-clear {
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.4em 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.evp-filter-bar-sub:hover,
.evp-filter-clear:hover {
  color: var(--color-oxblood);
  border-bottom-color: var(--color-oxblood);
}
.evp-filter-clear {
  color: var(--color-oxblood);
}

/* ----- Filter / subscribe panel (legacy — kept for the embed views) */
.evp-filter-panel {
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: var(--color-bg);
}
.evp-filter-panel-summary {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.evp-filter-panel-summary::-webkit-details-marker { display: none; }
.evp-filter-panel-summary::after {
  content: "▾";
  margin-left: auto;
  transition: transform var(--transition-fast);
  color: var(--color-muted);
}
.evp-filter-panel[open] .evp-filter-panel-summary::after {
  transform: rotate(180deg);
}
.evp-filter-panel-body {
  padding: 1rem 1.1rem 1.2rem;
  border-top: 1px solid var(--color-rule);
  display: grid;
  gap: 0.85rem;
}
.evp-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}
.evp-filter-row select,
.evp-filter-row input[type="search"] {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 0.55rem 0.7rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
}
.evp-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1em;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-rule);
}
.evp-filter-actions button {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6em 1.2em;
  min-height: 44px;
  background: var(--color-oxblood);
  color: var(--color-bg);
  border: 1px solid var(--color-oxblood);
  border-radius: 2px;
  cursor: pointer;
}
.evp-filter-actions a {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.5em 0;
  border-bottom: 1px solid transparent;
}
.evp-filter-actions a:hover {
  color: var(--color-oxblood);
  border-bottom-color: var(--color-oxblood);
}

/* ----- Calendar nav (prev / month / next) -------------------------- */
.evp-cal-nav {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.evp-cal-nav a {
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.4em 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.evp-cal-nav a:hover {
  color: var(--color-oxblood);
  border-bottom-color: var(--color-oxblood);
}
.evp-cal-nav strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-text);
  margin: 0 auto;
}

/* ----- Grid (desktop only) ----------------------------------------- */
.evp-cal-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(2rem, 4vh, 3rem);
  display: grid;
  min-width: 0;
  max-width: 100%;
  border-top: 1px solid var(--color-rule);
  border-left: 1px solid var(--color-rule);
}
.evp-cal-grid--week {
  grid-template-columns: repeat(7, 1fr);
}
.evp-cal-grid--month {
  grid-template-columns: repeat(7, 1fr);
}
.evp-cal-day {
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: 0.65rem 0.7rem;
  background: var(--color-bg);
  min-height: 110px;
  /* Grid items default to min-width:auto, refusing to shrink below their
   * content — a long chip title would force the 1fr column wider than its
   * share and overflow the track. min-width:0 lets the columns stay equal. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.evp-cal-day--today {
  background: var(--color-cream);
}
.evp-cal-day-date {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-cal-day--today .evp-cal-day-date {
  color: var(--color-oxblood);
  font-weight: 600;
}
.evp-cal-chip {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-oxblood);
  padding: 0.4rem 0.55rem;
  border-radius: 2px;
  font-size: 0.875rem;
  line-height: 1.25;
  /* Flex child of the day cell — also defaults to min-width:auto, so it
   * must be allowed to shrink for the title clamp below to engage. */
  min-width: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.evp-cal-chip:hover {
  background: var(--color-cream);
  color: var(--color-text);
}
/* Online events get a dashed-rule accent — visually distinct from
 * in-person at a glance, no extra colour required. */
.evp-cal-chip--online {
  border-left-style: dashed;
}
.evp-cal-chip-title {
  font-weight: 500;
  /* Two-line clamp inside the chip; full title is on the detail page. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.evp-cal-chip-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 0.15rem;
}

/* Mobile: replace the grid with a date-grouped list. The grid math is
 * already done server-side; mobile just renders the same cells in a
 * single-column flow with prominent date headers. */
@media (max-width: 720px) {
  .evp-cal-grid {
    display: flex;
    flex-direction: column;
    border: none;
    gap: 0.15rem;
  }
  .evp-cal-day {
    border: none;
    border-top: 1px solid var(--color-rule);
    padding: 0.85rem 0;
    min-height: 0;
    background: transparent;
  }
  .evp-cal-day:first-child { border-top: none; }
  /* Hide empty days on mobile — the grid skeleton is a desktop crutch. */
  .evp-cal-day:not(:has(.evp-cal-chip)) { display: none; }
  .evp-cal-day-date {
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
  }
  .evp-cal-chip {
    margin-bottom: 0.4rem;
    padding: 0.7rem 0.85rem;
  }
}

/* ----- "Coming up" date-grouped list (post-grid section) ----------- */
.evp-coming {
  margin-top: clamp(2rem, 4vh, 3rem);
}
.evp-coming-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.evp-coming-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition-fast);
}
.evp-coming-row:hover {
  background: var(--color-cream);
  color: var(--color-text);
}
.evp-coming-row-date {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  white-space: nowrap;
}
.evp-coming-row-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 0;
}
.evp-coming-row-meta {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .evp-coming-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.85rem 0;
  }
  .evp-coming-row-meta { text-align: left; }
}
.evp-coming-empty {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-muted);
  margin: 1rem 0;
}


/* ============================================== D. EVENT DETAIL === */

.evp-detail {
  /* Page wrapper. Adds the .evp--grain background and reserves the
   * left-rail column for the date stack at desktop sizes. */
}

/* Top-of-page grid: rail (date) on the left, head pane on the right.
 * Mobile collapses to a single column with the date banner at the
 * top. */
.evp-detail-head {
  display: grid;
  grid-template-columns: minmax(220px, 26%) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
@media (max-width: 720px) {
  .evp-detail-head {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.evp-detail-rail {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* The rail sticks visually to the top of the head section, not to
   * the viewport. */
}

.evp-detail-pane {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.evp-detail-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em 1em;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-detail-eyebrow-sep {
  color: var(--color-rule-strong);
  user-select: none;
}

.evp-detail-where {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-text);
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-rule);
}
.evp-detail-where strong {
  font-weight: 500;
}

.evp-detail-online-hint {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0;
}

/* ----- Speakers section --------------------------------------------- */
.evp-speakers {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.evp-speaker-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-rule);
}
.evp-speaker-headshot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
}
.evp-speaker-headshot-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--color-oxblood);
}
.evp-speaker-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.evp-speaker-bio {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--color-muted);
  margin: 0.3rem 0 0;
}

/* ----- "More from this host" related events ------------------------ */
.evp-related {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
}
.evp-related-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.evp-related-card:hover {
  border-color: var(--color-oxblood);
  background: var(--color-cream);
  color: var(--color-text);
}
.evp-related-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
}
.evp-related-card-meta {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ----- Knowledge "Read first" sidebar ------------------------------ */
.evp-knowledge {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-oxblood);
  background: var(--color-bg);
  border-radius: 2px;
}
.evp-knowledge-head {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 0.85rem;
}
.evp-knowledge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.evp-knowledge-list a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-rule-strong);
}
.evp-knowledge-list a:hover {
  text-decoration-color: var(--color-oxblood);
  color: var(--color-oxblood);
}


/* =========================================== E. PAGE-LOAD MOTION === */

/* Typographic stagger on the detail + ticket pages. Only the three
 * primary anchors animate: the date numerals, the title, the lede.
 * Reduced motion disables everything. */
@keyframes evpRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.evp-rise {
  opacity: 0;
  animation: evpRise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.evp-rise--1 { animation-delay: 0.0s; }
.evp-rise--2 { animation-delay: 0.08s; }
.evp-rise--3 { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .evp-rise {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ================================================ F. REGISTER === */
/* The register page shares the detail-head grid (left rail with the
 * date stack, right pane with the form) so the visitor's eye stays
 * anchored — they haven't navigated away from the event they care
 * about, just into a sub-step of the same page. */

.evp-register {
  /* Same wrapper rules as .evp-detail. The form lives in the right
   * pane. */
}

.evp-register-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 480px;
}
.evp-register-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.evp-register-field-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
.evp-register-field input[type="text"],
.evp-register-field input[type="email"] {
  width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  padding: 0.7em 0.85em;
  min-height: 56px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.evp-register-field input:focus {
  outline: none;
  border-color: var(--color-oxblood);
  box-shadow: 0 0 0 3px rgba(92, 31, 31, 0.12);
}

.evp-register-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.4rem 0;
}
.evp-register-consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-oxblood);
}
.evp-register-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  margin-top: 0.5rem;
}
.evp-register-trust {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}
.evp-register-error {
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--color-error);
  background: var(--color-status-fail-bg);
  color: var(--color-status-fail-fg);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  margin: 0;
}


/* =========================================== G. TICKET (CONFIRM) === */
/* The "ticket page" is the moment-of-commitment surface. Renders an
 * actual ticket object — date stub left, event details right — sitting
 * on a noise-textured cream. Calendar buttons, share, mailto bring-a-
 * friend, and "in your inbox" reassurance round it out.
 *
 * Printable: @media print strips everything except the ticket so the
 * in-person attendees who want a paper backup get a clean printout. */

.evp-ticket {
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.evp-ticket-hero {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.evp-ticket-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
}
.evp-ticket-hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-monument);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

/* The ticket object itself. Two-column on desktop (date stub +
 * details), stacked on mobile. Perforated rule between the columns
 * via a CSS gradient — gives the paper-ticket affordance without
 * leaning on a font or a custom SVG. */
.evp-ticket-object {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 0;
  background: var(--color-cream);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.evp-ticket-stub {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border-right: 1px dashed var(--color-rule-strong);
  background:
    linear-gradient(to bottom, transparent 0, transparent 99%, var(--color-rule-strong) 100%);
  /* Perforated edge effect: small repeating dot pattern down the
   * right border. */
  position: relative;
}
.evp-ticket-stub::after {
  /* Tear-here notches at the perforated edge */
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  bottom: 0;
  width: 14px;
  background-image: radial-gradient(circle at center, var(--color-bg) 0 4px, transparent 5px);
  background-size: 100% 18px;
  background-repeat: repeat-y;
  pointer-events: none;
}
.evp-ticket-stub-code {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
.evp-ticket-stub-time {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.evp-ticket-body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
}
.evp-ticket-body-host {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}
.evp-ticket-body-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
.evp-ticket-body-where {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}
.evp-ticket-body-where strong {
  font-weight: 500;
}
.evp-ticket-body-foot {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-rule-strong);
}

@media (max-width: 720px) {
  .evp-ticket-object {
    grid-template-columns: 1fr;
  }
  .evp-ticket-stub {
    border-right: none;
    border-bottom: 1px dashed var(--color-rule-strong);
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .evp-ticket-stub .evp-date-stack {
    flex-basis: 100%;
  }
  .evp-ticket-stub::after {
    /* Re-orient the perforation to the bottom edge */
    top: auto;
    right: 0;
    bottom: -7px;
    left: 0;
    width: auto;
    height: 14px;
    background-image: radial-gradient(circle at center, var(--color-bg) 0 4px, transparent 5px);
    background-size: 18px 100%;
    background-repeat: repeat-x;
  }
}

/* ----- Calendar-add row (Google / ICS / webcal) ------------------- */
.evp-ticket-actions {
  margin-top: clamp(1.5rem, 3vh, 2rem);
  display: grid;
  gap: 1rem;
}
.evp-ticket-actions-head {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}
.evp-cal-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.evp-cal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95em 1.1em;
  min-height: 48px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.evp-cal-btn:hover {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
  background: var(--color-cream);
}

/* ----- "In your inbox" reassurance line --------------------------- */
.evp-inbox-line {
  margin-top: clamp(1.5rem, 3vh, 2rem);
  padding: 1rem 1.2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-oxblood);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--color-text);
}
.evp-inbox-line strong {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85em;
  color: var(--color-oxblood);
  display: block;
  margin-bottom: 0.35em;
}
.evp-inbox-line code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--color-oxblood);
}

/* ----- Bring-a-friend block --------------------------------------- */
.evp-bring-friend {
  margin-top: clamp(1.5rem, 3vh, 2rem);
  padding-top: clamp(1.5rem, 3vh, 2rem);
  border-top: 1px solid var(--color-rule);
}
.evp-bring-friend-head {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.evp-bring-friend-sub {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  color: var(--color-muted);
  margin: 0 0 1rem;
}
.evp-bring-friend-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ----- "What next" block (online events) -------------------------- */
.evp-what-next {
  margin-top: clamp(1.5rem, 3vh, 2rem);
  padding: 1.2rem 1.4rem;
  background: var(--color-cream);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: 1.5;
}
.evp-what-next strong {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85em;
  color: var(--color-oxblood);
  display: block;
  margin-bottom: 0.4em;
}
.evp-what-next a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================================================ H. SERIES === */
/* Series surfaces share the .evp-detail head pattern (left rail with
 * the series-start date, right pane with eyebrow + monument). The
 * additions below are: the horizontal "schedule strip" of N session
 * date-stubs, and the per-session card list with a "Drop in just this
 * one" affordance for visitors who only want one session.
 */

.evp-series-strip-section {
  margin-top: clamp(2rem, 4vh, 3rem);
}
.evp-series-strip-section .evp-eyebrow {
  margin-bottom: 0.85rem;
}
.evp-series-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: 0.85rem 0;
}
.evp-series-stub {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.65rem 0.8rem;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 88px;
}
.evp-series-stub:hover {
  border-color: var(--color-oxblood);
  background: var(--color-cream);
  color: var(--color-text);
}
.evp-series-stub-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: auto;
}
.evp-series-stub-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
.evp-series-stub-time {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.evp-series-sessions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.evp-series-session-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1rem 1.1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.evp-series-session-card:hover {
  border-color: var(--color-oxblood);
  background: var(--color-cream);
  color: var(--color-text);
}
.evp-series-session-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.evp-series-session-num {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
.evp-series-session-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.evp-series-session-meta {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
}
.evp-series-session-drop {
  color: var(--color-oxblood);
}


/* ============================================ I. CATALOGUE === */
/* /templates/  — "Host an MMT event" template catalogue.
 * /templates/<slug>/  — single-template detail with CTA + materials.
 *
 * Visual vocabulary stays in the editorial-poster family: oversized
 * Fraunces hero, mono format tag per card, generous whitespace.
 * Catalogue is a poster grid; each card is a 1px-rule rectangle with
 * the format tag at the top, title in serif 500, summary in muted
 * sans, and a small meta row at the foot. */

.evp-catalogue {
  /* Reuses .evp page wrapper. */
}

.evp-catalogue-hero {
  display: grid;
  gap: 0.85rem;
  margin-bottom: clamp(2rem, 4vh, 3rem);
}
.evp-catalogue-hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-monument);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.evp-catalogue-hero-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-muted);
  margin: 0;
  max-width: 56ch;
}

/* ----- Filter row ------------------------------------------------- */
/* Two equal-width selects + an inline "Clear filters" affordance when
 * any filter is active. Auto-submits on change so there's no Apply
 * button to hunt for. With 7 templates total a search box is more
 * noise than value — dropped on purpose. */
.evp-catalogue-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 3vh, 2rem);
  padding: 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.evp-catalogue-filters > label {
  flex: 1 1 220px;
  min-width: 0;
}
.evp-catalogue-filters .evp-filter-clear {
  margin-left: auto;
}
@media (max-width: 720px) {
  .evp-catalogue-filters > label {
    flex-basis: 100%;
  }
}
.evp-catalogue-filters input[type="search"],
.evp-catalogue-filters select {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 0.55rem 0.7rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
}
.evp-catalogue-filters button {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6em 1.2em;
  min-height: 44px;
  background: var(--color-oxblood);
  color: var(--color-bg);
  border: 1px solid var(--color-oxblood);
  border-radius: 2px;
  cursor: pointer;
}

/* ----- Catalogue grid + cards ------------------------------------- */
.evp-cat-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.evp-cat-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.4rem 1.4rem 1.2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  min-height: 200px;
}
.evp-cat-card:hover {
  border-color: var(--color-oxblood);
  background: var(--color-cream);
  color: var(--color-text);
  transform: translateY(-1px);
}
.evp-cat-card-type {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
.evp-cat-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  /* Wrap titles freely; the card sets its own height. */
}
.evp-cat-card-summary {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
  /* Two-line clamp to keep cards aligned. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evp-cat-card-meta {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.9em;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-cat-card-meta strong {
  color: var(--color-text);
  font-weight: 500;
}

.evp-cat-empty {
  padding: 2rem 1.5rem;
  border: 1px dashed var(--color-rule-strong);
  border-radius: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-muted);
  text-align: center;
}


/* ============================================ J. TEMPLATE DETAIL === */
/* /templates/<slug>/ — single-template marketing page leading into the
 * host-onboarding flow. Same head shape as event-detail (eyebrow +
 * monument + lede + CTA), then body sections for materials, prompts,
 * recommended speakers, knowledge links. */

.evp-templatedetail .evp-cta-block {
  margin-top: 0.4rem;
}
.evp-templatedetail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.5em;
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-templatedetail-meta strong {
  color: var(--color-text);
  font-weight: 500;
}
.evp-templatedetail-preview {
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
  background: var(--color-status-warn-bg);
  border-left: 3px solid var(--color-status-warn-fg);
  color: var(--color-status-warn-fg);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* ----- Materials list ("What you'll receive") --------------------- */
.evp-materials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.evp-material-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
@media (max-width: 720px) {
  .evp-material-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}
.evp-material-kind {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
.evp-material-label {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.evp-material-action {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.evp-material-action:hover {
  border-bottom-color: var(--color-oxblood);
}

/* ----- Numbered prompts list -------------------------------------- */
.evp-prompts {
  list-style: none;
  counter-reset: prompt-num;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.evp-prompts > li {
  counter-increment: prompt-num;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.85rem;
  align-items: baseline;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-rule);
}
.evp-prompts > li::before {
  content: counter(prompt-num, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-oxblood);
  align-self: start;
  padding-top: 0.4em;
}

/* ----- Recommended speakers grid ---------------------------------- */
.evp-rec-speakers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}
.evp-rec-speaker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.evp-rec-speaker-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.evp-rec-speaker-meta {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}


/* ============================================== K. HOST SURFACES === */
/* Host dashboard + event-edit + registrations list + post-event wrap.
 * These are the magic-link-authenticated surfaces a public host lands on
 * after sign-in. Same editorial palette as the attendee path so a host
 * who's also been an attendee feels visual continuity. */

.evp-host-banner {
  margin: 0 0 clamp(1.5rem, 3vh, 2rem);
  padding: 1rem 1.2rem;
  background: var(--color-cream);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-oxblood);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: 1.5;
}
.evp-host-banner strong {
  font-weight: 500;
  color: var(--color-text);
}
.evp-host-banner a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- Dashboard event table ------------------------------------- */
.evp-host-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  overflow: hidden;
}
.evp-host-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-bg-tint);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-rule-strong);
}
.evp-host-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.evp-host-table tbody tr:last-child td { border-bottom: none; }
.evp-host-table tbody tr:hover { background: var(--color-cream); }
.evp-host-table td a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.evp-host-table-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}
.evp-host-table-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  color: var(--color-muted);
  background: var(--color-bg);
}
.evp-host-table-status--published {
  color: var(--color-oxblood);
  border-color: var(--color-oxblood);
}
.evp-host-table-status--draft {
  color: var(--color-muted);
}

/* ----- Host edit form fieldsets ----------------------------------- */
.evp-host-fieldset {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  border: none;
}
.evp-host-form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2rem);
  max-width: 640px;
}
.evp-host-form textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.5;
  padding: 0.7em 0.85em;
  min-height: 8rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.evp-host-form textarea:focus {
  outline: none;
  border-color: var(--color-oxblood);
  box-shadow: 0 0 0 3px rgba(92, 31, 31, 0.12);
}
.evp-host-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
}
.evp-host-form-actions .evp-cta {
  /* Slightly tighter than the attendee CTAs — operator workflow, not
   * marketing moment. */
  padding: 0.75em 1.25em;
  min-height: 48px;
}
.evp-host-form-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75em 1.25em;
  min-height: 48px;
  background: var(--color-bg);
  color: var(--color-oxblood);
  border: 1px solid var(--color-oxblood);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
}
.evp-host-form-secondary:hover {
  background: var(--color-cream);
  color: var(--color-oxblood);
}

/* ----- Funnel CTA aside (Outreach upgrade, account upgrade) ------ */
.evp-funnel-cta {
  margin: 0 0 1.25rem;
  padding: 1rem 1.2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-oxblood);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
}
.evp-funnel-cta strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  display: block;
  margin-bottom: 0.3em;
}
.evp-funnel-cta a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- Post-event radio row -------------------------------------- */
.evp-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.evp-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65rem 1rem;
  min-height: 44px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
}
.evp-radio-row label:has(input:checked) {
  background: var(--color-cream);
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}
.evp-radio-row input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-oxblood);
}

@media (max-width: 720px) {
  .evp-host-table thead { display: none; }
  .evp-host-table tbody td { display: block; padding: 0.35rem 1rem; border: none; }
  .evp-host-table tbody tr {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .evp-host-table tbody tr:last-child { border-bottom: none; }
}


/* =========================================== L. SPEAKER SURFACES === */
/* roster_list (public directory) + roster_detail (single speaker) +
 * booking_request (host → speaker invitation form) +
 * decision (speaker accept/decline page from email) +
 * speaker_self_serve / availability_edit / booking_history (speaker
 * dashboard, token-authenticated).
 *
 * These surfaces meet first-time professionals — academics, MPs, union
 * organisers — at the point they decide whether SEF is credible enough
 * to associate with. Visual quality has trust weight here. */

/* ----- Roster grid -------------------------------------------------- */
.evp-roster-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.evp-roster-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.25rem 1.4rem 1.2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.evp-roster-card:hover {
  border-color: var(--color-oxblood);
  background: var(--color-cream);
  color: var(--color-text);
  transform: translateY(-1px);
}
.evp-roster-card-headshot,
.evp-roster-card-headshot-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule-strong);
}
.evp-roster-card-headshot-placeholder {
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2rem;
  color: var(--color-oxblood);
}
.evp-roster-card-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.evp-roster-card-fee {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0;
}
.evp-roster-card-availability {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
}
.evp-roster-card-topics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.evp-roster-card-topics li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  background: var(--color-bg-tint);
  color: var(--color-muted);
  border-radius: 2px;
  border: 1px solid var(--color-rule);
}

/* ----- Roster detail (single speaker page) ----------------------- */
/* Two-column hero: headshot left, eyebrow + name + fee + bio right.
 * Stacks on mobile so the headshot doesn't dominate the viewport. */
.evp-speaker-hero {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
@media (max-width: 720px) {
  .evp-speaker-hero {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.evp-speaker-hero-headshot,
.evp-speaker-hero-headshot-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  object-fit: cover;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule-strong);
}
.evp-speaker-hero-headshot-placeholder {
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(4rem, 9vw, 6rem);
  color: var(--color-oxblood);
}
.evp-speaker-hero-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.evp-speaker-hero-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-monument);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.evp-speaker-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-speaker-facts dt {
  font-weight: 600;
  color: var(--color-oxblood);
  margin: 0;
}
.evp-speaker-facts dd {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}

.evp-topic-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.evp-topic-chips li {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  background: var(--color-cream);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
}

/* ----- Decision page (speaker accept/decline) -------------------- */
/* The single most-trust-loaded page in the speaker journey. Renders
 * the host's invitation in a quoted card; the two CTAs sit
 * side-by-side and Accept gets the primary oxblood treatment. */
.evp-invitation {
  margin: clamp(1.5rem, 3vh, 2rem) 0;
  padding: 1.25rem 1.4rem;
  background: var(--color-cream);
  border: 1px solid var(--color-rule-strong);
  border-left: 3px solid var(--color-oxblood);
  border-radius: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--color-text);
}
.evp-invitation-head {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  font-style: normal;
  margin: 0 0 0.6rem;
}

.evp-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-rule);
}
.evp-decision-decline {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95em 1.5em;
  min-height: 56px;
  background: var(--color-bg);
  color: var(--color-muted);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.evp-decision-decline:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
  background: var(--color-bg);
}

.evp-decision-status {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-rule-strong);
  border-left: 3px solid var(--color-muted);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--color-muted);
}
.evp-decision-status--accepted {
  border-left-color: var(--color-status-ok-fg);
  background: var(--color-status-ok-bg);
  color: var(--color-status-ok-fg);
}
.evp-decision-status--declined {
  border-left-color: var(--color-muted);
}


/* ============================================ M. SURVEY CHAT === */
/* Public attendee survey via QR code. Chat-style UI with HTMX
 * message turns. Renders inside .evp-detail with grain. */

.evp-survey-shell {
  max-width: 720px;
  margin: 0 auto;
}
.evp-survey-card {
  margin-top: clamp(1.5rem, 3vh, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.evp-survey-messages {
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 220px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-cream);
}
.evp-survey-message {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 85%;
}
.evp-survey-message--bot {
  align-self: flex-start;
}
.evp-survey-message--user {
  align-self: flex-end;
  align-items: flex-end;
}
.evp-survey-bubble {
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--color-text);
  white-space: pre-wrap;
}
.evp-survey-message--user .evp-survey-bubble {
  background: var(--color-oxblood);
  color: var(--color-bg);
  border-color: var(--color-oxblood);
}
.evp-survey-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evp-survey-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg);
  border-top: 1px solid var(--color-rule);
}
.evp-survey-input {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 16px;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
}
.evp-survey-input:focus {
  outline: none;
  border-color: var(--color-oxblood);
  box-shadow: 0 0 0 2px rgba(92, 31, 31, 0.15);
}
.evp-survey-form .evp-cta {
  padding: 0 1.25em;
  min-height: 48px;
}
.evp-survey-closed {
  margin: 0;
  padding: 1.25rem 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-top: 1px solid var(--color-rule);
}


/* ----- Print rules: strip everything except the ticket object ----- */
@media print {
  body, .evp { background: white; color: black; }
  .topnav, .studio-foot, .bottom-tabs, .flashes,
  .evp-ticket-hero-eyebrow, .evp-ticket-actions, .evp-inbox-line,
  .evp-bring-friend, .evp-what-next, .evp-meta-stripe {
    display: none !important;
  }
  .evp--grain::before { display: none !important; }
  .evp-ticket-object {
    border: 2px solid black;
    box-shadow: none;
    background: white;
  }
  .evp-ticket-stub {
    background: white;
    border-right-color: black;
  }
  .evp-ticket-stub::after {
    background-image: radial-gradient(circle at center, white 0 4px, transparent 5px);
  }
}