/* =====================================================================
   DESIGN SYSTEM — aligned with echai.ventures/feed
   =====================================================================

   COLOR HIERARCHY (use this consistently)
     --ink         primary text: titles, names, key values, prose body
     --ink-soft    page subheading / tagline (slightly darker than mute,
                   used sparingly — ~1 line per page)
     --ink-mute    ALL other secondary text: labels, role lines, sub
                   values, helper / hint copy, agenda details
     --ink-fade    decorative hints only (rare)

   TYPE FAMILIES
     --font-serif  Newsreader  → titles, names, key values (date,
                                 venue), editorial body (about, tagline)
     --font-sans   Inter       → labels, role lines, hints, descriptions,
                                 buttons, links — all UI copy
     --font-mono   JetBrains   → date eyebrows ("TUE 14 MAY"), counts,
                                 avatar initials, the "you" tag

   WEIGHTS
     600 — biggest serif headlines (event-headline, welcome-title) AND
           sans labels (section labels, meta keys, signal labels)
     500 — secondary serif headings (host name, agenda title) and
           buttons / links
     400 — body prose, role lines, hints (default)

   STYLE
     No italic anywhere. Use weight + color for emphasis instead.
   ===================================================================== */
:root {
  /* Paper / ink (warm, editorial) */
  --paper:     #ffffff;
  --paper-2:   #f5f1e8;   /* warm off-white card bg */
  --ink:       #1a1814;   /* primary text */
  --ink-soft:  #4a463e;   /* secondary text */
  --ink-mute:  #87806f;   /* muted metadata */
  --ink-dim:   #a8a094;   /* dim caption */
  --ink-faint: #c4bdac;   /* faintest */
  --rule:      #d9d1bd;   /* dividers / card borders */

  /* Accent (eChai amber) */
  --amber:        #c64a1a;
  --amber-soft:   #e6d4c2;

  /* Mint card (used sparingly for hero blocks on the feed) */
  --card-mint:      #E2F0EE;
  --card-mint-rule: #C8DFDC;

  /* Backwards-compat aliases for older rules in this file */
  --bg:          var(--paper-2);
  --surface:     var(--paper);
  --ink-fade:    var(--ink-mute);
  --accent:      var(--amber);
  --accent-soft: var(--amber-soft);
  --border:      var(--rule);
  --border-soft: #ece4cf;

  /* Type families */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:  'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  font-family: var(--font-sans);
  background: #ffffff;
  min-height: 100vh;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Inter stylistic alternates */
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.phone-frame {
  width: 390px;
  height: 800px;
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border-radius: 24px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (max-width: 480px) {
  body { padding: 0; }
  .phone-frame {
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
}

.notch { height: 8px; flex-shrink: 0; }

.app-bar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  flex-shrink: 0;
}
.app-bar.hidden { visibility: hidden; }

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 12px;
  font-family: inherit;
  border-radius: 10px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  min-width: 56px;
  text-align: left;
}
.skip-btn {
  font-size: 14px;
  color: var(--ink-mute);
  font-weight: 500;
  text-align: right;
}
.icon-btn:active { background: var(--bg); }

.progress-wrap { display: flex; gap: 5px; align-items: center; }
.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.2s ease;
}
.dot.active { background: var(--ink); width: 18px; border-radius: 3px; }
.dot.passed { background: var(--ink); opacity: 0.35; }

.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  padding: 8px 24px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: flex; animation: fadeIn 0.22s ease; }
.screen::-webkit-scrollbar { display: none; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin: 8px 0 8px;
}

.screen-subtitle {
  font-size: 14.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-bottom: 26px;
}

/* Secondary subtitle line — used to split a two-idea subtitle into a
   primary message + a smaller secondary line. */
.screen-subtitle-sub {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-top: -16px;
  margin-bottom: 26px;
}

.bottom-bar {
  padding: 12px 24px 28px;
  flex-shrink: 0;
  background: var(--surface);
}
.bottom-bar.hidden { display: none; }

.cta-btn {
  width: 100%;
  height: 52px;
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, opacity 0.15s;
}
.cta-btn:active { transform: scale(0.98); }

.welcome-screen { padding-top: 12px; padding-bottom: 24px; }
.wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wordmark::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.welcome-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin-bottom: 24px;
}

.steps-list { margin-bottom: auto; }
.steps-label {
  font-size: 11.5px;
  color: var(--ink-fade);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  margin-bottom: 12px;
}
.step-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.step-row:last-of-type { border-bottom: none; }
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  flex-shrink: 0;
  margin-top: 1px;
}
.step-text { flex: 1; }
.step-name { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.step-detail { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.4; }
.step-time {
  font-size: 12px;
  color: var(--ink-fade);
  margin-top: 12px;
}

.signin-stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 20px;
}
.signin-btn {
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: background 0.15s;
}
.signin-btn:active { background: var(--bg); }
.signin-btn.dark { background: var(--ink); color: white; border-color: var(--ink); }
.email-link {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 12px;
}
.legal {
  text-align: center;
  font-size: 11px;
  color: var(--ink-fade);
  line-height: 1.5;
  margin-top: 4px;
}

.avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}
.avatar-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 0.15s;
}
.avatar-circle:active { transform: scale(0.97); }
.avatar-edit {
  font-size: 12.5px;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 4px 8px;
}

.field-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field-row {
  display: flex;
  gap: 10px;
}
.field-row > .text-input { flex: 1; }

