:root {
  color-scheme: light;
  --sand: #dac2a8;
  --sand-light: #e8d6c1;
  --cream: #f7eee3;
  --choc: #47210c;
  --choc-soft: #6b3f25;
  --muted: #7b5a44;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 45% at 50% 38%, rgba(255, 250, 243, .55), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(71, 33, 12, .12), transparent 70%),
    var(--sand);
  color: var(--choc);
  font: 400 16px/1.45 Jost, "Century Gothic", Futura, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The awning along the top, like the kiosk in the logo: the cafe's dark colour with a scalloped edge. */
.awning { position: relative; height: 18px; flex: none; background: var(--choc); }
.awning::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  background: radial-gradient(circle at 16px 0, var(--choc) 14px, transparent 14.5px) 0 0 / 32px 14px repeat-x;
}

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100% - 32px, 640px);
  margin: 0 auto;
  padding: 56px 0 28px;
  text-align: center;
}

.logo-stage { margin: 0 auto 26px; }
.logo {
  display: block;
  width: min(230px, 56vw);
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 26px 50px -30px rgba(71, 33, 12, .7);
}
.eyebrow {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}
/* "— WELCOME TO ZABOCA —", like the menu's section headings. */
.eyebrow::before, .eyebrow::after { content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 10px; vertical-align: middle; background: currentColor; opacity: .6; }
h1 {
  max-width: 18em;
  margin: 0 auto;
  font-size: clamp(1.6rem, 5.4vw, 2.35rem);
  font-weight: 500;
  line-height: 1.22;
  text-wrap: balance;
}
.note { margin: 10px 0 0; color: var(--muted); }
.big-name { display: none; }

.cta { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 36px; }
.menu-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px 18px 34px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--choc);
  color: var(--sand-light);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 18px 34px -18px rgba(71, 33, 12, .85);
  transition: transform .2s ease, box-shadow .2s ease;
}
.menu-button::after { /* a slow gleam across the button */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  translate: -120% 0; animation: gleam 5s ease-in-out 1.6s infinite;
}
.menu-button:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -18px rgba(71, 33, 12, .9); }
.menu-button:focus-visible, .extra:focus-visible { outline: 3px solid var(--choc); outline-offset: 4px; }
.arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: transform .2s ease; }
.arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.menu-button:hover .arrow { transform: translateX(4px); }
.extra { color: var(--choc-soft); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.footer {
  margin-top: 48px;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .3em;
  text-align: center;
  text-transform: uppercase;
}

/* Coming in: the logo settles, then the words and the button rise in. */
.hero > *, .cta, .footer { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.logo-stage { animation-name: settle; animation-duration: 1s; }
.eyebrow { animation-delay: .25s; }
h1 { animation-delay: .35s; }
.cta { animation-delay: .5s; }
.footer { animation-delay: .7s; }
@keyframes rise { from { opacity: 0; translate: 0 16px; } }
@keyframes settle { from { opacity: 0; scale: .92; } }
[data-template="split"] .logo-stage { animation-name: rise; }
.big-name { animation-delay: .3s; }
@keyframes gleam { 0%, 60% { translate: -120% 0; } 100% { translate: 120% 0; } }

/* ── Side by side: a band of the cafe's dark colour holding the logo; the words beside it (under it on a phone). ── */
[data-template="split"] .awning { display: none; }
[data-template="split"] .home { width: 100%; padding: 0 0 28px; justify-content: flex-start; }
[data-template="split"] .logo-stage {
  display: grid; place-items: center; width: 100%; min-height: 44svh; margin: 0 0 34px; padding: 40px 16px 56px;
  background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255, 255, 255, .1), transparent 70%), var(--choc);
  border-radius: 0 0 50% 50% / 0 0 34px 34px;
}
[data-template="split"] .logo { width: min(210px, 52vw); border-radius: 50%; aspect-ratio: 1; object-fit: contain; padding: 18px; background: var(--cream); box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .8); }
[data-template="split"] .wordmark { color: var(--sand-light); }
[data-template="split"] .wordmark small { color: var(--sand); }
[data-template="split"] .hero > :not(.logo-stage), [data-template="split"] .cta, [data-template="split"] .footer { width: min(100% - 32px, 560px); margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  [data-template="split"] .home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; min-height: 100vh; padding: 0; text-align: left; }
  [data-template="split"] .hero { display: contents; }
  [data-template="split"] .logo-stage { grid-column: 1; grid-row: 1 / -1; height: 100%; min-height: 0; margin: 0; border-radius: 0 48px 48px 0; }
  [data-template="split"] .logo { width: min(300px, 26vw); }
  [data-template="split"] .hero > :not(.logo-stage), [data-template="split"] .cta, [data-template="split"] .footer { grid-column: 2; width: auto; margin: 0 9vw 0 7vw; }
  [data-template="split"] .eyebrow { grid-row: 2; align-self: end; }
  [data-template="split"] .eyebrow::before { display: none; }
  [data-template="split"] .eyebrow::after { width: 40px; }
  [data-template="split"] h1, [data-template="split"] .note { grid-row: 3; max-width: 14em; margin-left: 7vw; font-size: clamp(2rem, 3.2vw, 2.9rem); }
  [data-template="split"] .cta { grid-row: 4; align-self: start; align-items: flex-start; margin-top: 34px; }
  [data-template="split"] .home { position: relative; }
  [data-template="split"] .footer { position: absolute; right: 9vw; bottom: 28px; margin: 0; }
}

