/* ═══════════════════════════════════════════════════════════════════════════
   pronounce.css — the /pronounce/ pages ("How to pronounce …"), built by
   buildPronounce() in build.mjs. White page, one tint per chapter (--tint),
   the word big, the strong beat in the yellow pen, silent letters crossed out.
   ═══════════════════════════════════════════════════════════════════════ */
.page-pronounce { --top: calc(var(--bar-h) + var(--bar-gap) * 2); --tint: var(--sound-soft); }
.pr { padding: calc(var(--top) + clamp(8px, 3vh, 32px)) 0 clamp(40px, 7vh, 80px); }
.pr-wrap { max-width: 860px; display: grid; gap: clamp(16px, 2.4vw, 24px); }

.pr-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .95rem; color: var(--ink-3); }
.pr-crumb a { color: var(--ink-2); display: inline-flex; min-height: 44px; align-items: center; }

/* the word */
.pr-hero { display: grid; gap: 12px; padding: clamp(20px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--tint); }
.pr-h1 { display: grid; gap: 4px; font-size: clamp(3rem, 1.6rem + 7vw, 6.4rem); letter-spacing: -.035em; line-height: .95; overflow-wrap: anywhere; }
.pr-how { font-family: var(--f-text); font-size: clamp(1rem, .9rem + .5vw, 1.25rem); letter-spacing: 0; font-weight: 600; color: var(--ink-2); }
.pr-word { font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; }
.pr-word.pr-long { font-size: .74em; }
.pr-emoji { font-size: 1.6rem; line-height: 1; vertical-align: middle; margin-right: 4px; }
.pr-sil { color: var(--ink-3); opacity: .55; text-decoration: line-through; text-decoration-color: var(--live); text-decoration-thickness: .09em; }
.pr-hi { color: var(--sound); }
.pr-ih1 { display: block; font-size: clamp(2.5rem, 1.4rem + 5vw, 5rem); max-width: 16ch; }
.pr-lede { font-size: var(--t-lede); line-height: 1.45; max-width: 44ch; color: var(--ink-2); }

.pr-ipa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pr-ipa .ipa { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.pr-uk { font-size: .9rem; color: var(--ink-2); }
.pr-beats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.01em; font-variation-settings: 'opsz' 48, 'wdth' 100, 'wght' 560; }
.pr-beats i { font-style: normal; color: var(--ink-3); padding: 0 2px; }
.pr-beats b, .pr-beats span, .pr-beats s { padding: 2px 10px; border-radius: 10px; background: var(--cyc); }
.pr-beats b { background: var(--pen); font-variation-settings: 'opsz' 48, 'wdth' 100, 'wght' 800; }
.pr-beats s.pr-gone { background: transparent; color: var(--ink-3); text-decoration-color: var(--live); text-decoration-thickness: 3px; }
.pr-beatnote { color: var(--ink-2); }
.pr-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .95rem; color: var(--ink-2); }
.pr-key > span { display: inline-flex; gap: 8px; align-items: center; }
.pr-key .pr-sil, .pr-key .pr-hi { font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; }
.pr-badge { justify-self: start; padding: 6px 14px; border-radius: 999px; background: var(--cyc); font-weight: 700; }

.pr-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-btns:empty { display: none; }
.pr-play { background: var(--ink); border-color: var(--ink); color: var(--cyc); }
.pr-play:hover { background: var(--black); color: var(--cyc); }
.pr-slow { background: var(--cyc); }

/* the mistake and the fix */
.pr-fix { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.pr-no, .pr-yes { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: var(--radius); border: 1.5px solid var(--line); }
.pr-no { background: var(--live-soft); border-color: transparent; }
.pr-yes { background: var(--wb-soft); border-color: transparent; }
.pr-lab { font-weight: 700; font-size: .95rem; }
.pr-no .pr-lab { color: #B3261E; }
.pr-yes .pr-lab { color: var(--wb-2); }
.pr-resp { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); display: flex; flex-wrap: wrap; gap: 2px; align-items: center; font-variation-settings: 'opsz' 32, 'wdth' 100, 'wght' 560; }
.pr-resp b { font-variation-settings: 'opsz' 32, 'wdth' 100, 'wght' 820; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.pr-resp i { font-style: normal; color: var(--ink-3); }
.pr-resp s.pr-gone { text-decoration-color: var(--live); text-decoration-thickness: 3px; color: var(--ink-3); }
.pr-arrow { align-self: center; font-size: 1.6rem; color: var(--ink-3); }
@media (max-width: 560px) { .pr-fix { grid-template-columns: minmax(0, 1fr); } .pr-arrow { transform: rotate(90deg); justify-self: center; line-height: 1; } }

/* boxes */
.pr-box { display: grid; gap: 10px; padding: clamp(18px, 3vw, 28px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--cyc); }
.pr-h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); letter-spacing: -.02em; }
.pr-tip { background: var(--pen-soft); border-color: transparent; }
.pr-tip p { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.45; }
.pr-sent { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); line-height: 1.35; }
.pr-sent b { background: linear-gradient(transparent 60%, var(--pen) 60%, var(--pen) 94%, transparent 94%); }
.pr-steps ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.pr-faq h3 { font-family: var(--f-text); font-size: 1.05rem; letter-spacing: 0; font-weight: 700; margin-top: 6px; }
.pr-faq p { color: var(--ink-2); }

