/* Long-form sample reader layered over the core Spark page styles. */
.sample-copy {
  max-width: 760px;
  padding: clamp(26px, 5vw, 56px);
  border-color: rgba(255, 255, 255, .3);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)), rgba(2, 8, 12, .46);
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 22px 56px rgba(0, 0, 0, .2);
}

.sample-folio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 42px;
  color: rgba(240, 197, 121, .78);
  font: 9px var(--sans);
  letter-spacing: .19em;
  text-align: center;
}

.sample-folio span { flex: 1; }
.sample-folio span:first-child { text-align: right; }
.sample-folio span:last-child { text-align: left; }
.sample-folio b { color: #f3d294; font: 12px var(--serif); }
.sample-copy p { max-width: 650px; margin: 0 auto 1.35em; color: #f0ece4; font: 18px/1.85 var(--serif); }
.sample-copy em { color: #f3d39b; }
.sample-copy .dropcap:first-letter { font-size: 76px; }
.sample-copy .sample-beat { margin-block: 1.9em; color: #f1cb87; font-style: italic; letter-spacing: .08em; text-align: center; }
.sample-copy blockquote { margin: 38px 0 18px; padding: 28px clamp(8px, 4vw, 36px); font-size: 24px; line-height: 1.55; }

.sample-end {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 42px;
  color: rgba(240, 197, 121, .76);
  font: 9px var(--sans);
  letter-spacing: .2em;
}

.sample-end i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(240, 197, 121, .45)); }
.sample-end i:last-child { background: linear-gradient(90deg, rgba(240, 197, 121, .45), transparent); }

@media (max-width: 720px) {
  .sample-copy { padding: 25px 21px; }
  .sample-copy p { font-size: 16px; line-height: 1.78; }
  .sample-folio { gap: 8px; margin-bottom: 30px; font-size: 7px; letter-spacing: .13em; }
  .sample-copy blockquote { font-size: 20px; }
}