/* =====================================================================
   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;
  /* Inter stylistic alternates + opentype refinements: kerning,
     standard + contextual ligatures, true small-caps where used.
     Premium typography is invisible until you read closely. */
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'kern', 'liga', 'calt';
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
}

/* Subtle paper-grain texture on the page background. Hand-rolled SVG
   noise. about 1KB inlined. so the screen reads as off-white card
   stock instead of a flat fill. */
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

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

/* Mobile-first: phone-frame is the page on small screens, fills
   the viewport. On wider screens it stays a centered "card" but
   widens to 720 px so attendee tiles, snapshots, profile cards
   etc. use the available space instead of sitting in a narrow
   390 px column with a sea of empty paper around them. */
.phone-frame {
  width: 100%;
  max-width: 720px;
  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; align-items: stretch; }
  .phone-frame {
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    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; }

/* Slim variant used on the profile page. drops the wasted empty
   middle (no progress-wrap, no spacer divs) and uses ~36px height.
   The single child (back arrow or Sign out) sits flush. */
.app-bar-slim { height: 36px; padding: 0 10px; }
.app-bar-text-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  transition: color 0.15s ease;
}
.app-bar-text-btn:hover { color: var(--ink); }

.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-direction: column;
  padding: 8px 24px 24px;
}
.screen.active { display: flex; animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

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

.screen-title {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 8px 0 14px;
  color: var(--ink);
}

.screen-subtitle {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.55;
  letter-spacing: -0.004em;
  margin-bottom: 28px;
}

/* 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 calc(20px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  background: var(--surface);
}
.bottom-bar.hidden { display: none; }

.cta-btn {
  width: 100%;
  height: 56px;
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 10px rgba(26, 24, 20, 0.12);
  position: relative;
}
.cta-btn:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 14px rgba(26, 24, 20, 0.18); }
.cta-btn:active { opacity: 0.88; }

/* Quieter variant. white surface with a soft outline, used for
   secondary actions that sit alongside the primary ink CTA
   (e.g. "Send recap to attendees" next to the dark "Save"). */
.cta-btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
}
.cta-btn-secondary:hover {
  border-color: var(--ink);
  box-shadow: 0 2px 8px rgba(26, 24, 20, 0.06);
}

/* Spacing around the manual "send recap" section on the photos
   edit page. soft top border so it reads as its own block,
   distinct from the photo-management form above. */
.photos-edit-recap {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.photos-edit-recap-sent {
  color: var(--ink-mute);
  font-style: italic;
}

/* Premium loading state. instead of swapping label text (which causes
   layout shift and reads "form-y"), keep the label, add a hairline
   spinner on the right. Triggered by adding .is-loading on submit. */
.cta-btn.is-loading {
  cursor: progress;
  pointer-events: none;
  opacity: 0.92;
  padding-right: 44px;
}
.cta-btn.is-loading::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-top-color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  animation: cta-spin 0.85s linear infinite;
}
@keyframes cta-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cta-btn.is-loading::after { animation-duration: 2.4s; }
}

.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);
}
.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: 1px solid transparent;
  background: var(--bg);
  border-radius: 14px;
  padding: 14px 16px;
  /* 16px font prevents iOS Safari from auto-zooming on focus. */
  font-size: 16px;
  font-family: inherit;
  outline: none;
  color: var(--ink);
  resize: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.text-input:focus {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(26, 24, 20, 0.06);
}
.text-input::placeholder { color: var(--ink-fade); }
.text-input.small { padding: 12px 14px; font-size: 14.5px; }

/* === 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); }

/* === Single-page event chooser. /events/new === */

.chooser-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 18px;
}

/* Live preview at the top. updates as the admin picks. */
.chooser-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--paper-2);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.chooser-preview-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px dashed transparent;
  padding: 2px 0;
  outline: none;
}
.chooser-preview-title:hover {
  border-bottom-color: rgba(0, 0, 0, 0.15);
}
.chooser-preview-title:focus {
  border-bottom-color: var(--amber);
}
.chooser-preview-title::placeholder {
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 400;
}
.chooser-preview-row {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chooser-preview-dot {
  color: var(--ink-mute);
  opacity: 0.6;
}

.chooser-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chooser-legend {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.chooser-legend-manage {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 119, 6, 0.4);
  padding-bottom: 1px;
}
.chooser-legend-manage:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* City chip row above the venue list. Tapping a chip filters the
   rows below to that city's venues only. Inactive chips read as
   quiet pills; the active chip carries an amber background so the
   current filter is obvious without re-scanning the row. */
.chooser-city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.chooser-city-chip {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.chooser-city-chip:hover {
  color: var(--ink);
  border-color: var(--ink-mute);
}
.chooser-city-chip.is-active {
  background: rgba(217, 119, 6, 0.12);
  color: var(--amber);
  border-color: rgba(217, 119, 6, 0.4);
}

/* Empty-state prompt that sits below the venue rows when no city is
   picked yet. Replaced by "No venues in <City> yet." if a city is
   selected but has no rows. */
.chooser-city-prompt {
  margin: 6px 2px 0;
  font-style: italic;
}

/* Theme + venue rows. radio inputs are visually hidden; the whole
   row is the click target and shows selected state via .is-selected. */
.chooser-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* The chooser uses [hidden] on venue rows for the city filter. Our
   own .chooser-pick-row { display: flex } has the same specificity
   as the UA [hidden] { display: none } rule, so without this the
   class wins via source order and venues stay visible regardless of
   the city pick. */
.chooser-pick-row[hidden] { display: none; }
.chooser-pick-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.chooser-pick-row input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--amber);
}
.chooser-pick-row:hover {
  border-color: rgba(0, 0, 0, 0.28);
}
.chooser-pick-row:has(input:checked) {
  border-color: var(--amber);
  background: rgba(217, 119, 6, 0.06);
}
.chooser-pick-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.chooser-pick-title {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}
.chooser-pick-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.45;
  margin: 0;
}

/* Cover thumbnail grid. */
.chooser-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.chooser-cover-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--paper);
  cursor: pointer;
}
.chooser-cover-tile input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chooser-cover-tile:hover {
  border-color: rgba(0, 0, 0, 0.28);
}
.chooser-cover-tile:has(input:checked) {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber) inset;
}
.chooser-cover-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.chooser-cover-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 13px;
}
.chooser-cover-name {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  padding: 0 4px 4px;
}

/* === Theme list. /admin/themes index === */
.theme-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease;
}
.theme-card:hover { border-color: rgba(0, 0, 0, 0.28); }
.theme-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.theme-card-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}
.theme-card-uses {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
}
.theme-card-desc {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.theme-card-meta {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
}

/* === Cover library admin grid. /admin/event_covers === */
.cover-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.cover-library-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--paper);
}
.cover-library-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
}
.cover-library-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cover-library-name {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.cover-library-uses {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
}
.cover-library-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 10px 16px;
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  min-height: 38px;
}
.chip:active { opacity: 0.7; }
.chip.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.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 show. FOUNDER CARD-as-hero =========================
   The profile show page renders as a FOUNDER CARD: this is what
   tablemates see when you walk into a dinner. Single "Edit profile"
   button sits below the card. Per-block inline edits are gone  
   the card is read-only here; editing happens on /:id/edit. */

/* === Onboarding-form live preview only ===
   The signup flow renders a small FOUNDER CARD mini that mirrors
   the user's typing in real time. It uses its own set of legacy
   .founder-card-* classes that were originally shared with the
   show-page card; when the show-page card was redesigned, these
   stayed orphaned. Restored as onboarding-specific styles so the
   preview keeps working without affecting the show-page hero. */
.founder-card-bar {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.founder-card-brand {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.founder-card-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  display: inline-block;
}
.founder-card-kind {
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.founder-card-title,
.founder-card-company {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.35;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.founder-card-name.is-placeholder,
.founder-card-title.is-placeholder,
.founder-card-company.is-placeholder,
.founder-card-row-value.is-placeholder {
  color: var(--ink-fade);
}

/* Tap-to-edit affordance on the preview text. Cursor + hover hint
   so people who instinctively try to click a preview line get a
   signal that the tap routes them to the matching form field
   below (handled by card-preview#jumpTo). */
.preview-tappable {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  margin: 0 -4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.preview-tappable:hover {
  background: rgba(198, 74, 26, 0.08);
  color: var(--ink);
}
.founder-card-rule {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 14px 0 12px;
}
.founder-card-empty {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 6px;
}

/* Photo-upload slot inside the onboarding live preview (signup flow's
   FOUNDER CARD mini). Fixed size + img absolutely positioned to cover
   so an uploaded photo can't blow out the slot. The placeholder icon
   hides via the has-image class set by the avatar-picker controller. */
.founder-card-photo {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px dashed rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
}
.founder-card-photo-icon {
  width: 22px;
  height: 22px;
  stroke: var(--ink-mute);
  stroke-width: 1.5;
  fill: none;
}
.founder-card-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.founder-card-photo.has-image { border-color: transparent; }
.founder-card-photo.has-image .founder-card-photo-icon { display: none; }

/* Avatar inside the founder-card hero. Tight + circular so name + meta
   sit on top instead of beside a big square. */
.founder-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  flex-shrink: 0;
  overflow: hidden;
  /* Layered ring: bright white halo + outer amber accent so the
     avatar reads as a small portrait frame against the warm
     card surface, not just a circle on a tint. */
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 4px rgba(198, 74, 26, 0.18),
    0 4px 14px rgba(26, 24, 20, 0.12);
}
img.founder-card-avatar-image {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  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);
}

/* Name + host badge sit baseline-aligned on one line. */
.founder-card-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}
.profile-host-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--amber-soft);
}

/* Blue verified tick rendered next to a founder name. Same
   visual language as X / Instagram blue checks. The SVG inside
   already carries its own colour, this wrapper just keeps it
   inline with the surrounding text. */
.founder-verified {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  margin-left: 4px;
  line-height: 0;
}
.founder-verified svg { display: block; }
/* Glyph socials. tiny inline row, no circular buttons. Reads as
   identity decoration (Linear / Vercel style), not as CTAs. */
.founder-card-socials {
  display: flex;
  gap: 10px;
  margin: 8px 0 0;
}
.founder-card-social {
  display: inline-flex;
  align-items: center;
  color: var(--ink-fade);
  text-decoration: none;
  transition: color 0.15s ease;
}
.founder-card-social:hover { color: var(--ink); }
.founder-card-social .ui-icon svg { width: 14px; height: 14px; }

/* Chip rows inside the card. Tighter than profile-tags' default. */
.founder-card-row-tags { gap: 4px; margin-top: 2px; }

/* About me: one labelled row per group (I am / Stage / Backs / Space).
   Key on the left, chips on the right. baseline aligned for scanning. */
.founder-card-about {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.founder-card-about-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.founder-card-about-key {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-fade);
  flex-shrink: 0;
  min-width: 42px;
}

/* (.profile-edit-btn removed. the single edit affordance is now
   the pencil icon in the top-right of the founder card itself.) */

/* Tags inside the founder-card body. slightly more contrast than
   the default profile-tag (which is used in matches too). */
.profile-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-tag {
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 100px;
  font-size: 11.5px;
  color: var(--ink-mute);
  font-weight: 500;
}

/* === Edit profile page ========================================
   Single clean screen. all fields visible at once, save inline
   at the bottom. NOT the old onboarding 01/02/03 numbered thing. */
.edit-screen { padding: 14px 22px 24px; }
.edit-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 4px;
  line-height: 1.1;
}
.edit-subtitle {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0 0 18px;
  line-height: 1.45;
}
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.edit-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edit-group-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-bottom: 2px;
}
.edit-group-helper {
  margin: -2px 0 6px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.45;
}

/* Avatar slot. tappable square that opens the file picker. */
.edit-avatar-slot {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: var(--paper-2);
  border: 1px dashed rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.edit-avatar-slot.has-image { border-color: transparent; }
.edit-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edit-avatar-placeholder {
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--ink-fade);
}
.edit-avatar-btn {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.25);
  text-underline-offset: 3px;
  align-self: flex-start;
}
.edit-avatar-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Glyph + text-input pair, one per social. */
.edit-social {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 8px 12px;
  transition: border-color 0.15s ease;
}
.edit-social:focus-within { border-color: var(--ink); }
.edit-social-glyph {
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.edit-social-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 4px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
}
.edit-social-input::placeholder { color: var(--ink-fade); }

.edit-textarea {
  min-height: 80px;
  resize: vertical;
  font-family: var(--font-serif);
  line-height: 1.45;
}

/* About me: row label + chip group inside .edit-group. */
.edit-chip-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.edit-chip-row-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.edit-chip-row-aside {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-mute);
}
.edit-chip-row-cap {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

/* Inline actions row. Save + Cancel side by side at the bottom.
   No sticky bar per the no-sticky-bottom rule. */
.edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.edit-cancel {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 6px 4px;
}
.edit-cancel:hover { color: var(--ink); }
.edit-save { width: auto; flex: 1; min-width: 0; }
/* "Done editing →" replaces the old "Save changes" button now that
   the form autosaves. It's a clear "step out of editing" link, sits
   inline at the end of the form. */
.edit-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  border: 1px solid var(--amber);
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.edit-done:hover {
  background: var(--amber-soft);
}

/* Autosave status pill. sits inline with the edit-subtitle. Subtle
   when idle / saved, breath of amber when actively saving so the
   founder gets instant feedback their edits are landing. */
.autosave-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px 2px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  background: var(--paper-2);
  border-radius: 999px;
  vertical-align: 1px;
  transition: background 0.18s ease, color 0.18s ease;
}
.autosave-status.is-saving {
  color: var(--amber);
  background: var(--amber-soft);
}
.autosave-status.is-saved {
  color: var(--ink);
  background: var(--paper-2);
}
.autosave-status.is-error {
  color: white;
  background: var(--amber);
}

/* Compact next-actions list under the profile card. Single line per
   item: glyph · title · optional quiet meta · chevron. No big icons,
   no eyebrow label competing for attention. */
.next-list {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.next-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.12s ease;
}
.next-item:last-child { border-bottom: none; }
.next-item:hover .next-title { color: var(--amber); }
.next-glyph {
  display: inline-flex;
  width: 18px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.next-glyph .ui-icon svg { width: 16px; height: 16px; }
.next-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-meta { font-size: 11.5px; color: var(--ink-mute); flex-shrink: 0; }
.next-arrow { color: var(--ink-fade); font-size: 16px; 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);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.flash-banner.is-dismissing {
  opacity: 0;
  transform: translate(-50%, -8px);
}
.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;
}

/* SSO buttons (Google, LinkedIn) live inside .screen (not .bottom-bar)
   so they're sized like other inline content, not the sticky CTA.
   button_to wraps each in a form. kill the form's default margin so
   spacing stays tight, and add a small gap between stacked SSO forms. */
.sso-signin-form { margin: 0; }
.sso-signin-form + .sso-signin-form { margin-top: 8px; }
.sso-signin-btn {
  height: 48px;
  font-size: 15px;
  font-weight: 500;
  gap: 10px;
}
.sso-signin-icon { flex-shrink: 0; }

/* "or" divider between Google and email sign-in. */
.signin-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  color: var(--ink-mute);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.signin-divider::before,
.signin-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.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-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-fade);
  letter-spacing: 0;
  font-weight: 500;
  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(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.welcome-events-link:hover { text-decoration-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; }

/* === Hero cover photo ===
   The photo is the photograph. text doesn't overlap it. A soft
   bottom fade dissolves the image into the paper-toned content
   that follows so the seam is editorial, not abrupt. */
.welcome-screen { padding: 0; }
.welcome-cover {
  position: relative;
  height: 300px;
  background-size: cover;
  background-position: center;
  filter: saturate(0.95) contrast(0.97) sepia(0.12);
  margin: 0;
}
.welcome-cover-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20, 18, 14, 0.12) 0%,
      rgba(20, 18, 14, 0)    18%),
    linear-gradient(180deg,
      rgba(245, 241, 232, 0)    65%,
      rgba(245, 241, 232, 0.6)  88%,
      rgba(245, 241, 232, 1)    100%);
}

/* Headline + sub-copy now live BELOW the photo. ink on paper, fully
   legible, no contrast battle with the people in the frame. */
.welcome-hero-text {
  padding: 20px 24px 4px;
}
.welcome-hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 38px;
  letter-spacing: -0.026em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 12px;
}
.welcome-hero-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: -0.004em;
  margin: 0;
  max-width: 380px;
}

/* Re-apply horizontal padding to content below the cover (the cover
   itself spans edge-to-edge). */
.welcome-screen > *:not(.welcome-cover) { padding-left: 24px; padding-right: 24px; }

/* === Host byline (single line, no card) ===
   Avatar + "Hosted by Name · Role" on one line under the title block.
   The next-dinner card below is the only paper-2 surface here, so
   the eye settles there without competition from a second card. */
.welcome-host-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.welcome-host-line-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
}
.welcome-host-line-text {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  min-width: 0;
}
.welcome-host-line-eyebrow {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-right: 6px;
}
.welcome-host-line-name { font-weight: 600; }
.welcome-host-line-role { color: var(--ink-mute); }

/* === Founder-voice pull-quote ===
   Big editorial serif. Sits mid-scroll above the benefits as a
   moment of someone-else's-voice in a page that's otherwise the
   host's. Only renders when @welcome_quote is populated. */
.welcome-quote {
  margin: 32px 0 28px;
  padding-left: 14px;
  border-left: 2px solid var(--amber);
}
.welcome-quote-body {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 10px;
}
.welcome-quote-author {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin: 0;
}

/* === Past dinners horizontal strip ===
   Editorial proof. a row of past dinner cover thumbnails. Scrolls
   horizontally on mobile if there are more than fit. */
.welcome-past-section {
  margin: 28px 0 12px;
}
.welcome-past-section-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.welcome-past-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -24px;
  padding: 0 24px;
}
.welcome-past-strip::-webkit-scrollbar { display: none; }
.welcome-past-card {
  flex: 0 0 132px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
.welcome-past-card-cover {
  width: 132px;
  height: 132px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) brightness(0.97) sepia(0.18);
}
.welcome-past-card-text {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.welcome-past-card-edition {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  margin-right: 4px;
}

/* === Join (inline, no sticky) ===
   Sits at the natural end of the scroll content. No bottom-bar
   pinning. the form is just another section the user reaches by
   scrolling. */
.welcome-join-section {
  margin: 36px 0 18px;
  padding: 22px 22px 24px;
  background: var(--paper-2);
  border-radius: 18px;
}
.welcome-join-eyebrow {
  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;
  text-align: center;
}
.welcome-join-helper {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: center;
  margin: 0 0 14px;
}

/* === Masthead footer ===
   Publication-style closing line. "eChai Events · Founders' dinners
   across India." Editorial closure rather than app footer chrome. */
.welcome-masthead {
  margin: 18px 0 6px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.55;
}
.welcome-masthead-link {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.25);
  text-underline-offset: 3px;
  font-size: 12.5px;
}
.welcome-masthead-link:hover { text-decoration-color: var(--ink); }
.welcome-fineprint {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
  margin: 6px 0 0;
}
.welcome-fineprint a { color: var(--ink-mute); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.15); text-underline-offset: 2px; }
.welcome-fineprint span[aria-hidden="true"] { margin: 0 6px; color: var(--ink-faint); }

/* === Next-dinner hero card on the landing ===
   Concrete pitch for the next event. title, when, where, faces of who's
   going. Tappable card; CTA is implicit via the eyebrow arrow. */
