/* Artigiano Agdal design system.
   Every colour is off the room itself: lime-plaster walls, pine-green velvet
   banquettes, burgundy chairs, terracotta floor tiles, and the blossom branches
   that stand on the tables. A day room, so the page is light: Artigiano serves
   brunch from the moment it opens, and a dark site would tell the wrong story.

   Type is three families. Fraunces, a soft high-contrast serif, for anything
   that names something: headings, dish names, the wordmark. Manrope for
   everything spoken plainly. DM Mono for prices, hours, labels and numerals,
   which is what makes the carte read as a card rather than as a web page. */

:root {
  --bg: #f8f3e9;          /* calce, the walls */
  --bg-2: #f0e6d5;        /* semolina, the alternating band */
  --panel: #fffdf8;
  --pine: #12332e;        /* the velvet banquettes, and the dark bands */
  --pine-2: #0b231f;
  --text: #16302c;
  --para: #5b6a63;
  --accent: #8f2f43;      /* burgundy velvet, the chairs. Every action is this */
  --accent-2: #0f5049;    /* pine, the secondary voice */
  --accent-soft: rgba(143, 47, 67, 0.09);
  --blossom: #dc93a4;     /* the branches on the tables */
  --terracotta: #c2653a;  /* the floor */
  --gold: #b8863a;
  --on-accent: #fff6f0;   /* what sits on a burgundy fill */
  --line: rgba(18, 51, 46, 0.15);
  --line-soft: rgba(18, 51, 46, 0.09);
  --sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --leaf: 96px 8px 96px 8px;   /* the one shape motif, on every image and card */
  --leaf-sm: 54px 6px 54px 6px;
  /* Terrazzo: the chip floor of an Italian dining room, drawn rather than
     downloaded. Four sizes of speckle on one 180px tile, so nothing repeats
     visibly and it costs no request. */
  --terrazzo:
    radial-gradient(circle at 12% 22%, rgba(143, 47, 67, 0.085) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at 68% 8%,  rgba(15, 80, 73, 0.075) 0 3.5px, transparent 3.6px),
    radial-gradient(circle at 84% 61%, rgba(194, 101, 58, 0.075) 0 2px, transparent 2.1px),
    radial-gradient(circle at 34% 78%, rgba(18, 51, 46, 0.06) 0 4px, transparent 4.1px),
    radial-gradient(circle at 52% 42%, rgba(184, 134, 58, 0.07) 0 1.6px, transparent 1.7px),
    radial-gradient(circle at 6% 62%,  rgba(15, 80, 73, 0.05) 0 2.2px, transparent 2.3px);
  --terrazzo-size: 180px 180px, 230px 230px, 150px 150px, 290px 290px, 110px 110px, 200px 200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--terrazzo), var(--bg);
  background-size: var(--terrazzo-size);
  background-attachment: fixed;
  color: var(--para);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.68;
  overflow-x: hidden;
}

/* Grayscale antialiasing thins every stroke. On a dark ground that is what you
   want, and it is what the sibling sites do; on this one the page is plaster
   and it made small uppercase type look starved. So the default (subpixel)
   stands everywhere, and antialiasing is asked for only where the type is
   light on dark, which is the case it was meant for. */
.hero, .band-dark, .menu-section, .gallery-section, .contact-band,
footer, .page-account, .lightbox, .toast, .nav:not(.scrolled) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Once the bar takes its plaster background the links are dark again */
.nav.scrolled, .page-solid-nav .nav { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--text);
  line-height: 1.06;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
}

/* The eyebrow above every heading: mono, spaced, with a rule that draws itself
   out of the text once the section arrives. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::after {
  content: '';
  width: 52px; height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease) 0.2s;
}
.visible .kicker::after, .kicker.visible::after { transform: scaleX(1); }
.section-head.center .kicker::before {
  content: '';
  width: 52px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.section-title {
  font-size: clamp(38px, 5vw, 66px);
  margin: 16px 0 16px;
  letter-spacing: -0.018em;
  font-weight: 600;
}
/* The one word per heading that leans. Fraunces italic rather than a script
   face: the wordmark is a serif, so the flourish is the same serif tilted. */
.t-script {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  letter-spacing: -0.01em;
}
.section-sub { color: var(--para); max-width: 58ch; font-size: 16.5px; }

.serif { font-family: var(--display); }

/* ---------- Layout ---------- */
.container { width: min(1180px, 90vw); margin: 0 auto; }
section { padding: clamp(76px, 9vw, 132px) 0; position: relative; }
.section-head { margin-bottom: clamp(34px, 5vw, 58px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }

/* Bands. The page alternates plaster, semolina and pine so the eye always
   knows it has moved on. Anything painted pine takes the light type with it:
   the sections are listed rather than given a shared class because each one
   also carries its own background image or gradient. */
.band-2 { background: var(--bg-2); }
.band-dark, .menu-section, .gallery-section { color: rgba(240, 246, 242, 0.78); }
.band-dark h1, .band-dark h2, .band-dark h3,
.menu-section h1, .menu-section h2, .menu-section h3,
.gallery-section h1, .gallery-section h2, .gallery-section h3 { color: #f6f1e6; }
.band-dark .kicker, .menu-section .kicker, .gallery-section .kicker { color: var(--blossom); }
.band-dark .t-script, .menu-section .t-script, .gallery-section .t-script { color: var(--blossom); }
.band-dark .section-sub, .menu-section .section-sub, .gallery-section .section-sub { color: rgba(240, 246, 242, 0.7); }

/* ---------- Buttons ---------- */
/* Rounded rectangles, and the fill wipes up from the bottom rather than
   switching. Burgundy is dark enough to carry near-white type. */
.btn {
  position: relative;
  display: inline-block;
  padding: 15px 34px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--accent);
  background: transparent;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  transition: color 0.45s var(--ease), border-color 0.45s;
  z-index: 0;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--on-accent); }
