@font-face {
  font-family: "Hola Script";
  src: url("assets/hola-script.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Hola Serif";
  src: url("assets/hola-serif-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Hola Serif";
  src: url("assets/hola-serif-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Hola Folk";
  src: url("assets/hola-folk-display.otf") format("opentype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #2b1c13;
  --paper: #f4e5ca;
  --paper-light: #fbf0dc;
  --red: #a62c1b;
  --red-dark: #761d16;
  --gold: #d58b19;
  --blue: #0f4f7a;
  --blue-dark: #083653;
  --green: #183f31;
  --green-soft: #53613b;
  --peach: #d99b7f;
  --line: rgba(43, 28, 19, 0.22);
  --shadow: 0 24px 58px rgba(38, 22, 13, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    url("assets/paper-texture.svg"),
    radial-gradient(circle at 18% 9%, rgba(255,255,255,.58), transparent 29%),
    radial-gradient(circle at 82% 34%, rgba(166,44,27,.1), transparent 26%),
    linear-gradient(115deg, rgba(213,139,25,.08), transparent 38%, rgba(24,63,49,.06));
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 220px 220px, 100% 720px, 100% 900px, 100% 100%;
  background-blend-mode: multiply, normal, normal, normal;
  font-family: "Hola Serif", Georgia, "Times New Roman", serif;
  line-height: 1.55;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .08;
  background-image: url("assets/paper-texture.svg");
  background-size: 175px 175px;
  mix-blend-mode: multiply;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--paper-light);
  border: 2px solid var(--ink);
}
.skip-link:focus { top: 16px; }

.site-header {
  position: relative;
  z-index: 10;
  max-width: 1380px;
  min-height: 82px;
  margin: 0 auto;
  padding: 15px 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background-color: rgba(244,229,202,.92);
  background-image: url("assets/paper-texture.svg");
  background-size: 180px 180px;
  background-blend-mode: multiply;
}
nav { display: flex; align-items: center; justify-content: center; gap: 34px; color: var(--blue-dark); font: 700 .7rem/1 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
nav a { text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--red); }
.nav-cta { padding: 12px 17px; border: 1px solid var(--blue-dark); background: var(--blue); color: var(--paper-light); }
.nav-cta:hover, .nav-cta:focus-visible { background: var(--red); color: white; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 820px;
  margin: 0;
  padding: 80px max(42px, calc((100vw - 1380px)/2)) 120px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(33,22,12,.18), transparent 34%, rgba(33,22,12,.05)),
    url("assets/farmstand-hero.webp");
  background-size: cover, cover;
  background-position: center, center;
  box-shadow: inset 0 0 130px rgba(43,24,12,.18);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  z-index: 4;
  background-color: #9b683f;
  background-image: url("assets/rustic-oak-planks.png");
  background-repeat: no-repeat;
  background-position: center 46%;
  background-size: cover;
  border-top: 3px solid rgba(73,39,20,.65);
  border-bottom: 5px solid #754727;
  box-shadow: 0 8px 17px rgba(67,36,18,.22);
}
.hero-copy {
  position: relative;
  z-index: 3;
  width: min(650px, 52vw);
  padding: 46px 50px 44px;
  background-color: rgba(248,234,209,.91);
  background-image: url("assets/paper-texture.svg");
  background-size: 170px 170px;
  background-blend-mode: multiply;
  border: 2px solid rgba(15,79,122,.82);
  outline: 1px solid rgba(244,229,202,.9);
  outline-offset: -9px;
  box-shadow: 0 24px 60px rgba(43,24,12,.26);
  backdrop-filter: blur(5px);
}
.hero-logo-frame {
  position: relative;
  width: min(555px, 100%);
  aspect-ratio: 1402 / 1122;
  margin: -11px auto 20px;
  display: grid;
  place-items: center;
}
.hero-logo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/ornate-carved-wood-frame.png") center / contain no-repeat;
  opacity: 1;
  z-index: 2;
  filter: brightness(1.25) saturate(1.18) contrast(1.03) drop-shadow(0 8px 10px rgba(43,24,12,.17));
}
.hero-logo-lockup {
  position: relative;
  z-index: 1;
  width: 63%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 3px;
  text-align: center;
}
.hero-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.hero-logo-bee {
  display: block;
  width: clamp(28px, 4vw, 44px);
  height: auto;
  margin: -2px 0 -1px;
}
.logo-tagline {
  color: #7e2923;
  font-family: "Hola Serif", Georgia, serif;
  font-size: clamp(.58rem, 1.15vw, .78rem);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-descriptor {
  width: 100%;
  padding-top: 4px;
  border-top: 1px solid rgba(105,77,48,.45);
  color: #3e4735;
  font-family: "Hola Serif", Georgia, serif;
  font-size: clamp(.52rem, .95vw, .65rem);
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-descriptor b {
  color: #bd7330;
  font-weight: 400;
}
.eyebrow { margin-bottom: 15px; color: var(--red); font: 800 .68rem/1.25 Arial, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin-bottom: 23px; color: var(--blue); font-size: clamp(2.75rem, 4.35vw, 4.75rem); line-height: .96; letter-spacing: -.045em; font-weight: 500; }
h1 em, .section-heading h2 em, .script-line, .dialog-script { color: var(--red); font-family: "Hola Folk", "Trebuchet MS", sans-serif; font-style: italic; font-weight: 700; letter-spacing: -.045em; }
h1 em { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -.045em; }
.hero-lede { max-width: 590px; margin-bottom: 30px; font-size: clamp(1.02rem, 1.45vw, 1.25rem); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.button {
  min-height: 52px;
  padding: 15px 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font: 800 .68rem/1 Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.primary { background: var(--red); color: white; }
.primary:hover, .primary:focus-visible { background: var(--green); }
.text-button { padding: 10px 0 6px; border: 0; background: none; color: var(--blue-dark); cursor: pointer; font: italic 700 1rem/1.3 "Hola Serif", Georgia, serif; text-decoration: none; }
.text-button:hover, .text-button:focus-visible { color: var(--red); }
.small-note { margin: 28px 0 0; color: var(--blue-dark); font: 700 1rem/1.3 "Hola Serif", Georgia, serif; }
.small-note em { color: var(--red); font: italic 700 1.2rem/1 "Hola Folk", "Trebuchet MS", sans-serif; }

.menu-section {
  position: relative;
  padding: 62px max(42px, calc((100vw - 1296px)/2)) 85px;
  background-color: var(--paper-light);
  background-image:
    url("assets/paper-texture.svg"),
    radial-gradient(circle at 8% 28%, rgba(213,139,25,.16), transparent 22%),
    radial-gradient(circle at 93% 70%, rgba(166,44,27,.11), transparent 25%);
  background-size: 190px 190px, auto, auto;
  background-blend-mode: multiply, normal, normal;
  box-shadow: inset 0 22px 55px rgba(75,42,22,.08);
}
.menu-section::before {
  content: none;
}
.section-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 30px; }
.section-heading h2 { margin-bottom: 0; color: var(--blue); font-size: clamp(3rem, 5vw, 4.8rem); line-height: .94; letter-spacing: -.055em; font-weight: 500; }
.section-heading h2 em { display: inline-block; color: var(--red); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: .87em; letter-spacing: -.045em; }
.section-heading > p { max-width: 430px; margin-bottom: 10px; font-size: 1.05rem; }
.filters { margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 9px; }
.filter { padding: 11px 16px; border: 1px solid var(--blue); background: transparent; color: var(--blue-dark); cursor: pointer; font: 800 .65rem/1 Arial, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.filter:hover, .filter:focus-visible, .filter.active { background: var(--blue); color: var(--paper-light); }
.dessert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dessert-card {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #f5e5ca;
  background-image:
    linear-gradient(to bottom, rgba(245,229,202,0) 0%, rgba(245,229,202,0) 52%, rgba(245,229,202,.28) 100%),
    var(--dessert-image),
    url("assets/paper-texture.svg");
  background-size: 100% 100%, cover, 160px 160px;
  background-position: center, center top, center;
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, multiply;
  border: 1px solid var(--blue);
  box-shadow: inset 0 0 30px rgba(117,69,31,.06);
  transition: transform .2s ease, box-shadow .2s ease, background-size .35s ease;
}
.dessert-card::before, .dessert-card::after { content: ""; position: absolute; z-index: 0; width: 70px; height: 70px; border: 10px solid var(--green); border-radius: 50%; opacity: .11; }
.dessert-card::before { left: -35px; bottom: -35px; }
.dessert-card::after { right: -35px; top: -35px; }
.dessert-card:hover { transform: translateY(-4px); background-size: 100% 100%, 104%, 160px 160px; box-shadow: 0 15px 28px rgba(55,31,17,.18); }
.illustrated-card { background-size: 100% 100%, 300% auto, 160px 160px; }
.illustrated-card:hover { background-size: 100% 100%, 306% auto, 160px 160px; }
.cocoa-card { background-position: center, left top, center; }
.snack-card { background-position: center, center top, center; }
.box-card { background-position: center, right top, center; }
.dessert-card[hidden] { display: none; }
.card-top { position: relative; z-index: 1; min-height: 180px; padding: 18px 21px 0; display: flex; align-items: start; justify-content: space-between; color: var(--green); }
.card-number { padding: 7px 9px; background: rgba(250,239,218,.9); border: 1px solid rgba(15,79,122,.42); color: var(--blue-dark); font: 800 .65rem/1 Arial, sans-serif; letter-spacing: .13em; backdrop-filter: blur(3px); }
.card-copy { position: relative; z-index: 1; height: 100%; margin: 0 14px 14px; padding: 18px 18px 17px; display: flex; flex-direction: column; background: linear-gradient(135deg, rgba(252,243,226,.74), rgba(245,229,202,.58)); border: 1px solid rgba(81,51,30,.24); box-shadow: 0 8px 22px rgba(65,38,20,.08); backdrop-filter: blur(1.5px); }
.tag { margin-bottom: 9px; color: var(--red); font: 800 .61rem/1.25 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.card-copy h3 { margin-bottom: 11px; color: var(--blue-dark); font-size: 1.55rem; line-height: 1.02; text-shadow: 0 1px 0 rgba(255,248,232,.8); }
.card-copy > p { text-shadow: 0 1px 0 rgba(255,248,232,.62); }
.card-copy > p:not(.tag) { margin-bottom: 22px; font-size: .91rem; }
.detail-trigger { width: 100%; margin-top: auto; padding: 12px 0 3px; display: flex; justify-content: space-between; align-items: center; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font: 800 .62rem/1 Arial, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.detail-trigger:hover, .detail-trigger:focus-visible { color: var(--red); }
.custom-order-note { margin-top: 26px; padding: 5px; border: 1px solid rgba(112,71,43,.6); background: #9c6940 url("assets/rustic-oak-planks.png") center 46% / cover; box-shadow: 0 9px 20px rgba(77,42,20,.15); }
.custom-order-paper { padding: 18px 30px; display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 24px; border: 1px solid rgba(120,76,43,.2); background-image: linear-gradient(rgba(255,249,235,.86), rgba(255,249,235,.86)), url("assets/rustic-oak-planks.png"); background-size: auto, cover; background-position: center; }
.custom-order-wheat { display: block; width: 72px; height: 96px; object-fit: contain; }
.custom-order-paper p { display: grid; grid-template-columns: minmax(280px, .9fr) 1fr; align-items: center; gap: 32px; margin: 0; }
.custom-order-paper strong { color: #86301f; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 400; line-height: 1.25; }
.custom-order-paper span { padding-left: 24px; border-left: 1px solid rgba(120,76,43,.24); font-size: .95rem; line-height: 1.45; }

.brand-section { position: relative; overflow: hidden; padding: 95px max(42px, calc((100vw - 1210px)/2)); display: grid; grid-template-columns: 1fr .82fr; gap: 85px; align-items: center; background-color: #103e36; background-image: linear-gradient(90deg, rgba(9,42,36,.76), rgba(9,42,36,.68) 55%, rgba(9,42,36,.60)), url("assets/folk-floral-pattern.jpg"); background-size: auto, 1024px auto; background-position: center; color: var(--paper-light); box-shadow: inset 0 0 110px rgba(0,0,0,.18); }
.brand-copy, .catering-poster { position: relative; z-index: 1; }
.brand-copy { isolation: isolate; }
.brand-copy::before { content: ""; position: absolute; z-index: -1; inset: -38px -52px; background: radial-gradient(ellipse at 42% 50%, rgba(4,31,27,.92) 0%, rgba(4,31,27,.78) 56%, rgba(4,31,27,0) 94%); pointer-events: none; }
.brand-copy h2, .brand-copy p, .brand-relationship { text-shadow: 0 2px 5px rgba(0,0,0,.5); }
.light-eyebrow { color: var(--gold); }
.brand-copy h2 { margin-bottom: 2px; font-size: clamp(3.4rem, 6.7vw, 7rem); line-height: .82; letter-spacing: -.065em; font-weight: 500; }
.script-line { margin-bottom: 32px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: clamp(2rem, 3.8vw, 4.2rem); letter-spacing: -.035em; line-height: 1.08; }
.brand-copy > p:not(.eyebrow):not(.script-line) { max-width: 620px; font-size: 1.13rem; line-height: 1.5; }
.brand-copy > p strong { color: #f4d49a; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.06em; font-weight: 400; }
.brand-relationship { max-width: 700px; margin: 34px 0; padding: 24px 0; display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; border-top: 1px solid rgba(244,229,202,.28); border-bottom: 1px solid rgba(244,229,202,.28); }
.brand-relationship div { display: grid; }
.brand-relationship div > span { color: var(--gold); font: 800 .61rem/1 Arial, sans-serif; letter-spacing: .13em; }
.brand-relationship strong { margin: 7px 0 2px; font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; font-weight: 400; letter-spacing: -.015em; }
.brand-relationship small { opacity: .95; font-size: .9rem; }
.brand-relationship i { color: var(--gold); font-style: normal; font-size: 1.5rem; }
.cream-button { background: var(--paper-light); color: var(--green); }
.cream-button:hover, .cream-button:focus-visible { background: var(--gold); color: var(--ink); }
.catering-poster { margin: 0; padding: 13px; background: #813321; box-shadow: 0 30px 65px rgba(0,0,0,.35); transform: rotate(1.3deg); }
.catering-poster img { border: 2px solid var(--paper-light); }

footer { padding: 64px 30px 66px; text-align: center; background-color: #f9f1e3; background-image: radial-gradient(ellipse 560px 260px at 50% 52%, rgba(255,250,240,.99), rgba(255,250,240,.91) 55%, transparent 100%), linear-gradient(rgba(255,249,238,.64), rgba(255,249,238,.64)), url("assets/brown-floral-tile.png"); background-size: auto, auto, 270px 270px; background-position: center; color: #3c241b; }
.footer-mark { display: inline-block; width: min(440px, 88vw); margin-bottom: 19px; padding: 18px 22px; border: 6px solid #633726; outline: 2px solid #ad8151; outline-offset: 4px; background: #f9edd7; box-shadow: 0 12px 28px rgba(60,32,18,.23), inset 0 0 0 1px #c8a978; text-decoration: none; }
.footer-mark img { display: block; width: 100%; height: auto; }
footer p { margin: 10px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-style: italic; font-weight: 400; letter-spacing: .015em; }
.footer-note { font-size: .95rem; font-style: normal; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }

.detail-dialog { width: min(570px, calc(100vw - 28px)); max-height: calc(100vh - 38px); padding: 50px; overflow: auto; border: 5px double var(--green); background-color: var(--paper-light); background-image: url("assets/paper-texture.svg"), url("assets/folk-pattern.svg"); background-size: 170px 170px, 360px 360px; background-blend-mode: multiply, soft-light; color: var(--ink); box-shadow: 0 30px 100px rgba(0,0,0,.42); }
.detail-dialog::backdrop { background: rgba(27,22,15,.76); backdrop-filter: blur(4px); }
.detail-dialog h2 { margin-bottom: 15px; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: .9; letter-spacing: -.05em; }
.dialog-close { position: absolute; top: 13px; right: 14px; width: 39px; height: 39px; border: 0; background: transparent; cursor: pointer; font-size: 2rem; }
.dialog-facts { margin: 25px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dialog-facts span { padding: 8px 11px; border: 1px solid var(--green); font: 800 .61rem/1 Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.dialog-note { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .8rem; opacity: .72; }
.catering-dialog { width: min(700px, calc(100vw - 28px)); }
.catering-dialog .catering-logo-heading { width: min(470px, 100%); margin: 2px auto 12px; line-height: 0; }
.catering-logo-heading img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.dialog-script { margin: 0 0 25px; color: #a84d1c; font: italic 400 clamp(1.55rem, 3.4vw, 2rem)/1.3 "Hola Serif", Georgia, serif; letter-spacing: -.015em; }
.catering-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.catering-grid div { padding: 20px; border: 1px solid var(--line); background: #f3dfbd; }
.catering-grid strong { display: block; margin: 8px 0 5px; color: var(--red-dark); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.catering-grid p { margin: 0; font-size: .83rem; }

.orders-nav[aria-current="page"] { color: var(--red); }
.orders-intro { position: relative; min-height: 500px; padding: 78px max(42px, calc((100vw - 1296px)/2)) 88px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, .55fr); gap: 50px; align-items: center; overflow: hidden; background: linear-gradient(110deg, rgba(255,248,231,.96), rgba(255,244,219,.92)), url("assets/paper-texture.svg"); border-bottom: 14px solid #8b542f; }
.orders-intro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: url("assets/rustic-oak-planks.png") center / cover; }
.orders-intro-copy { position: relative; z-index: 1; max-width: 800px; }
.orders-intro h1 { max-width: 850px; font-size: clamp(3.3rem, 6vw, 6.5rem); line-height: .94; }
.orders-intro h1 em { color: var(--red); }
.orders-intro-copy > p:not(.eyebrow) { max-width: 670px; font-size: clamp(1.05rem, 1.5vw, 1.27rem); }
.orders-intro-art { width: min(100%, 390px); padding: 20px; justify-self: center; filter: drop-shadow(0 17px 13px rgba(70,40,18,.14)); }
.orders-status { position: relative; max-width: 690px; margin-top: 28px; padding: 21px; color: #173241; background-image: linear-gradient(rgba(174,204,213,.48), rgba(174,204,213,.48)), url("assets/floral-notice.webp"); background-position: center; background-size: auto, 170px 170px; background-repeat: no-repeat, repeat; box-shadow: 0 13px 28px rgba(77,42,20,.16); font-size: 1rem; line-height: 1.45; }
.orders-status-inner { padding: 18px 23px; display: grid; gap: 6px; background: rgba(255,249,236,.96); box-shadow: 0 2px 12px rgba(8,24,39,.15); }
.orders-status-kicker { color: var(--blue-dark); font: 800 .75rem/1.3 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.orders-status strong { color: var(--red-dark); font: 400 clamp(1.55rem, 2.2vw, 2rem)/1.1 "Hola Serif", Georgia, serif; }
.orders-lineup { padding: 72px max(42px, calc((100vw - 1296px)/2)) 95px; background: var(--paper-light) url("assets/paper-texture.svg") center / 190px 190px; }
.orders-lineup-heading { margin-bottom: 34px; display: grid; grid-template-columns: 1fr minmax(220px, 400px); align-items: end; gap: 40px; }
.orders-lineup-heading h2 { margin-bottom: 0; color: var(--blue); font-size: clamp(3.1rem, 5vw, 5rem); line-height: 1; letter-spacing: -.05em; font-weight: 500; }
.orders-lineup-heading h2 em { color: var(--red); font-family: Georgia, serif; font-weight: 400; }
.orders-lineup-heading > p { margin-bottom: 4px; font-size: 1.05rem; }
.order-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.order-product { min-width: 0; background: #fff4df; border: 1px solid rgba(15,79,122,.56); box-shadow: 0 9px 22px rgba(77,42,20,.08); }
.order-product img { width: 100%; aspect-ratio: 1.4 / 1; object-fit: cover; background: var(--paper); }
.order-product-collage { width: 100%; aspect-ratio: 1.4 / 1; background-image: url("assets/grab-and-go-art.png"); background-repeat: no-repeat; background-size: auto 140%; background-color: var(--paper); }
.order-product-grab { background-position: center; }
.order-product-box { background-position: right center; }
.order-product > div:not(.order-product-collage) { padding: 19px 18px 22px; }
.order-product span { color: var(--red); font: 800 .78rem/1.25 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.order-product h3 { margin: 8px 0; color: var(--blue-dark); font-size: 1.45rem; line-height: 1.12; }
.order-product p { margin: 0; font-size: .99rem; line-height: 1.45; }
.orders-next { padding: 68px max(42px, calc((100vw - 1200px)/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; color: var(--paper-light); background: linear-gradient(rgba(9,42,36,.89), rgba(9,42,36,.89)), url("assets/folk-floral-pattern.jpg") center / 880px; }
.orders-next h2 { margin: 0; font-size: clamp(2.8rem, 4.2vw, 4.8rem); line-height: 1; font-weight: 400; }
.orders-next p:not(.eyebrow) { font-size: 1.13rem; }

*:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (max-width: 1060px) {
  .hero { min-height: 760px; background-position: center, 62% center; }
  .hero-copy { width: min(650px, 68vw); }
  .dessert-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-section { grid-template-columns: 1fr; }
  .catering-poster { max-width: 650px; margin: 0 auto; }
  .order-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .site-header { min-height: 74px; padding: 13px 20px; }
  nav { gap: 11px; }
  nav a:not(.nav-cta):not(.orders-nav) { display: none; }
  .orders-nav { padding: 12px 8px; }
  .hero { min-height: 760px; padding: 48px 20px 110px; align-items: end; background-position: center, 68% center; }
  .hero::after { height: 42px; }
  .hero-copy { width: 100%; padding: 31px 27px 34px; background-color: rgba(248,234,209,.93); }
  .hero-logo-frame { width: min(520px, 100%); margin: -8px auto 16px; }
  .hero-logo-lockup { gap: 3px; }
  .logo-tagline { font-size: clamp(.4rem, 1.8vw, .56rem); letter-spacing: .07em; }
  .logo-descriptor { font-size: clamp(.39rem, 1.65vw, .52rem); letter-spacing: .06em; }
  h1 { font-size: clamp(2.8rem, 11.5vw, 4.35rem); }
  .menu-section { padding: 54px 20px 75px; }
  .custom-order-paper { padding: 18px 17px; grid-template-columns: 48px 1fr; gap: 13px; }
  .custom-order-wheat { width: 46px; height: 72px; }
  .custom-order-paper p { grid-template-columns: 1fr; gap: 12px; }
  .custom-order-paper span { padding-left: 0; border-left: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 23px; }
  .section-heading h2 { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .filter { flex: 0 0 auto; }
  .dessert-grid { grid-template-columns: 1fr; }
  .dessert-card { min-height: 425px; }
  .brand-section { padding: 80px 22px; gap: 55px; background-size: auto, 760px auto; }
  .brand-copy h2 { font-size: 4.2rem; }
  .script-line { font-size: 2.55rem; }
  .brand-relationship { grid-template-columns: 1fr; gap: 14px; }
  .brand-relationship i { transform: rotate(90deg); }
  .detail-dialog { padding: 46px 27px 30px; }
  .catering-grid { grid-template-columns: 1fr; }
  .orders-intro { min-height: 0; padding: 54px 22px 68px; grid-template-columns: 1fr; gap: 8px; }
  .orders-intro h1 { font-size: clamp(2.8rem, 10vw, 4.6rem); }
  .orders-intro-art { width: min(210px, 48vw); padding: 0; }
  .orders-lineup { padding: 58px 22px 72px; }
  .orders-lineup-heading { grid-template-columns: 1fr; gap: 18px; }
  .order-products { grid-template-columns: 1fr; }
  .order-product { display: grid; grid-template-columns: 36% 1fr; }
  .order-product img { height: 100%; aspect-ratio: auto; }
  .order-product-collage { height: 100%; aspect-ratio: auto; background-size: auto 100%; }
  .order-product > div:not(.order-product-collage) { padding: 14px; }
  .order-product h3 { font-size: 1.25rem; }
  .orders-next { padding: 62px 22px; grid-template-columns: 1fr; gap: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Order planner */
.order-quantity { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; border: 1px solid var(--blue); background: #fff9ed; }
.order-quantity button { width: 42px; height: 42px; border: 0; background: transparent; color: var(--blue-dark); font: 700 1.4rem/1 Arial, sans-serif; cursor: pointer; }
.order-quantity button:hover:not(:disabled), .order-quantity button:focus-visible { background: var(--blue); color: white; }
.order-quantity button:disabled { opacity: .35; cursor: default; }
.order-quantity span { min-width: 2ch; text-align: center; font: 700 1rem/1 Arial, sans-serif; }
.order-planner { margin-top: 42px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; border: 2px solid var(--blue); background: #fff4df; box-shadow: 0 10px 24px rgba(77,42,20,.09); }
.order-planner h3 { margin: 8px 0 14px; color: var(--blue-dark); font-size: clamp(2rem, 3vw, 3rem); line-height: 1; }
.order-planner p { margin-bottom: 0; }
.order-planner-summary { padding: 24px; background: #fffaf0; }
.order-planner-summary ul { margin: 0 0 20px; padding: 0; list-style: none; }
.order-planner-summary li { padding: 10px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.clear-order { padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--red-dark); font: 700 .95rem/1.2 Arial, sans-serif; cursor: pointer; }
[hidden] { display: none !important; }
@media (max-width: 700px) { .order-planner { padding: 22px; grid-template-columns: 1fr; gap: 22px; } .order-planner-summary { padding: 18px; } }