/* HerMouth Philosophy — additions on top of the shared styles. Its own palette (brand book, 2026-10-14):
   mulberry leads, petal and blush are the light grounds, rosewood for buttons, plum ink for text. */

:root { --teal: #6B2D4A; --coral: #9C3654; --peach: #EBC3C8; --apricot: #C47A8A; --shell: #F7E4E4; --ink: #2E1A24; --ink-soft: #4A2E3B; --ink-muted: #6A4A58; }
.btn:hover { background: #7E2A44; }
.wordmark { display: flex; align-items: center; gap: var(--s3); }
.wordmark img { width: 264px; height: auto; }
.footer-top img.sub-logo { width: 240px; height: auto; margin: 0; }
@media (max-width: 700px) { .wordmark img { width: 196px; } }

.site-header { background: var(--peach); border-bottom-color: var(--apricot); }
.wordmark { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 34px; color: var(--ink); text-decoration: none; }
.wordmark em { font-style: italic; color: var(--teal); }
.byline { font-size: 15px; line-height: 24px; color: var(--ink-soft); font-weight: 400; text-decoration: none; }
.byline:hover { text-decoration: underline; }
.head-right { display: flex; align-items: center; gap: var(--s4); }
.shop-link { font-size: 15px; line-height: 24px; color: var(--ink); font-weight: 700; text-decoration: none; }
.shop-link:hover, .shop-link[aria-current] { text-decoration: underline; }
.card.booklet { display: flex; flex-direction: column; gap: var(--s3); }
.card.booklet .btn-row, .card.booklet > .small { margin-top: auto; }

.hm-hero { background: var(--peach); padding-block: var(--s6); }
.hm-hero .display { font-size: 68px; line-height: 64px; }
.hm-hero .display em { color: var(--teal); }
.hm-hero .label { color: var(--ink-soft); }
.hm-hero .photo img { aspect-ratio: 4 / 5; object-position: 50% 30%; }

.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s3); align-items: end; }
.signup .field label { font-size: 15px; }
.signup .btn { height: 49px; white-space: nowrap; }
.signup-note { font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.on-teal .signup-note { color: var(--shell); }
.on-teal .field input { border-color: var(--shell); }

.hm-hero .signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hm-hero .signup .btn { grid-column: 1 / -1; justify-self: start; }
.on-peach .display em { color: var(--teal); }
.site-footer .footer-top { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); }
.site-footer .footer-col { min-width: 0; overflow-wrap: anywhere; }

.inside { counter-reset: n; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
.inside li { counter-increment: n; border-top: 1px solid rgba(246,231,220,0.45); padding-top: var(--s3); font-size: 18px; line-height: 27px; }
.inside li::before { content: "0" counter(n); display: block; font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 44px; color: var(--peach); margin-bottom: var(--s2); }

.stage .h1 { font-size: 56px; line-height: 54px; }

.disclaimer { font-size: 15px; line-height: 24px; max-width: 640px; }

@media (max-width: 1000px) {
  .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .byline { display: none; }
}
@media (max-width: 700px) {
  .wordmark { font-size: 24px; line-height: 28px; }
  .head-right .btn { padding: 8px 14px; font-size: 15px; }
  .hm-hero { padding-block: var(--s5); }
  .hm-hero .display { font-size: 44px; line-height: 44px; }
  .signup, .hm-hero .signup, .inside, .site-footer .footer-top { grid-template-columns: minmax(0, 1fr); }
  .hm-hero .signup .btn { justify-self: stretch; }
  .signup .btn { height: auto; }
}

.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }