/* Nana Bea's Catering
   Concept: an old Southern kitchen. Cast-iron header, a pecan-wood table, a printed Bill of Fare
   on buttermilk paper, Nana's handwriting in the margins, and patchwork quilt strips between rooms.
   Bold thing: the quilt strips and banner. Everything else stays quiet and printed. */
:root {
  --iron: #2a1c15;          /* cast iron, header and footer */
  --iron-2: #3b281e;
  --pecan: #6b4429;         /* table */
  --pecan-dark: #563620;
  --paper: #f6ecd4;         /* buttermilk menu paper */
  --paper-edge: #e3d3ad;
  --ink: #2b1f18;           /* printed text */
  --ink-soft: #6a5847;
  --red: #9e2b1e;           /* barn red: the order button and ribbons */
  --red-dark: #7a1f14;
  --mustard: #d39a2c;       /* cornbread */
  --indigo: #2f3e63;        /* quilt indigo / enamelware */
  --collard: #55663f;
  --pen: #24357a;           /* Nana's ballpoint */
  --cream: #f1e2c0;
  --display: "Rye", "Rockwell Extra Bold", Georgia, serif;
  --serif: "Old Standard TT", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --quilt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22128%22%20height%3D%2232%22%20viewBox%3D%220%200%20128%2032%22%3E%3Crect%20width%3D%22128%22%20height%3D%2232%22%20fill%3D%22%23f3e6c8%22/%3E%3Cpath%20d%3D%22M0%200H32L0%2032Z%22%20fill%3D%22%239e2b1e%22/%3E%3Cpath%20d%3D%22M32%2032H64V0Z%22%20fill%3D%22%23d39a2c%22/%3E%3Cpath%20d%3D%22M64%200H96L64%2032Z%22%20fill%3D%22%232f3e63%22/%3E%3Cpath%20d%3D%22M96%2032H128V0Z%22%20fill%3D%22%2355663f%22/%3E%3Cpath%20d%3D%22M0%20.5H128M0%2031.5H128%22%20stroke%3D%22%232a1c15%22%20stroke-opacity%3D%22.35%22%20stroke-dasharray%3D%223%203%22/%3E%3C/svg%3E");
  --speck: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.55%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%229%22%20r%3D%221.1%22/%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%224%22%20r%3D%22.8%22/%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2217%22%20r%3D%221.3%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2227%22%20r%3D%22.9%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2236%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2247%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2254%22%20cy%3D%2252%22%20r%3D%22.8%22/%3E%3Ccircle%20cx%3D%2227%22%20cy%3D%2255%22%20r%3D%221%22/%3E%3C/g%3E%3C/svg%3E");
  --step--1: .9rem; --step-0: 1.06rem; --step-1: 1.3rem; --step-2: 1.7rem; --step-3: 2.3rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--iron); color: var(--ink); font: 400 var(--step-0)/1.6 var(--serif); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--red); }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 3px; }
.wrap { max-width: 980px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap.wide { max-width: 1180px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header (cast iron) ---------- */
.site-header { background: var(--iron); border-bottom: 3px double var(--paper-edge); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; max-width: 1180px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; font: 400 1.3rem/1 var(--display); letter-spacing: .02em; }
.brand img { width: 40px; height: 40px; }
.site-header nav { display: flex; align-items: center; gap: 20px; }
.site-header nav a:not(.pill) { color: var(--cream); text-decoration: none; font: 700 var(--step--1)/1 var(--serif); letter-spacing: .06em; }
.site-header nav a:not(.pill):hover { color: var(--mustard); }
.site-header .pill .short { display: none; }

/* ---------- the order button: a red enamel sign ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--red); color: var(--cream); text-decoration: none; cursor: pointer;
  font: 700 var(--step-0)/1 var(--serif); letter-spacing: .04em;
  padding: 14px 28px; border-radius: 8px; border: 2px solid var(--cream);
  box-shadow: 0 0 0 2px var(--red), 0 4px 0 2px var(--red-dark), 0 10px 20px rgba(0,0,0,.3);
  transition: transform .12s ease, background .12s ease;
}
.pill:hover { background: var(--red-dark); transform: translateY(-1px); }
.pill:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--red), 0 1px 0 2px var(--red-dark); }
.pill.small { padding: 9px 16px; font-size: var(--step--1); }
.pill.big { padding: 17px 32px; font-size: var(--step-1); }
.pill:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.pill-ghost { background: transparent; color: var(--red); border-color: var(--red); box-shadow: none; }
.pill-ghost:hover { background: var(--red); color: var(--cream); }

/* ---------- hero ---------- */
.hero { background: radial-gradient(120% 90% at 30% 30%, var(--iron-2), var(--iron)); padding-block: 34px 40px; }
.hero-grid { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.banner { display: block; width: 100%; filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)); }
.note-card {
  background: var(--paper); color: var(--ink); padding: 26px 24px 22px; position: relative;
  transform: rotate(1.6deg); box-shadow: 0 16px 30px rgba(0,0,0,.4);
  background-image: repeating-linear-gradient(180deg, transparent 0 29px, rgba(36,53,122,.18) 29px 30px);
}
.note-card::before {   /* a thumbtack */
  content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e4705a, var(--red) 55%, var(--red-dark)); box-shadow: 0 3px 4px rgba(0,0,0,.4);
}
.note-head { font: 700 2rem/1 var(--hand); color: var(--pen); margin: 0 0 8px; }
.note-card p { margin: 0 0 16px; font: 500 1.35rem/1.25 var(--hand); color: var(--pen); }
.note-card .pill { width: 100%; }
.note-card .note-foot { margin: 14px 0 0; font: 400 var(--step--1)/1.4 var(--serif); color: var(--ink-soft); }

