/* self-hosted latin subsets (variable woff2 from Google Fonts, see /assets/fonts) */
@font-face { font-family:'Familjen Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/familjen-grotesk.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family:'Petrona'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/petrona.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family:'Petrona'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/petrona-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family:'Caveat Brush'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/caveat-brush.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

/* site/assets/site.css — mobile-first.
   Design language per docs/superpowers/specs/2026-08-06-latelve-site-design.md:
   cafe = Counter Fascia (board d1), cakes = Ink & Icing (board d3),
   crossover blocks = Menu Board layout (board d2) in CF colors. */
:root {
  --ink:#141A22; --ink-60:#141A2299; --ink-40:#141A2266;
  --case:#ECEFEC; --case-2:#E2E7E3; --icing:#fff;
  --fascia:#F6D02F; --brick:#9C5C43; --tile:#5F817C;
  --rule:#141A221f; --sect-gap:2.75rem;
  --display:"Familjen Grotesk",system-ui,sans-serif;
  --body-font:"Petrona",Georgia,serif;
  --piped:"Caveat Brush","Familjen Grotesk",cursive;
  --cf-shadow:0 1px 2px #141A2210,0 8px 28px -12px #141A2226;
}
html, body { overflow-x:clip }   /* no sideways pan on phones */
html { background:var(--fascia) }   /* overscroll bounce above the yellow nav stays yellow, not white */
/* Safari ignores the html background for top rubber-band; a fixed panel parked
   one viewport above the page rides down into the bounce gap instead */
body::before { content:""; position:fixed; top:-100vh; left:0; height:100vh; width:100%;
  background:var(--fascia); z-index:11; pointer-events:none }
body { --paper:var(--case); --card:var(--icing); --rad:3px;
  margin:0; font-family:var(--body-font); color:var(--ink); background:var(--paper);
  font-size:1rem; line-height:1.55; -webkit-font-smoothing:antialiased }
body.theme-cake { --paper:var(--icing); --rad:0 }
* { box-sizing:border-box }
[hidden] { display:none !important }   /* beats .btn{display:inline-flex} etc. */
img { max-width:100%; height:auto; display:block }
.about-photo { border-radius:3px; box-shadow:var(--cf-shadow) }
a { color:inherit }
:focus-visible { outline:3px solid var(--tile); outline-offset:2px; border-radius:2px }
.hero-ink :focus-visible, body.theme-cake .footer :focus-visible { outline-color:var(--fascia) }

h1, h2, h3 { margin:0 0 .5em; font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.08 }
body.theme-cake h1, body.theme-cake h2, body.theme-cake h3 { font-weight:700; letter-spacing:-.035em }
.brand, .btn, .price { font-family:var(--display) }

/* ── nav: Counter Fascia on every page ─────────────────────────────── */
.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:1rem;
       padding:2rem 1rem; background:var(--fascia); border-bottom:2px solid var(--ink) }
.brand { font-size:1.6rem; font-weight:700; letter-spacing:-.03em; text-decoration:none; color:var(--ink) }
.brand img { height:96px; width:auto; margin-block:-16px }  /* fills the bar; negative margin keeps bar height unchanged */
/* phone + socials in the bar itself on all sizes — never in the dropdown */
.nav-contact { margin-left:auto; display:inline-flex; align-items:center; gap:.9rem }
.nav-contact a { color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem }
.nav-contact svg { width:19px; height:19px; fill:currentColor; display:block }
.nav-tel span { display:none }   /* mobile: icon only; number shows from 700px */
.nav-toggle { font-size:1.4rem; background:none; border:0; color:var(--ink); cursor:pointer }
.nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--fascia);
             padding:1rem; flex-direction:column; gap:.8rem; border-bottom:2px solid var(--ink) }
.nav-links a { color:var(--ink); text-decoration:none; font-family:var(--display); font-weight:600; font-size:1.05rem;
               border-bottom:2px solid transparent; align-self:flex-start }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn):focus-visible { border-bottom-color:currentColor }
body.nav-open .nav-links { display:flex }
section[id], h3[id] { scroll-margin-top:70px }

/* ── buttons: CF = ink on fascia's terms; cake = yellow CTA (Ink board) ─ */
.btn { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; text-decoration:none;
       font-family:var(--display); font-weight:600; font-size:.9rem; line-height:1.2;
       padding:.55em 1.1em; border-radius:2px;
       border:2px solid var(--ink); background:var(--ink); color:var(--fascia);
       transition:background .15s, color .15s, border-color .15s }
