/* =========================================================
   פיצה רימון | Pizza Rimon
   Layout concept: a printed chef's menu card. One centred column
   (max 680px) for reading, widening to 960px only for images and offers.
   Ornamented hairline dividers echo the logo's single-weight line.
   ========================================================= */

:root {
  /* Colour: warm paper, soft charcoal text, pomegranate wine */
  --paper: #FAF8F5;        /* page background */
  --paper-deep: #F2ECE4;   /* recessed panels, image wells, alternate bands */
  --blush: #F6EDE8;        /* pomegranate-tinted cream band */
  --ink: #2F2B29;          /* running text (soft charcoal) */
  --ink-soft: #6E6560;     /* secondary text */
  --wine: #5D1F2D;         /* logo colour: headings, accents */
  --wine-deep: #43141F;    /* pressed / hover */
  --line: rgba(93, 31, 45, 0.22); /* hairlines */
  --on-wine: #FAF8F5;

  /* Type */
  --font-display: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  --font-body: "Heebo", "Assistant", "Arial Hebrew", Arial, sans-serif;

  /* Type scale (16px base, ~1.25) */
  --fs-xs: 0.8125rem;  /* 13 */
  --fs-sm: 0.9375rem;  /* 15 */
  --fs-base: 1.0625rem;/* 17 */
  --fs-md: 1.25rem;    /* 20 */
  --fs-lg: 1.625rem;   /* 26 */
  --fs-xl: 2.25rem;    /* 36 */
  --fs-2xl: clamp(2.75rem, 7vw, 4.25rem);

  /* Spacing (8pt) */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

  --read: 680px;
  --wide: 960px;
  --radius: 14px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1); /* same curve as the logo animation */

  --shadow-soft: 0 1px 2px rgba(67, 20, 31, 0.08), 0 10px 28px -10px rgba(67, 20, 31, 0.32);
  --shadow-lift: 0 2px 4px rgba(67, 20, 31, 0.1), 0 16px 36px -12px rgba(67, 20, 31, 0.38);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Safe-area band above the sticky header */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--paper);
  z-index: 40;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 400; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wide) + 2 * 24px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap {
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
}
.read { max-width: var(--read); margin-inline: auto; }

.section { padding-block: var(--s8); }
@media (min-width: 720px) { .section { padding-block: 5.5rem; } }

/* Colour bands: each band melts in from the colour above it, so scrolling
   moves through soft tonal shifts instead of hard edges. */
.band {
  background: linear-gradient(to bottom, var(--from, var(--paper)) 0, var(--to, var(--paper)) 180px);
  background-color: var(--to, var(--paper));
}
.band--verse { padding-block: var(--s6) var(--s7); }

/* Page transitions: content fades out on leave and in on arrival.
   The header stays still, so the site feels like one continuous surface. */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.js main, html.js .site-footer { animation: page-in 0.55s var(--ease) both; }
html.js.is-leaving main, html.js.is-leaving .site-footer {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease-in, transform 0.28s ease-in;
  animation: none;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: rgba(250, 248, 245, 0.92);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--wine);
  flex-shrink: 0;
}
.brand img { width: 26px; height: auto; }
.brand span {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}

.nav {
  position: relative;
  display: flex;
  gap: var(--s5);
  align-items: center;
}
.nav a {
  position: relative;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-soft);
  padding-block: var(--s3);
  transition: color 0.2s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--wine); }
/* No-JS fallback underline */
html:not(.js) .nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 30%;
  bottom: 4px;
  height: 1px;
  background: var(--wine);
}
/* Sliding underline: one element that glides between links */
.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 1px;
  background: var(--wine);
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
}
.nav-indicator.is-ready {
  opacity: 1;
  transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.2s linear;
}

.btn.header-cta { display: none; }
@media (min-width: 720px) {
  .btn.header-cta { display: inline-flex; }
  .nav { gap: var(--s6); margin-inline-start: auto; margin-inline-end: var(--s6); }
}
@media (max-width: 400px) {
  .brand span { font-size: 1.2rem; }
  .nav { gap: var(--s4); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s5);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary {
  background: var(--wine);
  color: var(--on-wine);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--wine-deep); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-soft); }
