/* Peltier Crêpes & Galettes — palette and shapes per Magi's branding instructions (Sep 2026) */
:root {
  --y-100: #FEF3C2;   /* primary, light */
  --y-200: #FEEA92;   /* primary, butter */
  --y-500: #FFD000;   /* primary, strong */
  --y-600: #FFD105;   /* primary, strong (buttons) */
  --red:   #D42A2A;   /* secondary: the logo red (used in the logo itself) */
  --wine:  #783031;   /* the wagon red, for headings and accents on the site */
  --green: #75957A;   /* secondary: green from the logo ("happening now" dot) */
  --wa:    #25D366;   /* WhatsApp's own green, only on the WhatsApp buttons */
  --base:  #FBFAF5;   /* base background */
  --ink: #2B2B2B;
  --ink-strong: #1A1A1A;
  --ink-soft: #5E574C;
  --white: #FFFFFF;

  --display: 'Oleo Script', 'Brush Script MT', cursive;
  --body: 'Abhaya Libre', Georgia, 'Times New Roman', serif;

  --wrap: 1120px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --r-card: 24px;
  --r-pill: 999px;
  --top-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;           /* 17px, never below 16 */
  line-height: 1.6;
  color: var(--ink);
  background: var(--base);
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--wine); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; }
h1, h2 { font-family: var(--display); letter-spacing: .005em; color: var(--wine); }
h1 { font-size: clamp(2.2rem, 7vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: .6rem; }
h3 { font-family: var(--body); font-size: 1.35rem; }
p { margin: 0 0 1rem; max-width: 62ch; }
address { font-style: normal; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.kicker { font-weight: 700; color: var(--wine); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; margin: 0 0 .35rem; }
.kicker-name { text-transform: none; } /* "Oui, Oui!" keeps its own casing */

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--white); padding: .6rem 1rem; border-radius: var(--r-pill);
}
.skip:focus { top: 1rem; }

/* Buttons: soft pills. Yellow = go somewhere, green = contact, outline = secondary. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.5rem;
  font: 700 1rem var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-pill); border: 2px solid transparent;
  transition: background-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--y-600); color: var(--ink); border-color: var(--y-600); }
.btn-primary:hover { background: var(--y-500); border-color: var(--y-500); box-shadow: 0 6px 16px rgba(120, 48, 49, .16); }
.btn-arrow::after { content: '\2192'; display: inline-block; transition: transform .2s ease; }
.btn-arrow:hover::after { transform: translateX(4px); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--y-200); }
.btn-wa { background: var(--wa); color: var(--ink-strong); border-color: var(--wa); }
.btn-wa:hover { box-shadow: 0 3px 0 rgba(0, 0, 0, .14); }
.btn-white { background: var(--white); color: var(--ink); border-color: var(--white); box-shadow: 0 2px 10px rgba(120, 48, 49, .12); }
.btn-white:hover { box-shadow: 0 6px 16px rgba(120, 48, 49, .16); }
.btn-small { min-height: 40px; padding: .4rem 1rem; font-size: .95rem; }

/* Photo frames: rounded, with a butter ring. Ovals for portraits. */
.frame { border-radius: var(--r-card); overflow: hidden; background: var(--y-200); padding: 6px; }
.frame img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-card) - 6px); }
.frame-oval { border-radius: 50%; padding: 7px; }
.frame-oval img { border-radius: 50%; aspect-ratio: 2 / 3; }

/* Header: yellow, sticky */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--y-200);
  border-bottom: 3px solid var(--y-500);
  transition: box-shadow .25s ease;
}
body.scrolled .top { box-shadow: 0 6px 24px rgba(120, 48, 49, .12); }
.top-inner { display: flex; align-items: center; gap: .75rem; min-height: var(--top-h); }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { border-radius: 50%; }
.wa span { display: none; }

/* Navigation: inline on desktop (links left, language + WhatsApp right);
   on phones a full-screen panel behind the burger, like the Figma "burger menu" frame. */