/* no brick hover: buttons keep their resting colors; :focus-visible outline is the affordance */
.btn.ink { background:var(--ink); color:var(--fascia); border-color:var(--ink) }
.btn.ink:hover, .btn.ink:focus-visible { background:transparent; color:var(--ink) }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--ink) }
.btn.ghost:hover, .btn.ghost:focus-visible { background:var(--ink); color:var(--icing) }
body.theme-cake .btn { border-radius:0; background:var(--fascia); color:var(--ink); border-color:var(--ink) }
body.theme-cake .btn:hover, body.theme-cake .btn:focus-visible { background:var(--ink); border-color:var(--ink); color:var(--fascia) }
body.theme-cake .btn.ghost { background:transparent; color:var(--ink) }
body.theme-cake .btn.ghost:hover, body.theme-cake .btn.ghost:focus-visible { background:var(--ink); color:var(--icing) }
body .hero-ink .btn.ghost { color:var(--icing); border-color:#ffffff66 }
body .hero-ink .btn.ghost:hover, body .hero-ink .btn.ghost:focus-visible { background:var(--icing); border-color:var(--icing); color:var(--ink) }
/* nav CTA stays CF (ink block on the fascia) on both sides */
.nav-links a.btn { background:var(--ink); color:var(--fascia); border:2px solid var(--ink); border-radius:2px; align-self:flex-start }
.btns { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:1.1rem }

/* ── fascia strip section heads (cafe) / ink heads (cakes) ─────────── */
.fascia, body.theme-cafe .cat { display:inline-block; background:var(--fascia); color:var(--ink);
  border-block:2px solid var(--ink); padding:.3em .8em; margin:0 0 .8rem;
  font-family:var(--display); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.3 }
h3.cat, h3.fascia, h2.cat.sm { font-size:.8rem; letter-spacing:.16em }
h2.fascia { font-size:1.05rem }
h1.fascia { font-size:1.2rem }   /* /menu/ page title wears the fascia band */
body.theme-cake .cat { display:inline-block; background:none; border:0; border-bottom:3px solid var(--fascia);
  padding:0 0 .15em; margin:0 0 .8rem; font-family:var(--display); font-weight:700;
  letter-spacing:-.03em; text-transform:none; font-size:1.35rem }
.eyebrow { font-family:var(--display); font-size:.66rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brick); margin:0 0 .6rem }

