/* Shared editorial system: white pages, navy type, small pastel learning cues. */
.blog-story{--topic-accent:#e0eaf7;--topic-accent-strong:#4c658c;--topic-tint:#f4f7fc}
.blog-story .topic-hero h1{font-size:clamp(2.7rem,4.5vw,4.5rem);overflow-wrap:break-word}
.blog-story .topic-hero-grid{grid-template-columns:1.05fr 1fr;gap:40px}
.blog-story .topic-deck{font-size:1.35rem;line-height:1.5;font-weight:500}
.blog-story .byline{font-size:.875rem;line-height:1.65;margin-top:22px}
.blog-story .topic-hero-picture{border-radius:24px;overflow:hidden}
.blog-story .topic-hero-picture img{max-height:none;display:block}
.blog-story .chapter-links{gap:25px}
.blog-story .chapter-links a{font-size:.875rem;white-space:nowrap}
.blog-story .topic-section .story-wrap{max-width:1040px}
.blog-story .topic-section p{max-width:850px}
.blog-story .topic-section .source-note{font-size:.875rem;color:var(--muted);overflow-wrap:anywhere}
.story-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:30px 0}
.story-cards>div{min-width:0;padding:27px;border:1px solid var(--line);border-top:5px solid #dce8f8;border-radius:20px;background:#f7f9fd}
.story-cards>div:nth-child(4n+2){background:#fbf7fe;border-top-color:#e8d9f6}
.story-cards>div:nth-child(4n+3){background:#f3faf6;border-top-color:#d5ecdf}
.story-cards>div:nth-child(4n){background:#fffbf2;border-top-color:#f8e3ad}
.story-cards>div[hidden]{display:none}
.blog-story .story-cards p{font-size:1rem;line-height:1.75;margin-bottom:16px}
.blog-story .story-cards p:last-child{margin-bottom:0}
.blog-story .story-cards h3{font-size:1.35rem;line-height:1.4;margin-bottom:14px}
.blog-story .story-cards h4{font-size:1.0625rem;line-height:1.5;margin:0 0 16px;font-weight:600}
.story-note{margin:30px 0;padding:25px 28px;background:#fffaf0;border-left:5px solid #edd292;border-radius:0 18px 18px 0}
.story-note>strong{display:block;font-size:1.125rem;line-height:1.5;margin-bottom:12px}
.blog-story .story-note p{margin-bottom:0;font-size:1rem}
.story-split{display:grid;grid-template-columns:1.2fr 1fr;gap:35px;align-items:center;margin:30px 0}
.story-split>*{min-width:0}
.story-figure{margin:30px 0;max-width:650px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:white}
.story-split .story-figure{margin:0}
.story-figure img{width:100%;height:auto;display:block}
.story-figure figcaption{padding:16px 20px;color:var(--muted);font-size:.875rem;line-height:1.65;border-top:1px solid var(--line)}
.story-tag{display:inline-block;background:#e1eaf8;padding:7px 12px;border-radius:20px;font-size:.875rem;line-height:1.4;margin-bottom:18px}
.story-cards>div:nth-child(4n+2) .story-tag{background:#e8d9f6}
.story-cards>div:nth-child(4n+3) .story-tag{background:#d5ecdf}
.story-cards>div:nth-child(4n) .story-tag{background:#f8e3ad}
.story-filter-controls{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 20px}
.story-filter-controls[hidden],.unit-calculator[hidden]{display:none}
.story-filter-controls button{font:inherit;font-size:.9375rem;line-height:1.5;color:var(--navy);background:#f4f7fc;border:2px solid #30356525;padding:10px 18px;border-radius:25px;cursor:pointer}
.story-filter-controls button[aria-pressed=true]{background:#e0eaf7;border-color:var(--navy)}
.blog-story button:focus-visible,.blog-story input:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.blog-story .story-filter-status{font-size:.9375rem;color:var(--muted)}
.unit-calculator{padding:28px;border:1px solid var(--line);border-top:5px solid #d5ecdf;border-radius:20px;margin:30px 0;background:#f3faf6}
.unit-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:20px 0}
.unit-fields label{display:block;font-size:1rem;line-height:1.5;font-weight:500;min-width:0}
.unit-fields input{display:block;width:100%;font:inherit;line-height:1.5;border:1px solid #30356555;border-radius:10px;padding:12px;color:var(--navy);background:#fff;margin-top:10px}
.blog-story #unit-result{font-weight:700;font-size:1.25rem;margin:0 0 15px}
.blog-story .calculator-note{font-size:.875rem;margin-bottom:0;color:var(--muted)}
.blog-story .topic-section li{line-height:1.75;margin-bottom:10px;font-size:1rem}
.blog-story .topic-section ul,.blog-story .topic-section ol{padding-left:25px;margin:20px 0}
.blog-story .topic-section:nth-of-type(4n+2) .topic-cue{background:#e0eaf7}
.blog-story .topic-section:nth-of-type(4n+3) .topic-cue{background:#e8d9f6}
.blog-story .topic-section:nth-of-type(4n) .topic-cue{background:#d5ecdf}
.blog-story .topic-section:nth-of-type(4n+1) .topic-cue{background:#f8e3ad}
@media(max-width:760px){.blog-story .topic-hero-grid,.story-split,.story-cards,.unit-fields{grid-template-columns:1fr}.blog-story .topic-hero-grid{gap:28px}.blog-story .topic-hero h1{font-size:clamp(2.4rem,10vw,3.5rem)}.blog-story .topic-deck{font-size:1.2rem}.blog-story .topic-hero-picture img{max-height:none}.story-cards>div{padding:23px}.story-note{padding:23px}.unit-calculator{padding:23px}.story-filter-controls button{padding:10px 14px}.blog-story .topic-section h2{font-size:clamp(1.7rem,6.6vw,2.4rem)}}
/* Section artwork sits with its explanation; recipes and reference cards retain their width. */
.story-illustrated{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:35px;align-items:center;margin:20px 0 30px}
.story-illustrated>*{min-width:0}
.story-illustrated .inline-visual{margin:0;max-width:none}
.story-illustrated .inline-visual img{height:auto;max-height:420px;object-fit:contain;background:#fff}
.story-illustrated-app{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)}
.story-illustrated .app-visual{background:#f5f8fc}
.story-illustrated .app-visual img{max-height:590px;background:#f5f8fc;width:100%;padding:12px}
.story-illustrated .app-visual figcaption{background:white}
@media(max-width:760px){.story-illustrated,.story-illustrated-app{grid-template-columns:1fr;gap:18px;margin:20px 0 27px}.story-illustrated .inline-visual img{max-height:none}.story-illustrated .app-visual{width:100%;max-width:360px;justify-self:center}.story-illustrated .app-visual img{max-height:620px}.story-illustrated .inline-visual figcaption{padding:16px 18px}}
/* Original WhatSake feature video: preserve the full vertical screen. */
.persona-preview{align-items:start}
.persona-video{width:100%;max-width:360px;justify-self:center;margin:0;background:#f5f8fc}
.persona-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;max-height:640px;object-fit:contain;background:#10101b;border-radius:18px 18px 0 0}
.persona-video figcaption{background:#fff}
.persona-preview .story-cards{grid-template-columns:1fr}
@media(max-width:760px){.persona-video{max-width:340px}}