.welcome-next-card {
  display: block;
  margin: 0 0 18px;
  padding: 16px 16px 14px;
  background: var(--paper-2);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.welcome-next-card:hover,
.welcome-next-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.welcome-next-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.welcome-next-headline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.welcome-next-edition {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0;
}
.welcome-next-meta {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.welcome-next-countdown { color: var(--ink); font-weight: 500; }
.welcome-next-going {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.welcome-next-going-count {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* Avatar strip. overlapping circles, "+N" pill at the end if needed. */
.welcome-faces {
  display: inline-flex;
  align-items: center;
}
.welcome-face {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--paper-2);
  margin-left: -8px;
  background: var(--paper);
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.welcome-face:first-child { margin-left: 0; }
.welcome-face-initial {
  background: var(--paper);
  color: var(--ink-mute);
}

/* Inline sign-up form on the landing. replaces the round-trip to a
   separate /sign_in page. Email input stacked above the submit. */
.welcome-join {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.welcome-join-input {
  /* Slightly taller than the default to feel finger-friendly. */
  padding: 14px 14px;
  font-size: 15px;
}

/* 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-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.06;
  margin-bottom: 14px;
}
.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; }
.bottom-helper-sub {
  display: block;
  font-size: 11.5px;
  color: var(--ink-fade);
  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);
}
/* === Pre-RSVP picker ===
   The whole RSVP surface is one form: optional chips + a single
   "I'll be there" button. No modal. Picking chips is optional. */
.rsvp-prepicker {
  margin: 4px 0 8px;
}
.rsvp-prepicker-prompt {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.45;
}
.rsvp-prepicker-prompt-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
}
.rsvp-prepicker-submit {
  width: 100%;
  margin-top: 14px;
}
.rsvp-prepicker-share {
  margin: 10px 0 0;
  text-align: center;
}

/* Reason chips. native checkbox inside, styled via :has(input:checked).
   Whole pill is the tappable target; the checkbox itself is hidden. */
.rsvp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rsvp-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  line-height: 1.2;
}
.rsvp-chip:hover { border-color: var(--ink); }
.rsvp-chip input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.rsvp-chip:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.rsvp-chip:focus-within {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* === Post-RSVP. compact confirmation ===
   Page belongs to the event, not the confirmation. Single line
   + small action row + inline edit-reasons disclosure. */
.rsvp-confirmed {
  margin: 4px 0 8px;
  padding: 0;
  background: var(--paper-2);
  border-radius: 14px;
  overflow: hidden;
}

/* === Fresh RSVP confirmation block ===
   First-time RSVP'er. Replaces the confusing "everything expanded at
   once" state. Big check + "You're in" + email confirmation, then a
   couple of key actions, then a clearly optional intent prompt. */
.rsvp-fresh {
  margin: 8px 0 12px;
  padding: 0;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.rsvp-fresh-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 14px;
}
.rsvp-fresh-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: rgba(198, 74, 26, 0.12);
  color: var(--amber);
  border-radius: 50%;
}
.rsvp-fresh-check .ui-icon svg { width: 16px; height: 16px; }
.rsvp-fresh-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.rsvp-fresh-sub {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.rsvp-fresh-sub strong {
  color: var(--ink-soft);
  font-weight: 500;
}

/* Two key actions inline: Add to calendar, Invite. The cancel link
   sits at the bottom of the block, not here. */
.rsvp-fresh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 14px;
}
.rsvp-fresh-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rsvp-fresh-action:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}
.rsvp-fresh-action .ui-icon { color: var(--ink-mute); }
.rsvp-fresh-action:hover .ui-icon { color: var(--ink); }

/* Optional intent prompt. Visually separated from the actions
   above by a soft divider. The "Optional" eyebrow makes it
   immediately clear this isn't required. */
.rsvp-fresh-intent {
  border-top: 1px solid var(--border);
  padding: 16px 18px 18px;
}
.rsvp-fresh-intent-head {
  margin: 0 0 14px;
}
.rsvp-fresh-eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
.rsvp-fresh-intent-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.rsvp-fresh-intent-sub {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 60ch;
}
.rsvp-fresh-form { padding: 0; }

/* Prominent save-status banner at the top of the intent form.
   Always visible so the user knows their work is being saved
   without scrolling to the save button at the bottom of a long
   form. Three states flip via the autosave-form controller:
     idle   → "Your changes save as you go" (quiet)
     saving → "Saving…" (amber tint)
     saved  → "Saved ✓" (green tint, auto-reverts to idle) */
.rsvp-fresh-status {
  margin: 0 0 14px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rsvp-fresh-status.is-saving {
  background: rgba(198, 74, 26, 0.08);
  border-color: rgba(198, 74, 26, 0.32);
  color: var(--amber);
}
.rsvp-fresh-status.is-saved {
  background: rgba(46, 124, 86, 0.10);
  border-color: rgba(46, 124, 86, 0.32);
  color: #2e7c56;
}

/* Cancel link at the very bottom. Plain text-button look, never
   loud. Tucked under the intent form so it's not the first thing
   anyone reaches for. */
.rsvp-fresh-cancel {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-fade);
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--ink-fade);
  text-underline-offset: 3px;
}
.rsvp-fresh-cancel:hover {
  color: var(--ink-mute);
  text-decoration-color: var(--ink-mute);
}

/* Single-row summary. check + "You're in" + intent preview + ⋯
   caret. Tap to expand body (action menu + full intent form). */
.rsvp-confirmed-bar {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.3;
  transition: background 0.15s ease;
}
.rsvp-confirmed-bar::-webkit-details-marker { display: none; }
.rsvp-confirmed-bar:hover { background: rgba(0, 0, 0, 0.02); }
.rsvp-confirmed-check {
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.rsvp-confirmed-text {
  font-weight: 500;
  letter-spacing: -0.005em;
  flex-shrink: 0;
}
.rsvp-confirmed-sep {
  color: var(--ink-fade);
  flex-shrink: 0;
}
.rsvp-confirmed-preview {
  font-size: 13.5px;
  color: var(--ink-soft);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsvp-confirmed-prompt {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  flex: 1 1 auto;
  min-width: 0;
}
.rsvp-confirmed-more {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-fade);
  line-height: 0.5;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
.rsvp-confirmed[open] .rsvp-confirmed-more { color: var(--ink); }
/* When the row has flex-1 preview/prompt, the more glyph doesn't
   need its own margin-left:auto. */
.rsvp-confirmed-bar:has(.rsvp-confirmed-preview) .rsvp-confirmed-more,
.rsvp-confirmed-bar:has(.rsvp-confirmed-prompt) .rsvp-confirmed-more {
  margin-left: 0;
}

/* Body container holding the action menu + the intent form when
   the bar is expanded. Separator line above each child block. */
.rsvp-confirmed-body {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.rsvp-confirmed-intent {
  padding: 14px 14px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Expanded action menu. Quiet list of links below the summary.
   Cancel RSVP is the danger variant — keeps it accessible but
   distinct from the calendar / invite items. */
.rsvp-confirmed-menu {
  display: flex;
  flex-direction: column;
  padding: 4px 6px 8px;
}
.rsvp-confirmed-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.rsvp-confirmed-menu-item:hover { background: rgba(0, 0, 0, 0.04); }
.rsvp-confirmed-menu-item .ui-icon { color: var(--ink-mute); }
.rsvp-confirmed-menu-item-danger { color: var(--ink-mute); }
.rsvp-confirmed-menu-item-danger:hover {
  color: #b34c2e;
  background: rgba(179, 76, 46, 0.04);
}
.rsvp-confirmed-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  color: var(--ink-mute);
}
.rsvp-confirmed-menu-item-danger:hover .rsvp-confirmed-menu-icon { color: #b34c2e; }
.rsvp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rsvp-pill:hover { border-color: var(--ink); background: var(--paper-2); }
.rsvp-pill .ui-icon { color: var(--ink-mute); }
.rsvp-pill:hover .ui-icon { color: var(--ink); }

/* Inline edit-reasons disclosure. native <details>. Summary line
   doubles as a status line, expanded form shows the chip picker. */
.rsvp-edit-reasons {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.rsvp-edit-reasons-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.rsvp-edit-reasons-summary::-webkit-details-marker { display: none; }
.rsvp-edit-reasons-summary::after {
  content: "›";
  margin-left: auto;
  color: var(--ink-faint);
  transition: transform 0.15s ease;
  font-size: 14px;
}
.rsvp-edit-reasons[open] .rsvp-edit-reasons-summary::after {
  transform: rotate(90deg);
}
.rsvp-edit-reasons-current {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-soft);
  flex: 1;
}
.rsvp-edit-reasons-edit {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.25);
  text-underline-offset: 3px;
}
.rsvp-edit-reasons-add {
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.25);
  text-underline-offset: 3px;
}
.rsvp-chips-form {
  padding: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rsvp-chips-save {
  align-self: flex-start;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
.rsvp-chips-save:hover { opacity: 0.9; }

/* "Not coming? Remove RSVP". hairline link under the card. */
.rsvp-confirmed-remove {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 6px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-fade);
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--ink-fade);
  text-underline-offset: 3px;
}
.rsvp-confirmed-remove:hover { color: var(--ink-mute); text-decoration-color: var(--ink-mute); }

/* Inline text-button (Invite a friend / Remove RSVP). no border,
   no background, just a hover underline. Sits in a flowing line so
   we don't burn vertical space on full-width buttons. */
.rsvp-inline-action {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rsvp-inline-action:hover { text-decoration-color: var(--ink); }
.rsvp-inline-action:disabled { opacity: 0.7; cursor: progress; }
.rsvp-inline-action .ui-icon { margin-right: 4px; opacity: 0.6; vertical-align: -2px; }
/* Inline-SVG icon wrapper. Inherits color from surrounding text and
   sits centered with text via inline-flex. Stroke weight is set on
   the inner SVG itself, so this just handles alignment. */
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: -2px;
  color: inherit;
}
.ui-icon svg { display: block; }

/* "A curated dinner · by invitation". small amber eyebrow above
   the invite-code form. Frames the lock as a feature, not friction. */
.bottom-curated-eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  text-align: center;
  margin: 0 0 6px;
}

/* 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 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  margin: 0 0 14px;
}
.bottom-going-faces {
  display: inline-flex;
  flex-shrink: 0;
}
.bottom-going-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  margin-left: -8px;
  object-fit: cover;
}
.bottom-going-face:first-child { margin-left: 0; }
.bottom-going-text { color: var(--ink-soft); }


/* 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-open {
  display: block;
  text-align: center;
  margin-bottom: 12px;
}
.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 ---------- */

/* Quiet one-line welcome shown above the founder card on first
   sign-up. Replaces the big celebrate emoji + screen-title pair. */
.welcome-line {
  margin: 4px 0 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  text-align: center;
  line-height: 1.4;
}

.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-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);
}

/* Active-filter banner shown above the feed list when a hoping
   chip was tapped. Surfaces "you're filtered on X" with a clear
   action. quiet amber treatment so it reads as state, not error. */
.feed-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--amber-soft);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
}
.feed-filter-label { color: var(--ink-mute); }
.feed-filter-tag {
  font-weight: 600;
  color: var(--amber);
}
.feed-filter-clear {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
}
.feed-filter-clear:hover { color: var(--ink); }

/* 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;
}
/* Cards variant. used on /me and /feed when each row is a full
   founder card (linkable=true) instead of the compact row. More
   vertical spacing between cards since each one is taller. */
.feed-directory-list-cards {
  gap: 18px;
}
.feed-directory-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Row is now a wrapper <div> with two independently tappable areas:
   .feed-directory-row-main (avatar + text + arrow → profile) and the
   per-chip <a> links (→ filtered feed). Avoids nested-<a> invalid
   HTML while keeping the row visually unified. */
.feed-directory-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.feed-directory-row-main {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}
.feed-directory-row-main:hover .feed-attendee-name { color: var(--amber); }
.feed-directory-row-main:hover .feed-directory-arrow { color: var(--amber); transform: translateX(2px); }
.feed-directory-row .feed-attendee-hoping { margin-left: 52px; }
.feed-directory-text { flex: 1; min-width: 0; }
/* Chevron on each row. signals "tap for full profile." */
.feed-directory-arrow {
  align-self: center;
  color: var(--ink-fade);
  font-size: 18px;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.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;
}
/* Slim cover variant. 4:1 aspect (25% padding-bottom) so the
   cover identifies the event without dominating the load-bearing
   details (date, venue, RSVP) below. */
.event-cover-slim {
  padding-bottom: 25%;
}
/* (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;
}

/* Admin-only floating affordance on the cover. Quiet light pill
   in the top-right corner so admins can open the focused cover-
   upload screen without it dominating the hero image. */
.event-cover-admin-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease;
}
.event-cover-admin-edit:hover { background: #fff; }

/* Currently-attached cover preview on the focused upload screen. */
.event-form-cover-current {
  margin: 4px 0 8px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2);
}
.event-form-cover-img {
  display: block;
  width: 100%;
  height: auto;
}
.event-form-cover-remove {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  cursor: pointer;
  user-select: 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: 14.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 10px;
  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: 14.5px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin-top: 10px;
  /* Clamp to 4 lines using CSS line-clamp. Clean cut at the line
     boundary; no fade artifact bleeding through mid-text. The
     last line gets an automatic ellipsis when clipped. "Read more"
     adds .is-revealed which drops the clamp. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-tagline-rest.is-revealed {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.event-tagline-rest p { margin: 0 0 12px; }
.event-tagline-rest p:last-child { margin-bottom: 0; }

/* Drop cap removed. it was reading as a typographic flourish out
   of place with the rest of the event page voice. event-tagline-
   rest first paragraph now renders the same as any other. */
.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. */
.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;
}

/* 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(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.event-access-info-link:hover { text-decoration-color: var(--ink); }

.bottom-helper-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bottom-helper-link:hover { text-decoration-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;
}
/* Email field shown above the code field when the visitor is signed
   out. collapses unlock + sign-in into a single submit. Full-width,
   stacks above the code+button row. */
.invite-email-input {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
/* Helper line below the combined form explaining the one-tap flow. */
.invite-form-sub {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-fade);
  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;
}

/* === Watch-list button + confirmation ===
   Shown on locked invite-only pages to signed-in founders who don't
   have a code yet. Capture "loop me in" interest. */
.bottom-watch-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.bottom-watch-btn:hover { border-color: var(--ink); color: var(--ink); }
.bottom-watching {
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  text-align: center;
}
.bottom-watching-check { color: var(--amber); margin-right: 4px; }

/* === Past-dinner banner ===
   Sits where the RSVP bottom bar would be on an upcoming event.
   Quiet eyebrow + the date it happened, so the page reads as archival
   rather than missing its CTA. */
.event-past-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--paper-2);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.event-past-banner-eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.event-past-banner-when {
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* Quiet brand anchor for first-time visitors landing on a single
   event page via a forwarded link. Signed-out only. */
.event-brand-footer {
  margin: 24px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  text-align: center;
}
.event-brand-footer-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.25);
  text-underline-offset: 3px;
  margin-left: 4px;
}
.event-brand-footer-link:hover { text-decoration-color: var(--ink); }

/* === Top attendee preview ===
   Inline row (faces + names + count). no paper-2 card. Avoids
   competing with the post-RSVP card below for "boxed surface"
   attention. Tap-through to the full participants list via anchor. */
.event-top-attendees {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 24px 4px;
  padding: 6px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: opacity 0.18s ease;
}
.event-top-attendees:hover { opacity: 0.78; }
.event-top-attendees-faces {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.event-top-attendees-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
  margin-left: -8px;
  background: var(--paper);
}
.event-top-attendees-face:first-child { margin-left: 0; }
.event-top-attendees-text {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
}
.event-top-attendees-text strong { font-weight: 600; }
.event-top-attendees-going { color: var(--ink-mute); }
.event-top-attendees-arrow {
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1;
}
/* Explicit affordance. replaces the bare "›" so users know exactly
   where the tap takes them ("See who's coming"). Right-aligned, small. */
.event-top-attendees-cta {
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.event-top-attendees:hover .event-top-attendees-cta {
  border-color: var(--ink-mute);
  background: rgba(0, 0, 0, 0.03);
}

/* === Inline RSVP block ===
   Sits in the event-page scroll right after the attendee preview, in
   place of the old pinned bottom bar + top CTA pill. One section,
   one CTA, no duplication. The block reflows for each viewer state
   (locked, RSVPed, not-yet-RSVPed, signed-out). */
.event-rsvp-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 24px 8px;
}

/* === Host byline ===
   "Hosted by Jatin" row sitting under the title block. the single
   highest-signal trust element on the page. Avatar + name + role +
   socials on one line (socials right-aligned). The wrap is a flex
   row containing the (clickable) byline link + the (separately
   clickable) socials. */
.event-host-byline-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 0 6px;
  border-top: 1px solid var(--border-soft);
}
.event-host-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.event-host-byline-link { transition: opacity 0.15s; }
.event-host-byline-link:hover { opacity: 0.78; }
.event-host-byline-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-soft);
}
.event-host-byline-avatar-initial { font-size: 16px; }
.event-host-byline-text { min-width: 0; flex: 1 1 auto; }
.event-host-byline-eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 3px;
}
.event-host-byline-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
  line-height: 1.2;
}
.event-host-byline-role {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* Host social links. small ink glyphs to the right of the host text,
   on the same flex row as the byline link. Each tap-target is
   independent so it doesn't fight the parent profile link. */
.event-host-byline-socials {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.event-host-byline-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease;
}
.event-host-byline-social:hover {
  color: var(--ink);
  background: var(--paper-2);
}

/* 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 info rows. Luma-style icon-tile + two-line text stack.
   No outer box / border — the rows sit inline on the page (same
   left edge as the title + description above) so the tile is the
   only visual container. Each row is the action: tap date to add
   to calendar, tap venue to open in maps. */
.event-info {
  margin: 18px 0 14px;
  /* Match the 24px horizontal padding the .event-title-block above
     uses; .event-screen kills its own padding so each child block
     manages its own gutters. Without this the tiles bled to the
     left edge while title + description sat indented. */
  padding: 0 24px;
  background: transparent;
  border: 0;
}
.event-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
.event-info-row + .event-info-row { margin-top: 4px; }
.event-info-row-linked { cursor: pointer; }
.event-info-row-linked:hover { opacity: 0.85; }

/* Icon tile. 44x44 amber-tinted square, rounded. Holds either a
   single icon (venue, lock) or the date tear-off (month + day).
   70% opacity so it reads as a secondary visual element next to
   the primary text content, not a primary "look at me" tile. */
.event-info-tile {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(198, 74, 26, 0.08);
  border: 1px solid rgba(198, 74, 26, 0.18);
  border-radius: 10px;
  color: var(--amber);
  opacity: 0.7;
}
.event-info-tile .ui-icon svg { width: 20px; height: 20px; }

/* Date tear-off pattern inside the tile. Small all-caps month
   label sits above a big serif day number. */
.event-info-tile-date {
  padding: 4px 0;
}
.event-info-tile-month {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--amber);
  margin-bottom: 2px;
}
.event-info-tile-day {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.event-info-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.event-info-primary {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.event-info-secondary {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.event-info-arrow {
  display: inline-block;
  margin-left: 2px;
  font-size: 13px;
  color: var(--ink-fade);
  transition: color 0.15s ease, transform 0.15s ease;
}
.event-info-row-linked:hover .event-info-arrow {
  color: var(--amber);
  transform: translate(2px, -2px);
}

/* Live indicator. The JS countdown adds .event-countdown-live to
   the span when the event has started, so the row reads as a
   moment-in-time pill (pulsing dot + amber text) instead of a
   buried prose footnote. */
.event-countdown-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
  padding: 1px 8px 2px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(198, 74, 26, 0.10);
  border-radius: 999px;
  vertical-align: middle;
}
.event-countdown-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(198, 74, 26, 0.7);
  animation: event-countdown-live-pulse 1.6s ease-out infinite;
}
@keyframes event-countdown-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(198, 74, 26, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(198, 74, 26, 0); }
  100% { box-shadow: 0 0 0 0   rgba(198, 74, 26, 0); }
}

.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-locked {
  color: var(--ink-mute);
  font-style: italic;
}
/* Small inline tag riding alongside the date line. "Free" sits here
   so a founder doesn't have to wonder about cost. Quiet by default,
   not a primary signal. */
.event-meta-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px 2px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  vertical-align: 2px;
  line-height: 1.3;
}
.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;
}

/* (Old .event-person row link styles removed. participants are now
   a grid of tiles; see .event-person-tile-link below.) */

/* === 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 inline in the participants list removed  
   they now live on the founder profile page only. The participants
   grid surfaces face + name + role + "Came for X" chip.) */

/* Pinned URL card. lives inside the founder-card. The host
   line reads first; the full URL is shown smaller below. */
.profile-pinned {
  position: relative;
  display: block;
  padding: 10px 28px 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.12s ease;
}
.profile-pinned:hover  { border-color: rgba(0, 0, 0, 0.2); }
.profile-pinned:active { transform: scale(0.99); }
.profile-pinned-host {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}
.profile-pinned-url {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  word-break: break-all;
  line-height: 1.45;
}
.profile-pinned-arrow {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 13px;
  color: var(--ink-mute);
}


/* === 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;
}

/* Participants grid. 2 columns on the phone-frame screen so the
   list feels like "seeing the room", not a directory stack. Each
   tile is a tappable card linking to the founder profile. */
/* Single-column rows beat a 2-column grid here. sparse attendees
   (avatar + role only) no longer create empty side-by-side cards,
   long custom asks have full row width to wrap into, and the eye
   scans top-to-bottom one person at a time instead of zig-zagging. */
.event-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Each tile is a vertical stack:
     row 1: avatar (left) + identity/badge/came-for (right)
     row 2: ask pills (full width, below)
   The wrapper stays a <div> so the main profile-link and each ask
   pill can be independently tappable without nested <a>s. */
.event-person-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  min-width: 0;
  transition: border-color 0.15s ease;
}
.event-person-tile:has(.event-person-tile-link:hover) { border-color: rgba(0, 0, 0, 0.2); }

/* Main = avatar + text column, side by side. */
.event-person-tile-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.event-person-tile-text {
  flex: 1 1 auto;
  min-width: 0;
}

.event-person-tile-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease;
}
.event-person-tile-link:hover .event-person-tile-name { color: var(--amber); }

.event-person-tile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  object-fit: cover;
  overflow: hidden;
  flex-shrink: 0;
}
img.event-person-tile-avatar-image {
  display: block;
  background: var(--paper-2);
}
.event-person-tile-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
  width: 100%;
}
.event-person-tile-host-tag {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 6px 2px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--amber);
  background: rgba(198, 74, 26, 0.10);
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.event-person-tile-host-tag-speaker {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.08);
}

/* Admin curation strip at the bottom of a person tile. Three small
   buttons (Host / Speaker / Pin to bottom). Visible only in admin
   view mode. Active state flips to filled amber. */
.event-person-tile-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* Self-card visual unification. When the viewer is looking at
   their own participant card, the founder_card + self-actions
   strip + inline intent editor all share one continuous peach-
   tinted surface instead of three separate floating elements.
   The wrapper gets the peach gradient + radius + border; the
   founder_card inside loses its own bg/border to avoid the
   nested-card look. */
.feed-directory-card-self {
  background:
    radial-gradient(circle at 12% -8%, rgba(198, 74, 26, 0.10) 0%, transparent 42%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(255, 255, 255, 0.40) 22%,
      rgba(255, 255, 255, 0) 58%
    ),
    var(--paper-2);
  border: 1px solid rgba(230, 212, 194, 0.7);
  border-radius: 28px;
  padding: 0 4px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(26, 24, 20, 0.06),
    0 4px 12px rgba(26, 24, 20, 0.05),
    0 18px 44px rgba(26, 24, 20, 0.08),
    0 36px 72px rgba(198, 74, 26, 0.05);
}
/* Inner founder_card sheds its own surface treatment when inside
   a self wrapper so the two don't double up as nested cards. */
.feed-directory-card-self .founder-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
}

/* Self-actions strip on the viewer's own participant card. Sits
   below the founder_card body. Three personal RSVP actions inline:
   Add to calendar, Invite, Cancel. Calendar + Invite are quiet
   outlines; Cancel is the danger variant. */
.event-attendee-self {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 4px 0;
}
.event-attendee-self-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.event-attendee-self-btn:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}
.event-attendee-self-btn .ui-icon { color: var(--ink-mute); }
.event-attendee-self-btn:hover .ui-icon { color: var(--ink); }
.event-attendee-self-btn-danger {
  color: var(--ink-fade);
  border-color: var(--border-soft);
}
.event-attendee-self-btn-danger:hover {
  color: #b34c2e;
  border-color: rgba(179, 76, 46, 0.5);
  background: rgba(179, 76, 46, 0.04);
}

/* Inline intent editor on the viewer's own participant card.
   Collapsed: one-row preview of the saved note or "share what
   you're hoping for" prompt. Tap to expand the full form. */
.event-attendee-self-intent {
  margin: 8px 4px 0;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.event-attendee-self-intent-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
  transition: background 0.15s ease;
}
.event-attendee-self-intent-summary::-webkit-details-marker { display: none; }
.event-attendee-self-intent-summary:hover { background: rgba(0, 0, 0, 0.02); }
.event-attendee-self-intent-check {
  color: var(--amber);
  font-weight: 600;
  flex-shrink: 0;
}
.event-attendee-self-intent-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
}
.event-attendee-self-intent-prompt {
  flex: 1 1 auto;
  min-width: 0;
  font-style: italic;
  color: var(--ink-mute);
  font-size: 13px;
}
.event-attendee-self-intent-edit {
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
}
.event-attendee-self-intent-form {
  padding: 14px 14px 16px;
  border-top: 1px solid var(--border);
}

/* Admin curation strip below an attendee founder_card. Same visual
   family as .event-person-tile-admin but sits as a sibling under
   the card (not inside the tile padding). Four toggles in a single
   wrapping row: Host / Speaker / Move up / Move down. */
.event-attendee-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 4px 0;
}
.event-attendee-admin-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.event-attendee-admin-btn:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
}
.event-attendee-admin-btn.is-on {
  color: var(--amber);
  background: rgba(198, 74, 26, 0.08);
  border-color: rgba(198, 74, 26, 0.4);
}
.event-attendee-admin-btn.is-on:hover {
  background: rgba(198, 74, 26, 0.14);
  border-color: var(--amber);
}

/* Admin "Add attendee" picker that sits above the participants grid.
   Scrollable native select + Add button so an admin can RSVP a founder
   on their behalf without leaving the event page. */
.event-admin-add-attendee {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: rgba(198, 74, 26, 0.04);
}
.event-admin-add-attendee-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.event-admin-add-attendee-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.event-admin-add-attendee-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.event-admin-add-attendee-input::placeholder {
  color: var(--ink-mute);
  opacity: 0.7;
}
.event-admin-add-attendee-btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.event-admin-add-attendee-btn:hover {
  background: #a8551b;
  border-color: #a8551b;
}
.event-person-tile-admin-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.event-person-tile-admin-btn:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
}
.event-person-tile-admin-btn.is-on {
  color: var(--amber);
  background: rgba(198, 74, 26, 0.08);
  border-color: rgba(198, 74, 26, 0.4);
}
.event-person-tile-admin-btn.is-on:hover {
  background: rgba(198, 74, 26, 0.14);
  border-color: var(--amber);
}
.event-person-tile-role {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 3px;
  line-height: 1.4;
  /* clamp to two lines so wildly long roles don't blow out a tile */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Unified line pattern for everything below role on a participant
   tile: Here for / Badge / Ask all share the same shape. small
   mono uppercase eyebrow ("lead") followed by the value text.
   Matches the eyebrow style used on the founder card. */
.event-person-tile-line {
  margin: 8px 0 0;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.event-person-tile-lead {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-fade);
  text-transform: uppercase;
  margin-right: 6px;
}
/* Badge variant. softer ink to keep the founder's voice a little
   quieter than the actionable Ask line below it. */
.event-person-tile-line-badge { color: var(--ink-soft); }
/* Ask variant. amber eyebrow + amber value for the actionable
   ones, since those are the actual "do this for me" signals a
   tablemate can act on. Underline-on-hover when the value links
   out to the network filter; no pill chrome. */
.event-person-tile-line-ask { color: var(--amber); }
.event-person-tile-line-ask .event-person-tile-lead { color: var(--amber); opacity: 0.75; }
a.event-person-tile-line-ask {
  display: block;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a.event-person-tile-line-ask-link:hover { border-bottom-color: var(--amber); }

/* 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-family: var(--font-serif);
  font-size: clamp(28px, 7.5vw, 38px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 14px;
  /* Avoid title orphans. "eChai Founders / Dinner" was breaking
     awkwardly with "Dinner" alone on line 2. */
  text-wrap: balance;
}

/* Inline edition badge. sits in the meta row next to the access
   pill and city kicker, woven into the masthead line. */
.event-edition-inline {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Quiet access footnote below the host byline. replaces the heavy
   paper-2 card that used to sit above the title and steal attention.
   Weight + ink-mute color (no italic, per design system). */
.event-access-note {
  margin: 14px 0 8px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-mute);
  line-height: 1.55;
}
.event-access-note-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.event-access-note-link:hover { text-decoration-color: var(--ink); }

.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;
  /* Subtle editorial tone. slight warmth + minor saturation pull
     so the photo doesn't compete with the title, without washing
     faces to sepia. */
  filter: saturate(0.95) brightness(0.99) contrast(0.98) sepia(0.08);
}
/* Top scrim only. a subtle darkening so the app-bar icons read
   cleanly over the photo. The long paper-toned bottom fade that
   used to sit here was too heavy. it visibly blurred the bottom
   third of the image into the page. The cover now ends at its
   natural edge against the title block. */
.event-cover-has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 18, 14, 0.22) 0%,
    rgba(20, 18, 14, 0) 20%);
  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: 26px 24px 0; }

/* Premium breathing. each section gets generous vertical room and a
   hairline divider at top (instead of just bigger margin). Reads like
   a magazine spread, not a stack of cards. */
.event-section {
  padding: 36px 0 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.event-section:first-of-type { padding-top: 0; border-top: none; }

/* 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: 20px; }

.event-section-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: none;
}
.event-section-count {
  background: transparent;
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.event-section-count::before { content: "· "; opacity: 0.5; }

/* 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;
}
/* Cities rail on the events index. Compact horizontal scroll of
   every city with activity, between Upcoming and Recent. Each
   tile is a quiet white pill carrying name + quick stats. */
.city-rail {
  margin: 18px 0 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.city-rail-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow eyebrow"
    "title cta";
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 12px;
}
.city-rail-eyebrow {
  grid-area: eyebrow;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
.city-rail-title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.city-rail-all {
  grid-area: cta;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  white-space: nowrap;
}
.city-rail-all:hover { text-decoration: underline; }
.city-rail-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 24px;
  margin: 0 -24px;
}
.city-rail-strip::-webkit-scrollbar { display: none; }
.city-tile {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.08s ease;
}
.city-tile:hover  { border-color: var(--ink-mute); }
.city-tile:active { transform: scale(0.99); }
.city-tile-name {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.city-tile-stats {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* Cities index. tile per city with quick stats. */
.cities-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
}
.cities-tile {
  position: relative;
  display: block;
  padding: 14px 36px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.08s ease;
}
.cities-tile:hover  { border-color: var(--ink-mute); }
.cities-tile:active { transform: scale(0.99); }
.cities-tile-name {
  margin: 0 0 2px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cities-tile-stats {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.cities-tile-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--ink-fade);
}

/* =====================================================================
   PARTNER BRANDS. rotating logo grid at the bottom of an event page
   and the events index. Tinted block separates it from the editorial
   content above; each logo tile is a quiet white card so the brands
   carry their own visual weight.
   ===================================================================== */
.partner-brands {
  margin: 28px 0 0;
  padding: 22px 18px 20px;
  background: var(--paper-2);
  border-radius: 16px;
}

/* Avatar initial-letter fallback. Serif italic letter in amber
   on a warm amber wash. Reads as an intentional brand-aligned
   placeholder, not a missing-data circle. */
.avatar-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
  text-transform: lowercase;
  background: rgba(198, 74, 26, 0.07);
}

/* === Hub: featured "your city" row ===
   Single block. name → stats → face strip → next event line.
   All in the same text column so the relationship between
   "41 founders" and "the faces shown" is visually obvious. */
.hub-home-city {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.hub-home-city:hover { border-color: var(--border); }
.hub-home-city-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}
.hub-home-city-stats {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.hub-home-city-faces {
  display: flex;
  align-items: center;
  margin-top: 2px;
}
.hub-home-city-face,
.hub-home-city-face-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
  margin-left: -8px;
  background: var(--bg);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hub-home-city-face:first-child,
.hub-home-city-face-image:first-child { margin-left: 0; }
.hub-home-city-who {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-mute);
}
.hub-home-city-next,
.hub-home-city-last {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-mute);
}
.hub-home-city-last { color: var(--ink-fade); }

/* Latest-in-the-network: day-bucket subhead between groups
   ("Today" / "Yesterday" / "This week" / "Earlier"). Mono in
   ink-soft so it reads cleanly as a section-break instead of
   disappearing into the noise. */
.hub-latest-bucket {
  margin: 16px 0 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-soft);
}
.hub-latest-bucket:first-of-type { margin-top: 6px; }

/* Empty-meta backfill on a Latest row. quiet italic placeholder
   keeps the row's two-line shape so the column rhythm doesn't
   break on under-filled profiles. */
.hub-latest-meta-quiet {
  font-style: italic;
  color: var(--ink-fade);
}
.partner-brands-head {
  margin: 0 0 16px;
}
.partner-brands-title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.partner-brands-sub {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.partner-brands-link {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.partner-brands-link:hover { color: var(--ink); }
.partner-brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.partner-brands-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 3;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Clickable variant. small lift on hover so the affordance reads,
   plus a soft shadow so it doesn't feel flat against the tint. */
.partner-brands-tile-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: var(--ink-mute);
}
/* Brand name is the always-on label. When a logo loads, it covers
   the name with object-fit + paper background. When the img 404s,
   the onerror handler removes the <img> entirely and the name stays
   visible. */
.partner-brands-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
  line-height: 1.25;
  padding: 0 4px;
}
.partner-brands-logo {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
  background: var(--paper);
  display: block;
}

/* Event index list */

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

/* Inner wrapper around the existing date+text+chevron row. Always
   flex-row so the layout works whether or not the card also has
   a snapshot strip below. past events without photos were
   falling back to a default block layout here, which dropped the
   chevron underneath the text. */
.event-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

/* Past-event card WITH a snapshot strip: flip to column layout so
   the row sits above a full-width photo strip. both inside the
   same card border, reading as one block. Padding moves off the
   card and onto the inner row so the strip can bleed to the
   card's rounded edges. */
.event-card.event-card-has-snaps {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.event-card.event-card-has-snaps .event-card-row {
  padding: 18px 18px 16px;
}

/* Horizontal photo strip. lives inside the card. Photos sit at
   the card's inner gutter (no edge bleed) so they read as part of
   the card, with a soft separator above to detach them from the
   text content. Scrollbar hidden; momentum scroll is the
   affordance. */
.event-card-snaps {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border-soft);
}
.event-card-snaps::-webkit-scrollbar { display: none; }
.event-card-snap {
  height: 100px;
  width: auto;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--paper-2);
  object-fit: cover;
  display: block;
  transition: transform 0.12s ease;
}
.event-card-snap:hover { transform: translateY(-1px); }

.event-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 22px 20px;
  background:
    radial-gradient(circle at 12% -8%, rgba(198, 74, 26, 0.10) 0%, transparent 42%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(255, 255, 255, 0.40) 22%,
      rgba(255, 255, 255, 0) 58%
    ),
    var(--paper-2);
  border: 1px solid rgba(230, 212, 194, 0.7);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(26, 24, 20, 0.06),
    0 4px 12px rgba(26, 24, 20, 0.05),
    0 18px 44px rgba(26, 24, 20, 0.08),
    0 36px 72px rgba(198, 74, 26, 0.05);
  text-decoration: none;
  color: var(--ink);
  transition:
    transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(26, 24, 20, 0.06),
    0 8px 20px rgba(26, 24, 20, 0.07),
    0 28px 60px rgba(26, 24, 20, 0.12),
    0 48px 96px rgba(198, 74, 26, 0.07);
}
.event-card:active { transform: scale(0.99); }

.event-card-when {
  width: 56px;
  text-align: center;
  flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)),
    var(--paper);
  border: 1px solid rgba(230, 212, 194, 0.6);
  border-radius: 14px;
  padding: 10px 0 12px;
  line-height: 1.1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(26, 24, 20, 0.04);
}
.event-card-day {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--amber);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.event-card-date {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.event-card-month {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-top: 4px;
  text-transform: uppercase;
}

.event-card-text { flex: 1; min-width: 0; }
.event-card-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
}
.event-card-meta {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.45;
  margin-top: 4px;
}
/* "Private" pill next to invite-only event titles in the listing  
   replaces the venue (which is now hidden until unlock) so the row
   still carries a signal about access. */
.event-card-private {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px 2px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  vertical-align: 2px;
}

/* === Post-signin hub at / ===
   A personal hub: hero fact about you, one primary "do this next"
   CTA, since-last-visit deltas, then Me / Events / Cities / Latest.
   Section spacing matches the other rail patterns. */
.hub-section { margin-top: 8px; }
.hub-section + .hub-section { margin-top: 4px; }

/* Hero: small "hey, name" eyebrow above a load-bearing fact line
   in serif. The fact is the protagonist; the eyebrow is just an
   anchor that says "yes, we know it's you." */
.hub-hero-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink-fade);
}
.hub-hero {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* Primary CTA: ONE action card under the hero. Sits at the top
   of the page so it owns "next best action" before the sections
   begin. Warmer surface than regular cards so it reads as the
   recommendation, not just another row. */
.hub-primary-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 0 28px;
  background: rgba(198, 74, 26, 0.04);
  border: 1px solid rgba(198, 74, 26, 0.18);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hub-primary-cta:hover {
  border-color: rgba(198, 74, 26, 0.4);
  background: rgba(198, 74, 26, 0.06);
}
.hub-primary-cta-icon { display: none; }
.hub-primary-cta-avatar,
.hub-primary-cta-avatar-image {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.hub-primary-cta-text { flex: 1; min-width: 0; }
.hub-primary-cta-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--amber);
}
.hub-primary-cta-title {
  display: block;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}
.hub-primary-cta-arrow { display: none; }

/* Since-you-last-visited strip: small stacked rows of network
   deltas since the founder's prior visit. Renders only when there
   are positive deltas; first visit shows nothing. */
.hub-since-strip {
  margin: 0 0 24px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 12px;
}
.hub-since-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-fade);
  margin-bottom: 8px;
}
.hub-since-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}
.hub-since-icon { font-size: 15px; flex-shrink: 0; }
.hub-since-text { flex: 1; min-width: 0; }
.hub-since-row + .hub-since-row {
  border-top: 1px solid var(--border-soft);
}

/* Compact discovery-city pills. one row per city, name + small
   stat. Used for "Also in the network" below the home city block,
   so the rail reads as a list of places we are in, not a comparison
   to home. */
.hub-city-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Pills sit below the home-city tile inside the same "Cities" section
   on /events. Breathing room so the rich tile and the chip row read
   as two beats, not one continuous block. */
.hub-home-city + .hub-city-pills { margin-top: 12px; }

/* === /events directory: flat inline city list under the intro === */
.events-city-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 32px;
  color: var(--ink);
}
.events-city-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.events-city-link:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}
.events-city-sep {
  color: var(--ink-mute);
  opacity: 0.5;
}
.hub-city-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hub-city-pill:hover {
  border-color: var(--border);
  background: var(--border-soft);
}
.hub-city-pill-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hub-city-pill-stat {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-fade);
}

/* ============ LANDING PAGE (anonymous /) ============
   Hero + regional city directory + section divider. Built to
   create clear visual separation between the three landing
   surfaces (hero / cities / global activity tabs) so a first
   time visitor isn't confused about what's what. */
.landing-hero {
  padding: 18px 4px 8px;
  margin: 0 0 4px;
}
.landing-hero-headline {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.32;
  color: var(--ink);
}

.landing-section {
  margin: 0 0 18px;
}
.landing-cities { padding: 4px 0 0; }
.landing-city-region { margin: 0 0 14px; }
.landing-city-region:last-child { margin-bottom: 0; }
.landing-city-region-label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
.landing-city-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* City pill, premium variant. Same layered surface as the
   event / founder cards. paper-2 base with a top-down white
   gloss and a quiet amber spotlight in the upper-left, sitting
   on a 3-layer shadow stack with an inset white top edge.
   Hover lifts 2px and deepens the shadow with a warm amber
   bloom. Reads as a tappable "card" miniaturized into pill
   form, consistent with the rest of the surface. */
.landing-city-pill {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 14px;
  background:
    radial-gradient(circle at 14% -30%, rgba(198, 74, 26, 0.09) 0%, transparent 55%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.30) 50%,
      rgba(255, 255, 255, 0) 100%
    ),
    var(--paper-2);
  border: 1px solid rgba(230, 212, 194, 0.7);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(26, 24, 20, 0.05),
    0 4px 12px rgba(26, 24, 20, 0.06),
    0 10px 22px rgba(198, 74, 26, 0.04);
  transition:
    transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.landing-city-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(26, 24, 20, 0.06),
    0 8px 20px rgba(26, 24, 20, 0.08),
    0 18px 36px rgba(198, 74, 26, 0.07);
}
.landing-city-pill:active { transform: translateY(0) scale(0.99); }

/* Quieter treatment for cities without activity yet. Same
   pill shape so they're still tappable, but skip the radial
   amber spotlight + drop a layer of the shadow stack so they
   recede behind the active markets. */
.landing-city-pill-quiet {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 80%),
    var(--paper-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(26, 24, 20, 0.03);
  opacity: 0.85;
}
.landing-city-pill-quiet:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(26, 24, 20, 0.04),
    0 6px 14px rgba(26, 24, 20, 0.05);
}

.landing-city-pill-flag {
  font-size: 14px;
  line-height: 1;
}
.landing-city-pill-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
}
.landing-city-pill-stat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-fade);
}

.landing-divider {
  margin: 22px 0;
  height: 1px;
  border: 0;
  background: var(--border-soft);
}

/* Cities: auto-fit grid of tile-cards. With many tiles it wraps;
   with two tiles it fills the row evenly (no dead right column).
   On narrow screens it collapses to a horizontal scroll so the
   tiles stay full-width tappable. */