/* ── cafe hero: full-bleed dish; panel below it on phones, over it on desktop ─ */
/* gruff-goat-style hero: white type straight on the photo, no card */
.hero-cf { position:relative; display:flex; align-items:center; min-height:52svh }
.hero-cf .hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero-cf::after { content:""; position:absolute; inset:0;
  background:linear-gradient(20deg, #141A2280 0%, #141A2233 45%, transparent 75%) }
.hero-text { position:relative; z-index:1; color:#fff; padding:clamp(1.2rem,5vw,4rem);
  max-width:44rem; text-shadow:0 1px 2px #141A22, 0 2px 20px #141A22cc, 0 0 40px #141A2299 }
.hero-text em { font-style:italic; font-family:var(--body-font) }
.hero-text .amp { font-family:var(--body-font); font-style:italic }
@media (min-width:760px) { .hero-cf { min-height:min(70svh, 40rem) } }   /* object-fit:cover crops, never squashes */
.hero-cf h1 { font-size:clamp(2.1rem, 1.3rem + 4vw, 3.6rem); line-height:1.05; margin:0 }
.h1-loc { display:block; margin-top:.5rem; font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:#fff; opacity:.92 }
.btn-lg { font-size:1.2rem; padding:.75em 1.7em }
section#menu { margin-top:var(--sect-gap) }
/* shared with cakes hero (hero-ink) */
.hero-grid { display:grid; gap:clamp(1.1rem,3vw,2rem); align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); padding:clamp(1.1rem,3vw,2rem) }
@media (max-width:760px) { .hero-grid { grid-template-columns:1fr } }
.hero-grid figure { margin:0; border-radius:var(--rad); overflow:hidden }
.hero-grid figure img { aspect-ratio:4/3; object-fit:cover; width:100% }
.special { font-family:var(--piped); font-size:clamp(1.15rem, 1rem + .6vw, 1.4rem); color:var(--brick);
  rotate:-1.2deg; margin:.9rem 0 0; display:inline-block; line-height:1.15 }

/* ── cakes hero: Ink & Icing band ──────────────────────────────────── */
.hero-ink { background:var(--ink); color:var(--icing); padding:clamp(1.25rem,4vw,2.5rem) 1rem 0 }
.hero-ink .wrap { max-width:1100px; margin-inline:auto }
.hero-ink h1 { color:var(--icing); font-weight:700; letter-spacing:-.04em;
  font-size:clamp(1.8rem, 1.15rem + 2.7vw, 3rem); margin:0 }
.hero-ink .eyebrow { color:var(--fascia) }
.hero-ink .lede { color:#FFFFFFA8; font-size:1rem; line-height:1.55; max-width:38ch; margin:.75rem 0 0 }
.hero-ink .hero-grid { padding:0 0 clamp(1.1rem,3vw,2rem) }
.hero-ink figure { border-radius:0 }
/* portrait hero photo (3:4): square crop keeps the whole cake in frame */
.hero-ink .hero-grid figure img { aspect-ratio:1 }
.ul { position:relative; display:inline-block; white-space:nowrap }
.ul svg { position:absolute; left:0; right:0; bottom:-.22em; width:100%; height:.34em;
  overflow:visible; pointer-events:none }
.ul path { fill:none; stroke:var(--fascia); stroke-width:7; stroke-linecap:round }
.ink-foot { display:flex; gap:1rem 2rem; flex-wrap:wrap; justify-content:space-between;
  max-width:1100px; margin-inline:auto; padding:.9rem 0 1.1rem; border-top:1px solid #FFFFFF26;
  color:#FFFFFFB0; font-size:.86rem }
.ink-foot b { color:var(--fascia); font-family:var(--display); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; display:block }

/* ── product grids & cards ─────────────────────────────────────────── */
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  padding:1rem; max-width:1160px; margin-inline:auto }
body.theme-cake .grid { gap:1.3rem; grid-template-columns:repeat(auto-fill, minmax(172px, 1fr)) }
.cat-head { max-width:1160px; margin-inline:auto; padding:0 1rem }
.card { background:var(--card); border-radius:3px; overflow:hidden; box-shadow:var(--cf-shadow);
  display:flex; flex-direction:column }
body.theme-cake .card { border:2px solid var(--ink); border-radius:0; box-shadow:5px 5px 0 var(--ink) }
.card img { aspect-ratio:4/3; object-fit:cover; width:100% }
body.theme-cake .card img { aspect-ratio:1 }
.card .pad { padding:.7rem .8rem .85rem; display:flex; flex-direction:column; gap:.3rem; flex:1 }
.card .pad > div:first-child { font-family:var(--display); font-weight:600; letter-spacing:-.015em; line-height:1.2 }
.card small { font-family:var(--body-font); color:var(--ink-60); line-height:1.4; flex:1 }
.price { font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink);
  margin-top:auto; padding-top:.35rem }
body.theme-cake .price { font-size:1.2rem }
.card .btn { align-self:flex-start; font-size:.8rem; padding:.4em .9em; margin-top:.35rem }

/* ── cafe menu: featured tier + inline expandable rows ─────────────── */
.grid.featured { grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)) }  /* auto-fit: 3 cards sit balanced 3-across */
.grid.featured .card small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.counter-note { font-family:var(--display); font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brick); margin:-.5rem 0 0 }
.drinks-note { margin:1.1rem auto 0 }   /* standalone line under the favourites grid */
/* ── menu page — lokanta (board 05 candidate 1, client-approved) ────── */
/* Tiles flex to fill each row on phones; ≥900px they shrink to content
   and wrap into the well-stocked counter. Same rules, both widths. */
.menu-lok .shelf { max-width:1160px; margin:1.3rem auto 0; padding:0 1rem }
.menu-lok .strip { display:block; background:var(--fascia); color:var(--ink);
  border-block:2px solid var(--ink); padding:.3em .8em; margin:0;
  font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; line-height:1.3 }
.menu-lok .strip .ct { float:right; font-family:var(--body-font); font-style:italic;
  text-transform:none; letter-spacing:0; font-weight:400; font-size:.86em; color:var(--ink-60) }
.menu-lok .tiles { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.65rem }
.menu-lok .tile { flex:1 1 auto; background:var(--icing); border:1px solid var(--rule);
  border-radius:3px; box-shadow:var(--cf-shadow) }
.menu-lok .tile-line { display:flex; align-items:center; gap:.6rem; min-height:3.1rem;
  padding:.35rem .4rem .35rem .7rem }   /* 3.1rem ≈ 50px — tap target ≥44px */
