/* ============================================================
   CHAPTER IV - TRANSFORMATION. Golden hour into night.
   The emotional peak: slowest pacing, deepest palette.
   ============================================================ */

.chapter--transformation {
  /* dusk theme variables come from [data-theme="dusk"] in tokens.css */
  padding-bottom: var(--beat);
}

.chapter--transformation .layer--type {
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: clamp(3rem, 10vh, 6rem);
  color: var(--ivory);
}
.chapter--transformation .layer--type .t-display {
  color: var(--ivory);
  max-width: 11em;
  text-shadow: 0 3px 50px rgba(11, 21, 32, 0.78);
}
.chapter--transformation .layer--type .t-label,
.chapter--transformation .layer--type .t-whisper {
  color: rgba(243, 239, 230, 0.88);
}
.chapter--transformation .layer--type .t-label {
  margin-bottom: 1rem;
}
.chapter--transformation .layer--type .t-whisper {
  margin-top: 1.25rem;
}
.chapter--transformation .layer--media::after {
  background:
    linear-gradient(to bottom, rgba(11, 21, 32, 0.15), transparent 40%,
      rgba(11, 21, 32, 0.62)),
    linear-gradient(160deg, rgba(20, 33, 46, 0.2), rgba(232, 176, 125, 0.14) 60%, rgba(11, 21, 32, 0.3));
  mix-blend-mode: normal;
}

/* Dinner plate: candlelight frame + the evening's card */
.plate--dinner {
  padding-top: calc(var(--beat) * 1.2);
  align-items: center;
  row-gap: 0;
}
.plate--dinner .fig--dinner {
  grid-column: 1 / 9;
  grid-row: 1;
  aspect-ratio: 3 / 2;
}

/* The evening card - a physical object laid over the scene */
.evening-card {
  grid-column: 8 / 13;
  grid-row: 1;
  z-index: 2;
  position: relative;
  background: var(--ivory);
  color: var(--navy);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: 42%;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.6) inset;
}
.evening-card::before {
  /* the sheet beneath - stacked-paper weight */
  content: "";
  position: absolute;
  inset: 0;
  transform: rotate(1.6deg) translate(6px, 8px);
  background: var(--mist);
  z-index: -1;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
.evening-card .t-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--driftwood);
  margin-bottom: 1.5rem;
}
.evening-card ol {
  list-style: none;
  display: grid;
  gap: 1.125rem;
}
.evening-card li {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1.125rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.evening-card li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.evening-card li span {
  font-size: 0.7em;
  color: var(--driftwood);
}

/* Fire plate */
.plate--fire {
  padding-top: calc(var(--beat) * 1.3);
  align-items: center;
}
.plate--fire .fig--fire {
  grid-column: 1 / 8;
  aspect-ratio: 3 / 2;
}
.plate--fire .fig--fire img {
  filter: saturate(0.92) contrast(1.02); /* fire keeps its heat */
}
.plate--fire .plate__copy {
  grid-column: 9 / 13;
  display: grid;
  gap: 2rem;
}
.chapter--transformation .whisper-list li {
  color: var(--champagne);
}
.plate--fire .whisper-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
}
.plate--fire .whisper-list li {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(243, 239, 230, 0.2);
  font-size: clamp(1.15rem, 1.55vw, 1.35rem);
}
.plate--fire .whisper-list li + li::before {
  content: none;
}
.chapter--transformation .thread {
  color: var(--ivory);
}
.chapter--transformation .thread::after {
  background: var(--gold-hour);
}

@media (max-width: 760px) {
  .plate--dinner .fig--dinner { grid-column: 1 / -1; }
  .evening-card { grid-column: 2 / -1; margin-top: 114%; }
  .plate--fire .fig--fire { grid-column: 1 / -1; }
  .plate--fire .plate__copy { grid-column: 1 / -1; }
  .plate--fire .whisper-list { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .evening-card ol {
    gap: 0.3125rem;
  }
  .evening-card li {
    padding-bottom: 0.3125rem;
  }
}