/* A warmer, curvier restaurant identity. Structure and interactions live in styles.css. */
:root {
  --ink: #201c19;
  --green: var(--ink);
  --cream: #fbf3e3;
  --paper: #f1e4ce;
  --red: #b83223;
  --yellow: #f4c448;
  --muted: #665c50;
  --line: #dfd1b9;
}
body {font-size:17px; color:var(--ink)}
.announcement {min-height:40px; font-size:11px; letter-spacing:1.2px}
.site-header {height:116px; border:0; padding:0 5%}
.brand>span {font-size:36px}
.brand small {font-size:10px; letter-spacing:1.1px; margin-top:9px}
.arcs {width:54px; height:48px}
.desktop-nav {font-size:16px; gap:33px; margin-left:0}
.desktop-nav a[aria-current=page]::after {width:100%}
.mobile-nav a[aria-current=page] {color:var(--red);font-weight:800}
.header-actions {gap:22px}
.bag-button {padding:12px; gap:9px}
.bag-count {font-size:15px}
.button {border-radius:999px; padding:21px 29px; font-size:13px; min-height:56px; line-height:1.3; letter-spacing:.55px; box-shadow:0 4px 0 #00000012}
.button-green:hover {background:#39312b}
.text-link {font-size:15px; gap:13px; line-height:1.4}
.eyebrow {font-size:12px; line-height:1.7; letter-spacing:1.5px}

/* Sweeping ribbons, a warm spotlight, and a curved edge frame the food. */
.hero {max-width:1800px; margin:0 auto; min-height:760px; padding:70px 5% 130px; grid-template-columns:1fr 1fr; background:radial-gradient(ellipse at 72% 48%,#503021 0%,#2d211b 35%,#201c19 68%); color:var(--cream); border-radius:46px 46px 0 0}
.hero::before {content:''; position:absolute; inset:0; z-index:-1; background:url('assets/hero-art.svg') center/cover no-repeat; pointer-events:none}
.hero-copy {align-self:center; padding-bottom:8px}
.hero .eyebrow {font-size:12px; color:var(--yellow); margin-bottom:28px; letter-spacing:1.4px}
.hero .tiny-star {color:var(--yellow); font-size:23px}
.hero h1 {font-size:clamp(64px,6.35vw,104px); line-height:1.08; letter-spacing:-2.5px; text-shadow:0 3px 0 #00000012}
.hero h1>span {color:var(--yellow)}
.hero-description {font-size:18px; line-height:1.8; color:#e5d6c2; margin-top:28px; max-width:550px}
.hero-description br {display:none}
.hero-buttons {gap:26px; flex-wrap:wrap; margin-top:29px; flex-direction:row; align-items:center}
.hero-buttons .button {font-size:13px; padding:21px 27px; color:var(--ink); background:var(--yellow); box-shadow:0 5px 0 #a37025}
.hero-buttons .button:hover {background:#ffda75}
.hero-buttons .text-link {font-size:15px; color:var(--cream)}
.hero-footnote {font-size:13px; color:#ddc9af; gap:10px; margin-top:29px; line-height:1.6}
.hero-footnote .hand-star {color:var(--yellow); font-size:25px}
.hero-visual {align-self:center; min-height:570px}
.hero-orbit {width:550px; max-width:105%; top:7px; right:-1%; background:radial-gradient(ellipse at 65% 22%,#f1b255,#cc582c 49%,#9d3421 90%); border-radius:48% 52% 37% 63% / 48% 33% 67% 52%; transform:rotate(-12deg); box-shadow:0 0 90px #c96b201c, inset 0 0 80px #88231930; opacity:.88}
.hero-orbit::after {inset:-24px -13px -16px -22px; border-color:#eac17d5e; transform:rotate(-8deg); border-radius:45% 55% 40% 60% / 44% 40% 60% 56%}
.hero-burger {width:600px; max-width:115%; margin-left:-3%; margin-top:-8px; filter:drop-shadow(12px 25px 19px #00000045)}
.decor-star {color:var(--yellow)}
.star-one {left:1%; top:8px}
.star-two {right:-3%; bottom:86px; color:#f5dbac}
.seedless-sticker {width:151px; height:151px; right:-3%; top:-17px; gap:8px; filter:drop-shadow(0 5px 0 #00000015)}
.seedless-sticker span {font-size:11px; letter-spacing:.5px}
.seedless-sticker strong {font-size:19px}
.burger-caption {left:24%; bottom:-7px; min-width:255px; border-radius:40% 40% 18px 18px / 24% 24% 18px 18px; color:var(--ink); padding:19px 26px 16px; border-color:#d5bea0; box-shadow:5px 6px 0 #0000001a; gap:8px}
.burger-caption strong {font-size:28px}
.burger-caption>span:last-child {font-size:11px; letter-spacing:.5px; white-space:nowrap}
.handwritten {font-size:24px}
.hero-arrow {bottom:42px; left:1%; width:103px}
.hero-arrow svg {stroke:#f4dba8}
.hero-wave {position:absolute; bottom:-1px; left:0; width:100%; height:102px; fill:var(--cream); z-index:5; pointer-events:none}
.ticker-shell {overflow:hidden; padding:17px 0 20px; margin-top:-15px; position:relative; z-index:6}
.ticker {transform:rotate(-1.5deg); width:104%; margin-left:-2%; padding:22px 0; border:0; box-shadow:0 5px 0 #e9b631}
.ticker>div {gap:37px}
.ticker span {font-size:18px}

/* Open space, rounded cards, and large type make the menu easy to browse. */
.menu-section {padding-top:70px; padding-bottom:72px}
.section-heading .eyebrow {font-size:12px}
.section-heading>p {font-size:17px; line-height:1.7; max-width:370px}
h2 {font-size:clamp(36px,3.8vw,54px); line-height:1.15}
.menu-controls {margin-top:35px; gap:25px; align-items:center}
.menu-filters {gap:9px}
.menu-filters button {font-size:14px; padding:13px 19px; min-height:46px; border-color:#d2c2a9}
.menu-filters button:hover {background:#efdfc3}
.menu-filters .active {background:var(--ink); color:var(--cream)}
.full-menu {font-size:14px}
.product-grid {gap:27px; align-items:stretch}
.product-card {border:1px solid #dfcdb0; border-radius:140px 140px 30px 30px; background:#fff9ed; box-shadow:0 7px 0 #e6d5b824; display:flex; flex-direction:column}
.product-card:hover {box-shadow:0 12px 24px #39291c0c}
.product-photo {height:310px; background:radial-gradient(ellipse at 50% 36%,#f7d68c,#ead5b1 75%); border:0; border-radius:140px 140px 48% 48% / 140px 140px 8% 8%}
.product-card:nth-child(2) .product-photo {background:radial-gradient(ellipse at 50% 36%,#f7cc92,#ecc29c 75%)}
.product-card:nth-child(3) .product-photo {background:radial-gradient(ellipse at 50% 36%,#edd3bb,#dac2b2 75%)}
.product-photo img {padding:50px 20px 9px}
.product-card .tag {top:24px; left:50%; transform:translateX(-50%); border-radius:50px; padding:9px 12px; font-size:10px; letter-spacing:.5px; white-space:nowrap; border:1px solid #d6b15350}
.product-content {padding:27px 25px; flex:1; display:flex; flex-direction:column}
.product-content h3 {font-size:23px; line-height:1.25}
.product-content p {font-size:16px; color:#665a4a; min-height:83px; line-height:1.65; margin-top:13px}
.product-bottom {margin-top:auto; padding-top:22px; gap:12px}
.product-bottom strong {font-size:22px}
.add-button {font-size:11px; padding:13px 16px; min-height:46px; border-radius:999px; border-color:#b8a98e; gap:16px; white-space:nowrap}
.add-button span {font-size:22px}
.menu-note {font-size:13px; line-height:1.8; margin-top:29px; color:#746552}
.product-photo .meal-image {height:90%; top:10%}
.meal-image img:first-child {padding:0}

/* Broad curves break up the page; the film photographs keep their natural frames. */
.story-section {position:relative; background:var(--ink); border-radius:50% 50% 48% 12% / 5% 5% 5% 3%; margin-top:18px; color:var(--cream)}
.story-section::before {content:''; position:absolute; inset:0; pointer-events:none; opacity:.07; background:radial-gradient(circle at 2px 2px,#eed3a0 1px,transparent 1.5px) 0 0/14px 14px; mask-image:linear-gradient(90deg,#000,transparent 55%)}
.story-inner {position:relative; padding-top:110px; padding-bottom:110px; gap:7%; grid-template-columns:1fr 1fr}
.story-copy h2 {font-size:clamp(32px,3vw,45px)}
.story-copy .eyebrow {font-size:12px; letter-spacing:1.3px}
.story-copy>p:not(.eyebrow) {font-size:17px; line-height:1.85; color:#e5d6c2; margin-top:22px}
.story-copy .light-link {font-size:15px; color:var(--cream)}
.crew-photo,.royal-photo {border-radius:8px; box-shadow:6px 10px 0 #00000025}
.crew-photo img,.royal-photo img {border-radius:3px}
.crew-photo figcaption {font-size:11px; letter-spacing:.7px; padding:18px 5px}
.royal-photo figcaption {font-size:10px; line-height:1.5; letter-spacing:.3px; padding:13px 3px}
.story-photos {padding-bottom:165px}
.story-photos .photo-note {font-size:24px; bottom:14px}
.queens-stamp {width:140px; height:140px; gap:10px; top:-34px; right:-16px}
.queens-stamp span {font-size:10px; letter-spacing:.6px}
.founder-note {border-color:#74604c; gap:19px; padding-top:27px; margin-top:30px}
.founder-note>img {width:90px; height:110px; border-radius:10px}
.story-copy .founder-note blockquote {font-size:28px}
.story-copy .founder-note cite {font-size:12px; letter-spacing:.5px; color:var(--cream)}
.founder-note cite span {font-size:10px; color:#d9c9b4; letter-spacing:.7px; line-height:1.6}
.values-strip {padding-top:58px; padding-bottom:58px}
.values-strip>div {padding-left:23px; column-gap:15px}
.values-strip h3 {font-size:15px; line-height:1.45}
.values-strip p {font-size:14px; line-height:1.7; color:#6d5d4c; max-width:245px}
.values-strip svg {width:42px; height:46px}
.location-section {padding-top:90px; padding-bottom:95px; gap:9%}
.location-copy .eyebrow {font-size:12px}
.location-copy>p:not(.eyebrow) {font-size:17px; line-height:1.8; color:#665a4a}
.address {margin:30px 0}
.address strong {font-size:17px}
.address span {font-size:15px; color:#6d5d4c}
.location-copy .button {font-size:12px; padding:20px 25px}
.location-copy>small {font-size:13px; color:#746552; line-height:1.7; max-width:400px; margin-top:20px}
.location-art {background:radial-gradient(ellipse at 50% 40%,#f5d795,#eadac0); min-height:480px; border-radius:48% 52% 44% 56% / 45% 40% 60% 55%; padding-top:65px}
.road-sign {border-radius:28px; box-shadow:7px 9px 0 #201c1920}
.road-sign span {font-size:11px; letter-spacing:1px}
.road-sign strong {font-size:44px}
.sign-letterboard {border-radius:14px; font-size:17px; letter-spacing:3px; padding:14px 24px}
.sign-poles {border-color:#b2a084}
.location-postmark {font-size:10px; padding:18px 11px; right:12px; bottom:34px; border-color:#a09076; letter-spacing:.5px}
.location-postmark b {font-size:26px}
.closing-banner {position:relative; border-radius:50% 50% 0 0 / 22% 22% 0 0; padding:73px 5% 60px; gap:50px; background:var(--red)}
.closing-banner p {font-size:13px; letter-spacing:1px}
.closing-banner h2 {font-size:48px}
.closing-banner>.button {font-size:13px; margin-left:15px}
.closing-star {font-size:64px}
.site-footer {padding-top:50px; padding-bottom:34px}
.footer-brand>span {font-size:32px}
.footer-brand small {font-size:10px; letter-spacing:.6px}
.footer-brand .arcs {width:48px}
.footer-top nav,.footer-top nav button {font-size:15px; gap:24px}
.footer-bottom {align-items:flex-start; gap:40px}
.footer-bottom p {font-size:12px; line-height:1.8; color:#6d5d4c; max-width:680px}
.footer-bottom>span {font-size:11px; line-height:1.8; letter-spacing:.4px; max-width:260px}

/* Keep details, bag controls, and captions as readable as the main page. */
dialog {border-radius:28px; border-color:#d5c4a9; box-shadow:0 24px 100px #140d0840}
dialog::backdrop {background:#17120ed9}
.close-dialog {width:44px; height:44px; border-color:#b9a98d}
.detail-image {background:radial-gradient(ellipse at 50% 40%,#f4d9a3,#e8d6b9)}
.detail-copy {padding-top:60px}
.detail-copy .eyebrow,.info-dialog .eyebrow {font-size:12px}
.detail-copy>p:not(.eyebrow) {font-size:16px; color:#665a4a}
.allergens {font-size:13px; line-height:1.8}
.quantity-control {border-radius:999px; overflow:hidden; border-color:#b6a58a}
.quantity-control button {width:44px; height:44px}
.quantity-control button:hover {background:#eadbc1}
.quantity-control span {font-size:16px; min-width:32px}
.demo-note {font-size:12px; color:#746552; line-height:1.6}
.info-dialog {width:680px}
.info-dialog p:not(.eyebrow) {font-size:16px; line-height:1.85; color:#665a4a}
.info-dialog .info-note {font-size:13px!important}
.info-dialog h3 {font-size:20px}
.location-reference {border-radius:20px; overflow:hidden}
.location-reference figcaption {font-size:12px; line-height:1.6}
.location-reference figcaption span {font-size:13px}
.bag-dialog {border-radius:28px 0 0 28px; width:490px}
.bag-dialog[open] {animation:bag-slide-in .24s cubic-bezier(.2,.8,.2,1)}
@keyframes bag-slide-in {from {transform:translateX(100%);opacity:.5} to {transform:translateX(0);opacity:1}}
.bag-disclaimer {font-size:13px; border-radius:15px; padding:16px; background:#f0e2c9}
.bag-thumb {border-radius:18px; background:#edddc3}
/* Blend the supplied vintage can photo into the warm menu backgrounds. */
img.white-backdrop {mix-blend-mode:multiply}
.bag-item h3 {font-size:17px}
.bag-item p {font-size:15px}
.bag-line-actions .quantity-control button {width:39px; height:39px}
.bag-line-actions .quantity-control span {font-size:14px}
.remove-item {font-size:13px; min-height:44px}
.bag-total {font-size:20px}
.bag-total+p,.order-success small {font-size:13px; color:#746552}
.empty-bag p,.order-success p {font-size:16px; line-height:1.8; color:#665a4a}
.toast {border-radius:999px; padding:18px 26px; border-color:#79654d; background:var(--ink); font-size:15px; line-height:1.5}

@media(min-width:1500px) {
  .hero {padding-left:6%; padding-right:6%}
  .hero-burger {width:650px; max-width:111%}
  .hero-visual {min-height:625px}
  .hero-orbit {width:610px}
}
@media(max-width:1150px) {
  .site-header {padding:0 4%}
  .brand>span {font-size:32px}
  .brand small {font-size:9px}
  .desktop-nav {font-size:15px; gap:22px}
  .header-actions {gap:10px}
  .header-order {font-size:12px; padding:18px 22px}
  .hero {padding:60px 4.5% 125px; min-height:710px}
  .hero h1 {font-size:6.9vw; letter-spacing:-2px}
  .hero-copy {min-width:0}
  .hero-description {font-size:17px; max-width:calc(100% - 10px)}
  .hero-visual {min-height:540px}
  .hero-burger {width:100%; max-width:100%; margin-left:0; margin-top:30px}
  .hero-orbit {width:465px; max-width:110%; top:45px}
  .seedless-sticker {width:132px; height:132px; right:-2%; top:13px}
  .seedless-sticker span {font-size:10px}
  .seedless-sticker strong {font-size:17px}
  .burger-caption {left:17%; min-width:235px; bottom:-10px}
  .hero-buttons {gap:20px}
  .hero-buttons .button {font-size:12px; padding:19px 23px}
  .hero-buttons .text-link {font-size:14px}
  .hero-arrow {width:76px; left:-3%; bottom:31px}
  .section-heading>p {font-size:16px; max-width:320px}
  .menu-controls {align-items:flex-start}
  .menu-filters {gap:7px}
  .menu-filters button {padding:12px 15px; font-size:13px}
  .product-grid {gap:18px}
  .product-photo {height:265px}
  .product-content {padding:22px 19px}
  .product-content h3 {font-size:20px}
  .product-content p {font-size:15px; min-height:100px}
  .add-button {font-size:10px; gap:10px; padding:12px}
  .story-copy>p:not(.eyebrow) {font-size:16px}
  .story-copy h2 {font-size:33px}
  .story-copy .founder-note blockquote {font-size:25px}
  .founder-note>img {width:74px; height:100px}
  .story-photos .photo-note {font-size:21px}
  .queens-stamp {width:120px; height:120px}
  .crew-photo figcaption {font-size:10px}
  .royal-photo figcaption {font-size:9px}
  .values-strip h3 {font-size:13px}
  .values-strip p {font-size:13px}
  .location-section {gap:6%}
  .location-copy>p:not(.eyebrow) {font-size:16px}
  .location-art {min-height:450px; padding-top:55px}
  .road-sign strong {font-size:38px}
  .sign-letterboard {font-size:15px; min-width:225px}
  .closing-banner {gap:27px}
  .closing-banner h2 {font-size:40px}
  .closing-star {font-size:45px}
  .footer-top {gap:25px}
  .footer-top nav {flex-wrap:wrap; justify-content:flex-end; gap:15px 22px}
}
@media(max-width:900px) {
  .site-header {height:100px}
  .desktop-nav {display:none}
  .mobile-toggle {display:flex; flex-direction:column; gap:6px; padding:13px}
  .mobile-toggle span {width:24px; height:2px; background:var(--ink)}
  .mobile-toggle[aria-expanded=true] span:first-child {transform:translateY(4px) rotate(45deg)}
  .mobile-toggle[aria-expanded=true] span:last-child {transform:translateY(-4px) rotate(-45deg)}
  .mobile-nav:not([hidden]) {display:flex; position:absolute; top:86px; right:4%; left:auto; width:270px; padding:24px; border:1px solid var(--line); border-radius:25px; flex-direction:column; gap:20px; background:var(--cream); box-shadow:0 12px 30px #201c1926; font-size:17px}
  .hero {padding-top:47px; padding-bottom:125px; min-height:680px; border-radius:32px 32px 0 0}
  .hero h1 {font-size:6.9vw}
  .hero .eyebrow {font-size:11px; letter-spacing:.7px; gap:8px; margin-bottom:23px}
  .hero-description {font-size:16px; margin-top:24px}
  .hero-buttons {flex-direction:column; align-items:flex-start; gap:17px}
  .hero-footnote {font-size:12px; align-items:flex-start; gap:8px}
  .hero-visual {min-height:480px}
  .hero-burger {margin-top:70px; max-width:94%; margin-left:3%; width:94%}
  .hero-orbit {top:77px; width:390px}
  .burger-caption {left:11%; min-width:215px; padding:15px 19px; bottom:-5px}
  .burger-caption strong {font-size:23px}
  .burger-caption>span:last-child {font-size:10px}
  .handwritten {font-size:22px}
  .seedless-sticker {top:25px; right:-5%; width:120px; height:120px}
  .seedless-sticker span {font-size:9px}
  .seedless-sticker strong {font-size:15px}
  .star-one {font-size:40px; top:35px; left:0}
  .star-two {font-size:44px; right:-6%; bottom:70px}
  .hero-arrow {width:65px; left:-10%; bottom:34px}
  .menu-controls {flex-direction:column; gap:17px}
  .full-menu {align-self:flex-end}
  .product-photo {height:230px}
  .product-card {border-radius:100px 100px 24px 24px}
  .product-photo {border-radius:100px 100px 48% 48% / 100px 100px 8% 8%}
  .product-card .tag {font-size:9px; top:23px; padding:8px 9px}
  .product-content {padding:22px 16px}
  .product-content h3 {font-size:19px}
  .product-bottom {align-items:flex-start; flex-direction:column; gap:15px}
  .product-content p {font-size:15px; min-height:125px}
  .add-button {font-size:11px; padding:12px 15px; width:100%; justify-content:space-between}
  .section-heading>p {max-width:270px}
  .story-inner {grid-template-columns:1fr; display:flex; flex-direction:column-reverse; gap:65px; padding-top:85px; padding-bottom:85px; max-width:740px}
  .story-copy h2 {font-size:40px}
  .story-copy>p:not(.eyebrow) {font-size:17px}
  .story-photos {width:91%; max-width:560px; align-self:center; padding-bottom:170px}
  .crew-photo img {height:300px}
  .crew-photo figcaption {font-size:11px}
  .royal-photo figcaption {font-size:10px}
  .story-photos .photo-note {font-size:23px; bottom:20px}
  .royal-photo {width:62%; padding:10px 10px 0}
  .queens-stamp {width:130px; height:130px; top:-25px; right:-20px}
  .queens-stamp span {font-size:10px}
  .story-copy .founder-note blockquote {font-size:29px}
  .founder-note>img {width:88px; height:110px}
  .story-section {border-radius:50% 50% 48% 12% / 3% 3% 3% 1.5%}
  .values-strip>div {padding:0 16px; grid-template-columns:1fr; text-align:center}
  .values-strip svg {grid-row:auto; margin:0 auto 15px}
  .values-strip h3 {font-size:14px}
  .values-strip p {font-size:14px}
  .location-copy h2 {font-size:46px}
  .location-copy .button {font-size:11px; padding:18px 20px; gap:12px}
  .location-art {min-height:425px; padding-top:55px}
  .road-sign {padding:17px 16px}
  .road-sign strong {font-size:31px}
  .road-sign span {font-size:10px; letter-spacing:.5px}
  .sign-letterboard {font-size:13px; letter-spacing:2px; min-width:195px; padding:12px 15px}
  .location-postmark {font-size:9px; bottom:19px; right:6px; padding:13px 10px}
  .closing-banner h2 {font-size:35px}
  .closing-banner p {font-size:12px}
  .closing-banner>.button {font-size:12px; padding:20px 24px; margin:0}
  .closing-star {font-size:35px}
  .footer-top {align-items:flex-start}
  .footer-brand>span {font-size:28px}
  .footer-brand small {font-size:9px}
  .footer-bottom>span {max-width:210px}
}
@media(max-width:600px) {
  .announcement {min-height:36px; font-size:10px; letter-spacing:.8px}
  .site-header {height:92px; padding:0 6%}
  .brand>span {font-size:30px}
  .brand small {display:none}
  .arcs {width:41px; height:41px}
  .brand {gap:8px}
  .header-actions {gap:5px}
  .bag-button {padding:10px 5px; gap:6px}
  .bag-count {font-size:14px}
  .mobile-toggle {padding:12px 0 12px 12px}
  .header-order {display:none}
  .mobile-nav:not([hidden]) {top:80px; right:5%; width:90%; border-radius:24px; font-size:17px}
  .hero {padding:43px 6% 95px; border-radius:28px 28px 0 0; min-height:0; display:flex; flex-direction:column; background:radial-gradient(ellipse at 70% 72%,#65351e 0%,#302019 36%,#201c19 72%)}
  .hero::before {background-size:auto 100%; background-position:58% center; opacity:.7; mask-image:linear-gradient(180deg,transparent,#000 30%)}
  .hero-copy {align-self:stretch; padding:0}
  .hero .eyebrow {font-size:11px; letter-spacing:.9px; margin-bottom:22px; gap:7px}
  .hero .tiny-star {font-size:19px}
  .hero h1 {font-size:clamp(43px,12vw,72px); letter-spacing:-1.4px; line-height:1.09}
  .hero-description {font-size:17px; line-height:1.8; margin-top:24px; max-width:480px}
  .hero-buttons {flex-direction:column; align-items:flex-start; gap:19px; margin-top:25px}
  .hero-buttons .button {font-size:12px; padding:19px 24px; min-height:55px; gap:25px}
  .hero-buttons .text-link {font-size:15px; padding:8px 0}
  .hero-footnote {font-size:12px; margin-top:24px; gap:9px; max-width:310px}
  .hero-footnote .hand-star {font-size:23px}
  .hero-visual {height:440px; min-height:440px; margin:30px -9px 0; width:calc(100% + 18px); align-self:stretch}
  .hero-burger {width:380px; height:380px; max-width:108%; margin:0; left:50%; top:22px; transform:translateX(-50%) rotate(-6deg); position:absolute; object-fit:contain}
  .hero-orbit {width:340px; height:340px; max-width:96%; top:28px; right:auto; left:50%; transform:translateX(-50%) rotate(-12deg)}
  .seedless-sticker {width:124px; height:124px; top:0; right:-2px; gap:7px}
  .seedless-sticker span {font-size:9px}
  .seedless-sticker strong {font-size:16px}
  .burger-caption {left:50%; bottom:-4px; min-width:250px; width:250px; padding:19px 20px 15px; transform:translateX(-50%) rotate(-5deg); gap:7px}
  .burger-caption strong {font-size:25px}
  .burger-caption>span:last-child {font-size:11px; letter-spacing:.25px}
  .handwritten {font-size:23px}
  .star-one {left:0; top:38px; font-size:35px}
  .star-two {right:-3px; bottom:91px; font-size:40px}
  .hero-arrow {left:-5px; bottom:38px; width:68px}
  .hero-wave {height:65px}
  .ticker-shell {margin-top:-12px; padding:15px 0 18px}
  .ticker {padding:18px 0; transform:rotate(-2deg)}
  .ticker>div {gap:27px}
  .ticker span {font-size:15px}
  .ticker i {font-size:24px}
  .menu-section {padding-top:45px; padding-bottom:50px}
  h2 {font-size:34px; line-height:1.2}
  .section-heading {gap:20px}
  .section-heading .eyebrow {font-size:11px; letter-spacing:1px; margin-bottom:16px}
  .section-heading>p {font-size:16px; max-width:none; line-height:1.8}
  .menu-controls {margin-top:27px; margin-bottom:25px; gap:19px}
  .menu-filters {gap:8px}
  .menu-filters button {font-size:13px; padding:12px 16px; min-height:46px}
  .full-menu {font-size:14px; padding:8px 0}
  .product-grid {gap:30px}
  .product-card {border-radius:150px 150px 30px 30px}
  .product-photo {height:310px; border-radius:150px 150px 48% 48% / 150px 150px 8% 8%}
  .product-photo img {padding:51px 18px 10px}
  .product-card .tag {font-size:11px; top:27px; padding:9px 13px}
  .product-content {padding:25px}
  .product-content h3 {font-size:24px}
  .product-content p {font-size:16px; line-height:1.7; min-height:0; margin-top:13px}
  .product-bottom {flex-direction:row; align-items:center; padding-top:23px; gap:12px}
  .product-bottom strong {font-size:23px}
  .add-button {width:auto; font-size:11px; padding:13px 16px; gap:17px}
  .menu-note {font-size:13px; line-height:1.8; margin-top:25px}
  .story-section {border-radius:50% 50% 50% 10% / 2% 2% 2% 1%; margin-top:10px}
  .story-inner {padding-top:67px; padding-bottom:65px; gap:60px}
  .story-copy h2 {font-size:32px; line-height:1.2}
  .story-copy .eyebrow {font-size:11px; letter-spacing:.9px; margin-bottom:19px}
  .story-copy>p:not(.eyebrow) {font-size:17px; line-height:1.85; margin-top:24px}
  .founder-note {gap:16px; padding-top:26px; margin-top:28px; margin-bottom:22px}
  .founder-note>img {width:80px; height:108px; border-radius:8px}
  .story-copy .founder-note blockquote {font-size:25px; line-height:1.35}
  .story-copy .founder-note cite {font-size:11px; letter-spacing:.3px; margin-top:14px}
  .founder-note cite span {font-size:10px; letter-spacing:.2px; line-height:1.6}
  .story-copy .light-link {font-size:15px}
  .story-photos {width:92%; padding-bottom:160px}
  .crew-photo img {height:220px}
  .crew-photo figcaption {font-size:10px; line-height:1.5; letter-spacing:.2px; padding:16px 3px; max-width:100%}
  .royal-photo {width:67%; right:-8px; padding:8px 8px 0; bottom:0}
  .royal-photo figcaption {font-size:9px; letter-spacing:.1px; padding:11px 2px; line-height:1.5}
  .story-photos .photo-note {font-size:18px; bottom:29px; left:-4px}
  .queens-stamp {width:113px; height:113px; right:-12px; top:-22px; gap:6px}
  .queens-stamp span {font-size:9px; letter-spacing:.1px}
  .queens-stamp svg {width:36px}
  .values-strip {padding-top:15px; padding-bottom:15px; grid-template-columns:1fr}
  .values-strip>div,.values-strip>div:first-child {grid-template-columns:45px 1fr; text-align:left; padding:28px 2px; column-gap:17px}
  .values-strip svg {grid-row:span 2; margin:0; width:38px; height:43px}
  .values-strip h3 {font-size:15px; line-height:1.45}
  .values-strip p {font-size:14px; line-height:1.7; max-width:none; margin-top:8px}
  .location-section {padding-top:55px; padding-bottom:60px; gap:40px}
  .location-copy .eyebrow {font-size:11px; letter-spacing:1px}
  .location-copy h2 {font-size:51px}
  .location-copy>p:not(.eyebrow) {font-size:17px}
  .location-copy>p:not(.eyebrow) br {display:none}
  .address strong {font-size:17px}
  .address span {font-size:15px}
  .location-copy .button {font-size:11px; padding:20px 22px; gap:18px; min-height:57px}
  .location-copy>small {font-size:13px; max-width:none; margin-top:21px}
  .location-art {min-height:445px; border-radius:48% 52% 42% 58% / 42% 41% 59% 58%; padding-top:64px; max-width:420px}
  .road-sign {padding:20px 19px; border-radius:25px}
  .road-sign strong {font-size:36px}
  .road-sign span {font-size:10px; letter-spacing:.7px}
  .sign-letterboard {font-size:15px; min-width:220px; padding:12px 19px}
  .location-postmark {font-size:9px; bottom:20px; right:9px; padding:13px 9px}
  .closing-banner {border-radius:50% 50% 0 0 / 8% 8% 0 0; padding:53px 6% 44px; gap:25px; align-items:flex-start}
  .closing-banner p {font-size:12px; letter-spacing:.6px; max-width:265px}
  .closing-banner h2 {font-size:35px}
  .closing-banner>.button {font-size:12px; padding:20px 26px}
  .closing-star {top:45px; right:6%; font-size:38px}
  .site-footer {padding-top:42px; padding-bottom:30px}
  .footer-top {gap:26px; padding-bottom:28px}
  .footer-brand>span {font-size:30px}
  .footer-brand .arcs {width:42px}
  .footer-top nav {justify-content:flex-start; font-size:14px; gap:17px 22px}
  .footer-top nav button {font-size:14px}
  .footer-bottom {gap:17px; margin-top:25px}
  .footer-bottom p {font-size:12px; line-height:1.85}
  .footer-bottom>span {font-size:11px; max-width:none; letter-spacing:.2px}
  .product-dialog {border-radius:25px}
  .detail-image {height:245px}
  .detail-copy {padding:29px 24px}
  .detail-copy .eyebrow {font-size:11px}
  .detail-copy h2 {font-size:29px}
  .detail-copy>p:not(.eyebrow) {font-size:16px}
  .allergens {font-size:13px}
  .info-dialog {padding:55px 25px 32px}
  .info-dialog .eyebrow {font-size:11px}
  .info-dialog h2 {font-size:30px}
  .info-dialog p:not(.eyebrow) {font-size:16px}
  .info-dialog .info-note {font-size:13px!important}
  .location-reference figcaption {font-size:11px; padding:14px}
  .location-reference figcaption span {font-size:12px}
  .bag-dialog {width:100%; border-radius:24px 0 0 24px; padding:30px 22px}
  .bag-heading .eyebrow {font-size:11px}
  .bag-heading h2 {font-size:32px}
  .bag-item {gap:12px; grid-template-columns:73px 1fr}
  .bag-thumb {width:73px; height:90px}
  .bag-item h3 {font-size:16px}
  .bag-line-actions {gap:7px}
  .bag-line-actions .quantity-control button {width:34px; height:40px}
  .bag-line-actions .quantity-control span {min-width:23px}
  .remove-item {font-size:12px; padding:4px}
  .toast {font-size:14px; padding:15px 20px; border-radius:25px}
}
@media(max-width:360px) {
  .brand>span {font-size:26px}
  .arcs {width:32px}
  .hero .eyebrow {font-size:10px; letter-spacing:.6px}
  .hero h1 {font-size:11.8vw}
  .hero-visual {height:390px; min-height:390px; margin-top:27px}
  .hero-burger {width:325px; height:325px; top:20px}
  .hero-orbit {width:280px; height:280px}
  .seedless-sticker {width:109px; height:109px; right:-3px; top:0}
  .seedless-sticker strong {font-size:14px}
  .seedless-sticker span {font-size:8px}
  .burger-caption {min-width:233px; width:233px; bottom:1px}
  .hero-arrow {left:-9px; width:52px; bottom:53px}
  .product-content {padding:23px 19px}
  .product-content h3 {font-size:22px}
  .product-photo {height:280px}
  .product-card .tag {font-size:10px}
  .story-copy h2 {font-size:28px}
  .story-copy .founder-note blockquote {font-size:22px}
  .founder-note>img {width:65px; height:97px}
  .story-photos .photo-note {font-size:16px; bottom:35px}
  .royal-photo figcaption {font-size:9px}
  .location-copy .button {font-size:10px; padding:19px 17px; gap:12px}
  .road-sign strong {font-size:30px}
  .road-sign span {font-size:9px}
  .road-sign {padding:18px 15px}
  .closing-banner h2 {font-size:31px}
  .closing-star {font-size:29px; right:4%; top:50px}
}

/* Readable action labels and a seal that stays inside the curved sign panel. */
.add-button {font-size:12px; letter-spacing:.2px}
.location-postmark {right:10%; bottom:24%; background:var(--cream); z-index:4; box-shadow:3px 4px 0 #201c1912}
@media(max-width:600px) {
  .location-copy .button {font-size:12px; letter-spacing:.2px; gap:12px; padding:19px 20px}
  .closing-banner>.button {font-size:13px}
}
@media(max-width:360px) {
  .location-copy .button {font-size:11px; padding:19px 14px; gap:10px}
  .add-button {font-size:11px; padding:13px 14px}
}