.menu-lok .nm { font-family:var(--display); font-weight:600; font-size:.87rem;
  letter-spacing:-.01em; line-height:1.2 }
.menu-lok .pr { margin-left:auto; color:#D9B412;   /* fascia deepened toward amber: gold-on-white needs it, no strokes */
  padding:.3em .1em; font-family:var(--display); font-weight:700; font-size:.95rem;
  font-variant-numeric:tabular-nums; letter-spacing:.01em; white-space:nowrap }
/* featured: house picks ruled in ink, photo thumbs rationed to these only */
.menu-lok .tile.feat { flex-basis:100%; border:2px solid var(--ink) }
.menu-lok .tile.feat .tile-line { padding-left:.4rem }
.menu-lok .tile.feat img { width:44px; height:44px; object-fit:cover; border-radius:2px;
  border:1px solid var(--rule) }
/* tiles with a description expand on tap; desc also sits in the title attr */
.menu-lok details.tile summary { cursor:pointer; list-style:none }
.menu-lok details.tile summary::-webkit-details-marker { display:none }
.menu-lok details.tile .ds { margin:0; padding:0 .7rem .65rem; color:var(--ink-60);
  font-size:.9rem; line-height:1.45; max-width:52ch }
@media (min-width:900px) {
  .menu-lok .tile { flex:0 1 auto }
  .menu-lok .tile.feat { flex-basis:auto }
  .menu-lok .pr { color:var(--ink) }   /* gold-on-white reads thin at desktop sizes */
}

/* film strips: continuous photo marquee, uniform square tiles; two identical halves, -50% loop */
.strip { display:flex; width:max-content; animation:strip 45s linear infinite }
.strip img { width:240px; height:240px; object-fit:cover; flex:none; margin-right:.6rem; border-radius:3px }
.strip.rtl { animation-direction:reverse; animation-duration:75s }  /* 5 tiles vs 3: longer track, same px/s */
.strip-wrap:hover .strip { animation-play-state:paused }
@keyframes strip { to { translate:-50% 0 } }
@media (prefers-reduced-motion:reduce) { .strip { animation:none } }

/* scroll reveal — .rv-on set by JS only, so no-JS/reduced-motion never hide content */
.rv-on [data-rv] { opacity:0; translate:0 18px; transition:opacity .55s ease-out, translate .55s ease-out }
.rv-on [data-rv].rv-in { opacity:1; translate:0 0 }

/* menu hub: stacked full-width buttons in the standard three variants */
.menu-acts { max-width:19rem; margin:2rem auto 0; padding-bottom:1rem; display:grid; gap:.75rem }
.menu-acts .btn { justify-content:center }
.menu-acts .special { margin:.3rem 0 0 }

/* signature tiles band (.sig) shelved 2026-08-06 with its markup in index.php —
   restore both from the "style: shelf signature tiles..." commit */

/* ── story band: the shopfront and three sentences ─────────────────── */
.story { max-width:1160px; margin:var(--sect-gap) auto 0; padding:0 1rem; display:grid;
  gap:1.25rem; align-items:center }
.story figure { margin:0; border-radius:3px; overflow:hidden; box-shadow:var(--cf-shadow) }
.story h2 { font-size:clamp(1.45rem, 1.15rem + 1.4vw, 2.1rem) }
.story p { margin:.4rem 0 0; max-width:52ch }
@media (min-width:800px) { .story { grid-template-columns:1.2fr 1fr; gap:clamp(1.5rem,4vw,3rem) } }

@media (min-width:800px) { .story-m { display:none } }   /* phone-only second photo under the story text */
/* .mirror flips the band: text left, photo right — alternates with plain .story */
@media (min-width:800px) { .story.mirror { grid-template-columns:1fr 1.2fr } }
/* mobile: img always above text, whatever the desktop side */
@media (max-width:799.98px) { .story.mirror figure, .xover.duo figure { order:-1 } }

/* ── reviews strip: one big fascia band, ink Petrona pull-quotes ───── */
.reviews { position:relative; margin-top:var(--sect-gap); background:var(--fascia); color:var(--ink);
  border-block:2px solid var(--ink); padding:2rem 1rem 2.4rem }
