/* A five-chapter visual essay, sized to sit above the permanent app navigation. */
.app-shell.brand-route{padding-bottom:0}
.brand-route .app-header{display:none}
.bottom-nav .brand-nav.active{box-shadow:0 0 0 1px var(--brand-ink),0 0 0 5px var(--bg)}
.brand-story{height:calc(100svh - 81px - env(safe-area-inset-bottom));height:calc(100dvh - 81px - env(safe-area-inset-bottom));min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#eeefec;color:#282a28}
.story-topbar{height:57px;min-height:57px;display:grid;grid-template-columns:44px 1fr 65px;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid #cfd0cc;background:#eeefec}
.story-topbar>img{width:102px;height:auto;object-fit:contain;justify-self:center}
.story-back{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink)}
.story-back svg{width:21px;height:21px}
.story-counter{text-align:right;color:#6d706b;font:11px/1 var(--sans);letter-spacing:1px;font-variant-numeric:tabular-nums}
.story-viewport{flex:1;min-height:0;overflow:hidden;outline:none;touch-action:pan-y}
.story-viewport:focus-visible{outline:2px solid var(--brand-ink);outline-offset:-3px}
.story-track{display:flex;height:100%;will-change:transform;transition:transform .58s cubic-bezier(.22,1,.36,1)}
.story-slide{flex:0 0 100%;min-width:0;height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.story-slide::-webkit-scrollbar{display:none}
.story-slide-inner{min-height:100%;display:flex;flex-direction:column;padding:18px 24px 26px}
.story-slide--craft{background:var(--brand-deep);color:#f3f1ef}
.story-slide--ingredients{background:#f0efed;color:#252a27}
.story-slide--texture{background:#155158;color:#f5f1ed}
.story-slide--creation{background:#e8e9e6;color:#252a27}
.story-slide--everyday{background:#193c42;color:#f3f1ed}
.story-kicker{display:block;color:inherit;opacity:.7;font:10px/1.5 var(--sans);letter-spacing:2.1px}
.story-title{margin:8px 0 0;font:700 clamp(27px,8vw,39px)/1.18 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.story-art{position:relative;flex:0 0 auto;width:100%;height:clamp(265px,39dvh,355px);margin:20px 0 0;overflow:hidden;isolation:isolate}
.story-slide:has(.story-choice-panel) .story-art{height:clamp(245px,33dvh,305px);margin-top:17px}
.story-art img{border-radius:0}
.story-art-main,.story-art-secondary,.story-focus,.story-red-disc,.story-red-block,.story-art-tag{position:absolute}
.story-art-main{width:100%;height:100%;object-fit:cover}
.story-art-secondary{object-fit:cover}
.story-red-disc{display:block;width:51%;aspect-ratio:1;border-radius:50%;background:var(--brand)}
.story-red-block{display:block;background:var(--brand)}
.story-art-tag{z-index:5;font:700 9px/1.2 var(--sans);letter-spacing:1.6px}
.story-art-craft{background:#0d2429}
.story-art-craft .story-red-disc{left:-9%;top:-14%;z-index:0}
.story-art-craft .story-art-main{left:9%;top:7%;width:91%;height:82%;object-position:59% center;clip-path:polygon(0 0,100% 0,100% 87%,88% 100%,0 100%)}
.story-art-craft .story-art-secondary{z-index:2;left:3%;bottom:3%;width:36%;height:37%;filter:grayscale(1);border:5px solid #f1f1ee;box-shadow:10px 11px 0 var(--brand-strong)}
.story-art-craft .story-art-tag{right:5%;bottom:5%;color:#f2efeb}
.story-art-ingredients{background:#dddcd8}
.story-art-ingredients .story-art-main{inset:0;object-position:center}
.story-art-ingredients .story-red-block{width:38%;height:19%;left:-9%;bottom:-2%;transform:rotate(-18deg)}
.story-art-ingredients .story-art-tag{top:6%;left:6%;color:var(--brand-ink);background:#f2f0eb;padding:6px 8px}
.story-focus{z-index:3;width:42%;height:60%;right:8%;bottom:3%;padding:5px 5px 0;background:#f5f4f0;box-shadow:7px 9px 0 rgba(37,31,31,.22);transform:rotate(5deg);color:#242925}
.story-focus-image{display:block;width:100%;height:calc(100% - 24px);object-fit:cover}
.story-focus-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 3px 3px;font:700 10px/1.5 var(--sans);letter-spacing:.1px}
.story-art-texture{background:var(--brand)}
.story-art-texture .story-red-disc{width:62%;right:-11%;top:-17%;background:var(--brand-strong)}
.story-art-texture .story-art-secondary{left:5%;top:5%;width:46%;height:67%;filter:grayscale(1);transform:rotate(-8deg);border:5px solid #f0efeb}
.story-art-texture .story-focus{right:7%;bottom:5%;width:62%;height:75%;transform:rotate(5deg)}
.story-art-texture .story-art-tag{left:5%;bottom:4%;color:var(--on-brand)}
.story-art-creation{background:#cbc8c4}
.story-art-creation .story-art-main{inset:0;filter:grayscale(1);opacity:.7}
.story-art-creation .story-red-disc{top:-28%;right:-4%;width:55%;background:var(--story-accent,var(--brand));mix-blend-mode:multiply}
.story-art-creation .story-focus{left:9%;right:auto;bottom:5%;width:56%;height:78%;transform:rotate(-5deg)}
.story-art-creation .story-art-tag{right:5%;bottom:9%;padding:8px 7px;background:var(--brand);color:var(--on-brand);writing-mode:vertical-rl}
.story-art-everyday{background:var(--brand-deep)}
.story-art-everyday .story-art-main{inset:0;object-position:62% center}
.story-art-everyday .story-red-block{width:48%;height:31%;right:-16%;top:-7%;transform:rotate(25deg);background:var(--brand);mix-blend-mode:multiply}
.story-art-everyday .story-focus{left:4%;right:auto;bottom:4%;width:35%;height:47%;transform:rotate(-6deg)}
.story-art-everyday .story-art-tag{right:4%;bottom:6%;color:#fff;text-shadow:0 1px 5px #000}
.story-copy{padding:18px 0 0}
.story-intro{font:13px/1.75 var(--sans);max-width:33em;text-wrap:pretty}
.story-choice-panel{margin-top:14px}
.story-choices{display:flex;flex-wrap:wrap;gap:7px}
.story-choice{min-height:38px;border:1px solid currentColor;border-radius:0;padding:7px 11px;font:11px/1.35 var(--sans);color:inherit;background:transparent}
.story-choice.is-selected{background:var(--brand);border-color:var(--brand-ink);color:var(--on-brand)}
.story-choice-copy{margin:10px 0 0;font:12px/1.6 var(--sans);opacity:.86;text-wrap:pretty}
.story-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}
.story-cta button{min-height:44px;padding:10px 17px;border-radius:0;font:12px/1.4 var(--sans)}
.story-cta-primary{background:var(--brand);color:var(--on-brand)}
.story-cta-primary span{margin-left:9px}
.story-cta-secondary{border:1px solid currentColor;color:inherit}
.story-chapter-bar{height:58px;min-height:58px;display:flex;align-items:stretch;padding:0 10px;border-top:1px solid #d4d6d1;background:#e9e9e7}
.story-arrow{width:36px;min-width:36px;display:grid;place-items:center;font:30px/1 Georgia,serif;color:var(--brand-ink)}
.story-arrow:disabled{opacity:.28}
.story-chapter-nav{min-width:0;flex:1;display:flex;align-items:stretch;justify-content:space-between}
.story-chapter-nav button{position:relative;min-width:0;flex:1;padding:5px 0;font:11px/1 var(--sans);color:#666d67}
.story-chapter-nav button[aria-current="step"]{color:var(--brand-ink);font-weight:700}
.story-chapter-nav button[aria-current="step"]::after{content:'';position:absolute;left:24%;right:24%;bottom:8px;height:2px;background:var(--brand-ink)}
.story-slide.is-current .story-title{animation:story-enter .72s cubic-bezier(.22,1,.36,1) both}
.story-slide.is-current .story-art-main{animation:story-reveal .88s cubic-bezier(.22,1,.36,1) both}
.story-slide.is-current .story-art-secondary,.story-slide.is-current .story-focus{animation:story-piece .82s .16s cubic-bezier(.22,1,.36,1) both}
.story-slide.is-current .story-copy{animation:story-enter .74s .19s cubic-bezier(.22,1,.36,1) both}
.story-focus.is-changing{animation:story-choice-pulse .34s ease-out}
@keyframes story-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes story-reveal{from{opacity:.3;scale:1.045}to{opacity:1;scale:1}}
@keyframes story-piece{from{opacity:0;translate:18px 13px}to{opacity:1;translate:0 0}}
@keyframes story-choice-pulse{from{opacity:.55}to{opacity:1}}
@media(max-width:360px){
  .story-slide-inner{padding:15px 18px 22px}
  .story-title{font-size:27px}
  .story-art{height:clamp(236px,38dvh,310px)}
  .story-slide:has(.story-choice-panel) .story-art{height:clamp(220px,31dvh,280px)}
  .story-intro{font-size:12px}
  .story-choice{padding:6px 8px;font-size:10px;min-height:36px}
  .story-chapter-bar{padding:0 4px}
  .story-arrow{width:29px;min-width:29px}
}
@media(max-height:650px){
  .story-slide-inner{padding-top:12px}
  .story-art{height:190px;margin-top:12px}
  .story-slide:has(.story-choice-panel) .story-art{height:170px}
  .story-copy{padding-top:12px}
  .story-choice-panel{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){
  .story-track{transition:none}
  .story-slide.is-current .story-title,.story-slide.is-current .story-art-main,.story-slide.is-current .story-art-secondary,.story-slide.is-current .story-focus,.story-slide.is-current .story-copy,.story-focus.is-changing{animation:none}
}