.btn:hover::before { transform: translateY(0); }
.btn.solid { background: var(--accent); color: var(--on-accent); }
.btn.solid::before { background: var(--accent-2); }
.btn.solid:hover { border-color: var(--accent-2); color: #fff; }
.btn.ghost { border-color: var(--line); color: var(--text); }
.btn.ghost::before { background: var(--pine); }
.btn.ghost:hover { border-color: var(--pine); color: #f6f1e6; }
.band-dark .btn, .hero .btn, .contact-band .btn {
  border-color: rgba(246, 241, 230, 0.42); color: #f6f1e6;
}
.band-dark .btn::before, .hero .btn::before, .contact-band .btn::before { background: var(--blossom); }
.band-dark .btn:hover, .hero .btn:hover, .contact-band .btn:hover { color: var(--pine-2); border-color: var(--blossom); }
.band-dark .btn.solid, .hero .btn.solid, .contact-band .btn.solid {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.btn:disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 18px 0;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
/* A page that is not the home page has a bar that is solid from the first
   paint, so it carries the background here rather than borrowing .scrolled.
   That class belongs to the scroll handler: auth.js calls its toggle on
   DOMContentLoaded, which at scrollY 0 stripped a .scrolled written into the
   markup and left the menu page with dark links on a photograph. */
.nav.scrolled, .page-solid-nav .nav {
  background: rgba(248, 243, 233, 0.93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 9px 0;
  box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px rgba(18, 51, 46, 0.06);
}
.page-solid-nav .nav-logo img { height: 38px; }
/* backdrop-filter makes .nav the containing block for fixed children, which
   breaks the full-screen mobile menu; drop it while the menu is open */
.nav.menu-open, .nav.scrolled.menu-open,
.page-solid-nav .nav.menu-open { backdrop-filter: none; background: transparent; box-shadow: none; }

/* How far down the page you are, drawn along the bottom edge of the bar */
.nav-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--blossom));
  opacity: 0; transition: opacity 0.4s;
}
.nav.scrolled .nav-progress { opacity: 1; }

.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.nav-logo { justify-self: start; grid-column: 1; grid-row: 1; display: flex; align-items: center; }
.nav-logo img { height: 46px; width: auto; transition: height 0.3s var(--ease); }
.nav.scrolled .nav-logo img { height: 38px; }
/* Over the hero photo the dark wordmark disappears, so the light one is on top
   until the bar takes its background. */
.nav-logo .logo-light { position: absolute; opacity: 1; transition: opacity 0.35s; }
.nav-logo .logo-dark { opacity: 0; transition: opacity 0.35s; }
.nav.scrolled .nav-logo .logo-light { opacity: 0; }
.nav.scrolled .nav-logo .logo-dark { opacity: 1; }
.page-solid-nav .nav-logo .logo-light { opacity: 0; }
.page-solid-nav .nav-logo .logo-dark { opacity: 1; }

.nav-links { display: flex; gap: 24px; align-items: center; list-style: none; grid-column: 2; grid-row: 1; justify-content: center; }
.nav-right { display: flex; gap: 14px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
/* Manrope, not the mono. DM Mono stops at 500, so a nav set in it can only be
   faux-bolded, and at 12px uppercase over a photo that reads starved. The mono
   keeps the jobs it is good at: prices, hours, numerals and small labels. */
.nav-links a, .nav-right a {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fdf8ef;
  transition: color 0.3s;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  /* Over the hero photo, small caps on a bright plate lose their edges */
  text-shadow: 0 1px 12px rgba(11, 35, 31, 0.55);
}
/* The shadow exists to hold the links against the hero photo. Anywhere the bar
   has a flat ground of its own it only leaves a halo, so it comes off. */
.nav.scrolled .nav-links a, .nav.scrolled .nav-right a,
.page-solid-nav .nav-links a, .page-solid-nav .nav-right a,
.nav-links.open a { text-shadow: none; }
.nav.scrolled .nav-links a, .nav.scrolled .nav-right a,
.page-solid-nav .nav-links a, .page-solid-nav .nav-right a { color: var(--text); }
/* The rule grows out of the middle, not in from one side */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--accent);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover { color: var(--accent); }
.nav.scrolled .nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { transform: translateX(-50%) scaleX(1); }
.nav-cta {
  border: 1px solid currentColor; border-radius: 9px;
  padding: 9px 18px !important;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent) !important; }

/* Two-state pill; the knob slides under whichever language is live */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid currentColor; border-radius: 9px; color: inherit;
}
.nav-right .lang-switch, .nav-links .lang-switch { color: #f6f1e6; }
.nav.scrolled .lang-switch, .page-solid-nav .lang-switch { color: var(--line); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--accent); border-radius: 6px;
  transition: transform 0.35s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0;
  color: #fdf8ef; font-family: var(--sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.06em; padding: 5px 11px; border-radius: 6px;
  transition: color 0.3s;
}
.nav.scrolled .lang-switch button, .page-solid-nav .lang-switch button { color: var(--para); }
.lang-switch button.active,
.nav.scrolled .lang-switch button.active,
.page-solid-nav .lang-switch button.active { color: var(--on-accent); }