/* ---------- quilt strip ---------- */
.quilt { height: 32px; background: var(--quilt) repeat-x center / auto 32px; border-block: 2px solid var(--iron); }

/* ---------- the table (pecan planks) ---------- */
.table {
  background-color: var(--pecan);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 226px, rgba(0,0,0,.28) 226px 229px, rgba(255,255,255,.04) 229px 230px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--pecan), var(--pecan-dark));
  padding-block: 44px 20px;
}

/* ---------- paper ---------- */
.sheet { background: var(--paper); border-radius: 2px; box-shadow: 0 1px 0 var(--paper-edge), 0 20px 38px rgba(0,0,0,.35); padding: clamp(22px, 5vw, 50px); margin-bottom: 40px; position: relative; }
.sheet h2 { font: 400 var(--step-3)/1.1 var(--display); margin: 0 0 8px; text-align: center; text-wrap: balance; }
.sheet .sub { text-align: center; color: var(--ink-soft); margin: 0 auto 26px; max-width: 48ch; font-style: italic; }
.sheet h3 { font: 700 var(--step-1)/1.2 var(--serif); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); position: relative; }
.ink { font: 700 1.55rem/1.15 var(--hand); color: var(--pen); }

/* Bill of Fare: a printed menu with a double rule border */
.bill { max-width: 940px; margin-inline: auto; }
.bill::before { content: ""; position: absolute; inset: 12px; border: 3px double var(--ink); pointer-events: none; }
.bill::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(43,31,24,.35); pointer-events: none; }
.bill > * { position: relative; z-index: 1; }
.bill-over { text-align: center; margin: 4px 0 0; font: 400 1rem/1 var(--display); letter-spacing: .2em; color: var(--red); }
.bill h2 { font: 400 clamp(3rem, 8vw, 4.6rem)/1 var(--script); margin: 4px 0 6px; color: var(--ink); }