/* ── Poster: dark and bold, the cafe's name in big letters inside a thin frame. ── */
[data-template="poster"] body {
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 255, 255, .09), transparent 70%), var(--choc);
  color: var(--sand-light);
}
[data-template="poster"] body::before { /* the frame */
  content: ""; position: fixed; inset: 14px; border: 1px solid rgba(232, 214, 193, .28); border-radius: 22px; pointer-events: none;
}
[data-template="poster"] .awning, [data-template="poster"] .awning::after { background-color: transparent; }
[data-template="poster"] .awning::after { background-image: radial-gradient(circle at 16px 0, var(--sand-light) 14px, transparent 14.5px); opacity: .9; }
[data-template="poster"] .awning { background: var(--sand-light); }
[data-template="poster"] .logo { width: 104px; aspect-ratio: 1; border-radius: 50%; object-fit: contain; padding: 10px; background: var(--cream); box-shadow: none; }
[data-template="poster"] .wordmark { display: none !important; }
[data-template="poster"] .eyebrow { color: var(--sand); }
[data-template="poster"] .big-name {
  display: block; margin: 4px 0 18px; font-size: clamp(3.2rem, 15vw, 8.5rem); font-weight: 700; line-height: .92;
  letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere;
}
[data-template="poster"] h1 { color: var(--sand); font-size: clamp(1.2rem, 4vw, 1.6rem); font-weight: 400; }
[data-template="poster"] .note { color: var(--sand); }
[data-template="poster"] .menu-button { background: var(--sand-light); color: var(--choc); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); }
[data-template="poster"] .menu-button .arrow { background: rgba(71, 33, 12, .1); }
[data-template="poster"] .extra { color: var(--sand); }
[data-template="poster"] .footer { color: var(--sand); }
[data-template="poster"] .menu-button:focus-visible, [data-template="poster"] .extra:focus-visible { outline-color: var(--sand-light); }

