/* THE HEARTH · site.css
   A neighbourhood bakery set like a food magazine: flour paper, crust-dark ink, one oxblood accent, real photographs.
   Three looks live on html[data-look]: hearth (flour and oxblood), sage (soft green), chalk (dark).
   Every text pairing below was chosen for AA contrast. Nothing here is sized in ch units. */
/* Stand-in faces: Georgia scaled to the web fonts' width and line metrics, so the swap to Young Serif and Bitter does not move the text. */
@font-face { font-family: "Bitter Fallback"; src: local("Georgia"); font-weight: 400; size-adjust: 103.5%; ascent-override: 89.2%; descent-override: 25.3%; line-gap-override: 0%; }
@font-face { font-family: "Bitter Fallback"; src: local("Georgia Bold"); font-weight: 600 700; size-adjust: 90.6%; ascent-override: 102.4%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Young Serif Fallback"; src: local("Georgia"); font-weight: 400; size-adjust: 112%; ascent-override: 91.4%; descent-override: 32%; line-gap-override: 0%; }
:root {
  --font-head: "Young Serif", "Young Serif Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Bitter", "Bitter Fallback", Georgia, "Times New Roman", serif;
  --radius: 6px;
  --wrap: 1180px;
  --bg: #faf6ec; --bg2: #f1e9d6; --panel: #fffdf8; --line: #e2d7bf; --line2: #b3a07e;
  --ink: #241a13; --ink2: #5a4a3c; --accent: #7b2a1c; --accent-ink: #ffffff; --link: #7b2a1c;
  --hl: #f6e6c4; --glow: #f6e6c4;
  --board: #fffdf8; --board-ink: #241a13; --board-chalk: #7b2a1c; --frame: #241a13;
  --foot: #2a1c13; --foot-ink: #eadfc9;
  --ok: #2e7d4f; --warn: #a8601a; --off: #8a7e72;
}
html[data-look="sage"] {
  --bg: #f3f5ee; --bg2: #e4eadb; --panel: #fbfcf8; --line: #cbd5bf; --line2: #94a585;
  --ink: #1f2a22; --ink2: #43524a; --accent: #3d6b4a; --accent-ink: #ffffff; --link: #2f5a3c;
  --hl: #dbe8d0; --glow: #dfe9d0;
  --board: #fbfcf8; --board-ink: #1f2a22; --board-chalk: #2f5a3c; --frame: #1f2a22;
  --foot: #1f2a22; --foot-ink: #dbe4d4;
}
html[data-look="chalk"] {
  --bg: #1f2a26; --bg2: #26332e; --panel: #2c3a34; --line: #43544c; --line2: #6d8277;
  --ink: #f3efe4; --ink2: #cdd3c6; --accent: #f2b84b; --accent-ink: #1d1608; --link: #f5c96b;
  --hl: #3a4a42; --glow: #31443b;
  --board: #2c3a34; --board-ink: #f3efe4; --board-chalk: #f2b84b; --frame: #f3efe4;
  --foot: #131a17; --foot-ink: #d4d9cc;
}
html[data-font="young"] { --font-head: "Young Serif", "Young Serif Fallback", Georgia, serif; }
html[data-font="bitter"] { --font-head: "Bitter", "Bitter Fallback", Georgia, serif; }
html[data-font="serif"] { --font-head: Georgia, "Times New Roman", serif; }
html[data-font="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-corners="round"] { --radius: 18px; }
html[data-corners="sharp"] { --radius: 0px; }
html[data-zone="center"] :is(.hero-copy, .hero.small .hero-copy) { text-align: center; }
html[data-zone="center"] .ctas { justify-content: center; }
html[data-zone="center"] .open-card { justify-content: center; }
html[data-zone="right"] :is(.hero-copy, .hero.small .hero-copy) { text-align: right; }
html[data-zone="right"] .ctas { justify-content: flex-end; }
html[data-zone="right"] .open-card { justify-content: flex-end; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--font-body); }
img, svg { max-width: 100%; }
a { color: var(--link); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; font-weight: 400; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); letter-spacing: -.012em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -.008em; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.wrap.narrow { max-width: 780px; margin-left: var(--edge); }
/* One content edge: a narrow column starts where the wide grids start, so headings, forms and tables share a left line. */
:root { --edge: calc((100% - min(var(--wrap), 100% - 32px)) / 2); }
:is(.order-band, .signup) .wrap.narrow { margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; z-index: 50; border-radius: var(--radius); }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.tiny { font-size: .85rem; color: var(--ink2); }
.lead { font-size: 1.12rem; color: var(--ink2); max-width: 38em; }
.mt { margin-top: 2.5rem; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.linkish { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.photo { display: block; }
.photo img { display: block; width: 100%; height: auto; }

/* buttons: square-shouldered, like a stamped label */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent); border-radius: calc(var(--radius) / 2); padding: 11px 22px; font: 700 .98rem/1.1 var(--font-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.12); }
.btn.big { padding: 15px 28px; font-size: 1.08rem; }
.btn.small { padding: 8px 16px; font-size: .9rem; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); filter: none; }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
.textlink:hover { color: var(--accent); }
.chip { display: inline-block; background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: calc(var(--radius) / 2); padding: 6px 14px; margin: 0 8px 8px 0; text-decoration: none; font: inherit; font-size: .95rem; cursor: pointer; }
.chip:hover { border-color: var(--accent); }