/* plate prices as string price tags */
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 4px 0 10px; padding-top: 18px; }
.plate {
  position: relative; text-align: center; padding: 26px 10px 16px; background: #fff8e6;
  border: 1.5px solid var(--ink); border-radius: 6px 6px 10px 10px;
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
}
.plate:nth-child(2) { transform: rotate(-1.5deg); } .plate:nth-child(3) { transform: rotate(1.2deg); }
.plate .hole { position: absolute; top: 9px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); }
.plate .sides { display: block; font-weight: 700; }
.plate .price { display: block; font: 400 2.3rem/1.1 var(--display); margin-top: 2px; color: var(--red); }
.plate .ink { display: block; font-size: 1.25rem; min-height: 1.3em; }
.plates-note { text-align: center; margin: 6px 0 30px; color: var(--ink-soft); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 44px; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.menu-list li::after { content: none; }
.menu-list .name { font-weight: 400; }
.menu-list .detail { color: var(--ink-soft); font-size: var(--step--1); font-style: italic; }
.menu-list .price, .menu-list .ask { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-list .price { font-weight: 700; }
.menu-list .ask { font: 700 1.2rem/1 var(--hand); color: var(--pen); }
/* dotted leaders between an item and its price */
.menu-list li:has(.price, .ask) .name { display: flex; flex: 1; gap: 6px; }
.menu-list li:has(.price, .ask) .name::after { content: ""; flex: 1; border-bottom: 2px dotted rgba(43,31,24,.45); transform: translateY(-.3em); min-width: 18px; }
.menu-list li:has(.price, .ask) .price, .menu-list li:has(.price, .ask) .ask { margin-left: 0; }
.rule-orn { display: flex; align-items: center; gap: 12px; margin: 28px 0; color: var(--red); }
.rule-orn::before, .rule-orn::after { content: ""; flex: 1; border-top: 1px solid var(--ink); }
.combo { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; margin-bottom: 28px; }
.combo .price { font: 400 var(--step-2)/1 var(--display); color: var(--red); }
.combo p { margin: 0; color: var(--ink-soft); grid-column: 1 / -1; font-style: italic; }
.stamp-note { text-align: center; margin: 28px 0 0; transform: rotate(-1.5deg); }
.sheet-cta { text-align: center; margin-top: 30px; }

/* ---------- seasonal row: soup pot + Thanksgiving pad ---------- */
.seasonal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 34px; align-items: start; padding-top: 10px; }

/* Soups: a speckled blue enamel pot */
.soup-card {
  position: relative; margin: 26px 0 40px; color: var(--cream);
  background: var(--speck), radial-gradient(120% 90% at 30% 20%, #3e5180, var(--indigo) 60%, #1f2a46);
  border: 6px solid #f5f1e6; border-radius: 18px 18px 48px 48px / 18px 18px 60px 60px;
  box-shadow: inset 0 0 0 3px #1f2a46, 0 22px 36px rgba(0,0,0,.4);
  padding: 34px clamp(20px, 4vw, 34px) 30px;
}
.soup-card::before, .soup-card::after {   /* pot handles */
  content: ""; position: absolute; top: 46px; width: 26px; height: 40px; border: 6px solid #f5f1e6; border-radius: 14px;
}
.soup-card::before { left: -30px; border-right: 0; border-radius: 14px 0 0 14px; }
.soup-card::after { right: -30px; border-left: 0; border-radius: 0 14px 14px 0; }
.pot-lid { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 64%; height: 18px; background: #f5f1e6; border-radius: 40px 40px 6px 6px; box-shadow: inset 0 -3px 0 #d8d2c2; }
.pot-lid span { position: absolute; top: -12px; left: 50%; width: 28px; height: 12px; margin-left: -14px; background: var(--iron); border-radius: 8px 8px 2px 2px; }
.soup-head { text-align: center; margin-bottom: 10px; }
.soup-card h2 { font: 400 clamp(2rem, 5vw, 2.6rem)/1.05 var(--display); color: #fff; margin: 0; }
.soup-note { margin: 6px 0 0; font: 700 1.4rem/1.1 var(--hand); color: var(--mustard); }
.soup-price { text-align: center; color: #d8ddea; margin: 0 0 12px; font-size: var(--step--1); font-style: italic; }
.soup-list { list-style: none; margin: 0 auto; padding: 0; }
.soup-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(241,226,192,.35); }
.soup-list li:last-child { border-bottom: 0; }
.soup-name { font: 700 var(--step-1)/1.2 var(--serif); }
.soup-list .price { margin-left: auto; font-weight: 700; }
.bowl { width: 38px; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bowl .body { fill: #f5f1e6; stroke: #f5f1e6; stroke-width: 3; }
.bowl .rim, .bowl .base { stroke: #f5f1e6; stroke-width: 3; }
.bowl .steam { stroke: #c7cfe3; stroke-width: 2.2; }
.soup-card .sheet-cta { margin-top: 22px; }
.soup-card .pill { box-shadow: 0 0 0 2px var(--red), 0 4px 0 2px var(--red-dark); }

/* Thanksgiving: her own handwritten legal pad */
.pad {
  background:
    linear-gradient(90deg, transparent 52px, #d98a8a 52px, #d98a8a 54px, transparent 54px),
    repeating-linear-gradient(180deg, #fbf6e0 0 31px, #b9cbe0 31px 32px);
  background-color: #fbf6e0; transform: rotate(-.7deg); padding-left: clamp(66px, 9vw, 80px);
}
.pad::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: var(--red-dark); border-radius: 2px 2px 0 0; }
.pad h2 { font: 700 2.9rem/1 var(--hand); color: var(--pen); text-align: left; margin-top: 8px; }
.pad .sub { text-align: left; margin-left: 0; }
.pad .deadline { display: inline-block; font: 700 1.55rem/1.2 var(--hand); color: var(--red); border: 2px solid var(--red); border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; padding: 4px 16px; margin: 0 0 18px; transform: rotate(1.5deg); }
.pad .package { border: 2px dashed var(--pen); border-radius: 6px; padding: 14px 18px; margin: 0 0 22px; }
.pad .package strong { font: 700 var(--step-1)/1.2 var(--serif); }
.pad .package p { margin: 4px 0 0; }
.pad .cols { grid-template-columns: 1fr; gap: 18px; }
.pad .menu-list li { display: block; padding: 6px 0; }
.pad .menu-list li .name, .pad .menu-list li:has(.price, .ask) .name { font-weight: 700; display: inline; }
.pad .menu-list li .name::after, .pad .menu-list li:has(.price, .ask) .name::after { content: none; }
.pad .menu-list .detail { margin-left: 6px; }
.pad .menu-list .price { display: block; margin: 0; white-space: normal; font-weight: 400; color: var(--ink-soft); }
.pad .sheet-cta { text-align: left; }

/* ---------- area + footer ---------- */
.area { background: var(--iron); color: var(--cream); text-align: center; padding-block: 40px 44px; }
.area h2 { font: 400 var(--step-2)/1.2 var(--display); color: var(--cream); margin: 0 0 8px; }
.area p { margin: 0 auto; max-width: 54ch; color: #d9c9a8; }
.area .area-hand { font: 400 2.4rem/1 var(--script); color: var(--mustard); margin-top: 14px; }
.site-footer { background: #1d130e; color: #bba98a; font-size: var(--step--1); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 20px; max-width: 1180px; }
.site-footer a { color: var(--cream); }
.credit { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #4a3326; border-radius: 6px; padding: 6px 14px; text-decoration: none; }
.credit:hover { border-color: var(--mustard); }
.credit b { color: var(--mustard); }

/* ---------- order page ---------- */
.order-head { color: var(--cream); text-align: center; padding-block: 6px 26px; }
.order-head h1 { font: 400 clamp(2.2rem, 6vw, 3.4rem)/1.05 var(--display); margin: 0 0 8px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.order-head p { margin: 0 auto; color: #f0e2c4; max-width: 52ch; }
.tabs { display: flex; justify-content: center; gap: 10px; margin: 20px 0 0; flex-wrap: wrap; }
.tab { font: 700 var(--step-0)/1 var(--serif); padding: 11px 20px; border-radius: 8px; border: 2px solid var(--cream); background: transparent; color: var(--cream); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--cream); color: var(--iron); }

.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 26px; align-items: start; padding-bottom: 40px; max-width: 1100px; }
.order-grid .sheet { margin-bottom: 26px; }
.sheet .step-title { display: block; text-align: left; font: 400 var(--step-2)/1.15 var(--display); margin: 0 0 4px; }
.step-help { color: var(--ink-soft); margin: 0 0 16px; font-style: italic; }
.choice-label { font-weight: 700; margin: 18px 0 8px; display: flex; justify-content: space-between; gap: 8px; }
.choice-label .count { font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: 1.5px solid #b9a682; background: #fffaf0; cursor: pointer; user-select: none; }
.chip input:checked + span { border-color: var(--red); background: var(--red); color: var(--cream); }
.chip input:focus-visible + span { outline: 3px solid var(--mustard); outline-offset: 2px; }
.chip input:disabled + span { opacity: .4; cursor: not-allowed; }
.chip small { font-weight: 400; opacity: .8; font-style: italic; }

.plate-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.plate-pick { position: relative; }
.plate-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plate-pick > span { display: block; text-align: center; padding: 14px 8px; border: 1.5px solid var(--ink); background: #fff8e6; border-radius: 6px; cursor: pointer; }
.plate-pick b { display: block; font: 400 1.7rem/1.1 var(--display); color: var(--red); }
.plate-pick em { display: block; font: 700 1.15rem/1 var(--hand); color: var(--pen); font-style: normal; margin-top: 2px; min-height: 1em; }
.plate-pick input:checked + span { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red); background: #fbe9df; }
.plate-pick input:focus-visible + span { outline: 3px solid var(--mustard); outline-offset: 2px; }

.add-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px dotted var(--ink-soft); }
.add-hint { color: var(--ink-soft); font-size: var(--step--1); margin: 0; font-style: italic; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid #b9a682; border-radius: 6px; overflow: hidden; background: #fffaf0; }
.stepper button { width: 38px; height: 38px; border: 0; background: transparent; font: 700 1.2rem/1 var(--serif); cursor: pointer; color: var(--ink); }
.stepper button:hover { background: #f1e3c4; }
.stepper output { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.item-rows { list-style: none; margin: 0; padding: 0; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 14px; align-items: center; padding: 10px 0; border-bottom: 1px dotted #b9a682; }
.item-row:last-child { border-bottom: 0; }
.item-row .name small { display: block; color: var(--ink-soft); font-style: italic; }
.item-row .price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-row .price.ask { font: 700 1.15rem/1 var(--hand); color: var(--pen); }
.item-row select { font: 400 var(--step--1) var(--serif); padding: 6px 8px; border: 1.5px solid #b9a682; border-radius: 6px; background: #fffaf0; }

/* the order ticket: a guest check */
.ticket { position: sticky; top: 16px; background: #fffdf6; border-radius: 2px; box-shadow: 0 18px 36px rgba(0,0,0,.35); padding: 26px 18px 20px; border-top: 6px solid var(--collard);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(85,102,63,.2) 27px 28px); }
.ticket h2 { font: 400 var(--step-1)/1.2 var(--display); margin: 0 0 10px; color: var(--collard); }
.ticket ul { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; }
.ticket li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 0; font-size: var(--step--1); }
.ticket li .what { font: 700 1.3rem/1.15 var(--hand); color: var(--pen); }
.ticket li .detail { grid-column: 1 / 2; color: var(--ink-soft); font-style: italic; }
.ticket li .amt { font: 700 1.3rem/1.15 var(--hand); color: var(--pen); white-space: nowrap; }
.ticket li .remove { grid-column: 2; justify-self: end; background: none; border: 0; color: var(--red); font: 400 var(--step--1) var(--serif); cursor: pointer; padding: 0; text-decoration: underline; }
.ticket .empty { color: var(--ink-soft); margin: 0 0 6px; }
.ticket .empty .ink { display: block; font-size: 1.35rem; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--ink); }
.total b { font: 400 1.8rem/1 var(--display); color: var(--red); font-variant-numeric: tabular-nums; }
.total-note { margin: 6px 0 14px; color: var(--ink-soft); font-size: var(--step--1); font-style: italic; }
.ticket .pill { width: 100%; }
.ticket-bar { display: none; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form .full { grid-column: 1 / -1; }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: 6px; padding: 0; }
.field .opt { font-weight: 400; color: var(--ink-soft); font-style: italic; }
.field input, .field textarea, .field select { width: 100%; font: 400 var(--step-0) var(--serif); padding: 11px 12px; border: 1.5px solid #b9a682; border-radius: 6px; background: #fffdf6; color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--pen); box-shadow: 0 0 0 3px rgba(36,53,122,.18); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.field-note { margin: 6px 0 0; font-size: var(--step--1); color: var(--ink-soft); font-style: italic; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; }
.form-status.err { color: var(--red); }
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }

/* order page: enamel soup rows on paper */
.order-page #soups { background: var(--speck), var(--indigo); color: var(--cream); border: 5px solid #f5f1e6; border-radius: 14px; }
.order-page #soups .step-title { color: #fff; }
.order-page #soups .step-help, .order-page #soups .item-row .price.ask { color: #d8ddea; }
.order-page #soups .item-row { border-bottom-color: rgba(241,226,192,.3); }
.order-page #soups .stepper { background: #f5f1e6; }

/* ---------- thank-you ---------- */
.thanks { text-align: center; max-width: 720px; margin-inline: auto; }
.thanks .badge { width: min(420px, 100%); display: block; margin: 0 auto 14px; }
.thanks h1 { font: 400 var(--step-3)/1.1 var(--display); margin: 0 0 8px; }
.thanks .ink { font-size: 1.8rem; }
.receipt { text-align: left; max-width: 520px; margin: 22px auto 0; }
.receipt li { grid-template-columns: minmax(0, 1fr) auto; }

/* ---------- preview builds ---------- */
.poc-bar { background: var(--mustard); color: var(--iron); text-align: center; font: 700 var(--step--1)/1.4 var(--serif);
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.poc-bar a { color: var(--iron); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .note-card { max-width: 440px; margin: 0 auto; }
  .seasonal { grid-template-columns: 1fr; }
  .soup-card { margin-inline: 30px; }
  .order-grid { grid-template-columns: minmax(0, 1fr); }
  .ticket { position: static; }
  .ticket-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--iron); color: var(--cream); border-top: 3px double var(--paper-edge);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .ticket-bar b { font: 400 1.4rem/1 var(--display); font-variant-numeric: tabular-nums; }
  .order-page { padding-bottom: 76px; }
}
@media (max-width: 640px) {
  .cols, .form { grid-template-columns: 1fr; }
  .plates { gap: 8px; }
  .plate { padding: 22px 4px 10px; }
  .plate .sides { font-size: .82rem; line-height: 1.2; }
  .plate .price { font-size: 1.65rem; }
  .plate .ink { font-size: 1.05rem; }
  .site-header nav a:not(.pill) { display: none; }
  .site-header .pill .long { display: none; }
  .site-header .pill .short { display: inline; }
  .brand span { font-size: 1.05rem; }
  .bill::before { inset: 8px; } .bill::after { inset: 15px; }
  .pad { transform: none; padding-left: 62px; }
  .pad h2 { font-size: 2.3rem; }
  .soup-card { margin-inline: 22px; }
  .soup-card::before { left: -24px; width: 20px; } .soup-card::after { right: -24px; width: 20px; }
  .note-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pill, .pill:hover { transition: none; transform: none; } }

/* soup sizes on the enamel pot */
.soup-sizes { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.soup-sizes span { border: 2px solid #f5f1e6; border-radius: 999px; padding: 4px 16px; font-size: var(--step-0); }
.soup-sizes b { font-family: var(--display); font-weight: 400; color: var(--mustard); margin-right: 4px; }

/* special orders: a stamped box at the foot of the Bill of Fare */
.special { margin: 30px auto 0; max-width: 560px; text-align: center; border: 2px solid var(--red); padding: 16px 20px 14px; position: relative; }
.special::before, .special::after { content: "\2726"; position: absolute; top: 50%; transform: translateY(-50%); color: var(--red); background: var(--paper); padding: 0 6px; }
.special::before { left: -14px; } .special::after { right: -14px; }
.special-head { margin: 0 0 4px; font: 400 1.35rem/1 var(--display); color: var(--red); letter-spacing: .04em; }
.special p:last-child { margin: 0; font-style: italic; }

.area .area-line { font: 700 var(--step-1)/1.3 var(--serif); color: var(--mustard); margin: 0 auto 10px; }

/* ---------- soup photos: looking down into each bowl ---------- */
.soup-photo { width: 84px; height: 84px; flex: none; border-radius: 50%; object-fit: cover; border: 4px solid #f5f1e6; box-shadow: 0 0 0 2px #1f2a46, 0 6px 12px rgba(0,0,0,.35); }
.soup-list li { gap: 14px; }

/* ---------- breakfast: a snapshot tacked to the bill ---------- */
.breakfast { text-align: center; }
.breakfast h3 { margin-bottom: 14px; }
.breakfast-item { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 26px; align-items: center; max-width: 620px; margin: 0 auto; text-align: left; }
.snap { margin: 0; background: #fff; padding: 9px 9px 26px; box-shadow: 0 8px 18px rgba(42,28,21,.28); transform: rotate(-3deg); position: relative; }
.snap::before { content: ""; position: absolute; top: -10px; left: 50%; width: 72px; height: 20px; margin-left: -36px; background: rgba(211,154,44,.55); transform: rotate(2deg); }
.snap img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.bk-name { margin: 0; font: 400 clamp(1.4rem, 3.4vw, 1.8rem)/1.1 var(--display); color: var(--red); }
.bk-detail { margin: 6px 0 8px; font-style: italic; }
@media (max-width: 560px) { .breakfast-item { grid-template-columns: 1fr; justify-items: center; text-align: center; } .snap { max-width: 260px; } }
.photo-credit { display: block; margin-top: 6px; font-size: .85rem; opacity: .8; }

/* =====================================================================
   Thanksgiving 2026: an autumn harvest table around Nana's kitchen.
   Cream hero with a leaf garland and harvest clusters framing the stove
   banner; a warm-brown "Thanksgiving at Nana's" section with the turkey.
   Artwork lives in src/art.py. Turn the season off with
   THANKSGIVING["enabled"] = False in menu.py.
   ===================================================================== */
:root {
  --rust: #a8431a; --rust-dark: #7a2e10;
  --pumpkin: #e07020; --amber: #f0a030; --mustard: #c98f1c;
  --bark: #5a3418; --wheat: #f6e6c4;
  --quilt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%2232%22%20viewBox%3D%220%200%20160%2032%22%3E%3Crect%20width%3D%22160%22%20height%3D%2232%22%20fill%3D%22%23f6e6c4%22/%3E%3Cpath%20d%3D%22M0%200H32L0%2032Z%22%20fill%3D%22%23a8431a%22/%3E%3Cpath%20d%3D%22M32%2032H64V0Z%22%20fill%3D%22%23f0a030%22/%3E%3Cpath%20d%3D%22M64%200H96L64%2032Z%22%20fill%3D%22%235a3418%22/%3E%3Cpath%20d%3D%22M96%2032H128V0Z%22%20fill%3D%22%23e07020%22/%3E%3Cpath%20d%3D%22M128%200H160L128%2032Z%22%20fill%3D%22%23c98f1c%22/%3E%3Cpath%20d%3D%22M0%20.5H160M0%2031.5H160%22%20stroke%3D%22%232a1c15%22%20stroke-opacity%3D%22.35%22%20stroke-dasharray%3D%223%203%22/%3E%3C/svg%3E");
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* hero: a cream harvest table, the banner framed by leaves, wheat, corn and pumpkins */
.hero.tg {
  position: relative; overflow: hidden; isolation: isolate; padding-block: 92px 60px;
  background:
    radial-gradient(70% 60% at 50% 42%, #fff6e2 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 100%, rgba(224,112,32,.28), transparent 60%),
    linear-gradient(180deg, #f8e9cb, #f0d6a8);
}
.garland { position: absolute; top: 0; left: 0; width: 100%; height: 90px; z-index: 3; filter: drop-shadow(0 4px 4px rgba(90,52,24,.25)); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero .scene use { filter: drop-shadow(0 6px 6px rgba(90,52,24,.28)); }
.scene.soft { opacity: .5; }
.hero-stack { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: 1080px; }
.hero.tg .banner { width: min(860px, 100%); margin-inline: auto; filter: drop-shadow(0 18px 26px rgba(70,34,10,.45)); }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; width: min(860px, 100%); align-items: center; }
.hero.tg .note-card { transform: rotate(-1.4deg); }
.tg-card {
  display: grid; justify-items: center; text-align: center; gap: 4px; text-decoration: none; color: var(--bark);
  background: linear-gradient(160deg, #ffd27a, var(--amber) 55%, var(--pumpkin)); padding: 26px 22px 22px; border-radius: 16px; transform: rotate(1.6deg);
  box-shadow: 0 0 0 4px var(--wheat), 0 0 0 7px var(--rust), 0 18px 30px rgba(90,40,10,.35);
  transition: transform .2s ease;
}
.tg-card:hover { transform: rotate(0deg) scale(1.02); }
.tg-card-over { font: 400 1rem/1 var(--display); letter-spacing: .14em; color: var(--rust-dark); text-transform: uppercase; }
.tg-card-title { font: 400 2.15rem/1.05 var(--script); }
.tg-card-price { font: 400 2.6rem/1 var(--display); color: var(--rust-dark); }
.tg-card-due { font: 700 1.45rem/1.1 var(--hand); color: var(--bark); }
.tg-card-go { margin-top: 8px; font: 700 var(--step--1)/1 var(--serif); letter-spacing: .06em; background: var(--rust); color: var(--wheat); padding: 10px 18px; border-radius: 999px; }

/* Thanksgiving at Nana's: warm brown, turkey at the head of the table */
.harvest { position: relative; overflow: hidden; isolation: isolate; padding-block: 56px 64px; color: var(--wheat);
  background: radial-gradient(80% 60% at 50% 0%, rgba(224,112,32,.35), transparent 70%), linear-gradient(180deg, #6a3a18 0%, #4a2610 100%); }
.harvest .wrap { position: relative; z-index: 1; }
.harvest-head { display: grid; grid-template-columns: 220px minmax(0, 1fr) 140px; gap: 24px; align-items: center; margin-bottom: 30px; }
.harvest-turkey .turkey { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 14px rgba(0,0,0,.4)); }
.harvest-title { text-align: center; }
.harvest-over { margin: 0; font: 400 1.05rem/1 var(--display); letter-spacing: .24em; color: var(--amber); text-transform: uppercase; }
.harvest-head h2 { font: 400 clamp(2.8rem, 6.4vw, 4.4rem)/1 var(--script); margin: 6px 0 8px; color: #fff3dc; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.harvest-sub { margin: 0 auto; max-width: 46ch; font-size: var(--step-1); color: #f3dcb4; }
.harvest-stamp { margin: 0; width: 136px; height: 136px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--rust); color: var(--wheat); font: 700 1.3rem/1.05 var(--hand); transform: rotate(10deg);
  box-shadow: 0 0 0 4px var(--wheat), 0 0 0 7px var(--rust), 0 12px 22px rgba(0,0,0,.4); }
.harvest-stamp b { font: 400 1rem/1.15 var(--display); display: block; margin-top: 4px; padding-inline: 10px; }
.feast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; background: #fff8e6; color: var(--ink);
  border-radius: 18px; padding: 22px 28px; margin: 0 auto 30px; max-width: 1000px; box-shadow: 0 18px 34px rgba(0,0,0,.35); border: 3px dashed var(--rust); outline: 6px solid #fff8e6; }
.feast-price { display: grid; justify-items: center; background: var(--rust); color: var(--wheat); border-radius: 14px; padding: 12px 20px; font: 700 .95rem/1.2 var(--serif); }
.feast-price b { font: 400 2.8rem/1 var(--display); color: #ffd27a; }
.feast-title { font: 400 var(--step-2)/1.1 var(--display); margin: 0 0 4px; color: var(--rust-dark); }
.feast-copy p:last-child { margin: 0; }
.harvest-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; padding-top: 40px; }
.hcard { position: relative; background: #fff8e6; color: var(--ink); border-radius: 16px; padding: 0 22px 22px; box-shadow: 0 16px 30px rgba(0,0,0,.35); }
.hcard h3 { margin: 0 -22px 14px; padding: 18px 22px 16px; font: 400 1.5rem/1.1 var(--display); color: #fff3dc; border: 0; text-align: center; border-radius: 16px 16px 0 0; }
.h-meat h3 { background: var(--rust); } .h-sides h3 { background: var(--mustard); } .h-sweet h3 { background: var(--bark); }
.pie-art { position: absolute; top: -60px; right: 10px; width: 78px; height: auto; z-index: 2; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.corn-art { width: 48px; top: -74px; transform: rotate(18deg); }
.hcard:nth-child(1) { transform: rotate(-.6deg); } .hcard:nth-child(3) { transform: rotate(.6deg); }
.hcard .menu-list li { display: block; padding: 7px 0; border-bottom: 1px dotted rgba(43,31,24,.3); }
.hcard .menu-list li:last-child { border-bottom: 0; }
.hcard .menu-list li .name, .hcard .menu-list li:has(.price, .ask) .name { display: inline; font-weight: 700; }
.hcard .menu-list li .name::after, .hcard .menu-list li:has(.price, .ask) .name::after { content: none; }
.hcard .menu-list .detail { margin-left: 6px; }
.hcard .menu-list .price { display: block; margin: 2px 0 0; white-space: normal; font-weight: 400; color: var(--ink-soft); }
.hcard .ink { margin: 12px 0 0; font-size: 1.3rem; color: var(--rust); }

/* the rest of the site picks up the harvest colors */
.seasonal { grid-template-columns: minmax(0, 640px); justify-content: center; }
.plate .price, .combo .price, .bk-name, .total b { color: var(--rust); }
.bill-over, .rule-orn { color: var(--rust); }
.pill { background: var(--rust); box-shadow: 0 0 0 2px var(--rust), 0 4px 0 2px var(--rust-dark), 0 10px 20px rgba(0,0,0,.3); }
.pill:hover { background: var(--rust-dark); }
.pill:active { box-shadow: 0 0 0 2px var(--rust), 0 1px 0 2px var(--rust-dark); }
.site-header { border-bottom-color: var(--amber); }
.area .area-line, .area .area-hand { color: var(--amber); }

@media (max-width: 900px) {
  .harvest-head { grid-template-columns: 150px minmax(0, 1fr); }
  .harvest-stamp { grid-column: 1 / -1; justify-self: center; width: 116px; height: 116px; }
  .harvest-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 56px; }
  .hcard:nth-child(n) { transform: none; }
  .feast { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 700px) {
  .hero.tg { padding-block: 76px 40px; }
  .hero-row { grid-template-columns: 1fr; gap: 26px; }
  .tg-card { transform: none; }
  .hero .scene { opacity: .35; }
  .harvest-head { grid-template-columns: 1fr; text-align: center; }
  .harvest-turkey { width: 170px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .tg-card { transition: none; } }

.harvest-tel { color: #ffd27a; font-weight: 700; white-space: nowrap; }
.note-foot a { color: var(--rust); font-weight: 700; white-space: nowrap; }
.area a { color: var(--amber); font-weight: 700; white-space: nowrap; }

/* ---------- contact page ---------- */
.contact-page { padding-top: 34px; padding-bottom: 40px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; max-width: 1040px; margin: 0 auto; }
.contact-note { transform: rotate(1.2deg); }
.contact-note .pill { width: 100%; margin: 4px 0 6px; }
.contact-done { text-align: center; padding: 20px 0 6px; }
.contact-done .ink { font-size: 2rem; margin: 0 0 6px; }
.site-footer .foot-links { display: block; margin-top: 6px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .contact-note { transform: none; max-width: 440px; margin: 0 auto; } }
.redirect-note { color: var(--ink-soft); font-style: italic; }
.redirect-note b { font-style: normal; color: var(--rust); }
[hidden] { display: none !important; }
.pill.pill-ghost { background: transparent; color: var(--rust); border-color: var(--rust); box-shadow: none; }
.pill.pill-ghost:hover { background: var(--rust); color: var(--cream); }