/* Meredith's final Whisk identity. Fonts are supplied brand assets, self-hosted. */
@font-face{font-family:Bryant;src:url('../brand/final/bryant-regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Bryant;src:url('../brand/final/bryant-medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:Bryant;src:url('../brand/final/bryant-bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:Bryant;src:url('../brand/final/bryant-italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Quincy CF';src:url('../brand/final/quincy-regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Quincy CF';src:url('../brand/final/quincy-black.otf') format('opentype');font-weight:900;font-display:swap}
:root,.editor-page{--whisk-blue:#91aedb;--deep-blue:#00365d;--sand:#e7dfc6;--willow:#b2cb71;--apricot:#ffd085;--espresso:#73543a;--paper:#fff;--ink:#00365d;--border:#91aedb;--silver:#e7dfc6;--silver-dark:#73543a;--font-display:'Quincy CF',Georgia,serif;--font-body:Bryant,Arial,sans-serif;--font-mono:Bryant,Arial,sans-serif}
body,.storefront-inner,.editor-page{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px}
/* Override the former Courier treatments without changing page structure. */
body a,body .mono,body p,body .sample-price,body label,body input,body textarea,body select,body button,body .meta,body .cart-row,body .editor-label{font-family:var(--font-body)!important;color:var(--ink);letter-spacing:0!important}
body p,body .bake p,body .stop-details p,body .find-copy>p,body .intro{font-size:17px!important;line-height:1.6!important;text-transform:none;font-weight:400!important}
body a,body .mono,body label,body button,body .meta,body .editor-label{font-weight:500!important}
body nav a,body .sun-link,body .menu-rule a,body .mono,body .meta,body .editor-label,body label,body button{letter-spacing:.1em!important;text-transform:uppercase;font-size:13px!important;line-height:1.5!important}
body h1,body h2,body h3,body h3 a,body .hero-phrase,body summary,body .more-tile-label,body .more-caption{font-family:var(--font-display)!important;letter-spacing:-.02em!important;font-weight:400!important;text-transform:none;color:var(--ink)}
body h3 a{font-size:inherit!important;line-height:inherit!important}
body .hero-phrase{line-height:1.12!important;font-size:clamp(28px,2.6vw,40px)!important}
body .sample-price{font-size:16px!important;font-weight:500!important}
body .hero-aside{font-size:14px!important;line-height:1.7!important}
body .ingredients h2{font-family:var(--font-body)!important;font-size:14px;letter-spacing:.1em!important;text-transform:uppercase;font-weight:700!important}
.storefront-inner header,#mobile-menu,#mobile-menu::backdrop{background:var(--paper);color:var(--ink)}
body .find-plain,body .menu-allergens,body .menu-allergens:before,body .menu-allergens:after{background:var(--sand)}
body .find-plain{border-top:0}
body .menu-rule,body .sun-link,body .store-note,body .cart-row,body .store-page details,body .stop-details{border-color:var(--ink)}
body .menu-toggle,body .menu-close,body .social-icon{color:var(--ink)}
body .hero-logo{width:min(100%,440px);height:auto}
body .main-footer{background:var(--paper);padding-top:48px;padding-bottom:48px}
body .footer-logo{width:190px}
body .food-space{background:var(--sand)}
body input,body textarea,body select{font-size:17px;line-height:1.5}
body input:focus-visible,body textarea:focus-visible,body select:focus-visible{outline:2px solid var(--deep-blue);outline-offset:3px}
body .store-page button,body .store-page input,body .menu-filter select{border-color:var(--ink)}
body .store-page [data-add-item],.editor-page .button,.editor-page .editor-tabs button[aria-pressed=true]{background:var(--deep-blue);color:white}
.editor-page .editor-notice{background:var(--whisk-blue);color:var(--deep-blue)}
.editor-page .editor-entry{background:white;border-color:var(--border)}
.editor-page .editor-header{border-color:var(--sand)}
.editor-page .editor-header .brand img{width:150px;height:auto}
.editor-page .editor-actions{background:var(--paper)}
.editor-page h1{font-size:clamp(38px,5vw,64px)}
.editor-page .field label{font-size:12px!important}
body #mobile-menu nav a{font-family:var(--font-body)!important;font-size:19px!important;letter-spacing:.1em!important}
@media(max-width:700px){
 body .main-header,body.storefront-inner .main-header{background:var(--paper)}
 body .mobile-brand{width:92px}
 body .hero-logo{width:235px}
 body .main-footer nav{flex-wrap:wrap;gap:14px 20px}
 body .main-footer nav a{font-size:12px!important}
 body .bake p{font-size:15px!important}
}
/* Quiet surfaces keep the real trailer photograph and brand lettering legible. */
body .main-header{background:var(--paper);min-height:76px}
body .hero-copy{top:15%;left:6%;width:36%;max-width:470px;background:var(--sand);padding:24px 28px 32px}
body .hero-copy .hero-logo{width:100%}
body .hero-copy .hero-phrase{margin-top:10px}
body .hero-copy>.sun-link{margin-left:0;margin-top:26px}
body .hero-aside{background:var(--paper);padding:12px 18px;right:6%;top:17%}
body .homepage-menu-grid .more-tile span{font-family:var(--font-display)!important;color:white}
@media(max-width:700px){
 body .hero-copy{top:28px;left:6%;width:64%;max-width:290px;padding:12px 18px 22px}
 body .hero-copy .hero-logo{width:100%}
 body .hero-copy .hero-phrase{display:block;font-size:24px!important}
 body .hero-copy .hero-phrase span{margin-left:0}
 body .hero-copy>.sun-link{margin-top:18px;font-size:12px!important}
 body .hero-aside{display:none}
}
/* Vertical paper fibres sit outside the panels, leaving text and focus rings intact. */
body .hero-copy::before,body .hero-copy::after,
body .hero-aside::before,body .hero-aside::after{
 content:"";position:absolute;top:0;bottom:0;width:8px;
 background:inherit;pointer-events:none;
 -webkit-mask:url('../brand/final/torn-side.svg') left top / 8px 240px repeat-y;
 mask:url('../brand/final/torn-side.svg') left top / 8px 240px repeat-y;
}
body .hero-copy::before,body .hero-aside::before{left:-7px}
body .hero-copy::after,body .hero-aside::after{right:-7px;transform:scaleX(-1)}
/* A shorter mobile introduction reveals more of the trailer in the cover crop. */
@media(max-width:700px){
 body .hero{height:560px;min-height:0;max-height:none}
 body .hero-image img{object-position:65% center}
 body .hero-copy{top:22px;width:62%;max-width:260px;padding:10px 16px 20px}
 body .hero-copy .hero-logo{width:180px;max-width:100%;margin-inline:auto}
 body .hero-copy .hero-phrase{font-size:22px!important;margin-top:4px}
 body .hero-copy>.sun-link{margin-top:14px;gap:12px}
}
/* Natural-case reading text; reserve tracked capitals for brief UI captions. */
body p,body li,body .cart-row,body .story-copy,body .editor-help,
body a:not(.button):not(.sun-link){text-transform:none!important}
body p a{font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important}
body nav a,body .sun-link,body .menu-rule a,body .social-feed>a,
body .eyebrow,body .mono,body .meta,body .editor-label{
 text-transform:uppercase!important;font-size:13px!important;
 font-weight:700!important;letter-spacing:.1em!important;line-height:1.5!important;
}
body .hero-aside{font-size:14px!important;line-height:1.7!important}
body .store-page p:not(.eyebrow):not(.mono):not(.meta),
body .bake p,body .stop-details p{font-weight:400!important;letter-spacing:0!important}
body .main-footer nav a{font-size:12px!important}
body #mobile-menu nav a{font-size:19px!important}
.product-frames{aspect-ratio:4/3;overflow:hidden;margin-bottom:16px}
.product-frames .food-photo{width:100%;height:100%;object-fit:cover;margin:0}
.product-frames img[hidden]{display:none}
.photo-deck{display:flex;gap:10px;overflow-x:auto;padding:4px 3px 12px}
body .photo-deck button{padding:0;border:2px solid transparent;background:none;flex:0 0 72px;cursor:pointer}
.photo-deck button[aria-pressed=true]{border-color:var(--ink)}
.photo-deck img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.extra-photo-row{border-top:.5pt solid var(--border);padding:18px 0;display:grid;gap:12px;grid-template-columns:1fr 1fr}
.extra-photo-row img,.extra-photo-row label,.extra-photo-row input{grid-column:1/-1}
/* Layer the photographs so the outgoing frame remains visible during the fade. */
.gallery-ready .product-frames{position:relative}
.gallery-ready .product-frames>.food-photo{position:absolute;inset:0;opacity:0;transition:opacity 550ms ease-in-out;pointer-events:none}
.gallery-ready .product-frames>.food-photo.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.gallery-ready .product-frames>.food-photo{transition:none}}
/* Cross-links between the two catalogs sit immediately below their titles. */
.store-page .catalog-note{margin-top:0;margin-bottom:28px;padding-top:20px}
/* Crossfade the More tile photographs beneath the fixed lettering and gradient. */
.menu-more.more-ready img{opacity:0;transition:opacity 650ms ease-in-out}
.menu-more.more-ready img.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.menu-more.more-ready img{transition:none}}

/* Palette accents follow the light-surface pairings in Meredith's guidelines. */
body .hero-aside{background:var(--willow);color:var(--deep-blue)}
body .main-footer,body .main-footer::before{background:var(--whisk-blue)}
body .photo-deck button[aria-pressed=true]{border-color:var(--deep-blue);background:var(--willow)}
body .homepage-find-copy>.mono{display:inline-block;background:var(--willow);padding:5px 9px;color:var(--deep-blue)}

body .filter-control{position:relative;display:inline-block;max-width:100%}
body .menu-filter select{
 appearance:none;-webkit-appearance:none;background:var(--deep-blue);color:white;
 min-height:46px;padding:11px 58px 11px 18px;width:100%;
 border:.5pt solid var(--deep-blue);font-size:15px!important;
 font-weight:500!important;text-transform:lowercase;letter-spacing:0!important;
}
body .filter-arrow{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:white;font-size:20px;line-height:1;pointer-events:none}
body .menu-filter select option{background:white;color:var(--deep-blue)}
body .menu-filter label{text-transform:lowercase!important;letter-spacing:0!important;font-size:15px!important}
/* Whisk Blue is the primary brand color; lighter tints carry the larger surfaces. */
body .hero-copy{background:var(--whisk-blue)}
body .find-plain{background:color-mix(in srgb,var(--whisk-blue) 30%,white)}
body .menu-allergens,body .menu-allergens::before,body .menu-allergens::after{
 background:color-mix(in srgb,var(--whisk-blue) 15%,white);
}

/* Shared storefront action component. Layout containers own margins; controls own padding. */
body main a.action-link,body main a.sun-link,
body main .store-page button:not([data-photo-index]),body .store-page button:not([data-photo-index]){
 display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
 gap:16px;min-height:48px;max-width:100%;padding:12px 20px;
 border:.5pt solid var(--deep-blue);border-radius:0;
 background:var(--deep-blue);color:white!important;box-shadow:none;
 font:400 15px/22px var(--font-body)!important;
 letter-spacing:0!important;text-transform:lowercase!important;text-decoration:none!important;
}
body main a.action-link span,body main a.sun-link span{
 color:inherit;font:inherit!important;letter-spacing:0!important;text-transform:inherit!important;
}
body main a .action-arrow{flex:0 0 auto;font-size:20px!important;line-height:22px!important}
body main a.action-link:hover,body main a.sun-link:hover,
body .store-page button:not([data-photo-index]):not(:disabled):hover{background:#04213e}
body main a.action-link:focus-visible,body main a.sun-link:focus-visible{
 outline:2px solid var(--deep-blue);outline-offset:4px;
}
body .menu-heading-line{align-items:center;gap:24px}
body .menu-rule{display:flex;align-items:center;gap:20px;border:0;margin:0;padding:0}
body .menu-rule::before{content:"";height:.5pt;background:var(--deep-blue);flex:1;min-width:24px}
body .menu-rule a{flex:0 1 auto;margin:0}
body .menu-filter select{min-height:48px;font:400 15px/22px var(--font-body)!important;padding:12px 58px 12px 20px}
body .menu-filter{gap:16px;align-items:center}
body .menu-filter label{font-weight:400!important}
body .store-page button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:700px){body .menu-heading-line{gap:20px}body .menu-rule{width:100%}}