/* ribbon (demo only) */
.ribbon { background: #fff4d6; color: #3a2a00; border-bottom: 3px solid #e2b23a; font-size: .92rem; }
.ribbon .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; padding: 8px 0; }
.ribbon p { margin: 0; }
.ribbon a { color: #7a4a00; }
.yours { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.yours label { display: flex; flex-direction: column; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.yours input, .yours select { font: inherit; font-size: .95rem; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 6px 8px; border: 1px solid #b89658; border-radius: 4px; background: #fff; color: #222; min-width: 0; width: 150px; }
.yours-lead { font-weight: 700; }
.yours .btn.small { background: #7a4a00; border-color: #7a4a00; color: #fff; }
.yours .btn.small.ghost { background: transparent; color: #7a4a00; }
@media (max-width: 720px) { .yours { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; } .yours .yours-lead { grid-column: 1 / -1; } .yours input, .yours select { width: 100%; } }

/* masthead: the name on the left, five page links in a row, the pickup button on the right. A hairline under it, like a newspaper nameplate. */
.top { background: var(--bg); border-bottom: 2px solid var(--ink); position: relative; z-index: 20; }
.bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav tools"; align-items: center; gap: 0 clamp(14px, 2.4vw, 36px); min-height: 72px; }
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 400 clamp(1.3rem, 2.4vw, 1.65rem)/1.1 var(--font-head); min-height: 48px; }
.mark { width: 34px; height: 34px; fill: var(--accent); flex: none; }
.mark-cut { fill: var(--bg); }
.menu-btn { display: none !important; }
.tools { grid-area: tools; display: flex; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.nav { grid-area: nav; display: flex; justify-content: center; gap: 0 4px; min-width: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: .98rem; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.nav a:hover { border-bottom-color: var(--line2); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }
@media (min-width: 721px) and (max-width: 1260px) { .bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "nav nav"; } .nav { justify-content: flex-start; border-top: 1px solid var(--line); } .nav a:first-child { padding-left: 0; } }
.call b { font-weight: 700; }
.call span, .openpill { white-space: nowrap; }
[data-biz="phone"] { white-space: nowrap; }
.top .call { display: none; }
@media (min-width: 1320px) { .top .call { display: inline-flex; } .call span b { display: inline; } }
@media (max-width: 1060px) { .tools .openpill { display: none; } }
@media (max-width: 860px) { .pickup-link { display: none; } }
@media (max-width: 720px) {
  /* two rows: the name beside the language switch, then the five links spread across the width */
  .bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "nav nav"; gap: 0 8px; min-height: 0; padding-top: 2px; }
  .brand { font-size: 1.12rem; gap: 8px; min-width: 0; }
  .mark { width: 28px; height: 28px; }
  .tools .langpick-inline .globe { display: none; }
  .nav { justify-content: space-between; gap: 0; border-top: 1px solid var(--line); margin-top: 2px; }
  .nav a { padding: 0 6px; font-size: .92rem; white-space: normal; text-align: center; line-height: 1.15; }
}
@media (max-width: 360px) { .nav a { padding: 0 3px; font-size: .84rem; } }

/* the open-now pill in the masthead (script fills it); pages that carry the Right now card do not repeat it */
body:has(.open-card) .openpill { display: none; }
.openpill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-size: .88rem; font-weight: 700; }
.openpill::before, .oc-state::before, .hours-now::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--off); flex: none; display: inline-block; margin-right: 2px; }
[data-state="open"]::before, [data-state="open"] .oc-state::before { background: var(--ok); }
[data-state="soon"]::before, [data-state="soon"] .oc-state::before { background: var(--warn); }
.open-card .oc-state::before { display: inline-block; }

/* language picker (from lib/i18n) */
.langpick { position: relative; }
.langpick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: var(--radius); color: var(--ink); font-size: .9rem; }
.langpick summary::-webkit-details-marker { display: none; }
.langpick .globe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langmenu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); padding: 6px; display: grid; min-width: 150px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.langmenu a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: var(--radius); }
.langmenu a:hover, .langmenu a[aria-current] { background: var(--bg2); }
.langpick-inline { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line2); border-radius: calc(var(--radius) / 2); background: transparent; }
.langpick-inline .globe { width: 16px; height: 16px; margin: 0 2px 0 8px; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--ink2); flex: none; }
.langpick-inline a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: calc(var(--radius) / 3); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; color: var(--ink2); }
.langpick-inline a:hover { color: var(--ink); background: var(--bg2); }
.langpick-inline a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.langpick-inline a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- hero: words on the left, one big close-up on the right ---------- */
.hero { position: relative; background: var(--bg); padding: clamp(28px, 4.5vw, 64px) 0 0; }
.hero .hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: stretch; }
.hero-copy { align-self: center; padding-bottom: clamp(8px, 2vw, 28px); }
.hero-photo { margin: 0; background: var(--bg2); overflow: hidden; border-radius: var(--radius); }
.hero-photo:empty { display: none; }
.hero-photo .photo, .hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; aspect-ratio: 4 / 5; }
.hero.home h1 { font-size: clamp(2.5rem, 5.6vw, 4.8rem); line-height: 1.02; }
.kicker { font: 700 .82rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.hero .sub { font-size: clamp(1.08rem, 1.8vw, 1.28rem); color: var(--ink2); max-width: 32em; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 26px 0 0; }
@media (min-width: 861px) {
  .hero.home .hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hero.home .hero-photo img { aspect-ratio: auto; min-height: 560px; max-height: 680px; }
  .hero.small .hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .hero.small .hero-photo img { aspect-ratio: 4 / 3; max-height: 380px; }
}
@media (max-width: 860px) { .hero-photo img { aspect-ratio: 4 / 3; max-height: 340px; } .hero-photo { order: -1; } .hero { padding-top: 0; } .hero .hero-in { gap: 18px; } .hero-photo { border-radius: 0; margin-inline: -16px; } }
.hero.small { padding-top: clamp(22px, 3.5vw, 48px); padding-bottom: clamp(26px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.hero.small h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.hero.small:not(:has(.hero-photo img)) .hero-in { grid-template-columns: minmax(0, 1fr); }
.hero.small:not(:has(.hero-photo img)) .hero-copy { max-width: 780px; }
@media (max-width: 860px) { .hero.small:has(.hero-photo img) { padding-top: 0; } }

/* the "right now" line: open or closed, from the clock in the script */
.open-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 22px 0 0; padding: 0; background: none; border: 0; }
.open-card p { margin: 0; }
.oc-label { font: 700 .72rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.oc-state { font: 400 1.25rem/1.3 var(--font-head); display: inline-flex; align-items: center; gap: 8px; }
.oc-sub { color: var(--ink2); font-size: .95rem; flex-basis: 100%; margin-top: 2px; }
.open-card:not([data-state]) .oc-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; contain: inline-size; }
.hero-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.hero-status .open-card { margin-top: 0; }
.hero.small .open-card { margin-top: 18px; }

/* the strip under the hero: where, when, call. Four ruled columns, like the foot of a magazine page. */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); margin-top: clamp(26px, 4vw, 52px); }
.strip-cell { padding: 18px 20px 20px 0; min-width: 0; }
.strip-cell + .strip-cell { padding-left: 20px; border-left: 1px solid var(--line); }
.strip .open-card { margin: 0; display: block; }
.strip .oc-label { display: block; margin-bottom: 6px; }
.strip .oc-state { display: flex; font-size: 1.1rem; }
.strip .oc-sub { font-size: .85rem; margin-top: 4px; white-space: normal; }
.strip .open-card:not([data-state]) .oc-sub { white-space: normal; contain: none; max-height: 4.3em; overflow: hidden; }
.strip-cell > .oc-label { display: block; margin: 0 0 6px; }
.strip-main { font: 400 1.12rem/1.4 var(--font-head); margin: 0; }
.strip-main a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.strip-main .hl { display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; font: 400 .92rem/1.45 var(--font-body); }
.strip-main .hl b { font-weight: 700; white-space: nowrap; }
.strip-sub { margin: 4px 0 0; font-size: .88rem; color: var(--ink2); }
.strip-sub a { display: inline-flex; align-items: center; min-height: 32px; }
.strip-main a { display: inline-flex; align-items: center; min-height: 44px; }
/* tap target stays 44px high at every width */
.strip-sub a { min-height: 44px; }
@media (max-width: 1000px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-cell:nth-child(3) { padding-left: 0; border-left: 0; }
  .strip-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .strip-cell { padding: 14px 12px 14px 0; }
  .strip-cell + .strip-cell { padding-left: 12px; }
  .strip-cell:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}

/* ---------- bands ---------- */
.band { padding: clamp(44px, 6.5vw, 88px) 0; }
.band.alt { background: var(--bg2); }
.band h2 { margin-bottom: .45em; }
.sample-note { font-size: .92rem; color: var(--ink2); }
.prose h2 { font-size: 1.5rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }

/* ---------- the printed menu: what is baked today ---------- */
.board-band { padding-block: clamp(36px, 5vw, 68px); }
.chalk { background: var(--board); color: var(--board-ink); border: 1px solid var(--frame); outline: 1px solid var(--frame); outline-offset: 5px; padding: clamp(22px, 4vw, 52px); margin: 6px; position: relative; }
.chalk::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--frame); transform: translateY(-100%); }
.board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 28px; border-bottom: 2px solid var(--frame); padding-bottom: 18px; }
.board-head h2 { margin: 0 0 .15em; font-size: clamp(2rem, 4.4vw, 3.3rem); }
.board-head > div { min-width: 0; flex: 1 1 320px; }
.board-day { font: 700 .82rem/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--board-chalk); margin: 0 0 8px; min-height: 1.2em; }
.board-note { margin: 0; color: var(--ink2); max-width: 36em; }
.board-links { margin: 0; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(28px, 5vw, 72px); }
@media (min-width: 880px) { .board-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board-list li { padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
.board-list .dish-name { font-size: 1.28rem; }
.board-none { margin: 22px 0 0; font-style: italic; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 0 0; }
.ready { font-size: .86rem; color: var(--ink2); }
.rd-k { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; margin-right: 4px; }
.rd-t { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.when { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--board-chalk); margin: 0; }
.gone-flag { font: 700 .72rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 2px solid var(--accent); padding: 4px 8px; border-radius: 2px; transform: rotate(-2deg); display: inline-block; }
.is-gone .dish-name, .is-gone .price { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--accent); color: var(--ink2); }
.is-gone .dish-desc, .is-gone .ready { opacity: .75; }

/* dishes: name, a dotted leader, the price */
.dish-top { display: flex; align-items: baseline; gap: 8px; }
.dish-name { margin: 0; font: 400 1.18rem/1.25 var(--font-head); }
.leader { flex: 1 1 auto; min-width: 16px; border-bottom: 2px dotted var(--line2); transform: translateY(-4px); }
.price { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.dish-desc { margin: 4px 0 0; color: var(--ink2); font-size: .98rem; max-width: 34em; }

/* ---------- photo band ---------- */
.photo-band { margin: 0; background: var(--bg2); }
.photo-band:not(:has(img)) { display: none; }
.photo-band img { display: block; width: 100%; height: clamp(150px, 26vw, 400px); object-fit: cover; }

/* ---------- favourites: a portrait close-up beside a numbered short list ---------- */
.fav-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); align-items: center; }
.fav-photo { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--bg2); }
.fav-photo:empty { display: none; }
.fav-photo img { aspect-ratio: 4 / 5; object-fit: cover; max-height: 640px; }
.fav-wrap:not(:has(.fav-photo img)) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) { .fav-wrap:has(.fav-photo img) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.favs { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: none; }
.fav { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; padding: 18px 0; border-top: 1px solid var(--line2); }
.fav:last-child { border-bottom: 1px solid var(--line2); }
.fav-no { font: 400 2.6rem/.9 var(--font-head); color: var(--accent); }
.favs + .row { margin-top: 26px; }

/* ---------- pickup: three steps beside the order slip ---------- */
.how-band { background: var(--bg2); border-block: 1px solid var(--line); }
.pickup-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .pickup-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.how { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: step; }
.how li { counter-increment: step; position: relative; padding: 16px 0 12px 58px; border-top: 1px solid var(--line2); }
.how li::before { content: counter(step); position: absolute; left: 0; top: 10px; font: 400 2.4rem/1 var(--font-head); color: var(--accent); }
.how h3 { font-size: 1.2rem; margin-bottom: .2em; }
.how p { margin: 0; color: var(--ink2); }
.pickup, .slip { background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius); padding: clamp(18px, 3vw, 34px); box-shadow: 8px 8px 0 var(--line2); }
.pickup-form .pickup-head, .slip-head h2 { margin-top: 0; }
.pickup-head { font-size: 1.6rem; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px; }
.pickup-form label { margin-bottom: 14px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
@media (min-width: 560px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pickup .receipt { box-shadow: none; }

/* ---------- catering teaser on the home page ---------- */
.tease { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); align-items: center; }
.tease-photo { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--bg2); }
.tease-photo:empty { display: none; }
.tease-photo img { aspect-ratio: 3 / 2; object-fit: cover; max-height: 460px; }
@media (min-width: 861px) { .tease:has(.tease-photo img) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.tease-list { list-style: none; margin: 0 0 1.4em; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; }
.tease-list li::before { content: "\2022"; color: var(--accent); margin-right: 8px; }

/* ---------- weekly bake list sign-up: one slim line ---------- */
.signup { background: var(--ink); color: var(--bg); padding-block: clamp(30px, 4.5vw, 52px); }
.signup .signup-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 48px; align-items: center; }
@media (min-width: 861px) { .signup .signup-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.signup h2 { color: var(--bg); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .25em; }
.signup p { color: color-mix(in srgb, var(--bg) 82%, transparent); margin: 0; }
.signup .form-status { color: var(--bg); }
.signup-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.signup-form input { flex: 1 1 220px; margin: 0; border-color: var(--bg); }
.signup .btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.signup a { color: var(--bg); }
html[data-look="chalk"] .signup { background: var(--bg2); color: var(--ink); }
html[data-look="chalk"] .signup :is(h2, p, .form-status, a) { color: var(--ink); }
html[data-look="chalk"] .signup .btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- tags and the diet filter ---------- */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 2px; font-size: .78rem; font-weight: 700; background: var(--bg2); color: var(--ink); border: 1px solid var(--line2); }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink2); }
.t-V::before { background: #2e7d4f; }
.t-VG::before { background: #1f8a78; }
.t-N::before { background: #a8601a; }
.t-S::before { background: #c0392b; }
.tags-band { padding-block: clamp(22px, 3vw, 36px) 0; }
.tags-band h2 { font: 700 .75rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin: 0 0 6px; }
.tags-band .lead { font-size: .9rem; margin: 0 0 8px; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; padding: 0; }
.legend .tag { font-size: .78rem; font-weight: 400; padding: 0; background: none; border: 0; color: var(--ink2); }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.peek-cap { font: 700 .75rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-right: 4px; }
.filter .chip { margin: 0; min-height: 44px; font-size: .9rem; }
.chip.fbtn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- the full menu: two ruled columns ---------- */
.menu-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-bottom: 12px; border-bottom: 2px solid var(--ink); }
.jump { display: flex; flex-wrap: wrap; gap: 0 22px; }
.jump a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--ink2); text-decoration: none; font: 700 1.02rem var(--font-body); }
.jump a:hover { color: var(--ink); border-bottom-color: var(--line2); }
.jump a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.msecs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px clamp(32px, 5vw, 80px); margin-top: 26px; align-items: start; }
@media (min-width: 900px) { .msecs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.msec { background: none; border: 0; border-top: 6px double var(--ink); padding: 14px 0 0; scroll-margin-top: 16px; }
.msec-head h3 { display: block; font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: .1em; }
.msec-head p { margin: 0; color: var(--ink2); font-style: italic; }
.dishes { list-style: none; margin: 12px 0 0; padding: 0; }
.dish { padding: 14px 0; border-top: 1px solid var(--line); }
.dish:first-child { border-top: 0; }
.menu-empty { margin-top: 20px; font-style: italic; }

/* ---------- specials page: a ruled list, today's marked ---------- */
.sp-grid { list-style: none; margin: 26px 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 80px); }
@media (min-width: 860px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-grid > .sp-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.sp-card { position: relative; background: none; border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 26px 0 24px; }
.sp-card.is-today { border-top: 4px solid var(--accent); padding-left: 0; }
.today-flag { display: inline-block; margin-bottom: 8px; background: var(--accent); color: var(--accent-ink); font: 700 .72rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; }
.sp-card .dish-name { font-size: 1.4rem; }

/* ---------- hours and closures ---------- */
.hours-now { display: flex; align-items: center; gap: 8px; font: 400 1.4rem/1.3 var(--font-head); margin: 0 0 18px; }
.hours { width: 100%; border-collapse: collapse; background: none; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.hours th, .hours td { text-align: left; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours tbody th { font-family: var(--font-head); font-size: 1.1rem; }
.hours thead th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink2); }
.hours tr:last-child :is(th, td) { border-bottom: 0; }
.hours tr.is-today :is(th, td) { background: var(--hl); font-weight: 700; padding-left: 12px; }
.hours td:not(:first-child) { white-space: nowrap; }
.closures { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line2); }
.closures li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; border-bottom: 1px solid var(--line); padding: 14px 0; }
.closures .when { font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; font-weight: 700; }
.closures .why { color: var(--ink2); }
.closures-none { font-style: italic; }