/* The manager's numbers (every template): big figures that count up, with a short word under each. */
.stats { display: flex; justify-content: center; margin: 40px auto 0; padding: 0; list-style: none; }
.stats li { display: grid; gap: 4px; min-width: 0; padding: 0 clamp(14px, 4vw, 34px); text-align: center; }
.stats li + li { border-left: 1px solid var(--line, rgba(71, 33, 12, .15)); }
.stats b { font-size: clamp(1.7rem, 6vw, 2.5rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
[data-template="poster"] .stats b { color: var(--sand-light); }
[data-template="poster"] .stats span { color: var(--sand); }
[data-template="split"] .stats { justify-content: flex-start; }
@media (min-width: 900px) { [data-template="split"] .stats { grid-column: 2; grid-row: 4; align-self: end; margin: 0 9vw 90px 7vw; } [data-template="split"] .stats li:first-child { padding-left: 0; } }

/* ── The manager's sections (home.js), under the welcome. Colours follow the template: --card, --ink, --soft. ── */
:root { --card: var(--cream); --ink: var(--choc); --soft: var(--muted); --line: rgba(71, 33, 12, .12); }
[data-template="poster"] { --card: rgba(255, 255, 255, .06); --ink: var(--sand-light); --soft: var(--sand); --line: rgba(232, 214, 193, .16); }
.has-sections .home { flex: none; min-height: 88svh; }
.has-sections > .footer { position: static; width: auto; margin: 0 auto 36px; } /* moved under the sections (home.js), in every template */
.sections { width: min(100% - 32px, 980px); margin: 0 auto; padding-bottom: 40px; color: var(--ink); }
.section { padding: 46px 0; }
.section-title { margin: 0 0 22px; font-size: clamp(1.5rem, 4.4vw, 2rem); font-weight: 600; text-align: center; }
.section-title::before { /* a little awning over every title */
  content: ""; display: block; width: 64px; height: 10px; margin: 0 auto 14px;
  background: radial-gradient(circle at 8px 0, var(--ink) 7px, transparent 7.5px) 0 0 / 16px 10px repeat-x; opacity: .8;
}

/* Hot offer: a warm card with a badge that glows, the price and a countdown. */
.offer-card {
  position: relative; display: grid; overflow: hidden; border-radius: 28px; background: var(--choc); color: var(--sand-light);
  box-shadow: 0 30px 60px -34px rgba(71, 33, 12, .9);
}
[data-template="poster"] .offer-card { background: var(--sand-light); color: var(--choc); }
.offer-card.with-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.offer-photo { position: relative; min-height: 240px; }
.offer-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 6s ease; }
.offer-card:hover .offer-photo img { scale: 1.06; }
.offer-glow { position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 120, .35), transparent 65%); animation: drift 9s ease-in-out infinite; pointer-events: none; }
.offer-copy { position: relative; padding: 34px 30px; }
.badge {
  position: relative; display: inline-block; overflow: hidden; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px;
  background: #e2643a; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(226, 100, 58, .6); animation: badge-glow 2.4s ease-out infinite;
}
.badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); translate: -120% 0; animation: gleam 3.5s ease-in-out 1s infinite; }
.offer-copy h2 { margin: 0; font-size: clamp(1.5rem, 4.6vw, 2.2rem); font-weight: 600; line-height: 1.15; }
.offer-copy p { margin: 10px 0 0; opacity: .85; }
.offer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
.price { font-size: 1.9rem; font-weight: 700; letter-spacing: .01em; }
.countdown { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .86rem; font-weight: 600; }
[data-template="poster"] .countdown { background: rgba(71, 33, 12, .1); }
@keyframes badge-glow { 70% { box-shadow: 0 0 0 12px rgba(226, 100, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 100, 58, 0); } }
@keyframes drift { 50% { translate: -30px 20px; } }

/* Our favourites: dishes from the live menu, a row to swipe on a phone. */
.dishes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.dish {
  display: flex; flex-direction: column; padding: 10px 10px 16px; border-radius: 22px; background: var(--card); color: var(--ink);
  text-decoration: none; box-shadow: 0 16px 30px -24px rgba(71, 33, 12, .8); transition: translate .25s ease, box-shadow .25s ease;
}
.dish:hover { translate: 0 -5px; box-shadow: 0 24px 40px -24px rgba(71, 33, 12, .9); }
.dish-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 12px; overflow: hidden; border-radius: 16px; background: var(--sand-light); }
[data-template="poster"] .dish-photo { background: rgba(255, 255, 255, .08); }
.dish-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; }
.dish:hover .dish-photo img { scale: 1.08; }
.dish-initial { font-size: 2.6rem; font-weight: 700; opacity: .35; }
.dish b { padding: 0 6px; font-size: 1.05rem; font-weight: 600; }
.dish-price { padding: 2px 6px 0; color: var(--soft); font-weight: 500; }

/* Our story: words, big and calm, with a quote mark. */
.story { max-width: 40em; margin: 0 auto; text-align: center; }
.story p { margin: 0 0 14px; font-size: 1.12rem; line-height: 1.65; color: var(--soft); }
.story p:first-of-type::before { content: "“"; display: block; height: .55em; font-size: 4.4rem; line-height: 1; color: var(--ink); opacity: .25; }

