/* Poster scale, playful layers and food browsing. Homepage only. */
.playful { --sun:#f6c744; }
.playful .nav,.playful .nav.scrolled { inset:14px 16px auto; width:calc(100% - 32px); border:2px solid var(--brown); border-radius:16px; padding:12px 26px; box-shadow:0 5px 0 var(--brown); }
.playful .nav__cta { border-radius:9px; }
.playful .playful-hero { padding-top:132px; background:var(--sun); }
.hero-poster { position:relative; padding:0 4vw; }
.hero-poster__eyebrow { text-align:center; margin-bottom:20px; }
.playful .hero-poster h1 { position:relative; z-index:1; text-align:center; font-size:clamp(100px,15.5vw,220px); line-height:.79; letter-spacing:-.035em; margin:0; }
.playful .hero-poster h1>.hero-poster__line:not(.sr-only) { display:block; color:var(--brown); }
.playful .hero-poster h1>.hero-poster__line--outline:not(.sr-only) { color:var(--paper); -webkit-text-stroke:2px var(--brown); paint-order:stroke fill; text-shadow:5px 7px 0 var(--brown); }
.hero-poster__stage { position:relative; min-height:400px; margin-top:12px; }
.hero-poster__photo { position:relative; width:50%; margin:0 auto; transform:rotate(-4deg); border:3px solid var(--brown); border-radius:48% 48% 15px 15px; overflow:hidden; box-shadow:7px 8px 0 var(--brown); }
.hero-poster__photo img { display:block; width:100%; height:320px; object-fit:cover; }
.hero-poster__photo figcaption { display:none; }
.hero-poster__letter { position:absolute; left:1%; top:35px; width:21%; transform:rotate(-6deg); }
.hero-poster__heart { font:80px/.8 Georgia,serif; display:block; color:var(--orange); -webkit-text-stroke:2px var(--brown); }
.hero-poster__letter>.family-sticker { display:block; width:136px; min-height:0; border:3px solid var(--brown); border-radius:50% 50% 40% 40%; overflow:hidden; background:var(--paper); box-shadow:4px 4px 0 var(--brown); transition:transform .25s; }
.family-sticker img { display:block; width:100%; height:auto; }
.hero-poster__letter>.family-sticker:hover { transform:rotate(9deg); }
.playful .family-character>img { position:static; display:block; width:100%; height:auto; max-height:none; object-fit:contain; }
.playful .family-character { background:var(--paper); min-height:0; align-self:start; }
.playful .family-character::after { display:none; }
.playful .family-character figcaption { position:static; padding:24px; background:var(--sage); }
.playful .family-character figcaption span,.playful .family-character figcaption strong { color:var(--brown); }
.playful.motion-paused .hero-poster__letter>.family-sticker:hover { transform:none; }
.hero-poster__handwriting { font:italic 27px/1.15 Georgia,serif; margin:18px 0; }
.hero-poster__letter>p:not(.hero-poster__handwriting) { max-width:210px; font-size:13px; line-height:1.65; }
.hero-poster__letter>a,.hero-poster__links>a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.hero-poster__stamp { position:absolute; right:3%; top:12px; width:170px; height:170px; background:var(--orange); border:2px solid var(--brown); border-radius:48% 52% 42% 58% / 50% 42% 58% 50%; box-shadow:5px 5px 0 var(--brown); display:flex; flex-direction:column; justify-content:center; align-items:center; transform:rotate(12deg); }
.hero-poster__stamp b { font:900 72px/.95 var(--font-disp); }
.hero-poster__stamp span { font-size:10px; font-weight:800; margin:7px; }
.hero-poster__doodle { position:absolute; z-index:2; width:190px; transform:translate(var(--art-x,0px),var(--art-y,0px)) rotate(var(--tilt,-12deg)); }
.hero-poster__doodle--grill { left:16%; bottom:0; }
.hero-poster__doodle--ssam { right:8%; bottom:0; --tilt:12deg; }
.hero-poster__doodle img { width:100%; height:auto; filter:drop-shadow(2px 2px 0 var(--paper)); }
.hero-poster__doodle span { display:block; text-align:center; font:italic 16px Georgia,serif; }
.hero-poster__doodle:hover img { transform:rotate(8deg) scale(1.08); }
.hero-poster__book { position:absolute; left:50%; bottom:-5px; z-index:3; transform:translateX(-50%) rotate(-7deg); padding:25px 42px; border:3px solid var(--brown); border-radius:50%; background:var(--sage); font:900 34px var(--font-disp); white-space:nowrap; box-shadow:5px 5px 0 var(--brown); transition:background .2s,rotate .2s; }
.hero-poster__book:hover { background:var(--paper); rotate:5deg; }
.hero-poster__links { display:flex; gap:23px; justify-content:center; align-items:center; margin:28px 0 20px; }
.playful .hero-bottom { background:var(--sun); }
.playful .bbq-ribbon { gap:0; background:var(--brown); color:var(--paper); font-size:clamp(40px,6vw,86px); padding:10px 0; }
.playful .bbq-ribbon>span { padding-right:40px; min-width:max-content; }
.playful .bbq-ribbon i { color:var(--sun); }
.playful .table-play { position:relative; background:var(--sage); padding-top:100px; }
.playful .table-play::before { content:''; position:absolute; top:-1px; left:0; right:0; height:22px; background:radial-gradient(circle at 22px 0,var(--brown) 21px,transparent 22px) 0 0/44px 24px repeat-x; }
.playful .table-play__heading h2 { font-size:clamp(64px,8.5vw,118px); }
.playful .dish-story { background:var(--paper); transform:rotate(2deg); border-radius:16px 16px 45px 16px; }
.playful .food-showcase { border-radius:50px 50px 0 0; margin-top:-1px; position:relative; }
.playful .food-showcase h2 { max-width:850px; font-size:clamp(58px,8vw,110px); }
.playful .family-portrait { border-radius:35px 35px 0 0; overflow:hidden; transform:rotate(-1deg); }
.playful .history-story__heading h2 { font-size:clamp(64px,9vw,125px); }
.playful .family-portrait figcaption>span { font-size:clamp(36px,5vw,68px); }
.playful .gallery { background:#c2b7db; color:var(--brown); padding:85px 0; overflow:hidden; }
.playful .gallery__head { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; }
.playful .gallery__head h2 { font:900 clamp(76px,12vw,160px)/.8 var(--font-disp); letter-spacing:-.035em; color:var(--brown); margin:20px 0 0; }
.playful .gallery__head h2 em { font-style:normal; color:var(--paper); -webkit-text-stroke:2px var(--brown); paint-order:stroke fill; text-shadow:4px 5px 0 var(--brown); }
.gallery-browse { font-size:13px; line-height:1.7; }
.gallery-browse>div { display:flex; gap:12px; margin-top:18px; }
.gallery-browse button { width:54px; height:54px; border-radius:50%; border:2px solid var(--brown); background:var(--paper); color:var(--brown); font-size:26px; cursor:pointer; box-shadow:3px 3px 0 var(--brown); }
.gallery-browse button:hover { background:var(--sun); }
.playful .gallery__grid { display:flex; gap:25px; overflow-x:auto; padding:25px 10px 30px 0; scroll-snap-type:x mandatory; scrollbar-color:var(--brown) transparent; scrollbar-width:thin; }
.playful .gallery__grid figure { flex:0 0 48%; height:400px; border:3px solid var(--brown); border-radius:24px; box-shadow:6px 6px 0 var(--brown); scroll-snap-align:start; }
.playful .gallery__grid figure:nth-child(even) { border-radius:130px 130px 24px 24px; }
.playful .dinner-sketch { border-radius:24px; overflow:hidden; }
.playful .reserve h2 { font-size:clamp(80px,13vw,170px); line-height:.82; }
@keyframes poster-bob { 0%,100% { translate:0 0; } 50% { translate:0 -9px; } }
@keyframes ribbon-run { to { transform:translateX(-100%); } }
@keyframes scene-arrive { from { opacity:.55; translate:0 24px; } to { opacity:1; translate:0 0; } }
@media(prefers-reduced-motion:no-preference) {
  .playful:not(.motion-paused) .hero-poster__doodle img { animation:poster-bob 4s ease-in-out infinite; }
  .playful:not(.motion-paused) .hero-poster__doodle--ssam img { animation-delay:-2s; }
  .playful:not(.motion-paused) .bbq-ribbon>span { animation:ribbon-run 24s linear infinite; }
  .playful:not(.motion-paused) .scene-arrived { animation:scene-arrive .7s cubic-bezier(.2,.8,.3,1) both; }
}
.playful.motion-paused .hero-poster__doodle { transform:rotate(var(--tilt,-12deg)); }
.playful.motion-paused .hero-poster__doodle:hover img { transform:none; }
@media(prefers-reduced-motion:reduce) { .playful .hero-poster__doodle { transform:rotate(var(--tilt,-12deg)); }.playful .hero-poster__doodle:hover img,.playful .hero-poster__letter>.family-sticker:hover { transform:none; } }
@media(max-width:1000px) {
  .playful .nav__links { gap:15px; }
  .hero-poster__photo { width:55%; }
  .hero-poster__letter { width:20%; }
  .hero-poster__handwriting { font-size:22px; }
  .hero-poster__stamp { width:140px; height:140px; right:0; }
  .hero-poster__doodle { width:155px; }
  .hero-poster__doodle--grill { left:9%; }
  .hero-poster__doodle--ssam { right:3%; }
}
@media(max-width:760px) {
  .playful .nav,.playful .nav.scrolled { inset:10px 10px auto; width:calc(100% - 20px); padding:10px 16px; border-radius:12px; }
  .playful .playful-hero { padding-top:115px; }
  .hero-poster { padding:0 5vw; }
  .hero-poster__eyebrow { font-size:9px!important; max-width:270px; margin:0 auto 24px; line-height:1.7; }
  .playful .hero-poster h1 { font-size:17vw; line-height:.88; margin:0; }
  .playful .hero-poster h1>.hero-poster__line--outline { text-shadow:3px 4px 0 var(--brown); -webkit-text-stroke:1.5px var(--brown); }
  .hero-poster__stage { min-height:350px; margin-top:35px; }
  .hero-poster__photo { width:88%; margin-top:0; }
  .hero-poster__photo img { height:235px; }
  .hero-poster__photo figcaption { font-size:16px; }
  .hero-poster__letter { position:relative; width:100%; transform:none; top:auto; left:auto; text-align:center; margin:0 auto 20px; }
  .hero-poster__letter>.family-sticker { display:none; }
  .hero-poster__heart,.hero-poster__letter>p:not(.hero-poster__handwriting),.hero-poster__letter>a { display:none; }
  .hero-poster__handwriting { font-size:19px; margin:0; }
  .hero-poster__handwriting br { display:none; }
  .hero-poster__stamp { top:30px; right:-2%; width:99px; height:99px; z-index:3; }
  .hero-poster__stamp b { font-size:43px; }
  .hero-poster__stamp span { font-size:7px; margin:3px; }
  .hero-poster__doodle { width:105px; bottom:-3px; }
  .hero-poster__doodle--grill { left:-4%; }
  .hero-poster__doodle--ssam { right:-4%; }
  .hero-poster__doodle span { font-size:12px; }
  .hero-poster__doodle--grill span { max-width:85px; }
  .hero-poster__book { bottom:-18px; padding:19px 27px; font-size:28px; }
  .hero-poster__links { gap:12px; margin:40px 0 16px; flex-wrap:wrap; }
  .hero-poster__links>a { font-size:11px; }
  .playful .table-play__heading h2 { font-size:17vw; }
  .playful .gallery__head { display:block; }
  .playful .gallery__head h2 { font-size:24vw; }
  .gallery-browse { display:flex; gap:15px; justify-content:space-between; align-items:center; margin-top:25px; font-size:11px; }
  .gallery-browse>div { margin:0; }
  .gallery-browse button { width:44px; height:44px; }
  .playful .gallery__grid { gap:17px; }
  .playful .gallery__grid figure { flex-basis:86%; height:290px; }
  .playful .history-story__heading h2 { font-size:17vw; }
  .playful .reserve h2 { font-size:22vw; }
}