/* ---------- visit and about ---------- */
.find, .story { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); align-items: center; }
@media (min-width: 861px) { .find:has(.find-pic img), .story:has(.story-pic img) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.find-pic, .story-pic { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--bg2); }
.find-pic:empty, .story-pic:empty { display: none; }
.find-pic img, .story-pic img { aspect-ratio: 4 / 3; object-fit: cover; max-height: 460px; }
.addr { font: 400 1.5rem/1.4 var(--font-head); font-style: normal; margin: 0 0 1em; }
.story-text p { max-width: 34em; }
.story-text p:first-of-type { font-size: 1.15rem; }
.faq { max-width: 780px; }
.faq .qa { border-top: 1px solid var(--line2); padding: 20px 0 8px; }
.faq .qa:last-child { border-bottom: 1px solid var(--line2); }
.faq h3 { margin-bottom: .3em; font-size: 1.25rem; }
.rules { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 72px); }
@media (min-width: 860px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules li { padding: 18px 0; border-top: 1px solid var(--line2); }
.rules h3 { font-size: 1.25rem; margin-bottom: .2em; }
.rules p { margin: 0; color: var(--ink2); }
.order-band { background: var(--bg2); border-block: 1px solid var(--line2); }

/* ---------- catering page ---------- */
.cat-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (min-width: 861px) { .cat-wrap:has(.cat-photo img) { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.cat-photo { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--bg2); }
.cat-photo:empty { display: none; }
.cat-photo img { aspect-ratio: 4 / 5; object-fit: cover; max-height: 600px; }
.incl { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
@media (min-width: 640px) { .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.incl li { padding: 16px 0; border-top: 1px solid var(--line2); }
.incl h3 { font-size: 1.2rem; margin-bottom: .2em; }
.incl p { margin: 0; color: var(--ink2); }
.note { border-left: 4px solid var(--accent); padding: 4px 0 4px 16px; color: var(--ink2); }
.quote-band { background: var(--bg2); border-top: 1px solid var(--line); }
.slip-head { max-width: 780px; margin-bottom: 26px; }
.slip-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
.slip-col { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.slip-col legend { font: 400 1.25rem/1.2 var(--font-head); padding: 0 0 8px; margin-bottom: 10px; border-bottom: 2px solid var(--ink); width: 100%; }
.slip-col label { margin-bottom: 14px; }
@media (min-width: 900px) { .slip-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); } }
.slip-send { margin-top: 8px; }

/* ---------- forms ---------- */
label { display: block; font-weight: 700; font-size: .95rem; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line2); border-radius: calc(var(--radius) / 2); padding: 10px 12px; width: 100%; margin-top: 4px; }
textarea { min-height: 110px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }
input[type="color"] { width: 48px; height: 36px; padding: 2px; vertical-align: middle; margin-top: 0; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.block { margin-bottom: 14px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-weight: 700; }
.inquiry { background: var(--panel); }
.receipt { background: var(--panel); border: 2px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; }
.fallback { background: var(--panel); border: 1px solid var(--line2); padding: 12px 14px; border-radius: var(--radius); color: var(--ink); }
.req { color: var(--accent); font-weight: 700; margin-left: 2px; }

/* ---------- footer: the dark crust ---------- */
.foot { background: var(--foot); color: var(--foot-ink); padding: clamp(40px, 5vw, 64px) 0 90px; }
.foot a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 48px; margin-bottom: 34px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.2fr 1fr .9fr; } .foot-grid > div:nth-child(3) { justify-self: end; } }
.foot-brand { font: 400 1.6rem/1.2 var(--font-head); color: #fff; margin-bottom: .4em; }
.foot-head { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: #fff; margin-bottom: .6em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 36px; }
.foot-line { border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; font-size: .9rem; margin-bottom: 8px; }
.foot .linkish { color: var(--foot-ink); }
.foot .tiny { color: var(--foot-ink); opacity: .85; }
.noscript { margin: 0; padding: 10px 16px; background: var(--bg2); text-align: center; font-size: .9rem; }

/* ---------- fixed call bar on phones ---------- */
.callbar { display: none; }
@media (max-width: 720px) {
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: center; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); min-height: 52px; }
  .callbar[hidden] { display: none; }
  .callbar svg { width: 20px; height: 20px; fill: currentColor; }
}
html[data-demo] .callbar { bottom: 0; }


/* owner toolbar */
.owner { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--panel); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.3); z-index: 40; overflow-y: auto; padding: 0 18px 30px; font-size: .95rem; }
.owner[hidden] { display: none; }
.owner-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; position: sticky; top: 0; background: var(--panel); }
.owner-title { margin: 0; font: 700 1.1rem var(--font-head); }
.owner-title .tiny { display: block; font: .8rem var(--font-body); }
.x { background: none; border: 1px solid var(--line); color: inherit; border-radius: 50%; width: 34px; height: 34px; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tabs button { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; font: 600 .8rem var(--font-body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pane .lead { font-size: 1rem; }
.pane label { margin-bottom: 8px; }
.pane .row label { flex: 1 1 160px; }
.looks { display: grid; gap: 8px; margin-bottom: 12px; }
.look { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; background: var(--bg2); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius); padding: 10px; cursor: pointer; font: inherit; }
.look[aria-pressed="true"] { border-color: var(--accent); }
.look .swatch { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); }
.look small { color: var(--ink2); }
.swatch-hearth { background: linear-gradient(135deg, #fbf3e6 50%, #b8431f 50%); }
.swatch-sage { background: linear-gradient(135deg, #f1f3ec 50%, #3c6e4f 50%); }
.swatch-chalk { background: linear-gradient(135deg, #1c231f 50%, #e8c25a 50%); }
.sections { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sections li { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.sections li b { flex: 1; }
.sections li.off b { text-decoration: line-through; color: var(--ink2); }
.sections button { background: none; border: 1px solid var(--line); color: inherit; border-radius: var(--radius); padding: 3px 8px; cursor: pointer; font: inherit; font-size: .85rem; }
.sections select { font: inherit; font-size: .85rem; max-width: 40%; }
.sections li[data-sec] { flex-wrap: wrap; }
.sections li small[data-diff] { flex-basis: 100%; font-size: .8rem; color: var(--ink2); }
.checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.checks li { padding: 6px 10px; border-radius: var(--radius); background: var(--bg2); border-left: 4px solid #4caf50; }
.checks li.warn { border-left-color: #e2b23a; }
.checks li.bad { border-left-color: #d13b2c; }
.ld { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; font-size: .75rem; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.ai-team { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ai-team a { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; color: var(--ink); text-decoration: none; }
.ai-team a span { display: block; font-size: .85rem; color: var(--ink2); }
.url { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; word-break: break-all; font-size: .85rem; flex: 1 1 200px; }
.answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 40px; }
.answer:empty { display: none; }
.nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 14px; }
.nums div { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.nums dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.nums dd { margin: 0; font: 700 1.8rem var(--font-head); font-variant-numeric: tabular-nums; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 6px; }
body.editing [data-edit] { outline: 2px dashed var(--accent); outline-offset: 3px; cursor: text; }
[data-edit][contenteditable="true"]:focus { outline: 3px solid var(--accent); }

/* front desk */
.desk-open { position: fixed; left: 16px; bottom: 16px; z-index: 26; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.desk-open[hidden] { display: none; }
@media (max-width: 720px) {
  :root { --callbar-h: calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* compact, and parked just above the call bar; quieter than the bar so the two do not read as one red block */
  .desk-open { bottom: calc(var(--callbar-h) + 10px); left: 12px; min-height: 44px; padding: 8px 16px; font-size: .9rem; background: var(--panel); color: var(--ink); border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
  body { padding-bottom: var(--callbar-h); }
}
/* the floating desk button sits above the call bar on phones; the footer ends clear of both so the Owner link stays tappable */
@media (max-width: 720px) { body:has(.desk-open:not([hidden])) .foot { padding-bottom: 96px; } }
.desk-panel { position: fixed; left: 16px; bottom: 16px; width: min(380px, calc(100% - 32px)); max-height: min(70vh, 560px); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.35); z-index: 41; padding: 0 14px 14px; display: flex; flex-direction: column; }
.desk-panel[hidden] { display: none; }
.desk-log { overflow-y: auto; flex: 1; display: grid; gap: 8px; margin-bottom: 10px; }
.desk-log p { margin: 0; padding: 8px 12px; border-radius: var(--radius); background: var(--bg2); max-width: 92%; }
.desk-log p.you { background: var(--accent); color: var(--accent-ink); margin-left: auto; }
.starters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.starters .chip { margin: 0; font-size: .85rem; padding: 4px 10px; }
.desk-form { display: flex; gap: 6px; }
.desk-form input { margin: 0; }

/* The look peek in the demo ribbon: three swatch buttons, each a whole look, pressed one outlined */
.peek { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.peek-cap { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; }
.peek-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #3a2a00; border: 2px solid #d9c08a; border-radius: 999px; padding: 4px 12px 4px 5px; font-size: .82rem; font-weight: 600; line-height: 1.2; font-family: inherit; cursor: pointer; }
.peek-btn .swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.peek-btn:hover { border-color: #7a4a00; }
.peek-btn[aria-pressed="true"] { border-color: #3a2a00; background: #3a2a00; color: #fff; }
@media (max-width: 720px) { .peek { grid-column: 1 / -1; } }

/* ---------- v6.6 Point and change: the Customize button and the editor ---------- */
.q-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.q-cz { display: grid; gap: 2px; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; cursor: pointer; }
.q-cz b { font: 600 .95rem var(--font-head); }
.q-cz small { font-size: .78rem; color: var(--ink2); line-height: 1.3; }
.q-cz[aria-pressed="true"] { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.q-cz:focus-visible { outline: 2px solid #1D67CD; outline-offset: 2px; }
#cz { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.cz-box, .cz-sec-box { position: fixed; border-radius: 6px; pointer-events: none; transition: all .08s ease-out; }
.cz-box { outline: 3px solid #1D67CD; outline-offset: 2px; background: rgba(29,103,205,.08); }
.cz-sec-box { outline: 2px dashed rgba(29,103,205,.75); outline-offset: -2px; }
.cz-sec-box.whole { outline-style: solid; outline-width: 3px; background: rgba(29,103,205,.06); }
.cz-chip { position: absolute; left: 0; top: -30px; background: #1D67CD; color: #fff; font: 600 .78rem/1 var(--font-body); padding: 7px 10px; border-radius: 6px; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.cz-sec-chip { top: 6px; left: 6px; background: rgba(20,40,90,.88); }
.cz-box[hidden], .cz-sec-box[hidden] { display: none; }
.cz-pop { position: fixed; z-index: 48; width: min(380px, calc(100vw - 24px)); max-height: min(78vh, 620px); overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(10,20,50,.3); padding: 12px 16px 16px; font-size: .95rem; }
.cz-pop[hidden] { display: none; }
.cz-pop.sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-height: 82vh; max-height: 82dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.cz-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cz-pop-head h2 { margin: 0; font: 600 1.05rem var(--font-head); outline: none; }
.cz-pop label { display: block; font-weight: 600; font-size: .88rem; margin: 10px 0 4px; }
.cz-pop textarea { min-height: 90px; }
.cz-acts { display: grid; gap: 6px; }
.cz-act { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; cursor: pointer; }
.cz-act b { font-size: .95rem; }
.cz-act small { font-size: .8rem; color: var(--ink2); line-height: 1.3; }
.cz-act:hover, .cz-act:focus-visible { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.cz-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.cz-hint { font-size: .82rem; color: var(--ink2); margin: 6px 0 0; }
.cz-msg { font-size: .88rem; margin: 8px 0 0; min-height: 0; }
.cz-msg:empty, .cz-answer:empty { display: none; }
.cz-answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: .88rem; margin: 10px 0 0; max-height: 240px; overflow: auto; }
.cz-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 46; width: min(620px, calc(100vw - 24px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgba(10,20,50,.28); padding: 10px 14px; font-size: .92rem; }
.cz-bar[hidden] { display: none; }
.cz-bar p { margin: 0; }
.cz-bar .cz-note:empty { display: none; }
.cz-bar .cz-note { margin-top: 4px; font-size: .85rem; color: var(--ink2); }
.cz-bar .cz-row { margin-top: 8px; }
@media (max-width: 720px) { .cz-bar { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: 12px 12px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
body.customizing main * { cursor: pointer; }
@media (max-width: 720px) { body.customizing .callbar { display: none; } }
.cz-added { margin-top: 18px; }
.cz-added.cz-text p { max-width: 42rem; }
.cz-pic { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.cz-sec .wrap > :first-child { margin-top: 0; }
.cz-sec .wrap > h2 + p { margin-inline: auto; text-align: center; max-width: 42rem; }
[data-layout="center"] { text-align: center; }
[data-layout="center"] .cz-pic { margin-inline: auto; }
[data-layout="narrow"] > .wrap { max-width: 760px; }
[data-layout="shade"] { background: var(--bg2); }
.cz-flash { animation: cz-flash 1.2s ease-out; }
@keyframes cz-flash { 0% { box-shadow: inset 0 0 0 4px #1D67CD, 0 0 0 4px rgba(29,103,205,.35); } 100% { box-shadow: inset 0 0 0 4px rgba(29,103,205,0), 0 0 0 4px rgba(29,103,205,0); } }
@media (prefers-reduced-motion: reduce) { .cz-flash { animation: none; box-shadow: inset 0 0 0 4px #1D67CD; } }
.cz-peek { box-shadow: inset 0 0 0 4px rgba(29,103,205,.7); }

/* A section's own look, set in Customize, whole section, Look (lib/added.cjs look() writes the --s-* values).
   Panels inside the section (cards, forms, tables) keep the site's own ink, so words on white stay dark. */
html { --pink: var(--ink); --pink2: var(--ink2); --pmuted: var(--muted); }
main > section[data-s-fg] { color: var(--s-fg); --ink: var(--s-fg); --ink2: var(--s-fg); --muted: var(--s-fg); --hero-ink: var(--s-fg); }
main > section[data-s-fg] :is(.sub, .kicker, .lead, .tiny, .btn.ghost) { color: var(--s-fg); }
main > section[data-s-fg] .btn.ghost { border-color: var(--s-fg); }
main > section[data-s-fg] :is(.card, .hours, .receipt, .fallback, .cz-card:not([data-s-card]), input, select, textarea) { --ink: var(--pink); --ink2: var(--pink2); --muted: var(--pmuted); color: var(--pink); }
main > section[data-s-head] :is(h1, h2, h3):not(:is(.card, .hours, .receipt, .fallback, .cz-card) *) { color: var(--s-head); }
main > section[data-s-bg]:not([data-s-pic]) { background: var(--s-bg); }
main > section[data-s-bg]:not([data-s-pic])::before, main > section[data-s-pic]::before { display: none; }
main > section[data-s-pic] { background-image: linear-gradient(rgba(16,20,26,.62), rgba(16,20,26,.72)), var(--hero-photo); background-size: cover; background-position: center; }
main > section[data-s-pic][data-s-bg] { background-image: linear-gradient(color-mix(in srgb, var(--s-bg) 72%, transparent), color-mix(in srgb, var(--s-bg) 80%, transparent)), var(--hero-photo); }
main > section[data-s-pic] :is(h1, h2, .sub, .lead) { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
main > section[data-s-pic][data-s-bg] :is(h1, h2, .sub, .lead) { text-shadow: none; }
main > section[data-s-pic]:not(#_) { background-size: cover; background-position: center; background-repeat: no-repeat; }
main > section[data-s-btn] { --accent: var(--s-btn); --accent-ink: var(--s-btn-ink); }
main > section[data-s-font="young"] { --font-body: "Young Serif", Georgia, serif; }
main > section[data-s-font="bitter"] { --font-body: "Bitter", Georgia, serif; }
main > section[data-s-font="serif"] { --font-body: Georgia, "Times New Roman", serif; }
main > section[data-s-font="system"] { --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-font] { font-family: var(--font-body); }
main > section[data-s-hfont="young"] { --font-head: "Young Serif", Georgia, serif; }
main > section[data-s-hfont="bitter"] { --font-head: "Bitter", Georgia, serif; }
main > section[data-s-hfont="serif"] { --font-head: Georgia, "Times New Roman", serif; }
main > section[data-s-hfont="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-size="s"] { --s-k: .88; }
main > section[data-s-size="l"] { --s-k: 1.14; }
main > section[data-s-size="xl"] { --s-k: 1.3; }
main > section[data-s-size] { font-size: calc(17px * var(--s-k)); }
main > section[data-s-size] h1 { font-size: calc(clamp(2.1rem, 5vw, 3.4rem) * var(--s-k)); }
main > section[data-s-size] h2 { font-size: calc(clamp(1.7rem, 3.4vw, 2.4rem) * var(--s-k)); }
main > section[data-s-size] :is(h3, h2.h3) { font-size: calc(1.25rem * var(--s-k)); }
main > section[data-s-size] :is(.lead, .sub) { font-size: calc(1.1rem * var(--s-k)); }
main > section[data-s-space="tight"] { padding-block: clamp(24px, 3.5vw, 44px); }
main > section[data-s-space="roomy"] { padding-block: clamp(72px, 11vw, 150px); }
main > section[data-s-align="left"], main > section[data-s-align="left"] :is(h1, h2, .hero-in, .lead, .sub, p.center) { text-align: left; }
main > section[data-s-align="left"] :is(.lead, .sub) { margin-inline: 0; }
main > section[data-s-align="left"] .hero .ctas, main > section[data-s-align="left"].hero .ctas { justify-content: flex-start; }
main > section[data-s-align="center"], main > section[data-s-align="center"] :is(h1, h2, h3, p, .hero-in) { text-align: center; }
main > section[data-s-align="center"] :is(.lead, .sub, .cz-pic) { margin-inline: auto; }

/* Boxes the owner added: side by side cards, each with its own color if chosen */
.cz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; margin-top: 18px; }
.cz-cards > .cz-card { margin: 0; }
.cz-card { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 14px; }
.cz-card h3 { color: inherit; }
.cz-card[data-s-card] { background: var(--s-card); color: var(--s-card-ink); border-color: transparent; --ink: var(--s-card-ink); --ink2: var(--s-card-ink); }
.cz-picture[data-size="s"] .cz-pic { max-width: min(320px, 100%); }
.cz-picture[data-size="l"] .cz-pic { width: 100%; }

/* The whole-section editor: tabs, the parts list and color rows */
.cz-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 0 10px; padding: 3px; background: var(--bg2); border-radius: var(--radius); }
.cz-tab { font: 600 .85rem/1.2 var(--font-body); padding: 8px 4px; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--ink); cursor: pointer; }
.cz-tab[aria-selected="true"] { background: var(--panel); color: #1D67CD; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.cz-tab:focus-visible { outline: 2px solid #1D67CD; outline-offset: 1px; }
.cz-parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cz-part { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .85rem; line-height: 1.35; }
.cz-part b { font-weight: 700; }
.cz-part.gone { opacity: .7; border-style: dashed; }
.cz-part-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-part-btns .btn.small { padding: 5px 10px; font-size: .8rem; }
.cz-color-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.cz-pop .cz-color-row label { margin: 0; flex: 1; }
.cz-pop .cz-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.cz-check input { width: auto; margin: 0; }



/* Accessibility layer: 44px targets, readable placeholders, no lone cards. */
.skip { padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; }
.btn, .btn.small { min-height: 44px; }
#owner-open, .desk-open { min-height: 44px; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select { min-height: 44px; }
::placeholder { color: var(--ink2); opacity: 1; }
.card h3 a { display: inline-flex; align-items: center; min-height: 44px; }
a[href^="tel:"]:not(.btn):not(.callbar, .callbar), a[href^="mailto:"]:not(.btn) { display: inline-block; padding-block: 4px; }
.card > p > a:is([href^="tel:"], [href^="mailto:"]):only-child { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
@media (min-width: 600px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .cards:not(.three) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards:not(.three):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards:not(.three):not(:has(> :nth-child(4):last-child)) > :nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .cards:not(.three) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards:not(.three) > :nth-child(2n+1):last-child { grid-column: 1 / -1; }
}


/* Print: the menu on a clean page. Chrome, forms and the photographs stay off the paper. */
@media print {
  html[data-look] { --bg: #fff; --bg2: #fff; --panel: #fff; --line: #999; --line2: #666; --ink: #000; --ink2: #222; --accent: #000; --accent-ink: #fff; --link: #000; --hl: #eee; --foot: #fff; --foot-ink: #000; --board: #fff; --board-ink: #000; --board-chalk: #000; --frame: #000; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.4; }
  .ribbon, .top, .callbar, .owner, .desk, .skip, .noscript, #print-btn, .jump, .filter, .langpick, #owner-open, .desk-open, .ctas, .signup, .quote-band, .order-band, .find-pic, .story-pic, .favs, .photo-band, .hero-photo, .fav-photo, .tease-photo, .cat-photo, .strip, .how-band, .tease-band, .pickup-link, .board-links { display: none !important; }
  .hero, .hero.small { background: #fff; border: 0; padding: 0 0 8pt; }
  .hero .hero-in { display: block; }
  .band, .band.alt, .tags-band { padding: 8pt 0; background: #fff; }
  .msecs { display: block; }
  .msec { break-inside: avoid; border-top: 3px double #000; margin: 0 0 10pt; padding: 8pt 0; }
  .dish { break-inside: avoid; padding: 5pt 0; }
  .leader { border-bottom: 1px dotted #000; }
  .chalk { background: #fff; color: #000; border: 1px solid #000; outline: 0; box-shadow: none; margin: 0; }
  .chalk::before { display: none; }
  .tag { border: 1px solid #666; background: #fff; }
  a { color: #000; text-decoration: none; }
  .foot { background: #fff; color: #000; padding: 8pt 0; border-top: 1px solid #999; }
  .foot a, .foot-brand, .foot-head { color: #000; }
}

/* phones: a floating dock, call on the left and the counter desk on the right, clear of the hero text */
@media (max-width: 720px) {
  :root { --callbar-h: 0px; --dock-h: 54px; }
  body { padding-bottom: 0; }
  .callbar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-height: var(--dock-h); padding: 0 18px; border-radius: 4px; box-shadow: 0 8px 22px rgba(36, 26, 19, .35); font-size: 1rem; }
  body:has(.desk-open:not([hidden])) .callbar { right: calc(40% + 6px); padding: 0 12px; font-size: .92rem; white-space: nowrap; }
  .desk-open { left: auto; right: 12px; width: calc(40% - 18px); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-height: var(--dock-h); padding: 0 8px; border-radius: 4px; border: 2px solid var(--accent); background: var(--panel); color: var(--ink); font-size: .9rem; line-height: 1.15; text-align: center; box-shadow: 0 8px 22px rgba(36, 26, 19, .3); }
  .foot, body:has(.desk-open:not([hidden])) .foot { padding-bottom: 104px; }
}
@media (max-width: 360px) { body:has(.desk-open:not([hidden])) .callbar svg { display: none; } }

/* Wider screens: the Ask button waits until the hero is behind you, so it never sits on the opening buttons. On phones it is part of the call bar and stays. */
@media (min-width: 721px) {
  body:not([data-past-hero]) .desk-open { visibility: hidden; opacity: 0; pointer-events: none; }
  .desk-open { transition: opacity .2s; }
}
@media (prefers-reduced-motion: reduce) { .desk-open { transition: none; } }

/* ribbon fold (demo only): one slim line on the first screen; the form unfolds below it */
.ribbon { font-size: .85rem; border-bottom-width: 1px; }
.ribbon .wrap.ribbon-line { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 8px; padding: 3px 0; }
.ribbon-fold { flex: 1 1 auto; min-width: 0; }
.ribbon-fold > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; list-style: none; }
.ribbon-fold > summary::-webkit-details-marker { display: none; }
.ribbon-fold > summary::after { content: "\25BE"; font-size: .8em; transition: transform .15s; }
.ribbon-fold[open] > summary::after { transform: rotate(180deg); }
.ribbon-cta { text-decoration: underline; text-underline-offset: 3px; }
.ribbon-note { margin: 4px 0 8px; }
.ribbon-fold .yours { padding-bottom: 8px; }
.ribbon-back { display: inline-flex; align-items: center; min-height: 28px; }
@media (prefers-reduced-motion: reduce) { .ribbon-fold > summary::after { transition: none; } }

/* Ask button, wide screens: an order ticket in the lower right, filled, with a dashed tear line inside the edge */
@media (min-width: 721px) {
  .btn.desk-open { left: auto; right: 24px; bottom: 24px; padding: 14px 24px; border-radius: 4px; border: 0; outline: 1.5px dashed currentColor; outline-offset: -6px; box-shadow: 0 6px 18px rgba(0,0,0,.18); background: var(--accent); color: var(--accent-ink); font-family: var(--font-head); }
  .desk-panel { left: auto; right: 24px; bottom: 90px; }
}

/* The demo ribbon is FireForge chrome, not the demo design: set in the system font so it never rewraps when the web font arrives (phone CLS). */
.ribbon { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Builder M13: advanced typography and theme. Every rule hangs off a data- attribute on <html> that the owner's
   theme sets (served page and preview alike), so an absent key leaves the model's own style untouched. Heading
   rules reach every h1, h2 and h3 on the page, small label headings included. */
html[data-hweight="light"] :is(h1, h2, h3) { font-weight: 300; }
html[data-hweight="normal"] :is(h1, h2, h3) { font-weight: 400; }
html[data-hweight="bold"] :is(h1, h2, h3) { font-weight: 700; }
html[data-hweight="black"] :is(h1, h2, h3) { font-weight: 800; }
html[data-hcase="upper"] :is(h1, h2, h3) { text-transform: uppercase; }
html[data-hcase="caps"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: small-caps; }
html[data-hcase="normal"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: normal; }
html[data-htrack="tight"] :is(h1, h2, h3) { letter-spacing: -.03em; }
html[data-htrack="normal"] :is(h1, h2, h3) { letter-spacing: 0; }
html[data-htrack="wide"] :is(h1, h2, h3) { letter-spacing: .08em; }
html[data-lead="snug"] body { line-height: 1.4; }
html[data-lead="normal"] body { line-height: 1.6; }
html[data-lead="airy"] body { line-height: 1.85; }
html[data-btnshape="pill"] .btn { border-radius: 999px; }
html[data-btnshape="square"] .btn { border-radius: 0; }
html[data-btnshape="soft"] .btn { border-radius: 8px; }
html[data-links="underline"] main a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
html[data-links="plain"] main a:not(.btn) { text-decoration: none; }

/* Composed sections (lib/compose.cjs): a 12 column grid; every part spans 1 to 12 columns and 1 to 6 rows */
.fc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(48px, auto); gap: 24px; align-items: start; }
.fc-grid[data-gap="s"] { gap: 12px; }
.fc-grid[data-gap="l"] { gap: 40px; }
.fc-sec[data-pad="s"] { padding-block: clamp(20px, 3vw, 36px); }
.fc-sec[data-pad="l"] { padding-block: clamp(72px, 10vw, 140px); }
.fc-b { --fc-c: var(--fc-span, 12); --fc-r: var(--fc-rows, 1); grid-column: span var(--fc-c); grid-row: span var(--fc-r); min-width: 0; }
.fc-b[data-fc-bg] { background: var(--fc-bg); padding: 18px; border-radius: var(--radius); }
.fc-b[data-fc-fg] { color: var(--fc-fg); --ink: var(--fc-fg); }
.fc-b[data-fc-fg] :is(h2, h3, p) { color: var(--fc-fg); }
.fc-b[data-fc-dayoff] { display: none; }
body.customizing .fc-b[data-fc-dayoff] { display: block; opacity: .4; }
.fc-b > :first-child { margin-top: 0; }
.fc-b > :last-child { margin-bottom: 0; }
.fc-box { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.fc-box[data-fc-bg] { background: var(--fc-bg); border-color: transparent; }
.fc-inner { margin-top: 16px; grid-auto-rows: minmax(32px, auto); }
.fc-inner .fc-image img { min-height: calc(var(--fc-r, 1) * 56px); }
.fc-image { align-self: stretch; }
.fc-image img { display: block; width: 100%; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); object-fit: cover; border-radius: var(--radius); }
.fc-image img[data-fc-fit="contain"] { object-fit: contain; }
.fc-empty { display: none; }
body.customizing .fc-empty { display: grid; place-items: center; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: .95rem; }
.fc-pic { display: block; height: 100%; }
.fc-cap { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.fc-video { align-self: stretch; }
.fc-mail, .fc-form .receipt { max-width: 44rem; }
.fc-mail { display: grid; gap: 12px; }
.fc-mail label { display: grid; gap: 4px; font-weight: 600; }
.fc-mail input, .fc-mail select, .fc-mail textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-mail p { margin: 0; }
.fc-mail .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-mail .form-status:empty { display: none; }
.fc-form [hidden] { display: none !important; }
.fc-joinform { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; max-width: 36rem; }
.fc-joinform label { display: grid; gap: 4px; font-weight: 600; flex: 1 1 14rem; min-width: 0; }
.fc-joinform input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-joinform p { margin: 0; }
.fc-joinform .form-status, .fc-joinform .fallback { flex-basis: 100%; }
.fc-joinform .form-status:empty { display: none; }
.fc-joinform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-join [hidden] { display: none !important; }
.fc-joined { font-weight: 600; margin: 0; }
.fc-form .receipt { padding: 16px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); }
.fc-frame { position: relative; aspect-ratio: 16 / 9; min-width: 0; max-width: 100%; min-height: calc(var(--fc-r, 1) * 72px); border-radius: var(--radius); overflow: hidden; background: #000; }
.fc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fc-clip { display: block; width: 100%; max-height: 100%; border-radius: var(--radius); background: #000; }
.fc-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fc-pics[data-fc-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-pics[data-fc-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fc-pics img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--panel, #fff); }
.fc-pics[data-fc-fit="contain"] img { object-fit: contain; }
.fc-pics[data-fc-mode="slide"] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.fc-pics[data-fc-mode="slide"] img { flex: 0 0 min(100%, 420px); scroll-snap-align: start; }
.fc-pics[data-fc-mode="slide"][data-fc-cols="2"] img { flex-basis: min(100%, 560px); }
.fc-pics[data-fc-mode="slide"][data-fc-cols="4"] img { flex-basis: min(100%, 300px); }
.fc-space[data-fc-h="s"] { height: 16px; }
.fc-space[data-fc-h="m"] { height: 40px; }
.fc-space[data-fc-h="l"] { height: 88px; }
[data-fc-w="400"] { font-weight: 400; } [data-fc-w="500"] { font-weight: 500; } [data-fc-w="600"] { font-weight: 600; } [data-fc-w="700"] { font-weight: 700; } [data-fc-w="800"] { font-weight: 800; }
[data-fc-hw="400"] :is(h1, h2, h3) { font-weight: 400; } [data-fc-hw="500"] :is(h1, h2, h3) { font-weight: 500; } [data-fc-hw="600"] :is(h1, h2, h3) { font-weight: 600; } [data-fc-hw="700"] :is(h1, h2, h3) { font-weight: 700; } [data-fc-hw="800"] :is(h1, h2, h3) { font-weight: 800; }
[data-fc-w] :is(p, .lead, .sub) { font-weight: inherit; }
.fc-b[data-fc-size="s"] { font-size: .88em; } .fc-b[data-fc-size="l"] { font-size: 1.14em; } .fc-b[data-fc-size="xl"] { font-size: 1.3em; }
[data-fc-align="left"] { text-align: left; } [data-fc-align="center"] { text-align: center; } [data-fc-align="right"] { text-align: right; }
/* Tablets (721 to 1024px): a part's tablet size wins over its desk size; a tablet-hidden part goes. */
@media (min-width: 721px) and (max-width: 1024px) {
  .fc-b { --fc-c: var(--fc-tspan, var(--fc-span, 12)); --fc-r: var(--fc-trows, var(--fc-rows, 1)); }
  .fc-sec[data-tpad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-tpad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-tpad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-tgap="s"] { gap: 12px; } .fc-grid[data-tgap="m"] { gap: 24px; } .fc-grid[data-tgap="l"] { gap: 40px; }
  [data-fc-thide] { display: none; }
  body.customizing [data-fc-thide] { display: block; opacity: .4; }
}
/* Phones (up to 720px): the grid keeps its 12 columns so a phone size can be set; a part with no phone
   size takes the full width, which is the stacked look the page had before phone sizes existed. */
@media (max-width: 720px) {
  .fc-b { --fc-c: var(--fc-pspan, 12); --fc-r: var(--fc-prows, var(--fc-rows, 1)); }
  .fc-sec[data-ppad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-ppad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-ppad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-pgap="s"] { gap: 12px; } .fc-grid[data-pgap="m"] { gap: 24px; } .fc-grid[data-pgap="l"] { gap: 40px; }
  [data-fc-phide] { display: none; }
  body.customizing [data-fc-phide] { display: block; opacity: .4; }
  .fc-pics[data-fc-mode="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Motion (builder M9). Entrances ride the scroll itself: a part fades, rises, slides or zooms in over the
   stretch where it enters the screen, with no script. Browsers without scroll-driven animations skip
   the @supports block and show every part at rest. */
@supports (animation-timeline: view()) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in] { animation: fc-fade linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
  [data-fx-in="rise"] { animation-name: fc-rise; } [data-fx-in="slide"] { animation-name: fc-slide; } [data-fx-in="zoom"] { animation-name: fc-zoom; }
  [data-fx-in][data-fx-speed="slow"] { animation-range: entry 5% entry 95%; } [data-fx-in][data-fx-speed="fast"] { animation-range: entry 5% entry 30%; }
  .fc-image[data-fx-scroll="drift"] .fc-shot { display: block; height: 100%; overflow: hidden; border-radius: var(--radius); }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: 1.18; animation: fc-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; border-radius: 0; }
}
@keyframes fc-fade { from { opacity: 0; } }
@keyframes fc-rise { from { opacity: 0; translate: 0 32px; } }
@keyframes fc-slide { from { opacity: 0; translate: -32px 0; } }
@keyframes fc-zoom { from { opacity: 0; scale: .92; } }
@keyframes fc-drift { from { translate: 0 -8%; } to { translate: 0 8%; } }
/* Hover answers only a real pointer; a finger on a phone gets no half-state. */
@media (hover: hover) {
  .fc-b[data-fx-hover] { transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
  .fc-b[data-fx-hover][data-fx-speed="slow"] { transition-duration: .5s; } .fc-b[data-fx-hover][data-fx-speed="fast"] { transition-duration: .12s; }
  .fc-b[data-fx-hover="lift"]:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .35); }
  .fc-b[data-fx-hover="grow"]:hover { transform: scale(1.03); }
  .fc-b[data-fx-hover="glow"]:hover { box-shadow: 0 0 0 3px var(--accent, #8ab4f8), 0 10px 30px -10px var(--accent, #8ab4f8); }
  .fc-b[data-fx-hover="dim"]:hover { opacity: .75; }
}
/* At rest: a visitor who asks their device for less motion, or the design's Still switch, sees no motion at all. */
@media (prefers-reduced-motion: reduce) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in], .fc-image[data-fx-scroll] img { animation: none; }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
  .fc-b[data-fx-hover] { transition: none; } .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
}
html[data-still] .fc-b[data-fx-in], html[data-still] .fc-sec[data-fx-in], html[data-still] .fc-image[data-fx-scroll] img { animation: none; }
html[data-still] .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
html[data-still] .fc-b[data-fx-hover] { transition: none; } html[data-still] .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
/* Builder M11: the header and footer as the owner set them (compose.chrome). */
[data-chrome-hid] { display: none !important; }
img.mark[data-chrome-logo] { width: auto; max-width: 180px; height: 36px; object-fit: contain; }
.top[data-chrome-static] { position: static; }
.top[data-chrome-layout="center"] .bar { flex-direction: column; justify-content: center; text-align: center; }
.top[data-chrome-layout="center"] .tools { margin-left: 0; }
.foot[data-chrome-layout="center"] .foot-grid { grid-template-columns: 1fr; text-align: center; }
.foot[data-chrome-layout="center"] .foot-links { justify-content: center; }
.foot[data-chrome-hide] { padding-top: 10px; } .foot[data-chrome-hide] .foot-line { border: 0; padding-top: 0; }