/* Tulsi’s · user-supplied design · photographic catalogue, custom cakes and catering.
 * Business-card amber and cyan · EB Garamond + DM Sans; Playball headings, Oooh Baby notes.
 * Hallmark pre-emit critique: Philosophy 4 · Hierarchy 5 · Execution 4 · Specificity 5 · Restraint 4 · Variety 4 */
@font-face { font-family: "EB Garamond"; src: url("assets/eb-garamond.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Playball"; src: url("assets/playball.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Bad Script"; src: url("assets/bad-script.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Nothing You Could Do"; src: url("assets/nothing-you-could-do.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("assets/kalam.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Homemade Apple"; src: url("assets/homemade-apple.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Ms Madi"; src: url("assets/ms-madi.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Momo Signature"; src: url("assets/momo-signature.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Oooh Baby"; src: url("assets/oooh-baby.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Meow Script"; src: url("assets/meow-script.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("assets/caveat.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("assets/yellowtail.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/dm-sans.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: var(--space-6); }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-ui); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow-y: hidden; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: var(--color-clear); }
button { cursor: pointer; }
button, input, select, textarea { border-radius: 0; }
button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
button { background: none; }
button, .button { touch-action: manipulation; }
::selection { background: var(--color-blue); color: var(--color-ink); }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); color: var(--color-heading); font-weight: var(--weight-medium); line-height: var(--leading-heading); min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.brand-caption, .hero-description, .section-heading p, .product, .menu-note p, .occasion-copy p, .catering-copy p, .contact-details p { font-weight: var(--weight-medium); }
h2 { font-size: var(--text-heading); }
svg { fill: none; stroke: currentColor; stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon { width: var(--size-icon); height: var(--size-icon); }
a[href^="tel:"] { font-family: var(--font-sans-numerals); font-variant-numeric: lining-nums tabular-nums; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: min(var(--content-width), calc(100% - var(--space-10))); margin-inline: auto; }
.skip-link { position: absolute; top: var(--space-2-5); left: var(--space-2-5); z-index: var(--layer-skip); padding: var(--space-3) var(--space-5); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-3-5); min-height: var(--size-control-large); border: var(--border-width) solid var(--color-clear); padding: var(--space-2-5) var(--space-6); border-radius: var(--radius-sm); color: var(--color-accent-ink); background: var(--color-accent); font-size: var(--text-copy); font-weight: var(--weight-medium); white-space: nowrap; transition: transform var(--dur-short) var(--ease-out); }
.button:active, .icon-button:active { transform: translateY(var(--motion-press-distance)); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--size-control); height: var(--size-control); padding: var(--space-2-5); border: 0; flex-shrink: 0; border-radius: var(--radius-circle); }
.text-button { border: 0; padding: var(--space-2) var(--space-3); min-height: var(--size-control); color: var(--color-ink); text-decoration: underline; text-underline-offset: var(--outline-offset); }

.site-header { position: relative; z-index: var(--layer-header); background: var(--color-surface); }
.header-inner { min-height: var(--header-height); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2); }
.monogram { position: relative; display: block; flex-shrink: 0; width: var(--size-control-large); height: var(--size-control-large); }
.monogram-initial { position: absolute; inset: 0 var(--space-1) var(--space-1) 0; background: var(--color-accent); mask: var(--image-monogram-initial) center / contain no-repeat; }
.monogram .twig-icon { position: absolute; right: 0; bottom: 0; width: var(--space-4); height: var(--space-6); color: var(--color-green); transform: rotate(var(--tilt-twig)); }
.brand { display: inline-flex; flex-direction: column; align-items: center; flex-shrink: 0; width: var(--brand-width-compact); }
.brand-logo, .hero-logo { display: block; aspect-ratio: 85 / 29; background: var(--color-accent); mask: var(--image-logo) center / contain no-repeat; }
.brand-logo { width: 90%; }
.twig-icon { display: block; background: currentColor; mask: var(--image-twig) center / contain no-repeat; }
.brand-caption { font-family: var(--font-display); color: var(--color-heading); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: var(--tracking-brand); line-height: var(--leading-body); white-space: nowrap; margin-top: var(--space-0-5); }
.header-actions { display: flex; align-items: center; margin-left: auto; }
.phone-button { min-height: var(--size-control); padding: var(--space-2) var(--space-4); gap: var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-ui); }
.main-nav { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-6); width: 100%; order: 3; padding-block: var(--space-1-5); }
.main-nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--size-control); font-size: var(--text-ui); white-space: nowrap; }
.main-nav a[aria-current] { color: var(--color-accent); }
.main-nav:not(.has-indicator) a[aria-current]::after { content: ""; position: absolute; inset-inline: 0; bottom: var(--space-1); height: var(--rule-width); background: var(--color-accent); }
.nav-indicator { display: none; position: absolute; top: 0; left: 0; width: 100%; height: var(--rule-width); background: var(--color-accent); pointer-events: none; transform-origin: left; transform: translate(var(--nav-x, 0px), calc(var(--nav-y, 0px) - var(--space-1) - var(--rule-width))) scaleX(var(--nav-scale, 0)); transition: transform var(--dur-nav) var(--ease-out); }
.has-indicator .nav-indicator { display: block; }
.js .main-nav { display: none; }
.js .main-nav.is-open { display: flex; }
.nav-toggle .close-icon { display: none; }
.nav-toggle[aria-expanded="true"] .menu-icon { display: none; }
.nav-toggle[aria-expanded="true"] .close-icon { display: block; }
.handwritten { font-family: var(--font-notes); font-weight: var(--weight-normal); font-size: var(--text-handwritten); line-height: var(--leading-heading); transform: rotate(var(--tilt-notes)); text-align: center; }
.handwritten, .font-preview { -webkit-text-stroke: var(--stroke-lettering) currentColor; }
.handwritten .icon { display: block; margin: var(--space-1-5) auto 0; width: var(--size-icon); height: var(--size-heart-height); }
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--color-blue); }
.hero-scene { position: relative; display: grid; isolation: isolate; max-width: var(--composition-width); margin-inline: auto; background: var(--color-blue); }
.hero-photo { position: relative; height: var(--hero-photo-height-compact); grid-row: 2; overflow: hidden; }
.hero-photo > img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 83% center; }
.hero-panel { display: none; position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--color-surface); stroke: none; pointer-events: none; }
.panel-shadow { fill: none; stroke: var(--color-shadow); stroke-width: var(--stroke-shadow); filter: blur(var(--blur-curve)); }
.crop-rim { fill: none; stroke: var(--color-crop-border); stroke-width: var(--stroke-crop); stroke-linecap: butt; }
.hero-rim, .hero-atmosphere { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-atmosphere { clip-path: url(#hero-photo-clip); background: linear-gradient(0deg, var(--color-hero-haze), var(--color-clear) 42%), var(--color-surface); }
.hero-branch { display: none; position: absolute; z-index: var(--layer-decoration); top: 0; right: 0; width: var(--hero-branch-width-tablet); max-width: none; height: auto; filter: drop-shadow(var(--shadow-branch)); pointer-events: none; }
.hero-branch img { width: 100%; }
.hero-branch::after { content: ""; position: absolute; inset: calc(-1 * var(--space-1-5)); backdrop-filter: blur(var(--blur-branch)); mask-image: linear-gradient(var(--color-ink) 15%, var(--color-clear) 75%); }
.hero-copy { text-align: center; position: relative; z-index: var(--layer-decoration); padding: var(--space-8) var(--space-5) var(--space-10); background: var(--color-surface); }
.hero-logo { width: min(var(--hero-logo-width), 88%); height: auto; margin: 0 auto var(--space-3-5); }
.hero-subtitle { display: inline-block; font-size: var(--text-hero-subtitle); text-transform: uppercase; border-block: var(--border-width) solid var(--color-rule); padding-block: var(--space-1-5); letter-spacing: var(--tracking-title); white-space: nowrap; }
.hero-description { font-family: var(--font-display); font-size: var(--text-base); line-height: var(--leading-intro); max-width: 37ch; margin: var(--space-5) auto var(--space-6); }
.order-button { padding-inline: var(--space-5); font-size: var(--text-ui); }
.photo-note { color: var(--color-accent-ink); text-shadow: var(--shadow-notes); display: none; position: absolute; z-index: var(--layer-decoration); left: var(--space-3-5); bottom: var(--hero-note-bottom-compact); font-size: var(--text-note-sm); }
.hero-dessert { display: none; position: absolute; z-index: var(--layer-decoration); border: var(--hero-dessert-rim) solid var(--color-crop-border); border-radius: var(--radius-circle); overflow: hidden; box-shadow: var(--shadow-dessert); }
.hero-dessert > img { width: 100%; height: 100%; object-fit: cover; }
.hero-signoff { display: none; }
.diet-badge { position: absolute; width: var(--badge-size-compact); height: var(--badge-size-compact); bottom: var(--space-2); right: var(--space-4); z-index: var(--layer-content); display: flex; flex-direction: column; justify-content: center; align-items: center; border: var(--badge-rim) solid var(--color-badge-border); border-radius: var(--radius-circle); background: var(--color-accent); color: var(--color-accent-ink); text-align: center; box-shadow: var(--shadow-badge); }
.diet-badge > span:not(.twig-icon) { color: var(--color-badge-label); font-size: var(--text-fine); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.diet-badge strong { font-size: var(--text-caption); font-weight: var(--weight-semibold); line-height: var(--leading-label); }
.diet-badge .twig-icon { width: var(--space-5); height: var(--size-icon-large); margin-top: var(--space-2); transform: rotate(var(--tilt-twig)); }
.hero-wave { position: absolute; bottom: calc(-1 * var(--border-width)); left: 50%; width: 100vw; height: var(--hero-wave-height-compact); transform: translateX(-50%); color: var(--color-paper); fill: currentColor; stroke: none; z-index: var(--layer-wave); pointer-events: none; }
.bakes-section { position: relative; z-index: var(--layer-content); padding-block: var(--space-6) var(--space-9); }
.section-heading { position: relative; text-align: center; margin-bottom: var(--space-6); }
.section-heading .eyebrow { margin: 0 0 var(--space-1-5); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--text-tiny); line-height: var(--leading-body); }
.section-heading h2 { display: flex; align-items: center; justify-content: center; gap: var(--space-4-5); font-size: var(--text-section-title); text-transform: uppercase; letter-spacing: var(--tracking-title); }
.section-heading h2::before, .section-heading h2::after { content: ""; display: block; width: var(--heading-rule-width); height: var(--border-width); background: var(--color-rule); }
.section-heading p { margin-top: var(--space-2-5); font-family: var(--font-display); font-size: var(--text-ui); line-height: var(--leading-body); }
.desktop-break { display: none; }
.menu-grid { display: grid; gap: var(--space-7); }
.menu-category { position: relative; min-width: 0; }
.category-heading { display: flex; gap: var(--space-5); align-items: baseline; margin-bottom: var(--space-4); }
.category-heading::after { content: ""; height: var(--border-width); flex: 1; background: var(--color-rule); }
.category-heading h3, .occasion-copy h2, .catering-copy h2 > span { font-family: var(--font-script); font-style: normal; font-weight: var(--weight-normal); color: var(--color-accent); -webkit-text-stroke: var(--stroke-lettering) currentColor; }
.category-heading h3 { font-size: var(--text-category); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); list-style: none; padding: 0; margin: 0; }
.product-grid li { min-width: 0; }
.product { display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5); font-family: var(--font-display); font-size: var(--text-ui); line-height: var(--leading-product); text-align: center; }
.product-photo { display: block; position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-photo); outline: var(--border-width) solid var(--color-clear); outline-offset: var(--outline-offset); box-shadow: var(--shadow-photo); }
.product-photo img { position: absolute; max-width: none; width: 416%; height: 416%; left: calc(var(--col) * -104% - 2%); top: calc(var(--row) * -104% - 2%); }
.menu-note { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2-5); padding: var(--space-5) var(--space-3); margin-top: var(--space-6); border-radius: var(--radius-lg); background: var(--color-cream); text-align: center; }
.menu-note > svg { width: var(--size-chef-width); height: var(--size-control); color: var(--color-accent); stroke-width: var(--stroke-fine); }
.menu-note p { max-width: 24ch; font-family: var(--font-display); font-size: var(--text-base); line-height: var(--leading-copy); }
.occasion-section, .catering-section { position: relative; isolation: isolate; }
.occasion-section { --wave-height: var(--banner-wave-height); display: flex; flex-direction: column; background: var(--color-cream); }
.occasion-art { order: 2; height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.occasion-art > img, .catering-art > img { width: 100%; height: 100%; object-fit: cover; }
.occasion-art > img { object-position: 92% center; }
.occasion-twigs { display: none; position: absolute; left: 0; bottom: 0; pointer-events: none; }
.occasion-inner, .catering-inner { position: relative; z-index: var(--layer-content); }
.occasion-inner { padding-block: var(--space-13) max(var(--space-10), var(--wave-height)); }
.occasion-copy { max-width: var(--measure-occasion); margin-inline: auto; }
.occasion-copy h2 { font-size: var(--text-occasion-title); line-height: var(--leading-heading); text-align: left; }
.occasion-copy h2::after { display: block; content: ""; width: var(--occasion-rule-width); height: var(--rule-width); background: var(--color-accent); margin-top: var(--space-5-5); }
.occasion-copy p, .catering-copy p { font-family: var(--font-display); font-size: var(--text-base); line-height: var(--leading-body); margin-top: var(--space-3-5); }
.occasion-copy .button, .catering-copy .button { margin-top: var(--space-6); font-size: var(--text-sm); padding-inline: var(--space-4); }
.occasion-panel, .catering-panel { display: none; position: absolute; inset: 0; width: 100%; height: 100%; stroke: none; pointer-events: none; }
.occasion-panel { fill: var(--color-cream); }
.occasion-note, .catering-note { color: var(--color-accent-ink); text-shadow: var(--shadow-notes); display: none; position: absolute; }
.section-wave { position: absolute; z-index: var(--layer-wave); width: 100%; height: var(--wave-height); fill: var(--color-paper); stroke: none; pointer-events: none; }
.wave-top { top: calc(-1 * var(--border-width)); }
.wave-bottom { bottom: calc(-1 * var(--border-width)); }
.catering-section { background: var(--color-paper); display: flex; flex-direction: column; }
.catering-inner { padding-block: var(--space-11) var(--space-10); }
.catering-copy { max-width: var(--measure-catering); margin-inline: auto; }
.catering-copy h2 { text-transform: uppercase; font-size: var(--text-catering-title); }
.catering-copy h2 > span { display: block; text-transform: none; font-size: var(--text-script); margin-bottom: var(--space-1); }
.catering-art { position: relative; order: 2; height: auto; aspect-ratio: 2 / 1; overflow: hidden; clip-path: url(#catering-photo-clip); }
.photo-rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.catering-panel { fill: var(--color-paper); }
.catering-leaf { display: none; }
.site-footer { background: var(--color-surface); }
.footer-inner { display: grid; gap: var(--space-7); padding-block: var(--space-8); }
.footer-brand { width: var(--brand-width-footer); margin: auto; }
.footer-brand .brand-caption { font-size: var(--text-copy); border-top: var(--border-width) solid var(--color-rule); padding-top: var(--space-1); }
.contact-phones, .contact-details { display: flex; align-items: flex-start; gap: var(--space-5); font-style: normal; }
.contact-phones > .icon, .contact-details > .icon { width: var(--size-icon-large); height: var(--space-8); color: var(--color-accent); margin-top: var(--space-1); }
.contact-label { display: block; font-size: var(--text-ui); font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.contact-phones a { display: flex; align-items: center; min-height: var(--size-contact-link); font-family: var(--font-serif-numerals); font-size: var(--text-lead); white-space: nowrap; }
.contact-details p { font-family: var(--font-display); font-size: var(--text-ui); line-height: var(--leading-body); }
.contact-details a { display: inline-flex; align-items: center; min-height: var(--size-contact-link); font-size: var(--text-xs); white-space: nowrap; }
.footer-signoff { font-size: var(--text-script); transform: rotate(var(--tilt-footer-notes)); width: fit-content; margin: var(--space-1) auto var(--space-3); }
.footer-signoff .icon { margin-left: auto; }
.footer-bottom { background: var(--color-blue); padding: var(--space-5-5) var(--space-5) var(--space-4); text-align: center; }
.footer-bottom p { font-size: var(--text-tiny); letter-spacing: var(--tracking-footer); text-transform: uppercase; }
.footer-bottom .icon { display: inline-block; vertical-align: middle; margin-left: var(--space-1-5); width: var(--size-icon-small); height: var(--space-5); }
.order-dialog { width: min(var(--measure-dialog), calc(100% - var(--space-7))); max-height: calc(100dvh - var(--space-8)); overflow-y: auto; overscroll-behavior: contain; border: var(--border-width) solid var(--color-rule); border-radius: var(--radius-xl); background: var(--color-paper); color: var(--color-ink); padding: var(--space-7) var(--space-6) var(--space-5); }
.order-dialog::backdrop { background: var(--color-overlay); }
.dialog-close { position: absolute; right: var(--space-2-5); top: var(--space-2-5); }
.dialog-leaf { color: var(--color-green); width: var(--size-twig-width); height: var(--size-twig-height); margin-bottom: var(--space-3); transform: rotate(var(--tilt-twig)); }
.order-dialog h2 { font-size: var(--text-dialog-title); max-width: 14ch; }
.order-dialog > p { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--text-ui); }
#order-form { margin-top: var(--space-6); }
#order-form label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-1-5); }
#order-form label span { font-size: var(--text-fine); font-weight: var(--weight-normal); color: var(--color-muted); }
#order-form input, #order-form select, #order-form textarea { width: 100%; min-height: var(--size-input); max-width: 100%; border: var(--border-width) solid var(--color-rule); padding: var(--space-2-5); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-base); }
#order-form textarea { resize: vertical; min-height: var(--size-textarea-height); }
#order-form textarea::placeholder { color: var(--color-muted); }
#order-form input:user-invalid { border-color: var(--color-error); }
.form-row { display: grid; gap: var(--space-3-5); margin-block: var(--space-4); }
.form-row > div { min-width: 0; }
#order-form > .button { width: 100%; margin-top: var(--space-4-5); }
.email-note, .email-status { margin-top: var(--space-2-5); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.email-status { color: var(--color-green); }
.dialog-phone { display: flex; align-items: center; justify-content: center; gap: var(--space-2-5); font-size: var(--text-xs); min-height: var(--size-control); margin-top: var(--space-3); white-space: nowrap; }
.dialog-phone .icon { width: var(--size-icon-small); height: var(--size-icon-small); }

.font-picker { position: fixed; z-index: var(--layer-picker); right: var(--space-4); bottom: var(--space-4); max-width: calc(100vw - var(--space-8)); max-height: calc(100dvh - var(--space-8)); overflow: auto; border: var(--border-width) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-floating); font-size: var(--text-ui); }
.font-picker[open] { width: var(--measure-picker); }
.font-picker > summary { min-height: var(--size-control); padding: var(--space-2-5) var(--space-4); cursor: pointer; }
.font-picker > summary:focus-visible { outline-offset: calc(-1 * var(--outline-offset)); }
.font-picker-controls { padding: var(--space-1) var(--space-4) var(--space-3); }
.font-picker label { display: block; margin-bottom: var(--space-1-5); }
.font-picker select { width: 100%; min-height: var(--size-control); padding: var(--space-2); border: var(--border-width) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); font-size: var(--text-base); }
.font-preview { font-family: var(--font-notes); font-size: var(--text-handwritten); line-height: var(--leading-preview); text-align: center; padding: var(--space-6) 0 var(--space-3); overflow-wrap: anywhere; }
.font-picker .text-button { display: block; margin-left: auto; }

@media (hover: hover) {
  .button:hover { box-shadow: var(--shadow-button-hover); }
  .main-nav a:hover { color: var(--color-accent); }
  .main-nav:not(.has-indicator) a:hover { text-decoration: underline; text-underline-offset: var(--focus-offset); }
  address a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: var(--focus-offset); }
  .icon-button:hover { background: var(--color-cream); }
  .product:hover .product-photo { outline-color: var(--color-accent); }
  .product:hover > span:last-child { text-decoration: underline; text-underline-offset: var(--space-1); }
  #order-form input:hover, #order-form select:hover, #order-form textarea:hover { background: var(--color-cream); }
}
@media (min-width: 375px) {
  .container { width: min(var(--content-width), calc(100% - var(--space-12))); }
  .brand { width: var(--brand-width); }
  .brand-caption { font-size: var(--text-sm); }
  .hero-photo { height: var(--hero-photo-height); }
  .photo-note { bottom: var(--hero-note-bottom); font-size: var(--text-xl); }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .occasion-copy .button, .catering-copy .button { padding-inline: var(--space-5); font-size: var(--text-ui); }
}
@media (min-width: 600px) {
  .container { width: min(var(--content-width), calc(100% - var(--space-16))); }
  .hero { background: linear-gradient(0deg, var(--color-hero-haze), var(--color-clear) 42%), linear-gradient(90deg, var(--color-blue) 50%, var(--color-surface) 50%); }
  .hero-scene { min-height: var(--hero-height-tablet); grid-template-columns: 53% minmax(0, 1fr); }
  .hero-photo { position: absolute; grid-row: auto; inset: 0 auto 0 min(0px, calc((var(--composition-width) - 100vw) / 2)); height: 100%; width: calc(65% + max(0px, (100vw - var(--composition-width)) / 2)); }
  .hero-photo > img { object-position: 90% center; }
  .hero-panel { display: block; }
  .hero-atmosphere, .hero-rim { display: block; }
  .hero-branch { display: block; }
  .hero-copy { grid-column: 2; align-self: center; background: var(--color-clear); padding: var(--space-7) var(--space-6) var(--space-18) 0; }
  .hero-logo { width: 90%; margin-bottom: var(--space-3-5); }
  .hero-subtitle { font-size: var(--text-hero-subtitle-tablet); letter-spacing: var(--tracking-subtitle); }
  .hero-description { font-size: var(--text-sm); margin-block: var(--space-5); }
  .order-button { font-size: var(--text-xs); padding-inline: var(--space-3-5); gap: var(--space-2-5); }
  .photo-note { left: var(--space-6); top: var(--space-9); bottom: auto; font-size: var(--text-subheading); }
  .hero-dessert { display: block; width: 29%; aspect-ratio: 1; left: -5%; bottom: calc(-1 * var(--space-1-5)); }
  .diet-badge { width: var(--badge-size); height: var(--badge-size); left: calc(48% - var(--badge-size) / 2); right: auto; bottom: var(--space-2); }
  .hero-wave { height: var(--hero-wave-height); }
  .bakes-section { padding-top: 0; }
  .desktop-break { display: block; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
  .cakes-category { grid-column: 1 / -1; }
  .cake-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product { font-size: var(--text-copy); }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-7); }
  .footer-brand { margin: 0; }
  .footer-signoff { margin: 0; }
  .order-dialog { padding: var(--space-8) var(--space-9) var(--space-6); }
}
@media (min-width: 900px) {
  /* Full-width photos keep their proportions; copy retains its reading size. */
  .occasion-section, .catering-section { display: block; }
  .occasion-art { position: absolute; inset: 0 0 0 auto; height: 100%; z-index: var(--layer-art); }
  .occasion-panel, .catering-panel { display: block; z-index: var(--layer-panel); }
  .catering-art { position: absolute; inset: 0 auto 0 0; height: 100%; width: 65%; z-index: var(--layer-art); }
  .container { width: min(var(--content-width), calc(100% - 80 * var(--design-unit))); }
  .occasion-inner, .catering-inner { width: calc(100% - 80 * var(--banner-unit)); min-height: inherit; display: grid; align-items: center; }
  .header-inner { width: calc(800 * var(--design-unit)); min-height: calc(61 * var(--design-unit)); padding: 0; flex-wrap: nowrap; gap: calc(24 * var(--design-unit)); }
  .brand { width: calc(160 * var(--design-unit)); }
  .main-nav, .js .main-nav { display: flex; width: auto; order: 0; gap: calc(30 * var(--design-unit)); padding: 0; }
  .main-nav a { font-size: var(--text-fluid-xs); }
  .nav-toggle { display: none !important; }
  .phone-button { width: calc(182 * var(--design-unit)); min-height: calc(32 * var(--design-unit)); padding: calc(4 * var(--design-unit)) calc(16 * var(--design-unit)); gap: var(--space-2-5); font-size: var(--text-fluid-ui); font-weight: var(--weight-bold); }
  .phone-button .icon { width: calc(18 * var(--design-unit)); height: calc(18 * var(--design-unit)); fill: currentColor; }
  .hero-scene { min-height: calc(455 * var(--design-unit)); grid-template-columns: 55% minmax(0, 1fr); }
  .hero-copy { width: calc(348 * var(--design-unit)); align-self: start; margin-left: calc(25 * var(--design-unit)); padding: calc(60 * var(--design-unit)) 0 calc(85 * var(--design-unit)); }
  .hero-photo > img { object-position: 93% center; }
  .hero-branch { width: var(--hero-branch-width); }
  .hero-logo { width: 90%; margin-bottom: calc(14 * var(--design-unit)); }
  .hero-subtitle { font-size: var(--text-fluid-brand-subtitle); line-height: var(--leading-tight); letter-spacing: var(--tracking-title-fluid); padding-block: calc(6 * var(--design-unit)); }
  .hero-description { font-size: var(--text-fluid-base); line-height: var(--leading-copy); margin-block: calc(15 * var(--design-unit)) calc(20 * var(--design-unit)); }
  .button { min-height: calc(43 * var(--design-unit)); padding: calc(8 * var(--design-unit)) calc(22 * var(--design-unit)); gap: calc(14 * var(--design-unit)); font-size: var(--text-fluid-ui); font-weight: var(--weight-semibold); }
  .phone-button { min-height: calc(32 * var(--design-unit)); padding-block: calc(4 * var(--design-unit)); font-size: var(--text-fluid-ui); font-weight: var(--weight-bold); }
  .order-button { font-size: var(--text-fluid-copy); }
  .hero-dessert { width: 30%; left: -4%; bottom: calc(-50 * var(--design-unit)); border-width: calc(10 * var(--design-unit)); }
  .hero-dessert > img { object-position: center; }
  .photo-note { display: block; top: calc(28 * var(--design-unit)); left: 7%; font-size: var(--text-fluid-note); }
  .hero-signoff { display: block; position: absolute; bottom: calc(64 * var(--design-unit)); right: 3%; font-size: var(--text-fluid-note); z-index: var(--layer-decoration); }
  .diet-badge { width: calc(194 * var(--design-unit)); height: calc(194 * var(--design-unit)); border-width: calc(16 * var(--design-unit)); left: 39%; bottom: calc(50 * var(--design-unit)); }
  .diet-badge > span:not(.twig-icon) { font-size: var(--text-fluid-ui); }
  .diet-badge strong { font-size: var(--text-fluid-note-sm); font-weight: var(--weight-semibold); }
  .diet-badge .twig-icon { width: calc(29 * var(--design-unit)); height: calc(39 * var(--design-unit)); }
  .hero-wave { height: calc(90 * var(--design-unit)); }
  .bakes-section { margin-top: calc(-28 * var(--design-unit)); padding-block: 0 calc(32 * var(--design-unit)); }
  .section-heading { margin-bottom: calc(24 * var(--design-unit)); }
  .section-heading h2 { font-size: var(--text-fluid-section); line-height: var(--leading-heading); gap: calc(18 * var(--design-unit)); }
  .section-heading h2::before, .section-heading h2::after { width: calc(60 * var(--design-unit)); }
  .section-heading .eyebrow { font-size: var(--text-fluid-fine); line-height: var(--leading-compact); margin-bottom: calc(3 * var(--design-unit)); }
  .section-heading p { font-size: var(--text-fluid-copy); line-height: var(--leading-caption); margin-top: calc(6 * var(--design-unit)); }
  .menu-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; }
  .cakes-category { grid-column: auto; padding-right: calc(24 * var(--design-unit)); }
  .menu-category + .menu-category { padding-left: calc(24 * var(--design-unit)); }
  .menu-category + .menu-category::before { content: ""; position: absolute; top: var(--category-divider-inset); bottom: 0; left: 0; width: var(--border-width); background: var(--color-rule); }
  .desserts-category { padding-right: calc(22 * var(--design-unit)); }
  .category-heading { margin-bottom: calc(16 * var(--design-unit)); gap: calc(18 * var(--design-unit)); }
  .category-heading h3 { font-size: var(--text-fluid-script); line-height: var(--leading-tight); }
  .product-grid { gap: calc(12 * var(--design-unit)) calc(10 * var(--design-unit)); }
  .product { font-size: var(--text-fluid-sm); line-height: var(--leading-label); gap: calc(5 * var(--design-unit)); }
  .product-photo { aspect-ratio: 1.04; border-radius: var(--radius-photo-fluid); }
  .dessert-grid .product-photo, .savoury-grid .product-photo { aspect-ratio: 1.1; }
  .menu-note { min-height: calc(125 * var(--design-unit)); margin-top: calc(14 * var(--design-unit)); padding: calc(12 * var(--design-unit)); gap: calc(8 * var(--design-unit)); }
  .menu-note > svg { width: calc(64 * var(--design-unit)); height: calc(34 * var(--design-unit)); }
  .menu-note p { font-size: var(--text-fluid-copy); line-height: var(--leading-product); }
  .occasion-section { min-height: calc(320 * var(--banner-unit)); --wave-height: calc(34 * var(--banner-unit)); }
  .occasion-section .wave-bottom { display: none; }
  .occasion-inner { grid-template-columns: 1fr 1fr; padding-block: calc(56 * var(--design-unit)) calc(62 * var(--design-unit)); }
  .occasion-copy { width: 80%; }
  .occasion-copy h2 { font-size: var(--text-fluid-3xl); }
  .occasion-copy h2::after { margin-top: calc(16 * var(--design-unit)); width: calc(40 * var(--design-unit)); }
  .occasion-copy p, .catering-copy p { font-size: var(--text-fluid-base); line-height: var(--leading-compact); margin-top: calc(10 * var(--design-unit)); }
  .occasion-copy .button, .catering-copy .button { font-size: var(--text-fluid-sm); min-height: calc(38 * var(--design-unit)); margin-top: calc(14 * var(--design-unit)); padding: calc(7 * var(--design-unit)) calc(20 * var(--design-unit)); gap: calc(14 * var(--design-unit)); }
  .occasion-note { display: block; top: calc(90 * var(--banner-unit)); right: calc(12 * var(--banner-unit)); width: calc(132 * var(--design-unit)); font-size: var(--text-fluid-caption); line-height: var(--leading-caption); }
  .occasion-art { width: 72%; aspect-ratio: auto; }
  .occasion-art > img { object-position: right center; }
  .occasion-twigs { display: block; width: calc(150 * var(--banner-unit)); left: calc(-40 * var(--banner-unit)); bottom: calc(-15 * var(--banner-unit)); transform: scaleX(-1); filter: blur(var(--blur-twigs)); }
  .catering-section { --join-depth: calc(44 * var(--banner-unit)); min-height: calc(310 * var(--banner-unit)); margin-top: calc(-1 * var(--join-depth)); z-index: var(--layer-decoration); mask-image: var(--image-section-join), linear-gradient(var(--color-ink), var(--color-ink)); mask-size: 100% var(--join-depth), 100% calc(100% - var(--join-depth) + var(--border-width)); mask-position: top, bottom; mask-repeat: no-repeat; }
  .catering-inner { grid-template-columns: 66.5% 33.5%; padding-block: calc(72 * var(--design-unit)) calc(38 * var(--design-unit)); }
  .catering-copy { grid-column: 2; width: 100%; }
  .catering-copy h2 { font-size: var(--text-fluid-feature-title); line-height: var(--leading-display); }
  .catering-copy h2 > span { font-size: var(--text-fluid-script); margin-bottom: calc(5 * var(--design-unit)); }
  .catering-copy p { font-size: var(--text-fluid-copy); line-height: var(--leading-compact); }
  .catering-copy .button { margin-top: calc(18 * var(--design-unit)); min-height: calc(41 * var(--design-unit)); }
  .catering-art { aspect-ratio: auto; clip-path: none; }
  .catering-art .photo-rim { display: none; }
  .catering-art > img { object-position: center bottom; }
  .catering-note { display: block; top: calc(42 * var(--banner-unit)); left: 6%; font-size: var(--text-fluid-handwritten); }
  .catering-leaf { display: block; position: absolute; bottom: 0; right: 0; width: calc(75 * var(--design-unit)); transform: scaleY(-1); pointer-events: none; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, 1.1fr); gap: calc(24 * var(--design-unit)); padding-block: calc(18 * var(--design-unit)); }
  .footer-brand { width: calc(160 * var(--design-unit)); margin-inline: auto; }
  .footer-brand .brand-caption { font-size: var(--text-fluid-ui); line-height: var(--leading-label); }
  .contact-phones, .contact-details { border-left: var(--border-width) solid var(--color-rule); padding-left: calc(24 * var(--design-unit)); gap: calc(14 * var(--design-unit)); }
  .contact-phones a { font-size: var(--text-fluid-lg); min-height: calc(24 * var(--design-unit)); }
  .contact-label { font-size: var(--text-fluid-sm); }
  .contact-details p { font-size: var(--text-fluid-sm); }
  .contact-details a { font-size: var(--text-fluid-tiny); min-height: calc(24 * var(--design-unit)); }
  .contact-phones > .icon, .contact-details > .icon { width: calc(23 * var(--design-unit)); height: calc(29 * var(--design-unit)); }
  .footer-signoff { padding-left: 0; margin: 0; font-size: var(--text-fluid-note); }
  .footer-bottom { padding-block: calc(20 * var(--design-unit)) calc(16 * var(--design-unit)); }
  .footer-bottom p { font-size: var(--text-fluid-micro); letter-spacing: var(--tracking-eyebrow-fluid); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}