.burger { display: none; background: none; border: 0; width: 28px; height: 20px; position: relative; z-index: 70; justify-self: end; grid-column: 3; grid-row: 1; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #f6f1e6; transition: 0.35s var(--ease); }
.nav.scrolled .burger span, .page-solid-nav .burger span { background: var(--text); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 18px; }
.burger.open span { background: #f6f1e6; }
.burger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  height: 100svh;
  min-height: 620px;
  position: relative;
  display: grid;
  /* minmax(0, 1fr), not the implicit auto track. An auto track sizes to the
     item's max-content, and the headline's max-content is one unwrapped line,
     so on a phone the track grew past the viewport and took the buttons with
     it. A percentage max-width on the child cannot fix that: it resolves
     against the very track it is meant to constrain. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
}
.hero-bg { position: absolute; inset: -4% -4% -4% -4%; background: var(--pine); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* A slow lateral drift rather than a zoom: the room is wide, so the frame
   walks along the table instead of pushing into it. */
.hero-bg img.kb, .hero-bg video { animation: heroDrift 28s ease-in-out infinite alternate; }
@keyframes heroDrift {
  from { transform: translate3d(-1.4%, 0, 0) scale(1.04); }
  to   { transform: translate3d(1.4%, -1%, 0) scale(1.08); }
}
/* Food photography is bright and busy, so the scrim carries more in the middle
   than a dark room would need, plus a soft pool behind the headline itself. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(11, 35, 31, 0.42), transparent 70%),
    linear-gradient(180deg, rgba(11, 35, 31, 0.66) 0%, rgba(11, 35, 31, 0.38) 42%, rgba(11, 35, 31, 0.82) 100%);
}
.hero-content { position: relative; z-index: 3; padding: 0 24px; width: 100%; max-width: 100vw; }
.hero-script {
  font-family: var(--display);
  font-size: clamp(34px, 6.6vw, 92px);
  color: #fdf8ef;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.024em;
  /* ch is measured against Fraunces, whose zero is wide, so this caps nearer
     14 words than 17 characters. The vw ceiling is what keeps a phone honest. */
  max-width: min(17ch, 100%);
  overflow-wrap: break-word;
  margin: 0 auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  text-shadow: 0 6px 46px rgba(11, 35, 31, 0.45);
}
.hero-tag {
  margin-top: 20px;
  color: rgba(253, 248, 239, 0.9);
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(11.5px, 1.35vw, 14px);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-shadow: 0 1px 14px rgba(11, 35, 31, 0.5);
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

.hero-content > * { opacity: 0; transform: translateY(28px); animation: heroIn 1.15s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.16s; }
.hero-content > *:nth-child(3) { animation-delay: 0.32s; }
.hero-content > *:nth-child(4) { animation-delay: 0.46s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The blossom branches are the first thing anyone photographs in this room, so
   a few petals drift across the hero. Purely decorative, hidden from AT, and
   switched off for anyone who asked for less motion. */
.petals { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -8%;
  width: 13px; height: 13px;
  background: var(--blossom);
  border-radius: 90% 8% 90% 8%;
  opacity: 0;
  animation: petalFall linear infinite;
}
.petal:nth-child(1) { left: 12%; animation-duration: 15s; animation-delay: 0s; }
.petal:nth-child(2) { left: 34%; animation-duration: 19s; animation-delay: 4s; width: 9px; height: 9px; }
.petal:nth-child(3) { left: 58%; animation-duration: 17s; animation-delay: 8s; }
.petal:nth-child(4) { left: 77%; animation-duration: 21s; animation-delay: 2s; width: 10px; height: 10px; }
.petal:nth-child(5) { left: 91%; animation-duration: 16s; animation-delay: 11s; width: 8px; height: 8px; }
@keyframes petalFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.62; }
  88%  { opacity: 0.45; }
  100% { transform: translateY(112svh) translateX(70px) rotate(420deg); opacity: 0; }
}

/* Fixed booking pill, bottom right. It carries the mark and widens on hover. */
.reserve-badge {
  position: fixed; right: 26px; bottom: 26px; z-index: 55;
  display: flex; align-items: center; gap: 0;
  height: 56px; padding: 0 8px 0 8px;
  background: var(--accent); color: var(--on-accent);
  border-radius: 28px;
  box-shadow: 0 14px 34px rgba(18, 51, 46, 0.28);
  transition: gap 0.45s var(--ease), padding 0.45s var(--ease), background 0.35s;
  overflow: hidden;
}
.reserve-badge .badge-center { display: grid; place-items: center; flex: none; }
.reserve-badge .badge-center img { width: 40px; height: 40px; border-radius: 50%; }
.reserve-badge .badge-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap; max-width: 0; opacity: 0;
  transition: max-width 0.45s var(--ease), opacity 0.3s;
}
.reserve-badge:hover { gap: 12px; padding-right: 22px; background: var(--pine); }
.reserve-badge:hover .badge-label { max-width: 220px; opacity: 1; }

/* The one fact people scan the hero for */
.hero-hours {
  display: inline-flex; align-items: center; justify-content: center; gap: 13px;
  margin-top: 30px; padding: 8px 20px;
  border: 1px solid rgba(253, 248, 239, 0.32); border-radius: 999px;
  font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.16em;
  color: #fdf8ef;
  backdrop-filter: blur(4px);
}
.hero-hours i { display: block; width: 26px; height: 1px; background: currentColor; opacity: 0.5; }
@media (max-width: 700px) { .hero-hours { margin-top: 24px; letter-spacing: 0.14em; } }

/* ---------- Reveal on scroll ---------- */
/* A wipe rather than a fade: the content is uncovered from the bottom edge,
   which reads like a card being dealt onto the table. */
