/* Progressive enhancement: reading content is always visible, even without JS. */
.reveal { opacity: 1; transform: none; }
main .eyebrow:not(.light)::after {
  content: ''; display: inline-block; width: 42px; height: 20px; margin-inline-start: 12px;
  vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26' fill='none' stroke='%238b9b81' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 23Q23 21 54 3M19 19Q12 8 27 9Q30 15 19 19M33 13Q32 1 43 2Q45 9 33 13M35 13Q49 10 49 18Q40 24 35 13'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lh-sound-wrap { padding-block: 24px 8px; }
.lh-sound { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px 28px; align-items: center; padding: 22px 26px; border: 1px solid #ded9d0; border-radius: 20px; background: #f7f5ef; color: #384b40; }
.lh-sound h2 { font-family: 'Noto Serif HK',serif; font-size: 1.18rem; line-height: 1.5; margin: 0 0 5px; }
.lh-sound p { font-size: .84rem; line-height: 1.7; margin: 0; color: #5d675e; }
.lh-sound-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.lh-sound-toggle { min-height: 44px; min-width: 124px; border: 1px solid #80688d; border-radius: 999px; background: #745683; color: white; padding: 10px 18px; font: inherit; font-size: .9rem; cursor: pointer; }
.lh-sound-toggle:disabled { opacity: .65; cursor: default; }
.lh-sound-volume { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.lh-sound-volume input { width: 100px; min-height: 44px; accent-color: #745683; cursor: pointer; }
.lh-sound-status { grid-column: 1 / -1; min-height: 1.7em; }
.lh-sound :focus-visible { outline: 3px solid #47664a; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cta, .lh-sound-toggle, .lh-reading-card, .portal-card, .product-card { transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease; }
  .cta:hover, .lh-sound-toggle:not(:disabled):hover, .lh-reading-card:hover, .portal-card:hover, .product-card:hover { transform: translateY(-2px); }
}
@media (max-width: 760px) { .lh-sound { grid-template-columns: 1fr; padding: 20px; gap: 14px; } .lh-sound-controls { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } }

/* The botanical SVG is static and fully visible by default, including without JS. */
@keyframes lh-botanical-rise { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  main .eyebrow:not(.light).lh-botanical-enter::after { animation: lh-botanical-rise 1400ms cubic-bezier(.2,.65,.3,1) 1; }
}
@media (prefers-reduced-motion: reduce) {
  main .eyebrow:not(.light)::after { animation: none !important; opacity: 1 !important; transform: none !important; }
}