.rev-head { text-align:center; font-size:clamp(1.3rem, 1.1rem + 1vw, 1.8rem); margin:0 0 1.4rem }
.stars { color:var(--fascia); letter-spacing:.08em }
.rating-link { color:inherit; text-decoration:none }
.hero-rating { margin:.9rem 0 0; font-family:var(--display); font-weight:600; font-size:.9rem }
.hero-text .btns { margin-top:1.2rem }
.hero-text .btn { text-shadow:none }   /* the h1 glow must not bleed into buttons */
.btn.gold { background:var(--fascia); color:var(--ink); border-color:var(--ink) }
.btn.gold:hover, .btn.gold:focus-visible { background:var(--ink); color:var(--fascia); border-color:var(--ink) }
.hero-rating .stars { text-shadow:0 1px 3px #141A2299 }
/* phones: scroll-snap carousel, one quote per swipe; ≥800px: the 3-up grid.
   ponytail: no position dots — CSS-only dots need JS to track scroll, swipe affordance is enough */
.reviews .wrap { max-width:1160px; margin-inline:auto; display:flex; gap:1.5rem;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; scrollbar-width:none; padding-bottom:.25rem }
.reviews .wrap::-webkit-scrollbar { display:none }
.reviews blockquote { margin:0; flex:0 0 100%; scroll-snap-align:center;
  display:flex; flex-direction:column;   /* equal-height slides, cite pinned to the bottom */
  font-family:var(--body-font); font-style:italic;
  font-size:clamp(1.15rem, 1.05rem + .6vw, 1.45rem); line-height:1.35; letter-spacing:-.01em }
.reviews blockquote p { margin:0 }
.reviews cite { display:block; margin-top:auto; padding-top:.7rem; font-style:normal; font-family:var(--display);
  font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase }
/* swipe cue: thin ink arrow level with the cite line; flips back on the last slide */
.rev-arrow { position:absolute; right:1.1rem; bottom:2.55rem; color:var(--ink); transition:transform .25s }
.reviews.at-end .rev-arrow { transform:scaleX(-1) }
@media (min-width:800px) { .reviews .wrap { display:grid; grid-template-columns:repeat(3,1fr);
  gap:2.5rem; overflow:visible; scroll-snap-type:none }
  .rev-arrow { display:none } }

/* ── visit band: the room, the window seat, the address ────────────── */
.visit { max-width:1160px; margin:var(--sect-gap) auto 0; padding:0 1rem; display:grid; gap:1rem }
.visit figure { margin:0; border-radius:3px; overflow:hidden; box-shadow:var(--cf-shadow) }
.visit img { width:100%; height:100%; object-fit:cover }
.v-side { display:grid; gap:1rem; align-content:start }
.v-side figure img { aspect-ratio:16/9 }
.v-card h2 { font-size:clamp(1.35rem, 1.1rem + 1vw, 1.7rem); margin-bottom:.25rem }
.addr { margin:.2rem 0 0 }
@media (min-width:800px) {
  .visit { grid-template-columns:1fr }
  .v-side { grid-template-columns:1fr 1fr }
}

/* ── crossover blocks: Menu Board layout, CF colors + fonts ────────── */
.xover { padding:2.25rem 1rem; max-width:660px; margin-inline:auto }
/* cafe landing variant: photo-first, card beside the counter shot */
.xover.duo { max-width:1160px; display:grid; gap:1rem; align-items:center }
.xover.duo figure { margin:0; border-radius:3px; overflow:hidden; box-shadow:var(--cf-shadow) }
.xover.duo img { width:100%; aspect-ratio:16/10; object-fit:cover }
@media (min-width:800px) { .xover.duo { grid-template-columns:1.3fr 1fr; gap:clamp(1.25rem,3vw,2.5rem) } }
.xover .side { background:var(--icing); border:1px solid var(--rule); border-left:4px solid var(--fascia);
  border-radius:2px; padding:1.15rem 1.3rem 1.3rem; box-shadow:var(--cf-shadow) }
.xover .side.cafe-side { border-left-color:var(--brick) }
.xover .tag { font-family:var(--display); font-size:.64rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brick); display:block; margin-bottom:.4rem }
.xover h2 { font-size:1.35rem; font-weight:600; letter-spacing:-.03em; margin-bottom:.35rem }
.xover p { margin:.5rem 0 0; color:var(--ink-60); font-size:.95rem }
/* closing cakes crossover: own section — contrast paper, fascia-ruled top edge,
   photo RIGHT (mirrors the visit band above, whose main photo sits left) */