.hub-city-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
@media (max-width: 560px) {
  .hub-city-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 2px 20px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .hub-city-strip::-webkit-scrollbar { display: none; }
  .hub-city-tile { flex: 0 0 220px; scroll-snap-align: start; }
}
.hub-city-tile {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.hub-city-tile:hover { border-color: var(--border); }
.hub-city-tile-sparse {
  background: var(--bg);
  border-color: rgba(0, 0, 0, 0.04);
}
.hub-city-cta {
  color: var(--amber);
  font-weight: 600;
}
.hub-city-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
}
.hub-city-stats {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.hub-city-faces {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 2px;
}
.hub-city-face,
.hub-city-face-image {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
  margin-left: -8px;
  background: var(--bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hub-city-face:first-child,
.hub-city-face-image:first-child { margin-left: 0; }
.hub-city-who {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.hub-city-next {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-city-next-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
  margin-right: 6px;
}

/* Event-card additions: tagline below title, host line, the
   viewer's RSVP badge inline with the title. */
.hub-event-tagline {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-mute);
}
.hub-event-host {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.hub-event-host strong { color: var(--ink); font-weight: 600; }
/* RSVP status: small italic-serif pill with a quiet amber wash.
   Still reads as a voice note ("you're going") rather than a
   loud tag chip, but the soft tint gives it just enough chrome
   to stop looking like floating italics next to the title. */
.hub-rsvp-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px 3px;
  border-radius: 999px;
  background: rgba(198, 74, 26, 0.10);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  color: var(--amber);
  vertical-align: 1px;
  white-space: nowrap;
}
.hub-rsvp-badge-soft {
  background: rgba(135, 128, 111, 0.10);
  color: var(--ink-mute);
}

/* Event card "mine" treatment. Same single-radial pattern as the
   base card so the design language stays consistent; just a
   warmer spotlight so the RSVPed card reads as "yours" without
   feeling like a different surface. */
.event-card-mine {
  background:
    radial-gradient(circle at 12% -8%, rgba(198, 74, 26, 0.18) 0%, transparent 48%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.32) 24%,
      rgba(255, 255, 255, 0) 62%
    ),
    var(--paper-2);
  border-color: rgba(198, 74, 26, 0.24);
}
.event-card-mine-flag { display: none; }

/* RSVP momentum line on event cards. Quieter ink-soft so it
   doesn't compete with the inline "you're going" italic above.
   Two amber accents on one card flattens the hierarchy. */
.hub-event-momentum {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* Empty-state copy block used when a section has nothing to render
   but we still want the section to feel intentional, not broken. */
.hub-empty {
  margin: 0;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 12px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.hub-empty-link {
  margin-left: 4px;
  color: var(--amber);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.hub-empty-link:hover { text-decoration: underline; }

/* My eChai preview row: avatar + name/meta/hoping + chevron, all
   wrapped in a link to the founder's profile. Stays visually quiet
   so it reads as a "your profile" peek, not a full card. */
.hub-me-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hub-me-preview:hover {
  border-color: var(--border);
  background: var(--paper-hover, var(--paper));
}
.hub-me-avatar,
.hub-me-avatar-image {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.hub-me-text { flex: 1; min-width: 0; }
.hub-me-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hub-me-meta {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.hub-me-hoping {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-fade);
}

/* My eChai activity pulse: quiet italic-serif margin notes
   below the profile preview. No boxes. each line is one fact
   ("your next eChai is X on Friday.") that reads like editorial
   commentary, not a status banner. */
.hub-me-pulse {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hub-me-pulse-line {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.15s ease;
}
.hub-me-pulse-line:hover { color: var(--ink); }
.hub-me-pulse-line strong {
  color: var(--ink);
  font-weight: 500;
}

/* Latest in the network: compact row list of recent founder joins. */
.hub-latest-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hub-latest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
}
.hub-latest-row:last-child { border-bottom: none; }
.hub-latest-avatar,
.hub-latest-avatar-image {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.hub-latest-text { flex: 1; min-width: 0; }
.hub-latest-name {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hub-latest-meta {
  margin-top: 1px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.hub-latest-when {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-fade);
  white-space: nowrap;
}

/* === Gallery (the visual archive) ===
   Editorial layout: an auto-scrolling marquee at the top sets the
   vibe in motion, then each event gets its own magazine-style
   section. one hero photo + a horizontal scroll strip of the
   rest. The caption appears once per event, not 15 times in a
   flat grid. */

/* Scope pills (Everything / Your gallery / All cities). */
.gallery-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.gallery-scope {
  padding: 6px 12px;
  background: var(--bg);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.gallery-scope:hover {
  background: var(--border-soft);
  color: var(--ink);
}
.gallery-scope-admin {
  background: rgba(198, 74, 26, 0.08);
  color: var(--amber);
}
.gallery-scope-admin:hover {
  background: rgba(198, 74, 26, 0.14);
  color: var(--amber);
}

/* Marquee strip. Now JS-driven so it auto-scrolls AND the user
   can drag / swipe / wheel through it freely. The track's items
   are doubled so when scrollLeft hits the midpoint we wrap back
   to 0 silently. Auto-scroll pauses on user interaction and
   resumes a couple seconds after they stop. */
.gallery-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -24px 36px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-marquee::-webkit-scrollbar { display: none; }
.gallery-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 4px 24px;
}
.gallery-marquee-image {
  height: 360px;
  width: auto;
  flex-shrink: 0;
  display: block;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 560px) {
  .gallery-marquee-image { height: 260px; }
}

/* Per-event sections. */
.gallery-events {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-bottom: 40px;
}
.gallery-event {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gallery-event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}
.gallery-event-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.gallery-event-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.gallery-event-meta {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.gallery-event-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.gallery-event-cta {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.gallery-event-cta:hover { text-decoration: underline; }
.gallery-event-share { color: var(--ink-soft); }
.gallery-event-share:hover { color: var(--amber); }

/* Face strip. avatar pile of who went, between the section header
   and the hero photo. Each face links to that founder's profile. */
.gallery-event-faces {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.gallery-event-face,
.gallery-event-face-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  margin-left: -8px;
  background: var(--bg);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.gallery-event-face:first-child,
.gallery-event-face-more:first-child { margin-left: 0; }
.gallery-event-face:hover { transform: translateY(-2px); }
.gallery-event-face-image,
.gallery-event-face-image-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.gallery-event-face-more {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* Quote block removed. photos are the protagonist on /gallery. */

/* Wrapped grid of every event photo. Same shape as the curate
   page so the host's curation view and the public view stay
   visually consistent. aspect-ratio: 1 / 1 keeps the grid even
   when portrait + landscape images mix in one event. */
.gallery-event-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.gallery-event-strip-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  text-decoration: none;
}
.gallery-event-strip-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--bg);
  transition: filter 0.2s ease;
}
.gallery-event-strip-tile:hover .gallery-event-strip-image {
  filter: brightness(1.04);
}

/* === Focal-point picker ===
   Lets a user pick what stays visible when the image is rendered
   with object-fit: cover at a different aspect ratio. Click/drag
   anywhere on the preview to move the focal point; the crosshair
   marks the current pick. The preview itself uses the same
   object-fit: cover + object-position so what the user sees is
   what they'll get in the rendered hero/avatar. */
.focal-block {
  margin-top: 14px;
  width: 100%;
  max-width: 360px;
}
.focal-help {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.focal-frame {
  position: relative;
  width: 100%;
  padding-bottom: 33.333%; /* 3:1, matches event cover hero */
  background: var(--bg);
  border-radius: 10px;
  overflow: hidden;
  /* Default: preview mode. cursor stays default, touch-action keeps
     the browser's native scroll so a tap on the frame on mobile
     never hijacks page scroll. The .is-adjusting class flips both
     when the user explicitly enters edit mode. */
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  transition: box-shadow 0.15s ease, outline-color 0.15s ease;
  outline: 2px solid transparent;
}
.focal-frame.is-adjusting {
  cursor: crosshair;
  touch-action: none;
  outline-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 191, 0, 0.18);
}
.focal-frame-square {
  padding-bottom: 100%; /* 1:1, for avatar */
  border-radius: 50%;
}
.focal-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.focal-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.05s linear, top 0.05s linear, opacity 0.15s ease;
  opacity: 0;
}
.focal-frame.is-adjusting .focal-marker { opacity: 1; }
.focal-marker::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  background: var(--amber);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Focal controls row: Adjust toggle + zoom cluster, side by side
   under the preview. Adjust enters/exits drag-edit mode on mobile
   so a casual tap doesn't move the focal point. Zoom is always
   live because button-tapping can't be confused with scroll. */
.focal-controls {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.focal-adjust-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.focal-adjust-btn:hover {
  background: var(--border-soft);
  border-color: var(--ink-fade);
}
.focal-frame.is-adjusting ~ .focal-controls .focal-adjust-btn {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--paper);
}

/* Zoom controls. small - / + buttons + a live % label below the
   focal preview. Both buttons step by 25% from 100% (1.0x) up to
   400% (4.0x). Lets a portrait photo in a square avatar circle
   pan horizontally too. zoom > 1.0 creates overflow on every axis. */
.focal-zoom {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  background: var(--bg);
  border-radius: 999px;
  user-select: none;
}
.focal-zoom-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.focal-zoom-btn:hover {
  background: var(--border-soft);
  border-color: var(--ink-fade);
}
.focal-zoom-btn:active { transform: scale(0.95); }
.focal-zoom-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  min-width: 38px;
  text-align: center;
}

/* === Gallery curate page (admin) ===
   Single screen with every event-with-photos. Each event is a
   strip of thumbnails; tapping a thumb toggles its cover-flag
   and autosaves via fetch (no page navigation). */
.curate-events {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-bottom: 40px;
}
.curate-event {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-soft);
}
.curate-event:last-child { border-bottom: none; }
.curate-event-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.curate-event-head-text { flex: 1 1 auto; min-width: 0; }
.curate-event-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.curate-event-meta {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.curate-event-cover-count { color: var(--amber); font-weight: 600; }
.curate-event-cta {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  white-space: nowrap;
}
.curate-event-cta:hover { text-decoration: underline; }
.curate-event-form { margin: 0; }
.curate-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.curate-photo {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.curate-photo input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.curate-photo-image {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: var(--bg);
  transition: filter 0.15s ease;
}
.curate-photo:hover .curate-photo-image { filter: brightness(1.04); }
.curate-photo-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  font-family: var(--font-sans);
  font-size: 14px;
  opacity: 0.5;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.curate-photo:hover .curate-photo-badge { opacity: 0.85; }
.curate-photo-is-cover,
.curate-photo:has(input:checked) {
  box-shadow: 0 0 0 3px var(--amber);
}
.curate-photo-is-cover .curate-photo-badge,
.curate-photo:has(input:checked) .curate-photo-badge {
  opacity: 1;
  background: var(--amber);
  transform: scale(1.05);
}

.curate-event-status {
  margin: 6px 0 0;
  min-height: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-fade);
  transition: opacity 0.2s ease;
}
.curate-event-status[data-state="saving"] { color: var(--ink-soft); }
.curate-event-status[data-state="saved"]  { color: var(--amber); }
.curate-event-status[data-state="error"]  { color: #c43; }

/* === Events index discovery rail ===
   "Founders you might know" list under the events list. same
   row style as the feed directory so the visual language stays
   consistent. */
.events-network {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.events-network-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.events-network-link {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-fade);
  text-decoration: none;
}
.events-network-link:hover { color: var(--amber); }
.events-network-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.events-network-row {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}
.events-network-row:hover .feed-attendee-name { color: var(--amber); }
.events-network-text { flex: 1; min-width: 0; }

/* "More on eChai" footer card. quiet anchor reminding visitors
   this app is one slice of the wider eChai network. */
.events-more {
  margin-top: 28px;
  padding: 14px 16px;
  background: var(--paper-2);
  border-radius: 12px;
}
.events-more-eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-fade);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.events-more-body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.events-more-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.25);
  text-underline-offset: 3px;
}
.events-more-link:hover { text-decoration-color: var(--ink); }

/* Attendee context strip under the event card meta  
   "Jatin, Harsha + 3 going" with up to 3 overlapping face avatars.
   For invite-only events on the listing, only a count is shown
   (no names/faces from a locked card). */
.event-card-attendees {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.event-card-faces {
  display: inline-flex;
  flex-shrink: 0;
}
.event-card-face {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
  border: 1.5px solid var(--paper);
  margin-left: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mute);
}
.event-card-face:first-child { margin-left: 0; }
.event-card-attendees-text {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-card-attendees-text strong { color: var(--ink); font-weight: 600; }
.event-card-attendees-going { margin-left: 2px; color: var(--ink-mute); }

.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,
.founder-card-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,
.founder-card-role,
.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 */
.founder-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: 150px;
  height: 38px;
  padding: 0 14px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.chip-add-input::placeholder { color: var(--ink-mute); }
.chip-add-input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(26, 24, 20, 0.06);
}

/* Write-first row. Lives at the top of the chip group so a visitor
   whose situation isn't represented in the predefined options sees
   "you can type what fits" immediately, not after scrolling past
   30 chips that don't apply. */
.chip-write-row {
  margin: 0 0 6px;
  align-items: center;
}
.chip-write-input {
  flex: 1 1 auto;
  min-width: 220px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 100px;
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.chip-write-input::placeholder { color: var(--ink-mute); }
.chip-write-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(26, 24, 20, 0.08);
}

/* Quiet eyebrow line between the write-first row and the
   suggestion chips below it. Mono caps, light color, so it reads
   as orientation and the chips below don't compete with the input
   for primary attention. */
.chip-suggestions-lead {
  margin: 12px 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* 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,
.onboarding-preview-avatar {
  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,
.onboarding-preview-avatar:hover { border-color: rgba(0, 0, 0, 0.4); }
.onboarding-avatar-slot.has-image,
.onboarding-preview-avatar.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);
}

/* === Live preview card on onboarding ===
   Avatar circle + name/bio/city to its right. The default (non-sticky)
   appearance. `.onboarding-preview-sticky` overrides background and
   shadow. */
.onboarding-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin: 14px 0 6px;
  background: var(--paper-2);
  border-radius: 16px;
  transition: transform 0.2s ease;
}
.onboarding-preview-avatar {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
}
.onboarding-preview-text {
  min-width: 0;
  flex: 1 1 auto;
}
.onboarding-preview-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}
/* "Role · Company" line on the preview card. mirrors the role line
   on the event-page person row. */
.onboarding-preview-role {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.onboarding-preview-city {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
}
/* Placeholder state: weight + color, never italic. */
.onboarding-preview-name.is-placeholder,
.onboarding-preview-role.is-placeholder {
  color: var(--ink-fade);
  font-weight: 400;
}
.onboarding-preview-hint {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  text-align: left;
}

/* Preview card sticks to the top of the scroll container as the form
   gets long. The card has its own warm gradient + amber-tinted rule
   so it doesn't blend into the screen background; a soft drop shadow
   gives it depth where it sits over scrolling content underneath. */
.onboarding-preview-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, #faf6ec 0%, var(--paper-2) 100%);
  border: 1px solid var(--amber-soft);
  box-shadow: 0 6px 18px rgba(198, 74, 26, 0.06), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  /* Lean into the rounded card feel. more "name tag", less "block." */
  border-radius: 18px;
  padding: 16px 18px;
  margin: 12px 0 6px;
}

/* Section heading reads as a thoughtful divider, not a form-builder
   eyebrow. A small amber dot anchors it; the rule below is softer. */
.onboarding-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 32px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.onboarding-section-heading::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}
.onboarding-section-heading:first-of-type { margin-top: 20px; }

/* "(optional)" suffix on labels and section headings. weight + color,
   never italic (design system rule). */
.label-optional {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

/* "So we know what to call you". quiet helper below an input. Uses
   weight + color for the soft feel (no italic per the design system). */
.field-why {
  margin: 8px 2px 18px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-mute);
  line-height: 1.5;
}
.field-why-inline {
  margin: 0;
  font-size: 12px;
}

/* Silhouette inside the empty avatar circle. Warm amber tones so the
   slot reads as inviting/personal, not as a generic upload widget. */
.onboarding-avatar-silhouette {
  position: absolute;
  inset: 0;
  width: 64%;
  height: 64%;
  margin: 22% auto 0;
  pointer-events: none;
  stroke: var(--amber);
  stroke-opacity: 0.55;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onboarding-preview-avatar.has-image .onboarding-avatar-silhouette,
.onboarding-avatar-slot.has-image .onboarding-avatar-silhouette { display: none; }
/* "+" action badge in the bottom-right of the avatar. Ink-on-paper
   button. the host eyebrow + the RSVP check are the page's only
   amber moments, this affordance stays quiet. */
.onboarding-avatar-plus {
  position: absolute;
  z-index: 1;
  bottom: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  font-family: var(--font-sans);
  font-weight: 400;
  box-shadow: 0 2px 6px rgba(26, 24, 20, 0.2), 0 0 0 2px var(--paper);
}
.onboarding-preview-avatar.has-image .onboarding-avatar-plus,
.onboarding-avatar-slot.has-image .onboarding-avatar-plus { display: none; }


/* Tag-counter row: "0 of 3 selected" pill on the left, soft helper on the right. */
.tag-counter-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tag-counter {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper-2);
  white-space: nowrap;
}
.tag-counter-full { color: var(--ink); background: var(--paper-3, #e9e3d6); }
@keyframes tag-counter-buzz {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-3px); }
  40%  { transform: translateX(3px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
.tag-counter-buzz { animation: tag-counter-buzz 0.35s ease; }

/* Custom-tag row sits right under the predefined chips, with a slim
   visual separation so it doesn't look like another group. */
.chips-wrap-custom { margin-top: 10px; }

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

/* Multi-line bio field on Step 1. reads as editorial prose, not a
   form input. Bigger serif on mobile so the typing experience feels
   like sketching a name-tag line. */
.onboarding-textarea {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  min-height: 72px;
  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;
}

/* 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;
}

/* ============================================================
   Intent capture. post-RSVP layers (What brings you, Context
   badge, Founder ask). Visual language reuses existing tokens
   (paper, ink, amber, font-serif, font-mono) so nothing here
   shifts the site's theme. just adds new components inside it.
   ============================================================ */

/* The intent panel is wrapped in a single <details> so it collapses
   to a one-line summary once the founder has shared anything,
   keeping the rest of the event page uncluttered. The wrapper
   carries the card-style background/border/radius; the inner form
   carries only padding so its content sits inside the rounded
   container. Single <details> (not nested). the iOS-Safari blank-
   half bug that plagued the previous nested version doesn't apply. */
.intent-panel-wrap {
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  /* No overflow clip. children sit inside their own padding. */
}

/* Head row inside the open panel. Just holds the sub line that
   frames the form below. Summary above carries the section title. */
.intent-panel-head {
  padding: 4px 18px 0;
}

/* Always-visible summary row. Three columns: a small mono eyebrow
   on the left, a state phrase in the middle ("✓ Shared. tap to
   edit" / "Tap to share. optional"), and a caret on the right
   that rotates 90° when the panel opens. */
.intent-panel-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}
.intent-panel-summary::-webkit-details-marker { display: none; }
.intent-panel-summary::marker { content: ""; }
.intent-panel-summary:hover { background: rgba(0, 0, 0, 0.02); }

.intent-panel-summary-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
  flex-shrink: 0;
}
/* "Shared" check pill. small amber circle that sits between the
   eyebrow and the preview text on a collapsed shared summary. */
.intent-panel-summary-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(198, 74, 26, 0.12);
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
/* Preview of the founder's saved intent (truncated context_badge
   or first founder_asks). Takes the remaining row width, ellipsis
   on overflow. The whole summary remains one tap to expand. */
.intent-panel-summary-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
}
.intent-panel-summary-caret {
  color: var(--ink-fade);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
}
.intent-panel-wrap[open] .intent-panel-summary-caret {
  transform: rotate(90deg);
}

/* When open, draw a soft divider between summary and the form so
   the two read as related but distinct zones. */
.intent-panel-wrap[open] .intent-panel-summary {
  border-bottom: 1px solid var(--border-soft);
}

/* The form itself. no border/background here (those live on the
   wrapper); just padding + section spacing. */
.intent-panel {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.intent-panel-sub {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* A section is just a label + the input it labels. No box,
   no border. whitespace is the separator between sections. */
.intent-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intent-section-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.intent-section-meta {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

/* Voice section gets a touch more room because the textarea is
   the panel's centerpiece. */
.intent-section-voice {
  gap: 10px;
}

/* Starter snippets. italic, quiet, always visible. Tap one to
   fill the textarea, then edit freely. No bullets, no plus
   signs. they're read as a list of phrases, not a checklist. */
.intent-starters {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intent-starter {
  width: 100%;
  padding: 4px 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  cursor: pointer;
  transition: color 0.15s ease;
}
.intent-starter:hover { color: var(--amber); }

/* Save button + hint row at the bottom of the intent panel.
   The button itself is the autosave-form's status target. flips
   through "Save" → "Saving…" → "Saved ✓" → "Save" via CSS state
   classes the controller toggles. The hint underneath tells the
   user they don't HAVE to tap it. autosave already handles things.
   It's a relief affordance, not a required step. */
.intent-panel-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}
.intent-panel-save {
  align-self: stretch;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.intent-panel-save:hover { opacity: 0.92; }
/* Saving. quiet amber wash so the user sees the work starting. */
.intent-panel-save.is-saving {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: var(--amber-soft);
  cursor: progress;
}
/* Saved. green check on a soft outline. Reverts after ~2.4s via
   the controller's reset timer. */
.intent-panel-save.is-saved {
  background: #e9f5ed;
  color: #2f7d4a;
  border-color: #c7e3d1;
}
.intent-panel-save.is-error {
  background: var(--paper);
  color: #b34a4a;
  border-color: #e5b8b8;
}
.intent-panel-actions-hint {
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* Layer 1. full-row checkbox rows (matches the PDF wireframe).
   Tappable area is the whole row. Hidden checkbox; visual check
   sits left, label fills the rest. */
.intent-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intent-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.intent-reason:hover { border-color: rgba(0, 0, 0, 0.2); }
.intent-reason input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.intent-reason-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.intent-reason:has(input:checked) {
  background: rgba(198, 74, 26, 0.06);
  border-color: var(--amber);
}
.intent-reason:has(input:checked) .intent-reason-check {
  background: var(--amber);
  border-color: var(--amber);
  position: relative;
}
.intent-reason:has(input:checked) .intent-reason-check::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
}
.intent-reason-label {
  flex: 1;
}

/* Layer 2. free-text textarea + hint pills. */
.intent-textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
  resize: vertical;
  min-height: 56px;
}
.intent-textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(198, 74, 26, 0.12);
}

.intent-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.intent-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(198, 74, 26, 0.12);
}

.rsvp-prepicker-tagline {
  margin: 8px 4px 0;
  text-align: center;
  line-height: 1.5;
}

/* ============================================================
   Person card. Context Badge (Layer 2) + Founder Ask (Layer 3).
   The "Came for X" reason chip already exists; these two slot
   above and below it respectively.
   ============================================================ */

.event-person-tile-badge {
  margin: 8px 0 0;
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
  letter-spacing: -0.003em;
  /* Up to 5 lines so the badge isn't cut mid-thought on narrow
     mobile tiles. Tiles in the grid auto-size to content (the
     parent .event-people is a grid with auto rows), so a longer
     badge just makes that one tile taller. neighbours are
     unaffected. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Body. the rich content rows below the header (Building / About
   / Find me / Hoping to meet / Pinned). Indented to align under
   the text column (avatar 48 + gap 12 = 60). Sits OUTSIDE the
   header link so socials + pinned can be their own tap targets
   without nested <a>s. */
/* Body rows flow full-width below the header. no left indent. The
   avatar is only 72px tall, so indenting body content under it
   leaves a long empty column on the left when the founder has
   lots of lines (about + socials + hoping + pinned). Full-width
   instead so the content uses the whole tile. */
.event-person-tile-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding-left: 0;
}
.event-person-tile-body .event-person-tile-line:first-child { margin-top: 0; }

/* Event-specific intent body. same indent + visual treatment but
   separated by a hairline rule so the reader can tell durable
   profile content from "what they shared for THIS event". */
.event-person-tile-body-event {
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}

/* Socials row. small glyph icons inline with the eyebrow. */
.event-person-tile-line-socials {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.event-person-tile-socials {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.event-person-tile-social {
  display: inline-flex;
  align-items: center;
  color: var(--ink-fade);
  text-decoration: none;
  transition: color 0.15s ease;
}
.event-person-tile-social:hover { color: var(--ink); }
.event-person-tile-social .ui-icon svg { width: 13px; height: 13px; }

/* Pinned link inline with its eyebrow. underline-on-hover, no pill. */
.event-person-tile-pinned-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border-soft);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
.event-person-tile-pinned-link:hover { text-decoration-color: var(--ink); }
.event-person-tile-pinned-link span { color: var(--ink-fade); margin-left: 4px; }

/* Ask block sits at the bottom of the tile. same indent + spacing
   pattern as the body sections above. Dashed top-rule separates it
   from the profile section, but when an event-intent block already
   sits directly above it (with its own rule), we drop the asks
   rule so we don't double-stripe. */
.event-person-tile-asks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding-left: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}
.event-person-tile-body-event + .event-person-tile-asks {
  border-top: none;
  padding-top: 6px;
}
.event-person-tile-asks .event-person-tile-line { margin-top: 0; }
.event-person-tile-ask {
  margin-top: 8px;
  padding: 4px 9px 5px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  max-width: 100%;
  background: var(--paper);
  border: 1px solid var(--amber);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--amber);
}
.event-person-tile-ask-key {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.event-person-tile-ask-value {
  font-weight: 500;
  /* Let the ask wrap to multiple lines so labels like "Service-
     provider recommendations" or "Founder-to-founder support" read
     in full instead of being cut to "Service-provide…". The pill
     grows vertically; the tile follows. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  flex: 1 1 auto;
}
/* Link variant. same look as the static ask pill, but tappable so it
   filters /feed to other founders with the same standard ask. */
a.event-person-tile-ask-link {
  text-decoration: none;
  color: var(--amber);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
a.event-person-tile-ask-link:hover { background: var(--amber-soft); }

/* ============================================================
   Room rollups. "The room so far" (Layer 1 counts) and
   "Asks across the room" (Layer 3 actionable list).
   ============================================================ */

.event-room-read { padding-bottom: 4px; }
/* Compact eyebrow head. Replaces the H2 so this social-proof
   block reads as a footnote on the event card above, not a new
   page section. */
.event-room-read-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.event-room-read-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.event-room-read-head-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-fade);
  letter-spacing: 0.12em;
  text-transform: lowercase;
}
.event-room-read-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Each chip is a <details>/<summary> that expands inline to show
   the founders who picked that reason. Tap the chip, see the
   people. Tap again to collapse. */
.event-room-read-chip-wrap {
  display: inline-block;
}
.event-room-read-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.event-room-read-chip::-webkit-details-marker { display: none; }
.event-room-read-chip::marker { content: ""; }
.event-room-read-chip:hover { border-color: var(--amber); }
.event-room-read-chip-caret {
  margin-left: 2px;
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}
.event-room-read-chip-wrap[open] .event-room-read-chip {
  background: var(--amber-soft);
  border-color: var(--amber);
}
.event-room-read-chip-wrap[open] .event-room-read-chip-caret {
  transform: rotate(90deg);
  color: var(--amber);
}

/* Expanded list of founders inside a chip. vertical stack of
   face+name links right below the chip. Indented slightly so they
   visually nest under the parent. */
.event-room-read-chip-people {
  list-style: none;
  margin: 8px 0 4px 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-room-read-chip-person {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-sans);
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  transition: background 0.15s ease, border-color 0.15s ease;
  min-width: 0;
}
.event-room-read-chip-person:hover {
  background: var(--amber-soft);
  border-color: var(--amber);
}
.event-room-read-chip-face,
img.event-room-read-chip-face,
img.event-room-read-chip-face-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-2);
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
.event-room-read-chip-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.event-room-read-chip-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.event-room-read-chip-meta {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Chips row needs to allow wrap + give each chip room to expand
   below itself without colliding with the next chip. */
.event-room-read-chips {
  align-items: flex-start;
}
.event-room-read-chip-label { font-weight: 500; }
.event-room-read-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

/* What people are asking for. paired with the room-read above.
   Pills with leading count for common asks, quoted lines below
   for specific (custom) asks. */
.event-asks-head {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.event-asks-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.event-asks-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.3;
}
.event-asks-pill-label { font-weight: 500; }
/* Link variant. same look as the static rollup pill, but tappable
   so it filters /feed to founders asking for the same thing. */
a.event-asks-pill-link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
a.event-asks-pill-link:hover {
  border-color: var(--amber);
  background: var(--amber-soft);
}
.event-asks-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  height: 18px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
}
/* "What people are asking for". one uniform list. Each item is
   the ask text up top + "  face Name(s)" attribution below, no
   matter whether it's a common label or a custom write-in. Reads
   as "{the ask}. {the asker}", which is the natural-language
   parse a tablemate makes when scanning for someone to talk to. */
.event-asks-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.event-asks-item {
  padding-left: 12px;
  border-left: 2px solid var(--amber-soft);
}
.event-asks-item-text {
  display: inline-block;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-decoration: none;
}
/* Common asks render as a link to /feed?asking=X. underline-on-hover
   so the founder reading knows it's tappable, but doesn't compete
   visually with the askers row below it. */
a.event-asks-item-text-common {
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
a.event-asks-item-text-common:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}
.event-asks-item-quote { color: var(--ink-fade); }
.event-asks-item-askers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.event-asks-item-dash { color: var(--ink-fade); margin-right: 2px; }
.event-asks-item-asker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--ink);
  padding: 1px 2px;
  border-radius: 999px;
  transition: color 0.15s ease;
}
.event-asks-item-asker:hover { color: var(--amber); }
.event-asks-item-asker:hover .event-asks-item-name { text-decoration: underline; }
.event-asks-item-face,
img.event-asks-item-face,
img.event-asks-item-face-image {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-2);
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
}
.event-asks-item-name {
  font-weight: 500;
  letter-spacing: -0.005em;
}


