.language-speak{margin-left:.25rem;min-width:44px;min-height:44px;padding:.1rem .25rem;border:0;border-radius:.4rem;background:transparent;font:inherit;cursor:pointer}
.language-speak:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.photo-caption{margin:.45rem 0;font-weight:600}
.guide-fact,.did-you-know{margin:.7rem 0;padding:.6rem .7rem;border-left:3px solid #e7a52d;background:#fff8df;border-radius:.35rem}
.fact-source{display:block;margin-top:.35rem;font-size:.8rem;line-height:1.35;overflow-wrap:anywhere}
.guide-fact strong,.did-you-know strong{display:block;margin-bottom:.2rem}
.photo-caption{line-height:1.45;font-size:.95rem}

.guide-name{display:inline-flex;align-items:center;white-space:normal;max-width:100%;overflow-wrap:anywhere}
.card-narration{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:.65rem 0}
.card-narrate{min-width:44px;min-height:44px}
.card-narration-status{flex:1 1 12rem;margin:0;font-size:.9rem;line-height:1.35}
/* The photo toolbar stays immediately below the unobstructed image. It wraps
   the narration control instead of shrinking any touch target. */
.card .photo-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;padding:5px 0 3px}
.card .photo-actions>.button,.card .card-primary-actions>.button{box-sizing:border-box;min-width:48px;min-height:48px;margin:0;font-size:.9rem;line-height:1.2}
.card .photo-actions>[data-card-photo-prev],.card .photo-actions>[data-card-photo-next]{flex:0 0 48px;width:48px;padding:0;font-size:1.2rem;line-height:1}
.card .card-primary-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:3px;flex:1 1 158px;min-width:min(100%,158px)}
.card .card-primary-actions>.card-narrate{flex:1 1 72px;width:auto;min-width:max(48px,4.8em);padding:6px 8px}
.card .card-primary-actions>.card-expand{display:flex;align-items:center;justify-content:center;gap:4px;flex:1 1 80px;width:auto;min-width:max(48px,5.45em);padding:6px 8px}
.card .card-expand svg{display:block;flex:0 0 20px;width:20px;height:20px}
.card .photo-count{flex:0 1 52px;min-width:52px;margin:0;text-align:center;font-size:.875rem;line-height:1.25;font-weight:800;color:var(--leaf)}
.card .card-narration-status{flex:1 0 100%;font-size:.875rem;line-height:1.4}
/* Keep the full learning copy while spending less card height on repeated
   gaps, source labels and photo attribution. */