.section-divider {
  margin: 24px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-divider::before, .section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.section-label {
  font-size: 11.5px;
  color: var(--ink-fade);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
}

.text-input {
  width: 100%;
  border: 1.5px solid transparent;
  background: var(--bg);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  color: var(--ink);
  resize: none;
}
.text-input:focus { border-color: var(--ink); background: var(--surface); }
.text-input::placeholder { color: var(--ink-fade); }
.text-input.small { padding: 11px 14px; font-size: 14px; }

/* === Event create / edit form === */
.event-form { display: flex; flex-direction: column; gap: 28px; margin-top: 18px; }
.event-form-errors {
  padding: 10px 14px;
  background: rgba(217, 119, 6, 0.08);
  border-left: 2px solid var(--amber);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.event-form-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.event-form-legend {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
  padding: 0;
}
.event-form-field { display: flex; flex-direction: column; gap: 6px; }
.event-form-field-narrow { flex: 0 0 90px; }
.event-form-field-grow   { flex: 1; }
.event-form-row { display: flex; gap: 12px; }
.event-form-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.event-form-textarea {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.55;
  resize: vertical;
  min-height: 60px;
}
.event-form-hint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.45;
  margin: 0;
}
.event-form-radio-row { display: flex; flex-wrap: wrap; gap: 16px; }
.event-form-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.event-form-radio input[type="radio"] { accent-color: var(--amber); }
.event-form-poweredit {
  padding: 12px 14px;
  background: var(--paper-2);
  border-radius: 8px;
  font-style: italic;
}
.event-form-poweredit code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}
.event-form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.event-form-cancel {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 1px;
}
.event-form-cancel:hover { color: var(--ink); border-bottom-color: rgba(0, 0, 0, 0.4); }

/* Admin Edit link in the event app bar — sits between the back chevron
   and the share button. Quiet sans label, not a button. */
.event-admin-edit {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
}
.event-admin-edit:hover { color: var(--ink); background: rgba(0, 0, 0, 0.04); }

/* "+ New event" link on the events index, for admins only. */
.events-admin-new { margin: 14px 0 4px; }
.events-admin-new-link {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
}
.events-admin-new-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.text-input.error { border-color: var(--accent); }

.error-text {
  color: var(--accent);
  font-size: 12.5px;
  margin-top: 6px;
}

.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: all 0.12s;
}
.chip:active { transform: scale(0.96); }
.chip.selected { background: var(--ink); border-color: var(--ink); color: white; }
.chip.add { border-style: dashed; color: var(--ink-mute); }

.city-cta {
  width: 100%;
  height: 46px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 12px;
  font-family: inherit;
  color: var(--ink);
}
.city-cta:active { background: var(--border-soft); }

.combined-section { margin-top: 26px; }

.done-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}
.done-emoji { font-size: 36px; margin-bottom: 4px; }
.done-title { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 4px; }
.done-sub { font-size: 14px; color: var(--ink-mute); margin-bottom: 20px; }

.profile-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  margin-bottom: 24px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  color: var(--accent);
}
img.profile-avatar-image {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  background: var(--paper-2);
}
img.match-avatar-image {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-2);
}
.profile-name { font-size: 17px; font-weight: 600; margin-bottom: 3px; letter-spacing: -0.2px; }
.profile-meta { font-size: 13px; color: var(--ink-mute); margin-bottom: 12px; }
.profile-tags { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; }
.profile-tag {
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 100px;
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
}

.next-section-label {
  font-size: 11.5px;
  color: var(--ink-fade);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  margin-bottom: 10px;
}
.next-list { display: flex; flex-direction: column; }
.next-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.12s;
}
.next-item:first-child { padding-top: 4px; }
.next-item:last-child { border-bottom: none; }
.next-item:hover .next-title { color: var(--amber); }
.next-item:active { transform: none; }
.next-icon {
  width: auto;
  height: auto;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.next-text { flex: 1; min-width: 0; }
.next-title { font-size: 13.5px; font-weight: 600; margin-bottom: 1px; }
.next-sub { font-size: 12px; color: var(--ink-mute); }
.next-arrow { color: var(--ink-fade); font-size: 18px; flex-shrink: 0; }

.flash-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  max-width: calc(100vw - 32px);
}
.flash-notice { background: var(--ink); color: white; }
.flash-alert { background: var(--accent); color: white; }

.signin-helper {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.45;
}
.signin-helper-icon { font-size: 14px; line-height: 1.4; flex-shrink: 0; }

.cta-btn:disabled { cursor: progress; }

.cta-btn-outline {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.check-email-icon {
  font-size: 56px;
  text-align: center;
  margin: 12px 0 14px;
  animation: bounceIn 0.5s ease;
}
@keyframes bounceIn {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

.check-email-steps {
  margin-top: 28px;
  background: var(--bg);
  border-radius: 16px;
  padding: 8px 16px;
}
.check-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.check-step:last-child { border-bottom: none; }
.check-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--ink-mute);
  flex-shrink: 0; margin-top: 1px;
}
.check-step-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.check-step-detail { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.45; }

.dev-hint {
  margin-top: 18px;
  padding: 10px 14px;
  background: #fff1e6;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  font-size: 12px;
  color: var(--accent);
  text-align: center;
}
.dev-hint a { color: var(--accent); font-weight: 600; }

/* ---------- Accessibility ---------- */

/* Skip link — appears on keyboard focus, hidden otherwise */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--ink);
  color: white;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 1000;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

/* ---------- Focus rings (keyboard only) ---------- */

*:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}
.text-input:focus-visible {
  outline: none;
  border-color: var(--ink);
  background: var(--surface);
}
.chip:focus-visible {
  outline-offset: 1px;
}
.cta-btn:focus-visible {
  outline-offset: 3px;
}

/* ---------- Eyebrow / section headers ---------- */

.screen-eyebrow {
  font-size: 11.5px;
  color: var(--ink-fade);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  margin: 12px 0 8px;
}

/* ---------- Welcome (root) page ---------- */

/* App-bar variant for the landing — quiet wordmark on the left,
   Sign in link on the right. */
