/* Faithful Chapel — the room you enter each day */

/* --------------------------------------------------------------------------
   Liturgical color accents
   -------------------------------------------------------------------------- */
.chapel[data-color="red"] {
  --color-liturgical: #8b2530;
  --color-liturgical-muted: rgba(139, 37, 48, 0.12);
  --color-liturgical-subtle: rgba(139, 37, 48, 0.06);
}

.chapel[data-color="green"] {
  --color-liturgical: #2d5a3d;
  --color-liturgical-muted: rgba(45, 90, 61, 0.12);
  --color-liturgical-subtle: rgba(45, 90, 61, 0.06);
}

.chapel[data-color="violet"] {
  --color-liturgical: #5c3a6e;
  --color-liturgical-muted: rgba(92, 58, 110, 0.12);
  --color-liturgical-subtle: rgba(92, 58, 110, 0.06);
}

.chapel[data-color="white"] {
  --color-liturgical: var(--color-stone-muted);
  --color-liturgical-muted: rgba(168, 155, 140, 0.12);
  --color-liturgical-subtle: rgba(168, 155, 140, 0.06);
}

/* --------------------------------------------------------------------------
   Chapel header
   -------------------------------------------------------------------------- */
.chapel-header {
  padding-block: clamp(6rem, 18vw, 12rem) var(--space-xl);
  text-align: center;
}

.chapel-header__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.chapel-header__date {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.chapel-header__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-tight);
  color: var(--color-charcoal);
  letter-spacing: 0.01em;
}

.chapel-header__rule {
  display: block;
  width: 3rem;
  height: 2px;
  margin: var(--space-md) auto 0;
  background-color: var(--color-liturgical);
}

/* --------------------------------------------------------------------------
   Threshold — the inside-cover epigraph
   -------------------------------------------------------------------------- */
.chapel-threshold {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block: var(--space-xl) var(--space-lg);
  text-align: center;
}

.chapel-threshold__text {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-style: italic;
  line-height: 1.7;
  color: var(--color-stone-muted);
  max-width: 38ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Cover Art — the magazine cover
   -------------------------------------------------------------------------- */
.chapel-art {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block: var(--space-lg) var(--space-section);
}

.chapel-art__image {
  width: 100%;
  height: auto;
}

.chapel-art__attribution {
  margin-top: var(--space-sm);
  font-size: var(--text-small);
  color: var(--color-stone-muted);
  text-align: center;
  letter-spacing: var(--letter-spacing-wide);
}

/* --------------------------------------------------------------------------
   Movements (Book sections)
   -------------------------------------------------------------------------- */
.movement {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block: clamp(4rem, 10vw, 8rem);
}

.movement__header {
  margin-bottom: var(--space-xl);
}

.movement__name {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-tight);
  color: var(--color-charcoal);
}

.movement__ref {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  letter-spacing: var(--letter-spacing-wide);
}

/* --------------------------------------------------------------------------
   Readings
   -------------------------------------------------------------------------- */
.reading {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.reading:last-child {
  margin-bottom: 0;
}

.reading__label {
  font-size: clamp(0.6875rem, 0.15vw + 0.65rem, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-stone-muted);
  margin-bottom: 0.25rem;
}

.reading__ref {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.5vw + 1rem, 1.65rem);
  font-weight: var(--font-weight-heading);
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
}

.reading__text {
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.reading__text p {
  margin-bottom: var(--space-sm);
}

.reading__text p:last-child {
  margin-bottom: 0;
}

.reading__text--poetry {
  white-space: pre-line;
}

.reading__response {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  font-style: italic;
  color: var(--color-liturgical);
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-liturgical);
}

/* --------------------------------------------------------------------------
   Passion — dramatic reading
   -------------------------------------------------------------------------- */
.passion__controls {
  margin-top: var(--space-sm);
}

.passion__toggle {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-separator);
  padding: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.passion__toggle:hover {
  color: var(--color-text);
}