.menu > a { color: var(--ink); text-decoration: none; font-weight: 600; position: relative; }
.menu > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--wine); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.menu > a:hover::after, .menu > a:focus-visible::after { transform: scaleX(1); }
.menu-tools { display: flex; align-items: center; gap: .75rem; }
.burger { /* crêpes to open, crossed rozells to close */
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--ink);
}
.burger svg { width: 46px; height: 46px; display: block; }
.burger .ico-rake { display: none; width: 30px; height: 30px; }
body.nav-open .burger .ico-crepes { display: none; }
body.nav-open .burger .ico-rake { display: block; }
@media (max-width: 899px) {
  .menu {
    position: fixed; inset: calc(var(--top-h) + 3px) 0 0 0; z-index: 40;
    display: flex; flex-direction: column; gap: .25rem;
    padding: 1.25rem var(--gutter) 2rem; background: var(--y-100); overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease;
  }
  body.nav-open .menu { transform: none; }
  @media (prefers-reduced-motion: reduce) { .menu { transition: none; } }
  .menu > a { font: 700 1.6rem var(--display); color: var(--wine); padding: .6rem 0; border-bottom: 1px solid var(--y-200); }
  .menu-tools { margin-top: 1.5rem; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .menu-tools .wa { font-size: 1rem; min-height: 48px; padding: .7rem 1.5rem; }
  .menu-tools .wa span { display: inline; }
  .menu-tools .lang { display: none; } /* the top bar has the language switch on phones */
  body.nav-open { overflow: hidden; }
}
@media (min-width: 900px) {
  :root { --top-h: 64px; }
  .top-inner { gap: 1rem; }
  .menu { display: flex; align-items: center; flex: 1; gap: 1.6rem; margin-left: 1.5rem; }
  .menu-tools { margin-left: auto; }
  .wa span { display: inline; }
  .burger { display: none; }
}

.lang { display: inline-flex; border: 2px solid var(--y-500); border-radius: var(--r-pill); padding: 2px; background: var(--white); }
.lang button {
  font: 700 .85rem var(--body); color: var(--ink-soft); background: transparent; border: 0;
  padding: .3rem .5rem; border-radius: var(--r-pill); cursor: pointer; min-width: 34px; min-height: 32px;
}
.lang button[aria-pressed="true"] { background: var(--y-600); color: var(--ink); }
.lang button:hover { color: var(--ink); }
.lang-top { margin-left: auto; } .lang-top + .burger { margin-left: 0; } /* phones: NL/EN/FR in the top bar, right next to the burger */
@media (min-width: 900px) { .lang-top { display: none; } } /* desktop has the switch in the menu */

/* Landing: a headline and two halves that together fill the first screen (split-screen hero).
   Height = small viewport (100svh: stable while the phone's address bar is showing; 100vh fallback),
   minus the sticky header. Phones stack the halves; from 720px they sit side by side and the
   hovered half widens. Photos are absolutely positioned so they fill whatever height flex gives. */
.hero {
  background: var(--base); padding: .8rem 0 .8rem;
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--top-h) - 3px); min-height: calc(100svh - var(--top-h) - 3px);
}
.hero-head { text-align: center; margin-bottom: .7rem; }
.hero h1 { font-size: clamp(1.75rem, 8.6vw, 4rem); line-height: 1.05; }
.tagline { margin: .25rem auto 0; font-weight: 600; max-width: 62ch; font-size: clamp(.95rem, .4vw + .85rem, 1.2rem); line-height: 1.4; }
.tagline em { font-style: italic; }
.hero-cta { margin-top: .6rem; }
.halves { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 0 var(--gutter); min-height: 0; }
.half {
  flex: 1 1 50%; min-height: 170px;
  position: relative; display: block; overflow: hidden; border-radius: var(--r-card);
  background: var(--y-100); text-decoration: none; color: var(--white);
  transition: flex-basis 1.1s cubic-bezier(.4, 0, .2, 1), transform 1.1s cubic-bezier(.4, 0, .2, 1);
}
.half img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%; /* short halves keep the sign and the beret, lose ground */
  border-radius: var(--r-card); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.half:hover img, .half:focus-visible img { transform: scale(1.05); }
/* The butter frame is an inset ring over the photo; it fades out while the half grows on hover.
   The text sits on a dark fade that only covers the lower part of the photo, so it stays readable
   whatever is in the picture. */