/* Opening hours: today stands out, and "Open now" breathes. */
.hours { max-width: 520px; margin: 0 auto; }
.open-now { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -6px 0 18px; font-weight: 600; }
.open-now::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.open-now.is-open { color: #2f8a4c; }
.open-now.is-open::before { background: #2f8a4c; animation: breathe 2s ease-out infinite; }
.open-now.is-closed { color: #b4232c; }
.open-now.is-closed::before { background: #b4232c; }
[data-template="poster"] .open-now.is-open { color: #8fd6a0; }
[data-template="poster"] .open-now.is-open::before { background: #8fd6a0; }
@keyframes breathe { 0% { box-shadow: 0 0 0 0 rgba(47, 138, 76, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(47, 138, 76, 0); } }
.days { margin: 0; padding: 8px 20px; list-style: none; border-radius: 22px; background: var(--card); }
.days li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.days li:last-child { border-bottom: 0; }
.days li.today { font-weight: 700; }
.days li.today span:first-child::after { content: "Today"; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--ink); color: var(--card); font-size: .72rem; vertical-align: 2px; }
[data-template="poster"] .days li.today span:first-child::after { color: var(--choc); }
.hours-note { margin: 12px 0 0; color: var(--soft); font-size: .9rem; text-align: center; }

/* Find us: the address and buttons to get there or get in touch. */
.contact { text-align: center; }
.address { margin: 0; font-size: 1.12rem; line-height: 1.5; }
.phone { margin: 6px 0 0; color: var(--soft); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.pill { padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; text-decoration: none; transition: background .2s ease, color .2s ease, translate .2s ease; }
.pill:hover { background: var(--ink); color: var(--card); translate: 0 -2px; }
[data-template="poster"] .pill:hover { color: var(--choc); }

/* Coming in as they're scrolled to (home.js adds .in). */
.reveal { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; translate: 0 0; }

.preview-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 20; margin: 0; padding: 10px 18px; translate: -50% 0; border-radius: 999px;
  background: #e2643a; color: #fff; font-size: .88rem; font-weight: 600; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); white-space: nowrap;
}

/* "See the menu": a book in the cafe's colour opens on its left edge, its first page comes forward, then the menu. */
.book { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; perspective: 1400px; background: rgba(31, 20, 16, 0); transition: background .3s ease; }
.book.open { background: rgba(31, 20, 16, .45); }
.book-body { position: relative; width: min(64vw, 300px); aspect-ratio: 3 / 4; transform-style: preserve-3d; }
.book.open .book-body { animation: book-in .35s cubic-bezier(.2, .8, .2, 1) both, book-zoom .5s cubic-bezier(.6, 0, .8, .4) 1.15s forwards; }
.book-page, .book-front, .book-back { position: absolute; inset: 0; border-radius: 6px 16px 16px 6px; }
.book-page { display: flex; flex-direction: column; gap: 10px; padding: 18% 14%; background: var(--cream); box-shadow: inset 10px 0 18px -12px rgba(71, 33, 12, .5), 0 30px 60px -20px rgba(0, 0, 0, .6); color: var(--choc); }
.book-title { margin-bottom: 8px; font-size: 1.4rem; font-weight: 700; letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.book-page i { display: block; height: 8px; border-radius: 99px; background: var(--choc); opacity: .14; }
.book-page i:nth-child(odd) { width: 80%; }
.book-cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; }
.book.open .book-cover { animation: book-cover .85s cubic-bezier(.45, .05, .25, 1) .35s forwards; }
.book-front {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 14%; backface-visibility: hidden;
  background: linear-gradient(100deg, rgba(0, 0, 0, .25), transparent 12%), var(--choc); color: var(--sand-light); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.book-front img { width: 70%; border-radius: 8px; }
.book-front b { font-size: 1.6rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.book-front span { font-size: .8rem; font-weight: 600; letter-spacing: .4em; text-transform: uppercase; opacity: .8; }
.book-back { transform: rotateY(180deg); backface-visibility: hidden; background: var(--sand-light); }
@keyframes book-in { from { opacity: 0; scale: .6; rotate: -6deg; } }
@keyframes book-cover { to { transform: rotateY(-165deg); } }
@keyframes book-zoom { to { scale: 4; opacity: 0; } }

@media (min-width: 760px) {
  .offer-copy { padding: 44px 42px; }
}
@media (max-width: 640px) {
  .offer-card.with-photo { grid-template-columns: minmax(0, 1fr); }
  .offer-photo { min-height: 200px; }
  .dishes { display: flex; gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .dishes::-webkit-scrollbar { display: none; }
  .dish { flex: 0 0 62%; scroll-snap-align: start; }
  .section { padding: 34px 0; }
}

@media (max-width: 540px) {
  .home { padding-top: 44px; }
  .menu-button { padding: 16px 24px 16px 28px; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .reveal { opacity: 1; translate: none; }
}

[hidden] { display: none !important; }
/* A cafe without a logo shows its name instead (cafe.js, data-cafe-wordmark). */
.wordmark { display: grid; gap: .25em; justify-items: center; text-align: center; color: var(--choc); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.05; }
.wordmark small { font-size: .36em; font-weight: 500; letter-spacing: .3em; color: var(--choc-soft, var(--muted)); }
.wordmark small:empty { display: none; }
.wordmark { font-size: clamp(2.4rem, 10vw, 3.6rem); padding: 1.2rem 0; }