/* Charlotte v01. Reuses the approved book font and UI, leaving duck CSS intact. */
.page-charlotte .charlotte-title {
  margin: 10px 0 0;
  color: var(--story-ink);
  font: 400 clamp(2.7rem, 12vw, 4.2rem)/.98 var(--serif);
  letter-spacing: -.03em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.charlotte-title span { display: block; }
.charlotte-opening { padding: 6px 0 8px; }
.charlotte-hero { margin: 0 calc(-1 * var(--gutter)) 7px; }
.charlotte-story .story-art img { max-width: 600px; }
.charlotte-story .story-copy { margin-top: 13px; }
.charlotte-story .charlotte-lead { margin-top: 0; font-size: calc(var(--body-size) + 2px); line-height: 1.24; }
.charlotte-history { padding: 28px 0 15px; }
.charlotte-history .story-heading { font-size: clamp(2rem, 8.3vw, 3rem); }
.charlotte-salon { position: relative; isolation: isolate; padding-bottom: 68%; aspect-ratio: 1122 / 1402; overflow: clip; }
.charlotte-salon-art { position: absolute; inset: auto 0 0; z-index: -1; }
.charlotte-salon-art img {
  mask-image: linear-gradient(transparent, #000 12%, #000 96%, transparent);
}
.charlotte-history-copy { position: relative; padding-top: 6px; }
.charlotte-history-copy .story-copy {
  max-width: 75%;
  padding: 0 5px 8px 0;
  background: linear-gradient(90deg, #002438 70%, #002438e6 88%, #00243800);
}
.charlotte-history > .story-ornament { margin-top: 0; color: var(--story-gold-light); }
.charlotte-flavour { padding-top: 14px; }
.charlotte-flavor-art { margin-inline: calc(-1 * var(--gutter)); }
.charlotte-story .story-heading { margin-top: 8px; font-size: clamp(2rem, 8.3vw, 3rem); }
.charlotte-story .story-ornament { margin-top: 22px; width: 65%; height: 20px; }
.charlotte-shop-art { margin: 8px calc(-1 * var(--gutter)) 0; }
.charlotte-finish .story-next { margin-top: 24px; }
.charlotte-story .story-next-art img { max-width: 180px; }
.charlotte-story .story-next-art { align-self: center; }
.page-charlotte .site-footer {
  max-width: var(--book-width);
  margin-top: 9px;
  background: var(--story-blue);
  color: var(--story-gold-light);
  padding-top: 28px;
}
.page-charlotte .site-footer::before { top: 12px; }
.page-charlotte .site-footer > p { display: none; }
@media (max-width: 359px) {
  .charlotte-history-copy .story-copy { max-width: 86%; }
}
@media (min-width: 600px) {
  .charlotte-opening { padding-top: 10px; }
  .charlotte-history { padding-top: 36px; }
}
/* Enlarged text gets the full column; art moves below the text naturally. */
.page-charlotte.large-type .charlotte-history-copy .story-copy { max-width: 100%; }
@media print {
  .charlotte-salon { padding-bottom: 0; }
  .charlotte-salon-art { position: relative; z-index: auto; }
}