.card .card-copy{gap:2px}
.card .card-copy>p{line-height:1.4}
.card .photo-caption{margin:.2rem 0;line-height:1.35;font-size:.875rem}
.card .guide-fact,.card .did-you-know{margin:.35rem 0;padding:.45rem .6rem;font-size:.875rem;line-height:1.4}
.card .card-fact summary,.card .did-you-know summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:800}
.card .card-fact .fact-body,.card .did-you-know .fact-body{padding:0 0 .2rem}
.card .fact-source{margin-top:.2rem;line-height:1.3}
.card .photo-credit{padding-top:2px;line-height:1.25}
.card .photo-meta{display:block;margin:0;padding:2px 0;font-size:.875rem;line-height:1.43;min-width:0;overflow-wrap:anywhere}
.card .photo-meta .place,.card .photo-meta .photo-credit,.card .photo-meta .sound-credit{display:inline}
.card .photo-meta .photo-credit{padding:0}
.card .photo-meta .photo-credit a,.card .photo-meta .sound-credit a{display:inline}
.card .photo-meta .meta-separator{color:#786f63;white-space:nowrap}
.card .card-narration{margin:.35rem 0;gap:.35rem}
.card .places{margin-top:2px}
.card .view figcaption{gap:2px;padding:6px 9px 8px}
.card .view-describe{font-size:1rem;line-height:1.5}
.card .card-sound-actions{padding:3px 10px}
.card .card-sound-actions .play{min-height:48px;margin:0;width:100%}
.card .look,.card [data-card]{min-height:48px}
.card h2{font-size:1.25rem;line-height:1.3}
.card h2,.card h2 span,.hero h1,.hero h1 span{min-width:0;white-space:normal!important;overflow-wrap:anywhere}
.card .detail,.card .photo-caption,.card .fact-body{font-size:1rem;line-height:1.5}
.card .detail,.card .photo-caption,.card .view-describe{min-width:0;overflow-wrap:anywhere}
.card .fact-body{min-width:0;overflow-wrap:anywhere}
.card .photo-credit,.card .sound-credit,.card .places,.card .place,.card .view figcaption{font-size:.875rem;line-height:1.43}
/* One tap exposes all guides; the open menu may cover content below it. */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.guide-menu{position:relative;min-width:0;max-width:100%;z-index:5;margin:0;padding:0;border:0;background:transparent}
.guide-menu summary{min-height:44px;padding:9px 14px;border:2px solid var(--line);border-radius:16px;background:var(--paper);font-weight:800;cursor:pointer;overflow-wrap:anywhere}
.guide-menu summary:focus-visible,.guide-menu a:focus-visible,.category-picker select:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
.guide-menu-links{position:absolute;top:calc(100% + 6px);right:0;display:grid;width:max-content;min-width:100%;max-width:min(320px,calc(100vw - 32px));padding:6px;background:var(--paper);border:2px solid var(--line);border-radius:16px;box-shadow:0 8px 24px #37352f26}
.guide-menu-links a{display:flex;align-items:center;min-height:44px;padding:9px 14px;border-radius:10px;color:var(--ink);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.guide-menu-links a:hover,.guide-menu-links a[aria-current=page]{background:var(--leaf-pale);color:#174d31}
.category-picker{display:none}
@media(max-width:760px){
 .site-head{align-items:stretch}
 .site-head>.back{display:flex;align-items:center;min-height:44px}
 .guide-menu{flex:1 1 180px}
 .guide-menu-links{width:100%;max-width:100%}
 .category-picker{display:grid;gap:5px;margin:2px auto 5px;max-width:560px;font-weight:800}
 .category-picker select{width:100%;min-width:0;min-height:48px;padding:10px 12px;border:2px solid var(--leaf);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;font-size:1rem}
 .tabs.has-category-picker{display:none}
}
/* At the smallest phone width, keep the guide's first real photograph in view
   without removing a usable control. The fox and visual “Show” label decorate it. */
@media(max-width:360px){
 .hero{padding:0 0 2px}
 .hero .fox{display:none}
 .hero h1{font-size:1.08rem;line-height:1.04;margin:.08em auto}
 .hero p{margin:.1em auto}
 .language-hint{display:none}
 .language-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:1px 0}
 /* Four guide styles deliberately reveal this row with an important flex rule. */
 html.js .language-row.enhanced-only{display:grid!important}
 .language-row .chip{min-width:0;min-height:44px;padding:7px 2px;font-size:.75rem;line-height:1.1;white-space:normal;overflow-wrap:anywhere}
 .category-picker{margin:0 auto}
 .search{margin-bottom:0}
 .category-note{margin-bottom:0}
 #startCategory{margin-bottom:0}
 .grid{margin-top:0}
}
/* Keep fruit photos legible in their own scrollable area as explanations grow. */
#viewer .viewer-views{min-height:0;overflow:auto;align-content:start;grid-auto-rows:max-content}
#viewer .viewer-views picture{height:auto;min-height:160px;aspect-ratio:4/3}
#viewer .viewer-info,#session .session-info{gap:4px}
#viewer .viewer-photo-actions,#session .viewer-photo-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:0;padding:3px 0}
#viewer .viewer-photo-actions>.button,#session .viewer-photo-actions>.button{box-sizing:border-box;width:48px;min-width:48px;min-height:48px;margin:0;padding:0;font-size:1.1rem;line-height:1}
#viewer .viewer-photo-actions>.viewer-narrate,#session .viewer-photo-actions>.viewer-narrate{flex:1 1 96px;width:auto;min-width:96px;padding:6px 12px;font-size:.9rem;line-height:1.2}
#viewer .viewer-photo-actions>.photo-count,#session .viewer-photo-actions>.photo-count{flex:0 1 72px;min-width:52px;margin:0;text-align:center;font-size:.875rem;line-height:1.25;font-weight:800}
#viewer .photo-meta,#session .photo-meta{display:block;margin:0;padding:1px 0;font-size:.875rem;line-height:1.43;overflow-wrap:anywhere}
#viewer .photo-meta .photo-credit,#viewer .photo-meta .sound-credit,#viewer .photo-meta .place,#session .photo-meta .photo-credit,#session .photo-meta .place{display:inline;padding:0}
#viewer .photo-meta a,#session .photo-meta a{display:inline}
#viewer .viewer-info h2,#session .session-info h2{margin:.1rem 0;font-size:1.25rem;line-height:1.3}
#viewer .viewer-info .photo-caption,#viewer .viewer-info .detail,#viewer .viewer-info .fact-body,#viewer .viewer-info .prompt,#session .session-info .photo-caption,#session .session-info .session-detail,#session .session-info .fact-body{min-width:0;margin:.15rem 0;font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
#viewer .viewer-info .guide-fact,#session .session-info .guide-fact{margin:.25rem 0;padding:.4rem .55rem;font-size:1rem;line-height:1.5}
#viewer .viewer-info .fact-source,#session .session-info .fact-source{margin-top:.15rem;font-size:.875rem;line-height:1.43}
#viewer .viewer-info .count,#session .session-info .count,#viewer .viewer-info .view-label,#viewer .viewer-info .sound-word{margin:.1rem 0}
#viewer .viewer-sound-action .play{width:100%;min-height:48px;margin:0}
#viewer .viewer-bottom-actions,#session .viewer-bottom-actions{display:flex;flex-wrap:wrap;gap:6px}
#viewer .viewer-bottom-actions>.button,#session .viewer-bottom-actions>.button{flex:1 1 96px;min-height:48px;margin:0}
#viewer .viewer-info .actions,#session .session-info .actions{position:sticky;bottom:0;background:var(--paper);padding:6px 0;margin-bottom:0;z-index:1}
@media(max-width:649px),(orientation:portrait){
 #viewer .viewer-info,#session .session-info{max-height:48dvh;overflow:auto}
}

/* Keyboard bypass: no layout space or animation; visible while focused. */
.guide-skip{position:fixed;top:12px;left:12px;z-index:200;transform:translateY(calc(-100% - 24px));display:inline-flex;align-items:center;min-height:44px;max-width:calc(100vw - 24px);padding:8px 14px;border:2px solid #166534;border-radius:10px;background:#fff7df;color:#153e2a;font-weight:700}
.guide-skip:focus{transform:none;outline:3px solid #166534;outline-offset:3px}
.grid[tabindex="-1"]:focus-visible{outline:3px solid #166534;outline-offset:4px}