/* Owner review: full photographs, scroll chapters and Vietnamese typography. */
body{font-family:"Segoe UI",Arial,sans-serif}
h1,h2{letter-spacing:-.05em;line-height:1.15}
.hero h1{line-height:1.13}
.place h2{line-height:1.14}
.site-header{isolation:isolate}
.nav-mountains{position:absolute;inset:0;z-index:-1;pointer-events:none}
.nav-mountains img{height:100%;object-fit:cover;object-position:50% 42%}
.nav-mountains::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eef3eef0,#eef3eecf);pointer-events:none}
.frames-on .nav-mountains>.frame-tag{top:calc(100% + 4px);left:auto;right:3px;max-width:calc(50vw - 6px);z-index:12}
.hero-sign{position:absolute;width:clamp(155px,16vw,250px);right:-1%;bottom:-12px;z-index:4;transform:rotate(6deg)}
.hero-sign img{filter:drop-shadow(0 10px 12px #183c3620)}
.intro{display:grid;grid-template-columns:1.12fr 1fr;column-gap:6%;align-items:center;text-align:left}
.intro>.eyebrow{grid-column:1;align-self:end}
.intro>h2{grid-column:1;margin:24px 0;font-size:clamp(46px,5vw,76px)}
.intro>.body-copy{grid-column:1;align-self:start;margin:0;max-width:550px}
.intro .intro-fish{position:relative;display:block;grid-column:2;grid-row:1/4;width:min(100%,650px);right:auto;top:auto;justify-self:center;opacity:1;mix-blend-mode:normal;transform:rotate(6deg)}
.intro-fish img{filter:none}
.js-ready .intro-fish:not(.swimming) img{opacity:0}
.intro-fish.swimming img{transform-origin:50% 50%;animation:swim-in 3.4s ease-out both,fish-greeting 6s ease-in-out 3.4s infinite}
@keyframes swim-in{0%{opacity:0;transform:translateX(-90vw) rotateY(-65deg) rotate(-12deg) scale(.75)}12%{opacity:1}30%{transform:translateX(-55vw) rotateY(-50deg) rotate(8deg) scale(.86)}55%{transform:translateX(-25vw) rotateY(-35deg) rotate(-6deg) scale(.94)}80%{transform:translateX(12px) rotateY(12deg) rotate(3deg) scale(1)}100%{opacity:1;transform:translateX(0) rotateY(0) rotate(0) scale(1)}}
@keyframes fish-greeting{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-2deg)}}
.bowl-story{height:360svh;min-height:2300px}
.bowl-sticky{top:var(--bowl-sticky-top,0px);padding-top:112px;padding-bottom:34px;grid-template-rows:minmax(350px,1fr) auto auto;gap:16px 28px;min-height:920px;max-height:1150px}
.bowl-heading{padding-top:24px}
.bowl-stage{height:400px}
#bowl-canvas{width:100%;height:100%;max-height:100%;object-fit:contain;left:0;top:0}
.bowl-heading h2{font-size:clamp(36px,3.6vw,58px)}
.bowl-detail{padding-top:20px}
.bowl-controls{width:100%}
.bowl-origin{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr;gap:30px;border-top:1px solid #24469b30;padding:26px 0 0;align-items:start}
.bowl-origin h3{font-size:18px;line-height:1.5;color:var(--red)}
.bowl-origin p{font-size:14px;line-height:1.8;max-width:850px;color:var(--ink)}
.bowl-sticky{height:auto;max-height:none}
.bowl-products{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:30px;margin-top:10px;width:100%}
.bowl-products figure{min-width:0;margin:0;text-align:center}
.bowl-products img{display:block;width:100%;height:clamp(150px,15vw,260px);object-fit:contain}
.bowl-products figcaption{font-size:13px;line-height:1.6;color:var(--green);padding:12px 8px 0}
@media(max-width:800px){.bowl-products{gap:16px}.bowl-products img{height:150px}.bowl-products figcaption{font-size:11px}}
@media(max-width:560px){.bowl-products{gap:10px;margin-top:26px;grid-template-columns:repeat(3,minmax(0,1fr))}.bowl-products img{height:95px}.bowl-products figcaption{font-size:10px;line-height:1.5;padding:10px 0 0}}
.ingredients{display:block;padding-bottom:70px}
.ingredients-copy{max-width:720px;margin-bottom:36px}
.ingredients-copy h2{font-size:clamp(44px,5vw,78px)}
.ingredients-copy .body-copy{max-width:540px}
.ingredient-scroll{display:grid;grid-template-columns:1.35fr 1fr;gap:8%;align-items:start;position:relative}
#ingredient-panel{position:sticky;top:130px;align-self:start;width:100%;margin:0;padding:0;transform:none;background:none;box-shadow:none}
#ingredient-photo{overflow:visible}
#ingredient-image{height:min(54vh,620px);min-height:260px;aspect-ratio:auto;object-fit:contain;transform:none}
.ingredient-card:hover img{transform:none}
.ingredient-caption{align-items:center;gap:24px;padding:22px 12px}
.ingredient-caption .eyebrow{font-size:11px;line-height:1.7;margin:0;color:var(--blue)}
.ingredient-number{font-size:60px}
.ingredient-chapter{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:65px 0;border-top:1px solid #245a4825}
.ingredient-chapter .eyebrow{color:var(--red);font-size:11px}
.ingredient-chapter h3{font-size:clamp(30px,3vw,48px);line-height:1.2;margin:20px 0;color:var(--green);transition:color .3s}
.ingredient-chapter.active h3{color:var(--blue)}
.ingredient-mobile-photo{display:none}
.frames-on #ingredient-panel>.frame-tag{top:-32px}
.frames-on #ingredient-photo>.frame-tag{top:3px}
.ingredient-chapter .body-copy{font-size:17px;line-height:1.9;max-width:420px}
.kitchen-small{width:min(100%,460px);margin:38px 0 0 auto;transform:rotate(3deg);padding:10px}
.kitchen-small img{aspect-ratio:auto;object-fit:contain}
.kitchen .handwritten{max-width:100%;margin-top:26px;min-height:0;font-size:22px;transform:none}
.gallery-card.cutout-card .photo-window{background:var(--mint);border-radius:48% 48% 4px 4px}
.gallery-card.cutout-card img{object-fit:contain;padding:12px}
.facade-photo img{height:auto;max-height:380px;object-fit:contain}
.footer-top{display:grid;grid-template-columns:1fr auto;gap:30px}
.footer-top .back-top{grid-column:2;grid-row:1}
.footer-top .footer-fish{grid-column:1/-1;grid-row:2;width:min(100%,1000px);margin:40px auto 0;position:relative;padding-top:50px}
.footer-fish img{transform:rotate(-5deg);animation:fish-wave 7s ease-in-out infinite}
#footer-fish-canvas{display:block;width:100%;height:auto}
#footer-fish-canvas[hidden],.footer-fish-fallback[hidden]{display:none}
.fish-hello{position:absolute;right:7%;top:0;z-index:2;padding:22px 40px;background:var(--paper);color:var(--red);font-size:clamp(32px,4vw,62px);font-weight:700;line-height:1.2;border:2px solid var(--green);border-radius:50%;transform:rotate(6deg)}
.fish-hello::after{content:"";position:absolute;bottom:-14px;left:24%;width:24px;height:24px;background:var(--paper);border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:skew(-20deg) rotate(38deg)}
.footer-wordmark{font-size:clamp(150px,22vw,350px);margin-top:-10px}
@keyframes fish-wave{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(0)}}
@media(min-width:1650px){.bowl-stage{height:500px}.hero-sign{bottom:0}}
@media(max-width:1100px){.bowl-sticky{gap:14px;grid-template-rows:minmax(330px,1fr) auto auto}.bowl-stage{height:350px}.bowl-origin p{font-size:13px}.ingredient-scroll{gap:5%}.ingredient-chapter .body-copy{font-size:16px}.hero-sign{width:170px}}
@media(max-width:800px){.bowl-sticky{min-height:1060px;grid-template-rows:auto auto auto auto;gap:18px}.bowl-stage{height:350px}.bowl-origin{grid-template-columns:1fr;gap:10px}.bowl-origin p{font-size:13px}.hero-sign{width:150px;right:-5%;bottom:-40px}.ingredient-scroll{grid-template-columns:1.15fr 1fr}.ingredient-chapter h3{font-size:30px}.ingredient-chapter .body-copy{font-size:14px}.ingredient-caption{padding:18px 0;gap:14px}.ingredient-caption .eyebrow{font-size:9px}.ingredient-number{font-size:46px}}
@media(max-width:560px){
  .intro{display:block;text-align:center}.intro>h2{font-size:43px}.intro .intro-fish{width:100%;max-width:420px;margin:34px auto 15px}.intro>.body-copy{margin:auto}
  .hero-sign{width:150px;right:-2%;bottom:-10px}.hero-art{margin-bottom:20px}
  .bowl-story{height:340svh;min-height:2500px}
  .bowl-sticky{min-height:1020px;height:auto;max-height:none;display:flex;padding-top:96px;padding-bottom:36px;gap:0}
  .bowl-heading h2{font-size:36px;margin:12px 0;line-height:1.16}
  .bowl-stage{flex:none;height:235px;min-height:0;margin:0}
  .bowl-detail h3{font-size:20px}.bowl-detail{padding-top:0}
  .bowl-origin{display:block;margin-top:24px;padding-top:25px}
  .bowl-origin h3{font-size:15px;margin-bottom:10px}
  .bowl-origin p{font-size:12px;line-height:1.8}
  .ingredients-copy{margin-bottom:30px}.ingredients-copy h2{font-size:46px}
  .ingredient-scroll{display:block}
  #ingredient-panel{display:none}
  .ingredient-chapter{min-height:0;justify-content:flex-start;padding:55px 0 45px}
  .ingredient-chapter:last-child{min-height:0}
  .ingredient-mobile-photo{display:block;margin-bottom:28px}
  .ingredient-mobile-photo img{height:300px;object-fit:contain}
  .ingredient-chapter h3{font-size:32px;margin:15px 0}
  .ingredient-chapter .body-copy{font-size:15px;line-height:1.9}
  .kitchen-small{width:100%;margin-top:32px}.kitchen .handwritten{margin-top:25px;max-width:100%;font-size:20px}
  .footer-top .footer-fish{padding-top:58px;margin-top:25px}
  .fish-hello{padding:15px 26px;font-size:30px;right:0}
  .footer-wordmark{font-size:25vw;margin-top:15px}
}
/* A complete step, its controls and its story must remain reachable on short screens. */
@media(max-height:1050px){.bowl-sticky{position:sticky;height:auto;min-height:0;top:var(--bowl-sticky-top,0px)}.bowl-story{height:360svh;min-height:2400px}.bowl-stage{min-height:280px}.bowl-origin{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.bowl-story{height:auto;min-height:0}.bowl-sticky{position:relative;height:auto;min-height:0}.ingredient-chapter h3{transition:none}.footer-fish img,.intro-fish.swimming img{animation:none}.js-ready .intro-fish:not(.swimming) img{opacity:1}}
.admin-preview .review-toolbar{display:none!important}
.review-toolbar[hidden]{display:none!important}
.bowl-stage>.animation-replacement{width:100%;height:100%;max-height:650px;position:relative;z-index:1;aspect-ratio:1000/850}
.footer-fish>.animation-replacement{width:100%;aspect-ratio:3/2;animation:none}
.animation-replacement[hidden],#bowl-canvas[hidden],#footer-fish-canvas[hidden]{display:none!important}
/* Keep the introduction in view throughout all four ingredient stories. */
.ingredients-copy{position:sticky;top:var(--ingredients-sticky-top,110px);z-index:12;max-width:none;display:grid;grid-template-columns:1.35fr 1fr;column-gap:8%;padding:16px 0 20px;margin-bottom:28px;background:var(--mint);border-bottom:1px solid #245a4830}
.ingredients-copy>.eyebrow{grid-column:1/-1;margin:0 0 8px;font-size:10px}
.ingredients .ingredients-copy h2{grid-column:1;margin:0;font-size:clamp(32px,3.8vw,58px);line-height:1.12}
.ingredients-copy>.body-copy{grid-column:2;grid-row:2;align-self:center;max-width:540px;margin:0;font-size:13px;line-height:1.7}
.ingredient-scroll{isolation:isolate}
#ingredient-panel{top:var(--ingredient-panel-top,330px)}
#ingredient-image{height:var(--ingredient-photo-height,45vh);min-height:100px}
.ingredient-chapter{scroll-margin-top:var(--ingredient-panel-top,330px)}
@media(max-width:800px){.ingredients-copy{grid-template-columns:1.15fr 1fr;column-gap:5%}.ingredients-copy>.body-copy{font-size:12px}}
@media(max-width:560px){.ingredients-copy{display:block;padding:12px 0 16px;margin-bottom:0}.ingredients-copy>.eyebrow{font-size:9px;line-height:1.5;margin:0 0 7px}.ingredients .ingredients-copy h2{font-size:30px;line-height:1.12;margin:0 0 10px}.ingredients-copy>.body-copy{font-size:11px;line-height:1.6;margin:0}.ingredient-chapter{padding-top:30px}.ingredient-mobile-photo img{height:min(300px,40svh)}}