/* GENERATED from frontend/foundations/richtext.css — do not edit this copy. */
/*
 * ywe-richtext.css — how an operator-authored description looks once
 * ywe-richtext.js has rebuilt it.
 *
 * Two variants of one thing. `.ywe-rt` is the register page: a description
 * somebody is reading to decide whether to buy. `.ywe-rt-compact` is the
 * browse card's expandable panel, where the same markup has to survive inside
 * a few hundred pixels — so the scale comes down and the vertical rhythm
 * tightens, but nothing is hidden and no element renders differently in kind.
 *
 * Everything is scoped under .ywe-rt. The description comes from a
 * spreadsheet, so its markup must never be able to restyle the page around it.
 */

.ywe-rt {
  color: var(--ywe-color-ink, #1a1712);
  font-family: var(--ywe-font-ui, 'Poppins', system-ui, sans-serif);
  font-size: var(--ywe-text-md, 0.9375rem);
  line-height: var(--ywe-leading-body, 1.6);
  /* A long word or a pasted URL must not widen the card it sits in. */
  overflow-wrap: break-word;
}

/* Paragraphs carry the rhythm; the first and last never fight the container's
 * own padding. A <br> inside one is a shift-return and is left alone. */
.ywe-rt > :first-child { margin-top: 0; }
.ywe-rt > :last-child { margin-bottom: 0; }

.ywe-rt p {
  margin: 0 0 var(--ywe-space-4, 1rem);
}

/* Headings are the display face, as everywhere else on the site. */
.ywe-rt h2,
.ywe-rt h3,
.ywe-rt h4 {
  font-family: var(--ywe-font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 600;
  line-height: var(--ywe-leading-tight, 1.15);
  color: var(--ywe-color-ink, #1a1712);
  margin: var(--ywe-space-6, 1.5rem) 0 var(--ywe-space-3, 0.75rem);
}

.ywe-rt h2 { font-size: var(--ywe-text-xl, 1.375rem); }
.ywe-rt h3 { font-size: var(--ywe-text-lg, 1.0625rem); }
.ywe-rt h4 {
  font-size: var(--ywe-text-md, 0.9375rem);
  font-family: var(--ywe-font-ui, 'Poppins', system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ywe-rt strong,
.ywe-rt b { font-weight: 600; }

.ywe-rt em,
.ywe-rt i { font-style: italic; }

.ywe-rt u { text-underline-offset: 0.15em; }

/* A quote is set in the display face and marked with a rule rather than
 * quotation marks, which read as punctuation the author did not write. */
.ywe-rt blockquote {
  margin: var(--ywe-space-5, 1.25rem) 0;
  padding: var(--ywe-space-1, 0.25rem) 0 var(--ywe-space-1, 0.25rem) var(--ywe-space-5, 1.25rem);
  border-left: 2px solid var(--ywe-color-border, #e8e2da);
  font-family: var(--ywe-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: var(--ywe-text-lg, 1.0625rem);
  font-style: italic;
  color: var(--ywe-color-ink-muted, #6b6258);
}

.ywe-rt blockquote p:last-child { margin-bottom: 0; }

.ywe-rt ul,
.ywe-rt ol {
  margin: 0 0 var(--ywe-space-4, 1rem);
  padding-left: var(--ywe-space-5, 1.25rem);
}

.ywe-rt li { margin-bottom: var(--ywe-space-2, 0.5rem); }
.ywe-rt li:last-child { margin-bottom: 0; }

.ywe-rt hr {
  border: 0;
  border-top: 1px solid var(--ywe-color-border, #e8e2da);
  margin: var(--ywe-space-6, 1.5rem) 0;
}

.ywe-rt a {
  color: var(--ywe-color-focus, #1a6b6b);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ywe-rt a:hover { text-decoration-thickness: 2px; }

/*
 * Images. The radius is deliberately small — enough to sit inside the card's
 * own rounding rather than compete with it — and `corner-shape` upgrades it to
 * a superellipse where the browser supports one, exactly as .event-squircle
 * does for the components around it. Browsers without it keep the plain
 * radius, which is the whole point of doing it this way.
 */
.ywe-rt img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--ywe-space-5, 1.25rem) 0;
  border-radius: var(--ywe-radius-sm, 0.5rem);
  corner-shape: squircle;
}

/* The editor's CTA block. A link that reads as a button, so it has to look
 * like one on the page it lands on too. */
.ywe-rt .cevt-cta-btn {
  display: inline-block;
  padding: var(--ywe-space-3, 0.75rem) var(--ywe-space-6, 1.5rem);
  background: var(--ywe-color-ink, #1a1712);
  color: var(--ywe-color-parchment, #fdf9f4);
  font-size: var(--ywe-text-sm, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--ywe-radius-pill, 999px);
  corner-shape: squircle;
  transition: opacity var(--dur-quick, 200ms) var(--ease-enter, ease);
}

.ywe-rt .cevt-cta-btn:hover { opacity: 0.86; text-decoration: none; }

/*
 * ── compact ───────────────────────────────────────────────────────────────
 * The browse card's expandable panel. Same elements, less room.
 */
.ywe-rt-compact {
  font-size: var(--ywe-text-sm, 0.8125rem);
  line-height: 1.55;
  color: var(--ywe-color-ink-muted, #6b6258);
}

.ywe-rt-compact p,
.ywe-rt-compact ul,
.ywe-rt-compact ol { margin-bottom: var(--ywe-space-3, 0.75rem); }

.ywe-rt-compact h2,
.ywe-rt-compact h3,
.ywe-rt-compact h4 {
  margin: var(--ywe-space-4, 1rem) 0 var(--ywe-space-2, 0.5rem);
  color: var(--ywe-color-ink, #1a1712);
}

.ywe-rt-compact h2 { font-size: var(--ywe-text-lg, 1.0625rem); }
.ywe-rt-compact h3 { font-size: var(--ywe-text-md, 0.9375rem); }
.ywe-rt-compact h4 { font-size: var(--ywe-text-sm, 0.8125rem); }

.ywe-rt-compact blockquote {
  margin: var(--ywe-space-3, 0.75rem) 0;
  padding-left: var(--ywe-space-4, 1rem);
  font-size: var(--ywe-text-md, 0.9375rem);
}

.ywe-rt-compact img { margin: var(--ywe-space-3, 0.75rem) 0; }

.ywe-rt-compact hr { margin: var(--ywe-space-4, 1rem) 0; }

.ywe-rt-compact .cevt-cta-btn {
  padding: var(--ywe-space-2, 0.5rem) var(--ywe-space-4, 1rem);
  font-size: var(--ywe-text-xs, 0.6875rem);
}

@media (prefers-reduced-motion: reduce) {
  .ywe-rt .cevt-cta-btn { transition: none; }
}