/* =====================================================================
   CARD-SETUP SCREEN (founders#new. "Let us set up your card")
   ===================================================================== */

/* Card-setup screen container. overrides the default screen padding
   slightly tighter so the FOUNDER CARD preview reads as a hero block. */
.card-screen { padding: 4px 22px 8px; }

.card-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 14px 0 8px;
}
.card-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 8px;
}
.card-subtitle {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 18px;
}

/* "How the room meets you" + "Saved" indicator row above the card. */
.card-preview-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
}
.card-preview-eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
.card-saved {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}
.card-saved::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background 0.2s;
}
.card-saved.is-saving::before { background: var(--amber); }
.card-saved.is-saved::before  { background: #5fb37a; }

/* ===== FOUNDER CARD preview =====
   High-gloss premium card. Four layered effects:

   1. Warm amber spotlight in the upper-left (radial gradient)
      so the card has internal weather instead of one flat tone.
   2. Top-down luminance gradient for the "polished surface"
      gloss; reads like a soft inner light source.
   3. Five-layer drop shadow stack: close hairline + medium soft
      + deep wide spread + a faint amber-tinted shadow at the
      bottom so the surface feels lifted off the page with a
      hint of warm tone bouncing around it.
   4. Inset 1px white highlight along the top edge + a subtler
      1px inner ring, for that glassy hairline that catches
      light. Decorative amber dot in the top-left corner reads
      as a quiet identity mark.

   Hover: 4px lift, much deeper shadow, gradient brightens. */
.founder-card {
  position: relative;
  background:
    radial-gradient(circle at 12% -8%, rgba(198, 74, 26, 0.10) 0%, transparent 42%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(255, 255, 255, 0.40) 22%,
      rgba(255, 255, 255, 0) 58%
    ),
    var(--paper-2);
  border: 1px solid rgba(230, 212, 194, 0.7);
  border-radius: 28px;
  padding: 28px 24px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(26, 24, 20, 0.06),
    0 4px 12px rgba(26, 24, 20, 0.05),
    0 18px 44px rgba(26, 24, 20, 0.08),
    0 36px 72px rgba(198, 74, 26, 0.05);
  overflow: visible;
  margin: 6px 0 22px;
  transition:
    transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  /* .screen is display:flex/column; without flex-shrink:0 the card
     can get collapsed below its content height inside the
     constrained phone-frame height. Pin it. */
  flex-shrink: 0;
}
/* Linkable cards lift on hover. Owner card on /me stays since
   it isn't a link target. */
.founder-card:has(a.founder-card-identity-link:hover) {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(26, 24, 20, 0.06),
    0 8px 20px rgba(26, 24, 20, 0.07),
    0 28px 60px rgba(26, 24, 20, 0.12),
    0 48px 96px rgba(198, 74, 26, 0.07);
}
.founder-card .founder-card-edit {
  top: 22px;
  right: 20px;
}

.founder-card-body { padding: 0; }

.founder-card-identity {
  display: flex;
  gap: 12px;
  align-items: center;
}
.founder-card-identity-text { flex: 1; min-width: 0; }

/* Linkable identity. the avatar + name area on a rail card
   becomes a tap target for the founder's profile. Inner socials
   / pinned remain independent (they're outside this row). */
a.founder-card-identity-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease;
}
a.founder-card-identity-link:hover .founder-card-name {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.founder-card-identity-arrow {
  margin-left: auto;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-fade);
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}
a.founder-card-identity-link:hover .founder-card-identity-arrow {
  color: var(--amber);
  transform: translateX(2px);
}
.founder-card-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.founder-card-name {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* City eyebrow. small uppercase amber line above the name so
   the location reads as a tiny warm tag, not just another
   muted meta chunk. */
.founder-card-city-eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Compact meta line. title · company · N events (when > 0).
   City lives above as a separate eyebrow now. */
.founder-card-meta {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Bio. quiet serif line directly under identity, no eyebrow.
   Reads as the founder's voice, not a labelled form field. */
.founder-card-bio {
  margin: 8px 0 0;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Row spacing. clean stack, no horizontal rule between rows.
   the all-caps label is enough of a visual anchor to find each
   row; the divider line was just extra chrome stacking inside
   the already-bordered card. */
.founder-card-row {
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}

/* Row label. left-aligned sans, compact. */
.founder-card-row-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.founder-card-row-value {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* About me. four key:value lines, no wrapping label. Tight inter-
   line spacing groups them visually as one block. */
.founder-card-about { display: flex; flex-direction: column; gap: 2px; }
.founder-card-about-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.founder-card-about-key {
  flex-shrink: 0;
  min-width: 44px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-fade);
  letter-spacing: 0.02em;
}
.founder-card-about-value { color: var(--ink); }

/* Pinned. one inline line. host link with arrow, no boxed card. */
.founder-card-pinned-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.founder-card-pinned-link {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 24, 20, 0.25);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.founder-card-pinned-link:hover { text-decoration-color: var(--ink); }
.founder-card-pinned-link span { color: var(--ink-fade); margin-left: 4px; }

/* Pencil edit icon in the top-right corner of the card. visible
   only when editable:true is passed to the partial. */
.founder-card-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-mute);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 1;
}
.founder-card-edit:hover { background: var(--paper-2); color: var(--ink); }

/* ===== Numbered sections (01 / 02) ===== */
.card-section-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 24px 0 4px;
}
.card-section-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.08em;
}
.card-section-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.card-section-sub {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0 0 14px;
}
/* Inline modifiers on the "I am" / "Stage" / "I back" row labels  
   small uppercase cap counter on the right, parenthetical aside in
   sans-mute next to the label text. */
.card-row-cap {
  margin-left: 6px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
.card-row-aside {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-mute);
}

/* ===== Photo row (Section 01 leader) ===== */
.photo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 18px;
}
.photo-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px dashed rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.photo-thumb svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink-mute);
  stroke-width: 1.5;
  fill: none;
}
.photo-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--amber);
  color: var(--amber);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.photo-btn:hover { background: rgba(198, 74, 26, 0.06); }

/* ===== Card-setup form fields ===== */
.card-field { margin: 0 0 12px; }
.card-field-label,
.card-field-label-row {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 6px;
}
.card-field-label-row { margin: 18px 0 8px; }
.card-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--amber-soft);
  background: var(--paper);
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card-input::placeholder { color: var(--ink-fade); }
.card-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(198, 74, 26, 0.08);
}

/* ===== Socials 2-up grid ===== */
.card-socials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 8px;
}
.card-social {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--paper);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card-social:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 24, 20, 0.04);
}
.card-social-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-mute);
}
.card-social-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.5; fill: none; }
.card-social-icon svg path[fill="currentColor"] { fill: currentColor; }
.card-social-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  height: 100%;
  padding: 0;
}
.card-social-input::placeholder { color: var(--ink-fade); }
.card-social-input:focus { outline: none; }

/* ===== Chip groups (Section 02) ===== */
.chip-group { margin: 14px 0 4px; }
.chip-group-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}

/* "+ Healthtech" style. dashed border, plus prefix. */
.chip.chip-plus {
  border-style: dashed;
  color: var(--ink-soft);
}
.chip.chip-plus.selected {
  border-style: solid;
  color: var(--paper);
}
.chip-plus-mark {
  color: var(--ink-mute);
  margin-right: 4px;
  font-weight: 400;
}
.chip.chip-plus.selected .chip-plus-mark { color: var(--paper); }

/* ===== Bottom bar (Step into the room + Copy my card) ===== */
.card-bottom-bar { text-align: center; }
.cta-btn-step {
  width: 100%;
  height: 54px;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: var(--paper-2);
  color: var(--ink-mute);
  letter-spacing: -0.005em;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.cta-btn-step::before {
  content: "✓";
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  vertical-align: middle;
  opacity: 0.55;
}
.cta-btn-step:disabled { cursor: not-allowed; }
.cta-btn-step.is-ready {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 10px rgba(26, 24, 20, 0.12);
}
.cta-btn-step.is-ready::before { opacity: 1; }

/* Pending state. form isn't fully filled out yet, but the button
   still works: tapping it scrolls to the first missing section so
   the founder can finish, instead of being a dead disabled button
   that hides "scroll for more sections" behind a wall. Visually
   muted compared to is-ready so it still telegraphs "not quite". */
.cta-btn-step.is-pending {
  background: var(--paper-2);
  color: var(--ink-soft);
  cursor: pointer;
}
.cta-btn-step.is-pending::before {
  content: "";
  margin-right: 0;
}

/* Brief pulse highlight on whatever the CTA scrolled the founder to.
   Quiet amber wash + outline, fades out automatically. Used by
   card-form#_scrollToFirstMissing to draw the eye after smooth-scroll. */
.is-pulsing {
  animation: card-form-pulse 1.4s ease-out;
  border-radius: 10px;
}
@keyframes card-form-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(198, 74, 26, 0.0); }
  20%  { box-shadow: 0 0 0 6px rgba(198, 74, 26, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(198, 74, 26, 0.0); }
}

.card-bottom-hint {
  margin: 10px 6px 4px;
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-mute);
  line-height: 1.45;
}
.card-copy-link {
  display: inline-block;
  margin: 2px auto 0;
  padding: 8px 4px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
}
.card-copy-link:hover  { color: var(--ink); }
.card-copy-link.is-copied { color: var(--amber); }

/* =====================================================================
   GLOBAL TOP NAV
   shared/_top_nav.html.erb. rendered on every signed-in page so no
   screen is a dead-end. Brand on the left, primary destinations in
   the middle, page-specific actions or sign-out on the right.
   ===================================================================== */
.top-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  font-family: var(--font-sans);
  flex-shrink: 0;
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-nav-leading {
  display: inline-flex;
  align-items: center;
}
.top-nav-brand {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.top-nav-brand:hover { color: var(--amber); }
.top-nav-brand-img {
  height: 56px;
  width: auto;
  display: block;
}
.top-nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.top-nav-links::-webkit-scrollbar { display: none; }
.top-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 2px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.top-nav-link:hover { color: var(--ink); }

/* Admin view-mode toggle. Sits in the trailing area next to Sign
   out. Quiet pill until the admin enters admin mode, then flips
   to a filled amber pill so the admin always knows what view
   they're rendering. */
.top-nav-mode {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  margin-right: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.top-nav-mode:hover { border-color: var(--ink-mute); color: var(--ink); }
.top-nav-mode-admin {
  background: rgba(198, 74, 26, 0.08);
  border-color: rgba(198, 74, 26, 0.4);
  color: var(--amber);
}
.top-nav-mode-admin:hover {
  background: rgba(198, 74, 26, 0.14);
  border-color: var(--amber);
  color: var(--amber);
}

.top-nav-link.is-active {
  color: var(--ink);
  border-bottom-color: var(--amber);
}
.top-nav-trailing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.top-nav-signout {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-fade);
  padding: 4px 2px;
}
.top-nav-signout:hover { color: var(--ink); }
.top-nav-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  color: var(--ink-mute);
  padding: 4px 6px;
  line-height: 1;
  text-decoration: none;
  transition: color 0.15s ease;
}
.top-nav-icon-btn:hover { color: var(--ink); }

/* Back-arrow variant with a visible label ("‹ Events") so users see
   exactly where the back button lands instead of guessing from a bare
   chevron. Chevron stays large for tap-affordance; label is small. */
.top-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px 4px 4px;
  color: var(--ink-mute);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: color 0.15s ease;
}
.top-nav-back:hover { color: var(--ink); }
.top-nav-back-chevron {
  font-size: 18px;
  line-height: 1;
  font-weight: 300;
}
.top-nav-back-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* =====================================================================
   FOUNDER CARD. narrative lines (replaces the old key:value rows)
   Each "line" is a sentence: about-me sentence, hoping sentence,
   pinned link. The optional .founder-card-line-lead is a small
   sans label that anchors the line without dominating it.
   ===================================================================== */
.founder-card-line {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.founder-card-line-lead {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-fade);
  text-transform: uppercase;
  margin-right: 6px;
}
.founder-card-line-about { color: var(--ink); }
.founder-card-line-hoping { color: var(--ink); }
.founder-card-line-pinned { color: var(--ink-mute); }
.founder-card-line-bio    { color: var(--ink); }

/* Event-context row. rendered when the directory rail passes
   event_context. The link reads as a quiet inline title + date,
   matching the Pinned row's tone (subdued, tappable). */
.founder-card-line-event { color: var(--ink-mute); }
.founder-card-event-link {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}
.founder-card-event-link:hover { color: var(--amber); }
.founder-card-event-link:hover .founder-card-event-title { text-decoration: underline; }
.founder-card-event-title { font-weight: 500; }
.founder-card-event-date  { color: var(--ink-fade); }

/* Socials variant: the lead label ("Find me") sits inline with the
   icon row instead of above it. Strip the .founder-card-socials
   default top margin since the wrapping .founder-card-line already
   provides the separator. */