.xover-close { margin-top:3.5rem; background:var(--case-2); border-bottom:1px solid var(--rule) }
.xover-close::before { content:""; display:block; height:10px;
  background:var(--fascia); border-block:2px solid var(--ink) }
.xover-close .duo { padding-block:2.5rem 3rem }
@media (min-width:800px) { .xover-close .duo { grid-template-columns:1fr 1.3fr } }
/* cakes page closing crossover: same detached band, Ink & Icing skin, photo LEFT (mirrors cafe) */
body.theme-cake .xover-close .side { border:2px solid var(--ink); border-left:4px solid var(--brick);
  border-radius:0; box-shadow:5px 5px 0 var(--ink) }
body.theme-cake .xover-close figure { border-radius:0 }
@media (min-width:800px) { body.theme-cake .xover-close .duo { grid-template-columns:1.3fr 1fr } }

/* ── forms ─────────────────────────────────────────────────────────── */
.field { margin:0 0 1rem }
.field label { display:block; font-family:var(--display); font-size:.68rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-60) }
.field input, .field select, .field textarea { display:block; width:100%; min-width:0; max-width:100%;
  margin-top:.3rem; padding:.55em .8em; font-size:1rem; font-family:var(--body-font); color:var(--ink);
  letter-spacing:normal; text-transform:none;
  background:var(--icing); border:2px solid var(--ink); border-radius:0 }
/* iOS/Android date+time inputs size to their intrinsic content; force them into the field grid */
.field input[type=date], .field input[type=time] { width:100%; min-width:0;
  -webkit-appearance:none; appearance:none; display:block; min-height:44px }