.reveal {
  opacity: 0;
  clip-path: inset(14% 0 0 0);
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), clip-path 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.visible { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
.reveal-left {
  opacity: 0;
  clip-path: inset(0 0 0 22%);
  transform: translateX(-38px);
  transition: opacity 1s var(--ease), clip-path 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal-left.visible { opacity: 1; clip-path: inset(0); transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.1s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.2s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left { opacity: 1; clip-path: none; transform: none; transition: none; }
  .petals { display: none; }
  .hero-bg img.kb, .hero-bg video { animation: none; }
  .hero video { display: none; }
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(38px, 6vw, 84px); align-items: center; }
.about-images { position: relative; padding-bottom: 74px; }
/* The leaf silhouette. It runs on the main image only; the inset one is a plain
   card so the two do not fight where they overlap. */
.about-images .img-main { width: 80%; border-radius: var(--leaf); box-shadow: 0 26px 60px rgba(18, 51, 46, 0.16); }
.about-images .img-accent {
  position: absolute; right: 0; bottom: 0; width: 47%;
  border-radius: 10px;
  border: 9px solid var(--bg);
  box-shadow: 0 22px 50px rgba(18, 51, 46, 0.2);
}
.img-frame { overflow: hidden; }
.img-frame img { transition: transform 1.3s var(--ease); }
.img-frame:hover img { transform: scale(1.055); }
.about-text p { color: var(--para); margin: 20px 0; font-size: 16.5px; }
/* The signature under the story: the wordmark's own serif, tilted */
.about-sign {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 42px; color: var(--accent); margin-top: 14px; line-height: 1;
  font-variation-settings: 'SOFT' 70, 'WONK' 1;
}

/* ---------- Menu ---------- */
/* The homepage carte sits on the dark band, the paella frame behind it at low
   strength so the plate is felt rather than read. */
.menu-section { background: var(--pine); }
#menu.menu-section {
  background:
    linear-gradient(180deg, rgba(11, 35, 31, 0.93) 0%, rgba(18, 51, 46, 0.88) 45%, rgba(11, 35, 31, 0.96) 100%),
    url('../images/menu-bg.jpg') center / cover fixed;
}
.menu-tabs {
  position: relative; display: inline-flex; gap: 4px; margin: 0 auto 48px; padding: 4px;
  border: 1px solid rgba(246, 241, 230, 0.2); border-radius: 12px;
}
.menu-tabs-wrap { display: flex; justify-content: center; }
.menu-tabs button {
  position: relative; z-index: 1;
  background: transparent; border: 0; color: rgba(240, 246, 242, 0.72);
  border-radius: 9px;
  padding: 11px 30px; text-transform: uppercase; letter-spacing: 0.12em;
  font-family: var(--sans); font-weight: 700; font-size: 12px; transition: color 0.35s;
}
.menu-tabs button.active { color: var(--on-accent); }
.menu-tabs .tab-knob {
  position: absolute; z-index: 0; top: 4px; bottom: 4px;
  background: var(--accent); border-radius: 9px;
  transition: transform 0.42s var(--ease), width 0.42s var(--ease);
}
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 4vw, 62px) clamp(38px, 6vw, 90px); }
.menu-cat h3 {
  font-family: var(--display);
  font-size: 27px; font-weight: 600;
  color: #f6f1e6;
  margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 16px;
  letter-spacing: -0.012em;
}
.menu-cat h3::after { content: ''; flex: 1; height: 1px; background: rgba(246, 241, 230, 0.18); }
.menu-cat-sub {
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blossom); margin: 0 0 18px;
}
/* No dotted leader. The price sits in a mono block on the right, and the row
   picks up a burgundy rule on hover. */
.menu-item {
  display: flex; align-items: baseline; gap: 16px;
  padding: 11px 0 11px 14px;
  border-left: 2px solid transparent;
  transition: border-color 0.3s, padding-left 0.3s var(--ease);
}
.menu-item:hover { border-left-color: var(--accent); padding-left: 18px; }
.menu-item .mi-name { font-family: var(--display); font-size: 18.5px; font-weight: 500; color: #f6f1e6; }
.menu-item .mi-dots { flex: 1; min-width: 12px; }
.menu-item .mi-price {
  font-family: var(--mono); font-size: 14.5px; font-weight: 500;
  color: var(--blossom); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.menu-item-desc {
  color: rgba(240, 246, 242, 0.6); font-size: 14px;
  margin: -6px 0 2px 14px; max-width: 46ch;
}
/* A brunch formula lists eight components, which is right on the carte and far
   too much for a teaser. The home page preview keeps two lines of each. */
#menu .menu-item-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-actions { text-align: center; margin-top: 54px; }

/* The full carte gets the light ground: it is a page people read, not a band
   they scroll past, and dark type on plaster is easier over 30 lines. */
.menu-page .menu-section { background: var(--bg); color: var(--para); }
.menu-page .menu-section h1,
.menu-page .menu-section h2,
.menu-page .menu-section h3 { color: var(--text); }
.menu-page .menu-section .kicker { color: var(--accent); }
.menu-page .menu-section .t-script { color: var(--accent); }
.menu-page .menu-cat h3 { color: var(--text); }
.menu-page .menu-cat h3::after { background: var(--line); }
.menu-page .menu-cat-sub { color: var(--accent-2); }
.menu-page .menu-item .mi-name { color: var(--text); }
.menu-page .menu-item .mi-price { color: var(--accent); }
.menu-page .menu-item-desc { color: var(--para); }
/* The full carte runs to sixteen food categories of very uneven length. A grid
   makes every row as tall as its tallest cell, which left half-page holes, so
   the page packs into columns instead and each category simply flows on. */
.menu-page .menu-cols {
  display: block;
  column-count: 2;
  column-gap: clamp(38px, 6vw, 90px);
}
.menu-page .menu-cat {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: clamp(34px, 4vw, 56px);
}
@media (max-width: 1024px) {
  .menu-page .menu-cols { column-count: 1; }
}
.menu-page .menu-tabs { border-color: var(--line); }
.menu-page .menu-tabs button { color: var(--para); }
.menu-page .menu-tabs button.active { color: var(--on-accent); }

/* ---------- Service cards ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.space-card {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--leaf-sm);
  box-shadow: 0 18px 44px rgba(18, 51, 46, 0.13);
}
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.space-card:hover img { transform: scale(1.07); }
.space-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(11, 35, 31, 0.86));
  border-radius: inherit;
}
.space-card figcaption {
  position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 2;
  text-align: left;
  font-family: var(--display); font-weight: 600; font-size: 23px; color: #fdf8ef;
  transform: translateY(6px);
  transition: transform 0.5s var(--ease);
}
.space-card:hover figcaption { transform: translateY(0); }
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blossom); margin-top: 6px; font-weight: 500;
}

/* ---------- Brunch band ---------- */
/* Artigiano's own line is that brunch never stops, so it gets a band of its
   own rather than a row in the carte. */
.brunchband { background: var(--bg-2); border-block: 1px solid var(--line-soft); overflow: hidden; }
.brunchband::before {
  content: '';
  position: absolute; right: -8%; top: -30%;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 147, 164, 0.24) 0%, transparent 68%);
  pointer-events: none;
}
.brunchband-inner {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 88px); align-items: center;
}
.brunchband-copy .section-title { margin-bottom: 8px; }
.brunchband-copy p { color: var(--para); margin-bottom: 20px; max-width: 46ch; }
.brunchband-time {
  display: inline-block;
  font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 18px; margin: 0 0 18px !important;
}
.brunchband-copy .btn { margin-top: 6px; }
.brunchband-list {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--leaf-sm);
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 36px);
  box-shadow: 0 20px 48px rgba(18, 51, 46, 0.1);
}
.aw-row {
  display: flex; align-items: baseline; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.aw-row:last-child { border-bottom: 0; }
.aw-name { font-family: var(--display); font-size: 17px; font-weight: 500; color: var(--text); }
.aw-dots { flex: 1; min-width: 10px; }
.aw-price {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .brunchband-inner { grid-template-columns: 1fr; }
}

/* ---------- What's on ---------- */
.offers-section { background: var(--bg); }
.offers-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.offer-card {
  display: block; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 18px;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
a.offer-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 22px 46px rgba(18, 51, 46, 0.14); }
.offer-media { aspect-ratio: 16 / 9; overflow: hidden; }
.offer-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
a.offer-card:hover .offer-media img { transform: scale(1.06); }
.offer-body { padding: 24px 26px 28px; }
.offer-when {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 13px;
}
.offer-body h3 { font-family: var(--display); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.offer-body p { color: var(--para); font-size: 15px; }

/* ---------- Gallery ---------- */
/* A filmstrip you push along, not a marquee. The frames off Instagram are all
   different widths and a scroll track lets each keep its own. */
.gallery-section { background: var(--pine); }
.gal-rows {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
}
.gal-marquee {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px clamp(20px, 5vw, 60px) 18px;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.gal-marquee::-webkit-scrollbar { height: 0; }
.gal-marquee.dragging { cursor: grabbing; scroll-snap-type: none; }
.gal-track { display: contents; }
/* The frames come off reels and run anywhere from 2:1 to 4:1. Left at their own
   ratio a single one filled the whole strip, so the width is capped and the
   widest are cropped back to something a strip can hold several of. */
.gal-marquee img {
  height: 300px; width: auto; max-width: 460px; object-fit: cover; flex: none;
  border-radius: 14px;
  scroll-snap-align: center;
  cursor: zoom-in;
  filter: saturate(1.02);
  transition: transform 0.55s var(--ease), filter 0.45s;
}
.gal-marquee img:hover { transform: translateY(-6px); filter: saturate(1.1) brightness(1.05); }
.gal-marquee.dragging img { pointer-events: none; }
/* Arrows sit over the ends of the strip */
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(253, 248, 239, 0.92); border: 0; color: var(--pine);
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  box-shadow: 0 8px 22px rgba(11, 35, 31, 0.3);
  transition: transform 0.3s var(--ease), background 0.3s;
}
.gal-nav:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-50%) scale(1.08); }
.gal-prev { left: clamp(10px, 3vw, 34px); }
.gal-next { right: clamp(10px, 3vw, 34px); }
@media (max-width: 700px) {
  .gal-marquee img { height: 190px; }
  .gal-nav { display: none; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(11, 35, 31, 0.96);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 12px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); }
