/* Experiential pass: direct entry, origin story and compact mobile browsing. */
#home #enterMenu{display:flex;align-items:center;justify-content:center;gap:16px;min-width:178px;min-height:50px;margin:26px auto 0;padding:0 22px;border:0;border-radius:999px;background:#ed1c24;color:#fff;font:800 12px/1 DMSans,Arial,sans-serif;letter-spacing:.08em;box-shadow:0 8px 24px #ed1c2430;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
#home #enterMenu:hover{transform:translateY(-2px);box-shadow:0 12px 30px #ed1c2440}
#home #enterMenu:focus-visible{outline:3px solid #171411;outline-offset:4px}
#home #enterMenu b{font-size:18px}
#home.is-finale #enterMenu{display:none!important}

#storia{min-height:0;padding:clamp(78px,9vw,132px) clamp(22px,7vw,104px);background:#f4f3f1}
#storia>.eyebrow{color:#c9151e}
#storia h2{max-width:1060px;margin:18px 0 22px;font-size:clamp(42px,6.4vw,82px);line-height:.92;letter-spacing:-.065em}
#storia .story-copy{max-width:790px}
#storia .story-copy p{margin:0;color:#514b45;font-size:clamp(16px,1.6vw,20px);line-height:1.65}
.story-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,42px);max-width:1180px;margin:54px 0 0}
.story-step{min-height:190px;padding:17px 0 0;border-top:1px solid #c9c3bc;transition:transform .35s ease,border-color .35s ease}
.story-step>span{color:#ed1c24;font:800 12px/1 DMSans,Arial,sans-serif;letter-spacing:.12em}
.story-step h3{margin:20px 0 10px;color:#171411;font-size:clamp(21px,2.4vw,30px);line-height:1;letter-spacing:-.04em}
.story-step p{max-width:320px;margin:0;color:#69635e;font-size:14px;line-height:1.6}
#storia.is-visible .story-step{animation:story-step-in .6s cubic-bezier(.2,.8,.2,1) both}
#storia.is-visible .story-step:nth-child(2){animation-delay:.12s}
#storia.is-visible .story-step:nth-child(3){animation-delay:.24s}
@keyframes story-step-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.story-ingredients{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:22px;align-items:start;max-width:980px;margin:37px 0 0;padding:24px 27px;border-left:3px solid #ed1c24;background:#fffaf1}
.story-ingredients strong{font-size:12px;line-height:1.4;letter-spacing:.08em}
.story-ingredients p{margin:0;color:#514b45;font-size:14px;line-height:1.65}
#ordina{scroll-margin-top:90px}

/* Keep every animated story line readable and leave the CTA clear below it. */
#home>.home-bottom{top:18%!important;width:min(1080px,90vw)!important}
#home h1,#home h1.is-story-text{display:grid!important;place-items:center;min-height:2.35em;margin:0 auto 18px!important;padding:0 12px;font-size:clamp(42px,5.2vw,76px)!important;font-weight:800!important;line-height:1.02!important;letter-spacing:-.045em!important;text-align:center;text-transform:none!important;text-wrap:balance;overflow-wrap:anywhere}
#home h1.is-story-text{text-transform:none!important}
#home #enterMenu{position:relative!important;inset:auto!important;margin:0 auto!important;transform:none!important}

@media(max-width:760px){
 #home #enterMenu{width:100%;min-height:52px;margin:19px auto 0;border-radius:7px;box-shadow:4px 4px 0 #171411;font-size:12px}
 #home.is-finale #enterMenu{display:none!important}
 #storia{padding:76px 20px 70px}
 #storia h2{font-size:clamp(39px,10vw,58px);line-height:.94}
 #storia .story-copy p{font-size:15px;line-height:1.6}
 .story-sequence{grid-template-columns:1fr;gap:0;margin-top:35px}
 .story-step{min-height:0;padding:17px 0 19px}
 .story-step h3{margin:10px 0 7px;font-size:23px}
 .story-step p{max-width:440px;font-size:13px}
 .story-ingredients{grid-template-columns:1fr;gap:9px;margin-top:25px;padding:19px 17px}
 #menuPage #categories{position:sticky;top:60px;z-index:30;display:flex;flex-wrap:nowrap;gap:8px;margin:13px -14px 0;padding:9px 14px 11px;border:0;border-bottom:1px solid #e5dbce;background:#fbf5e9f5;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;backdrop-filter:blur(12px)}
 #menuPage #categories::-webkit-scrollbar{display:none}
 #menuPage #categories button.menu-tab{display:flex;flex:0 0 auto;flex-direction:row;align-items:center;justify-content:center;gap:7px;min-width:max-content;min-height:40px;padding:8px 12px;border:1px solid #ded3c4;border-radius:999px;background:#fffaf1!important;color:#26221f!important;font:800 10px/1 DMSans,Arial,sans-serif;white-space:nowrap}
 #menuPage #categories button.menu-tab .category-name{font:inherit!important}
 #menuPage #categories button.menu-tab small{color:#777;font:600 9px/1 DMSans,Arial,sans-serif}
 #menuPage #categories button.menu-tab[aria-pressed=true]{border-color:#c9151e;background:#ed1c24!important;color:#fff!important}
 #menuPage #categories button.menu-tab[aria-pressed=true] small{color:#fff}
 #menuPage .results-head{scroll-margin-top:116px;margin-top:22px}
 #home>.home-bottom{top:auto!important;width:100%!important}
 #home h1,#home h1.is-story-text{min-height:3.05em;margin:0 auto 13px!important;padding:0 4px;font-size:clamp(35px,9.5vw,52px)!important;line-height:1.04!important;letter-spacing:-.04em!important}
}

@media(prefers-reduced-motion:reduce){
 #home #enterMenu,.story-step{transition:none}
 #storia.is-visible .story-step{animation:none}
}

/* Keep the story title box stable so the menu button never jumps between frames. */
#home h1,#home h1.is-story-text{height:2.6em!important;min-height:0!important;max-height:2.6em!important;overflow:hidden}
#home h1[hidden],#home h1.is-story-text[hidden]{display:none!important}
@media(max-width:760px){
 #home h1,#home h1.is-story-text{height:3.7em!important;min-height:0!important;max-height:3.7em!important}
}