.field textarea { resize:vertical }
.err { color:#b00020; font-family:var(--display); font-size:.85rem }
/* booking form wears the checkout card */
.form-card { background:var(--icing); border:2px solid var(--ink); border-radius:0;
  padding:1.25rem; box-shadow:var(--cf-shadow) }
.form-card .btn, dialog .btn { border-radius:0 }   /* crisp square look on forms everywhere */

/* ── dismiss X (dialog + confirmation box): 44px hit target ────────── */
.dlg-x { position:absolute; top:.35rem; right:.35rem; width:44px; height:44px;
  display:grid; place-items:center; background:none; border:0; color:var(--ink);
  font-family:var(--display); font-size:1.5rem; line-height:1; cursor:pointer }

/* ── order/booking received: a boxed moment ────────────────────────── */
.done-card { position:relative; width:min(26em, calc(100% - 2rem)); margin:2.5rem auto;
  padding:2rem 1.25rem 1.5rem; background:var(--icing); border:2px solid var(--ink);
  border-radius:var(--rad); text-align:center; box-shadow:var(--cf-shadow) }
.done-card::before { content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:var(--fascia); border-bottom:2px solid var(--ink) }
.done-card h2 { margin:0 auto .5rem; padding-bottom:.5rem; border-bottom:1px solid var(--rule) }
.done-card p { margin:.6rem 0 0 }
body.theme-cake .done-card { border-radius:0; box-shadow:5px 5px 0 var(--ink) }

/* ── basket & checkout dialog ──────────────────────────────────────── */
.basket-fab { position:fixed; right:1rem; bottom:1rem; z-index:20; font-size:1rem;
  box-shadow:0 8px 28px -12px #141A2266 }
body.theme-cake .basket-fab { box-shadow:4px 4px 0 var(--ink) }
dialog { max-width:26em; width:92vw; padding:1rem; background:var(--icing); color:var(--ink);
  border:2px solid var(--ink); border-radius:0 }
body.theme-cake dialog { border-radius:0; box-shadow:5px 5px 0 var(--ink) }
dialog::backdrop { background:#141A2299 }
dialog h2 { font-size:1.25rem }
dialog ul { padding-left:1.1rem; font-size:.95rem }
dialog li button { font-family:var(--display); font-size:.72rem; border:1px solid var(--ink-40);
  background:none; border-radius:2px; cursor:pointer; margin-left:.3rem }

/* ── footer: CF band on cafe, ink band on cakes ────────────────────── */
.footer { margin-top:2.5rem; padding:1.5rem 1rem 2rem; background:var(--case-2);
  border-top:2px solid var(--ink); font-size:.92rem }
.footer strong { font-family:var(--display); letter-spacing:-.02em }
body.theme-cake .footer { background:var(--ink); color:#FFFFFFB0 }
body.theme-cake .footer strong { color:var(--fascia) }
body.theme-cake .footer a { color:var(--icing) }

/* ── /order/: kiosk — segment + search toolbar, category rail (desktop) / chips (mobile) ── */
/* menu h1: one compact line — ranking/AI need a heading, the kiosk UI doesn't need a banner */
.ok-h1 { font-size:1.05rem; margin:.7rem 1rem .5rem; line-height:1.25; font-family:var(--display) }
.ok-h1 span { display:block; font-size:.72rem; font-weight:500; color:var(--ink-60); letter-spacing:.02em }
.ok-top { position:sticky; top:var(--ok-nav,61px); z-index:9; display:flex; gap:.7rem; align-items:center;
  flex-wrap:wrap; padding:.6rem 1rem; background:var(--fascia); border-bottom:2px solid var(--ink) }
.ok-seg { display:flex }
.ok-seg button { font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--ink);
  background:none; border:2px solid var(--ink); padding:0 1.2em; height:2.5rem; cursor:pointer }
.ok-seg button + button { border-left-width:0 }
.ok-seg button.on { background:var(--ink); color:var(--fascia) }
.ok-search { font:inherit; font-family:var(--display); border:2px solid var(--ink); border-radius:2px;
  padding:0 .8em; height:2.5rem; flex:1; min-width:140px; background:var(--icing); color:var(--ink) }
.ok-search:focus-visible { outline-color:var(--ink) }   /* ink, not the tile teal — reads blue on fascia */
.ok-chips { display:flex; gap:.45rem; overflow-x:auto; padding:.6rem .8rem; position:sticky; z-index:8;
  top:var(--ok-top,105px); background:var(--paper); scrollbar-width:none; border-bottom:1px solid var(--rule) }
.ok-chips::-webkit-scrollbar { display:none }
.ok-chips a { flex:none; font-family:var(--display); font-weight:600; font-size:.8rem; color:var(--ink);
  text-decoration:none; border:2px solid var(--ink); border-radius:999px; padding:.32em .9em; background:var(--card) }
.ok-shell { max-width:1280px; margin:0 auto; padding:0 1rem 3rem }
.ok-rail { display:none }
.ok-note { font-style:italic; margin:1rem 0 0 }
.ok-main h2.cat { margin-top:2.2rem }   /* air above the category bands (outranks the body.theme .cat margin reset) */
.ok-lead { font-family:var(--display); font-size:.85rem; font-weight:600; color:var(--brick); margin:-.3rem 0 .8rem }
.ok-main section[id] { scroll-margin-top:calc(var(--ok-top,105px) + 3.4rem) }  /* clear toolbar + chips */
.ok-grid { display:grid; gap:.9rem; grid-template-columns:1fr }
@media (min-width:560px) { .ok-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) } }
.ok-row { position:relative; display:flex; align-items:center; background:var(--card); border:1px solid var(--rule) }
.ok-row img { width:88px; height:88px; object-fit:cover; flex:none }
.ok-pad { padding:.55rem 3rem .55rem .8rem; font-family:var(--display); min-width:0 }
.ok-nm { font-weight:600; font-size:.9rem; line-height:1.2 }
.ok-pad .price { margin-top:.15rem }
/* one pill: −/qty/+ share the border, collapses to a round + at qty 0 */
.ok-step { position:absolute; right:.5rem; bottom:.5rem; display:flex; align-items:stretch;
  height:30px; border:2px solid var(--ink); border-radius:15px; background:var(--fascia); overflow:hidden }
.ok-add, .ok-dec { display:flex; align-items:center; justify-content:center; width:28px;
  border:0; padding:0; background:transparent; color:var(--ink);
  font:700 1.05rem/1 var(--display); cursor:pointer }
.ok-add:hover, .ok-add:focus-visible, .ok-dec:hover, .ok-dec:focus-visible { background:var(--ink); color:var(--fascia) }
.ok-qty { display:flex; align-items:center; justify-content:center; min-width:1.1em;
  font-family:var(--display); font-weight:700; font-size:.85rem }
.ok-step[data-q="0"] .ok-dec, .ok-step[data-q="0"] .ok-qty { display:none }
.ok-empty { display:none }
body[data-seg=food] .is-cake,   body[data-seg=food] .is-drink,
body[data-seg=cakes] .is-food,  body[data-seg=cakes] .is-drink,
body[data-seg=drinks] .is-food, body[data-seg=drinks] .is-cake { display:none }
/* tap-to-open ingredients: dotted cue on names that have one */
.ok-nm.has-ds { border-bottom:2px dotted var(--ink); display:inline-block; cursor:pointer }
.ok-ds { display:none; font-size:.82rem; line-height:1.45; margin:.35rem 0 0; color:var(--ink);
  opacity:.75 }
.ok-row[onclick] { cursor:pointer }   /* whole tile opens the description; stepper clicks excluded */
.ok-row.open .ok-ds { display:block }
.ok-row.open { align-items:flex-start }
.ok-row.open img { align-self:center }

@media (min-width:700px) {
  .nav-toggle { display:none }
  .nav-links { display:flex; position:static; flex-direction:row; margin-left:auto;
    align-items:center; border:0; padding:0 }
  .nav-links a, .nav-links a.btn { align-self:auto }
  .brand img { height:60px }
  /* desktop: contact cluster sits left beside the logo, page links push right */
  .nav-contact { margin-left:0; gap:1rem }
  .nav-tel span { display:inline; font-family:var(--display); font-weight:600; font-size:1.05rem }
  section[id], h3[id] { scroll-margin-top:92px }   /* taller nav (60px logo) */
}
@media (min-width:900px) {
  .ok-chips { display:none }
  .ok-shell { display:grid; grid-template-columns:220px 1fr; gap:1.6rem }
  .ok-rail { display:block; position:sticky; top:var(--ok-top,105px); align-self:start;
    max-height:calc(100svh - var(--ok-top,105px)); overflow:auto; padding:1rem 0; font-family:var(--display) }
  .ok-rail .rh { display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brick); margin:1rem 0 .3rem }
  .ok-rail a { display:block; color:var(--ink); text-decoration:none; padding:.3em .6em; font-weight:600;
    font-size:.86rem; border-left:3px solid transparent }
  .ok-rail a:hover, .ok-rail a:focus-visible { border-left-color:var(--fascia); background:var(--card) }
  .ok-rail a span { color:var(--ink-40); font-weight:400 }
  .ok-main section[id] { scroll-margin-top:calc(var(--ok-top,105px) + .8rem) }
}
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important }
  html { scroll-behavior:auto }
}