.lightbox button {
  position: absolute; background: rgba(253, 248, 239, 0.1); border: 1px solid rgba(253, 248, 239, 0.28);
  color: #fdf8ef; border-radius: 12px;
  width: 46px; height: 46px; font-size: 18px; transition: 0.3s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--blossom); background: var(--accent); }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ---------- Hours / contact / map ---------- */
#hours { background: var(--bg-2); }
.info-grid { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: clamp(36px, 5vw, 72px); align-items: stretch; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 620px; }
.hours-list { list-style: none; margin-top: 26px; }
.hours-list li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 12px; border-radius: 8px;
  font-size: 15px; transition: background 0.3s;
}
.hours-list li + li { box-shadow: 0 -1px 0 var(--line-soft); }
/* Today, so nobody has to work out which row they are on */
.hours-list li.today { background: var(--accent-soft); box-shadow: none; }
.hours-list li.today .day { color: var(--accent); }
.hours-list .day {
  min-width: 118px; text-transform: uppercase; letter-spacing: 0.1em;
  font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--text);
}
.hours-list .dots { flex: 1; min-width: 10px; }
.hours-list .time { color: var(--text); font-family: var(--mono); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.hours-list .closed { color: var(--accent); font-family: var(--mono); font-weight: 500; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.1em; }
.contact-lines { margin-top: 26px; display: grid; gap: 12px; color: var(--text); font-size: 15.5px; }
.contact-lines > div { display: flex; align-items: center; gap: 12px; }
.contact-lines a:hover { color: var(--accent); }
.cl-icon {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--accent-soft);
}
.cl-icon svg { width: 12px; height: 12px; fill: var(--accent); display: block; }
#map { min-height: 420px; height: 100%; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; z-index: 1; }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.map-pin::after {
  content: '';
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse {
  from { transform: scale(0.5); opacity: 0.9; }
  to { transform: scale(1.3); opacity: 0; }
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; color: #333; }
.leaflet-popup-content a { color: #8f2f43; font-weight: 500; }

/* ---------- Reservation ---------- */
.reserve-section { background: var(--bg); }
.reserve-panel {
  max-width: 740px; margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: clamp(30px, 5vw, 56px);
  box-shadow: 0 30px 70px rgba(18, 51, 46, 0.12);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.form-field { display: grid; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--text);
}
.form-field input, .form-field select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 13px 15px;
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
  appearance: none;
}
.form-field input:focus, .form-field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-field input::placeholder { color: rgba(91, 106, 99, 0.55); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--para) 50%), linear-gradient(135deg, var(--para) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.phone-row { display: grid; grid-template-columns: 132px 1fr; gap: 10px; }
.form-note { color: var(--para); font-size: 13px; margin-top: 18px; text-align: center; }
.form-submit { margin-top: 28px; text-align: center; }
.form-msg { margin-top: 18px; text-align: center; font-size: 14px; display: none; }
.form-msg.ok { display: block; color: #2f7a4d; }
.form-msg.err { display: block; color: #b03a2e; }

/* ---------- Footer ---------- */
footer { background: var(--pine-2); color: rgba(240, 246, 242, 0.7); border-top: 0; padding: 68px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 42px; margin-bottom: 46px; }
.footer-grid h4 {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 18px; color: var(--blossom);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: rgba(240, 246, 242, 0.7); font-size: 14px; list-style: none; }
.footer-grid a:hover { color: var(--blossom); }
.footer-grid ul { display: grid; gap: 9px; }
.footer-logo { height: 42px; width: auto; margin-bottom: 16px; }
.socials { display: flex; gap: 12px; margin-top: 22px; }
.socials a {
  width: 40px; height: 40px;
  display: block; border-radius: 11px; overflow: hidden;
  transition: transform 0.3s var(--ease);
}
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-3px); }
.footer-bottom {
  border-top: 1px solid rgba(240, 246, 242, 0.12); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: rgba(240, 246, 242, 0.7); font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.04em;
}
.footer-bottom a:hover { color: var(--blossom); }

/* ---------- Subpages ---------- */
.page-hero {
  height: 46vh; min-height: 340px; position: relative; overflow: hidden; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; text-align: center;
}
.page-hero .hero-bg { inset: 0; }
.page-hero .hero-bg img { animation: none; }
.page-hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(11, 35, 31, 0.72) 0%, rgba(11, 35, 31, 0.5) 45%, rgba(11, 35, 31, 0.84) 100%);
}
.hero-video { display: block; }
/* A short wide band shows only a slice of a portrait frame, which blown up
   reads as a bad crop; a light blur turns it into a backdrop. Scoped to a video
   that actually has a source, so the poster on its own stays sharp. */