.welcome-app-bar { padding: 14px 24px 8px; }
.welcome-wordmark-inline {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.welcome-nav-link {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
}
.welcome-nav-link:hover { color: var(--ink); background: rgba(0, 0, 0, 0.04); }

/* Upcoming events block on the landing — heading row + tight list. */
.welcome-events {
  margin: 4px 0 24px;
}
.welcome-events-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.welcome-events-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.welcome-events-link {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
}
.welcome-events-link:hover { color: var(--ink); }

/* Tighten the event-list when used on the landing — cards sit denser. */
.event-list.event-list-tight .event-card { padding: 10px 4px; }

.welcome-hero { margin-bottom: 24px; }

/* Quiet footer links under the welcome CTA. The first row points at the
   bigger network on eChai.Ventures; the second row is fine print. */
.welcome-footer-links {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.welcome-footer-links a {
  color: var(--ink-mute);
  text-decoration: none;
  margin: 0 4px;
}
.welcome-footer-links a:hover { color: var(--ink); text-decoration: underline; }
.welcome-footer-links span { color: var(--ink-faint); margin: 0 2px; }
.welcome-footer-links-fine {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-dim);
}
.welcome-footer-links-fine a { color: var(--ink-dim); }

/* Static legal pages (Privacy, Terms) — editorial reading layout. */
.legal-screen {
  padding-top: 16px;
}
.legal-section { margin: 22px 0; }
.legal-section h2 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.legal-section p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  margin: 0;
}
.legal-section a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
}
.legal-section a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.welcome-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.welcome-sub {
  font-size: 15px;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* Small social-proof line on the welcome page — quiet mono caps with
   real numbers bolded. Builds trust without bragging. */
.welcome-proof {
  margin: 18px 0 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.welcome-proof strong {
  color: var(--ink);
  font-weight: 600;
}

.welcome-benefits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: auto;
}
.benefit {
  display: flex;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-soft);
  align-items: flex-start;
}
.benefit:last-child { border-bottom: none; }
.benefit-icon {
  font-size: 22px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.2;
}
.benefit-text { flex: 1; }
.benefit-title { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.benefit-detail { font-size: 13px; color: var(--ink-mute); line-height: 1.45; }

/* Stacked bottom bar with primary action + helper line */
.bottom-bar-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.bottom-helper {
  font-size: 12px;
  color: var(--ink-fade);
  text-align: center;
  line-height: 1.4;
}
.bottom-helper-faint { color: var(--ink-faint); margin-top: 2px; }

/* "Add to Google Cal · Apple/Outlook (.ics)" row that surfaces after a
   successful RSVP. Quiet inline links, not a CTA. */
.rsvp-calendar-row {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.rsvp-cal-link {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 74, 26, 0.4);
  padding-bottom: 1px;
  margin: 0 4px;
}
.rsvp-cal-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.rsvp-calendar-row span[aria-hidden="true"] { color: var(--ink-faint); }

/* Quiet "N founders going" social-proof line shown above the unlock
   form for invite-only events the viewer hasn't unlocked yet. */
.bottom-going-count {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
  text-align: center;
  margin: 0 0 12px;
}


/* CTA variants */
.cta-btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.cta-btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--border);
  height: 46px;
  font-size: 14.5px;
}
.cta-btn-quiet:active { background: var(--bg); }

/* ---------- Onboarding form ---------- */

.verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 100px;
  padding: 7px 14px 7px 10px;
  font-size: 12.5px;
  margin-bottom: 18px;
  align-self: flex-start;
}
.verified-pill strong { color: var(--accent); font-weight: 600; }
.verified-pill-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.form-errors {
  background: #fef2ef;
  border: 1px solid #f4d4c8;
  color: #9a3412;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.4;
}

.field-helper {
  font-size: 12.5px;
  color: var(--ink-fade);
  margin-top: 12px;
  text-align: center;
  line-height: 1.45;
}
.section-helper {
  font-size: 12px;
  color: var(--ink-fade);
  margin-top: 10px;
  line-height: 1.45;
}