.passion__toggle--active {
  color: var(--color-liturgical);
  text-decoration-color: var(--color-liturgical-muted);
}

.passion__scene {
  margin-bottom: var(--space-xl);
}

.passion__scene:last-child {
  margin-bottom: 0;
}

.passion__scene-title {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
  font-weight: 400;
  color: var(--color-stone-muted);
  margin-bottom: var(--space-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.passion__scene-text {
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.passion__scene-text p {
  margin-bottom: var(--space-sm);
}

.passion__scene-text p:last-child {
  margin-bottom: 0;
}

/* The rubric — breathing space */
.passion__rubric {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-style: italic;
  color: var(--color-liturgical);
  letter-spacing: 0.02em;
}

/* Shorter form: scenes outside the range get hidden */
.passion__scene--shorter-only {
  display: none;
}

.passion__scenes--shorter .passion__scene--full-only {
  display: none;
}

.passion__scenes--shorter .passion__scene--shorter-only {
  display: block;
}

/* --------------------------------------------------------------------------
   The Lamp
   -------------------------------------------------------------------------- */
.chapel-lamp {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block: var(--space-section);
}

.lamp__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (min-width: 40rem) {
  .lamp__header {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
}

.lamp__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-tight);
  color: var(--color-charcoal);
}

.lamp__depth-control {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.lamp__depth-sep {
  color: var(--color-stone);
  font-size: var(--text-small);
  user-select: none;
}

.lamp__depth-btn {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
  font-weight: 400;
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

.lamp__depth-btn:hover {
  color: var(--color-charcoal);
}

.lamp__depth-btn--active {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-decoration-color: var(--color-liturgical);
  text-underline-offset: 3px;
}

.lamp__exhibits {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Exhibits
   -------------------------------------------------------------------------- */
.exhibit {
  padding-top: var(--space-lg);
  border-top: var(--separator-width) solid var(--color-separator);
}

.exhibit:first-child {
  border-top: none;
  padding-top: 0;
}

.exhibit__name {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-heading);
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
  letter-spacing: 0.01em;
}

.exhibit__content {
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.exhibit__content p {
  margin-bottom: var(--space-sm);
}

.exhibit__content p:last-child {
  margin-bottom: 0;
}

.exhibit__content blockquote {
  margin: var(--space-md) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-liturgical-muted);
  font-style: italic;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   The Table (Journal)
   -------------------------------------------------------------------------- */
.chapel-table {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block: var(--space-section);
}

.table__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-tight);
  color: var(--color-charcoal);
  margin-bottom: var(--space-xs);
}

.table__intro {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.table__prompts {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.table__prompt-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.table__prompt-label {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-style: italic;
  color: var(--color-charcoal);
}

.table__prompt-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background-color: transparent;
  border: var(--separator-width) solid var(--color-separator);
  border-radius: 0;
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  min-height: 5rem;
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.table__prompt-input::placeholder {
  color: var(--color-stone-muted);
  opacity: 1;
}

.table__prompt-input:focus {
  outline: none;
  border-color: var(--color-border);
  background-color: var(--color-parchment-deep);
}

.table__journal {
  margin-bottom: var(--space-md);
}

.table__journal .form__textarea {
  border-color: var(--color-separator);
}

.table__journal .form__textarea:focus {
  border-color: var(--color-border);
}

.table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.table__status {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   The Window
   -------------------------------------------------------------------------- */
.chapel-window {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block: var(--space-section);
}

.window__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-tight);
  color: var(--color-charcoal);
  margin-bottom: var(--space-lg);
}

.window__headline {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-heading);
  color: var(--color-charcoal);
  margin-bottom: var(--space-sm);
}

.window__body {
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.window__source {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .passion__toggle,
  .lamp__depth-btn,
  .table__prompt-input,
  .table__journal .form__textarea {
    transition: none;
  }
}