/* two words / both correct */
.pr-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pr-side { display: grid; gap: 10px; align-content: start; padding: clamp(16px, 3vw, 24px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--cyc); box-shadow: var(--shadow-1); }
.pr-side-lab { font-weight: 700; font-size: 1.1rem; }
.pr-side-lab span { font-weight: 500; color: var(--ink-2); }
.pr-side .pr-beats { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
.pr-side .pr-beats b, .pr-side .pr-beats span, .pr-side .pr-beats s { background: var(--cyc-2); }
.pr-side .pr-beats b { background: var(--pen); }
.pr-side .pr-sent { font-size: 1.15rem; }
@media (max-width: 640px) { .pr-sides { grid-template-columns: minmax(0, 1fr); } }

/* word cards (related words and the index) */
.pr-more { display: grid; gap: 12px; }
.pr-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.pr-cards li { position: relative; }
.pr-cards a { display: grid; gap: 2px; height: 100%; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--tint); color: var(--ink); text-decoration: none; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1); }
.pr-cw { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; font-variation-settings: 'opsz' 32, 'wdth' 100, 'wght' 760; }
.pr-cs { font-size: .92rem; color: var(--ink-2); overflow-wrap: anywhere; }
.pr-cn { font-size: .78rem; font-weight: 700; color: var(--ink-3); }
@media (hover: hover) { .pr-cards a:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); } }
.pr-index .pr-cn { min-height: 34px; padding-right: 48px; }
.pr-index .pr-cw { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.pr-mini { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; background: var(--cyc); border-color: transparent; }

/* practise */
.pr-practise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-practise a { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--cyc-2); color: var(--ink); text-decoration: none; }
.pr-practise a b { color: var(--sound-2); }
.pr-practise a span { color: var(--ink-2); font-size: .95rem; }
.pr-practise a:hover { background: var(--sound-soft); }

/* the app card */
.pr-app { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: clamp(14px, 3vw, 28px); align-items: center; padding: clamp(16px, 3vw, 24px); border-radius: var(--radius-lg); background: var(--lab-soft); }
.pr-app img { border-radius: var(--radius); width: 100%; }
.pr-app > div { display: grid; gap: 10px; }
.pr-app-k { font-family: var(--f-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lab-2); font-variation-settings: 'opsz' 12, 'wdth' 90, 'wght' 700; }
.pr-app-h { font-family: var(--f-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; font-variation-settings: 'opsz' 48, 'wdth' 100, 'wght' 760; }
.pr-app-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-app-btns .btn { white-space: normal; text-align: center; }
.pr-app .btn-ghost { background: var(--cyc); }
@media (max-width: 640px) { .pr-app { grid-template-columns: minmax(0, 1fr); } }

/* previous / next */
.pr-pn { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.pr-pn a { display: grid; gap: 2px; padding: 10px 4px; min-height: 44px; color: var(--ink); text-decoration: none; }
.pr-pn a span { font-size: .85rem; color: var(--ink-2); }
.pr-pn a b { overflow-wrap: anywhere; }
.pr-pn a:last-child { text-align: right; }
.pr-pn .pr-all { padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 600; text-align: center; }

/* the index */
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: var(--cyc); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.pr-chips a:hover { background: var(--ink); color: var(--cyc); }
.pr-chap { display: grid; gap: 10px; padding-top: clamp(16px, 3vw, 28px); scroll-margin-top: var(--top); }
.pr-ch2 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.8rem); letter-spacing: -.03em; display: flex; gap: 12px; align-items: center; }
.pr-ch2 span { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--tint); font-size: .7em; flex: none; }
.pr-chi { color: var(--ink-2); max-width: 60ch; }