.half-body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .3rem;
  padding: 1.35rem 1.45rem; border-radius: var(--r-card);
  background: linear-gradient(to top, rgba(20, 10, 8, .72) 0%, rgba(20, 10, 8, .38) 38%, rgba(20, 10, 8, 0) 62%);
  box-shadow: inset 0 0 0 6px var(--y-200); transition: box-shadow .8s ease;
}
.half:hover .half-body { box-shadow: inset 0 0 0 0 var(--y-200); }
.half-title { font: 700 clamp(1.9rem, 6vw, 3.4rem) var(--display); line-height: 1; text-shadow: 0 2px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .5); }
.half-sub { font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .5); font-size: clamp(.9rem, 2.6vw, 1.15rem); line-height: 1.3; }
.half .btn { pointer-events: none; margin-top: .35rem; }
.half:hover .btn, .half:focus-visible .btn { background: var(--y-500); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.half:hover .btn-arrow::after { transform: translateX(4px); }
@media (max-width: 719px) and (max-height: 640px) { /* short phones (iPhone SE/8): tighter spacing and type */
  .hero { padding: .45rem 0 .5rem; }
  .hero-head { margin-bottom: .4rem; }
  .hero h1 { font-size: 1.75rem; }
  .tagline { font-size: .9rem; }
  .hero-cta { min-height: 40px; padding: .35rem 1rem; font-size: .95rem; margin-top: .35rem; }
  .halves { gap: .5rem; }
  .half .btn { min-height: 42px; padding: .5rem 1.2rem; }
  .half-body { padding: 1.15rem 1.25rem; }
  .half-title { font-size: 1.7rem; }
}
/* Landscape phones: side by side and without the tagline, otherwise the halves would not fit */
@media (max-width: 719px) and (orientation: landscape) { .halves { flex-direction: row; } }
@media (min-width: 720px) {
  .hero { padding: clamp(1.2rem, 2.5vw, 2rem) 0 clamp(1.2rem, 2.5vw, 2rem); }
  .hero-head { margin-bottom: 1.2rem; }
  .halves { flex-direction: row; gap: 1rem; }
  .half { min-height: 240px; }
  .half-body { padding: 1.95rem 2.15rem; gap: .4rem; }
}
@media (max-height: 520px) { /* landscape phones: headline and halves only */
  .tagline, .hero-cta { display: none; }
  .hero { padding: .6rem 0; } .hero-head { margin-bottom: .6rem; } .hero h1 { font-size: 1.9rem; }
  .half { min-height: 200px; }
}
/* Mouse screens: the halves rest a little smaller; the hovered one eases open while the other
   steps back. flex-basis + transform, because flex-grow does not animate in every browser. */
@media (hover: hover) and (min-width: 720px) {
  .half { transform: scale(.92); }
  .halves .half:hover { flex-basis: 58%; transform: scale(1); }
  .halves:has(.half:hover) .half:not(:hover) { flex-basis: 42%; transform: scale(.88); }
}

/* Ticker band: continuous marquee, pauses on hover */
.ticker { background: var(--y-100); color: var(--wine); overflow: hidden; padding: .7rem 0; border-top: 3px solid var(--y-200); border-bottom: 3px solid var(--y-200); }
.ticker-track { display: flex; width: max-content; animation: ticker 32s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { font: 700 1.25rem var(--display); white-space: nowrap; padding: 0 1.05rem; display: inline-flex; align-items: center; gap: 2.1rem; } /* dot sits halfway between two words: 2.1rem to each */
.ticker-track span::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--wine); opacity: .6; }
@keyframes ticker { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (min-width: 900px) { .ticker-track span { font-size: 1.5rem; } }

/* Sections */
section { scroll-margin-top: calc(var(--top-h) + 3px); }
.branch, .gallery, .about { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.branch-ouioui { padding-top: 0; }
.section-intro { font-size: 1.15rem; max-width: 56ch; margin-bottom: 1.75rem; }
/* Section heading with a button at the top right (wraps under the title on narrow screens) */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .6rem 1.5rem; margin-bottom: .5rem; }
.section-head h2 { margin-bottom: 0; }
@media (min-width: 720px) { .section-head .btn { margin-top: 1.6rem; } .intro-cta { display: none; } }
/* phones: the same button sits under the intro text instead of beside the heading */
@media (max-width: 719px) { .section-head .btn { display: none; } .intro-cta { margin: -.6rem 0 1.9rem; } }
.sub { font: 700 1rem var(--body); color: var(--wine); text-transform: uppercase; letter-spacing: .08em; margin: 2.25rem 0 1rem; }
.section-intro + .sub, .intro-cta + .sub { margin-top: 0; }
.branch-street { /* the festival crowd, washed out so the text stays readable */
  background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(/images/street-bg.webp) center / cover no-repeat var(--white);
  border-top: 3px solid var(--y-200);
}
.branch-ouioui { background: var(--y-100); }
.branch-ouioui .spot { background: var(--white); }

/* Scroll reveals: fade up, staggered with --i (JS adds .in when the element enters the viewport) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .half, .half img, .spot, .btn { transition: none; } .ticker-track { animation: none; } }

/* Cards: identical rounded cards, one action each, always bottom-left */
.cards { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
.spot {
  background: var(--y-100); border-radius: var(--r-card); padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; text-align: left;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.spot:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(120, 48, 49, .10); }
.spot-next.is-now .spot-kicker::before {
  content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .45rem;
  background: var(--green); box-shadow: 0 0 0 0 rgba(117, 149, 122, .6); animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse { to { box-shadow: 0 0 0 12px rgba(117, 149, 122, 0); } }
.spot-kicker { font-weight: 700; color: var(--wine); margin-bottom: .25rem; }
.spot h3 { margin-bottom: .6rem; }
.spot p { max-width: none; }
.spot address { font-weight: 600; margin-bottom: .6rem; }
.hours { color: var(--ink-soft); margin-bottom: .5rem; }
.spot-actions { margin-top: auto; padding-top: 1.25rem; display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: wrap; }
/* Coming up: one box per calendar event; the row is always as wide as the weekly cards:
   3 events -> 3 equal columns, 2 -> 2, 1 -> the full width. Stacked on phones like the other cards. */
@media (min-width: 720px) { .cards-3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.spot-next { background: var(--y-200); }
.next-text { white-space: pre-line; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Oui, Oui! stage: a tall block whose inner part stays pinned under the header for one screen height;
   main.js scrubs the video with the scroll position. Text sits on a dark fade at the bottom. */
.stage { height: 340vh; }
.stage-pin {
  position: sticky; top: calc(var(--top-h) + 3px); overflow: hidden; background: #1C1917;
  height: calc(100vh - var(--top-h) - 3px); height: calc(100svh - var(--top-h) - 3px);
}
.stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-pin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 10, 8, .78) 0%, rgba(20, 10, 8, .4) 38%, rgba(20, 10, 8, 0) 65%); pointer-events: none; }
.stage-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; color: var(--white); padding-bottom: clamp(1.5rem, 6vh, 4rem); }
.stage-text .kicker { color: var(--y-200); }
.stage-text h2 { color: var(--white); text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.stage-text .section-intro { color: var(--white); margin-bottom: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
@media (max-width: 899px) { .stage-text { padding-bottom: calc(76px + 1.25rem); } } /* above the action dock */
.branch-ouioui > .wrap { padding-top: clamp(2.5rem, 6vw, 4rem); }

/* Google Maps embed of the listing */
.place { margin-top: 1.25rem; }
.place-map { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--y-200); padding: 6px; }
.place-map iframe { display: block; width: 100%; height: 320px; border: 0; border-radius: calc(var(--r-card) - 6px); background: var(--y-100); }
@media (min-width: 720px) { .place-map iframe { height: 420px; } }

/* Carousel: the six crêpe photos as polaroids, drifting from left to right (main.js moves the track and
   makes it draggable). The box fades out at both sides and leaves room below for the shadows. */
.gallery { background: var(--white); border-top: 3px solid var(--y-200); border-bottom: 3px solid var(--y-200); }
.gallery-head { margin-bottom: 1.5rem; }
.gallery-head h2 { margin-bottom: 0; }
.carousel {
  overflow: hidden; padding: 1rem 0 3rem; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.carousel.dragging { cursor: grabbing; }
.carousel-track { display: flex; gap: 1.1rem; width: max-content; will-change: transform; }
.carousel figure { /* the polaroid: white frame, thicker at the bottom */
  margin: 0; flex: 0 0 auto; width: min(66vw, 280px); padding: 12px 12px 44px; background: var(--white);
  border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 12px 28px rgba(120, 48, 49, .16);
}
.carousel img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; pointer-events: none; -webkit-user-drag: none; }
@media (min-width: 720px) { .carousel figure { width: 300px; } .carousel-track { gap: 1.4rem; } }

/* About: the oval portrait takes the whole first column */
.about-grid { display: grid; gap: 2rem; align-items: center; }
.about-photo { width: min(82%, 380px); margin-inline: auto; }
.about-copy p { white-space: pre-line; } /* Simon's text keeps its own line breaks */
@media (min-width: 860px) {
  .about-grid { grid-template-columns: minmax(0, 460px) 1fr; gap: 4rem; }
  .about-photo { width: 100%; }
}

/* Contact band: light yellow; the footer below it takes the butter */
.contact { background: var(--y-100); color: var(--ink); padding: clamp(3rem, 7vw, 5rem) 0; }
.contact-grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1.2fr .8fr; gap: 3rem; } .contact-actions { justify-self: end; } }
.contact-text { white-space: pre-line; } /* the line break in the text is a real new line */
.contact-actions { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.contact-actions .btn { min-width: min(100%, 240px); }

/* Footer */
.foot { background: var(--y-200); border-top: 3px solid var(--y-500); padding: 2.5rem 0 1.5rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-brand { display: flex; gap: 1rem; align-items: center; }
.foot-brand img { border-radius: 50%; flex: none; }
.foot-name { font: 700 1.5rem var(--display); color: var(--wine); margin: 0; line-height: 1.15; }
.foot-tag { margin: .15rem 0 0; color: var(--ink-soft); }
.foot-kvk { margin: .2rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.foot-col { display: grid; gap: .45rem; align-content: start; }
.foot-h { font-weight: 700; margin: 0 0 .25rem; }
.foot-col a { color: var(--ink); text-decoration: none; }
.foot-col a:hover { text-decoration: underline; }
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--y-500);
  font-size: .95rem; color: var(--ink-soft);
}
.foot-bottom p { margin: 0; }

/* Loading screen. Hidden without JS. On the first page load of a visit (html.intro) it shows at once
   and stays for one whole crêpe; afterwards it only fades in when the hero photos take longer than
   500ms. main.js removes it. The crêpe is poured, spread with the rozell, browns, and is served. */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: .4rem;
  background: var(--base); color: var(--wine); text-align: center; padding: 1rem;
  opacity: 0; animation: loader-in .3s ease .5s forwards; transition: opacity .4s ease;
}
.intro .loader { animation-delay: 0s; }
@keyframes loader-in { to { opacity: 1; } }
.loader-hi { font: 700 2.2rem var(--display); margin: .9rem 0 0; line-height: 1; }
.loader-text { margin: 0; font-weight: 600; color: var(--ink-soft); max-width: 30ch; }
.pan {
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #4A4744 0%, #2B2928 62%, #171615 100%);
  box-shadow: inset 0 0 0 6px #1D1C1B, inset 0 0 0 9px #3A3837, 0 14px 30px rgba(120, 48, 49, .18);
}
.crepe { /* pour, spread (scale), serve (fade) */
  position: absolute; left: 20px; top: 20px; width: 128px; height: 128px;
  animation: crepe 3.4s cubic-bezier(.4, 0, .3, 1) infinite;
}
.side {
  position: absolute; inset: 0;
  border-radius: 49% 51% 50% 50% / 51% 49% 51% 49%; /* a slightly hand-poured edge */
}
.front { background-color: #F7E9BE; animation: batter 3.4s linear infinite; }
.front::after { /* golden colour, darker towards the edge, fading in while it cooks */
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; animation: cooked 3.4s linear infinite;
  background: radial-gradient(circle at 50% 50%, rgba(232, 191, 106, .35) 0%, rgba(214, 160, 70, .9) 100%);
}
.rozell { /* the T-shaped spreader, circling while the batter spreads */
  position: absolute; left: 50%; top: 50%; width: 74px; height: 5px; margin-top: -2px; border-radius: 3px;
  background: #D9B98A; transform-origin: 0 50%; opacity: 0; z-index: 2; animation: rozell 3.4s linear infinite;
}
.rozell::after { content: ''; position: absolute; right: 0; top: -10px; width: 5px; height: 25px; border-radius: 3px; background: #C9A26E; }
@keyframes crepe {
  0%        { transform: scale(.1); opacity: 0; }
  3%        { opacity: 1; }
  22%, 90%  { transform: scale(1); opacity: 1; }
  100%      { transform: scale(.92); opacity: 0; }
}
@keyframes batter { 0%, 22% { background-color: #F7E9BE; } 58%, 100% { background-color: #E6BD68; } }
@keyframes cooked { 0%, 26% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes rozell {
  0%, 2%    { opacity: 0; transform: rotate(0deg) scaleX(.2); }
  5%        { opacity: 1; transform: rotate(30deg) scaleX(.3); }
  22%       { opacity: 1; transform: rotate(560deg) scaleX(1); }
  26%, 100% { opacity: 0; transform: rotate(600deg) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .crepe, .front, .front::after, .rozell { animation: none; }
  .front { background-color: #E6BD68; } .front::after { opacity: 1; } /* a finished crêpe, no motion */
  .js .loader { animation-duration: .01s; }
}

/* Mobile action dock: off-screen on the landing screen, slides in once it has scrolled away */
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr 1.15fr;
  background: var(--white); border-top: 3px solid var(--y-200);
  padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom));
  gap: .5rem;
  transform: translateY(110%);
  transition: transform .25s ease;
}
body.dock-on .dock { transform: none; }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
.dock a {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  text-decoration: none; font-weight: 700; color: var(--ink); font-size: .95rem;
  background: var(--y-600); border-radius: var(--r-pill);
}
.dock .dock-wa { background: var(--wa); color: var(--ink-strong); }
body { padding-bottom: 76px; }
@media (min-width: 900px) {
  .dock { display: none; }
  body { padding-bottom: 0; }
}