.btn-ghost {
  background: transparent;
  color: var(--wine);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--wine); }

/* Floating CTA (phones) */
.float-cta {
  position: fixed;
  z-index: 35;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  min-height: 52px;
  padding: 0 var(--s6);
  font-size: var(--fs-base);
  box-shadow: var(--shadow-lift);
}
.float-cta:hover { transform: translateX(-50%) translateY(-1px); }
@media (min-width: 720px) { .btn.float-cta { display: none; } }
body:has(dialog[open]) .float-cta { display: none; }

/* ---------- Ornamental divider ---------- */
.divider {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: min(100%, 360px);
  margin-inline: auto;
  color: var(--wine);
}
.divider--wide { width: min(100%, 560px); }
.divider-line {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line);
}
.divider-line::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid var(--wine);
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--paper);
  opacity: 0.7;
}
.divider-line:first-child::before { inset-inline-start: -3px; }
.divider-line:last-child::before { inset-inline-end: -3px; }
.divider-mark { width: 72px; height: 22px; flex-shrink: 0; overflow: visible; }

/* ---------- Verse ---------- */
.verse {
  display: grid;
  gap: var(--s2);
  justify-items: center;
  text-align: center;
  color: var(--wine);
}
.verse p {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.8;
  opacity: 0.88;
}
.verse cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ---------- Headings ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--wine);
  text-align: center;
}
.section-lede {
  margin-top: var(--s3);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-base);
}
.section-head { display: grid; gap: var(--s5); margin-bottom: var(--s7); }

/* ---------- Hero ---------- */
/* First screen: logo to buttons, centred in the space under the header */
.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 64px - env(safe-area-inset-top, 0px));
  min-height: calc(100svh - 64px - env(safe-area-inset-top, 0px));
  padding-block: var(--s6);
  text-align: center;
}
.hero-inner { width: 100%; }
.hero-mark { width: clamp(112px, min(24vw, 24svh), 196px); margin: 0 auto var(--s5); }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: 1.05;
  color: var(--wine);
}
.hero-tag {
  margin-top: var(--s3);
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--wine);
  letter-spacing: 0.18em;
}
.hero-text {
  max-width: 34rem;
  margin: var(--s5) auto 0;
  font-size: var(--fs-md);
  color: var(--ink-soft);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* ---------- Values (home) ---------- */
.values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s7);
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.values li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s2);
  text-align: center;
  min-width: 0;
}
.values svg { width: 34px; height: 34px; margin-bottom: var(--s2); color: var(--wine); }
.values h3 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.values p { color: var(--ink-soft); font-size: var(--fs-sm); max-width: 18rem; }

/* ---------- Photo strip / gallery ---------- */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 720px) { .photo-strip { gap: var(--s5); } }

.photo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-deep);
  aspect-ratio: 4 / 5;
  max-width: 100%;
  cursor: zoom-in;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.photo:hover img { transform: scale(1.035); }
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(93, 31, 45, 0.08);
  pointer-events: none;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}
@media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

.center-actions { display: flex; justify-content: center; margin-top: var(--s6); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}
.faq-q:hover { color: var(--wine); }
.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--wine);
  transition: transform 0.35s var(--ease);
}
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(-90deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: var(--s5); color: var(--ink-soft); max-width: 60ch; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div > p { opacity: 0; transform: translateY(-4px); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.faq-item.is-open .faq-a > div > p { opacity: 1; transform: none; transition-delay: 0.08s; }
.faq-item h3 { margin: 0; font: inherit; }

/* ---------- Menu ---------- */
.page-head { text-align: center; padding-block: var(--s8) var(--s6); }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--wine);
}
.page-head p { margin-top: var(--s4); color: var(--ink-soft); }

.menu-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s5);
  margin-top: var(--s6);
}
.menu-nav a {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: var(--s2);
  border-bottom: 1px solid transparent;
}
.menu-nav a:hover { color: var(--wine); border-bottom-color: var(--line); }

.menu-band { padding-block: var(--s5) var(--s6); }
.course { padding-block: var(--s6); scroll-margin-top: 80px; min-width: 0; }