.founder-card-line-socials {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.founder-card-line-socials .founder-card-socials {
  margin: 0;
}

/* =====================================================================
   FEED. avatars, hoping chips, past-events strip, empty state
   ===================================================================== */
/* Avatar inside the feed list. image variant from _avatar partial. */
img.feed-attendee-avatar,
img.feed-attendee-avatar-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--paper-2);
  display: block;
}
/* Hoping-to-find preview chips below each founder row. */
.feed-attendee-hoping {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.feed-attendee-hoping-tag {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-mute);
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
}
/* Hoping chips are now tappable links: tap → /feed?hoping=TAG so
   you can discover other founders with the same chip. Keeps the
   pill look; adds a quiet hover signal. */
.feed-attendee-hoping-tag-link {
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.feed-attendee-hoping-tag-link:hover {
  background: var(--amber-soft);
  color: var(--amber);
}

/* Better empty state when no upcoming event. past dinners + a quiet
   line so the page isn't blank. */
.feed-empty-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0 4px;
}
.feed-past-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  scrollbar-width: none;
}
.feed-past-strip::-webkit-scrollbar { display: none; }
.feed-past-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 180px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.feed-past-card:hover { border-color: rgba(0, 0, 0, 0.2); }
.feed-past-card-cover {
  width: 100%;
  height: 90px;
  background: var(--paper-2) center / cover no-repeat;
}
.feed-past-card-text { padding: 8px 10px 10px; }
.feed-past-card-title {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-past-card-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-fade);
  line-height: 1.3;
}

/* =====================================================================
   PROFILE SHOW. shared-interests + completion nudge + discovery rail
   ===================================================================== */
.profile-shared {
  margin: 8px 0 14px;
  padding: 10px 14px;
  background: var(--amber-soft);
  border-radius: 10px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.profile-shared-lead {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--amber);
  text-transform: uppercase;
  margin-right: 6px;
}
.profile-completion {
  display: block;
  margin: 6px 0 18px;
  padding: 10px 14px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  text-decoration: none;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.profile-completion:hover { border-color: var(--ink); color: var(--ink); }
.profile-completion-cta {
  color: var(--amber);
  font-weight: 500;
  margin-left: 2px;
}

/* Variant of the feed directory rendered under the profile card  
   the section gets its own editorial header (eyebrow + serif title
   + CTA), so this wrapper just adds breathing room above. */
.profile-discovery {
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}

/* =====================================================================
   ACTIVITY ZONE. "Your eChai" section that sits between the profile
   card and the discovery rails on /me. Painted as a soft warm-tinted
   block so it reads as a distinct zone on the page (profile card
   above sits on white paper; this block sits on paper-2). Event
   cards inside stay white so they pop against the tint. Owner-only.
   ===================================================================== */
.me-activity {
  margin: 24px 0 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.me-activity-head {
  margin: 0 0 10px;
}
.me-activity-eyebrow {
  display: block;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.me-activity-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.me-activity-summary {
  margin: 8px 0 18px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Empty state. quiet link that prompts the founder to browse
   events when they have nothing on record yet. */
.me-activity-empty {
  display: block;
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: none;
  line-height: 1.45;
}
.me-activity-empty:hover { border-color: var(--ink-mute); color: var(--ink); }
.me-activity-empty-cta {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--amber);
  margin-left: 4px;
}

.me-activity-section + .me-activity-section {
  margin-top: 22px;
}

/* Two-tab toggle (Coming up / Past events). Hidden radios drive
   sibling selectors so only the active panel renders, with no JS.
   Defaults to "Coming up" via the `checked` attr in the view. */
.me-activity-tabs { margin: 4px 0 0; }
.me-activity-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.me-activity-tab-list {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.me-activity-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.me-activity-tab:hover { color: var(--ink); }
.me-activity-tab-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-fade);
}
/* Tab pills stay on one row; if a long count makes them wider
   than the phone frame, scroll horizontally rather than wrap. */
/* Four tabs in one row inside the phone-frame: tighter padding,
   smaller font, smaller gap. No divider between the tabs and the
   panel so the active pill visually connects to its section. */
.me-activity-tab-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 4px;
  margin: 0 0 6px;
  padding-bottom: 0;
  border-bottom: 0;
}
.me-activity-tab-list::-webkit-scrollbar { display: none; }
.me-activity-tab {
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 12.5px;
}
.me-activity-tab-input-events:checked    ~ .me-activity-tab-list label[for=me_activity_tab_events],
.me-activity-tab-input-attendees:checked ~ .me-activity-tab-list label[for=me_activity_tab_attendees],
.me-activity-tab-input-feed:checked      ~ .me-activity-tab-list label[for=me_activity_tab_feed] {
  background: var(--amber-soft);
  color: var(--ink);
}
.me-activity-tab:focus-visible,
.me-activity-tab-input:focus-visible + .me-activity-tab-list .me-activity-tab {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.me-activity-tab-panel { display: none; }
.me-activity-tab-input-events:checked    ~ .me-activity-tab-panel-events,
.me-activity-tab-input-attendees:checked ~ .me-activity-tab-panel-attendees,
.me-activity-tab-input-feed:checked      ~ .me-activity-tab-panel-feed {
  display: block;
}

/* ============ SUB-TAB TOGGLE (one level deeper) ============
   Used inside Events panel (Upcoming / Past) and Attendees panel
   (Going to / Went with / In your city). Same pill language as
   the top tabs but scaled down + a different active fill
   (lifted white instead of amber) so they read as
   children-of-parent. Indented ~14px so the row visually
   descends from the active parent pill instead of sitting at
   the same lane. */
.me-subtabs { margin: 0; }
.me-subtab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* Sub-tabs: identical pill design as the top tabs, with the
   whole row rendered at opacity 0.75. Same active fill, same
   padding/radius/font. The opacity alone establishes "smaller
   voice of the same system." */
.me-subtab-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0.75;
}
.me-subtab-list::-webkit-scrollbar { display: none; }
.me-subtab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.me-subtab:hover { color: var(--ink); }

/* Active sub-tab: same amber-soft pill as the top tab's active.
   Class-based targeting so multiple city bands can have independent
   sub-tab radio groups without ID collisions. */
.me-subtab-input-events-upcoming:checked ~ .me-subtab-list .me-subtab-target-events-upcoming,
.me-subtab-input-events-past:checked     ~ .me-subtab-list .me-subtab-target-events-past,
.me-subtab-input-attendees-going:checked ~ .me-subtab-list .me-subtab-target-attendees-going,
.me-subtab-input-attendees-went:checked  ~ .me-subtab-list .me-subtab-target-attendees-went,
.me-subtab-input-attendees-city:checked  ~ .me-subtab-list .me-subtab-target-attendees-city {
  background: var(--amber-soft);
  color: var(--ink);
}


/* Sub-panel toggles. each panel is shown only when its scoped
   input is checked within the same .me-subtabs group. */
.me-subtab-panel { display: none; }
.me-subtab-input-events-upcoming:checked ~ .me-subtab-panel-events-upcoming,
.me-subtab-input-events-past:checked     ~ .me-subtab-panel-events-past,
.me-subtab-input-attendees-going:checked ~ .me-subtab-panel-attendees-going,
.me-subtab-input-attendees-went:checked  ~ .me-subtab-panel-attendees-went,
.me-subtab-input-attendees-city:checked  ~ .me-subtab-panel-attendees-city {
  display: block;
}

/* Participants tab: three sub-sections (Folks joining, Previous
   attendees, In your city). Each renders 10 founder cards by
   default and a CSS-only checkbox expand reveals the rest
   inline. No bounded scroll box. the page just flows. */
.me-participants-group { margin: 20px 0 0; }
.me-participants-group:first-of-type { margin-top: 4px; }
.me-participants-group-head { margin: 0 0 10px; }
.me-participants-group-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.me-participants-group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-fade);
  letter-spacing: 0.02em;
}
.me-participants-group-desc {
  margin: 6px 0 12px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.45;
}
.me-participants-extra { display: none; margin-top: 18px; }
.me-participants-expand-input:checked ~ .me-participants-list .me-participants-extra {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.me-participants-expand-btn {
  display: inline-block;
  margin: 12px 0 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}
.me-participants-expand-btn:hover { background: var(--paper-3, #ede7d8); }
.me-participants-expand-when-expanded { display: none; }
.me-participants-expand-input:checked ~ .me-participants-expand-btn .me-participants-expand-when-collapsed { display: none; }
.me-participants-expand-input:checked ~ .me-participants-expand-btn .me-participants-expand-when-expanded { display: inline; }

/* ============ ME-SCOPE (third-level toggle inside Events Upcoming)
   Widens the upcoming events list from city → region → global.
   Smaller, dimmer pills than the sub-tabs above so the
   hierarchy reads: top tab pill > sub-tab pill > scope pill. */
.me-scope { margin: 0; }
.me-scope-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.me-scope-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  margin: 0 0 12px;
  padding: 0 0 0 12px;
  opacity: 0.7;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.me-scope-list::-webkit-scrollbar { display: none; }
.me-scope-label {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.me-scope-label:hover { color: var(--ink); }
.me-scope-input-city:checked   ~ .me-scope-list label[for=me_scope_events_city],
.me-scope-input-region:checked ~ .me-scope-list label[for=me_scope_events_region],
.me-scope-input-global:checked ~ .me-scope-list label[for=me_scope_events_global] {
  background: var(--amber-soft);
  color: var(--ink);
}
.me-scope-panel { display: none; }
.me-scope-input-city:checked   ~ .me-scope-panel-city,
.me-scope-input-region:checked ~ .me-scope-panel-region,
.me-scope-input-global:checked ~ .me-scope-panel-global {
  display: block;
}

/* ============ EXPLORE (owner-only discovery) ============
   Two-axis CSS-only toggle. Tab row picks content (Events /
   Attendees / Startup Feed). Scope row picks reach (City /
   Region / Global). Panels chain `:checked ~` so they render
   only when BOTH the tab and scope match. Feed is global today,
   so the scope row hides when Feed is the active tab. */
.me-explore { margin-top: 28px; }
.explore-tabs { margin: 0; }
.explore-tab-input,
.explore-scope-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Content tabs. Same amber-soft pill language as me-activity. */
.explore-tab-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 0 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.explore-tab-list::-webkit-scrollbar { display: none; }
.explore-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.explore-tab:hover { color: var(--ink); }
.explore-tab-input-events:checked    ~ .explore-tab-list label[for=explore_tab_events],
.explore-tab-input-attendees:checked ~ .explore-tab-list label[for=explore_tab_attendees],
.explore-tab-input-feed:checked      ~ .explore-tab-list label[for=explore_tab_feed] {
  background: var(--amber-soft);
  color: var(--ink);
}

/* Scope row. Same pill language at 75% opacity so it reads as
   a quieter axis under the content tabs. */
.explore-scope-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 0 16px;
  opacity: 0.75;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.explore-scope-list::-webkit-scrollbar { display: none; }
.explore-scope {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.explore-scope:hover { color: var(--ink); }
.explore-scope-input-city:checked   ~ .explore-scope-list label[for=explore_scope_city],
.explore-scope-input-region:checked ~ .explore-scope-list label[for=explore_scope_region],
.explore-scope-input-global:checked ~ .explore-scope-list label[for=explore_scope_global] {
  background: var(--amber-soft);
  color: var(--ink);
}

/* Hide scope row when Feed tab is active. */
.explore-tab-input-feed:checked ~ .explore-scope-list { display: none; }

/* Panel visibility. Each panel only shows when both the
   matching tab AND (where applicable) the matching scope are
   checked. */
.explore-panel { display: none; }

/* Events: 3 scope panels (city / region / global). Chain order
   matches markup order: scope inputs are siblings BEFORE the
   tab inputs, which are BEFORE the panels. */
.explore-scope-input-city:checked   ~ .explore-tab-input-events:checked ~ .explore-panel-events-city,
.explore-scope-input-region:checked ~ .explore-tab-input-events:checked ~ .explore-panel-events-region,
.explore-scope-input-global:checked ~ .explore-tab-input-events:checked ~ .explore-panel-events-global {
  display: block;
}

/* Attendees: 3 scope panels (city / region / global) */
.explore-scope-input-city:checked   ~ .explore-tab-input-attendees:checked ~ .explore-panel-attendees-city,
.explore-scope-input-region:checked ~ .explore-tab-input-attendees:checked ~ .explore-panel-attendees-region,
.explore-scope-input-global:checked ~ .explore-tab-input-attendees:checked ~ .explore-panel-attendees-global {
  display: block;
}

/* Feed: scope-independent. shows whenever Feed tab is active. */
.explore-tab-input-feed:checked ~ .explore-panel-feed { display: block; }

/* ========== CITY PAGE TABS ==========
   Same CSS-only radio-toggle pattern as /me, scoped with its own
   class names so the two tab groups can coexist on the same DOM.
   Active pill is amber-soft + dark ink. */
.city-tabs { margin: 4px 0 0; }
.city-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.city-tab-list {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.city-tab-list::-webkit-scrollbar { display: none; }
.city-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.15s ease, color 0.15s ease;
}
.city-tab:hover { color: var(--ink); }
.city-tab-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-fade);
}
/* Class-based tab targeting so multiple bands can coexist on the
   same page with different unique-id radio groups. Each label gets
   a .city-tab-target-<kind> class; the :checked ~ ... combinator
   matches without needing literal radio IDs. */
.city-tab-input-upcoming:checked  ~ .city-tab-list .city-tab-target-upcoming,
.city-tab-input-past:checked      ~ .city-tab-list .city-tab-target-past,
.city-tab-input-attendees:checked ~ .city-tab-list .city-tab-target-attendees,
.city-tab-input-feed:checked      ~ .city-tab-list .city-tab-target-feed {
  background: var(--amber-soft);
  color: var(--ink);
}
.city-tab-input-upcoming:checked  ~ .city-tab-list .city-tab-target-upcoming  .city-tab-count,
.city-tab-input-past:checked      ~ .city-tab-list .city-tab-target-past      .city-tab-count,
.city-tab-input-attendees:checked ~ .city-tab-list .city-tab-target-attendees .city-tab-count,
.city-tab-input-feed:checked      ~ .city-tab-list .city-tab-target-feed      .city-tab-count {
  color: var(--ink-soft);
}
.city-tab-panel { display: none; }
.city-tab-input-upcoming:checked  ~ .city-tab-panel-upcoming,
.city-tab-input-past:checked      ~ .city-tab-panel-past,
.city-tab-input-attendees:checked ~ .city-tab-panel-attendees,
.city-tab-input-feed:checked      ~ .city-tab-panel-feed { display: block; }

/* ========== CITY FEED ========== */
.city-feed-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 20px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%),
    var(--paper-2);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
}
.city-feed-compose-title { font-family: var(--font-serif); font-size: 15px; }
.city-feed-compose-body {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.45;
  resize: vertical;
  min-height: 84px;
}
.city-feed-compose-link {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.city-feed-compose-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.city-feed-compose-sub {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
}

.city-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.city-feed-item {
  position: relative;
  padding: 18px 18px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    var(--paper-2);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(26, 24, 20, 0.04),
    0 6px 18px rgba(26, 24, 20, 0.04);
}
.city-feed-item-title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
}
.city-feed-item-body {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.city-feed-item-body p { margin: 0 0 6px; }
.city-feed-item-body p:last-child { margin-bottom: 0; }
.city-feed-item-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--amber);
  word-break: break-all;
}
.city-feed-item-link:hover { text-decoration: underline; }
.city-feed-item-meta {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.city-feed-item-delete {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-fade);
  cursor: pointer;
}
.city-feed-item-delete:hover { color: var(--accent); }

/* File upload row inside the compose form. Custom-styled label so
   the native input doesn't look out of place against the other
   text fields. */
.city-feed-compose-file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.city-feed-compose-file-label { flex-shrink: 0; }
.city-feed-compose-file-input {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
}

/* Story (cover + title overlay) layout for a feed item. Image
   bleeds to the card edge; title sits in the bottom-left over
   a soft dark gradient so it stays legible against any photo.
   Caption renders underneath in serif. */
.city-feed-item.city-feed-item-story {
  padding: 0;
  overflow: hidden;
}

/* Whole-card link wrapper. Used when the post has an external_url
   AND isn't a YouTube embed (i.e. X posts, articles, podcasts on
   non-YouTube hosts). A tap anywhere on the content area opens
   the source in a new tab. Title/body/cover all stay visually
   identical to the non-link variant; the cursor is the only
   affordance until hover. */
.city-feed-item-content { display: block; }
.city-feed-item-content-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}
.city-feed-item-content-link:hover .city-feed-item-title,
.city-feed-item-content-link:hover .city-feed-story-title {
  color: var(--accent);
}
.city-feed-item-content-link:active {
  transform: scale(0.998);
}

/* ============ FEED PERMALINK PAGE (/feed/:slug) ============ */
.feed-permalink {
  margin: 4px 0 22px;
}
.feed-permalink-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--ink);
}
.feed-permalink-meta {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.feed-permalink-cover {
  position: relative;
  margin: 0 0 18px;
}
.feed-permalink-cover-img,
.feed-permalink-cover .city-feed-story-cover-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  background: var(--paper-2);
}
.feed-permalink-cover .city-feed-story-facade-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
}
.feed-permalink-cover .city-feed-story-facade .city-feed-story-cover-img {
  position: absolute;
  inset: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.feed-permalink-body {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 22px;
}
.feed-permalink-body p { margin: 0 0 14px; }
.feed-permalink-body p:last-child { margin-bottom: 0; }
.feed-permalink-source {
  margin: 0 0 22px;
}
.feed-permalink-source-link {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease;
}
.feed-permalink-source-link:hover { background: var(--accent); }

.feed-permalink-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}
.feed-permalink-share-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 4px;
}
.feed-permalink-share-btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.feed-permalink-share-btn:hover {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.feed-permalink-share-btn-primary {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.feed-permalink-share-btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.feed-permalink-admin {
  margin: 18px 0 0;
}
.feed-permalink-admin-delete {
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
}
.feed-permalink-admin-delete:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.feed-permalink-related {
  margin: 28px 0 18px;
}
.feed-permalink-related-head {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.city-feed-story-cover {
  position: relative;
  padding: 0 22px;
}
.city-feed-story-cover-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  background: var(--paper-2);
}
.city-feed-story-body {
  padding: 14px 22px 6px;
}
.city-feed-story-title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.12;
  color: var(--ink);
}
/* Title-above-cover variant. Title sits with the same horizontal
   margins as the cover and body below so the three blocks form a
   single aligned column instead of the cover bleeding to the
   card edge. */
.city-feed-story-title-lead {
  padding: 22px 22px 14px;
  margin: 0;
}

/* YouTube facade. Cover image stays as the poster; click swaps it
   with an iframe that autoplays. Same rounded-inset shape as the
   non-video cover. */
.city-feed-story-facade-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
}
.city-feed-story-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}
.city-feed-story-facade .city-feed-story-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
}
.city-feed-story-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, filter 0.15s ease;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
.city-feed-story-facade:hover .city-feed-story-play {
  transform: translate(-50%, -50%) scale(1.06);
}
.city-feed-story-facade:hover .city-feed-story-play svg path:first-child {
  fill: var(--accent);
  fill-opacity: 0.9;
}
.city-feed-story-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.city-feed-story-caption {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.city-feed-story-caption p { margin: 0 0 6px; }
.city-feed-story-caption p:last-child { margin-bottom: 0; }
.city-feed-item.city-feed-item-story .city-feed-item-link,
.city-feed-item.city-feed-item-story .city-feed-item-meta {
  padding-left: 20px;
  padding-right: 20px;
}
.city-feed-item.city-feed-item-story .city-feed-item-meta {
  padding-bottom: 16px;
}

/* Sub-label under the meta on a founder card. Used on /cities/:slug
   to say "From <city>" / "Attended events here" inside the
   identity block. Quiet mono uppercase so it doesn't compete with
   the name. */
.founder-card-context-label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--amber);
}
.me-activity-section-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.me-activity-section-label-text { flex: 0 0 auto; }
.me-activity-section-cta {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--amber);
  text-decoration: none;
}
.me-activity-section-cta:hover { text-decoration: underline; }
/* Count badge next to the section label. small pill that tells
   the reader the section's size at a glance without scrolling. */
.me-activity-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 6px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0;
}
/* Brief description under the section label. one line of context
   so a first-time viewer knows what kind of event is in this list. */
