/* Blue Moon Bakery — "Menu card under a crescent moon" */
:root {
  --night: #0e0b3a;        /* logo ink */
  --night-2: #1a1f5c;
  --dusk: #2c3a86;
  --sky: #a9c1dc;          /* logo plaque blue */
  --cream: #f8f1e1;
  --cream-2: #efe4c8;
  --paper: #fffaf0;
  --ink: #16123f;
  --ink-soft: #4a4670;
  --butter: #f3d27a;
  --butter-2: #f7e2a0;
  --gold: #8a6412;
  --rule: rgba(22, 18, 63, .22);
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --bar-h: 68px;
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--bar-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--serif); color: var(--ink); background: var(--cream);
  font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: normal; }
p { margin: 0; }
figure { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--butter); color: var(--night); padding: 10px 16px; border-radius: 6px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }

/* ---------- type ---------- */
.display { font-style: italic; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.01em; }
.display--sm { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.sc { font-variant: small-caps; text-transform: lowercase; letter-spacing: .16em; font-size: 1.05rem; color: var(--ink-soft); }
.sc--lg { font-size: 1.35rem; color: var(--ink); }
.eyebrow { font-variant: small-caps; text-transform: lowercase; letter-spacing: .28em; font-size: 1.1rem; color: var(--butter-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px; border-radius: 999px; text-decoration: none;
  font-family: var(--serif); font-size: 1.02rem; letter-spacing: .02em; line-height: 1.2;
  border: 1.5px solid transparent; transition: transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--moon { background: var(--butter); color: var(--night); box-shadow: 0 6px 22px -8px rgba(243, 210, 122, .8); }
.btn--moon:hover { background: var(--butter-2); box-shadow: 0 10px 28px -8px rgba(243, 210, 122, .95); }
.btn--ghost { border-color: rgba(248, 241, 225, .55); color: var(--cream); }
.btn--ghost:hover { background: rgba(248, 241, 225, .12); border-color: var(--cream); }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--butter); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.link:hover { text-decoration-color: currentColor; }

/* ---------- sticky bar ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .4s, box-shadow .4s, color .4s; color: var(--cream); }
.bar__inner { height: var(--bar-h); width: min(1280px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 20px; }
.bar__logo { flex: none; display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(248, 241, 225, .3); transition: box-shadow .3s, transform .3s var(--ease); }
.bar__logo:hover { transform: translateY(-1px); }
.bar__logo img { height: 42px; width: auto; }
.bar__nav { margin-left: auto; }
.bar__nav ul { display: flex; gap: 4px; }
.bar__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; font-size: 1.05rem; font-style: italic; border-radius: 999px; position: relative; transition: background-color .2s; }
.bar__nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 1.5px; background: var(--butter); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.bar__nav a:hover::after, .bar__nav a[aria-current="true"]::after { transform: scaleX(1); }
.bar .btn--call { background: var(--butter); color: var(--night); padding: 8px 18px; }
.bar .btn--call:hover { background: var(--butter-2); }
.bar.is-solid { background: rgba(248, 241, 225, .96); color: var(--ink); box-shadow: 0 1px 0 var(--rule), 0 10px 30px -18px rgba(14, 11, 58, .5); backdrop-filter: saturate(1.2) blur(8px); }
.bar.is-solid .bar__logo { box-shadow: 0 0 0 1px var(--rule); }
.bar.is-solid .btn--call { background: var(--night); color: var(--cream); }
.bar.is-solid .btn--call:hover { background: var(--dusk); }
.bar.is-solid .bar__nav a::after { background: var(--gold); }
.bar__toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; position: relative; }
.bar__burger, .bar__burger::before, .bar__burger::after { position: absolute; left: 50%; width: 18px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.bar__burger { top: 50%; transform: translate(-50%, -50%); }
.bar__burger::before, .bar__burger::after { content: ""; left: 0; }
.bar__burger::before { top: -6px; }
.bar__burger::after { top: 6px; }
.bar__toggle[aria-expanded="true"] .bar__burger { background: transparent; }
.bar__toggle[aria-expanded="true"] .bar__burger::before { transform: translateY(6px) rotate(45deg); }
.bar__toggle[aria-expanded="true"] .bar__burger::after { transform: translateY(-6px) rotate(-45deg); }
.drawer { background: var(--cream); color: var(--ink); border-top: 1px solid var(--rule); box-shadow: 0 20px 40px -20px rgba(14, 11, 58, .5); }
.drawer ul { padding: 10px 20px 22px; display: grid; gap: 2px; }
.drawer a:not(.btn) { display: flex; align-items: center; min-height: 52px; font-size: 1.4rem; font-style: italic; text-decoration: none; border-bottom: 1px dotted var(--rule); }
.drawer .btn { margin-top: 14px; width: 100%; }

@media (max-width: 900px) {
  .bar__nav { display: none; }
  .bar__toggle { display: inline-block; }
  .bar .btn--call { margin-left: auto; }
}
@media (max-width: 420px) {
  .bar__inner { gap: 10px; }
  .bar__logo img { height: 34px; }
  .bar .btn--call { padding: 8px 14px; }
}
@media (min-width: 901px) { .drawer { display: none !important; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; min-height: 100vh; display: grid; place-items: center; text-align: center; color: var(--cream); overflow: hidden; isolation: isolate; padding: calc(var(--bar-h) + 40px) 20px 180px; }
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }
.hero__sky { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(120% 70% at 70% 12%, #2a3480 0%, transparent 60%),
  linear-gradient(180deg, var(--night) 0%, var(--night-2) 55%, var(--dusk) 82%, #6f7db3 100%); }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateY(calc(var(--p, 0) * -60px)); }
.stars circle { fill: #fff8e3; animation: twinkle var(--t, 4s) ease-in-out var(--dl, 0s) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%, 100% { opacity: var(--o, .8); } 50% { opacity: .12; } }
.moon { position: absolute; width: clamp(140px, 17vw, 260px); right: 3%; top: 10%; filter: drop-shadow(0 0 40px rgba(247, 226, 160, .35));
  animation: moonrise 3.2s var(--ease) .1s both; }
.moon > * { transform-origin: center; }
@keyframes moonrise { from { transform: translateY(55vh) rotate(-18deg); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(0) rotate(0); opacity: 1; } }
.ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(110px, 18vw, 220px); }
.hero__fade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 72%, var(--cream) 100%), rgba(248, 241, 225, var(--fade, 0)); }
.hero__content { max-width: 1040px; position: relative; }
.hero h1 { font-style: italic; font-size: clamp(3.2rem, 9vw, 7rem); line-height: .95; letter-spacing: -.02em; margin: 14px 0 22px; text-shadow: 0 4px 40px rgba(14, 11, 58, .6); }
.hero__lede { font-size: clamp(1.15rem, 2.2vw, 1.45rem); max-width: 34ch; margin-inline: auto; color: #f3ecdc; }
.hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__phone { margin-top: 26px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-style: italic; }
.hero__phone a { text-decoration: none; color: var(--butter-2); border-bottom: 1px dotted rgba(247, 226, 160, .6); padding-bottom: 2px; }
.hero__phone a:hover { border-bottom-style: solid; }
.hero__notes { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 1rem; color: #e7e1d3; }
.hero__notes li { display: inline-flex; align-items: center; gap: 10px; }
.hero__notes li::before { content: ""; width: 8px; height: 8px; background: var(--butter); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.rise { animation: rise 1.1s var(--ease) var(--d, 0s) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- welcome ---------- */
.welcome { padding: 40px 0 80px; }
.welcome__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.welcome__big { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-style: italic; line-height: 1.4; margin-top: 14px; max-width: 30ch; }
.welcome__addr { margin-top: 22px; }
.welcome__addr a { color: var(--ink-soft); text-decoration-color: var(--butter); text-underline-offset: 4px; }
.award { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 18px 40px -24px rgba(14, 11, 58, .45), 0 0 0 1px var(--rule); justify-self: center; max-width: 380px; transform: rotate(-1.5deg); }
.pledge { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pledge li { padding: 22px 26px; font-style: italic; font-size: 1.15rem; text-align: center; }
.pledge li + li { border-left: 1px solid var(--rule); }

/* ---------- menu boards ---------- */
.menu { padding: 90px 0; position: relative; }
.menu--lunch { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 18%, var(--cream-2) 82%, var(--cream) 100%); }
.menu__head { text-align: center; margin-bottom: 48px; }
.menu__head .display { margin-top: 4px; }
.ornament { display: block; width: 180px; height: 22px; margin: 18px auto 0; background:
  radial-gradient(circle at 50% 50%, var(--butter) 0 5px, transparent 6px),
  linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 42%, transparent 44%, transparent 56%, var(--rule) 58%, var(--rule) 80%, transparent) center / 100% 1px no-repeat; }
.board { background: var(--paper); border-radius: 6px; padding: clamp(28px, 5vw, 64px); box-shadow: 0 30px 60px -40px rgba(14, 11, 58, .55), 0 0 0 1px var(--rule); position: relative; }
.board::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule); border-radius: 3px; pointer-events: none; }
.board + .board { margin-top: 40px; }
.board__label { text-align: center; font-size: 1.35rem; color: var(--ink); margin-bottom: 26px; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 64px; }
.item { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.item h3 { display: flex; align-items: baseline; gap: 10px; font-size: 1.28rem; font-weight: bold; font-style: italic; line-height: 1.3; }
.item__name small { font-weight: normal; font-size: .85em; color: var(--ink-soft); }
.lead { flex: 1 1 auto; min-width: 24px; height: 0; border-bottom: 2px dotted rgba(22, 18, 63, .35); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(var(--d, 0s) + .25s); position: relative; top: -4px; }
.star { flex: none; width: 12px; height: 12px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: scale(0) rotate(-90deg); transition: transform .5s var(--ease) calc(var(--d, 0s) + 1s); }
.item p { margin-top: 6px; color: var(--ink-soft); font-size: 1.02rem; }
.item .tag { color: var(--butter-2); }
.item.in { opacity: 1; transform: none; }
.item.in .lead { transform: scaleX(1); }
.item.in .star { transform: scale(1) rotate(0); }
.tag { display: inline-block; margin-top: 8px; padding: 2px 12px; border-radius: 999px; background: var(--night); color: var(--butter-2); font-size: .9rem; font-style: italic; letter-spacing: .02em; }
.notes { margin-top: 36px; padding-top: 24px; border-top: 1px dotted var(--rule); display: grid; gap: 8px; text-align: center; font-size: 1.05rem; }
.notes .sc { margin-right: 8px; color: var(--ink); }
.notes__title { font-style: italic; font-size: 1.2rem; }

.bakery { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.bakery__photo { border-radius: 200px 200px 8px 8px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(14, 11, 58, .6); aspect-ratio: 441 / 535; }
.bakery__photo img { width: 100%; height: 100%; object-fit: cover; }
.bakery__text .display { margin: 6px 0 22px; }
.goods { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 1.12rem; font-style: italic; }
.goods li { display: inline-flex; align-items: center; }
.goods li:not(:last-child)::after { content: ""; width: 6px; height: 6px; margin: 0 12px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.goods__more { margin-top: 14px; font-style: italic; color: var(--ink-soft); }

/* ---------- cakes ---------- */
.cakes { padding: 90px 0 100px; background: var(--night); color: var(--cream); position: relative; overflow: hidden; }
.cakes::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 85% 0%, rgba(243, 210, 122, .16), transparent 70%); pointer-events: none; }
.cakes .sc { color: var(--butter-2); }
.cakes .sc--lg { color: var(--cream); }
.cakes .ornament { background: radial-gradient(circle at 50% 50%, var(--butter) 0 5px, transparent 6px), linear-gradient(90deg, transparent, rgba(248,241,225,.3) 20%, rgba(248,241,225,.3) 42%, transparent 44%, transparent 56%, rgba(248,241,225,.3) 58%, rgba(248,241,225,.3) 80%, transparent) center / 100% 1px no-repeat; }
.cakes__intro { text-align: center; font-size: clamp(1.1rem, 2vw, 1.3rem); font-style: italic; display: grid; gap: 6px; justify-items: center; }
.cakes__intro .btn { margin-top: 20px; }
.film { position: relative; margin: 56px 0 64px; }
.film__strip { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px max(20px, calc((100% - var(--wrap)) / 2)); scrollbar-width: thin; scrollbar-color: var(--butter) transparent;
  background:
    repeating-linear-gradient(90deg, rgba(248,241,225,.22) 0 14px, transparent 14px 30px) 0 10px / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, rgba(248,241,225,.22) 0 14px, transparent 14px 30px) 0 calc(100% - 10px) / 100% 10px no-repeat,
    #07051f; }
.film__strip:focus-visible { outline-offset: -3px; }
.cake { flex: none; width: clamp(240px, 30vw, 360px); scroll-snap-align: center; }
.cake figure { aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #111; box-shadow: 0 20px 40px -20px #000; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.cake img { width: 100%; height: 100%; object-fit: cover; transform: translateX(var(--px, 0)) scale(1.14); will-change: transform; }
.cake:hover figure { transform: translateY(-10px) rotate(-.6deg); box-shadow: 0 32px 50px -22px #000, 0 0 0 2px var(--butter); }
.film__nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 0; background: var(--butter); color: var(--night); font-size: 2rem; line-height: 1; cursor: pointer; font-family: var(--serif); box-shadow: 0 10px 20px -10px #000; transition: transform .2s var(--ease), background-color .2s; }
.film__nav:hover { transform: scale(1.08); background: var(--butter-2); }
.film__nav--prev { left: 12px; }
.film__nav--next { right: 12px; }
.flavors { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 40px; }
.flavors__col { border-top: 1px solid rgba(248, 241, 225, .25); padding-top: 18px; }
.list { margin-top: 14px; columns: 2; column-gap: 24px; font-style: italic; font-size: 1.06rem; }
.flavors__col:not(:first-child) .list { columns: 1; }
.list li { break-inside: avoid; padding: 3px 0; }
.cakes .tag { background: var(--butter); color: var(--night); margin-top: 16px; }

/* ---------- about ---------- */
.about { padding: 100px 0 90px; }
.about__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.about__text p { font-size: 1.15rem; line-height: 1.75; }
.about__text p + p { margin-top: 18px; }
.about__text p:first-child::first-letter { float: left; font-size: 4.4rem; line-height: .8; padding: 8px 10px 0 0; font-style: italic; color: var(--night); }
.about__photos { position: relative; min-height: 460px; }
.polaroid { background: #fff; padding: 12px 12px 34px; box-shadow: 0 24px 50px -26px rgba(14, 11, 58, .6), 0 0 0 1px var(--rule); position: absolute; transition: transform .45s var(--ease); }
.polaroid img { width: 100%; }
.polaroid--a { width: 68%; left: 0; top: 0; rotate: -3deg; }
.polaroid--b { width: 50%; right: 0; bottom: 0; rotate: 4deg; }
.polaroid:hover { transform: translateY(-8px); }
.words { margin-top: 96px; }
.words > h3 { text-align: center; margin-bottom: 40px; }
.quotes { columns: 3 300px; column-gap: 28px; }
.quote { break-inside: avoid; margin-bottom: 28px; background: var(--paper); padding: 28px 26px 22px; border-radius: 4px; box-shadow: 0 0 0 1px var(--rule); position: relative; }
.quote::before { content: "\201C"; position: absolute; top: -8px; left: 18px; font-size: 4rem; line-height: 1; font-style: italic; color: var(--gold); }
.quote blockquote { margin: 0; font-style: italic; font-size: 1.04rem; line-height: 1.65; }
.quote blockquote p + p { margin-top: 8px; }
.quote__by { margin-top: 14px; font-variant: small-caps; letter-spacing: .08em; color: var(--ink-soft); }

/* ---------- contact ---------- */
.contact { padding: 100px 0; color: var(--cream); position: relative; overflow: hidden; background: linear-gradient(180deg, var(--dusk) 0%, var(--night-2) 45%, var(--night) 100%); }
.contact__sky { position: absolute; inset: 0; background: radial-gradient(1.5px 1.5px at 12% 20%, #fff8e3, transparent), radial-gradient(1px 1px at 30% 70%, #fff8e3, transparent), radial-gradient(1.5px 1.5px at 55% 30%, #fff8e3, transparent), radial-gradient(1px 1px at 78% 60%, #fff8e3, transparent), radial-gradient(2px 2px at 90% 18%, #fff8e3, transparent), radial-gradient(1px 1px at 44% 88%, #fff8e3, transparent); opacity: .7; pointer-events: none; }
.menu__head--light .sc { color: var(--butter-2); }
.menu__head--light .ornament { background: radial-gradient(circle at 50% 50%, var(--butter) 0 5px, transparent 6px), linear-gradient(90deg, transparent, rgba(248,241,225,.3) 20%, rgba(248,241,225,.3) 42%, transparent 44%, transparent 56%, rgba(248,241,225,.3) 58%, rgba(248,241,225,.3) 80%, transparent) center / 100% 1px no-repeat; }
.contact__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.ccard { background: rgba(248, 241, 225, .97); color: var(--ink); border-radius: 6px; padding: 28px 24px; display: grid; gap: 10px; align-content: start; box-shadow: 0 24px 40px -26px #000; transition: transform .35s var(--ease); }
.ccard:hover { transform: translateY(-4px); }
.ccard .sc { color: var(--ink); font-size: 1.15rem; }
.ccard .link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; word-break: break-word; }
.ccard p .link { display: inline; min-height: 0; }
.ccard .big { display: block; font-size: 1.9rem; font-style: italic; font-weight: normal; margin-top: 4px; }
.social { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.social .link { display: inline-flex !important; min-height: 44px !important; }

/* ---------- footer ---------- */
.foot { background: var(--night); color: #d9d3c4; padding: 56px 0 28px; border-top: 1px solid rgba(248, 241, 225, .12); }
.foot__grid { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr .8fr; gap: 32px; align-items: start; }
.foot__logo { width: 220px; border-radius: 6px; }
.foot .sc { color: var(--butter-2); margin-bottom: 6px; }
.foot a { text-decoration: none; border-bottom: 1px dotted rgba(247, 226, 160, .5); display: inline-block; padding: 6px 0; }
.foot a:hover { color: var(--butter-2); border-bottom-style: solid; }
.foot__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(248, 241, 225, .12); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: .95rem; }
.foot__base .link { color: #d9d3c4; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal, .no-js .item { opacity: 1; transform: none; }
.no-js .lead { transform: none; }
.no-js .star { transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .contact__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .flavors { grid-template-columns: 1fr 1fr; }
  .flavors__col:first-child { grid-column: 1 / -1; }
  .flavors__col:first-child .list { columns: 3; }
}
@media (max-width: 760px) {
  .welcome__grid, .bakery, .about__grid { grid-template-columns: 1fr; }
  .pledge { grid-template-columns: 1fr; }
  .pledge li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .items { grid-template-columns: 1fr; gap: 22px; }
  .bakery__photo { max-width: 360px; margin-inline: auto; width: 100%; }
  .about__photos { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .polaroid { position: static; width: auto !important; padding: 8px 8px 22px; }
  .flavors { grid-template-columns: 1fr; }
  .flavors__col:first-child .list { columns: 2; }
  .flavors__col:not(:first-child) .list { columns: 2; }
  .film__nav { display: none; }
  .hero { padding-bottom: 140px; padding-top: calc(var(--bar-h) + 120px); }
  .moon { top: calc(var(--bar-h) + 4px); right: 8%; width: 120px; }
}
@media (max-width: 560px) {
  .contact__grid, .foot__grid { grid-template-columns: 1fr; }
  .foot__base { flex-direction: column; align-items: flex-start; }
  .hero__cta .btn { flex: 1 1 100%; }
  .menu, .cakes, .about, .contact { padding-top: 72px; padding-bottom: 72px; }
  .item h3 { font-size: 1.18rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .item { opacity: 1 !important; transform: none !important; }
  .lead, .star { transform: none !important; }
  .stars { transform: none !important; }
  .cake img { transform: scale(1.02) !important; }
}