/* Reading and touch sizes, shared by desktop and mobile. */
:root{--muted:#74664f}
body{font-size:16px}
.nav-button,.sound-button span,.text-button,.primary-button,.main-action,.story-panel .primary-button,.story-panel .action-note,
.camera-toolbar>button,.conversation-card>button,.conversation-card.has-story>button,.talk-navigation button,
.poem-moment .text-button,.saved-poem .text-button,.recipe-card .text-button,
.counter-recipe-panel .mix-dialog-footer .primary-button,.counter-caption>.primary-button,
#brew-cues,#brew-skip,.brew-accessibility button{font-size:14px;line-height:1.5;min-height:44px}
.eyebrow,.intro .eyebrow,.counter-title>.eyebrow,.counter-recipe-panel .mix-dialog-heading .eyebrow,
.panel-overline,.chapter-banner .eyebrow,.opening-page>.eyebrow,.role-button small,
.memory-page .eyebrow,.cup-ticket>.eyebrow,.conversation-card .eyebrow{font-size:11px;line-height:1.6;letter-spacing:1.3px}
.intro p,.guest-hint,.story-panel .guest-hint,.visit-recall,.story-identity p,.feeling-line,
.action-note,.recipe-card p,.recipe-card.locked p,.recipe-card .recipe-note,
.memory-page .memory-shift,.story-memory p,.chapter-page p,.relationship-notes p,
.opening-page .opening-copy p,.opening-page .opening-signoff,
.counter-title p,.counter-recipe-panel .mix-dialog-heading p,#mix-summary,
.brew-invitation,.brew-detail,#brew-prompt,.poem-moment>p,.saved-poem>p,
.dialogue-bubble p,#day-copy p,#day-next{font-size:16px;line-height:1.85}
.dialogue-bubble strong,.talk-participants,.talk-navigation>span,#poem-page,.conversation-card>div>span:last-child{font-size:12px;line-height:1.6}
.story-choice strong{font-size:16px;line-height:1.7}.story-choice small{font-size:14px;line-height:1.7}
.story-choice{min-height:44px}.choice-prompt,#choice-kept{font-size:14px;line-height:1.7}
.legend,legend{font-size:15px;line-height:1.6}legend small,legend>span{font-size:13px}
.counter-recipe-panel .extra-option,.counter-recipe-panel .temperature button{font-size:15px;min-height:44px}
.counter-recipe-panel .base-option>span:not(.base-cup){font-size:17px}
.brew-mode-buttons button{font-size:16px;line-height:1.5;min-height:56px}
.brew-mode-buttons button span,.brew-options small,#brew-mode-note,.brew-cycle,.brew-window small{font-size:13px;line-height:1.7}
.brew-window small{color:#53452f}.brew-cycle,.brew-options small,#brew-mode-note,.counter-caption p{color:#6e5d43}
.counter-caption p,.counter-small-note{font-size:14px!important;line-height:1.7!important}
.counter-caption>span{font-size:19px;line-height:1.6}
.panel-bookmark strong,.panel-bookmark small,.collection-summary,.heart-item small,.story-memory small,.chapter-page small,.story-unlock small,
.page-footer,.page-footer .text-button,.under-scene,.under-scene>span:last-child,.scene-bottom-bar,.movement-hint,.cup-ticket small{font-size:13px;line-height:1.7}
.world-hotspot small,.actor-name,.camera-toolbar>span,.opening-friends small{font-size:12px;line-height:1.5}
.visit-recall:before,.saved-poem>.eyebrow,.poem-moment>.eyebrow{font-size:11px!important;line-height:1.6}
.toast{font-size:15px;line-height:1.7}.dialog-close{min-width:44px;min-height:44px}
.dialogue-bubble p,.guest-hint,.counter-caption>span,.counter-recipe-panel .mix-dialog-heading p{overflow-wrap:anywhere}
@media(max-width:650px){
 .site-header nav{gap:14px;justify-content:space-between;width:100%}.nav-button{font-size:13px}
 .intro h1{font-size:30px;white-space:normal}.intro p{max-width:240px}
 .role-button strong{font-size:16px}
 .chapter-banner p,.chapter-banner>span{font-size:14px;line-height:1.7;white-space:normal}
 .panel-overline{font-size:11px}.story-panel .action-note{font-size:14px}
 .page-footer{font-size:13px}.page-footer .text-button{font-size:13px}
 .camera-toolbar>span{font-size:12px;max-width:54%}.camera-toolbar>button{font-size:13px}
 .conversation-card.has-story{height:48%;max-height:48%;padding:8px 10px}
 .conversation-card.has-story .talk-thread{min-height:36px}
 .conversation-card.has-story .talk-navigation{gap:6px;flex-wrap:wrap}
 .dialogue-bubble p{font-size:16px;line-height:1.75}
 .talk-navigation button{font-size:14px;min-height:44px}
 .poem-moment>p{font-size:16px;line-height:1.8;max-height:110px}
 #mix-dialog.brewing .counter-recipe-panel{padding:14px 16px}
 #mix-dialog.brewing .counter-caption>span{font-size:16px}
 #mix-dialog.brewing .counter-caption p{font-size:13px}
 .brew-moment h3{font-size:21px;line-height:1.6}
 .brew-accessibility{gap:8px;flex-wrap:wrap}
 .counter-recipe-panel .mix-dialog-footer{flex-wrap:wrap}
 #brew-skip{position:sticky;bottom:0}
 .under-scene{font-size:13px}
}
/* Ceramic pour-over sits directly above the same serving cup. */
.is-mixing[data-base=coffee] .preview-cup{transform:none}
.is-mixing[data-base=coffee] .coffee-dripper{display:block;position:absolute;top:auto;bottom:calc(100% + 10px);left:50%;width:112px;height:84px;transform:translateX(-50%);background:none;border:0;clip-path:none;z-index:4;overflow:visible;filter:drop-shadow(0 2px 1px #604c3020)}
.is-mixing[data-base=coffee] .preview-cup>.brew-drips{display:block;position:absolute;left:50%;top:-22px;bottom:auto;width:6px;height:21px;margin:0;padding:0;line-height:1;z-index:5;overflow:hidden}
.is-mixing[data-base=coffee] .brew-drips i{width:4px;height:6px;top:0;left:0;animation-name:coffee-drip-near-cup}
@keyframes coffee-drip-near-cup{0%,20%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.85}90%{opacity:.85}100%{opacity:0;transform:translateY(20px) scale(.9)}}
.is-mixing[data-base=coffee] .preview-steam{width:44px;left:calc(50% - 96px);bottom:76px}
.is-calm .brew-drips i{transform:translateY(10px)}
@media(max-width:650px){
 #mix-dialog.brewing .counter-vignette{inset:23% 0 3%;transform:scale(.62)}
 #mix-dialog.brewing .counter-title{display:none}
 #mix-dialog.brewing .counter-caption{bottom:4px;padding:5px 9px}
 #mix-dialog.brewing .counter-caption p{display:none}
}
@media(max-width:650px){
 .conversation-card.has-story:has(#story-choices:not(:empty)){display:block;overflow-y:auto;overscroll-behavior:contain}
 .conversation-card.has-story:has(#story-choices:not(:empty)) .story-talk{display:block}
 .conversation-card.has-story:has(#story-choices:not(:empty)) .talk-thread{max-height:80px;min-height:0;flex:none}
 .conversation-card.has-story .talk-navigation{flex-wrap:nowrap}
}
@media(max-width:650px){
 #mix-dialog.brewing .counter-closeup .mix-preview{bottom:30%}
}
@media(max-width:650px){
 .site-header nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 .nav-button{white-space:normal;line-height:1.4;min-width:0}
 .intro{min-width:0}.intro>div:first-child{min-width:0}
}
.poem-moment>div{flex-wrap:wrap;gap:6px 12px}
.poem-moment .text-button{white-space:nowrap;flex:0 0 auto}
@media(max-width:650px){#poem-page{flex-basis:100%;order:-1}}
/* Keep muted watercolor colors readable on cream paper. */
.nav-button,.text-button,.eyebrow,.panel-overline,.guest-hint,.visit-recall,.story-identity p,.action-note,
.brew-invitation,.brew-detail,.counter-caption p,.intro p,.chapter-banner>span,
.counter-recipe-panel .mix-dialog-heading p,.counter-title p,.dialogue-bubble strong{color:#695b43}
.brew-mode-buttons button:disabled{opacity:.8}
.preview-cup>.brew-drips{display:none}