/* Smoother chips */
.chip {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.chip:hover { border-color: var(--ink-mute); }
.chip.selected:hover { border-color: var(--ink); }

/* ---------- Check-email page ---------- */

.check-email-address {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
  margin-bottom: 16px;
}
.check-email-tip {
  font-size: 13.5px;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.5;
  background: var(--bg);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 20px;
}
.check-email-actions { margin-bottom: 14px; }
.check-email-foot {
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.5;
}
.check-email-foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.check-email-foot a:hover { text-decoration-color: var(--ink); }

/* ---------- Profile / done page ---------- */

.welcome-celebrate { margin: 8px 0 24px; }
.welcome-celebrate-emoji {
  font-size: 56px;
  text-align: center;
  margin-bottom: 12px;
  animation: bounceIn 0.5s ease;
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.profile-link {
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--bg);
  border-radius: 100px;
  padding: 5px 11px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.profile-link:hover { background: var(--ink); color: white; }

/* === Asks & Offers — signal blocks === */

/* Edit profile form */
.signal-stack { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.signal-field { display: flex; flex-direction: column; gap: 6px; }
.signal-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.signal-textarea {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.45;
  resize: vertical;
  min-height: 60px;
}
.signal-hint {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* Profile show — signals section */
.profile-edit-link {
  display: block;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  margin-top: -4px;
  margin-bottom: 8px;
}
.profile-edit-link:hover { color: var(--ink); }

.profile-signals {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 4px 0 22px;
}
.profile-signal {
  padding: 0;
}
.profile-signal-key {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.profile-signal-body {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.profile-signal-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  margin-top: 6px;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
}
.profile-signal-cta:hover { color: var(--ink); border-bottom-color: var(--ink); }

.profile-signals-empty {
  background: #faf8f2;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 4px 0 22px;
}
.profile-signals-empty-body {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-bottom: 8px;
}
.profile-signals-empty-cta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
}

/* === Feed page (event-focused) === */

/* Hero card — the next dinner */
.feed-event-hero {
  background: var(--paper-2);
  border-radius: 14px;
  padding: 18px 20px 16px;
  margin: 8px 0 24px;
}
.feed-event-hero-when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--amber);
  margin-bottom: 6px;
}
.feed-event-hero-title-link { text-decoration: none; color: inherit; }
.feed-event-hero-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin-bottom: 6px;
}
.feed-event-hero-meta {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.feed-event-hero-state {
  font-size: 13px;
  color: var(--ink);
}
.feed-event-hero-state-cta {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
  font-weight: 500;
}
.feed-event-hero-cta {
  margin-top: 4px;
}

/* Attendees list — who's coming with intents */
.feed-attendees-section { margin-bottom: 28px; }
.feed-attendees-head {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.feed-attendees {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.feed-attendee {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.feed-attendee:last-child { border-bottom: none; padding-bottom: 0; }
.feed-attendee:hover .feed-attendee-name { color: var(--amber); }
.feed-attendee-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-top: 1px;
}
.feed-attendee-text { flex: 1; min-width: 0; }
.feed-attendee-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.feed-attendee-you {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--amber-soft);
  color: var(--amber);
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: 2px;
  margin-left: 4px;
}
.feed-attendee-meta {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.feed-attendee-intents {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feed-attendee-intent {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
}
.feed-attendee-intent-key {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: 0;
  margin-right: 4px;
}

.feed-empty-line {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-mute);
}

/* Lower-priority directory of other founders not RSVPed */
.feed-directory {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.feed-directory-head {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.feed-directory-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feed-directory-row {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}
.feed-directory-row:hover .feed-attendee-name { color: var(--amber); }
.feed-directory-text { flex: 1; min-width: 0; }
.feed-directory-bio {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
  line-height: 1.45;
}

.feed-prompt {
  display: block;
  border: 1px dashed var(--amber);
  background: var(--amber-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  text-decoration: none;
  color: var(--ink);
}
.feed-prompt-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--amber);
  margin-bottom: 6px;
}
.feed-prompt-body {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
}
.feed-prompt-cta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--amber);
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.feed-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-soft);
}
.feed-card:last-child { border-bottom: none; padding-bottom: 0; }

.feed-card-head { display: flex; align-items: center; }
.feed-card-name-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.feed-card-name-link:hover .feed-card-name { color: var(--amber); }
.feed-card-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.feed-card-name {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.feed-card-meta {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 1px;
}

.feed-card-signals {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 48px;
}
.feed-signal {}
.feed-signal-key {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.feed-signal-body {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.feed-signal-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  margin-top: 6px;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
}
.feed-signal-cta:hover { color: var(--ink); border-bottom-color: var(--ink); }

.feed-empty {
  background: var(--paper-2);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 14px;
}
.feed-empty-link { color: var(--amber); font-weight: 500; text-decoration: none; }

/* "Coming soon" cards */
.next-item-disabled { cursor: default; opacity: 0.85; }
.next-item-disabled:active { transform: none; border-color: transparent; }
.next-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mute);
  background: var(--surface);
  border-radius: 100px;
  padding: 3px 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ---------- Events: detail page (Partiful-style) ---------- */

.event-screen {
  padding: 0 !important;
}

.event-app-bar {
  position: absolute;
  top: 32px; left: 0; right: 0;
  z-index: 5;
  background: transparent;
  height: 48px;
  padding: 0 6px 0 14px;
}

.icon-btn-light {
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.icon-btn-right { text-align: right; }

/* Cover banner (3:1, native image aspect ratio) */

.event-cover {
  position: relative;
  width: 100%;
  padding-bottom: 33.333%; /* 3:1 ratio — width:height = 3:1 */
  background: linear-gradient(135deg, #c2410c 0%, #f97316 60%, #fbbf24 100%);
  overflow: hidden;
  flex-shrink: 0;
}
/* (legacy .event-cover-image rules removed — image is now an <img> child,
   styled as .event-cover-img below) */
.event-cover-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.20) 0, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(0,0,0,0.18) 0, transparent 40%);
  pointer-events: none;
}

/* Title block — sits flush against the cover image. */

.event-title-block {
  padding: 18px 24px 0;
}

/* City + access row — small breadcrumb sitting above the headline.
   Sentence case, sans, single line. */
.event-title-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.event-title-meta-sep {
  color: var(--ink-mute);
  font-size: 12px;
  line-height: 1;
}
.event-title-meta-prep {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
}

/* "No. 24" mark — small editorial signature that anchors the recurring
   series. Mono, ink-mute, sits inline with the rest of the title meta. */
.event-edition-mark {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

.event-city-kicker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.15);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.event-city-kicker:hover { color: var(--ink); text-decoration-color: rgba(0, 0, 0, 0.4); }


.event-tagline {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 6px;
  letter-spacing: -0.005em;
}

/* Tagline + expand: tap "more" to reveal the long-form description.
   Replaces the dedicated About section. */
.event-tagline-block {
  margin-top: 6px;
}
.event-tagline-block .event-tagline { margin-top: 0; }
.event-tagline-rest {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin-top: 14px;
  /* Gentle fade + upward slide reveal — applied via .is-revealed. */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 250ms ease, transform 250ms ease;
}
.event-tagline-rest.is-revealed { opacity: 1; transform: translateY(0); }
.event-tagline-rest p { margin: 0 0 12px; }
.event-tagline-rest p:last-child { margin-bottom: 0; }

/* Drop cap on the first paragraph after Read more — magazine signature. */
.event-tagline-rest p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.2em;
  line-height: 0.85;
  font-weight: 500;
  margin: 0.05em 0.08em 0 0;
  color: var(--ink);
}
.event-tagline-toggle {
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-mute);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.15);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.event-tagline-toggle:hover { color: var(--ink); text-decoration-color: rgba(0, 0, 0, 0.4); }

/* "Invite only" indicator — sits inline with the city kicker.
   Tappable button that toggles the explanation panel. */