.page-hero .hero-video[src] { filter: blur(3px) saturate(1.04); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-video { display: none; }
  .page-hero .hero-bg {
    background: url('../images/menu-hero-poster.jpg') center / cover no-repeat;
  }
}
.page-hero h1 { font-size: clamp(36px, 5.4vw, 66px); position: relative; z-index: 2; color: #fdf8ef; letter-spacing: -0.02em; }
.page-hero .kicker { position: relative; z-index: 2; color: var(--blossom); }
.page-hero .t-script { color: var(--blossom); }
.legal { max-width: 800px; margin: 0 auto; }
.legal h1 { letter-spacing: -0.02em; }
.legal h2 { font-size: 23px; margin: 42px 0 14px; color: var(--accent-2); font-weight: 600; }
.legal p, .legal li { color: var(--para); font-size: 15.5px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
  background: var(--pine); border: 1px solid var(--accent-2); color: #f6f1e6;
  border-radius: 12px;
  padding: 13px 26px; font-size: 13.5px; z-index: 100;
  opacity: 0; pointer-events: none; transition: 0.4s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .menu-cols { grid-template-columns: 1fr; }
  .reserve-badge { right: 16px; bottom: 16px; }
}
@media (max-width: 900px) {
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-logo { grid-column: 1; justify-self: start; }
  .nav-logo img { height: 36px; }
  .nav-links {
    position: fixed; inset: 0;
    height: 100svh;
    background: var(--pine-2);
    flex-direction: column; justify-content: center; align-items: center; gap: 24px;
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
    grid-column: auto; grid-row: auto;
    z-index: 65;
    list-style: none;
  }
  .nav-links.open {
    clip-path: inset(0);
    visibility: visible;
    transition: clip-path 0.5s var(--ease);
  }
  .nav-links a, .nav.scrolled .nav-links a, .page-solid-nav .nav-links a {
    font-size: 16px; letter-spacing: 0.14em; text-indent: 0.14em; display: inline-block; color: #fdf8ef;
  }
  .nav-links .nav-cta { border-color: var(--accent); background: var(--accent); color: var(--on-accent) !important; padding: 13px 26px !important; }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(16px); }
  .nav-links .lang-switch { display: inline-flex; color: rgba(246, 241, 230, 0.4); }
  .nav-links .lang-switch button,
  .nav.scrolled .nav-links .lang-switch button { color: #f6f1e6; }
  .nav-links.open li { animation: navItemIn 0.5s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.06s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.12s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.18s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.24s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.3s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.36s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.42s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links {
    position: static; height: auto; background: none;
    flex-direction: row; clip-path: none; visibility: visible; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 12px; }
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  #map { min-height: 320px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  /* iOS ignores background-attachment: fixed */
  #menu.menu-section, .contact-band { background-attachment: scroll; }
  body { background-attachment: scroll; }
}
@media (min-width: 901px) {
  .nav-links .mobile-only { display: none; }
}
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-tag { letter-spacing: 0.26em; text-indent: 0.26em; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { max-width: 78%; }
  .reserve-badge .badge-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; clip-path: none; transform: none; }
}

/* ---------- Account ---------- */
.nav-auth {
  background: var(--accent); color: var(--on-accent) !important; border: 1px solid var(--accent);
  border-radius: 9px; padding: 9px 18px !important; letter-spacing: 0.12em;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.nav-auth::after { display: none; }
.nav-auth:hover { background: var(--pine); border-color: var(--pine); }
.nav-auth.signed-in { background: transparent; color: inherit !important; border-color: currentColor; }

.page-account { background: var(--pine-2); }
.page-account::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('/images/account-bg.jpg') center/cover no-repeat;
}
.page-account::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 35, 31, 0.8), rgba(11, 35, 31, 0.88) 55%, rgba(11, 35, 31, 0.95));
}
.page-account .nav {
  background: rgba(11, 35, 31, 0.94); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(240, 246, 242, 0.1); padding: 10px 0;
}
.page-account .nav .nav-links a, .page-account .nav .nav-right a,
.page-account .nav.scrolled .nav-links a, .page-account .nav.scrolled .nav-right a { color: #f6f1e6; }
.page-account .nav .burger span, .page-account .nav.scrolled .burger span { background: #f6f1e6; }
.page-account .nav .nav-logo .logo-light { opacity: 1; }
.page-account .nav .nav-logo .logo-dark { opacity: 0; }
.page-account .nav-logo img { height: 40px; }
.page-account .lang-switch, .page-account .nav.scrolled .lang-switch { color: rgba(246, 241, 230, 0.35); }
.page-account .lang-switch button, .page-account .nav.scrolled .lang-switch button { color: rgba(246, 241, 230, 0.8); }
.page-account .lang-switch button.active { color: var(--on-accent); }

.account-main { padding: 92px 0 34px; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; }
.account-main > .container { width: 100%; }
.account-main section { padding: 0; }
.page-account footer { border-top: 1px solid rgba(240, 246, 242, 0.1); background: rgba(11, 35, 31, 0.6); }
.page-account .section-title, .page-account h1, .page-account h2, .page-account h3 { color: #f6f1e6; }
.page-account .kicker { color: var(--blossom); }
.page-account .t-script { color: var(--blossom); }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  width: min(560px, 100%);
  background: rgba(253, 248, 239, 0.96);
  border: 1px solid rgba(253, 248, 239, 0.5);
  border-radius: 20px; padding: 30px 32px; text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}
.auth-card, .auth-card .section-title, .auth-card h1, .auth-card h2, .auth-card h3 { color: var(--text); }
.auth-logo { width: 52px; height: 52px; border-radius: 50%; margin-bottom: 8px; }
.auth-card .section-title { font-size: 25px; margin: 6px 0 4px; }
.auth-sub { color: var(--para); font-size: 13px; line-height: 19px; margin-bottom: 12px; }
.auth-form { display: grid; gap: 6px; text-align: left; }
#signupForm { grid-template-columns: 1fr 1fr; column-gap: 14px; }
#signupForm .full { grid-column: 1 / -1; }
.auth-form label {
  font-family: var(--mono); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--text); margin-top: 6px;
}
.auth-form input {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; color: var(--text);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-form .btn { margin-top: 14px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--para); line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  color: var(--para); padding: 9px 6px; font-size: 13px; font-family: var(--sans); transition: 0.25s;
}
.gender-row button:hover { border-color: var(--accent); }
.gender-row button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-msg { font-size: 13px; min-height: 18px; margin-top: 8px; text-align: center; grid-column: 1 / -1; }
.auth-msg.err { color: #b03a2e; }
.auth-msg.ok { color: #2f7a4d; }
.auth-switch { font-size: 13px; color: var(--para); text-align: center; margin-top: 10px; grid-column: 1 / -1; }
.auth-switch a { color: var(--accent); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 23px; font-weight: 600; margin-bottom: 8px; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 40px; }
.member-card {
  background: rgba(253, 248, 239, 0.95); border: 1px solid rgba(253, 248, 239, 0.4);
  border-radius: 18px; padding: 26px; color: var(--para);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.member-card h3 { font-family: var(--display); font-size: 20px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.member-card .btn { margin-top: 14px; width: 100%; }
.member-card .muted { color: var(--para); font-size: 14px; }

.fidelity-card { background: linear-gradient(140deg, var(--accent-2), #0b3b36 60%, var(--pine)); border-color: rgba(220, 147, 164, 0.35); }
.fidelity-card h3, .fidelity-card .muted, .fidelity-card p { color: rgba(240, 246, 242, 0.8); }
.fidelity-card .kicker { display: block; margin-bottom: 6px; color: var(--blossom); }
.fidelity-card b { font-family: var(--display); font-size: 52px; font-weight: 600; color: #fff; line-height: 1; }
.fidelity-card p { font-size: 13px; margin-top: 10px; line-height: 20px; }
.fidelity-card.off b { color: rgba(240, 246, 242, 0.5); }

.member-heading { font-family: var(--display); font-size: 22px; font-weight: 600; margin-bottom: 16px; color: #f6f1e6; }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px;
  background: rgba(253, 248, 239, 0.95);
  border: 1px solid rgba(253, 248, 239, 0.4); border-radius: 14px; padding: 16px 20px;
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--mono); font-size: 17px; color: var(--accent); font-variant-numeric: tabular-nums; }
.res-when span { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--para); }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 600; color: var(--text); }
.res-meta span { font-size: 12px; color: var(--para); }
.res-badge {
  font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; border: 1px solid;
}
.res-badge.pending { color: var(--gold); border-color: rgba(184, 134, 58, 0.55); }
.res-badge.confirmed { color: #2f7a4d; border-color: rgba(47, 122, 77, 0.45); }
.res-badge.cancelled { color: #b03a2e; border-color: rgba(176, 58, 46, 0.45); }

.prefill-note { color: var(--accent); font-size: 13px; margin-top: 10px; }
.hidden { display: none !important; }

@media (max-width: 720px) {
  .account-main { padding: 104px 0 46px; min-height: auto; }
  .nav-auth { padding: 8px 13px !important; font-size: 10.5px; }
  .auth-card { padding: 24px 18px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
}

/* ---------- Contact band ---------- */
.contact-band {
  position: relative; padding: 92px 0; overflow: hidden;
  background: url('/images/contact-bg.jpg') center/cover no-repeat fixed;
}
.contact-band::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 35, 31, 0.93), rgba(18, 51, 46, 0.86) 45%, rgba(11, 35, 31, 0.94));
}
.contact-band > .container { position: relative; }
.contact-inner { text-align: center; max-width: 1060px; margin: 0 auto; }
.contact-inner .section-title { font-size: clamp(34px, 4.6vw, 56px); margin-bottom: 14px; color: #fdf8ef; }
.contact-inner .kicker { color: var(--blossom); }
.contact-inner .t-script { color: var(--blossom); }
.contact-lead { color: rgba(240, 246, 242, 0.75); max-width: 620px; margin: 0 auto 38px; line-height: 26px; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 34px; }
.contact-card {
  display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none;
  background: rgba(253, 248, 239, 0.07); border: 1px solid rgba(253, 248, 239, 0.2); border-radius: 14px;
  padding: 18px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
a.contact-card:hover { border-color: var(--blossom); transform: translateY(-3px); background: rgba(253, 248, 239, 0.13); }
.cc-icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: rgba(220, 147, 164, 0.16); border: 1px solid rgba(253, 248, 239, 0.16);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--blossom); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(240, 246, 242, 0.8); }
.cc-body b { font-weight: 500; font-size: 14.5px; color: #fdf8ef; overflow-wrap: anywhere; }

.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.contact-band .socials { justify-content: center; }

@media (max-width: 720px) {
  .contact-band { padding: 66px 0; background-attachment: scroll; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
}

@media (max-height: 900px) {
  .account-main { align-items: flex-start; padding-top: 84px; }
}

/* ---------- Auth card details ---------- */
.auth-logo { display: block; margin-left: auto; margin-right: auto; }

.auth-form select {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; color: var(--text);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.auth-form select:focus { outline: none; border-color: var(--accent); }
.auth-form select option { background: var(--panel); color: var(--text); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; line-height: 0;
  padding: 9px 11px; color: var(--para); transition: color 0.2s;
}
.pw-eye svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on { color: var(--accent); }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--text); }

.auth-form label.stay-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0;
  color: var(--para); cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.stay-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stay-line .stay-row { margin-top: 12px; }
.forgot-link {
  margin-top: 12px; font-size: 13px; color: var(--accent);
  text-decoration: underline; white-space: nowrap;
}
.forgot-link:hover { color: var(--accent-2); }
.birthday-note {
  font-size: 12px; color: var(--accent); margin-top: 10px; text-align: center;
  background: var(--accent-soft); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 12px;
}

/* ---------- Members' deal prices ---------- */
.mi-was { color: rgba(240, 246, 242, 0.5); margin-right: 9px; font-size: 0.92em; }
.menu-page .mi-was { color: var(--para); }
.mi-deal { color: var(--terracotta); font-weight: 500; }
.nav-deals { color: var(--terracotta) !important; }

/* ---------- Deals page ---------- */
.deals-main { align-items: flex-start; padding-top: 112px; }
.deals-main .section-head { margin-bottom: 28px; }
.deals-empty {
  background: rgba(253, 248, 239, 0.95); border: 1px solid rgba(253, 248, 239, 0.4); border-radius: 18px;
  padding: 40px 30px; text-align: center; color: var(--para); max-width: 560px; margin: 0 auto;
}
.deals-empty .contact-actions { margin-top: 22px; margin-bottom: 0; }
.deal-group { margin-bottom: 38px; }
.deal-group h2 { font-family: var(--display); font-size: 25px; font-weight: 600; margin-bottom: 16px; color: #f6f1e6; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.deal-card {
  position: relative; display: flex; gap: 14px; align-items: center;
  background: rgba(253, 248, 239, 0.95); border: 1px solid rgba(194, 101, 58, 0.3); border-radius: 16px;
  padding: 14px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); border-color: var(--terracotta); }
.deal-card img { width: 74px; height: 74px; border-radius: 12px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-family: var(--display); font-size: 17px; font-weight: 600; margin-bottom: 2px; color: var(--text); }
.deal-body p { color: var(--para); font-size: 12px; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-prices { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); }
.deal-prices s { color: var(--para); font-size: 13px; }
.deal-prices b { color: var(--terracotta); font-size: 17px; font-weight: 500; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: rgba(194, 101, 58, 0.14);
  color: var(--terracotta); border-radius: 999px; padding: 4px 10px;
  font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.04em;
}

/* ---------- Delete account ---------- */
.del-card { max-width: 640px; text-align: left; }
.del-card .section-title { text-align: center; }
.del-card .auth-sub { text-align: center; margin-bottom: 24px; }
.del-block { margin-bottom: 24px; }
.del-block h2 {
  font-family: var(--mono); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--accent); margin-bottom: 10px;
}
.del-list { list-style: none; display: grid; gap: 8px; }
.del-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--para); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.del-note { font-size: 13px; color: var(--para); margin-top: 12px; line-height: 1.6; }
.del-or { margin-top: 20px; }
.del-app { border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 22px; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }
.btn.danger { background: #9c3327; border-color: #9c3327; color: #fff; }
.btn.danger::before { background: #7a251b; }
.btn.danger:hover { border-color: #7a251b; color: #fff; }

/* ---------- Reservation time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--para);
  padding: 13px 15px; font-family: var(--sans); font-size: 15px;
  text-align: left; transition: border-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.timepick-btn:hover { border-color: var(--accent); }
.timepick-btn.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.timepick-btn.chosen { color: var(--text); }
.timepick-btn .tp-caret {
  width: 0; height: 0; flex: none; margin-left: auto;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--para);
  transition: transform 0.25s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--accent); flex: none; }
.timepick-panel {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 236px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(18, 51, 46, 0.18);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: var(--bg); border: 1px solid transparent; border-radius: 8px; color: var(--para);
  padding: 9px 4px; font-family: var(--mono); font-weight: 500; font-size: 13px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.timepick-slot:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.timepick-slot.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

@media (max-width: 720px) {
  .timepick-panel { grid-template-columns: repeat(4, 1fr); max-height: 200px; }
}

/* ---------- Boot cover ---------- */
.page-boot {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--bg); transition: opacity 0.25s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 100px; height: 100px; display: grid; place-items: center; }
.boot-mark img { width: 58px; height: 58px; border-radius: 50%; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--line-soft); border-top-color: var(--accent);
  animation: bootSpin 0.9s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.4s; } }

/* ---------- Marketing ---------- */
/* Announcement strip above the fixed nav, which promo.js pushes down by the
   measured height. Two identical copies slide exactly half the track, so the
   seam never shows. */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: var(--accent);
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  overflow: hidden; padding: 8px 0;
}
.promo-track {
  display: flex; width: max-content;
  animation-name: promo-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text {
  flex: none; white-space: nowrap; padding-right: 5rem;
  color: var(--on-accent); font-family: var(--sans); font-weight: 700;
  font-size: 13.5px; letter-spacing: 0.05em; text-decoration: none;
}
a.promo-banner-text:hover { color: #fff; }
@keyframes promo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-track { animation: none; }
}

@media (max-width: 860px) {
  .promo-banner { font-size: 12px; padding: 7px 12px; }
}

.promo-notice {
  display: block; margin: 0 auto 26px; max-width: 640px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--sans); font-weight: 700;
  border-radius: 999px; padding: 11px 26px;
  text-align: center; font-size: 13.5px; letter-spacing: 0.05em;
}
.promo-notice.hidden { display: none; }

.field-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--para); }