.messe-page {
  --edition-bar-h: 2.2rem;
}

.messe-page .site-main {
  width: min(100% - 2 * var(--space-5), calc(var(--measure) + 6rem));
  padding-top: var(--space-5);
}

.active-edition-bar .edition-name-btn {
  width: auto;
  min-width: 0;
  padding: 0 0.8rem;
}

.messe-panel {
  min-width: 0;
}

.messe-hero {
  margin-bottom: var(--space-6);
  text-align: center;
}

.messe-kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--space-2);
}

.messe-date {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-mute);
  margin: 0;
}

.messe-liturgical {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-soft);
  margin: var(--space-3) 0 0;
}

.messe-liturgical[hidden] {
  display: none;
}

.readings {
  display: grid;
  gap: var(--space-4);
  overflow: visible;
  justify-items: start;
  overflow-anchor: none;
}

.readings * {
  overflow-anchor: none;
}

.reading-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: var(--space-5);
  overflow: visible;
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.reading-card[data-expandable="true"] {
  cursor: pointer;
}

.reading-card[data-expandable="true"]:hover {
  border-color: var(--border-strong);
}

.reading-card.is-dilated {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  cursor: pointer;
}

.reading-type {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.reading-ref {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-mute);
  margin-bottom: var(--space-3);
}

.reading-excerpt {
  color: var(--text-soft);
  font-size: var(--text-base);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

a.reading-ref {
  display: inline-block;
  color: var(--text-mute);
  text-decoration: none;
}

a.reading-ref:hover {
  color: var(--text);
}

/* ---- In-place chapter mask ---- */
.reading-mask-host {
  margin-top: var(--space-1);
  overflow-anchor: none;
}

.chapter-mask {
  /* overflow edge = the mask. Text stays glued to the excerpt. */
  overflow: hidden;
  overflow-anchor: none;
}

.chapter-mask .mask-label {
  margin-bottom: var(--space-3);
}

.mask-zone {
  max-height: 0;
  overflow: hidden;
  overflow-anchor: none;
  transition: max-height var(--mask-dur) var(--mask-ease);
}

.mask-zone.is-frozen {
  transition: none;
}

.chapter-mask.is-expanded .mask-zone,
.chapter-mask[data-expanded="true"] .mask-zone {
  max-height: var(--mask-height, 2000px);
}

/* Full natural height; parent overflow clips. Do not shrink (flex). */
.mask-zone-inner {
  flex: 0 0 auto;
  min-height: 0;
}

/* BEFORE: content stuck to the excerpt. Growing max-height raises the
   overflow edge (the mask) and uncovers verses already in place. */
.mask-before {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mask-excerpt {
  /* always open */
}

.chapter-mask .verse {
  margin-bottom: 0.55em;
}

.chapter-mask .verse:last-child {
  margin-bottom: 0;
}

.mask-fold {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.85em;
  margin: 0.15em 0 0.35em;
  color: var(--text-faint);
  letter-spacing: 0.42em;
  font-size: 0.72rem;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  transition: height var(--mask-dur) var(--mask-ease),
    margin var(--mask-dur) var(--mask-ease),
    opacity var(--mask-dur) var(--mask-ease);
}

.chapter-mask.is-expanded .mask-fold,
.chapter-mask[data-expanded="true"] .mask-fold {
  height: 0;
  margin: 0;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mask-zone {
    transition: none;
  }
}