.event-access-tag {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.event-access-tag:hover { color: var(--ink); }

/* Explanation panel that drops in below the title meta row when the
   "Invite only" pill is tapped. Quiet card, not a CTA. */
.event-access-info {
  margin: 8px 0 12px;
  padding: 12px 14px;
  background: var(--paper-2);
  border-radius: 10px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.event-access-info-link {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
  white-space: nowrap;
}
.event-access-info-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

.bottom-helper-link {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
}
.bottom-helper-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Invite-code entry form — sits where the RSVP CTA would for an
   invite-only event the viewer hasn't unlocked yet. */
.invite-form-block { display: block; }
.invite-form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
  margin-bottom: 6px;
  text-align: left;
}
.invite-form {
  display: flex;
  gap: 8px;
}
.invite-code-input {
  flex: 1;
  height: 52px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.invite-submit {
  width: auto;
  padding: 0 22px;
  height: 52px;
  flex-shrink: 0;
}

/* A signed note from the host — sits right under the title block.
   Treated like a quoted letter, not a callout. No box, no fill,
   just a hairline above to set it apart from the title. */
.event-host-note {
  margin: 6px 24px 0;
  padding: 18px 0 4px;
  border-top: 1px solid var(--border-soft);
}
.event-host-note-body {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.event-host-note-sig {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 12px;
}

/* Outcome proof — single-line evidence above the bottom CTA.
   The last beat the reader sees before tapping. Shaped like a
   pull-quote without the visual weight of a quote block. */
.event-outcome {
  padding: 14px 28px 12px;
  text-align: center;
  position: relative;
}
/* Faint amber hairline above — punctuates that this is a real outcome,
   not marketing. Editorial pull-quote, not a callout box. */
.event-outcome::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 32px;
  height: 1px;
  background: var(--amber);
  opacity: 0.55;
  transform: translateX(-50%);
}
.event-outcome-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.5;
  letter-spacing: -0.005em;
  position: relative;
  display: inline-block;
  text-wrap: balance;
}
.event-outcome-body::before {
  content: '“';
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 28px;
  color: var(--amber);
  opacity: 0.7;
  margin-right: 6px;
  line-height: 0;
  vertical-align: -7px;
}
.event-outcome-body::after {
  content: '”';
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 28px;
  color: var(--amber);
  opacity: 0.7;
  margin-left: 4px;
  line-height: 0;
  vertical-align: -7px;
}

/* Cover Ken Burns — slow imperceptible zoom over 40s.
   Adds life to the photo without ever drawing attention.
   Respects users who've asked the OS to reduce motion. */
@keyframes coverKenBurns {
  from { transform: scale(1.00); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: no-preference) {
  .event-cover-img {
    animation: coverKenBurns 40s ease-in-out infinite alternate;
    transform-origin: center center;
  }
}

/* Compact Date + Venue + Calendar meta block.
   Two-column grid puts Date and Venue side by side on a single
   line of vertical space. Calendar row sits below as inline links. */

.event-meta {
  /* No fill, no border — just spacing. 90% opacity drops the whole zone
     a notch so it doesn't compete with the title or the people lists. */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0 14px;
  margin-top: 6px;
  opacity: 0.9;
}
.event-meta-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 10px;
  padding: 0;
  margin-bottom: 12px;
  align-items: baseline;
}
.event-meta-row:last-child { margin-bottom: 0; }
.event-meta-key {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--ink);
}
.event-meta-value {
  min-width: 0;
}
.event-meta-line {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}
.event-meta-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.4;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.event-meta-link {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 0.5px;
  white-space: nowrap;
}
.event-meta-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Tiny ↗ glyph inline with the venue name — opens Maps.
   min-width/height for 20px tap target on mobile (still visually small) */
.event-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  margin-left: 2px;
  transition: color .15s;
}
.event-meta-icon:hover { color: var(--amber); }

/* Tiny "+" inline glyph next to the time — opens Google Calendar.
   No circle, just a faint glyph that pops to amber on hover.
   ink-mute (#87806f) chosen over ink-faint for WCAG AA contrast. */
.event-cal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  margin-left: 4px;
  transition: color .15s;
}
.event-cal-icon:hover { color: var(--amber); }

/* === Imp #3: Countdown === */
.event-countdown {
  color: var(--ink-mute);
}

/* === Good to know — four notes in one consolidated block === */
.event-notes { display: flex; flex-direction: column; gap: 18px; }
.event-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-note-key {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.event-note-body {
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--ink-mute);
  line-height: 1.55;
}

/* === Imp #4: Person row hover when linked to a founder === */
.event-person-link {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.event-person-link:hover { opacity: 0.7; }
.event-person-link:hover .event-person-name { color: var(--amber); }

/* === Imp #6: Past dinners horizontal strip === */
.event-past-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.event-past-strip::-webkit-scrollbar { display: none; }
.event-past-card {
  flex: 0 0 160px;
  text-decoration: none;
  color: var(--ink);
  scroll-snap-align: start;
}
.event-past-cover {
  width: 100%;
  padding-bottom: 60%;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-2);
  border-radius: 8px;
  filter: saturate(0.75) brightness(0.96);
  transition: filter 0.2s;
}
.event-past-card:hover .event-past-cover { filter: saturate(1) brightness(1); }
.event-past-text { padding-top: 8px; }
.event-past-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.3;
}
.event-past-meta {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* === Imp #7: Light tap-to-open map card (replaces iframe) === */
.event-map-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--paper-2);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s;
}
.event-map-card:hover { background: #ebe6d6; }
.event-map-card-pin { font-size: 20px; flex-shrink: 0; }
.event-map-card-text { flex: 1; min-width: 0; }
.event-map-card-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.3;
}
.event-map-card-sub {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.event-map-card-cta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--amber);
  font-weight: 500;
  flex-shrink: 0;
}
/* Arrival tip beneath the map card — quiet hairline on the left so it
   reads as a note, not part of the address. Kept very light. */
.event-arrival-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 12px 4px 0;
  padding-left: 12px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* === Inline intent form on event page (when "going") === */
.event-intent {
  background: #faf8f2;
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 6px;
}
.event-intent-helper {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin: -6px 0 14px;
}
.event-intent-form .signal-stack { gap: 14px; }
.event-intent-save {
  margin-top: 14px;
  width: auto;
  padding: 8px 18px;
  height: auto;
  font-size: 13.5px;
}

