/* One family, one counter, one generous serving. Local cinematic direction. */
:root{--green:#09251b;--deep:#061b13;--cream:#fff4d3;--gold:#ffda38;--red:#c71927;--line:#fff4d32b;--header:96px;color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:var(--cream);background:var(--green);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header-live,var(--header))}body{margin:0}h1,h2,h3,h4,p,figure{margin:0}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button{color:inherit}img,video{display:block;max-width:100%}video{background:var(--deep)}[hidden]{display:none!important}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:8px;left:8px;max-width:calc(100% - 16px);z-index:100;background:var(--gold);color:var(--deep);padding:15px}.skip-link:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.masthead{min-height:var(--header);position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:36px;padding:8px 4%;background:#071e16f5;border-bottom:1px solid #fff4d31a;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:16px}.brand img{width:76px;height:76px;object-fit:contain}.brand span{font-size:1.125rem;font-weight:700;white-space:nowrap}.brand small{display:block;font-size:1rem;letter-spacing:.15em;margin-top:8px;color:var(--gold)}.masthead>nav:not(#mobile-nav){display:flex;gap:30px;margin-left:auto;font-size:1rem}.masthead nav a{padding:12px 0;border-bottom:1px solid transparent}.masthead nav a:hover{border-bottom-color:var(--gold)}.visit-button{font-size:1rem;padding:15px 20px;background:var(--gold);color:var(--deep);font-weight:700;white-space:nowrap;display:flex;gap:22px}.nav-toggle{border:1px solid var(--line);background:none;min-height:44px;padding:8px 12px}
.eyebrow{font-size:1rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--gold);line-height:1.5}h2{font:400 clamp(3rem,6vw,6.5rem)/.98 Georgia,'Times New Roman',serif;letter-spacing:-.045em}h2 em{color:var(--gold);font-weight:400}p{line-height:1.6}.solid-link{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;min-height:48px;padding:15px 22px;background:var(--gold);color:var(--deep);font-size:1rem;font-weight:700;border:0}.solid-link:hover{background:#ffe669}.studio-backdrop{position:absolute;inset:0;background:#172d1e url('assets/shared-pineapple-set.webp') center/cover no-repeat;z-index:-2}.welcome{position:relative;isolation:isolate;min-height:calc(100svh - var(--header));display:grid;grid-template-columns:1fr 1.25fr;align-items:center;padding:50px 6% 95px;overflow:hidden}.welcome::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#061b1380,transparent 65%);z-index:-1}.welcome-copy{position:relative;z-index:2}.welcome h1{font-size:clamp(4rem,9.2vw,10.2rem);font-weight:900;letter-spacing:-.075em;line-height:.84;margin:27px 0 30px}.welcome h1 span{color:var(--gold)}.welcome-description{font-size:clamp(1rem,1.3vw,1.2rem);margin-bottom:28px;color:#fff4d3}.welcome-food{align-self:center;position:relative;margin-left:-3%;margin-right:-8%}.welcome-food img{width:100%;max-height:76svh;object-fit:contain;filter:drop-shadow(0 28px 24px #0005)}.welcome-food figcaption{display:flex;align-items:center;gap:12px;justify-content:center;font-size:1rem;margin-top:-1%}.tiny-rule{width:36px;height:1px;background:var(--gold)}.welcome-bottom{position:absolute;bottom:26px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;border-top:1px solid var(--line);font-size:1rem;color:#fff4d3}.welcome-bottom a{color:var(--cream);padding:10px 0}.welcome-bottom a span{margin-left:30px}
.film-track{position:relative;background:#142d1f}.film-stage{position:relative;height:calc(100svh - var(--header));min-height:600px;isolation:isolate;overflow:hidden}.motion-on #bowls{height:210svh}.motion-on #sunshine{height:245svh}.motion-on .film-stage{position:sticky;top:var(--header-live,var(--header))}.scene-copy{position:absolute;left:6%;top:17%;z-index:4;max-width:35%;pointer-events:none}.scene-copy h2{margin:22px 0 24px}.scene-copy>p:last-child{font-size:1rem;color:#fff4d3;line-height:1.7}.bowl-cinema-window{position:absolute;inset:2% 2% 12% 40%;overflow:hidden;z-index:1}.bowl-cinema-window #bowl-film,.bowl-cinema-window #bowl-poster,.bowl-cinema-window #bowl-composite{position:absolute;width:100%;height:100%;inset:0;object-fit:contain}.bowl-stage[data-renderer=prepared-alpha] #bowl-film{opacity:0!important;visibility:hidden}.bowl-stage[data-composited=true] #bowl-composite{visibility:visible}.bowl-stage[data-composited=true] #bowl-poster{opacity:0}.bowl-stage[data-enhanced=true][data-ready=false] #bowl-film{opacity:0}.bowl-stage[data-enhanced=true] #bowl-poster{display:block}.bowl-stage[data-ready=true] #bowl-poster{visibility:hidden}#bowl-poster{display:none;pointer-events:none}#bowl-composite{visibility:hidden;z-index:1;pointer-events:none}.scene-bottom{position:absolute;bottom:22px;left:6%;right:6%;z-index:5;display:flex;align-items:end;justify-content:space-between;gap:25px}.scene-cue p{font-family:Georgia,serif;font-size:1.5625rem}.scene-cue>span{display:block;font-size:1rem;color:#fff4d3;margin-top:4px}.film-controls{display:flex;align-items:center;gap:12px;min-width:240px}.film-controls button{border:0;border-bottom:1px solid #fff4d36b;background:transparent;padding:10px 0;min-height:44px;min-width:70px;text-align:left;font-size:1rem}.film-controls input{width:105px;min-width:30px;min-height:44px;accent-color:var(--gold)}.film-controls output{font-size:1rem;width:4ch;color:#fff4d3}.next-scene{font-size:1rem;padding:10px 0;border-bottom:1px solid #fff4d34d}.next-scene span{margin-left:16px}.film-stage>[role=status]:not(.sr-only){position:absolute;left:6%;right:6%;bottom:84px;background:var(--deep);padding:10px;z-index:6;font-size:1rem}.film-window{position:absolute;inset:0;z-index:0}.film-window video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cinema-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#071e1670 0%,transparent 42%),linear-gradient(0deg,#071e16b0,transparent 18%);z-index:1;pointer-events:none}
.menu-section{padding:82px 6% 55px;background:#f7edce;color:var(--deep);position:relative}.menu-section .eyebrow{color:#a32420}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}.section-heading h2{font-size:clamp(3rem,5.5vw,5.5rem);margin-top:18px}.section-heading h2 em{color:#286040}.section-heading>p{font-size:1.0625rem;line-height:1.7;border-left:2px solid #b82a26;padding-left:25px}.build-beat{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:36px;align-items:center;background:var(--green);color:var(--cream);padding:28px;margin-bottom:46px}.build-film{position:relative;margin:0}.build-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--green)}.build-beat .eyebrow{color:var(--gold);margin:0}.build-layers ol{list-style:none;margin:20px 0 0;padding:0}.build-layers li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;font-size:1.125rem;line-height:1.5;border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.build-layers li:first-child{border-top:0;padding-top:0;margin-top:0}.build-layers li span{font-size:1rem;letter-spacing:.1em;color:var(--gold)}.build-caption{font-size:1rem;margin-top:22px;color:#cfe0cb}.bowl-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.menu-card{position:relative;border-top:1px solid #09251b33;padding-top:20px}.menu-card img{aspect-ratio:1;width:100%;object-fit:contain;transition:transform .4s ease}.menu-card:hover img{transform:translateY(-8px)}
/* Three cards are cut-outs floating on the cream; this one is a real
   photograph on a studio backdrop, so it fills its square instead of
   being letterboxed inside it. Sized to the same square the cut-outs
   occupy so the row keeps one footprint. */
.menu-card img.is-photo{object-fit:cover;width:100%;max-width:100%;margin-left:0;border-radius:8px}
.menu-number{display:block;font-size:1rem;color:#8b3b1e;letter-spacing:.1em;margin:15px 0 12px}.menu-card h3{font-family:Georgia,serif;font-size:1.75rem;font-weight:400;letter-spacing:-.035em}.menu-card p{font-size:1rem;margin-top:13px;color:#263d30}.plate-menu,.extras-menu{border-top:1px solid #09251b33;margin-top:44px;padding:30px 0 0}.plate-menu{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:start}.plate-menu h3,.extras-menu h3{font-family:Georgia,serif;font-size:1.8125rem;font-weight:400;margin:10px 0}.plate-menu>div>p{font-size:1rem;color:#263d30}.plate-list,.extras-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}.plate-list{grid-template-columns:1fr 1fr;gap:16px 30px}.plate-list li,.extras-list li{border-top:1px solid #09251b24;padding-top:13px}.plate-list b,.extras-list b{font-family:Georgia,serif;font-size:1.375rem;font-weight:400;display:block;letter-spacing:-.02em}.plate-list span,.extras-list span{display:block;font-size:1rem;color:#263d30;margin-top:4px}.extras-menu{padding-bottom:4px}.extras-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.smoothie-menu{display:grid;grid-template-columns:1fr 1.4fr auto;gap:30px;align-items:center;border-top:1px solid #09251b33;border-bottom:1px solid #09251b33;margin-top:48px;padding:32px 0}.smoothie-menu h3{font-family:Georgia,serif;font-size:1.8125rem;font-weight:400;margin:10px 0}.smoothie-menu p{font-size:1rem;color:#263d30}.flavor-list{display:grid;gap:23px}.flavor-list>div{position:relative;padding-left:30px}.flavor-list h4{font-size:1rem;font-weight:600;margin-bottom:3px}.flavor-dot{width:13px;height:13px;position:absolute;left:0;top:3px;border-radius:50%;border:1px solid #0002}.strawberry{background:#d95861}.mango{background:#efb723}.menu-section .solid-link{background:var(--green);color:var(--cream)}.availability{font-size:1rem;margin-top:22px;color:#334b3a}.availability a{text-decoration:underline;text-underline-offset:4px}
.people-track{background:#632022}.people-stage{position:relative;isolation:isolate;padding:46px 6%}.people-heading{position:relative;z-index:5;pointer-events:none}.people-heading h2{font-size:clamp(2.6rem,4.6vw,5rem);margin-top:17px}.people-scene{position:relative;margin-top:40px}.people-scene figure{position:relative}.people-scene img,.people-scene video{max-height:72svh;object-fit:contain;margin:auto}.people-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.moment-caption{margin-top:20px;text-align:center;position:relative;z-index:3}.moment-caption>span{font-family:Georgia,serif;font-size:clamp(1.35rem,2.3vw,2.4rem)}.moment-caption p{font-size:1rem;margin-top:6px}.people-controls{display:flex;justify-content:space-between;align-items:center;position:absolute;bottom:18px;left:6%;right:6%;z-index:6;font-size:1rem}.people-controls>div{display:flex;gap:8px}.people-controls button{width:46px;height:44px;background:#061b1380;border:1px solid var(--line);font-size:1.375rem}.motion-on .people-track{height:265svh}.motion-on .people-stage{position:sticky;top:var(--header-live,var(--header));height:calc(100svh - var(--header));min-height:600px;overflow:hidden}.motion-on .people-heading{position:absolute;top:7%;left:6%;max-width:37%}.motion-on .people-gallery{position:absolute;inset:0}.motion-on .people-scene{position:absolute;inset:0;margin:0;padding:5% 5% 88px 44%;display:flex;flex-direction:column;justify-content:center;transition:opacity .4s ease,transform .6s ease;isolation:isolate;visibility:hidden;opacity:0}.motion-on .people-scene::before{content:'';position:absolute;inset:-30px;background:linear-gradient(90deg,#45191bea,#34171bd9 32%,#151e1280),var(--people-backdrop) center/cover;filter:blur(22px);z-index:-1}.motion-on .people-scene[data-people="0"]{visibility:visible;opacity:1}.motion-on .people-scene>figure{flex:1;min-height:0;display:flex;justify-content:center;flex-direction:column;align-items:center}.motion-on .people-scene>figure>img,.motion-on .people-scene>figure>video{height:100%;min-height:0;max-width:100%;max-height:100%;width:auto}.motion-on .people-pair{flex:1;min-height:0;align-items:center;gap:14px}.motion-on .people-pair figure{min-width:0;min-height:0;max-height:100%}.motion-on .people-pair img,.motion-on .people-pair video{width:100%;height:auto;max-height:58svh;object-fit:contain}.motion-on .moment-caption{flex:none;margin-top:16px}.more-moments{background:#4b171b;padding:0 6%;border-top:1px solid #fff4d328}.more-moments summary{padding:26px 0 30px;display:flex;justify-content:center;font-size:1rem;list-style:none;cursor:pointer}.more-moments summary::-webkit-details-marker{display:none}.more-cta{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:14px 26px;background:#061b13d9;border:1px solid var(--gold);color:var(--cream);font-size:1.25rem}.more-moments summary:hover .more-cta{background:#061b13;border-color:var(--cream)}.more-chev{font-size:1.5rem;line-height:1;color:var(--gold);transition:transform .25s ease}.more-moments[open] .more-chev{transform:rotate(45deg)}.no-motion .more-chev{transition:none}.extra-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:20px 0 45px}.extra-gallery img,.extra-gallery video{width:100%;height:420px;object-fit:contain}.extra-gallery figcaption{font-size:1rem;margin-top:12px;text-align:center}
.find-section{display:grid;grid-template-columns:1.25fr 1fr;background:#e8cf55;color:var(--deep);min-height:650px}.trailer-world{position:relative;isolation:isolate;min-height:650px;overflow:hidden}.trailer-world>img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:52% center;z-index:-2}.trailer-world::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#071e16d9,transparent 70%);z-index:-1}.trailer-world>div{position:absolute;bottom:9%;left:10%;right:6%;color:var(--cream)}.trailer-world h2{margin-top:18px;font-size:clamp(3.5rem,6vw,6.5rem)}.schedule-panel{padding:65px 12%;align-self:center}.schedule-panel>.eyebrow{color:#553812;margin-bottom:32px}.schedule-panel h3{font-family:Georgia,serif;font-size:clamp(2rem,3vw,3.5rem);font-weight:400;line-height:1.05;letter-spacing:-.045em;margin:12px 0 22px}.schedule-panel p{font-size:1rem}.schedule-mark{display:none}.social-links{display:flex;gap:25px;flex-wrap:wrap;margin-top:28px}.social-links a{font-size:1rem;border-bottom:1px solid #09251b70;padding:10px 0}#schedule-freshness{font-size:1rem;margin-top:25px;opacity:1}.event-item+.event-item{margin-top:28px;border-top:1px solid #09251b40;padding-top:22px}.event-state{font-size:1rem;font-weight:700}.event-links{display:flex;gap:20px;margin-top:18px;font-size:1rem;text-decoration:underline}
.catering-section{padding:80px 6%;background:var(--red)}.catering-intro .eyebrow{color:var(--cream)}.catering-intro h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(3.1rem,7.1vw,8rem);font-weight:900;letter-spacing:-.067em;line-height:.9;margin:22px 0}.catering-intro h2 span{color:var(--gold)}.catering-intro>p:last-child{font-size:1.125rem}.catering-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:center;margin-top:45px}/* height:auto is load-bearing. The img carries width="1600" height="900"
   attributes, which become a presentational height. With no CSS height to
   beat it, aspect-ratio could not govern and the picture rendered 900px tall
   inside a 343px column on a phone -- a portrait letterbox cropping almost
   all of a landscape photograph away. */
.catering-grid>figure img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}.catering-grid figcaption{font-family:Georgia,serif;font-size:1.75rem;margin-top:15px}.inquiry-panel{border-top:1px solid #fff4d36b;padding-top:25px}
.inquiry-panel [hidden]{display:none!important}
.topic-field{border:0;padding:0;margin:0 0 22px;min-width:0}
.topic-field legend{padding:0;font-size:1rem;margin-bottom:12px}
.topic-chips{display:flex;flex-wrap:wrap;gap:10px}
.topic-chips label{position:relative;display:inline-flex;flex-direction:row;align-items:center;margin:0;gap:0;min-height:44px;padding:11px 16px;border:1px solid var(--cream);color:var(--cream);font-size:1rem;line-height:1.2;cursor:pointer}
.topic-chips input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.topic-chips label:hover{background:#fff4d31f}
.topic-chips label:focus-within{outline:3px solid var(--cream);outline-offset:3px}
.form-row.solo{grid-template-columns:1fr}.inquiry-panel h3{font:400 30px Georgia,serif;margin-bottom:12px}.inquiry-note{font-size:1rem;max-width:440px;opacity:1;margin-bottom:22px}form label,#inquiry-result>label{display:flex;flex-direction:column;font-size:1rem;gap:8px;margin-bottom:17px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}input,textarea{border-radius:0}form input,form textarea,#inquiry-message{width:100%;min-width:0;border:1px solid #fff4d378;background:#5b07122e;color:var(--cream);padding:12px;min-height:45px;resize:vertical}form textarea::placeholder{color:#fff4d3;font-size:1rem}.inquiry-panel .solid-link{width:100%;margin-top:6px}.inquiry-actions{display:flex;align-items:center;gap:20px;margin-top:18px}.inquiry-actions button{border:0;background:var(--gold);color:var(--deep);padding:13px 18px;min-height:44px}.inquiry-actions a{font-size:1rem;text-decoration:underline;text-underline-offset:5px}#inquiry-status{font-size:1rem;margin-top:18px}#edit-inquiry{border:0;border-bottom:1px solid #fff4d380;background:none;padding:12px 0;margin-top:8px;font-size:1rem}.no-js-form{display:none}
.site-footer{background:var(--deep);padding:50px 6%;display:grid;grid-template-columns:180px 1fr auto;gap:50px;align-items:center}.site-footer img{width:180px;height:180px;object-fit:contain}.site-footer>p{font-family:Georgia,serif;font-size:clamp(2rem,3.3vw,3.5rem);line-height:1.1;letter-spacing:-.04em}.site-footer em{color:var(--gold)}.site-footer nav{display:flex;gap:30px;font-size:1rem}.review-footer{padding:18px 6%;background:var(--deep);border-top:1px solid var(--line);font-size:1rem;color:#fff4d3;display:flex;gap:25px;align-items:start}.review-footer details{max-width:900px}.review-footer summary{padding:12px 0}.review-footer p{margin:12px 0}.review-footer a{text-decoration:underline}.review-footer>button{position:fixed;z-index:55;bottom:14px;left:16px;background:#071e16eb;border:1px solid #fff4d35b;border-radius:30px;font-size:1rem;min-height:40px;padding:10px 15px;box-shadow:0 2px 12px #0002}.no-motion .film-stage{height:850px}.no-motion .people-stage{padding-top:55px}.no-motion #bowl-poster{max-height:100%}
@media(min-width:1600px){.welcome-copy{max-width:780px}.welcome-food{max-width:1000px}.film-controls input{width:160px}}
@media(max-width:1050px){.masthead{gap:20px}.masthead>nav:not(#mobile-nav){gap:18px}.brand span{font-size:1rem}.brand small{font-size:1rem}.welcome h1{font-size:10.5vw}.scene-copy h2{font-size:7vw}.next-scene{display:none}.build-beat{grid-template-columns:1fr;gap:20px;padding:18px;margin-bottom:34px}.build-film{max-width:380px;margin:0 auto;width:100%}.bowl-menu{gap:18px}.menu-card h3{font-size:1.5rem}.plate-menu{grid-template-columns:1fr;gap:22px}.extras-list{grid-template-columns:1fr 1fr}.smoothie-menu{grid-template-columns:1fr 1fr}.smoothie-menu>.solid-link{grid-column:1/-1;justify-self:start}.catering-grid{gap:4%}.site-footer{gap:30px;grid-template-columns:140px 1fr}.site-footer img{width:140px;height:140px}.site-footer nav{grid-column:2}}
@media(min-width:1051px){.build-beat{grid-template-columns:minmax(0,520px) 1fr;gap:44px;padding:34px}.build-layers ol{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}.build-layers li:nth-child(-n+2){border-top:0;padding-top:0;margin-top:0}}
@media(max-width:900px){.bowl-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}}
@media(max-width:700px){.build-film video{aspect-ratio:1}
 :root{--header:78px}.masthead{gap:12px;padding:7px 5%}.brand{gap:9px}.brand img{width:58px;height:58px}.brand span{font-size:1rem}.brand small{font-size:1rem;margin-top:5px;letter-spacing:.11em}.masthead>nav:not(#mobile-nav){display:none}.visit-button{margin-left:auto;padding:11px 13px;font-size:1rem;min-height:42px;gap:6px}.visit-button span{display:none}.nav-toggle{font-size:1rem;min-height:42px;padding:9px}.brand span{display:none}.brand img{width:62px;height:62px}.nav-toggle{display:block}.welcome{min-height:calc(100svh - var(--header));grid-template-columns:1fr;padding:28px 6% 73px;align-content:start;gap:0}.welcome-copy{align-self:start}.welcome .eyebrow{font-size:1rem;letter-spacing:.12em}.welcome h1{font-size:clamp(4.5rem,18vw,7rem);line-height:.82;margin:18px 0 17px}.welcome h1 br{display:none}.welcome h1 span{display:block}.welcome-description{font-size:1rem;line-height:1.6;max-width:210px;margin-bottom:0}.welcome-copy>.solid-link{display:none}.welcome-food{margin:-18px -7% 0 8%;align-self:start}.welcome-food img{max-height:47svh;min-height:230px;object-fit:contain;width:100%}.welcome-food figcaption{font-size:1rem;margin-top:-8px}.welcome-bottom{bottom:15px;font-size:1rem;padding-top:12px;gap:12px}.welcome-bottom>span{max-width:150px;line-height:1.4}.welcome-bottom a{font-size:1rem}.welcome-bottom a span{margin-left:12px}.eyebrow{font-size:1rem}.film-stage{height:calc(100svh - var(--header));min-height:590px}.motion-on #bowls{height:205svh}.motion-on #sunshine{height:235svh}.scene-copy{left:6%;right:6%;top:24px;max-width:none}.scene-copy h2{font-size:clamp(2.8rem,11vw,4rem);margin:12px 0}.scene-copy h2 br{display:none}.scene-copy>p:last-child{font-size:1rem;line-height:1.5}.scene-copy>p:last-child br{display:none}.scene-copy>p:last-child{max-width:290px}.bowl-cinema-window{inset:185px -8% 94px}.scene-bottom{bottom:17px;gap:8px;align-items:center;flex-wrap:wrap}.scene-cue{flex:1;min-width:130px}.scene-cue p{font-size:1.1875rem}.scene-cue>span{font-size:1rem;max-width:170px}.film-controls{min-width:160px;gap:8px}.film-controls button{font-size:1rem;min-width:55px}.film-controls input{width:65px}.film-controls output{font-size:1rem}.film-window{inset:120px 0 65px}.cinema-stage>.scene-copy{top:24px}.cinema-stage>.scene-copy h2{margin:12px 0}.cinema-stage>.scene-copy>p:last-child{max-width:none}.cinema-stage::after{background:linear-gradient(#142c20 0%,#142c20 12%,transparent 32%),linear-gradient(0deg,#10271a 2%,transparent 30%)}.cinema-stage .scene-copy{z-index:4}.no-motion .film-stage{height:750px}.no-motion .film-window{inset:140px 0 80px}
 .menu-section{padding:48px 6% 32px}.section-heading{display:block;margin-bottom:30px}.section-heading h2{font-size:clamp(2.6rem,10.3vw,4rem);margin-top:14px}.section-heading>p{border-left:0;padding:0;margin-top:20px;font-size:1rem}.section-heading>p br{display:none}.bowl-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.menu-card{padding-top:10px}.menu-card img{width:115%;max-width:115%;margin-left:-7.5%}.menu-number{margin:8px 0;font-size:1rem}.menu-card h3{font-size:1.4375rem;line-height:1.05}.menu-card p{font-size:1rem;line-height:1.5;margin-top:10px}.plate-menu,.extras-menu{margin-top:32px;padding-top:26px}.plate-list{grid-template-columns:1fr;gap:14px}.extras-list{grid-template-columns:1fr;gap:14px}.smoothie-menu{grid-template-columns:1fr;gap:22px;margin-top:30px;padding:25px 0}.smoothie-menu h3{font-size:1.8125rem}.plate-menu p br{display:none}.smoothie-menu p br{display:none}.smoothie-menu>.solid-link{width:100%;justify-self:stretch}.availability{font-size:1rem;line-height:1.65}
 .people-stage{padding:35px 6%}.people-heading h2{font-size:clamp(2.4rem,9vw,3.8rem);margin-top:12px}.motion-on .people-track{height:250svh}.motion-on .people-stage{min-height:600px}.motion-on .people-heading{top:25px;left:6%;right:6%;max-width:none}.motion-on .people-heading h2{font-size:clamp(2.1rem,8vw,3rem)}.motion-on .people-heading h2 br{display:none}.motion-on .people-heading h2 em{display:block}.motion-on .people-scene{padding:180px 0 82px}.motion-on .people-pair{padding:0 4%;gap:10px}.motion-on .people-pair img,.motion-on .people-pair video{max-height:48svh}.motion-on .people-scene>figure{width:100%}.motion-on .people-scene>figure>img,.motion-on .people-scene>figure>video{height:100%;width:100%;object-fit:contain}.moment-caption{padding:0 6%}.moment-caption>span{font-size:1.3125rem}.moment-caption p{font-size:1rem;margin-top:2px}.motion-on .moment-caption{margin-top:12px}.people-controls{font-size:1rem;bottom:14px}.people-controls button{width:44px;height:40px;font-size:1.3125rem}.more-moments summary{font-size:1rem;padding:22px 0 26px}.more-cta{font-size:1.125rem;padding:13px 20px;gap:10px}.extra-gallery{grid-template-columns:1fr;gap:30px}.extra-gallery img,.extra-gallery video{height:auto;max-height:65svh}.find-section{grid-template-columns:1fr;min-height:0}.trailer-world{min-height:430px}.trailer-world h2{font-size:4.1rem}.trailer-world>div{left:6%;bottom:8%}.schedule-panel{padding:38px 6%}.schedule-panel>.eyebrow{margin-bottom:22px}.schedule-panel h3{font-size:2.4rem;max-width:300px}.schedule-panel p{font-size:1rem}.social-links{margin-top:18px}.catering-section{padding:45px 6%}.catering-intro h2{font-size:clamp(2.8rem,12vw,4.8rem);line-height:.93;margin:20px 0}.catering-intro>p:last-child{font-size:1rem}.catering-grid{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:30px}.catering-grid>figure img{aspect-ratio:1/1}.catering-grid figcaption{font-size:1.5rem}.inquiry-panel h3{font-size:1.75rem}.form-row{gap:12px}.site-footer{padding:35px 6%;grid-template-columns:100px 1fr;gap:20px}.site-footer img{width:100px;height:100px}.site-footer>p{font-size:1.625rem}.site-footer nav{grid-column:1/-1;justify-content:space-between;gap:15px;font-size:1rem}.review-footer{padding-bottom:72px}.review-footer summary{font-size:1rem}.review-footer>button{left:12px;bottom:10px;font-size:1rem;min-height:36px;padding:8px 12px}
}
@media(max-width:700px) and (max-height:740px){.welcome{padding-top:20px}.welcome h1{font-size:17vw}.welcome-description{font-size:1rem}.welcome-food{margin-top:-8px}.welcome-food img{min-height:180px;max-height:40svh}.film-stage{min-height:500px}.scene-copy{top:18px}.scene-copy h2{font-size:2.6rem}.scene-copy>.eyebrow{font-size:1rem}.bowl-cinema-window{inset:155px -10% 90px}.scene-cue>span{display:none}.scene-cue p{font-size:1.0625rem}.film-controls{min-width:150px}.motion-on .people-stage{min-height:500px}.motion-on .people-heading{top:20px}.motion-on .people-heading h2{font-size:2rem}.motion-on .people-scene{padding-top:150px;padding-bottom:72px}.moment-caption>span{font-size:1.125rem}.moment-caption p{display:none}}
@media(max-width:360px){.visit-button{font-size:1rem;padding:11px}.welcome h1{font-size:17vw}.scene-copy>p:last-child{font-size:1rem}.scene-cue p{font-size:1rem}.film-controls input{width:50px}.film-controls{min-width:140px}.menu-card h3{font-size:1.3125rem}.form-row{grid-template-columns:1fr}.people-controls{font-size:1rem}}
/* Keep source dimensions as aspect-ratio hints, not fixed rendered heights. */
.menu-card img{height:auto}.nav-toggle{display:none}
.film-window video[controls]{width:100%;left:0;object-fit:contain}
.no-motion .people-controls{display:none!important}
.masthead #motion-toggle{position:static;flex:none;min-height:44px;padding:10px 0;font-size:1rem;background:transparent;border:0;border-bottom:1px solid #fff4d355;color:var(--cream);white-space:nowrap;box-shadow:none;border-radius:0}
@media(max-width:700px){.nav-toggle{display:block}.welcome-bottom{font-size:1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.menu-card:hover img{transform:none}}

/* ============================================================================
   FEATHERED FILM PASS - September 14, 2026
   Measured, not guessed: both studio films are LIGHT (interior ~#6B7A45, top
   edge #27371A, bottom edge #61673C - that bottom is the lit table) while the
   page is near-black green. Recolouring the page does not close the seam; a
   flat colour cannot match a frame whose own top and bottom differ by 50 points
   of luminance. So the media itself is masked: it fades out at the top and
   bottom and emerges from the page instead of starting at a hard line. A mask
   acts on pixels, so it works over every green already in play here
   (--green, --deep, .film-track, and the two mobile cinema gradients).
   ========================================================================== */

.bowl-cinema-window,
.cinema-stage .film-window{
  --film-fade-top:9%;
  --film-fade-bottom:11%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--film-fade-top),#000 calc(100% - var(--film-fade-bottom)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--film-fade-top),#000 calc(100% - var(--film-fade-bottom)),transparent 100%);
}

/* The mask now performs the vertical fade, so the old overlay only has to keep
   backing the desktop headline (READABILITY-001) - doubling both would crush
   the top of the frame. */
.cinema-stage::after{
  background:linear-gradient(90deg,#071e1670 0%,transparent 42%),linear-gradient(0deg,#071e1675,transparent 11%);
}

/* Controls are the accessible fallback for reduced motion, short viewports and
   media failure - they are never removed and never made untappable. They are
   only made quiet: full strength on hover, focus, reduced motion or error. The
   live percentage readout goes to screen readers only; it was the single thing
   that made the scene read as a developer panel. */
.motion-on .film-controls{opacity:.5;transition:opacity .25s ease}
.motion-on .film-stage:hover .film-controls,
.motion-on .film-controls:focus-within,
.no-motion .film-controls,
[data-cinema-mode=still] .film-controls,
[data-error=true] .film-controls{opacity:1}
.motion-on .film-controls output{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.film-controls input{height:22px}
.film-controls input::-webkit-slider-runnable-track{height:2px;background:#fff4d340}
.film-controls input::-moz-range-track{height:2px;background:#fff4d340}

/* Five separate "scroll to..." prompts across three screens. This one is
   static and redundant - the bowl's own cue is dynamic and does the handoff
   into this scene, and .next-scene is a real link. */
.cinema-stage .scene-cue>span{display:none}

/* Floor: where the scene drops to normal flow the controls ARE the interface -
   the film is not scroll-driven there, so quieting them would strand the user.
   Same specificity as the rule above, placed after it, so no !important. */
@media(max-width:700px) and (max-height:540px){
  .motion-on .film-controls{opacity:1}
}

/* A cancelled stop must never read like a live one. The state is a filled
   stamp rather than a word floating above the title, and the title and its
   times are struck through, so the card is legible as "not happening" before
   anyone reads it. Colours stay inside the approved palette - an inverted chip
   in the existing ink, not a new warning red - and the struck text keeps full
   colour rather than being faded, so contrast is unchanged. "Details being
   updated" gets the lighter, outlined version: it may still happen. */
.event-item.is-cancelled .event-state,.event-item.is-pending .event-state{
  display:inline-block;padding:4px 10px;border-radius:2px;letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem}
.event-item.is-cancelled .event-state{background:var(--deep);color:var(--cream)}
.event-item.is-pending .event-state{border:1px solid var(--deep);background:transparent}
.event-item.is-cancelled h3,.event-item.is-cancelled .event-when{
  text-decoration:line-through;text-decoration-thickness:1px}
.event-item.is-cancelled h3{font-size:1.5rem}

@media(min-width:701px){
  /* The pair was a 1fr 1fr grid with the media forced to width:100%. The photo
     is 3:4 and filled its column exactly; the film is 9:16, so contain shrank it
     to 294 of a 360 box and painted 33px of #061b13 down each side. Size by
     HEIGHT and let width follow the aspect: no bars, and equal heights put both
     bottoms on one line - they were 21px apart. The cap belongs on the pair, not
     on the media: with it on the media the figure stretched taller than the
     picture and the play button, anchored to the figure, floated below the film
     instead of sitting on it. */
  .motion-on .people-pair{display:flex;flex:1;min-height:0;max-height:58svh;
    align-items:stretch;justify-content:center;gap:18px}
  .motion-on .people-pair figure{min-width:0;min-height:0;display:flex;
    align-items:center;justify-content:center}
  .motion-on .people-pair img,.motion-on .people-pair video{
    width:auto;height:100%;max-width:100%;object-fit:contain}
  /* The caption sat centred under the media while the editorial column beside it
     ran empty for 480px - a quarter of the stage doing nothing. Move it into that
     column on the heading's own left edge and measure, with the border-top the
     film sections' .scene-bottom already uses, so this section keeps the page's
     rhythm rather than inventing a third one. */
  .motion-on .moment-caption{position:absolute;left:6%;bottom:76px;width:37%;
    text-align:left;margin:0;z-index:5;border-top:1px solid #fff4d340;padding-top:16px}
}

/* --- the colour run ---------------------------------------------------
   Everything before #menu is one continuous film. After it the page is
   five flat blocks -- cream, maroon, yellow, red, deep green -- meeting in
   four hard horizontal cuts, the only places the site changes its mind
   about what colour the world is.

   Three of those four are now crossfades rather than cuts: the arriving
   surface opens in the colour of the surface it replaced and resolves into
   its own, so both sides of a cut are the SAME COLOUR at the cut and the
   edge has nothing left to show. Nothing interpolates toward a colour that
   is not already one of the two neighbours. That rule is the whole design:
   an earlier attempt carried the brand green through every seam and it
   read as olive over the yellow and as dirt over the cream, because
   blending across a large lightness gap lands on an intermediate that
   belongs to neither side.

   Painted as background-image on the sections. That layer sits above the
   background-color and below every child, adds no height -- so the seams
   do not move -- and needs no JS, so reduced motion and no-JS get the
   same page.

   Depths are measured, not chosen by eye: each seam runs as deep as it can
   while every word inside the band still clears READABILITY-001 (4.5:1
   body, 3:1 large) at 1440x900, 390x844 and 1280x600. The red is the
   shallow one because #schedule-freshness sits close to find-us's bottom
   edge on a phone -- at 80px it measures 5.49, at 96px 4.87, and by 130px
   it fails.

   The maroon the find-us seam opens in is #4b171b, which is .more-moments
   -- the closed <details> strip that sits between #our-people and
   #find-us -- and NOT .people-track's #632022. The track never touches
   find-us; the strip does, and it is ~67px tall even closed. Opening it
   makes it taller without changing its colour, so the handoff holds either
   way. If .more-moments is ever restyled, this colour moves with it.

   find-us is a two-column grid, so its top and bottom edges are each two
   seams side by side: a photograph and flat yellow arriving at the same
   line. The flat column is served by the section's own background; the
   photo column carries its own pair on .trailer-world::before at
   z-index:0 -- above the photograph (z-index:-2) and above the existing
   green scrim (::after, z-index:-1), but below the heading, which paints
   later in tree order.

   #menu -> #our-people is deliberately left as a cut. Both of its sides
   refuse the treatment. The arriving side is a sticky pinned stage whose
   .people-scene::before is an opaque blurred backdrop covering the
   section's top edge, so a gradient there is either invisible or, if
   attached to the backdrop, travels with the pin instead of staying at the
   seam. The departing side can carry about 40px before the menu's closing
   line drops under 4.5:1 -- and at every depth tried, from 14px to 140px,
   cream resolving into maroon passes through a dusty rose that reads as a
   light leak across the page rather than as a transition. A clean cut into
   a cinematic stage is the better answer, and qa-colour-run.mjs reports
   that seam without asserting on it. */
.find-section{background-image:linear-gradient(180deg,#4b171b 0,transparent 160px),
  linear-gradient(0deg,#c71927 0,transparent 80px)}
.trailer-world::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#4b171b 0,transparent 120px),
             linear-gradient(0deg,#c71927 0,transparent 80px)}
.site-footer{background-image:linear-gradient(180deg,#c71927 0,transparent 200px)}

@media(max-width:700px){
  /* The grid has collapsed to one column, so the photograph's bottom edge
     is no longer the section's -- the yellow panel sits below it now, not
     the red section. The red handoff belongs to the yellow column alone
     here, and the photo keeps only its top one. The photo/yellow edge that
     leaves behind is deliberately untreated: the green scrim under it is
     what makes "Follow the flags." readable, and bringing yellow up over
     those words would cost more than the seam is worth. */
  .trailer-world::before{background:linear-gradient(180deg,#4b171b 0,transparent 120px)}
}

/* --- the two films are one locked camera -------------------------------
   The bowl and the pineapple were shot on the same set -- tables measuring
   rgb(49,69,43) and rgb(50,72,46), backdrops rgb(22,35,13) and
   rgb(28,42,19), one key from camera-left. What did not match was the
   camera HEIGHT, and during the cross-dissolve the table the food stands
   on visibly slid.

   Two separate causes, both fixed:

   1. The masters disagreed. The table edge sat at 1052/1440 in the bowl
      and 1104/1440 in the pineapple. bowl-studio-desktop.mp4 and its two
      posters are now cropped to 2440x1372 at x=60 and rescaled, putting
      the bowl's edge at 1104/1440 as well -- the same fraction as the
      pineapple AND as shared-pineapple-set.webp, the empty set that
      .bowl-cinema-window::after fades over the bowl to bridge the two
      films. That bridge was always cut to the pineapple's height, so the
      bowl was the only surface in the chain at a different one. The crop
      takes 60px from each side and 68px from the bottom, and nothing from
      the top, so the chicken keeps all of its headroom.

   2. The fits disagreed, which the crop alone does not fix. The bowl is
      object-fit:contain with a #142b1d letterbox -- deliberate, because
      cover crops into the chicken mound on a short window. The pineapple
      was cover. Two different fits mean two different rendered heights
      and offsets, so the edges only line up where the stage happens to be
      16:9: the residual is 0.15*width - 0.267*height, which is ~0 at
      1440x900 and ~25px at 1920x1080, 1536x864 and 1366x768 alike. The
      pineapple now uses the bowl's fit, so both films are letterboxed by
      the same rule and their edges coincide at every stage shape. It also
      stops cover cutting 48px off the top of the pineapple at 1920, where
      the rings and the pour enter frame.

   Phone is excluded: the bowl's mobile master is a different framing
   entirely (edge at 47%, not 77%) and is handled separately. */
@media(min-width:701px){
  #sunshine .film-window video{object-fit:contain;background:#142b1d}
  /* Both films must also be handed the SAME box, or matching the masters and
     the fits still does not make the edges coincide. The two stages clamped
     to different floors -- .bowl-stage min-height:672px, .cinema-stage 600px
     -- so on a window short enough for either clamp to bite they came out
     672 and 600 tall and the edges parted again by 55px. They now share the
     bowl's floor. This is why the alignment is verified as a box comparison
     and not only as a pixel reading: the pixels happened to agree at
     1440x900 while the geometry did not. */
  .cinema-stage{min-height:672px}
}
/* ---- inquiry form: one gold block (the action), outlined choices, filled fields ---- */
/* Chips sit in a fixed grid, so the bold selected state cannot reflow the row. */
#catering-form{display:flex;flex-direction:column;gap:20px;accent-color:var(--gold)}
#catering-form label{margin-bottom:0}
#catering-form .form-row{gap:20px}
.topic-field{margin:0;border-bottom:1px solid #fff4d329;padding-bottom:22px}
.topic-field legend{margin-bottom:12px}
.topic-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.topic-chips label:last-child{grid-column:1/-1}
.topic-chips label{justify-content:center;text-align:center;background:none;border-color:#fff4d380}
.topic-chips label:hover{background:#fff4d31a;border-color:var(--cream)}
.topic-chips label.on,.topic-chips label.on:hover{background:var(--cream);border-color:var(--cream);color:#6d0d16;font-weight:700}




@media(max-width:700px){.topic-chips{grid-template-columns:1fr;gap:8px}}
/* ---- discovery band for the Pineapple Party page ---- */
/* The pineapple work is the direction the family is growing into, so this band
   is lifted out of the page instead of trailing it as a footnote: a gold rule
   across the top, light gathered behind the copy, and a headline at something
   near section scale rather than half of it. */
.pc-promo{position:relative;padding:74px 6% 78px;border-top:3px solid var(--gold);background:radial-gradient(118% 150% at 10% 0%,#133322 0%,var(--deep) 60%);display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.pc-promo-copy h2{font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.08;margin:10px 0 18px}
.pc-promo-copy>p{font-size:1.1875rem;line-height:1.6;max-width:50ch;margin:0 0 28px}
.pc-promo-art{margin:0}
.pc-promo-art img{width:100%;height:clamp(240px,34svh,380px);object-fit:cover;display:block;background:#0d1f16}
.glow-cta{position:relative;box-shadow:0 0 0 3px #ffda3838,0 10px 26px #ffda3826}
.glow-cta:hover{box-shadow:0 0 0 4px #ffda3855,0 12px 30px #ffda3840}
.motion-on .glow-cta{animation:pc-promo-glow 2.8s ease-in-out infinite}
@keyframes pc-promo-glow{0%,100%{box-shadow:0 0 0 3px #ffda3838,0 10px 26px #ffda3826}50%{box-shadow:0 0 0 9px #ffda3800,0 12px 36px #ffda3866}}
/* Belt and braces: the preference wins even if the class says otherwise. */
@media(prefers-reduced-motion:reduce){.motion-on .glow-cta{animation:none}}
@media(max-width:700px){.pc-promo{grid-template-columns:1fr;gap:26px;padding:54px 6% 58px}.pc-promo .solid-link{width:100%}}

/* Content rises into place as it arrives. Two deliberate choices, both about
   what happens when it goes wrong.

   It is scroll-driven in CSS, not a JS reveal, so there is no observer that
   can die holding an element mid-animation. Without @supports, without the
   preference, or without .motion-on, none of it matches and the page is
   simply the static page.

   And it moves transform only - never opacity. A tall element's entry range
   can still be in progress while the element is well onto the screen (an
   audit caught one at 0.49 opacity), so fading is not safe at any range. The
   worst this can do is leave something sitting a few px low - measured at
   18px at its worst on screen, against 28px of travel. Nobody reads that as
   broken. Nothing here can make content disappear. */
@keyframes ot-rise{from{transform:translateY(28px)}to{transform:none}}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .motion-on .menu-card,
    .motion-on .pc-promo-copy,
    .motion-on .pc-promo-art,
    .motion-on .pc-parts li,
    .motion-on .pc-flavor,
    .motion-on .pc-hands-grid figure,
    .motion-on .pc-gap{
      animation:ot-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 85%;
    }
  }
}

/* ---- shared field architecture ----
   Every real form on the site is dressed from here. The colours that must differ
   between the green party page and the red inquiry panel are custom properties, so
   the fields themselves are defined once and cannot drift into two different forms.
   Every value below was checked against the background it actually sits on:
   the red section (#c71927) is far less forgiving than the green one, which is why
   its well is near-black and its labels are full-strength cream. */
.dg-fields{--well:#0a1f15;--hair:#fff4d360;--rule:#fff4d38a;--label:#fff4d3c4;--ph:#fff4d3a3}
.dg-red{--well:#1f0407;--hair:#fff4d378;--rule:#fff4d3a6;--label:var(--cream);--ph:#fff4d3bf}
.dg-fields label{font-size:1rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--label);gap:11px}
.dg-fields input:not([type=radio]):not([type=checkbox]),.dg-fields textarea{
  background:var(--well);border:1px solid var(--hair);border-bottom:2px solid var(--rule);
  color:var(--cream);font-size:1.0625rem;font-family:inherit;padding:15px;min-height:54px;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.dg-fields textarea{min-height:104px;line-height:1.55}
.dg-fields input::placeholder,.dg-fields textarea::placeholder{color:var(--ph)}
.dg-fields input:not([type=radio]):not([type=checkbox]):hover,.dg-fields textarea:hover{border-bottom-color:var(--cream)}
.dg-fields input:focus-visible,.dg-fields textarea:focus-visible{
  outline:none;border-color:#ffda38a3;border-bottom-color:var(--gold);box-shadow:0 0 0 3px #ffda3833}
.dg-fields input[type=date]::-webkit-calendar-picker-indicator,
.dg-fields input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.8);cursor:pointer}

/* Chips and the result block are choices and headings, not field labels. */
.dg-fields .topic-chips label{text-transform:none;letter-spacing:0;font-weight:400;color:var(--cream)}
.dg-fields #inquiry-result>label{color:var(--cream)}

/* The topic chips answer in gold now, the way every other decision on the site does. */
.topic-chips label{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.topic-chips label.on,.topic-chips label.on:hover{background:var(--gold);border-color:var(--gold);color:#5e0b12}
.inquiry-panel{border-top:3px solid var(--gold);padding-top:30px}
.inquiry-panel h3{font-size:1.9rem;margin-bottom:10px}
.inquiry-panel .solid-link{min-height:56px;padding:16px 26px;font-size:1.0625rem}
#inquiry-result{border-top:1px dashed #fff4d3c4;padding-top:22px;margin-top:6px}

/* The five topic chips were laid out two-up, which orphaned the fifth across the
   full width and made the row look like a mistake. Let them flow instead: above
   the 700px breakpoint they share the line evenly however many there are. Mobile
   keeps its single column, so that rule is left alone. */
@media(min-width:701px){.dg-fields .topic-chips{display:flex;flex-wrap:wrap;gap:12px}
  .dg-fields .topic-chips label{flex:0 1 auto}}
.dg-fields .topic-field legend{font-size:1rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--cream)}
/* The radio inside is 1px and fully transparent, so this border is the only thing
   that shows an unselected chip exists and where it ends -- it has to clear 3:1
   against the panel (#790f19), not merely look tidy. #fff4d36b gave 2.82:1. */
.dg-fields .topic-chips label{border-width:2px;border-color:#fff4d38a;font-size:1.0625rem;padding:13px 18px;min-height:52px}
.dg-fields .topic-chips label:hover{border-color:var(--cream);background:#fff4d314}
/* The radio itself is visually hidden, so the ring has to live on the label. */
.dg-fields .topic-chips label:focus-within{outline:3px solid var(--gold);outline-offset:3px}
.dg-fields .topic-chips label.on{border-color:var(--gold);font-weight:700}

/* The live preview. The party page's quote panel is the most convincing thing on
   that page because you watch it answer you; this is the same idea for a form whose
   whole job is to compose a message. It ships hidden and JS reveals it -- without
   JS there is nothing to compose, and the Instagram fallback is shown instead. */
.inquiry-live{margin-top:26px;background:#1f0407;border:1px solid #fff4d378;border-top:3px solid var(--gold);padding:20px 22px}
.inquiry-live-head{font-size:1rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:0 0 12px}
.inquiry-live-body{margin:0;white-space:pre-wrap;color:var(--cream);font-size:1.0625rem;line-height:1.6}
@media(min-width:1001px){.inquiry-live{position:sticky;top:calc(var(--header-live,var(--header)) + 14px)}}

/* Shared gateway states stay inside the existing form furniture. The honeypot
   remains available to simple bots without occupying visual or focus space. */
.dg-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.gateway-challenge{min-height:65px;margin:8px 0 14px}
.gateway-status{margin:14px 0 0;line-height:1.55;color:var(--cream)}
.gateway-status[data-state="success"]{color:var(--gold);font-weight:700}
.gateway-status[data-state="error"]{color:#fff0d6}
.dg-fields button[type="submit"]:disabled{cursor:not-allowed;opacity:.56}
.contact-note{margin:-7px 0 18px;color:#fff4d3c4;font-size:1rem}

/* A run of consecutive days at one venue lists its days instead of saying the
   venue's name three times. Rules and ink match the existing card separator so
   the grouped card reads as the same furniture, not a new component. */
.event-days{list-style:none;margin:20px 0 0;padding:0}
.event-days li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:12px 0;border-top:1px solid #09251b33;font-size:1.0625rem}
.event-days li:first-child{border-top:0;padding-top:0}
.event-day{font-weight:700;min-width:7.5em}
.event-hours{font-variant-numeric:tabular-nums}
.event-day-title{flex-basis:100%;color:#09251bc4}
.event-item.is-run .event-when{margin-top:15px;font-size:1rem}

/* Selected text picks up the brand instead of the browser's blue. */
::selection{background:var(--gold);color:#061b13}

/* A visible focus ring everywhere, using currentColor so it is guaranteed to
   contrast with whatever it sits on -- a fixed gold ring would disappear against
   the yellow schedule panel. Components that define their own focus treatment
   have higher specificity and keep it. */
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* The find-us photo is a 4:3 landscape shot inside a container that is much
   narrower than 4:3 on a phone, so object-fit:cover was throwing away the sides
   -- which is where the trailer is -- and leaving mostly sky above the caption.
   Taller container plus a crop anchored low and left puts the trailer, the logo
   and the readable menu header in frame instead. */
@media(max-width:700px){
  .trailer-world{min-height:560px}
  .trailer-world>img{object-position:30% 60%}
}

/* ---- Facebook and Instagram in the footer ---- */
/* They were reachable in one place only: the Find-us panel on the homepage,
   below the schedule. The Pineapple Party page carried none at all, so anyone
   who arrived there had no way to follow them. Both pages now end with both.
   @originaltaste340 is the handle printed on the truck's own menu board and
   recorded as published - neither address is invented here.
   Its own full-width row rather than a fourth grid child, so the footer's
   column template holds unchanged at every width. 1.125rem and a 44px target
   because these are links people are meant to press on a phone. */
/* Scoped through .site-footer on purpose. This is a nav inside the footer, so
   .site-footer nav already matches it at (0,1,1) and would beat a bare
   .footer-social at (0,1,0) - which is exactly what happened: the catering
   page inherited the footer nav's 1rem and rendered these at 16px, under the
   18px rule, while the homepage only escaped because bowl-studio.css happens
   to re-set .site-footer nav and is not linked on the catering page. */
.site-footer .footer-social{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px 30px;font-size:1.125rem;border-top:1px solid #fff4d32e;padding-top:20px;margin-top:4px}
.site-footer .footer-social a{display:inline-flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid transparent}
.site-footer .footer-social a:hover,.site-footer .footer-social a:focus-visible{border-bottom-color:var(--gold);text-decoration:none}