.me-activity-section-desc {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.me-activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tiny intent-state row on the upcoming-event card. a single
   line that tells the owner whether they've shared their intent
   on that RSVP yet. Sits just below the event meta. */
.me-activity-intent {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}
.me-activity-intent-done   { color: #5fb37a; }
.me-activity-intent-prompt { color: var(--amber); }

/* =====================================================================
   DISCOVERY RAILS. themed horizontal strips that sit above the full
   "All founders" list on /me, giving multiple angles into the network
   (people you've been at events with, people in your city, etc.).
   Each rail is a compact horizontal scroll of face cards; tap one to
   open the full profile.
   ===================================================================== */
.discovery-rail {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.discovery-rail + .discovery-rail {
  border-top: 1px solid var(--border-soft);
}
.discovery-rail-head {
  margin: 0 0 14px;
}
.discovery-rail-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
/* Count pill. same pattern as the activity zone so the page
   reads consistently. Small monospace numeral inside a quiet
   outlined chip. */
.discovery-rail-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 6px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.discovery-rail-title {
  display: block;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
/* One-line description under the rail title. explains the angle
   to a first-time viewer ("RSVPed going to events you're going to
   …") without making them squint at the count badge alone. */
.discovery-rail-desc {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* The horizontal scroll strip itself. Bleeds to the phone-frame
   edges so face cards breathe; scrollbar hidden so the gesture
   is the only affordance. */
.discovery-rail-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 24px;
  margin: 0 -24px;
}
.discovery-rail-strip::-webkit-scrollbar { display: none; }

/* Compact founder card used inside a discovery rail. Fixed width
   so cards line up cleanly in the horizontal scroll; tall enough
   to hold avatar + identity + one hoping line without truncation. */
.face-card {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.face-card:hover {
  border-color: var(--ink-mute);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.face-card-avatar,
.face-card-avatar-image {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.face-card-text { display: flex; flex-direction: column; gap: 2px; }
.face-card-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.face-card-host {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-soft);
  border-radius: 4px;
  vertical-align: 2px;
}
.face-card-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.4;
}
/* City eyebrow above the name on a face card, matching the
   founder-card-city-eyebrow style for consistency. */
.face-card-city {
  margin: 0 0 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
  line-height: 1.4;
}
.face-card-hoping {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.face-card-hoping-lead {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-right: 4px;
}

/* Editorial section header used on the profile page. small mono
   eyebrow (with a count pill) stacks above a confident serif title,
   with a CTA pinned to the right and a one-line description
   underneath. Same pattern as the activity zone + discovery rails
   so all sections on /me share a consistent header rhythm. */
.profile-section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow eyebrow"
    "title cta"
    "desc desc";
  align-items: baseline;
  gap: 4px 12px;
  margin: 28px 0 14px;
}
.profile-section-head:first-child,
.screen > .profile-section-head:first-of-type,
.screen > section:first-of-type .profile-section-head {
  margin-top: 0;
}
.profile-section-eyebrow {
  grid-area: eyebrow;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-fade);
}
.profile-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 6px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.profile-section-title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.profile-section-cta {
  grid-area: cta;
  align-self: baseline;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  white-space: nowrap;
}
.profile-section-cta:hover { text-decoration: underline; }
.profile-section-desc {
  grid-area: desc;
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* =====================================================================
   Static stub pages (/hummingbird, /brands). used as nav-link
   destinations on the landing page until those surfaces fully exist
   on this app. Quiet "coming here, see echai.ventures meanwhile" copy.
   ===================================================================== */
.static-page {
  padding: 32px 24px 48px;
}
.static-page-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.static-page-lede {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
}
.static-page-body {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 14px;
}
.static-page-body a {
  color: var(--amber);
  text-decoration: none;
}
.static-page-body a:hover { text-decoration: underline; }
.static-page-back {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--amber);
  text-decoration: none;
}
.static-page-back:hover { text-decoration: underline; }

/* =====================================================================
   EVENT SNAPSHOTS. admin-uploaded photos shown near the top of
   the event page (right under the attendee preview). Vertical
   full-width list: every photo renders at its natural aspect
   ratio inside the content column, aligned with the rest of the
   page (no edge bleed. the title and photos share the same left
   gutter so neither hugs the screen edge).
   ===================================================================== */
.event-snapshots {
  margin: 18px 0 22px;
}
.event-snapshots-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  /* Inset the heading row from the screen's content gutter so the
     "Snapshots from the event" title isn't flush against the left
     edge. Photos below still sit at the standard content gutter. */
  padding: 0 18px;
}
.event-snapshots-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.event-snapshots-manage {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
}
.event-snapshots-manage:hover { text-decoration: underline; }

/* Quiet "add photos" prompt rendered only for admins when there
   are no snapshots yet. Doesn't show for regular viewers. */
.event-snapshots-empty {
  display: block;
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px dashed var(--amber);
  background: var(--amber-soft);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--amber);
  text-align: center;
  text-decoration: none;
}
.event-snapshots-empty:hover { background: #f0dfca; }

/* Full-size vertical list. every snapshot renders at the
   container's full width and its natural aspect ratio. No
   forced square crop (which cut off faces on portraits) and
   no small thumbnails. Reads as a magazine photo essay,
   contained within the same content column as the title so
   the section doesn't sit visually closer to the edge than
   the rest of the page. */
.event-snapshots-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.event-snapshot {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper-2);
  text-decoration: none;
  line-height: 0; /* kills the inline-image gap below the img */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.event-snapshot:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.event-snapshot-img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-2);
}

/* Admin form. file input + currently-attached preview grid. Each
   already-attached photo renders as a small thumb with a "remove"
   checkbox; ticking flags it for purge on save. */
.event-form-file {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.event-form-photos-existing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.event-form-photo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-form-photo-cover {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.event-form-photo-cover input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.event-form-photo-cover img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--paper-2);
  display: block;
  transition: filter 0.15s ease;
}
.event-form-photo-cover-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--amber);
  color: white;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.event-form-photo-is-cover .event-form-photo-cover,
.event-form-photo-cover:has(input:checked) {
  box-shadow: 0 0 0 2px var(--amber);
}
.event-form-photo-is-cover .event-form-photo-cover-badge,
.event-form-photo-cover:has(input:checked) .event-form-photo-cover-badge {
  opacity: 1;
  transform: translateY(0);
}
.event-form-photo-remove-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
}

/* Legacy class kept for backwards-compatibility with any partial
   that hasn't been migrated to .event-form-photo yet. */
.event-form-photo-remove {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.event-form-photo-remove img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--paper-2);
}

/* Focused photo-only edit screen. Lightweight wrapper that mirrors
   the .static-page typography but with form chrome below the
   header. */
.photos-edit {
  padding: 24px 24px 48px;
}
.photos-edit-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}
.photos-edit-sub {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0 0 18px;
}
.event-form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

/* Danger zone at the bottom of the edit form. Visually separated
   from the Save/Cancel row + the JSON-edit hint above it. The
   button itself stays text-button quiet until hover. */
.event-form-danger {
  margin-top: 36px;
  padding: 14px 16px;
  border: 1px solid rgba(179, 76, 46, 0.28);
  background: rgba(179, 76, 46, 0.04);
  border-radius: 12px;
}
.event-form-danger-lead {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}
.event-form-danger-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(179, 76, 46, 0.5);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b34c2e;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.event-form-danger-btn:hover {
  background: #b34c2e;
  border-color: #b34c2e;
  color: var(--paper);
}

/* ============================================================
   /me activity zone (four-band adaptive)
   Hero (peach) → discovery (cream) → list (quiet) → met/past
   ============================================================ */

/* Hero band head. The biggest header on /me. Sits above the one
   warm peach card for "what's next." Heavy serif. */
.me-activity-hero-head {
  margin: 0 0 10px;
}
.me-activity-hero-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Generic band head. Used for "Across the network", "Also on
   your calendar", "People you've met". Smaller than the hero
   head, with a mono eyebrow line above. */
.me-activity-band-head {
  margin: 30px 0 10px;
}
.me-activity-eyebrow-line {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.me-activity-band-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.me-activity-band-lead {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.me-activity-band-lead strong {
  color: var(--ink);
  font-weight: 500;
}
.me-activity-band-lead-cta {
  color: var(--amber);
  font-family: var(--font-sans);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 2px;
}
.me-activity-band-lead-cta:hover { text-decoration: underline; }
.me-activity-band-foot-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--amber);
  text-decoration: none;
}
.me-activity-band-foot-link:hover { text-decoration: underline; }

/* Discovery chip row. Like the face row, but each chip has a
   small city label under the name so cross-city discovery is
   readable at a glance. Horizontal scroll on overflow. */
.me-discovery-chips {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.me-discovery-chips::-webkit-scrollbar { display: none; }
.me-discovery-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 72px;
  text-decoration: none;
  color: var(--ink);
}
.me-discovery-chip-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.me-discovery-chip-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.me-discovery-chip-city {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact event list. "Also on your calendar" — date chip on the
   left, title + meta on the right. One row per event, dense. The
   visual relief between the hero peach and the face row. */
.me-activity-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.me-activity-list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}
.me-activity-list-row:hover { background: rgba(198, 74, 26, 0.04); }
.me-activity-list-row:last-child { border-bottom: none; }
.me-activity-list-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}
.me-activity-list-day {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.me-activity-list-mon {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-top: 2px;
}
.me-activity-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.me-activity-list-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-activity-list-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Past events as a single closing sentence. Replaces the
   collapsed-details block. proof, not a list. */
.me-activity-past-line {
  margin: 28px 0 0;
  padding: 14px 4px 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.me-activity-past-link {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  margin-left: 4px;
}
.me-activity-past-link:hover { text-decoration: underline; }

/* Legacy. kept for surfaces that still reference .me-activity-subhead
   while the migration settles. */
.me-activity .me-activity-subhead {
  margin-top: 26px;
}
.me-activity .me-activity-subhead .profile-section-title {
  font-size: 18px;
  color: var(--ink-soft);
}

/* TODO row directly under the next event card. quiet but
   tappable. carries an amber dot, the prompt, and a soft arrow.
   Single-line on wide phones, wraps on narrow. */
.me-activity-todo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 2px 0;
  padding: 10px 14px;
  border: 1px dashed rgba(198, 74, 26, 0.35);
  border-radius: 12px;
  background: rgba(198, 74, 26, 0.04);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.45;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.me-activity-todo:hover {
  background: rgba(198, 74, 26, 0.08);
  border-color: rgba(198, 74, 26, 0.55);
}
.me-activity-todo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}
.me-activity-todo-text { flex: 1; }
.me-activity-todo-arrow {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--amber);
  flex-shrink: 0;
}

/* Empty-state push CTA. Block C. one decisive link that turns a
   barren /me into a doorway to the events page. */
.me-activity-push {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-serif);
  line-height: 1.5;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.me-activity-push:hover { border-color: var(--ink-mute); transform: translateY(-1px); }
.me-activity-push-line { font-size: 14px; color: var(--ink-soft); }
.me-activity-push-line strong { color: var(--ink); font-weight: 500; }
.me-activity-push-arrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--amber);
}

/* Face rail for "People you've met." 8 founders max, each as a
   round avatar + first name underneath. Horizontal scroll if the
   row overflows. */
.me-activity-faces {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 12px;
  scrollbar-width: none;
  margin-top: 4px;
}
.me-activity-faces::-webkit-scrollbar { display: none; }
.me-activity-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 64px;
  text-decoration: none;
  color: var(--ink);
}
.me-activity-face-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.me-activity-face-name {
  font-family: var(--font-sans);
  font-size: 11.5px;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* Across-the-network discovery zone below the cockpit. */
.me-discovery {
  margin-top: 28px;
}

/* Horizontal scroll of city tiles. each tile keeps its standard
   /cities-page shape; we just constrain its width and let the row
   scroll on overflow. */
.me-discovery-cities-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.me-discovery-cities-scroll::-webkit-scrollbar { display: none; }
.me-discovery-cities-scroll .city-tile {
  flex: 0 0 230px;
  width: 230px;
}

/* "See all cities" trailing tile, same height as the row so it
   reads as part of the scroll, not an afterthought. */
.me-discovery-cities-more {
  flex: 0 0 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: var(--ink-soft);
  background: transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.me-discovery-cities-more:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
}
.me-discovery-cities-more-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  padding: 0 14px;
  line-height: 1.4;
}

/* Collapsed past-events block. summary line + a downward chevron
   that flips when open. expanded list reuses event-list-muted. */
.me-activity-past {
  margin-top: 26px;
  padding: 0;
  border-top: 1px solid var(--border);
}
.me-activity-past-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 4px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.me-activity-past-summary::-webkit-details-marker { display: none; }
.me-activity-past-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  color: var(--ink-mute);
}
.me-activity-past[open] .me-activity-past-arrow { transform: rotate(180deg); }
.me-activity-past-list { margin-top: 8px; }


/* ============================================================
   /cities — place-feeling tiles + hero strip
   ============================================================ */

/* Grid of city tiles, two columns on wider phones, one on narrow. */
.city-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 520px) {
  .city-tiles { grid-template-columns: 1fr 1fr; }
}

/* Standard city tile (used in /cities region groups). 16:9 cover
   with a flag + name overlay, then a stats line + faces below. */
.city-tile {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1),
              border-color 0.2s ease;
  box-shadow: 0 1px 2px rgba(26, 24, 20, 0.04);
}
.city-tile:hover {
  transform: translateY(-3px);
  border-color: var(--ink-mute);
  box-shadow:
    0 4px 10px rgba(26, 24, 20, 0.06),
    0 18px 32px rgba(26, 24, 20, 0.07);
}
.city-tile-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #e8d6c4, #d4ad8b);
  overflow: hidden;
}
.city-tile-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.city-tile-cover-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(26, 24, 20, 0) 30%,
    rgba(26, 24, 20, 0.55) 100%);
}
.city-tile-cover-text {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.city-tile-flag { font-size: 18px; line-height: 1; }
.city-tile-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.city-tile-body { padding: 12px 14px 14px; }
.city-tile-stats {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.city-tile-line {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.city-tile-faces {
  display: flex;
  margin: 10px 0 0;
  padding-left: 4px;
}
.city-tile-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper-2);
  margin-left: -8px;
}
.city-tile-face:first-child { margin-left: -4px; }

/* Hero tile: the viewer's home city on /cities. Same anatomy as
   the standard tile but bigger, with a meatier body and a 36px
   face row. */
.city-hero-tile {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  margin: 0 0 6px;
  box-shadow: 0 1px 2px rgba(26, 24, 20, 0.05),
              0 14px 36px rgba(26, 24, 20, 0.06);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.city-hero-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(26, 24, 20, 0.06),
              0 24px 52px rgba(26, 24, 20, 0.09);
}
.city-hero-tile-cover {
  position: relative;
  aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, #e8d6c4, #d4ad8b);
  overflow: hidden;
}
.city-hero-tile-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.city-hero-tile-cover-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(26, 24, 20, 0) 35%,
    rgba(26, 24, 20, 0.55) 100%);
}
.city-hero-tile-cover-text {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.city-hero-tile-flag { font-size: 22px; line-height: 1; }
.city-hero-tile-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.city-hero-tile-body { padding: 14px 18px 18px; }
.city-hero-tile-stats {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.city-hero-tile-stats strong { color: var(--ink); font-weight: 500; }
.city-hero-tile-line {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}
.city-hero-tile-line strong { font-weight: 500; }
.city-hero-tile-faces {
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.city-hero-tile-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper-2);
  margin-left: -10px;
}
.city-hero-tile-face:first-child { margin-left: 0; }
.city-hero-tile-face-more {
  margin-left: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* Hero strip on /cities/:slug. Same anatomy as the home-city hero
   tile but anchored at the top of the screen and not a link
   itself. */
.city-hero-strip {
  margin: 0 0 18px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(26, 24, 20, 0.05),
              0 14px 36px rgba(26, 24, 20, 0.06);
}
.city-hero-strip-cover {
  position: relative;
  aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, #e8d6c4, #d4ad8b);
  overflow: hidden;
}
.city-hero-strip-cover-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.city-hero-strip-cover-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(26, 24, 20, 0) 35%,
    rgba(26, 24, 20, 0.6) 100%);
}
.city-hero-strip-cover-text {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.city-hero-strip-flag { font-size: 24px; line-height: 1; }
.city-hero-strip-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.city-hero-strip-body { padding: 14px 18px 18px; }
.city-hero-strip-stats {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.city-hero-strip-stats strong { color: var(--ink); font-weight: 500; }
.city-hero-strip-line {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}
.city-hero-strip-line strong { font-weight: 500; }
.city-hero-strip-faces {
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.city-hero-strip-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper-2);
  margin-left: -10px;
}
.city-hero-strip-face:first-child { margin-left: 0; }
.city-hero-strip-face-more {
  margin-left: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* ============================================================
   /startup-feed — dedicated Startup Feed surface.
   Pattern mirrors the echai.ventures feed:
     1) editorial lead line
     2) tag chip filter row with counts
     3) "Top N of M" summary (bulleted index)
     4) numbered full content stream below
   ============================================================ */

.startup-feed-lead {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 64ch;
}

/* === Activity feed === */

/* Chip rows. type / tag / city filters above the stream. Each row is
   compact + horizontally scrollable on narrow screens. */
.feed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
}
.feed-chips-tag, .feed-chips-city { margin-top: -4px; }
.feed-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--paper);
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.feed-chip:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
}
.feed-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.feed-chip-tag, .feed-chip-city {
  font-size: 12px;
  padding: 4px 9px;
  color: var(--ink-mute);
}
.feed-chip-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.feed-chip.is-active .feed-chip-count { opacity: 0.85; }

/* The stream. */
.feed-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

/* Card shape. one per item, same width and gutters, different fills. */
.feed-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.feed-item:hover { border-color: var(--border); }
.feed-item.is-pinned {
  border-color: var(--amber);
  background: linear-gradient(0deg, var(--paper), rgba(217, 119, 6, 0.04));
}

/* Bare wrapper = the single composite outer card. Inner cards
   (founder_card + feed_event_context) flatten so they read as
   sections of one shared card, not two stacked cards. Shares the
   founder_card visual treatment so the RSVP row matches every
   other card on the platform. Background gradient is uniform end
   to end (not just the top 22%) so the bottom event section sits
   on the same tone as the top founder section. */
.feed-item-bare {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background:
    radial-gradient(circle at 12% -8%, rgba(198, 74, 26, 0.10) 0%, transparent 42%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(255, 255, 255, 0.50) 50%,
      rgba(255, 255, 255, 0.30) 100%
    ),
    var(--paper-2);
  border: 1px solid rgba(230, 212, 194, 0.7);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(26, 24, 20, 0.06),
    0 4px 12px rgba(26, 24, 20, 0.05),
    0 18px 44px rgba(26, 24, 20, 0.08),
    0 36px 72px rgba(198, 74, 26, 0.05);
}
.feed-item-bare:hover { border-color: rgba(198, 74, 26, 0.35); }
.feed-item-bare.is-pinned { border-color: var(--amber); }

/* Flatten inner card chrome when nested inside the composite. The
   outer .feed-item-bare provides the single shared frame. We also
   collapse the founder_card's bottom padding so the GOING TO
   divider sits close to the last founder row (HOPING TO MEET /
   PINNED). The standalone founder_card carries 22px there for
   breathing room; inside the composite the divider is the next
   visual beat, not empty space. */
