/* Shared reading sizes. Narrow layouts reflow before text gets smaller. */
:root {
  --text-body: 1rem;
  --text-ui: .9375rem;
  --text-small: .875rem;
  --text-caption: .8125rem;
  --text-meta: .75rem;
}

body { font-size: var(--text-body); line-height: 1.65; }
.eyebrow, .diary-heading .eyebrow { font-size: var(--text-caption); line-height: 1.5; padding: 6px 15px; }
.wordmark small { font-size: var(--text-meta); letter-spacing: .12em; }
.site-header nav { font-size: var(--text-body); }
.button, .button-small, .nav-book { font-size: var(--text-ui); line-height: 1.4; }
.button { min-height: 54px; }
.button-small { min-height: 48px; }
.text-link { font-size: var(--text-ui); line-height: 1.5; min-height: 44px; }
.hero-actions .button { font-size: var(--text-body); }
.hero-actions .text-link { font-size: var(--text-ui); }

/* Compensate for perspective so the centre portraits still have readable names. */
.hero-card .glass-label > span {
  font-size: clamp(26px, calc(var(--ring-card-width, 260px) * .115), 38px);
  line-height: 1.15;
}
.rating-link { font-size: var(--text-body); }
.rating-link .stars { font-size: 20px; }
.rating-reviews { font-size: var(--text-small); }

.story-copy .story-button { font-size: var(--text-ui); line-height: 1.4; max-width: 100%; white-space: normal; }
.services .section-heading > p, .colour-story-copy > p:not(.eyebrow), .little-feature p,
.diary-heading > p:last-child, .faq-heading > p:not(.eyebrow) {
  font-size: var(--text-body);
  line-height: 1.75;
}
.services .section-heading > p { max-width: 380px; }
.image-tag { font-size: var(--text-caption); line-height: 1.4; }
.service-body p, .service-body li { font-size: var(--text-body); line-height: 1.65; }
.service-body .text-link, .colour-story .text-link { font-size: var(--text-ui); line-height: 1.5; min-height: 44px; }
.service-body li { margin-block: 7px; }
.menu-note { font-size: var(--text-ui); line-height: 1.75; }
.little-feature h3 { font-size: 30px; line-height: 1.12; }
.review-heading > .stars { font-size: 17px; }
.review-heading p > span { font-size: var(--text-ui); line-height: 1.6; }
.review-heading a { font-size: var(--text-small); }
.review-card figcaption { font-size: var(--text-ui); }
.review-card small { font-size: var(--text-caption); }
.mini-stars { font-size: var(--text-meta); }
.reels-kicker, .reel-number, .reel-status-kicker { font-size: var(--text-meta); letter-spacing: .07em; line-height: 1.4; }
.reel-number { max-width: calc(100% - 24px); white-space: normal; }
.reel-title { font-size: clamp(24px, 1.85vw, 30px); line-height: 1.12; }
.salon-diary .button, .salon-diary .reels-cta { font-size: var(--text-ui); }
.faq-list summary { font-size: var(--text-body); line-height: 1.5; }
.faq-answer { font-size: var(--text-body); line-height: 1.75; }
.treatment-dialog-copy > p:not(.eyebrow), .treatment-dialog-copy ul { font-size: var(--text-body); line-height: 1.75; }
.reel-status > span:not(.reel-status-kicker) { font-size: var(--text-body); line-height: 1.65; }
.reel-status a, .reel-play, .reel-dialog .reel-close { font-size: var(--text-small); }
.reel-status { overflow-y: auto; }

@media (max-width: 600px) {
  .hero-actions { flex-wrap: wrap; gap: 8px 16px; padding-inline: 16px; }
  .hero-actions .button { font-size: var(--text-ui); }
  .hero-actions .text-link { font-size: var(--text-small); }
  .rating-link { font-size: var(--text-small); gap: 10px; padding: 12px 14px; }
  .rating-link .stars { font-size: 16px; }
  .rating-score b { font-size: 17px; }
  .rating-reviews { font-size: var(--text-caption); }
  .services .section-heading > p { max-width: 100%; }
  .story-copy .story-button { font-size: var(--text-ui); }
  .service-body .text-link { margin-top: 6px; }
  .colour-story { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 28px; min-height: 0; }
  .colour-story-copy, .colour-story-copy > p:not(.eyebrow), .colour-story .text-link { max-width: none; }
  .colour-orbit { position: relative; inset: auto; margin-inline: auto; width: 190px; height: 240px; opacity: 1; }
  .colour-orbit img { width: 160px; height: 216px; }
  .orbit-line { width: 178px; height: 230px; }
  .orbit-line.second { width: 190px; height: 224px; }
  .little-features { grid-template-columns: 1fr; }
  .little-feature { min-height: 0; gap: 18px; }
  .little-feature p { max-width: none; }
  .diary-heading > p:last-child { max-width: 100%; }
  .reels-intro p { font-size: 28px; line-height: 1.2; }
  .reel-title { font-size: 29px; }
  .reel-status p { font-size: 30px; }
}

@media (max-width: 360px) {
  .hero-actions { flex-direction: column; gap: 2px; }
  .rating-link { flex-wrap: wrap; justify-content: center; gap: 3px 12px; }
  .rating-reviews { flex-basis: 100%; padding-left: 0; border-left: 0; text-align: center; }
}

@media (max-height: 550px) and (min-width: 480px) {
  .reel-status { justify-content: flex-start; gap: 8px; padding: 16px; }
  .reel-status > span:not(.reel-status-kicker) { font-size: var(--text-small); }
  .reel-status a, .reel-play { font-size: var(--text-small); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card .glass-label > span { font-size: 20px; }
}