/* Cream paper cards from the app's own card kit, laid on the Isha night band. */
/* No-JS fallback: nothing is driving the sky vars, so this band carries the
   night stop's own palette. Without it the light default ink would land on
   the dark band. html.reduced is excluded because refresh.css already gives
   it both a background and the same palette. */
html:not(.gsap):not(.reduced) .band--reviews {
  background: #342416;
  --ink: #F6E7CE;
  --muted: rgba(246, 231, 206, 0.86);
  --accent: #F2BB67;
}
.review-chapter {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(88px, 12vh, 140px) 44px;
  color: var(--ink);
}
.review-chapter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 42px;
}
.review-chapter__title {
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.45rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
}
.review-score {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-right: 8px;
}
.review-score__number {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.7rem, 6vw, 5.1rem);
  line-height: 1;
  color: var(--accent);
}
.review-score__label { font-size: 0.86rem; color: var(--muted); white-space: nowrap; }
.review-rail {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  align-items: stretch;
  grid-auto-columns: calc((100% - 44px) / 3);
  gap: 22px;
  margin: 0;
  padding: 6px 0 26px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) transparent;
}
.review-rail::-webkit-scrollbar { height: 5px; }
.review-rail::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 5px; }
.review-rail::-webkit-scrollbar-track { background: transparent; }
.review-rail:focus-visible { outline-color: var(--accent); outline-offset: 6px; }
.review-rail__item { min-width: 0; scroll-snap-align: start; }
.review-note {
  /* The card is a piece of the app's own cream paper, so it holds its own
     palette instead of inheriting the night band's cream-on-brown vars. */
  --paper: #F6E7CE;
  --paper-ink: #4E2C16;
  --paper-accent: #C56401;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 26px 26px 21px;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 14px 26px -16px rgba(15, 8, 3, 0.62), 0 2px 5px -2px rgba(15, 8, 3, 0.34);
  color: var(--paper-ink);
}
.review-note__stars { display: flex; gap: 3px; margin-bottom: 15px; color: var(--paper-accent); }
.review-note__stars svg { width: 15px; height: 15px; fill: currentColor; }
.review-note blockquote {
  /* Short quotes sit optically centred in the space the tallest card sets. */
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
}
.review-note blockquote p {
  flex: 1;
  min-width: 0;
  margin: 0;
  /* The opening mark hangs into the card padding so the words stay flush. */
  text-indent: -0.46em;
  font-family: var(--sans);
  font-size: clamp(1.05rem, 0.95vw, 1.15rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--paper-ink);
  text-wrap: pretty;
}
/* Real curly marks in the body face, sized and spaced on purpose and set in
   the accent. The display face renders them as heavy blocks, so it is not used
   here. The opening mark hangs into the card padding via the text-indent. */
.review-note blockquote p::before,
.review-note blockquote p::after {
  font-size: 1.14em;
  font-weight: 500;
  color: var(--paper-accent);
}
.review-note blockquote p::before { content: "\201C"; margin-right: 0.03em; }
.review-note blockquote p::after { content: "\201D"; margin-left: 0.07em; }
.review-chapter__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 21px;
}
.review-source {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.91rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.review-source:hover { color: var(--ink); }
.review-controls { display: flex; align-items: center; gap: 10px; }
.review-controls[hidden] { display: none; }
.review-controls button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.review-controls button svg { width: 19px; height: 19px; }
.review-controls button:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.review-controls button:disabled { opacity: 0.3; cursor: default; }
.review-controls button:focus-visible { outline-color: var(--accent); outline-offset: 4px; }

@media (max-width: 1023px) {
  .review-rail { grid-auto-columns: calc((100% - 22px) / 2); }
  .review-note { padding: 24px 24px 19px; }
}
@media (max-width: 700px) {
  .review-chapter { padding: 92px 24px 78px; }
  .review-chapter__head { flex-direction: column; align-items: flex-start; gap: 25px; margin-bottom: 30px; }
  .review-chapter__title { font-size: clamp(1.9rem, 7.7vw, 2.65rem); max-width: 19ch; }
  .review-score { flex-direction: row; align-items: center; gap: 15px; }
  .review-score__number { font-size: 3.15rem; }
  .review-score__label { max-width: 8ch; white-space: normal; line-height: 1.45; }
  .review-rail { grid-auto-columns: calc((100% - 16px) / 1.15); gap: 16px; padding: 5px 0 22px; }
  .review-note { padding: 23px 23px 18px; border-radius: 20px; }
  .review-note blockquote p { font-size: 1.08rem; }
  .review-chapter__foot { gap: 12px; margin-top: 16px; }
  .review-source { font-size: 0.85rem; }
  .review-controls { gap: 8px; }
}
@media (max-width: 370px) {
  .review-chapter { padding-inline: 20px; }
  .review-note { padding: 21px 21px 17px; }
  .review-note blockquote p { font-size: 1.04rem; }
}
@media (prefers-reduced-motion: reduce) {
  .review-rail { scroll-behavior: auto; }
}

/* Card internals for the verbatim review markup: the bubble holds stars and
   quote, the caption row sits on a hairline at the bottom with the reviewer's
   initial in a brown coin. */
.review-note__bubble { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.review-note figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--paper-ink) 14%, transparent);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--paper-ink);
}
.review-note__initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper-ink);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 700px) {
  .review-note figcaption { margin-top: 16px; padding-top: 12px; font-size: 0.88rem; }
}