/* === Per-attendee intents inside the participants section === */
.event-person-intents {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.event-person-intent {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
}
.event-person-intent-key {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-right: 4px;
}

/* === Profile bio line (simplified, replaces asks/offers) === */
.profile-bio {
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
  margin: 6px 0 22px;
  text-align: center;
}
.profile-bio-empty {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--amber);
  text-align: center;
  text-decoration: none;
  margin: 6px 0 22px;
}

/* === Imp #2: RSVP CTA states === */
.cta-btn-going {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid var(--amber);
}
.cta-btn-going:hover {
  background: var(--amber);
  color: white;
}

/* === Imp #9: Micro-interactions === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .event-cover {
    animation: fadeUp 0.5s ease-out both;
  }
  .event-title-block {
    animation: fadeUp 0.5s ease-out 0.1s both;
  }
  .event-person-avatar {
    transition: transform 0.18s ease;
  }
  .event-person-link:hover .event-person-avatar,
  .event-person:hover .event-person-avatar {
    transform: scale(1.05);
  }
}

/* Calendar links inside an event-meta-line, separated by a dim dot */
.event-meta-row .event-cal-link {
  font-size: 13px;
}
.event-meta-row .event-cal-link + .event-cal-link::before {
  content: '·';
  color: var(--ink-mute);
  margin: 0 10px;
  border: 0;
}

/* Detail rows kept for fallback (no Maps link case) */

.event-detail-line {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.event-detail-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
  line-height: 1.5;
}

/* Unified people list (Hosts + Participants share styling) */

.event-people {
  display: flex;
  flex-direction: column;
}
.event-person {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}

/* Quiet right-chevron only on rows that link to a founder profile.
   Always visible but very faint; firms up on hover. */
.event-person-arrow {
  margin-left: auto;
  align-self: center;
  color: var(--ink-faint);
  font-size: 18px;
  font-weight: 400;
  padding-left: 8px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.event-person-link:hover .event-person-arrow { color: var(--amber); }
.event-person:first-child { padding-top: 2px; }
.event-person:last-child { border-bottom: none; padding-bottom: 0; }
.event-person-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-top: 1px;
  object-fit: cover;
  overflow: hidden;
}
img.event-person-avatar-image {
  display: block;
  background: var(--paper-2);
}
.event-person-text { flex: 1; min-width: 0; }
.event-person-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* "Host" tag sitting beside the name — quiet neutral pill so it reads
   as metadata, not as an emphasized brand element. */
.event-person-host-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px 2px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mute);
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: 0.01em;
}
.event-person-role {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 2px;
  line-height: 1.45;
}
.event-person-bio {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 6px;
  line-height: 1.55;
}

/* [HOST] tag — small mono badge that prefixes a host's name */
.event-person-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--paper);
  background: var(--amber);
  padding: 3px 6px 3px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 4px;
  line-height: 1;
}

/* Old .event-meta-block kept for backwards-compat (no longer rendered) */
.event-meta-block {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.event-when-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.event-when-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(194,65,12,0.18);
  animation: pulse-accent 1.6s ease-in-out infinite;
}
@keyframes pulse-accent {
  0%, 100% { box-shadow: 0 0 0 4px rgba(194,65,12,0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(194,65,12,0.06); }
}

.event-headline {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 10px;
}

.event-when-line {
  font-size: 14px;
  color: var(--ink-mute);
  font-weight: 500;
}
.event-when-zone {
  font-size: 10.5px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--ink-fade);
  margin-left: 2px;
}
.event-when-sep { margin: 0 6px; color: var(--ink-fade); }

/* Body padding tweak — meta block already has padding so first section has less top spacing */
.event-body { padding-top: 0; }

/* OLD hero styles below — kept for fallback compatibility, no longer referenced */

.event-hero {
  position: relative;
  background: linear-gradient(160deg, #7c2d12 0%, #c2410c 45%, #f97316 100%);
  color: white;
  padding: 96px 24px 28px;
  overflow: hidden;
  isolation: isolate;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.event-hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18) 0, transparent 35%),
    radial-gradient(circle at 15% 85%, rgba(0,0,0,0.18) 0, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* Image-backed hero — kept for fallback compatibility. */
.event-hero-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 360px;
  padding: 96px 24px 24px;
}
.event-hero-image .event-hero-overlay {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.0)  35%,
      rgba(0,0,0,0.0)  50%,
      rgba(0,0,0,0.55) 85%,
      rgba(0,0,0,0.78) 100%);
}

/* New cover image inside its own positioned <img> child.
   This lets us scale the IMG (Ken Burns) inside the box
   without scaling the box itself. */
.event-cover-has-image { background: var(--bg); }
/* Subtle film grain — pulls the photograph toward "atmosphere" and away
   from "stock image." Most readers won't consciously notice it. */
.event-cover-has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.10;
  mix-blend-mode: overlay;
  z-index: 2;
}
.event-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Editorial filter — sepia warms the cast, mild saturation pull-back
     keeps it from competing with the title, slight contrast drop makes
     it feel like atmosphere instead of a stock photo. */
  filter: saturate(0.92) brightness(0.97) contrast(0.95) sepia(0.34);
}
/* Warm amber wash on top of the image for visual handoff into the
   title block below. Bumped warmer top-to-bottom. */
.event-cover-has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 210, 160, 0.16) 0%,
    rgba(255, 200, 150, 0.10) 50%,
    rgba(220, 140, 80, 0.32) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
}
.event-hero-content { position: relative; z-index: 1; }

.event-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.event-hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251,191,36,0.25);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(251,191,36,0.25); }
  50%      { box-shadow: 0 0 0 7px rgba(251,191,36,0.10); }
}

.event-hero-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: 1.12;
  margin-bottom: 16px;
}

.event-hero-time {
  font-size: 14.5px;
  opacity: 0.92;
  font-weight: 500;
}
.event-hero-time-zone {
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 2px;
}
.event-hero-sep { margin: 0 6px; opacity: 0.55; }

/* Body */

.event-body { padding: 20px 24px 0; }

