/*
 * Crumb — main stylesheet.
 *
 * Forbidden here (the habits this catalogue kept repeating, and Girder's own):
 *  1. monospace eyebrow labels      → kickers are soft italic serif with a wheat ear
 *  2. three font families           → Fraunces + Figtree only
 *  3. hairlines / steel beams        → sections meet at a crimped pie-crust edge
 *  4. a big-number stat strip       → times live on paper tickets, hours in a table
 *  5. uniform card grids            → shelves with hanging price tags, an order rail, a dial
 *  6. a single accent               → apricot, raspberry, pistachio and butter as whole fields
 *  7. a centred stacked hero        → split hero with the loaf in an oven-mouth arch
 */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-var.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic-var.woff2") format("woff2"); font-weight: 500 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-italic-var.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
	--flour: #f7efe2;
	--flour2: #efe2cb;
	--paper: #fffaf1;
	--kraft: #ecd6ad;
	--crust: #3a1e10;
	--crust-2: #5b301a;
	--crust-3: #7a4424;
	--apricot: #f29b38;
	--apricot-deep: #b9620f;
	--berry: #d2335f;
	--berry-deep: #9c1d43;
	--pistachio: #8db255;
	--leaf: #2c5419;
	--butter: #f6d36b;
	--text: #3a1e10;
	--muted: #6f5443;
	--ff-display: "Fraunces", Georgia, "Times New Roman", serif;
	--ff-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--soft: "SOFT" 100, "WONK" 1;
	--fs-xs: .8125rem;
	--fs-s: .9375rem;
	--fs-m: 1.0625rem;
	--fs-l: clamp(1.15rem, 1.02rem + .5vw, 1.35rem);
	--fs-xl: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
	--fs-xxl: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem);
	--fs-hero: clamp(3.4rem, 1.1rem + 7.4vw, 8.6rem);
	--gutter: clamp(1rem, .4rem + 2.6vw, 3rem);
	--wrap: 1320px;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--spring: cubic-bezier(.34, 1.56, .64, 1);
	--r: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--flour); color: var(--text); font-family: var(--ff-body); font-size: var(--fs-m); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--berry-deep); }
h1, h2, h3, h4 { font-family: var(--ff-display); font-variation-settings: var(--soft); font-weight: 700; line-height: 1; letter-spacing: -.015em; margin: 0 0 .4em; text-wrap: balance; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--butter); color: var(--crust); padding: .7em 1em; font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon--flip { transform: scaleX(-1); }

/* ------------------------------------------------------------------ buttons, kicker, crimp */
.btn { display: inline-flex; align-items: center; gap: .55em; padding: .9em 1.45em; border: 0; border-radius: 999px; font: 700 var(--fs-s)/1 var(--ff-body); text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, transform .4s var(--spring), box-shadow .25s; }
.btn .icon { transition: transform .4s var(--spring); }
.btn:hover .icon { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn--sm { padding: .7em 1.1em; font-size: var(--fs-xs); }
.btn--lg { padding: 1.1em 1.8em; font-size: var(--fs-m); }
.btn--crust { background: var(--crust); color: var(--flour); box-shadow: 0 14px 28px -16px rgba(58, 30, 16, .9); }
.btn--crust:hover { background: var(--crust-2); color: #fff; transform: translateY(-2px); }
.btn--berry { background: var(--berry); color: #fff; box-shadow: 0 14px 28px -16px rgba(156, 29, 67, .9); }
.btn--berry:hover { background: var(--berry-deep); color: #fff; transform: translateY(-2px); }
.btn--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--line:hover { background: rgba(58, 30, 16, .08); color: inherit; }
.btn--flour { background: var(--flour); color: var(--crust); }
.btn--flour:hover { background: #fff; color: var(--crust); }

.kicker { display: inline-flex; align-items: center; gap: .45em; margin: 0 0 .9rem; font: italic 500 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.1 var(--ff-display); font-variation-settings: var(--soft); color: var(--berry-deep); }
.kicker .icon { width: 1.3em; height: 1.3em; }

.crimp { position: relative; z-index: 2; height: 34px; margin: -1px 0; background: var(--to, var(--flour)); }
.crimp svg { width: 100%; height: 100%; }
.crimp path { fill: var(--from, var(--flour)); }
.crimp--flour { --from: var(--flour); } .crimp--to-flour { --to: var(--flour); }
.crimp--flour2 { --from: var(--flour2); } .crimp--to-flour2 { --to: var(--flour2); }
.crimp--crust { --from: var(--crust); } .crimp--to-crust { --to: var(--crust); }
.crimp--apricot { --from: var(--apricot); } .crimp--to-apricot { --to: var(--apricot); }
.crimp--berry { --from: var(--berry); } .crimp--to-berry { --to: var(--berry); }
.crimp--pistachio { --from: var(--pistachio); } .crimp--to-pistachio { --to: var(--pistachio); }
.crimp--leaf { --from: var(--leaf); } .crimp--to-leaf { --to: var(--leaf); }
.crimp--butter { --from: var(--butter); } .crimp--to-butter { --to: var(--butter); }

/* ------------------------------------------------------------------ masthead */
.mast { position: sticky; top: 0; z-index: 60; background: rgba(247, 239, 226, .86); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(58, 30, 16, .08); }
.home .mast { background: rgba(242, 155, 56, .9); box-shadow: none; }
.mast__in { max-width: 1520px; margin: 0 auto; padding: .85rem var(--gutter); display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; color: var(--crust); }
.brand__mark { width: 42px; height: 34px; }
.brand__mark path:first-child { fill: var(--crust); }
.brand__score { fill: none; stroke: var(--butter); stroke-width: 2.4; stroke-linecap: round; }
.brand__name { font: italic 700 1.5rem/1 var(--ff-display); font-variation-settings: var(--soft); letter-spacing: -.01em; }
.brand__logo { max-height: 48px; width: auto; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.nav__list a { font-weight: 600; text-decoration: none; padding: .3em 0; background: linear-gradient(var(--berry), var(--berry)) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease-out); }
.nav__list a:hover, .nav__list .current-menu-item > a { background-size: 100% 2px; color: inherit; }
.nav__extra { display: flex; align-items: center; gap: .8rem; }
.openpill { display: inline-flex; align-items: center; gap: .5em; padding: .5em .85em; border-radius: 999px; background: rgba(58, 30, 16, .08); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; white-space: nowrap; }
.openpill i, .hours__status i { width: 9px; height: 9px; border-radius: 50%; background: var(--berry); flex: none; }
.openpill.is-open i, .hours__status.is-open i { background: #3d9a3a; box-shadow: 0 0 0 0 rgba(61, 154, 58, .6); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(61, 154, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 154, 58, 0); } }
.navtoggle { display: none; background: none; border: 0; padding: .4rem; color: inherit; cursor: pointer; }
.navtoggle .icon { width: 28px; height: 28px; }
.navtoggle__close { display: none; }
@media (max-width: 1040px) {
	.navtoggle { display: block; }
	.nav { position: fixed; inset: 0 0 0 auto; width: min(400px, 90vw); flex-direction: column; align-items: stretch; gap: 2rem; padding: 6rem 1.8rem 2rem; background: var(--crust); color: var(--flour); transform: translateX(105%); visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s .45s; z-index: 65; box-shadow: -30px 0 60px rgba(0, 0, 0, .35); }
	.nav-open .nav { transform: none; visibility: visible; transition: transform .45s var(--ease-out); }
	.nav__list { flex-direction: column; gap: .2rem; }
	.nav__list a { display: block; font: 700 2rem/1.25 var(--ff-display); font-variation-settings: var(--soft); }
	.nav__extra { flex-direction: column; align-items: flex-start; }
	.openpill { background: rgba(255, 255, 255, .1); }
	.navtoggle { position: relative; z-index: 70; }
	.nav-open .navtoggle { color: var(--flour); }
	.nav-open .navtoggle__open { display: none; }
	.nav-open .navtoggle__close { display: block; }
	.mast { backdrop-filter: none; -webkit-backdrop-filter: none; }
	.brand__name { font-size: 1.2rem; white-space: nowrap; }
}

/* ------------------------------------------------------------------ hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; min-height: calc(100svh - 70px); padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(2.5rem, 5vw, 4rem) max(var(--gutter), calc((100vw - 1520px) / 2 + var(--gutter))); background:
	radial-gradient(60% 70% at 85% 55%, rgba(255, 214, 120, .65), transparent 70%),
	radial-gradient(50% 60% at 10% 100%, rgba(210, 51, 95, .22), transparent 70%),
	var(--apricot); overflow: hidden; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(255, 250, 241, .55) 1px, transparent 1.6px); background-size: 22px 22px; mask-image: linear-gradient(90deg, #000, transparent 60%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); }
.hero__kicker { font: italic 600 var(--fs-l)/1.2 var(--ff-display); font-variation-settings: var(--soft); color: var(--crust); margin-bottom: 1.2rem; display: inline-flex; gap: .6em; align-items: center; }
.hero__kicker::before { content: ""; width: 38px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10'%3E%3Cpath d='M1 5q4.5-8 9 0t9 0 9 0 9 0' fill='none' stroke='%239c1d43' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.hero__title { font-size: var(--fs-hero); font-weight: 800; line-height: .9; letter-spacing: -.035em; margin: 0 0 .35em; color: var(--crust); }
.hero__title .w { display: inline-block; margin-right: .2em; }
.hero__title .w--hot { font-style: italic; font-weight: 600; color: var(--berry-deep); position: relative; }
.hero__title .w--hot::after { content: ""; position: absolute; left: -2%; right: 4%; bottom: -.04em; height: .16em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10C40 2 80 14 120 7s60 2 76-1' fill='none' stroke='%23fff6dd' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.hero__lead { font-size: var(--fs-l); max-width: 34rem; color: var(--crust-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__stage { position: relative; display: grid; justify-items: center; gap: 1rem; }
.oven { position: relative; width: min(100%, 560px); aspect-ratio: 10 / 11; border-radius: 50% 50% 28px 28px / 42% 42% 28px 28px; overflow: hidden; background: radial-gradient(70% 60% at 50% 70%, #6b2c10, #2a1208 70%); box-shadow: 0 0 0 16px var(--crust-2), 0 0 0 18px rgba(58, 30, 16, .4), inset 0 30px 60px rgba(0, 0, 0, .55), 0 50px 80px -40px rgba(58, 30, 16, .9); isolation: isolate; }
.oven__poster, .oven__gpu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oven__gpu { opacity: 0; transition: opacity 1.2s var(--ease); }
.has-gpu .oven__gpu { opacity: 1; }
.oven__glow { position: absolute; left: 10%; right: 10%; bottom: -10%; height: 30%; z-index: 2; background: radial-gradient(closest-side, rgba(255, 150, 60, .45), transparent); pointer-events: none; mix-blend-mode: screen; }
.hero__caption { margin: 0; font: italic 500 var(--fs-s)/1.3 var(--ff-display); color: var(--crust-2); }
@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; min-height: 0; padding-left: var(--gutter); }
	.oven { width: min(84vw, 460px); }
}

/* ------------------------------------------------------------------ tickets */
.ticket { position: relative; }
.ticket > a, .ticket--hero { display: grid; grid-template-columns: auto 1fr; gap: .1rem 1rem; align-items: center; text-decoration: none; color: var(--crust); }
.ticket--hero { width: min(100%, 440px); margin-top: -2.2rem; z-index: 4; padding: 1rem 1.3rem 1.05rem; background: var(--paper); border-radius: 6px; box-shadow: 0 24px 40px -24px rgba(58, 30, 16, .8); transform: rotate(-1.5deg); transition: transform .5s var(--spring); }
.ticket--hero:hover { transform: rotate(0) translateY(-3px); color: var(--crust); }
.ticket--hero::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: radial-gradient(circle at 6px 0, transparent 5px, var(--paper) 5.5px) 0 6px / 12px 12px repeat-x; }
.ticket__time { grid-row: span 3; font: 800 2.4rem/1 var(--ff-display); font-variation-settings: var(--soft); color: var(--berry-deep); }
.ticket__time .icon { width: 2.2rem; height: 2.2rem; }
.ticket__what { font: 700 1.25rem/1.15 var(--ff-display); font-variation-settings: var(--soft); }
.ticket__what small { display: block; font: 600 var(--fs-xs)/1.4 var(--ff-body); color: var(--muted); }
.ticket__state { justify-self: start; display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-xs); font-weight: 700; padding: .3em .7em; border-radius: 999px; background: rgba(58, 30, 16, .08); }
.ticket--out .ticket__state, .ticket--hero.is-out .ticket__state { background: #dcebc6; color: #2f5418; }
.ticket--oven .ticket__state, .ticket--hero.is-oven .ticket__state { background: var(--berry); color: #fff; animation: ovenglow 1.6s ease-in-out infinite alternate; }
@keyframes ovenglow { to { box-shadow: 0 0 18px rgba(210, 51, 95, .7); } }

/* ------------------------------------------------------------------ today: order rail */
.today { position: relative; background: var(--crust); color: var(--flour); padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(4rem, 7vw, 6rem); overflow: hidden; }
.today::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background: radial-gradient(50% 60% at 80% 0%, rgba(242, 155, 56, .35), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(210, 51, 95, .25), transparent 70%); }
.today__in { position: relative; max-width: var(--wrap); margin: 0 auto; }
.today__head { padding: 0 var(--gutter); max-width: 46rem; }
.today .kicker { color: var(--butter); }
.today__title { font-size: var(--fs-xxl); font-weight: 800; color: #fff; }
.today__lead { color: rgba(247, 239, 226, .88); font-size: var(--fs-l); }
.rail { position: relative; margin-top: 2.6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 var(--gutter) 2.4rem; }
.rail::-webkit-scrollbar { display: none; }
.rail__wire { position: absolute; left: 0; right: 0; top: 14px; height: 3px; background: linear-gradient(90deg, #b9a48a, #e9dcc6 40%, #a28c72); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); min-width: 100%; width: var(--rail-w, 100%); }
.rail__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.1rem; width: max-content; }
.rail .ticket { scroll-snap-align: start; width: 230px; padding-top: 22px; transform-origin: 50% 8px; transform: rotate(var(--tilt, 0deg)); transition: transform .6s var(--spring); }
.rail .ticket:hover { transform: rotate(0) translateY(4px); }
.ticket__peg { position: absolute; left: 50%; top: 2px; width: 22px; height: 30px; margin-left: -11px; z-index: 2; border-radius: 4px 4px 6px 6px; background: linear-gradient(90deg, #c49a6c, #e8c79a 50%, #b88c5c); box-shadow: 0 3px 4px rgba(0, 0, 0, .4); }
.rail .ticket > a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto; gap: .5rem .8rem; height: 100%; padding: 1.5rem 1.1rem 1.1rem; background: var(--kraft); background-image: repeating-linear-gradient(0deg, rgba(122, 68, 36, .06) 0 1px, transparent 1px 4px); border-radius: 4px; box-shadow: 0 22px 34px -20px rgba(0, 0, 0, .8); }
.rail .ticket__time { grid-row: 1; grid-column: 1; font-size: 1.75rem; white-space: nowrap; align-self: center; }
.ticket__img { grid-row: 1; grid-column: 2; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--paper); }
.ticket__img img { width: 100%; height: 100%; object-fit: cover; }
.rail .ticket__what { grid-column: 1 / -1; }
.ticket__price { grid-column: 1 / -1; font-weight: 700; color: var(--crust-3); font-size: var(--fs-s); }
.rail .ticket__state { grid-column: 1 / -1; }
.rail .ticket--out > a { background-color: #f3e6cc; }
.rail .ticket--oven > a { background-color: #ffd9a0; box-shadow: 0 0 0 3px var(--berry), 0 22px 34px -20px rgba(0, 0, 0, .8); }
.rail .ticket--later > a { opacity: .92; }

/* ------------------------------------------------------------------ shelves */
.shelves { background: var(--flour); padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.shelves__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.shelves__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .2rem 2rem; margin-bottom: 3rem; }
.shelves__head .kicker { grid-column: 1 / -1; }
.shelves__title { font-size: var(--fs-xxl); font-weight: 800; margin: 0; max-width: 14ch; }
.shelves__all { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; }
.shelf { position: relative; display: grid; grid-template-columns: 11rem 1fr; align-items: end; gap: 1.5rem; margin-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.shelf__name { margin: 0 0 2.6rem; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-style: italic; font-weight: 600; }
.shelf__name a { text-decoration: none; }
.shelf__row { list-style: none; margin: 0; padding: 0 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 2rem); align-items: end; position: relative; z-index: 2; }
.shelf__plank { position: absolute; left: 10rem; right: -2rem; bottom: -18px; height: 24px; border-radius: 4px; background: linear-gradient(180deg, #c98d55, #a8693a 45%, #7e4a26); box-shadow: 0 20px 26px -14px rgba(58, 30, 16, .7), inset 0 2px 0 rgba(255, 255, 255, .25); }
.shelf__plank::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .35; background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(58, 30, 16, .35) 120px 122px), repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, .12) 5px 6px); }
.goods a { display: block; position: relative; text-decoration: none; }
.goods__img { display: block; overflow: hidden; border-radius: 50% 50% 18px 18px / 40% 40% 18px 18px; aspect-ratio: 4 / 5; box-shadow: 0 18px 24px -18px rgba(58, 30, 16, .9); transition: transform .6s var(--spring); }
.goods:nth-child(even) .goods__img { aspect-ratio: 1; border-radius: 50%; }
.goods__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.goods a:hover .goods__img { transform: translateY(-8px) rotate(-1.5deg); }
.goods a:hover .goods__img img { transform: scale(1.06); }
.tag { position: absolute; z-index: 3; right: 6%; bottom: -66px; display: grid; gap: .1rem; min-width: 7.5rem; max-width: 92%; padding: .55rem .8rem .6rem 1.1rem; background: var(--paper); color: var(--crust); border-radius: 3px 10px 10px 3px; box-shadow: 0 10px 16px -10px rgba(58, 30, 16, .7); transform-origin: 50% -26px; transform: rotate(var(--sw, 3deg)); transition: transform .8s var(--spring); clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }
.tag::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--flour2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.goods a:hover .tag { transform: rotate(calc(var(--sw, 3deg) * -1.6)); }
.tag__name { font: 700 1rem/1.15 var(--ff-display); font-variation-settings: var(--soft); }
.tag__price { font-weight: 800; color: var(--berry-deep); font-size: var(--fs-s); }
.tag__price small { font-weight: 600; color: var(--muted); }
.shelf--1 .shelf__plank { background: linear-gradient(180deg, #d8a46e, #b67b46 45%, #8a5530); }
@media (max-width: 900px) {
	.shelf { grid-template-columns: 1fr; gap: .4rem; }
	.shelf__name { margin: 0; }
	.shelf__row { grid-template-columns: repeat(4, 62vw); overflow-x: auto; padding-bottom: 80px; margin-bottom: -60px; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.goods { scroll-snap-align: start; }
	.shelf__plank { left: 0; right: 0; bottom: -2px; }
}

/* ------------------------------------------------------------------ cake builder */
.cakes { position: relative; background: var(--berry); color: #fff; padding: clamp(4rem, 8vw, 7rem) 0; overflow: hidden; }
.cakes::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .25) 1.2px, transparent 1.8px); background-size: 26px 26px; mask-image: radial-gradient(70% 70% at 80% 50%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 80% 50%, #000, transparent); }
.cakes__in { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.cakes .kicker { color: var(--butter); }
.cakes__title { font-size: var(--fs-xxl); font-weight: 800; color: #fff; max-width: 16ch; }
.cakes__lead { font-size: var(--fs-l); color: rgba(255, 255, 255, .86); max-width: 38rem; }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: 2.6rem; }
.builder__form { display: grid; gap: 1.4rem; }
.pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick legend { padding: 0; margin-bottom: .6rem; font: italic 600 1.2rem/1 var(--ff-display); font-variation-settings: var(--soft); color: var(--butter); }
.pick__row { display: flex; gap: .5rem; }
.pick__row--wrap { flex-wrap: wrap; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: .5em; padding: .65em 1.05em; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); font-weight: 700; font-size: var(--fs-s); transition: background-color .25s, color .25s, transform .35s var(--spring); }
.chip--num span { min-width: 3.2rem; justify-content: center; font: 800 1.25rem/1 var(--ff-display); font-variation-settings: var(--soft); }
.chip span small { font-weight: 600; opacity: .75; }
.chip--swatch i { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.chip input:checked + span { background: var(--flour); color: var(--berry-deep); box-shadow: none; transform: translateY(-2px); }
.chip input:focus-visible + span { outline: 3px solid var(--butter); outline-offset: 2px; }
.chip:hover span { background: rgba(255, 255, 255, .22); }
.chip input:checked:hover + span { background: #fff; }
.builder__stage { display: grid; gap: 1.2rem; }
.stand { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(60% 60% at 50% 40%, #ff7c9c, #b51f4c 70%); box-shadow: inset 0 0 0 12px rgba(255, 255, 255, .12), 0 40px 70px -40px rgba(60, 0, 20, .9); }
.stand__poster, .stand__gpu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stand__gpu { opacity: 0; transition: opacity 1s var(--ease); }
.has-gpu .stand__gpu { opacity: 1; }
.quote { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1.2rem; padding: 1.3rem 1.5rem; background: var(--flour); color: var(--crust); border-radius: var(--r); box-shadow: 0 24px 40px -28px rgba(60, 0, 20, .9); }
.quote__price { grid-row: span 2; margin: 0; font: 800 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--ff-display); font-variation-settings: var(--soft); color: var(--berry-deep); font-variant-numeric: tabular-nums; }
.quote__serves { margin: 0; font-weight: 700; }
.quote__pickup { margin: 0; display: inline-flex; gap: .45em; align-items: center; color: var(--muted); font-size: var(--fs-s); }
.quote__pickup b { color: var(--crust); }
.quote .btn { grid-column: 1 / -1; justify-content: center; margin-top: .7rem; }
.quote [data-out] { transition: opacity .2s; }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } .builder__stage { order: -1; } .stand { width: min(100%, 420px); justify-self: center; } }

/* ------------------------------------------------------------------ baker's day */
.day { position: relative; background: var(--leaf); color: var(--flour); padding: clamp(4rem, 8vw, 7rem) 0; overflow: hidden; }
.day__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.day .kicker { color: var(--butter); }
.day__title { font-size: var(--fs-xxl); font-weight: 800; color: #fff; }
.dial { width: 100%; max-width: 520px; margin: 0 auto; overflow: visible; }
.dial__face { fill: #24471a; stroke: rgba(255, 255, 255, .15); stroke-width: 2; }
.dial__tick { stroke: rgba(247, 239, 226, .4); stroke-width: 2; stroke-linecap: round; }
.dial__tick--major { stroke: var(--butter); stroke-width: 4; }
.dial__hour { fill: rgba(247, 239, 226, .85); font: 700 17px var(--ff-body); text-anchor: middle; }
.dial__arc { fill: none; stroke-width: 18; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease-out); }
.dial__arc--0 { stroke: #c9e39a; }
.dial__arc--1 { stroke: #8fb6d8; }
.dial__arc--2 { stroke: var(--apricot); }
.dial__arc--3 { stroke: var(--berry); }
.dial__arc--4 { stroke: var(--butter); }
.js .day:not(.is-in) .dial__arc { stroke-dashoffset: calc(var(--len) * var(--span)); }
.dial__hand { transition: transform 1.4s var(--spring); }
.dial__hand line { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.dial__hand circle { fill: #fff; }
.dial__hub { fill: var(--crust); stroke: #fff; stroke-width: 4; }
.day__now { display: grid; gap: .3rem; max-width: 28rem; margin: 1.4rem auto 0; text-align: center; }
.day__now span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--butter); }
.day__now em { font: italic 500 var(--fs-l)/1.35 var(--ff-display); font-variation-settings: var(--soft); }
.steps { list-style: none; margin: 1.4rem 0 2rem; padding: 0; display: grid; gap: .2rem; }
.steps__item { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1rem; padding: .7rem 0 .7rem 1rem; border-left: 6px solid var(--c, var(--butter)); border-radius: 2px; transition: background-color .4s; }
.steps__item b { font: 700 1.2rem/1.2 var(--ff-display); font-variation-settings: var(--soft); }
.steps__item > span:last-child { grid-column: 2; font-size: var(--fs-s); color: rgba(247, 239, 226, .92); }
.steps__time { grid-row: span 2; font-size: var(--fs-xs); font-weight: 700; color: rgba(247, 239, 226, .9); padding-top: .25rem; }
.steps__item--0 { --c: #c9e39a; } .steps__item--1 { --c: #8fb6d8; } .steps__item--2 { --c: var(--apricot); } .steps__item--3 { --c: var(--berry); } .steps__item--4 { --c: var(--butter); }
.steps__item.is-now { background: rgba(0, 0, 0, .22); }
.day__photos { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; align-items: end; }
.day__ph { margin: 0; position: relative; }
.day__ph img { width: 100%; border-radius: 18px; object-fit: cover; }
.day__ph--a img { aspect-ratio: 3 / 4; }
.day__ph--b img { aspect-ratio: 4 / 3; }
.day__ph figcaption { position: absolute; left: .7rem; bottom: .7rem; padding: .3em .7em; border-radius: 999px; background: rgba(58, 30, 16, .75); font-size: var(--fs-xs); font-weight: 700; }
@media (max-width: 900px) { .day__in { grid-template-columns: 1fr; } .steps__item { grid-template-columns: 1fr; } .steps__time { grid-row: auto; } .steps__item > span:last-child { grid-column: 1; } }

/* ------------------------------------------------------------------ visit */
.visit { background: var(--flour2); padding: clamp(4rem, 8vw, 7rem) 0; }
.visit__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: auto auto; gap: 1.4rem 2rem; }
.visit__photo { grid-row: span 2; margin: 0; border-radius: 50% 50% var(--r) var(--r) / 30% 30% var(--r) var(--r); overflow: hidden; min-height: 420px; }
.visit__photo img { width: 100%; height: 100%; object-fit: cover; }
.visit__card { padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--paper); border-radius: var(--r); box-shadow: 0 30px 50px -40px rgba(58, 30, 16, .7); }
.visit__title { font-size: var(--fs-xl); font-weight: 800; margin-bottom: .2em; }
.visit__addr { color: var(--muted); }
.visit__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.visit__map { width: 100%; height: auto; border-radius: var(--r); }
.map__bg { fill: #e7d4b3; }
.map__block { fill: #f3e6cf; }
.map__park { fill: #b9d48f; }
.map__road { stroke: #fffaf1; stroke-width: 10; }
.map__road--main { stroke-width: 16; stroke: #ffe7b0; }
.map__pin path { fill: var(--berry); }
.map__pin circle { fill: #fff; }
.map__pin { animation: pinbob 2.4s ease-in-out infinite; }
@keyframes pinbob { 50% { transform: translate(205px, 112px); } }
.hours { margin-top: 1.2rem; }
.hours__status { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 .8rem; padding: .4em .85em; border-radius: 999px; background: #f6dce3; color: var(--berry-deep); font-weight: 700; font-size: var(--fs-s); }
.hours__status.is-open { background: #dcebc6; color: #2f5418; }
.hours__table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.hours__table th, .hours__table td { padding: .42rem 0; text-align: left; font-weight: 500; border-bottom: 2px dotted rgba(58, 30, 16, .15); }
.hours__table td { text-align: right; font-variant-numeric: tabular-nums; }
.hours__table .is-today th, .hours__table .is-today td { font-weight: 800; color: var(--berry-deep); }
@media (max-width: 900px) { .visit__in { grid-template-columns: 1fr; } .visit__photo { grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------------ words */
.words { background: var(--butter); padding: clamp(4rem, 8vw, 7rem) var(--gutter); }
.words__in { max-width: 980px; margin: 0 auto; }
.bag { position: relative; padding: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 5vw, 4.4rem) clamp(2rem, 4vw, 3rem); background: var(--kraft); background-image: repeating-linear-gradient(90deg, rgba(122, 68, 36, .05) 0 2px, transparent 2px 7px); border-radius: 6px 6px 14px 14px; box-shadow: 0 40px 60px -40px rgba(58, 30, 16, .8); transform: rotate(-1deg); }
.bag::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; background: linear-gradient(135deg, var(--kraft) 33%, transparent 33%) 0 0 / 18px 16px, linear-gradient(225deg, var(--kraft) 33%, transparent 33%) 0 0 / 18px 16px; }
.bag__quote { margin: 0; }
.bag__quote[hidden] { display: none; }
.bag blockquote { margin: 0; }
.bag blockquote p { font: italic 500 clamp(1.6rem, 1.1rem + 2vw, 2.8rem)/1.2 var(--ff-display); font-variation-settings: var(--soft); color: var(--crust); margin: 0 0 1.2rem; }
.bag figcaption { font-weight: 700; color: var(--crust-3); }
.bag__dots { display: flex; gap: .5rem; margin-top: 1.6rem; }
.bag__dots button { width: 34px; height: 8px; border: 0; border-radius: 999px; background: rgba(58, 30, 16, .2); cursor: pointer; padding: 0; transition: background-color .3s, width .4s var(--ease-out); }
.bag__dots button[aria-pressed="true"] { background: var(--berry); width: 54px; }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--crust); color: var(--flour); }
.foot__in { max-width: var(--wrap); margin: 0 auto; padding: clamp(3.5rem, 6vw, 5rem) var(--gutter) 2rem; }
.foot__cta { display: grid; grid-template-columns: 1fr auto; gap: .4rem 2rem; align-items: center; padding-bottom: 2.6rem; margin-bottom: 2.6rem; border-bottom: 2px dashed rgba(247, 239, 226, .18); }
.foot__big { margin: 0; font: 700 var(--fs-xl)/1 var(--ff-display); font-variation-settings: var(--soft); color: #fff; }
.foot__note { grid-column: 1; margin: 0; color: rgba(247, 239, 226, .72); max-width: 40rem; }
.foot__cta .btn { grid-column: 2; grid-row: 1 / span 2; }
.foot__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.foot__h { font: italic 600 1.2rem/1 var(--ff-display); font-variation-settings: var(--soft); color: var(--butter); margin-bottom: 1rem; }
.foot__list, .foot__hours { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.foot__list a { text-decoration: none; }
.foot__list a:hover { color: var(--butter); }
.foot__hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-s); color: rgba(247, 239, 226, .78); }
.foot__hours .is-today { color: var(--butter); font-weight: 700; }
.foot__addr { font-style: normal; margin-bottom: .8rem; }
.foot__strong { font: 700 1.4rem/1 var(--ff-display); text-decoration: none; }
.foot a:hover { color: var(--butter); }
.foot__fine { font-size: var(--fs-s); color: rgba(247, 239, 226, .7); }
.foot__word { margin: 3rem 0 1rem; font: italic 800 min(13rem, calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) / (var(--chars, 12) * .5)))/.9 var(--ff-display); font-variation-settings: var(--soft); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(246, 211, 107, .45); white-space: nowrap; overflow: hidden; }
.foot__legal { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-size: var(--fs-xs); color: rgba(247, 239, 226, .6); }
.foot__legal p { margin: 0; }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__cta { grid-template-columns: 1fr; } .foot__cta .btn { grid-column: 1; grid-row: auto; justify-self: start; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ inner page head */
.phead { position: relative; background: var(--apricot); color: var(--crust); overflow: hidden; isolation: isolate; }
.phead--berry { background: var(--berry); color: #fff; }
.phead--pistachio { background: var(--pistachio); }
.phead--butter { background: var(--butter); }
.phead--crust { background: var(--crust); color: var(--flour); }
.phead--flour { background: var(--flour); }
.phead::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45; background-image: radial-gradient(rgba(255, 250, 241, .55) 1px, transparent 1.6px); background-size: 22px 22px; mask-image: linear-gradient(90deg, #000, transparent 55%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%); }
.phead__in { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.4rem, 5vw, 4rem) var(--gutter) clamp(2.6rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; }
.phead__title { font-size: clamp(2.8rem, 1.2rem + 5.6vw, 6.6rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; margin: 0 0 .25em; }
.phead__lead { font-size: var(--fs-l); max-width: 40rem; opacity: .9; }
.phead--berry .kicker, .phead--crust .kicker { color: var(--butter); }
.phead__arch { width: clamp(220px, 28vw, 380px); aspect-ratio: 3 / 4; border-radius: 50% 50% var(--r) var(--r) / 38% 38% var(--r) var(--r); overflow: hidden; box-shadow: 0 0 0 10px rgba(255, 250, 241, .35), 0 40px 60px -40px rgba(58, 30, 16, .9); transform: rotate(2deg); }
.phead__arch img { width: 100%; height: 100%; object-fit: cover; }
.crumbs ol { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .5rem; font-size: var(--fs-xs); font-weight: 700; opacity: .8; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: inherit; }
.crumbs li + li::before { content: "·"; margin-right: .5rem; }
.jump ul { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.jump a { display: inline-block; padding: .55em 1em; border-radius: 999px; background: rgba(255, 250, 241, .7); color: var(--crust); font: 600 1.05rem/1 var(--ff-display); font-variation-settings: var(--soft); text-decoration: none; transition: background-color .25s, transform .35s var(--spring); }
.jump a:hover { background: var(--paper); transform: translateY(-2px); color: var(--crust); }
.buy { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 0; }
.buy__price { font: 800 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--ff-display); font-variation-settings: var(--soft); }
.buy__unit { font-weight: 700; opacity: .8; }
@media (max-width: 800px) {
	.phead__in { grid-template-columns: 1fr; }
	.phead__arch { width: min(70vw, 300px); justify-self: start; order: -1; }
}

/* ------------------------------------------------------------------ the printed menu */
.menu { max-width: var(--wrap); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) var(--gutter) 5rem; }
.sieve { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .8rem 1rem; margin-bottom: 2.4rem; background: rgba(247, 239, 226, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 14px 30px -24px rgba(58, 30, 16, .8); }
.sieve__label { margin: 0 .4rem 0 .3rem; font: italic 600 1.1rem/1 var(--ff-display); font-variation-settings: var(--soft); color: var(--berry-deep); }
.sieve__count { margin: 0 0 0 auto; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.chip--dark span { background: rgba(58, 30, 16, .06); box-shadow: inset 0 0 0 1.5px rgba(58, 30, 16, .25); color: var(--crust); padding: .5em .85em; font-size: var(--fs-xs); }
.chip--dark:hover span { background: rgba(58, 30, 16, .12); }
.chip--dark input:checked + span { background: var(--crust); color: var(--flour); }
.card { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; margin-bottom: clamp(3rem, 6vw, 5rem); scroll-margin-top: 150px; }
.card:nth-of-type(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.card:nth-of-type(even) .card__pic { order: 2; }
.card__pic { position: sticky; top: 150px; margin: 0; border-radius: 50% 50% var(--r) var(--r) / 34% 34% var(--r) var(--r); overflow: hidden; aspect-ratio: 3 / 4; box-shadow: 0 40px 60px -44px rgba(58, 30, 16, .9); }
.card--1 .card__pic { border-radius: var(--r); transform: rotate(-1.5deg); }
.card--2 .card__pic { border-radius: 50%; aspect-ratio: 1; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: clamp(1.6rem, 3vw, 2.6rem); background: var(--paper); border-radius: var(--r); box-shadow: 0 30px 50px -44px rgba(58, 30, 16, .8); position: relative; }
.card__body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: var(--r) var(--r) 0 0; background: var(--c, var(--apricot)); }
.card--1 .card__body::before { --c: var(--berry); }
.card--2 .card__body::before { --c: var(--pistachio); }
.card--3 .card__body::before { --c: var(--butter); }
.card__title { font-size: var(--fs-xl); font-weight: 800; font-style: italic; margin-bottom: .3em; }
.card__lead { color: var(--muted); }
.lines { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.line { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .1rem .6rem; transition: opacity .3s; }
.line.is-hidden { display: none; }
.line__name { font: 700 1.35rem/1.15 var(--ff-display); font-variation-settings: var(--soft); text-decoration: none; }
.line__name:hover { color: var(--berry-deep); text-decoration: underline; }
.line__dots { border-bottom: 3px dotted rgba(58, 30, 16, .3); transform: translateY(-.3em); min-width: 1rem; }
.line__price { font: 800 1.3rem/1 var(--ff-display); font-variation-settings: var(--soft); color: var(--berry-deep); font-variant-numeric: tabular-nums; }
.line__desc { grid-column: 1 / -1; margin: .15rem 0 0; color: var(--muted); font-size: var(--fs-s); max-width: 40rem; }
.line__meta { grid-column: 1 / -1; margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-size: var(--fs-xs); font-weight: 700; }
.line__meta > span { display: inline-flex; align-items: center; gap: .3em; }
.line__times { color: var(--apricot-deep); }
.line__diet { color: var(--leaf); }
.line__alg { text-decoration: none; padding: .15em .55em; border-radius: 999px; background: var(--flour2); color: var(--crust-3); }
.menu__note { margin-top: 2rem; font-size: var(--fs-s); color: var(--muted); max-width: 46rem; }
@media (max-width: 860px) {
	.card, .card:nth-of-type(even) { grid-template-columns: 1fr; }
	.card:nth-of-type(even) .card__pic { order: 0; }
	.card__pic { position: static; max-width: 340px; }
	.sieve { border-radius: var(--r); top: 64px; }
}

/* ------------------------------------------------------------------ menu item */
.item { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.4rem, 5vw, 4rem) var(--gutter); display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.bakecard { position: sticky; top: 96px; display: grid; gap: 1.2rem; padding: 1.6rem; background: var(--paper); border-radius: var(--r); box-shadow: 0 34px 56px -44px rgba(58, 30, 16, .85); }
.bakecard__h { display: flex; align-items: center; gap: .45em; margin: 0 0 .6rem; font: italic 600 1.15rem/1 var(--ff-display); font-variation-settings: var(--soft); color: var(--berry-deep); }
.bakecard__times { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bakecard__times .ticket { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; background: var(--kraft); border-radius: 6px; }
.bakecard__times .ticket__time { font-size: 1.6rem; }
.bakecard__days { margin: .6rem 0 0; font-size: var(--fs-s); color: var(--muted); }
.bakecard__facts { margin: 0; display: grid; gap: 0; }
.bakecard__facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .6rem 0; border-top: 2px dotted rgba(58, 30, 16, .15); }
.bakecard__facts dt { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: .15em; }
.bakecard__facts dd { margin: 0; font-weight: 600; }
.bakecard__alg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.bakecard__alg li { padding: .3em .7em; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.bakecard__alg .is-in { background: var(--berry); color: #fff; }
.bakecard__alg .is-out { background: var(--flour2); color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bakecard .btn { justify-content: center; }
.shelves--more { padding-top: 2rem; }
@media (max-width: 860px) { .item { grid-template-columns: 1fr; } .bakecard { position: static; } }

/* ------------------------------------------------------------------ cake order */
.cakes--page { padding-top: clamp(2rem, 4vw, 3rem); }
.cakes--page .builder { margin-top: 0; }
.order { background: var(--flour); padding: clamp(3.5rem, 7vw, 6rem) 0; scroll-margin-top: 70px; }
.order__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.order__title { font-size: var(--fs-xxl); font-weight: 800; }
.order__notes { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; }
.order__notes li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; font-size: var(--fs-s); }
.order__notes .icon { color: var(--berry); margin-top: .15em; }
.order__sheet { padding: clamp(1.6rem, 3.4vw, 2.8rem); background: var(--paper); border-radius: var(--r); box-shadow: 0 40px 70px -50px rgba(58, 30, 16, .8); border-top: 10px solid var(--berry); }
.order__summary { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.4rem; padding: .9rem 1rem; border-radius: 14px; background: #fbe3ea; color: var(--berry-deep); font-weight: 700; }
.order__summary .icon { width: 1.6rem; height: 1.6rem; flex: none; }
.order__errors { margin-bottom: 1.4rem; padding: 1rem 1.2rem; background: #fbe3ea; border-left: 6px solid var(--berry); border-radius: 6px; font-weight: 600; }
.order__errors p { margin: 0; }
.order__done > .icon { width: 3.2rem; height: 3.2rem; padding: .6rem; border-radius: 50%; background: var(--berry); color: #fff; stroke-width: 3; }
.order__done h3 { font-size: var(--fs-xl); margin-top: 1rem; }
.form__trap { position: absolute; left: -9999px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.field { margin: 0; display: grid; gap: .35rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.field abbr { color: var(--berry); text-decoration: none; }
.field input, .field select, .field textarea { width: 100%; font: inherit; padding: .8em .95em; border: 2px solid #e5d6bd; border-radius: 12px; background: var(--flour); color: var(--text); transition: border-color .2s, background-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--berry); background: #fff; }
.form__hint { margin: .9rem 0 1.2rem; font-size: var(--fs-s); color: var(--muted); }
@media (max-width: 860px) { .order__in { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ our bakery */
.tale { background: var(--flour); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.tale__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.tale__years { margin: 0; display: grid; }
.tale__years b { font: italic 800 clamp(7rem, 3rem + 12vw, 15rem)/.8 var(--ff-display); font-variation-settings: var(--soft); color: var(--apricot-deep); letter-spacing: -.05em; }
.tale__years span { font: 600 var(--fs-l)/1.2 var(--ff-display); font-variation-settings: var(--soft); max-width: 12ch; margin-top: .6rem; }
.tale__photos { max-width: var(--wrap); margin: clamp(2.6rem, 5vw, 4rem) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: .8fr 1.4fr .9fr; gap: 1rem; align-items: center; }
.tale__photos figure { margin: 0; overflow: hidden; border-radius: var(--r); }
.tale__photos figure:first-child { aspect-ratio: 3 / 4; border-radius: 50% 50% var(--r) var(--r) / 30% 30% var(--r) var(--r); }
.tale__photos figure:nth-child(2) { aspect-ratio: 4 / 3; }
.tale__photos figure:last-child { aspect-ratio: 1; border-radius: 50%; }
.tale__photos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .tale__in { grid-template-columns: 1fr; } .tale__photos { grid-template-columns: 1fr 1fr; } .tale__photos figure:nth-child(2) { grid-column: 1 / -1; order: -1; } }

/* ------------------------------------------------------------------ prose, journal */
.prose { font-size: var(--fs-m); line-height: 1.75; max-width: 42rem; }
.prose > :first-child { margin-top: 0; }
.prose p:first-of-type { font-size: var(--fs-l); line-height: 1.6; }
.prose h2 { font-size: var(--fs-xl); font-weight: 800; margin: 2em 0 .5em; }
.prose h3 { font-size: 1.6rem; margin: 1.6em 0 .4em; }
.prose a { color: var(--berry-deep); }
.prose blockquote { margin: 2em 0; padding: .2em 0 .2em 1.3em; border-left: 6px solid var(--apricot); font: italic 500 var(--fs-l)/1.5 var(--ff-display); font-variation-settings: var(--soft); }
.prose img { border-radius: 14px; }
.page-body { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) var(--gutter) 5rem; }
.news { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) var(--gutter) 5rem; }
.news__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.4rem 2rem; }
.story { position: relative; }
.news__list .story { grid-column: span 3; display: grid; gap: 1rem; align-content: start; }
.news__list .story:nth-child(3n + 1) { grid-column: span 4; }
.news__list .story:nth-child(3n + 2) { grid-column: span 2; }
.news__list .story.story--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); align-items: center; gap: 2rem; }
.story__img { display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; }
.story--lead .story__img { border-radius: 50% 50% var(--r) var(--r) / 30% 30% var(--r) var(--r); aspect-ratio: 5 / 4; }
.story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.story:hover .story__img img { transform: scale(1.04); }
.story__meta { margin: 0 0 .3rem; font-size: var(--fs-xs); font-weight: 800; color: var(--berry-deep); }
.story__title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); font-weight: 700; }
.story--lead .story__title { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); }
.story__title a { text-decoration: none; }
.story__title a:hover { text-decoration: underline; }
.story__excerpt { color: var(--muted); }
.pager .nav-links { display: flex; gap: .4rem; margin-top: 2rem; }
.pager .page-numbers { padding: .5em .9em; border-radius: 999px; background: var(--paper); text-decoration: none; font-weight: 700; }
.pager .current { background: var(--crust); color: var(--flour); }
@media (max-width: 800px) { .news__list .story, .news__list .story:nth-child(n) { grid-column: 1 / -1; } .news__list .story--lead { grid-template-columns: 1fr; } }
.article { max-width: var(--wrap); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) var(--gutter) 3rem; }
.article__img { margin: 0 0 clamp(2rem, 4vw, 3rem); border-radius: var(--r); overflow: hidden; aspect-ratio: 21 / 9; }
.article__img img { width: 100%; height: 100%; object-fit: cover; }
.article__body { margin: 0 auto; }
.article__tags { max-width: 42rem; margin: 2rem auto 0; }
.news--more { padding-top: 0; }
.news__more { font-size: var(--fs-xl); padding-top: 2rem; border-top: 3px dotted rgba(58, 30, 16, .25); }
.news__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.news__pair .story { display: grid; gap: .8rem; }
@media (max-width: 760px) { .news__pair { grid-template-columns: 1fr; } }
.comments { max-width: 42rem; margin: 3rem auto 0; }
.comment-form input:not([type="checkbox"]):not([type="submit"]), .comment-form textarea { width: 100%; font: inherit; padding: .7em .8em; border: 2px solid #e5d6bd; border-radius: 12px; background: #fff; }
.comment-form .submit { font: 700 var(--fs-s)/1 var(--ff-body); padding: .95em 1.5em; border: 0; border-radius: 999px; background: var(--crust); color: #fff; cursor: pointer; }
.empty { padding: 3rem 0; font-size: var(--fs-l); }
.searchbox { display: flex; gap: .5rem; max-width: 34rem; }
.searchbox input { flex: 1; min-width: 0; font: inherit; padding: .85em 1.1em; border: 2px solid var(--crust); border-radius: 999px; background: #fff; }
.searchbox .btn { background: var(--crust); color: var(--flour); }

/* ------------------------------------------------------------------ 404 */
.lost { background: var(--apricot); padding: clamp(4rem, 9vw, 8rem) var(--gutter); }
.lost__in { max-width: 820px; margin: 0 auto; }
.lost__num { display: flex; align-items: center; gap: .1em; margin: 0 0 1rem; font: italic 800 clamp(7rem, 4rem + 12vw, 14rem)/.8 var(--ff-display); font-variation-settings: var(--soft); color: var(--crust); }
.lost__bun { display: inline-block; width: .78em; height: .62em; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: radial-gradient(60% 50% at 40% 30%, #f5c47b, #b9620f 70%, #6b3410); box-shadow: inset 0 -.06em 0 rgba(0, 0, 0, .25); position: relative; }
.lost__bun::after { content: ""; position: absolute; left: 25%; right: 25%; top: 30%; height: .04em; border-radius: 1em; background: #ffe2ad; transform: rotate(-12deg); box-shadow: 0 .1em 0 #ffe2ad; }
.lost__title { font-size: var(--fs-xxl); font-weight: 800; }
.lost__lead { font-size: var(--fs-l); }
.lost .searchbox { margin: 2rem 0 1.4rem; }
.lost__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-weight: 800; }

/* ------------------------------------------------------------------ entrances (script-driven only) */
.js .hero__kicker, .js .hero__lead, .js .hero__actions { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
/* The loaf poster is the LCP image: it moves in but is never hidden. */
.js .hero__stage { transform: translateY(24px) scale(.97); transition: transform 1.2s var(--spring); }
.js .hero__title .w { transform: translateY(.3em) rotate(3deg); transition: transform 1.1s var(--spring); transition-delay: calc(120ms + var(--i) * 80ms); }
.js .hero.is-ready .hero__kicker, .js .hero.is-ready .hero__lead, .js .hero.is-ready .hero__actions, .js .hero.is-ready .hero__stage, .js .hero.is-ready .hero__title .w { opacity: 1; transform: none; }
.js .hero.is-ready .hero__lead { transition-delay: .5s; }
.js .hero.is-ready .hero__actions { transition-delay: .65s; }
.js .hero.is-ready .hero__stage { transition-delay: .2s; }
.js .rail .ticket { opacity: 0; transform: translateY(-40px) rotate(calc(var(--tilt) * 4)); transition: opacity .6s var(--ease-out), transform 1.1s var(--spring); transition-delay: calc(var(--i) * 70ms); }
.js .today.is-in .rail .ticket { opacity: 1; transform: rotate(var(--tilt)); }
.js .goods { opacity: 0; transform: translateY(-50px); transition: opacity .5s var(--ease-out), transform .9s var(--spring); transition-delay: calc(var(--i) * 90ms); }
.js .shelves.is-in .goods { opacity: 1; transform: none; }
.js [data-reveal] .reveal, .js .visit__card, .js .visit__map { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .visit.is-in .visit__card, .js .visit.is-in .visit__map { opacity: 1; transform: none; }
.js .visit.is-in .visit__map { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}