.feed-item-bare > .founder-card,
.feed-item-bare > .feed-event-context,
.feed-item-bare > .feed-event-context-link {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/* Trim both ends of the founder_card inside the composite. The
   standalone card's 28px top + 22px bottom are sized for a
   standalone card; inside the composite there's already a head
   above and a connector below, so smaller is right. */
.feed-item-bare > .founder-card {
  padding-top: 14px;
  padding-bottom: 4px;
}

/* Hide the redundant kind+time eyebrow on the inner event-context.
   The composite head at the top already carries it. */
.feed-item-bare .feed-event-context-head { display: none; }

/* RSVP eyebrow at the very top of the composite card. Demoted
   from the original heavy caps treatment. lowercase sans, small,
   muted. Sits as quiet metadata above the card content. */
.feed-rsvp-composite-head {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px 0;
}
.feed-rsvp-composite-head > span:first-child {
  font-weight: 600;
  color: var(--ink-soft);
}
.feed-rsvp-composite-dot { opacity: 0.5; }

/* Connector between the founder section and the event section,
   inside the composite. Reads as a founder_card section label
   (left-aligned small caps with a top hairline), matching the
   visual rhythm of ABOUT / HOPING TO MEET / PINNED above it.
   The down-arrow stays so the verb-then-object reading order
   ("going to ↓") survives the layout flip. */
.feed-rsvp-connector {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 24px;
  padding: 12px 0 6px;
  border-top: 1px solid rgba(230, 212, 194, 0.7);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.feed-rsvp-connector-text { color: var(--ink-mute); }
.feed-rsvp-connector-glyph {
  font-size: 12px;
  color: var(--amber);
  letter-spacing: 0;
  line-height: 1;
}

/* Event section, inside the composite. Reduces visual weight so
   the founder section reads as the primary content and this reads
   as the supporting "where they're going." Smaller serif title,
   tighter line height, no chevron (the caller passes show_chevron
   false). The connector above already provides separation; no
   need for top padding here. */
.feed-item-bare .feed-event-context {
  padding: 0 24px 14px;
}
.feed-item-bare .feed-event-context-eyebrow {
  margin-bottom: 4px;
}
.feed-item-bare .feed-event-context-title {
  font-size: 15.5px;
  font-weight: 500;
  margin-right: 0;
  margin-bottom: 4px;
  line-height: 1.3;
}
.feed-item-bare .feed-event-context-sub {
  font-size: 12.5px;
  margin: 0;
}

/* Attendees face strip + "N going" line, inside the event section.
   Small face thumbnails overlapping in a deck-of-cards pattern,
   the same way the events index handles attendee strips. */
.feed-event-context-attendees {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.feed-event-context-faces {
  display: flex;
  align-items: center;
}
.feed-event-context-face,
.feed-event-context-face-image {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--paper-2);
  margin-right: -8px;
}
.feed-event-context-face:last-child,
.feed-event-context-face-image:last-child { margin-right: 0; }
.feed-event-context-going {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* "Going too" CTA at the bottom of the event section. Modeled on
   the cta-btn style but rounder, smaller, inline. fills the row
   width so it reads as a card-level action, not a chip. */
.feed-event-context-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 14px 24px 16px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  border: 1px solid transparent;
}
.feed-event-context-cta-form { margin: 0; padding: 0; display: contents; }
.feed-event-context-cta-form button.feed-event-context-cta { cursor: pointer; }
.feed-event-context-cta-go {
  background: var(--ink);
  color: var(--paper);
}
.feed-event-context-cta-go:hover { background: var(--amber); color: var(--paper); }
.feed-event-context-cta-going {
  background: rgba(217, 119, 6, 0.08);
  color: var(--amber);
  border-color: rgba(217, 119, 6, 0.3);
  cursor: default;
}
.feed-event-context-cta-anon {
  background: var(--paper-2);
  color: var(--ink-soft);
  border-color: rgba(0, 0, 0, 0.12);
}
.feed-event-context-cta-anon:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* === Event-context card: header that sits above the founder_card
   on RSVP rows (and any other event-subject row that wants the
   richer top treatment). Shares the founder_card visual language:
   amber radial accent, paper gradient, amber-tinted border, serif
   title, small-caps eyebrow. === */
.feed-event-context {
  position: relative;
  display: block;
  background:
    radial-gradient(circle at 12% -8%, rgba(198, 74, 26, 0.10) 0%, transparent 42%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.30) 28%,
      rgba(255, 255, 255, 0) 70%
    ),
    var(--paper-2);
  border: 1px solid rgba(230, 212, 194, 0.7);
  border-radius: 18px;
  padding: 16px 20px 14px;
  text-decoration: none;
  color: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 1px 2px rgba(26, 24, 20, 0.05);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.feed-event-context-link:hover {
  border-color: rgba(198, 74, 26, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(26, 24, 20, 0.08);
}
.feed-event-context-arrow {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--ink-mute);
  line-height: 1;
}
.feed-event-context-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.feed-event-context-kind { color: var(--ink-soft); }
.feed-event-context-dot { opacity: 0.5; }
.feed-event-context-time {
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
}
.feed-event-context-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 4px;
}
.feed-event-context-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 28px 6px 0;
}
.feed-event-context-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
}
.feed-item-new-dot {
  position: absolute;
  top: 14px;
  left: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--paper);
}

.feed-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feed-item-avatar { flex-shrink: 0; }
.feed-item-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.feed-item-actor {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.feed-item-time {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
}
.feed-item-kind-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper-2);
  padding: 3px 8px;
  border-radius: 4px;
}
.feed-item-pin-tag {
  margin-left: auto;
  font-size: 13px;
}

.feed-item-body { display: flex; flex-direction: column; gap: 6px; }
.feed-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.feed-item-link:hover .feed-item-title { color: var(--amber); }

.feed-item-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  transition: color 120ms ease;
}
.feed-item-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin: 0;
}
.feed-item-prose {
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
  margin: 2px 0 0;
}

/* RSVP roll-up: face strip + names */
.feed-item-rollup {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 8px;
}
.feed-item-rsvper-face { border: 2px solid var(--paper); margin-right: -8px; }
.feed-item-rsvper-face:last-child { margin-right: 0; }
/* The "X joined" pill embedded in the sub line. Makes the recent-
   activity beat scan as distinct from the static when/where info
   that follows it. */
.feed-item-sub-emphasis {
  color: var(--ink);
  font-weight: 600;
}
/* Overflow chip when the event has more attendees than the strip
   shows. Sits at the end of the face row in the same pill style. */
.feed-item-rsvper-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  border: 2px solid var(--paper);
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: -8px;
}
.feed-item-rollup-text {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  margin-left: 8px;
}

/* Recap photo strip */
.feed-item-photo-strip {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.feed-item-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.feed-item-photo-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--paper-2);
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 14px;
  border-radius: 6px;
}

/* Curated post: title links to the post permalink. */
.feed-item-title-link {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin: 2px 0 10px;
}
.feed-item-title-link:hover { color: var(--amber); }

/* YouTube facade. Cover image is the click target; the youtube-
   facade Stimulus controller swaps it with an autoplaying iframe
   on tap. Same proportions as the city posts list. */
.feed-item-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
  margin: 8px 0 12px;
}
.feed-item-video-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}
.feed-item-video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feed-item-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, filter 0.15s ease;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
.feed-item-video-facade:hover .feed-item-video-play {
  transform: translate(-50%, -50%) scale(1.06);
}
.feed-item-video-facade:hover .feed-item-video-play svg path:first-child {
  fill: var(--accent);
  fill-opacity: 0.9;
}
.feed-item-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Non-video cover image, kept as a link wrapper so the click
   target still navigates to the post permalink. */
.feed-item-cover-link {
  display: block;
  text-decoration: none;
}

/* Curated post extras: cover, source domain, tags, attach line.
   Body uses .feed-item-prose set by simple_format; full body renders,
   no truncate. */
.feed-item-cover {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  margin: 8px 0 12px;
  display: block;
}
.feed-item-source-link {
  display: block;
  text-decoration: none;
}
.feed-item-source {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  margin: 4px 0 0;
}
.feed-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.feed-item-tag {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--amber);
  background: rgba(217, 119, 6, 0.07);
  padding: 2px 8px;
  border-radius: 999px;
}
.feed-item-attached {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
  margin: 4px 0 0;
}

/* Admin "↑ Move to top" affordance on curated_post cards. Quiet
   pill in the card footer; one-shot, no toggled state. Bumps the
   post's published_at to now so it leads the feed at that moment;
   anything newer then floats above it naturally. */
.feed-item-bump-form { display: inline-flex; margin: 10px 0 0; padding: 0; }
.feed-item-bump-btn {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.feed-item-bump-btn:hover {
  color: var(--ink);
  border-color: var(--ink-mute);
}

/* Founder / partner-brand rows */
.feed-item-founder-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.feed-item-founder-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.feed-item-verified-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(217, 119, 6, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Composer editorial controls (pin, schedule, attach-to) */
.feed-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px;
}
.feed-composer-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.feed-composer-tags-label,
.feed-composer-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.feed-composer-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
}
.feed-composer-file {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
}
.feed-composer-advanced {
  border-top: 1px dashed var(--border-soft);
  padding-top: 10px;
}
.feed-composer-advanced summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.feed-composer-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}
.feed-composer-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.feed-composer-hint {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-mute);
  margin: 0;
}
.feed-composer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Admin compose form. inline above the tag chip row. */
.startup-feed-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
  border-radius: 16px;
}
.startup-feed-compose-file {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.startup-feed-compose-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.startup-feed-compose-tags-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 4px;
}
.startup-feed-compose-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}
.startup-feed-compose-tag input { margin: 0; }
.startup-feed-compose-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tag chip filter row. Horizontal scroll on phones, wraps on
   wider screens. Active chip flips to ink/ink-on-paper. */
.startup-feed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 4px 0 4px;
}
.startup-feed-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.startup-feed-tag:hover {
  border-color: var(--ink-mute);
}
.startup-feed-tag.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.startup-feed-tag-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
}
.startup-feed-tag.is-active .startup-feed-tag-count {
  color: rgba(255, 255, 255, 0.7);
}

/* "Top N of M" summary card. Bulleted index of the latest posts.
   Each row tappable to the post's permalink. Visual cue at left:
   small arrow → so the row reads as a navigation list, not body
   copy. */
.startup-feed-summary {
  margin: 0 0 28px;
  padding: 18px 18px 14px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.startup-feed-summary-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
}
.startup-feed-summary-head strong { font-weight: 500; }
.startup-feed-summary-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.startup-feed-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.startup-feed-summary-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.startup-feed-summary-link:hover { color: var(--amber); }
.startup-feed-summary-arrow {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--amber);
  flex-shrink: 0;
}
.startup-feed-summary-jump {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.startup-feed-summary-jump:hover { border-color: var(--ink-mute); }

/* Full content stream below the summary. Numbered article-style
   sections. Each item: a small "01 AI" header (number + tag pills)
   above the rendered post. */
.startup-feed-stream {
  margin-top: 12px;
}
.startup-feed-stream-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.startup-feed-stream-item { margin: 0; }
.startup-feed-stream-num {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.startup-feed-stream-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--amber);
}
.startup-feed-stream-post {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Compact hero variant for thin cities. No cover image (since
   there are no events to draw one from), just a slim header row:
   flag + name + stats. Saves vertical space so the cross-network
   bands below get the prominence on an empty page. */
.city-hero-strip-compact {
  background: var(--paper-2);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px rgba(26, 24, 20, 0.04),
    0 4px 14px rgba(26, 24, 20, 0.04);
}
.city-hero-strip-compact .city-hero-strip-body {
  padding: 18px 18px 16px;
}
.city-hero-strip-compact-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}
.city-hero-strip-compact-head .city-hero-strip-flag {
  font-size: 22px;
  text-shadow: none;
}
.city-hero-strip-compact-head .city-hero-strip-name {
  margin: 0;
  font-size: 22px;
  color: var(--ink);
  text-shadow: none;
}

/* Editorial intro line below the hero on thin cities. Sits between
   the slim hero and the cross-network bands, frames the empty page
   as a warm "just getting started" instead of a directory miss. */
.city-thin-intro {
  margin: 16px 0 24px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(198, 74, 26, 0.05);
  border: 1px solid rgba(198, 74, 26, 0.18);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 64ch;
}

/* ============================================================
   /me bands. Three vertical bands top-to-bottom:
     1) Your city (city header + 3 tabs reusing .city-tab CSS)
     2) eChai across cities (tile grid + Show more details)
     3) Latest from the network (quiet feed band)
   ============================================================ */

.me-band {
  margin-top: 28px;
}
.me-band:first-of-type { margin-top: 16px; }

/* Section-level introduction line. Sits under the big band header
   and tells the user what they're looking at in one sentence. This
   is the wayfinding copy — quieter than .me-band-lead (which appears
   inside individual tabs / blocks). */
.me-band-intro {
  margin: 8px 0 16px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 64ch;
}

/* --- Band 1: Your city header ------------------------------- */
.me-city-band .me-band-eyebrow {
  margin-bottom: 6px;
}
.me-city-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6px;
  flex-wrap: wrap;
}
.me-city-header-flag {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.me-city-header-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex: 1 1 auto;
}
.me-city-header-cta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--amber);
  text-decoration: none;
  flex-shrink: 0;
}
.me-city-header-cta:hover { text-decoration: underline; }

.me-city-tabs { margin-top: 4px; }

/* --- Band 2 + 3 generic head -------------------------------- */
.me-band-head {
  margin: 0 0 14px;
}
.me-band-eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.me-band-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.me-band-lead {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Empty state inside a city tab. quiet block with a push link
   that jumps the page to #cities_band. */
.me-band-empty {
  padding: 18px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: center;
}
.me-band-empty p { margin: 0; }
.me-band-empty-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--amber);
  text-decoration: none;
}
.me-band-empty-link:hover { text-decoration: underline; }

.me-band-foot-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--amber);
  text-decoration: none;
}
.me-band-foot-link:hover { text-decoration: underline; }

/* --- Band 2: cities grid + Show more ------------------------ */
.me-cities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .me-cities-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.me-cities-grid-more { margin-top: 12px; }

.me-cities-more {
  margin-top: 14px;
}
.me-cities-more-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.me-cities-more-summary::-webkit-details-marker { display: none; }
.me-cities-more-summary:hover {
  border-color: var(--ink-mute);
  background: rgba(198, 74, 26, 0.04);
}
.me-cities-more-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  color: var(--ink-mute);
}
.me-cities-more[open] .me-cities-more-arrow { transform: rotate(180deg); }

/* "Just getting started" pill row below the active cities grid.
   Sparse cities live here so they're still one tap away without
   diluting the grid with thin tiles. */
.me-cities-growing {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.me-cities-growing-lead {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 64ch;
}

/* --- Band 3: feed ------------------------------------------- */
.me-feed-list { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   Event share cards (event_shares#show)

   Two output sizes:
     - Story:   1080×1920 (Instagram / WhatsApp story, 9:16)
     - Twitter: 1200×630  (Twitter / LinkedIn card, ~1.91:1)

   The card is rendered at its NATIVE pixel size so modern-screenshot
   snaps a crisp PNG. The .share-card-stage wraps it with CSS scale()
   so the preview fits the viewport without changing the underlying
   layout. The Stimulus controller sizes the stage box on connect.
   ═══════════════════════════════════════════════════════════════ */

.share-page-body { background: var(--paper-2); }

.share-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 80px;
  font-family: var(--font-sans);
  color: var(--ink);
}
.share-page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}
.share-page-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.share-page-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}
.share-page-download {
  appearance: none;
  border: 0;
  background: var(--amber);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.share-page-download:hover { filter: brightness(1.05); }
.share-page-download:active { transform: scale(0.98); }
.share-page-download[disabled] { opacity: 0.6; cursor: progress; }
.share-page-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.share-page-back { margin-top: 24px; }
.share-page-back-link {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
}
.share-page-back-link:hover { color: var(--ink); }

/* The stage wraps the absolutely-sized card and scales it down
   for on-screen preview via a JS-set --share-scale. The card's
   native dimensions are preserved so the screenshot is crisp. */
.share-card-stage {
  --share-scale: 0.5;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 4px 24px rgba(26, 24, 20, 0.08);
}
.share-card-stage .share-card {
  transform: scale(var(--share-scale));
  transform-origin: top left;
}

/* === Card shell. positioned absolutely so children can anchor
       to corners without layout math. The paper layer is the
       textured backdrop; everything else stacks above. ====== */
.share-card {
  position: relative;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper-2);
  overflow: hidden;
  isolation: isolate;
}
/* Single Instagram-feed post format: 1080×1350 (4:5 portrait). */
.share-card {
  width: 1080px;
  height: 1350px;
}
.share-card-paper {
  position: absolute;
  inset: 0;
  /* Premium gradient, restrained. Peach kiss up top, amber pop at
     the bottom-right, soft warm dust bottom-left, all over a CREAM
     base that stays cream — earlier version over-saturated into a
     flat yellow. The base now keeps its paper character. */
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255, 210, 175, 0.28), transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(198, 74, 26, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 35% at 0% 100%, rgba(230, 195, 160, 0.22), transparent 70%),
    linear-gradient(175deg, #fbf5e6 0%, #f5edd8 50%, #ede2c4 100%);
  z-index: 0;
}
/* Masthead block: logo + tagline stacked. lets the brand row carry
   more presence than a lonely 100px mark on a 1080-wide card. */
.share-card-masthead {
  position: absolute;
  z-index: 2;
  display: block;
}
.share-card-brand {
  display: block;
  object-fit: contain;
}
.share-card-tagline {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
/* Wrap row keeps the pill from stretching to its block parent's
   width. flex container with main-axis align-start makes the
   inline-block pill respect its content size. */
.share-card-context-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
}
.share-card-context {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(198, 74, 26, 0.10);
  border-radius: 12px;
  line-height: 1.0;
}
.share-card-place {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
}
/* Event-type chip overlay sitting on the cover image's top-left.
   Soft cream background with ink-soft text — reads as a subtle
   label rather than a hard dark tag (per user feedback). */
.share-card-event-tag {
  position: absolute;
  z-index: 2;
  display: inline-block;
  background: rgba(255, 252, 242, 0.88);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.10em;
  border-radius: 8px;
  line-height: 1.0;
  box-shadow: 0 4px 16px rgba(26, 24, 20, 0.10);
}
/* Calendar / pin icon wrappers on the date + venue rows. */
.share-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
}
.share-card-cover {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  background: var(--border);
  /* Soft outer shadow + a 1px translucent ink rule that reads as
     an inset frame on the cream paper. ties the photo back to the
     card instead of letting it float as a bare image. */
  box-shadow: 0 18px 48px rgba(26, 24, 20, 0.16),
              0 0 0 1px rgba(26, 24, 20, 0.06);
}
.share-card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bottom-fade overlay on the cover. Lets the event-type chip read
   on any photo (dark sky, bright turf, busy crowd) without changing
   chip styling per cover. */
.share-card-cover-veil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(26, 24, 20, 0.45));
  pointer-events: none;
}
.share-card-meta {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.share-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.share-card-when {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.share-card-person {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
}
.share-card-avatar {
  border-radius: 50%;
  overflow: hidden;
  background: var(--border);
  flex-shrink: 0;
  /* 3px amber outline + soft drop shadow: portrait-with-frame
     instead of a flat circle. */
  box-shadow: 0 0 0 3px var(--amber),
              0 8px 22px rgba(26, 24, 20, 0.18);
}
.share-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.share-card-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
}
.share-card-person-name {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.share-card-person-byline {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 6px;
}
.share-card-foot {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 16px;
  /* Subtle amber underglow ties the chip back to the gradient
     instead of sitting as a stark dark block on the cream paper. */
  box-shadow: 0 10px 28px rgba(26, 24, 20, 0.22),
              0 2px 0 rgba(198, 74, 26, 0.22);
}
.share-card-foot-arrow {
  color: var(--amber);
  font-weight: 700;
}

/* Social proof row: face strip + "N founders going" line. Fills
   the dead space below venue, replaces it with the post's real
   pull ("look at this, X founders are here"). */
.share-card-social {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
}
.share-card-faces {
  display: flex;
}
.share-card-face {
  border-radius: 50%;
  overflow: hidden;
  background: var(--border);
  /* Paper-colored ring matches the card backdrop. without it the
     stacked faces blur into each other. */
  box-shadow: 0 0 0 3px #f5edd8,
              0 4px 12px rgba(26, 24, 20, 0.14);
}
.share-card-face-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.share-card-social-text {
  font-family: var(--font-sans);
  color: var(--ink-soft);
}
.share-card-social-text strong {
  color: var(--ink);
  font-weight: 700;
}

/* ═══ Post (1080×1350) ═══
   Layout (top → bottom):
     60       masthead    logo 100 + mono tagline (left)
     60       person      avatar 120 (amber ring) + name + byline (right)
     220      cover       height 540 → 760
                          PUBLIC MEETUP chip overlays bottom-right
                          with a bottom-fade veil for contrast
     790      I'M HOSTING pill (inline-block, content-width)
     860      Title (78px, line-height 0.98, text-wrap balance)
     ~1020    Date row    icon + bigger ink type (hierarchy bump)
     ~1070    Venue row   icon + muted type
     1140     Social      face strip + "N founders going"
     1270     Footer      bigger ticket pill, amber arrow → */
.share-card .share-card-masthead { top: 60px; left: 70px; }
.share-card .share-card-brand    { height: 100px; width: auto; }
.share-card .share-card-tagline  { font-size: 14px; margin-top: 14px; }

.share-card .share-card-person   { top: 60px;  right: 70px; left: auto; bottom: auto; gap: 20px; }
.share-card .share-card-avatar   { width: 120px; height: 120px; }
.share-card .share-card-avatar-initial { font-size: 48px; }
.share-card .share-card-person-name    { font-size: 34px; }
.share-card .share-card-person-byline  { font-size: 22px; margin-top: 4px; }

.share-card .share-card-cover    { top: 220px; left: 70px; right: 70px; height: 540px; border-radius: 30px; }
/* Event-type chip on the bottom-right of the cover, sitting on the
   darkened veil. light cream chip reads strongly against the fade. */
.share-card .share-card-event-tag{ top: auto; left: auto; right: 26px; bottom: 24px;
                                   font-size: 20px; padding: 10px 16px; }

.share-card .share-card-meta     { top: 790px; left: 70px; right: 70px; }
.share-card .share-card-context  { font-size: 26px; padding: 12px 20px; }
.share-card .share-card-title    { font-size: 78px; line-height: 0.98; text-wrap: balance; margin: 0; }
.share-card .share-card-when     { font-size: 34px; margin-top: 32px; gap: 16px; }
.share-card .share-card-place    { font-size: 28px; margin-top: 10px; gap: 16px; color: var(--ink-soft); }

.share-card .share-card-social   { bottom: 200px; left: 70px; right: 70px; gap: 24px; }
.share-card .share-card-face     { width: 70px; height: 70px; margin-right: -18px; }
.share-card .share-card-social-text { font-size: 26px; }

.share-card .share-card-foot     { bottom: 60px; left: 70px; right: auto; top: auto;
                                   padding: 22px 36px; font-size: 28px; }

/* Per-card "Share card" link in the event participants list. Quiet
   affordance under the founder card — same restraint as the meta
   strip on founder cards, but with an arrow-up icon to signal export. */
.event-attendee-share-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--border-soft);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.event-attendee-share-link:hover {
  color: var(--ink);
  border-color: var(--ink-fade);
  background: var(--paper);
}