/* A meal remains the subject as its record moves from review to diary to history. */
.home-page .story-section{position:relative;overflow:visible;background:var(--brand-cocoa,#2c1d16);color:var(--brand-cream,#fffbf4);border-color:#ffdfbb24;--ink:var(--brand-cream,#fffbf4);--muted:#dcc7b7;--line:#ffdfbb30;--link:var(--brand-orange-light,#ffb24b);padding:104px 0 84px}
.story-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);gap:40px;align-items:end;margin-bottom:38px}
.home-page .story-heading h2{max-width:770px;font-size:clamp(38px,4.5vw,66px);line-height:1.12;letter-spacing:-2px;margin:0;text-wrap:balance}
.story-heading p{max-width:330px;font-size:15px;color:var(--muted);margin:0 0 4px;line-height:1.75}
.story-nav{display:flex;flex-wrap:wrap;gap:8px 28px;border-bottom:1px solid var(--line);padding:0 0 24px;margin-bottom:22px}
.story-nav a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#dcc7b7;font-size:13px;transition:color .2s}
.story-nav a>span:first-child{font-variant-numeric:tabular-nums;font-size:11px;color:#bc9c80}
.story-nav a:hover,.story-nav a[aria-current=step]{color:var(--brand-orange-light,#ffb24b)}
.story-section :focus-visible{outline-color:var(--brand-orange-light,#ffb24b)}
.story-layout{position:relative}
.story-chapters{min-width:0}
.story-chapter{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.8fr);align-items:center;gap:64px;padding:60px 0;border-bottom:1px solid var(--line);scroll-margin-top:16px}
.story-chapter:last-child{border-bottom:0}
.story-chapter-copy{min-width:0;max-width:540px}
.story-chapter-number{display:block;color:var(--brand-orange-light,#ffb24b);font-size:13px;font-variant-numeric:tabular-nums;margin-bottom:24px}
.story-chapter h3{font-size:clamp(32px,3.5vw,48px);font-weight:650;line-height:1.18;letter-spacing:-1.4px;text-wrap:balance;margin:0 0 24px}
.story-chapter p{font-size:16px;line-height:1.8;color:var(--muted);max-width:430px;margin:0}
.story-inline-visual{margin:0;width:min(250px,100%);justify-self:center;padding:6px;border:1px solid #a5714a54;border-radius:31px;background:var(--brand-cream,#fffbf4);box-shadow:0 24px 52px #10090445;overflow:hidden}
.story-inline-visual img{display:block;width:100%;height:auto;border-radius:25px}
.story-stage{display:none}
.story-caption{font-size:12px;color:#c6ac97;line-height:1.7;margin:30px 0 0;max-width:620px}
html[lang^=zh] .story-heading h2{line-height:1.25;letter-spacing:-1.5px}
html[lang^=zh] .story-chapter h3{line-height:1.3;letter-spacing:-1px}
@media(min-width:1000px){
  .story-enhanced .story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:80px;align-items:start}
  .story-enhanced .story-chapter{display:flex;align-items:center;min-height:clamp(430px,66svh,620px);padding:54px 0}
  .story-enhanced .story-inline-visual{position:absolute;width:1px;height:1px;padding:0;border:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .story-enhanced .story-stage{position:sticky;top:110px;display:flex;flex-direction:column;align-items:center;gap:24px;padding:26px 22px 20px;isolation:isolate;perspective:1100px}
  .story-stage::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:48% 48% 28px 28px;background:radial-gradient(ellipse at 50% 35%,#fb85252e,transparent 67%);border:1px solid #ffdfbb1a;pointer-events:none}
  .story-stage-phone{position:relative;width:min(250px,calc((100svh - 320px)*.45));min-width:108px;aspect-ratio:352/783;margin-bottom:96px;border:6px solid var(--brand-cream,#fffbf4);border-radius:31px;overflow:hidden;background:var(--brand-cream,#fffbf4);box-shadow:0 30px 60px #12090370;perspective:900px;transform-origin:50% 65%}
  .story-stage-shot{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform-origin:50% 60%;backface-visibility:hidden}
  .story-stage-shot:first-child{opacity:1;visibility:visible}
  .story-stage-shot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:23px}
  .story-stage-detail{position:absolute;right:36px;bottom:64px;width:clamp(170px,48%,232px);z-index:2;opacity:0;visibility:hidden;overflow:hidden;border:1px solid #ffdfbb80;border-radius:18px;background:var(--brand-cream,#fffbf4);box-shadow:0 22px 44px #0f060680,0 2px 0 #ffffff54 inset;transform-origin:35% 65%;backface-visibility:hidden;pointer-events:none}
  .story-stage-detail img{display:block;width:100%;height:auto}
  .story-stage-index{display:flex;align-items:center;gap:16px;width:min(230px,100%);font-size:12px;font-variant-numeric:tabular-nums;color:#bfa58d}
  .story-stage-current{color:var(--brand-orange-light,#ffb24b);min-width:18px}
  .story-stage-track{flex:1;height:2px;background:#ffdfbb35;overflow:hidden}
  .story-stage-fill{display:block;width:100%;height:100%;background:var(--brand-orange-light,#ffb24b);transform:scaleX(0);transform-origin:left center}
  .story-enhanced .story-chapter-number{color:#c2a68c;transition:color .3s}
  .story-enhanced .story-chapter.is-current .story-chapter-number{color:var(--brand-orange-light,#ffb24b)}
}
@media(max-width:999px){
  .home-page .story-section{padding:72px 0 64px}
  .story-heading{grid-template-columns:1fr;gap:22px;margin-bottom:24px}
  .home-page .story-heading h2{font-size:clamp(36px,5.6vw,54px);max-width:680px}
  .story-heading p{max-width:520px;font-size:14px}
  .story-chapter{gap:32px;padding:42px 0;scroll-margin-top:12px}
  .story-chapter h3{font-size:clamp(28px,4vw,38px)}
  .story-chapter p{font-size:14px}
  .story-inline-visual{width:min(220px,100%)}
}
@media(max-width:540px){
  .home-page .story-section{padding:56px 0}
  .home-page .story-heading h2{font-size:36px;letter-spacing:-1.3px}
  .story-nav{gap:6px 18px;padding-bottom:18px;margin-bottom:8px}
  .story-nav a{font-size:12px;gap:6px}
  .story-chapter{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .story-chapter-number{margin-bottom:16px}
  .story-chapter h3{font-size:31px;margin-bottom:16px;max-width:350px}
  .story-chapter p{max-width:410px}
  .story-inline-visual{width:190px;border-radius:26px;padding:5px}
  .story-inline-visual img{border-radius:21px}
  .story-caption{font-size:11px;margin-top:22px}
}
@media(prefers-reduced-motion:reduce){
  .story-nav a,.story-chapter-number{transition:none}
}