/* cakes: hard break between the custom half and the counter shop — full-bleed ink band */
.counter-band { background:var(--ink); color:var(--icing); text-align:center;
  margin-top:var(--sect-gap); margin-bottom:2rem; padding:2.4rem 1rem 2.2rem;
  border-block:3px solid var(--fascia) }
.counter-band h2 { color:var(--fascia); margin-bottom:.3em; font-size:clamp(1.5rem,4vw,2rem) }
.counter-band p { margin:0; font-style:italic; color:#ffffffcc }

/* baked-for-real wall: always two-up on phones (default auto-fill gives 1 col at 360px);
   body.theme-cake .grid outweighs .grid.bfr, so match its specificity */
body.theme-cake .grid.bfr { grid-template-columns:repeat(2, 1fr) }
@media (min-width:760px) { body.theme-cake .grid.bfr { grid-template-columns:repeat(3, 1fr) } }

/* cakes story band: small round family photo above the heading */
.story-face { width:7rem; height:7rem; object-fit:cover; border-radius:50%;
  margin:0 auto 1rem; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--fascia) }

/* slideshow: [data-slides] box keeps its first image in place; site.js stacks .slide imgs on top and
   pushes them in from the right (.on) / out to the left (.out). Parked slides wait off-screen right. */
[data-slides] { position:relative; overflow:hidden }
[data-slides] .slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform:translateX(100%); transition:transform .6s cubic-bezier(.4,0,.2,1) }
[data-slides] .slide.on { transform:none }
[data-slides] .slide.out { transform:translateX(-100%) }
/* desktop hero is ~2.5:1 — portrait shots (cakes) would crop to a sliver, so frame them whole at the right */
/* desktop hero is ~2.3:1 — cover would crop every slide to a sliver, so frame them whole on the right,
   dark backdrop under the headline; slower push than phone */
@media (min-width:760px) { .hero-cf .story-m { display:none }   /* desktop base is hero-wide already */
  .hero-cf .slide { object-fit:contain; object-position:85% 50%; background:#141A22; transition-duration:1.1s } }
.slide-cap { position:absolute; right:1rem; bottom:1rem; z-index:1; margin:0; max-width:70%;
  background:#141A22cc; color:#fff; font-family:var(--display); font-size:.85rem; font-weight:600;
  padding:.45em .85em; border-radius:3px; opacity:0; transition:opacity .6s; pointer-events:none }
.slide-cap.on { opacity:1 }