.event-section {
  padding: 22px 0 4px;
  border-top: none;
}
.event-section:first-of-type { padding-top: 4px; }

/* Hosts and Participants list — give the first row a bit of breathing
   room from the section label so it doesn't sit flush. */
.event-section-people .event-people { margin-top: 16px; }

.event-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.event-section-count {
  background: transparent;
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 400;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0;
}

/* Venue — flat, no card. Just an icon + text + amber link. */

.event-venue-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  text-decoration: none;
  color: var(--ink);
  margin-top: 0;
}
.event-venue-card:hover { background: transparent; }
.event-venue-card:hover .event-venue-cta { color: var(--ink); border-bottom-color: var(--ink); }
.event-venue-card-static { cursor: default; }
.event-venue-icon {
  font-size: 16px;
  width: auto; height: auto;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.event-venue-text { flex: 1; min-width: 0; }
.event-venue-name { font-size: 15px; line-height: 1.3; }
.event-venue-address { font-size: 13px; color: var(--ink-mute); margin-top: 3px; line-height: 1.45; }
.event-venue-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--amber);
  font-weight: 500;
  margin-top: 8px;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}

/* Speakers / Hosts */

.event-speakers { display: flex; flex-direction: column; gap: 14px; }
.event-speaker {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.event-speaker-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.event-speaker-text { flex: 1; min-width: 0; }
.event-speaker-name { font-size: 14.5px; font-weight: 600; }
.event-speaker-role { font-size: 12.5px; color: var(--ink-mute); margin-top: 1px; }
.event-speaker-bio { font-size: 13px; color: var(--ink-mute); margin-top: 6px; line-height: 1.5; }

/* About */

.event-about-text { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.event-about-text p { margin-bottom: 10px; }
.event-about-text p:last-child { margin-bottom: 0; }

/* Agenda — timeline */

/* Agenda — quiet two-column list. No dots, no connecting line:
   it's a relaxed dinner, not a conference schedule.
   Hierarchy: time (quietest) → title (primary) → detail (support). */
.event-agenda { display: flex; flex-direction: column; gap: 16px; }
.event-agenda-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
}
.event-agenda-time {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-dim);
  padding-top: 4px;
  letter-spacing: 0.01em;
}
.event-agenda-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.event-agenda-detail {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.55;
}

/* Embedded map — bottom of event page */
.event-map {
  position: relative;
  width: 100%;
  padding-bottom: 62%; /* aspect ratio ~ 16:10 */
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
  flex-shrink: 0;
}
.event-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.9); /* gently mute the Google styling so it fits the page */
}
.event-map-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
}
.event-map-cta:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Participants — flat list with hairline rules between rows, no card */

.event-participants {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.event-participant {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.event-participant:last-child { border-bottom: none; padding-bottom: 0; }
.event-participant:first-child { padding-top: 0; }
.event-participant-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.event-participant-text { flex: 1; min-width: 0; }
.event-participant-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.event-participant-role { font-size: 12.5px; color: var(--ink-mute); margin-top: 1px; line-height: 1.4; }

.event-participants-foot {
  font-size: 12.5px;
  color: var(--ink-fade);
  margin-top: 10px;
  text-align: center;
}

/* Participants placeholder (when none yet) */

.event-participants-placeholder {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg);
  border-radius: 16px;
}
.event-participants-dots { display: flex; }
.event-participant-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--surface);
  margin-left: -10px;
}
.event-participant-dot:first-child { margin-left: 0; }
.event-participants-text { font-size: 13px; color: var(--ink-mute); line-height: 1.45; flex: 1; }
.event-participants-text strong { display: block; color: var(--ink); margin-bottom: 2px; font-weight: 600; }

/* Add to calendar — inline text links separated by a dot, not buttons */