/* Starters beside salads on wide screens, with a hairline between them */
.menu-pair { display: grid; gap: var(--s6); }
@media (min-width: 820px) {
  .menu-pair { grid-template-columns: 1fr 1fr; gap: 0; }
  .menu-pair > .course { padding-inline: var(--s6); }
  .menu-pair > .course + .course { border-inline-start: 1px solid var(--line); }
}
@media (min-width: 820px) {
  .dishes--two { grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
}
.course-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  color: var(--wine);
  text-align: center;
  letter-spacing: 0.02em;
}
.course-sub {
  display: block;
  margin-top: var(--s2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
}
.dishes {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s6);
  text-align: center;
}
.dish h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: 1.4;
}
.dish p {
  margin: var(--s1) auto 0;
  max-width: 34rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.75;
}

/* Packages */
.packages {
  display: grid;
  gap: var(--s5);
  max-width: 840px;
  margin-inline: auto;
}
@media (min-width: 720px) { .packages { grid-template-columns: 1fr 1fr; } }
.package {
  position: relative;
  padding: var(--s6) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
  min-width: 0;
}
.package::before {
  /* inner hairline frame, like a printed menu card */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(93, 31, 45, 0.1);
  border-radius: calc(var(--radius) - 5px);
  pointer-events: none;
}
.package-guests {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--wine);
  line-height: 1.3;
}
.package-guests small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--ink-soft);
}
.package ul {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}
.package li {
  display: grid;
  gap: 2px;
  padding-top: var(--s3);
  border-top: 1px solid rgba(93, 31, 45, 0.1);
}
.package li:first-child { border-top: 0; padding-top: 0; }
.package li strong { font-weight: 500; color: var(--ink); }
.package li span { font-size: var(--fs-sm); color: var(--ink-soft); }
.packages-note { margin-top: var(--s5); text-align: center; font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer {
  --footer-from: var(--blush);
  padding-block: var(--s7) calc(var(--s7) + 72px);
  background: linear-gradient(to bottom, var(--footer-from), var(--paper-deep) 140px);
  background-color: var(--paper-deep);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
@media (min-width: 720px) { .site-footer { padding-block: var(--s7); } }
[data-page="gallery"] .site-footer { --footer-from: var(--paper); margin-top: var(--s8); }
.footer-inner { display: grid; gap: var(--s4); justify-items: center; }
.footer-mark { width: 30px; opacity: 0.85; }
.footer-contact { font-size: var(--fs-base); color: var(--ink); }
.footer-contact a { color: var(--wine); text-decoration: none; font-weight: 500; unicode-bidi: isolate; }
.footer-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { font-size: var(--fs-xs); }

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.lightbox::backdrop { background: var(--paper); }
.lightbox[open] { display: grid; animation: lb-in 0.35s var(--ease); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox-stage {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.lightbox-count { font-size: var(--fs-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lightbox figure {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 0;
  padding-block: var(--s4);
}
.lightbox img {
  width: auto;
  height: auto;
  max-width: min(100%, 1100px);
  /* fit the screen: viewport height minus the top bar, the arrows and safe areas */
  max-height: calc(100vh - 170px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 170px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  object-fit: contain;
  border-radius: 8px;
  box-shadow: var(--shadow-lift);
}
.lightbox-nav { display: flex; justify-content: center; gap: var(--s3); }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--wine);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.icon-btn:hover { border-color: var(--wine); }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- Splash ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #FAF8F5;
  display: grid;
  place-items: center;
  transition: opacity 0.9s var(--ease), visibility 0s linear 0.9s;
}
/* Square video pinned to the exact centre of the screen; edges feathered
   so it melts into the cream background at any screen shape. */
.splash video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(86vmin, 640px);
  height: min(86vmin, 640px);
  transform: translate(-50%, -50%);
  object-fit: contain;
  background: #FAF8F5;
  -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 84%, transparent 100%);
}
@media (max-width: 600px) {
  .splash video { width: min(100vw, 86vh); height: min(100vw, 86vh); }
}
.splash-skip {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: max(20px, env(safe-area-inset-left, 0px));
  padding: var(--s2) var(--s4);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.7;
}
.splash-skip:hover { opacity: 1; color: var(--wine); }
.splash.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
html.no-splash .splash { display: none; }
html:not(.no-splash) body { overflow: hidden; }
html:not(.no-splash) .float-cta { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Floating CTA tucks away while the hero buttons are visible */
.float-cta { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.25s var(--ease); }
.float-cta.is-tucked { opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none; }

/* Live-drawn splash (used when a phone blocks video autoplay) */
.splash-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(86vmin, 640px);
  height: min(86vmin, 640px);
  transform: translate(-50%, -50%);
}
.splash-stage svg { width: 100%; height: 100%; display: block; }
@media (max-width: 600px) {
  .splash-stage { width: min(100vw, 86vh); height: min(100vw, 86vh); }
}

/* Hero logo: positioned layer for the hero, no selection or drag highlight on the mark */
.hero { position: relative; overflow: hidden; overflow: clip; }
.hero-inner { position: relative; z-index: 1; }
.hero-mark {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Packages: short line under the heading */
.packages-lede { margin-top: var(--s3); text-align: center; color: var(--ink-soft); }
/* Two-column dish lists: an odd last dish sits centred across both columns */
@media (min-width: 820px) {
  .dishes--two > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; max-width: 34rem; }
}

/* Hero scales with the screen: on large monitors the opening screen fills out instead of
   leaving a small island in the middle. Sizes follow the viewport height, capped by width. */
.hero-mark {
  width: clamp(112px, min(27vh, 46vw), 330px);
  height: auto;                     /* keep the drawing's own proportions (no letterboxing) */
  margin-bottom: clamp(16px, 3vh, 36px);
}
.hero h1 { font-size: clamp(2.75rem, min(9.5vh, 12vw), 7rem); }
.hero-tag { font-size: clamp(1.25rem, min(2.7vh, 5vw), 2rem); margin-top: clamp(8px, 1.4vh, 18px); }
.hero-text { font-size: clamp(1.15rem, min(2.4vh, 4.6vw), 1.75rem); margin-top: clamp(16px, 2.6vh, 32px); max-width: none; }
.hero-actions { margin-top: clamp(24px, 4vh, 48px); gap: clamp(12px, 1.4vh, 18px); }
@media (min-width: 720px) and (min-height: 760px) {
  .hero-actions .btn { min-height: 52px; padding: 0 30px; font-size: 1.05rem; }
}

/* Large screens: the layout grows with the screen instead of floating in wide margins.
   Phones and laptops (up to ~1300px) keep their current sizes. */
html { font-size: clamp(100%, calc(75% + 0.3125vw), 125%); } /* 16px at 1280 -> 18px at 1920 -> 20px at 2560 */
:root {
  --wide: clamp(960px, 68vw, 1320px);
  --read: clamp(680px, 44vw, 840px);
}
.photo-strip { max-width: min(100%, calc(var(--wide) * 0.9)); }
.values { max-width: 100%; }
.packages { max-width: min(100%, calc(var(--wide) * 0.86)); }

/* Opening video: purely visual. The pointer never reaches the video itself, so browsers
   show no hover overlays, tooltips or video buttons on it. */
.splash { cursor: default; }
.splash video, .splash-stage { pointer-events: none; -webkit-user-select: none; user-select: none; }

/* Gallery: an incomplete last row sits centred instead of hanging on one side */
.gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.gallery-grid > .photo { width: calc((100% - var(--s3)) / 2); }
@media (min-width: 720px) { .gallery-grid > .photo { width: calc((100% - 2 * var(--s5)) / 3); } }

/* Small logo (header/footer): the full logo with slightly heavier lines so it stays crisp when small */
.brand picture { display: contents; }
@media (min-width: 720px) { .brand img { width: 36px; height: auto; } }
.footer-mark { width: 34px; height: auto; opacity: 0.85; }

/* Phone number on a computer: a small "copied" note above the number */
a[href^="tel:"] { position: relative; }
.copy-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 4px);
  padding: 5px 10px; border-radius: 999px;
  background: var(--wine); color: #FAF8F5;
  font-size: 0.8rem; line-height: 1.2; white-space: nowrap; direction: rtl;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.copy-tip.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .copy-tip { transition: none; } }