/* Per-sound + sound-index page styling. Anchored to blog.css primitives. */
.sound-page, .sound-index { padding: 32px 0 64px; }
.crumbs { font-size: 13px; color: var(--muted, #8a827a); margin-bottom: 16px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--coral, #fa5738); }

.sound-hero { text-align: center; padding: 24px 0 32px; }
.sound-emoji { font-size: 72px; line-height: 1; margin-bottom: 8px; }
.sound-hero h1 { font-family: "SF Pro Rounded", ui-rounded, -apple-system, sans-serif; font-size: 40px; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 6px; }
.sound-sub { color: var(--muted, #8a827a); font-size: 14px; margin: 0 0 24px; }
.sound-sub a { color: inherit; text-decoration: underline; text-decoration-color: var(--coral, #fa5738); text-underline-offset: 3px; }

.sound-audio { width: min(520px, 100%); margin: 0 auto 20px; display: block; }

.sound-cta {
  display: inline-block; padding: 14px 28px;
  background: var(--coral, #fa5738); color: #fff;
  border-radius: 12px; font-weight: 700; font-family: "SF Pro Rounded", ui-rounded, sans-serif;
  text-decoration: none; transition: transform 0.15s, background 0.15s;
}
.sound-cta:hover { background: #d24123; transform: scale(1.02); }

.sound-body { max-width: 680px; margin: 0 auto; }
.sound-body h2 { font-family: "SF Pro Rounded", ui-rounded, sans-serif; font-size: 22px; font-weight: 800; margin: 32px 0 14px; }
.sound-intro { font-size: 17px; line-height: 1.6; margin: 16px 0 24px; }
.sound-body ol { line-height: 1.7; padding-left: 20px; }
.sound-body li { margin-bottom: 6px; }

.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 8px 0 24px; }
.sound-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; background: rgba(245, 240, 233, 0.5); border-radius: 12px;
  text-decoration: none; color: inherit; transition: background 0.15s, transform 0.15s;
  position: relative;
}
html.dark .sound-tile { background: rgba(38, 38, 42, 0.5); }
.sound-tile:hover { transform: translateY(-2px); background: rgba(245, 240, 233, 0.9); }
html.dark .sound-tile:hover { background: rgba(38, 38, 42, 0.9); }
.sound-tile-emoji { font-size: 30px; line-height: 1; }
.sound-tile-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.3; }
.sound-tile.premium::after {
  content: "👑"; position: absolute; top: 4px; right: 6px; font-size: 10px;
}

.sound-footer { text-align: center; margin: 48px 0 0; font-size: 14px; color: var(--muted, #8a827a); }

.sound-index-hero { text-align: center; padding: 24px 0 32px; }
.sound-index-hero h1 { font-family: "SF Pro Rounded", ui-rounded, sans-serif; font-size: 42px; font-weight: 900; margin: 0 0 8px; }
.sound-index-hero .sub { color: var(--muted, #8a827a); font-size: 15px; margin: 0 0 20px; }

.sound-cat { margin: 32px 0; }
.sound-cat h2 { font-family: "SF Pro Rounded", ui-rounded, sans-serif; font-size: 24px; font-weight: 800; margin: 0 0 12px; }

.faq-section dl { display: flex; flex-direction: column; gap: 16px; }
.faq-section dt { font-weight: 700; margin-bottom: 4px; }
.faq-section dd { margin: 0; color: var(--ink-soft, #3a3530); line-height: 1.5; }