.event-cal-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
  font-size: 13.5px;
}
.event-cal-link {
  display: inline-flex;
  align-items: baseline;
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.event-cal-link:hover { color: var(--amber); border-bottom-color: var(--amber); }
.event-cal-link + .event-cal-link::before {
  content: '·';
  color: var(--ink-faint);
  margin: 0 14px 0 -14px;
  border: 0;
}
/* Event index list */

.event-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.event-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.event-card:hover { border-color: var(--ink-mute); }
.event-card:active { transform: scale(0.99); }

.event-card-when {
  width: 52px;
  text-align: center;
  flex-shrink: 0;
  background: var(--bg);
  border-radius: 10px;
  padding: 7px 0 9px;
  line-height: 1.1;
}
.event-card-day {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-mute);
  margin-bottom: 3px;
}
.event-card-date {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.event-card-month {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}

.event-card-text { flex: 1; min-width: 0; }
.event-card-title { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.event-card-meta { font-size: 12.5px; color: var(--ink-mute); line-height: 1.4; }

.event-card-past { opacity: 0.7; }
.event-card-past .event-card-when { background: var(--border-soft); }

.event-list-divider {
  font-size: 11.5px;
  color: var(--ink-fade);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  margin: 28px 0 10px;
}

.empty-events {
  background: var(--bg);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
}
.empty-events-icon { font-size: 32px; margin-bottom: 10px; }
.empty-events-text { font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; }
.empty-events-text strong { display: block; color: var(--ink); margin-bottom: 4px; }

/* =====================================================================
   TYPE SYSTEM — aligned with echai.ventures/feed
   Serif (Newsreader) for editorial headings, Mono (JetBrains Mono) for
   metadata / eyebrows / numerals, Sans (Inter) everywhere else.
   These rules override font-family on existing classes; weights and
   letter-spacing are re-tuned because serifs read heavier than sans.
   ===================================================================== */

/* Editorial headings — serif */
.welcome-title,
.screen-title,
.event-headline,
.profile-name,
.done-title,
.welcome-celebrate .screen-title,
.event-meta-block .event-headline,
.benefit-title,
.event-speaker-name,
.event-participant-name,
.event-card-title,
.event-agenda-title,
.event-venue-name {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* The biggest editorial headlines get a slightly heavier weight */
.welcome-title,
.event-headline,
.done-title,
.welcome-celebrate .screen-title {
  font-weight: 600;
}

/* Eyebrows / metadata / counts — mono uppercase
   (event-section-label removed: now sans bold per "no uppercase" rule) */
.screen-eyebrow,
.event-when-eyebrow,
.steps-label,
.next-section-label,
.event-list-divider,
.event-card-day,
.event-card-month,
.event-meta-label,
.event-when-zone,
.event-hero-eyebrow,
.event-hero-time-zone {
  font-family: var(--font-mono);
}

/* Tags / numeric counts in mono with tabular numerals */
.event-section-count,
.next-tag,
.event-card-date,
.event-agenda-time,
.event-when-line,
.event-card-meta,
.profile-meta,
.event-when-pill {
  font-variant-numeric: tabular-nums;
}

/* Underlined editorial links inside prose / about copy */
.event-about-text a,
.welcome-sub a,
.benefit-detail a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5px;
  transition: color .15s, border-color .15s;
}
.event-about-text a:hover,
.welcome-sub a:hover,
.benefit-detail a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* Slightly lighter card borders to match echai feed */
.profile-card,
.event-meta-grid,
.event-venue-card,
.event-participants,
.event-card,
.next-item,
.profile-tag,
.signin-helper,
.check-email-tip,
.empty-state {
  border-color: var(--rule);
}

/* === Onboarding (single-step) layout === */
.onboarding-screen {
  padding-top: 14px;
}
.onboarding-section-label {
  display: block;
  margin: 18px 0 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* Custom chips (user-added "Your own" tags) — same look as predefined
   chips but with a small × indicator that they're removable. */
.chip.chip-custom { padding-right: 8px; }
.chip.chip-custom span[aria-hidden] { opacity: 0.55; margin-left: 2px; }
.chip.chip-custom:hover span[aria-hidden] { opacity: 1; }

/* Inline "+ Add your own" input that sits at the end of the chips row. */
.chip-add-input {
  flex: 0 0 auto;
  min-width: 140px;
  height: 32px;
  padding: 0 12px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.chip-add-input::placeholder { color: var(--ink-dim); }
.chip-add-input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--ink);
}

/* Social handle inputs — show a quiet "x.com/" / "linkedin.com/in/"
   prefix so the input asks for just the username. The prefix is
   visual only; the input itself takes the bare handle. */
.social-input-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--paper-2);
  overflow: hidden;
}
.social-input-row:focus-within { border-color: var(--ink); background: var(--surface); }
.social-input-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 4px 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
  background: transparent;
}
.social-input.text-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding-left: 2px;
}
.social-input.text-input:focus { background: transparent; }

/* Collapsible "Add more" extras (Title / Company / socials). */
.onboarding-extras {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.onboarding-extras > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 2px 0;
}
.onboarding-extras > summary::-webkit-details-marker { display: none; }
.onboarding-extras > summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
  color: var(--ink-mute);
  font-weight: 400;
}
.onboarding-extras[open] > summary::before { content: "–"; }
.onboarding-extras-hint {
  color: var(--ink-mute);
  font-weight: 400;
  margin-left: 4px;
  font-size: 12.5px;
}
.onboarding-extras-stack { margin-top: 14px; }

/* === Onboarding avatar picker ===
   Centered circle the user taps to choose a photo. Optional. */
.onboarding-avatar-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 22px;
}
/* Larger, more inviting variant used on the single-step onboarding
   where the photo is the headline ask. */
.onboarding-avatar-picker-prominent {
  margin: 8px 0 26px;
}
.onboarding-avatar-picker-prominent .onboarding-avatar-slot {
  width: 108px;
  height: 108px;
}
.onboarding-avatar-picker-prominent .onboarding-avatar-empty { font-size: 42px; }
.onboarding-avatar-picker-prominent .onboarding-avatar-hint {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.onboarding-avatar-slot {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s, background 0.15s;
}
.onboarding-avatar-slot:hover { border-color: rgba(0, 0, 0, 0.4); }
.onboarding-avatar-slot.has-image { border: none; background: transparent; }
.onboarding-avatar-empty {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 300;
  color: var(--ink-dim);
  line-height: 1;
}
.onboarding-avatar-slot.has-image .onboarding-avatar-empty { display: none; }
.onboarding-avatar-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.onboarding-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.onboarding-avatar-hint {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
}

/* === Onboarding additions === */

/* Multi-line bio field on Step 1 — sits with the other text inputs but
   reads as a paragraph, not a label. */
.onboarding-textarea {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  min-height: 56px;
  resize: vertical;
}
.field-helper-tight {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim);
  margin: -2px 2px 0;
}

/* Grouped looking-for chips — small section label above each cluster,
   so "Hiring / Co-founder / Tech / Design" feels like Building intent,
   not a random list. */
.chip-group {
  margin-bottom: 18px;
}
.chip-group:last-child { margin-bottom: 0; }
.chip-group-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* "Other…" city option — when tapped, reveals a freeform text input.
   Don't make founders lie about which city they're in. */
.city-other-wrap {
  margin-top: 12px;
}
.city-other-wrap[hidden] { display: none; }

/* Match stack on the just-joined screen — turns the post-signup moment
   from "preview" into "payoff." Each row links to a real founder. */
.match-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 28px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-soft);
}
.match-row:last-child { border-bottom: none; }
.match-row:hover .match-name { color: var(--amber); }
.match-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  flex-shrink: 0;
}
.match-text { flex: 1; min-width: 0; }
.match-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color 0.15s;
}
.match-meta {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 2px;
  line-height: 1.4;
}
.match-tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.match-tag {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-mute);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 7px;
  border-radius: 3px;
}
.match-tag-shared {
  color: var(--amber);
  background: rgba(217, 119, 6, 0.10);
}
.match-arrow {
  color: var(--ink-faint);
  font-size: 22px;
  font-weight: 400;
  padding-left: 4px;
  flex-shrink: 0;
}