/* ==========================================================================
   La Cucina di Alice — theme

   Editorial, not app-like. Photography runs full-bleed, type carries the page,
   colour is nearly absent and used only to point at one action: reserving a
   table. Glass is reserved for surfaces that actually float (the navbar, the
   language menu, the booking widget) — content is never boxed into cards.
   Every selector is prefixed .lca- so nothing collides with other projects.

   The palette is the restaurant's own published identity, taken from
   lacucinadialice.ch's stylesheet: white ground (#FFFFFF), the brand blue
   #365072 carrying both text and action (their logo, body copy and menu ink
   are all this one blue), their slate #59656D and blue-grey #7D909F as the
   quieter voices, #CCCCCC hairlines and #F8F8F8 as the only other greys.
   Display type is Fraunces, whose soft wonky serifs carry the playful
   streak; text runs in Albert Sans.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */

:root {
  --lca-bg:            #FFFFFF;   /* their body background, verbatim */
  --lca-bg-alt:        #F8F8F8;   /* their hover/alt grey */
  --lca-surface:       #FFFFFF;
  --lca-text:          #365072;   /* their body + brand blue */
  --lca-text-soft:     #59656D;   /* their slate */
  --lca-text-faint:    #7D909F;   /* their link blue-grey */
  --lca-rule:          #CCCCCC;   /* their hairline grey */
  --lca-accent:        #365072;   /* one blue for ink and action alike */
  --lca-accent-strong: #222222;   /* their hover ink */
  --lca-on-accent:     #FFFFFF;
  --lca-inverse-bg:    #365072;   /* the footer wears the brand blue */
  --lca-inverse-text:  #FFFFFF;
  --lca-shadow:        rgba(54, 80, 114, .10);

  /* glass, only for surfaces that float over content */
  --lca-glass-bg:      rgba(255, 255, 255, .62);
  --lca-glass-strong:  rgba(255, 255, 255, .93);
  /* Used where the blur is dropped — it has to carry the contrast alone. */
  --lca-glass-solid:   rgba(255, 255, 255, .94);
  --lca-glass-border:  rgba(54, 80, 114, .12);
  --lca-glass-shadow:  0 8px 32px rgba(54, 80, 114, .08);
  --lca-glass-blur:    blur(16px) saturate(1.2);

  --lca-radius:      14px;    /* the few surfaces that are boxed at all */
  --lca-radius-sm:   10px;    /* inputs, slots, chips */
  --lca-radius-pill: 999px;   /* buttons */

  --lca-nav-h:  84px;
  --lca-shell:  1180px;
  --lca-measure: 34rem;               /* editorial column */
  --lca-section: clamp(5.5rem, 11vw, 10rem);

  --lca-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --lca-body:    "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;

  /* One motion system. An ease-out curve at ~380ms for anything that moves a
     panel, a shorter 300ms for hover feedback so pointer response never feels
     laggy. Everything on the site uses these two, never an ad-hoc duration. */
  --lca-ease:      cubic-bezier(.22, .61, .36, 1);
  --lca-dur:       380ms;   /* drawers, dropdowns, step changes, reveals */
  --lca-dur-hover: 300ms;   /* links, buttons, inputs */
}

/* The real site defines no dark palette, so dark mode is the same brand
   blue taken into the night: every value below is #365072's own hue (214°)
   deepened or lifted, never a new colour. */
@media (prefers-color-scheme: dark) {
  :root {
    --lca-bg:            #101927;
    --lca-bg-alt:        #15202F;
    --lca-surface:       #182333;
    --lca-text:          #E9EFF6;
    --lca-text-soft:     #A9B9CB;
    --lca-text-faint:    #75889D;
    --lca-rule:          #2B3A4F;
    --lca-accent:        #9FBBDD;
    --lca-accent-strong: #C0D4EA;
    --lca-on-accent:     #101927;
    --lca-inverse-bg:    #E9EEF4;
    --lca-inverse-text:  #365072;
    --lca-shadow:        rgba(0, 0, 0, .45);

    --lca-glass-bg:     rgba(16, 25, 39, .58);
    --lca-glass-strong: rgba(14, 22, 34, .94);
    --lca-glass-solid:  rgba(14, 22, 34, .95);
    --lca-glass-border: rgba(233, 239, 246, .13);
    --lca-glass-shadow: 0 8px 32px rgba(0, 0, 0, .34);
  }
}

@media (max-width: 640px) { :root { --lca-nav-h: 66px; } }

/* --- base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: var(--lca-nav-h);
  background: var(--lca-bg);
  color: var(--lca-text);
  font-family: var(--lca-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
body[data-page="home"] { padding-top: 0; }

img, svg, iframe { max-width: 100%; display: block; }
figure { margin: 0; }   /* the UA default is 1em 40px, which breaks full-bleed */

h1, h2 {
  font-family: var(--lca-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3 { font-size: 1.05rem; font-family: var(--lca-body); font-weight: 700;
     letter-spacing: .01em; margin: 0 0 .5em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--lca-accent); text-underline-offset: 4px; }
a:hover { color: var(--lca-accent-strong); }

:focus-visible { outline: 2px solid var(--lca-accent); outline-offset: 4px; }

.lca-skip {
  position: fixed; left: -9999px; top: 0; z-index: 300;
  background: var(--lca-accent); color: var(--lca-on-accent); padding: .7rem 1.1rem;
}
.lca-skip:focus { left: 0; }

/* --- layout ------------------------------------------------------------- */

.lca-shell { width: min(100% - 3rem, var(--lca-shell)); margin-inline: auto; }

.lca-section { padding-block: var(--lca-section); }

/* An editorial column: one idea, centred, with room around it. */
.lca-statement {
  max-width: var(--lca-measure); margin-inline: auto; text-align: center;
}
.lca-statement h2 { margin-bottom: .6em; }
.lca-statement p { color: var(--lca-text-soft); }

.lca-eyebrow {
  display: block;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--lca-text-faint);
  margin-bottom: 1.6rem;
}
.lca-eyebrow--light { color: rgba(255, 255, 255, .62); }

.lca-lede {
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  line-height: 1.7; color: var(--lca-text-soft); max-width: 56ch;
}
.lca-prose { max-width: var(--lca-measure); color: var(--lca-text-soft); }
.lca-prose p { margin-bottom: 1.4em; }

.lca-page-head { padding-block: clamp(4rem, 9vw, 8rem) clamp(3.5rem, 8vw, 7rem); }
.lca-page-head h1 { margin-bottom: .35em; }
/* A page head followed straight by a photograph needs no extra gap. */
.lca-page-head + .lca-section { padding-top: 0; }

.lca-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
@media (max-width: 900px) {
  .lca-split { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
}

.lca-fineprint { font-size: .85rem; line-height: 1.6; color: var(--lca-text-faint); }

.lca-link {
  display: inline-block;
  font-size: .78rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none;
  color: var(--lca-text); padding-bottom: .5rem;
  border-bottom: 1px solid var(--lca-rule);
  transition: border-color var(--lca-dur-hover) var(--lca-ease), color var(--lca-dur-hover) var(--lca-ease);
}
.lca-link:hover { color: var(--lca-accent); border-bottom-color: var(--lca-accent); }

/* --- full-bleed photography --------------------------------------------- */

.lca-bleed { position: relative; width: 100%; overflow: hidden; }
.lca-bleed img { width: 100%; height: 100%; object-fit: cover; }
.lca-bleed--tall  { height: clamp(28rem, 78vh, 46rem); }
.lca-bleed--mid   { height: clamp(22rem, 58vh, 36rem); }
.lca-bleed figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem clamp(1.5rem, 5vw, 4rem) 1.5rem;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  background: linear-gradient(to top, rgba(10, 16, 26, .55), transparent);
}

/* --- chapters ------------------------------------------------------------
   The page is told in short chapters, bocuse-style density with our pace:
   nearly every block of text keeps a photograph beside it, on the bright
   ivory ground — no dark veiled bands between hero and footer. Photos
   alternate sides; on a phone the photo leads and the text follows. */

.lca-chapter {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
.lca-chapter + .lca-chapter { margin-top: clamp(4.5rem, 9vw, 8rem); }
.lca-chapter__media {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
}
.lca-chapter__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.lca-chapter--flip .lca-chapter__media { order: 2; }
.lca-chapter__body { max-width: 30rem; }
.lca-chapter--flip .lca-chapter__body { justify-self: end; }
.lca-chapter__body h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.lca-chapter__body p { color: var(--lca-text-soft); }

/* A quotation inside a chapter: still type, never a poster band. */
.lca-chapter__quote {
  margin: 1.75rem 0 0; padding-left: 1.25rem;
  border-left: 2px solid var(--lca-accent);
  font-family: var(--lca-display); font-style: italic;
  font-size: 1.08rem; line-height: 1.55; color: var(--lca-text);
}
.lca-chapter__quote footer {
  font-family: var(--lca-body); font-style: normal; font-size: .66rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--lca-text-faint); margin-top: .75rem;
}

@media (max-width: 900px) {
  .lca-chapter { grid-template-columns: 1fr; gap: 1.75rem; }
  .lca-chapter--flip .lca-chapter__media { order: 0; }  /* photo first */
  .lca-chapter--flip .lca-chapter__body { justify-self: start; }
  .lca-chapter__media { aspect-ratio: 4 / 3; }
  .lca-chapter + .lca-chapter { margin-top: clamp(3.5rem, 10vw, 5rem); }
}

/* --- navigation --------------------------------------------------------- */

.lca-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--lca-glass-bg);
  -webkit-backdrop-filter: var(--lca-glass-blur);
          backdrop-filter: var(--lca-glass-blur);
  border-bottom: 1px solid var(--lca-glass-border);
  transition: background var(--lca-dur) var(--lca-ease), border-color var(--lca-dur) var(--lca-ease);
}
.lca-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--lca-nav-h);
}

/* Clear over the hero photograph, frosted once the page scrolls past it. */
.lca-nav--over {
  background: linear-gradient(to bottom, rgba(11, 18, 29, .42), transparent);
  border-bottom-color: transparent;
}
.lca-nav--over .lca-nav__link,
.lca-nav--over .lca-lang__button { color: rgba(255, 255, 255, .88); }
.lca-nav--over .lca-nav__link:hover,
.lca-nav--over .lca-nav__link[aria-current="page"] { color: #fff; }
.lca-nav--over .lca-nav__link::after { background: #fff; }
.lca-nav--over .lca-lang__button:hover { color: #fff; }

/* The restaurant's own script logo (lacucinadialice.ch), masked and painted
   with currentColor so the over-hero, frosted, menu-open and dark cases all
   come free. */
.lca-brand {
  display: inline-flex; align-items: center; flex: none;
  color: var(--lca-text); text-decoration: none;
}
.lca-brand:hover { color: var(--lca-text); }
.lca-nav--over .lca-brand,
.lca-nav--over .lca-brand:hover { color: #fff; }
.lca-brand__mark {
  display: block; height: 52px; aspect-ratio: 220 / 120;
  background-color: currentColor;
  -webkit-mask: url(/assets/img/lca-logo.png) center/contain no-repeat;
          mask: url(/assets/img/lca-logo.png) center/contain no-repeat;
  transition: background-color var(--lca-dur) var(--lca-ease);
}
@media (max-width: 640px) { .lca-brand__mark { height: 44px; } }

.lca-nav__links { display: flex; align-items: center; gap: .35rem; }

.lca-nav__link {
  position: relative; color: var(--lca-text-soft); text-decoration: none;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: .6rem .85rem; white-space: nowrap;
  transition: color var(--lca-dur-hover) var(--lca-ease);
}
.lca-nav__link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
  height: 1px; background: var(--lca-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--lca-dur) var(--lca-ease);
}
.lca-nav__link:hover { color: var(--lca-text); }
.lca-nav__link:hover::after,
.lca-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.lca-nav__link[aria-current="page"] { color: var(--lca-text); }

/* --- hamburger ---------------------------------------------------------- */
/* 48×48 tap target (over the 44px minimum) around a 24px icon. The same
   button closes the menu: the bars converge into an X. */

.lca-burger {
  display: none;                     /* only under .lca-js, only on mobile */
  width: 48px; height: 48px; margin-right: -10px;
  background: none; border: 0; padding: 0; cursor: pointer;
  place-items: center; color: var(--lca-text);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--lca-dur) var(--lca-ease);
}
.lca-burger__box { position: relative; display: block; width: 24px; height: 16px; }
.lca-burger__line {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--lca-dur) var(--lca-ease), opacity var(--lca-dur-hover) var(--lca-ease);
}
.lca-burger__line:nth-child(1) { top: 0; }
.lca-burger__line:nth-child(2) { top: 7.25px; }
.lca-burger__line:nth-child(3) { top: 14.5px; }

.lca-burger[aria-expanded="true"] .lca-burger__line:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.lca-burger[aria-expanded="true"] .lca-burger__line:nth-child(2) { opacity: 0; }
.lca-burger[aria-expanded="true"] .lca-burger__line:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

.lca-nav--over .lca-burger { color: #fff; }
/* With the overlay open the bar sits on the overlay, not on the photograph,
   so the icon goes back to ink whatever the hero was doing. */
.lca-nav--menu-open .lca-burger,
.lca-nav--over.lca-nav--menu-open .lca-burger { color: var(--lca-text); }
.lca-nav--menu-open .lca-brand,
.lca-nav--over.lca-nav--menu-open .lca-brand { color: var(--lca-text); }
.lca-nav--menu-open,
.lca-nav--over.lca-nav--menu-open {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* --- language switcher -------------------------------------------------- */

/* Two copies exist: one in the persistent bar (mobile) and one in the link
   row / overlay (desktop). Exactly one is displayed at any width. */
.lca-nav__actions { display: flex; align-items: center; gap: .25rem; }
.lca-lang--bar { display: none; }

.lca-lang { position: relative; }
.lca-lang__button {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 0; padding: .6rem .5rem;
  font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  color: var(--lca-text-soft); cursor: pointer;
  transition: color var(--lca-dur-hover) var(--lca-ease);
}
.lca-lang__button:hover { color: var(--lca-text); }
.lca-lang__caret { font-size: .5em; opacity: .55; transition: transform var(--lca-dur-hover) var(--lca-ease); }
.lca-lang[data-open="true"] .lca-lang__caret { transform: rotate(180deg); }

.lca-lang__list {
  position: absolute; right: 0; top: calc(100% + .5rem);
  list-style: none; margin: 0; padding: .4rem;
  background: var(--lca-glass-strong);
  -webkit-backdrop-filter: var(--lca-glass-blur);
          backdrop-filter: var(--lca-glass-blur);
  border: 1px solid var(--lca-glass-border);
  border-radius: var(--lca-radius);
  box-shadow: var(--lca-glass-shadow);
  min-width: 190px; z-index: 10;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--lca-dur) var(--lca-ease), transform var(--lca-dur) var(--lca-ease), visibility 0s linear var(--lca-dur);
}
.lca-lang[data-open="true"] .lca-lang__list,
/* Without JavaScript the toggle never fires, so keyboard focus opens it too. */
.lca-lang:focus-within .lca-lang__list {
  opacity: 1; visibility: visible; transform: none;
  /* no delay on the way in, so the options are focusable immediately */
  transition: opacity var(--lca-dur) var(--lca-ease),
              transform var(--lca-dur) var(--lca-ease),
              visibility 0s linear 0s;
}

.lca-lang__option {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border-radius: var(--lca-radius-sm);
  text-decoration: none; color: var(--lca-text); font-size: .9rem;
  transition: background var(--lca-dur-hover) var(--lca-ease);
}
.lca-lang__option:hover { background: color-mix(in srgb, var(--lca-text) 7%, transparent); color: var(--lca-text); }
.lca-lang__option[aria-current="true"] { color: var(--lca-accent); }
.lca-lang__option .fi { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lca-lang__code { margin-left: auto; font-size: .66rem; letter-spacing: .1em; color: var(--lca-text-faint); }
@media (prefers-color-scheme: dark) {
  .lca-lang__option .fi { box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
}

/* Home and Reservations exist for the overlay only; the desktop bar stays at
   three links plus the reserve action. */
.lca-nav__link[data-overlay-only] { display: none; }

@media (max-width: 1000px) {
  /* ---- baseline: no JavaScript ------------------------------------------
     The links are laid out in the bar itself and are always reachable, and
     the hamburger is hidden so there is no button that does nothing.
     Navigation must never depend on a script having loaded. */
  .lca-nav { position: static; }       /* taller bar must not cover content */
  body, body[data-page="home"] { padding-top: 0; }
  .lca-nav__inner { flex-wrap: wrap; padding-bottom: .5rem; }
  .lca-burger { display: none; }
  .lca-nav__links {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .25rem .5rem; width: 100%;
  }
  .lca-nav__link[data-overlay-only] { display: inline-block; }

  /* ---- enhanced: JavaScript ran, collapse into a full-screen overlay ---- */
  .lca-js .lca-nav { position: fixed; z-index: 200; }
  .lca-js body { padding-top: var(--lca-nav-h); }
  .lca-js body[data-page="home"] { padding-top: 0; }
  .lca-js .lca-nav__inner { flex-wrap: nowrap; padding-bottom: 0; }
  .lca-js .lca-burger { display: grid; }

  /* Language lives in the bar on mobile, visible without opening the menu.
     The overlay copy stands down so there is never one of each on screen. */
  .lca-lang--bar { display: block; }
  .lca-lang--menu { display: none; }
  .lca-lang--bar .lca-lang__button { min-height: 44px; min-width: 44px; padding: .5rem .55rem; }
  .lca-lang--bar .lca-lang__list {
    position: absolute; right: 0; top: calc(100% + .5rem);
    width: auto; min-width: 190px;
    background: var(--lca-glass-strong);
    -webkit-backdrop-filter: var(--lca-glass-blur); backdrop-filter: var(--lca-glass-blur);
    border: 1px solid var(--lca-glass-border); box-shadow: var(--lca-glass-shadow);
    display: block;
  }
  /* it has to clear the overlay, which the bar's own stacking context holds */
  .lca-js .lca-nav__actions { position: relative; z-index: 160; }

  /* The overlay is a child of the bar, so the bar's own z-index cannot lift
     the wordmark and the X above it — they need to out-rank the overlay
     inside that same stacking context, or the close control disappears. */
  .lca-js .lca-brand,
  .lca-js .lca-burger { position: relative; z-index: 160; }

  /* The overlay covers the page entirely and is opaque, so it can never be
     mistaken for part of the page. The bar rides above it (z-index 200) so
     the hamburger — now an X — stays put and closes it. */
  .lca-js .lca-nav__links {
    position: fixed; inset: 0; z-index: 150;
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; justify-content: center; gap: 0; width: auto;
    background: var(--lca-bg);
    padding: calc(var(--lca-nav-h) + 1.5rem) clamp(1.5rem, 7vw, 3rem) 2.5rem;
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    /* visibility flips instantly on open so the first link is focusable in the
       same tick, and is delayed on close until the fade has finished. Putting
       visibility on a duration instead would leave the panel unfocusable
       mid-transition, which silently breaks the keyboard path. */
    transition: opacity var(--lca-dur) var(--lca-ease), transform var(--lca-dur) var(--lca-ease),
                visibility 0s linear var(--lca-dur);
  }
  .lca-js .lca-nav__links[data-open="true"] {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--lca-dur) var(--lca-ease), transform var(--lca-dur) var(--lca-ease),
                visibility 0s linear 0s;
  }
  /* the bar is over the overlay now, not over the hero */
  .lca-js .lca-nav--over .lca-nav__links .lca-nav__link { color: var(--lca-text); }

  /* Links become the content of the screen: display type, big tap targets. */
  .lca-js .lca-nav__link {
    font-family: var(--lca-display); font-weight: 400;
    font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.15;
    letter-spacing: 0; text-transform: none; text-align: center;
    color: var(--lca-text); padding: .42em .2rem; min-height: 44px;
    border-bottom: 1px solid var(--lca-rule);
  }
  .lca-js .lca-nav__link[aria-current="page"] { color: var(--lca-accent); }
  .lca-nav__link::after { display: none; }

  /* The overlay carries no language control of its own — it lives in the bar,
     where it is reachable without opening the menu. */
  .lca-lang--bar .lca-lang__option { min-height: 44px; }

  .lca-js .lca-nav__links .lca-btn {
    margin: 2rem auto 0; width: min(100%, 22rem);
    padding-block: 1.15rem; min-height: 48px;
  }

  /* no-JS bar keeps the old compact link styling */
  .lca-nav__link { padding: .95rem .2rem; }
}

/* --- buttons ------------------------------------------------------------ */

.lca-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--lca-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1;
  padding: 1.15rem 2.4rem; border-radius: var(--lca-radius-pill);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background var(--lca-dur-hover) var(--lca-ease), color var(--lca-dur-hover) var(--lca-ease),
              border-color var(--lca-dur-hover) var(--lca-ease);
}
.lca-btn--primary { background: var(--lca-accent); color: var(--lca-on-accent); border-color: var(--lca-accent); }
.lca-btn--primary:hover { background: var(--lca-accent-strong); border-color: var(--lca-accent-strong); color: var(--lca-on-accent); }
.lca-btn--ghost { background: transparent; color: var(--lca-text); border-color: var(--lca-rule); }
.lca-btn--ghost:hover { background: var(--lca-text); color: var(--lca-bg); border-color: var(--lca-text); }
.lca-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.lca-btn--outline:hover { background: #fff; color: #365072; border-color: #fff; }
.lca-btn--small { padding: .8rem 1.5rem; font-size: .7rem; }
.lca-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --- hero --------------------------------------------------------------- */

.lca-hero {
  position: relative; isolation: isolate;
  min-height: 100svh; padding-top: var(--lca-nav-h);
  display: flex; align-items: flex-end;
}
.lca-hero__media { position: absolute; inset: 0; z-index: -2; }
.lca-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.lca-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 16, 26, .88) 0%, rgba(10, 16, 26, .58) 30%,
      rgba(10, 16, 26, .22) 62%, rgba(10, 16, 26, .12) 100%),
    linear-gradient(to right, rgba(10, 16, 26, .60) 0%, rgba(10, 16, 26, .20) 45%,
      transparent 70%);
}
@media (max-width: 860px) {
  .lca-hero__veil {
    background: linear-gradient(to top, rgba(10, 16, 26, .92) 0%,
      rgba(10, 16, 26, .66) 42%, rgba(10, 16, 26, .34) 100%);
  }
}
.lca-hero__inner { padding-block: clamp(4rem, 9vw, 7rem); color: #fff; }
.lca-hero__title { color: #fff; margin-bottom: .45em; max-width: 18ch; }
.lca-hero__title em { font-style: italic; }
.lca-hero__note {
  margin-top: 2.25rem; font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.lca-hero__actions { margin-top: 2.5rem; }

/* --- menu --------------------------------------------------------------- */

.lca-menu-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
}
.lca-menu-nav a {
  text-decoration: none; font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--lca-text-faint);
  padding-bottom: .35rem; border-bottom: 1px solid transparent;
  transition: color var(--lca-dur-hover) var(--lca-ease), border-color var(--lca-dur-hover) var(--lca-ease);
}
.lca-menu-nav a:hover { color: var(--lca-text); border-bottom-color: var(--lca-text); }

.lca-menu-group {
  margin-bottom: clamp(4.5rem, 9vw, 7.5rem);
  scroll-margin-top: calc(var(--lca-nav-h) + 2rem);
}
.lca-menu-group:last-of-type { margin-bottom: 0; }
.lca-menu-group__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.lca-menu-group__head h2 { margin: 0; font-style: italic; }

.lca-menu-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 3vw, 2.5rem) 5rem;
  max-width: 68rem; margin-inline: auto;
}
@media (min-width: 900px) { .lca-menu-list { grid-template-columns: 1fr 1fr; } }

.lca-menu-item { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; align-items: baseline; }
.lca-menu-item__name { font-size: 1.02rem; font-weight: 500; }
.lca-menu-item__price {
  font-family: var(--lca-display); font-size: 1.1rem; color: var(--lca-text-soft);
  white-space: nowrap;
}
.lca-menu-item__it,
.lca-menu-item__desc {
  grid-column: 1 / -1; margin: .15rem 0 0;
  font-size: .9rem; line-height: 1.6; color: var(--lca-text-soft);
}
.lca-menu-item__it { font-family: var(--lca-display); font-style: italic; font-size: 1rem; }
.lca-menu-item__note {
  grid-column: 1 / -1; margin-top: .2rem;
  font-size: .85rem; font-style: italic; color: var(--lca-text-faint);
}
/* Allergen codes: a footnote, never a badge. (Populated with slice 2.) */
.lca-menu-item__all {
  margin-left: .4rem; font-size: .62rem; letter-spacing: .06em;
  color: var(--lca-text-faint); vertical-align: .35em; white-space: nowrap;
}

.lca-menu-notes {
  max-width: var(--lca-measure); margin: clamp(4rem, 8vw, 6rem) auto 0;
  padding-top: 2.5rem; border-top: 1px solid var(--lca-rule);
  font-size: .8rem; line-height: 1.7; color: var(--lca-text-faint); text-align: center;
}
.lca-menu-notes h3 {
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--lca-text-soft); margin: 0 0 .6rem;
}
.lca-menu-notes h3 + p { margin-bottom: 2rem; }
.lca-menu-notes p:last-child { margin-bottom: 0; }

/* A category's own footnote (homemade pasta, gluten-free option, …). */
.lca-menu-group__note {
  max-width: var(--lca-measure); margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  font-size: .85rem; font-style: italic; line-height: 1.6;
  color: var(--lca-text-faint); text-align: center;
}

/* --- information -------------------------------------------------------- */

.lca-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
}
.lca-info h3 {
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--lca-text-faint); margin: 0 0 .9rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--lca-rule);
}
.lca-info p { margin: 0 0 .5rem; color: var(--lca-text-soft); }
.lca-info a { color: var(--lca-text); text-decoration: none; border-bottom: 1px solid var(--lca-rule); }
.lca-info a:hover { border-bottom-color: var(--lca-accent); color: var(--lca-accent); }

.lca-hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lca-hours th, .lca-hours td { text-align: left; padding: .5rem 0; font-weight: 400; color: var(--lca-text-soft); }
.lca-hours td { text-align: right; }

.lca-map { aspect-ratio: 21 / 9; overflow: hidden; background: var(--lca-bg-alt); }
.lca-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.9); }
@media (prefers-color-scheme: dark) { .lca-map iframe { filter: grayscale(1) invert(.92) hue-rotate(180deg) contrast(.85); } }

/* --- reservation widget ------------------------------------------------- */
/* The one place on the site that is legitimately an interface. The widget
   shell ships with slice 1; the four-step flow inside arrives with slice 4. */

.lca-widget {
  background: var(--lca-glass-bg);
  -webkit-backdrop-filter: var(--lca-glass-blur);
          backdrop-filter: var(--lca-glass-blur);
  border: 1px solid var(--lca-glass-border);
  border-radius: var(--lca-radius);
  box-shadow: var(--lca-glass-shadow);
  padding: clamp(1.75rem, 4vw, 3rem);
  max-width: 52rem; margin-inline: auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lca-widget, .lca-nav, .lca-lang__list { background: var(--lca-surface); }
  .lca-nav--over { background: rgba(11, 18, 29, .78); }
}

.lca-steps {
  list-style: none; margin: 0 0 2.5rem; padding: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  border-bottom: 1px solid var(--lca-rule);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lca-text-faint);
}
.lca-steps li { display: flex; align-items: center; gap: .55rem; }
.lca-steps span {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; border: 1px solid var(--lca-rule);
  font-size: .7rem; letter-spacing: 0;
  transition: background var(--lca-dur) var(--lca-ease), color var(--lca-dur) var(--lca-ease),
              border-color var(--lca-dur) var(--lca-ease);
}
.lca-steps .is-active { color: var(--lca-text); }
.lca-steps .is-active span { background: var(--lca-accent); border-color: var(--lca-accent); color: var(--lca-on-accent); }
.lca-steps .is-done span { border-color: var(--lca-text-soft); color: var(--lca-text-soft); }

/* --- step transitions ---------------------------------------------------- */
/* The four steps are states of one component, never separate pages, so moving
   between them crossfades in place: the outgoing step fades and slides out
   while the incoming one fades and slides in over it. The stage animates its
   own height at the same time, so the panel resizes instead of snapping.
   During the overlap the outgoing step is taken out of flow — otherwise the
   two would stack and the widget would lurch. */

.lca-widget__stage {
  position: relative;
  /* The one property on the site that animates layout. Removing it would
     trade a smooth resize for a hard snap between steps of very different
     heights, so it stays — but `contain` scopes the recalculation to this
     box, so the rest of the document is not relaid out on each frame. It is
     also a discrete 380ms event on tap, never coupled to scrolling. */
  contain: layout paint;
  transition: height var(--lca-step-dur, var(--lca-dur)) var(--lca-step-ease);
}
:root { --lca-step-ease: var(--lca-ease); --lca-step-dur: var(--lca-dur); }

.lca-step {
  transition: opacity var(--lca-step-dur) var(--lca-step-ease),
              transform var(--lca-step-dur) var(--lca-step-ease);
}

/* leaving: lifted out of flow so the incoming step defines the new height */
.lca-step.is-leaving {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; pointer-events: none;
}
.lca-step.is-leaving.to-left  { transform: translateX(-28px); }
.lca-step.is-leaving.to-right { transform: translateX(28px); }

/* entering: start offset and transparent, then released to 0 / 1 */
.lca-step.is-entering { opacity: 0; }
.lca-step.is-entering.from-right { transform: translateX(28px); }
.lca-step.is-entering.from-left  { transform: translateX(-28px); }

@media (prefers-reduced-motion: reduce) {
  :root { --lca-step-dur: 1ms; }
  .lca-step.is-leaving, .lca-step.is-entering { transform: none; }
}

.lca-step__title {
  font-family: var(--lca-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--lca-text-faint);
  margin: 0 0 1rem;
}
.lca-step__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* --- the selector row ----------------------------------------------------
   Three labelled fields side by side — guests · date · time — in the same
   underline-field language as every other input on the site: no box, no
   own surface, just the hairline that all our fields wear. The glass panel
   behind it stays visible instead of being plated over. */

.lca-searchbar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.lca-searchbar__cell { min-width: 0; }
.lca-searchbar__label {
  display: block; font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--lca-text-faint); margin-bottom: .6rem;
}
.lca-searchbar select,
.lca-searchbar input[type="date"] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--lca-text);
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--lca-rule); padding: .55rem 0;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--lca-dur-hover) var(--lca-ease);
}
.lca-searchbar select { cursor: pointer; }
.lca-searchbar select:hover,
.lca-searchbar input[type="date"]:hover { border-bottom-color: var(--lca-text-soft); }
.lca-searchbar select:focus,
.lca-searchbar input[type="date"]:focus {
  outline: none; border-bottom-color: var(--lca-accent); border-bottom-width: 2px;
}
.lca-searchbar__cell:has(select) { position: relative; }
.lca-searchbar__cell:has(select)::after {
  content: "▾"; position: absolute; right: .1rem; bottom: 1rem;
  font-size: .6rem; color: var(--lca-text-faint); pointer-events: none;
}
@media (max-width: 640px) {
  .lca-searchbar { grid-template-columns: 1fr; }
}

.lca-recap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.25rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--lca-rule); flex-wrap: wrap;
}
.lca-recap__label { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lca-text-faint); margin-bottom: .3rem; }
.lca-recap strong { font-weight: 500; font-size: 1.02rem; }

/* Result chips: two lines — the time, and a small line naming the service
   (or "last tables" when nearly full). Bordered, never a coloured badge. */
.lca-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr)); gap: .6rem; }
.lca-slot {
  padding: .85rem .5rem .7rem; background: transparent;
  border: 1px solid var(--lca-rule); border-radius: var(--lca-radius-sm);
  cursor: pointer; font: inherit; font-size: 1.02rem;
  color: var(--lca-text); text-align: center; line-height: 1.25;
  transition: border-color var(--lca-dur-hover) var(--lca-ease), background var(--lca-dur-hover) var(--lca-ease),
              color var(--lca-dur-hover) var(--lca-ease);
}
.lca-slot:hover:not([disabled]) { background: var(--lca-text); border-color: var(--lca-text); color: var(--lca-bg); }
.lca-slot.is-preferred { border-color: var(--lca-accent); }
.lca-slot[disabled] { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.lca-slot__tag {
  display: block; font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lca-text-faint); margin-top: .2rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lca-slot.is-limited .lca-slot__tag { color: var(--lca-accent); }
.lca-slot:hover:not([disabled]) .lca-slot__tag { color: inherit; opacity: .75; }
.lca-loading { color: var(--lca-text-faint); }
.lca-empty { padding: 2.5rem 1rem; text-align: center; color: var(--lca-text-soft); border: 1px dashed var(--lca-rule); border-radius: var(--lca-radius-sm); }

/* --- form fields -------------------------------------------------------- */

.lca-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.lca-field--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .lca-field-grid { grid-template-columns: 1fr; } }

.lca-field label {
  display: block; font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--lca-text-faint); margin-bottom: .6rem;
}
.lca-field input, .lca-field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--lca-text);
  background: transparent; border: 0; border-bottom: 1px solid var(--lca-rule);
  border-radius: 0; padding: .55rem 0;
  transition: border-color var(--lca-dur-hover) var(--lca-ease);
}
.lca-field textarea { resize: vertical; min-height: 3.5rem; }
.lca-field input:hover, .lca-field textarea:hover { border-bottom-color: var(--lca-text-soft); }
.lca-field input:focus, .lca-field textarea:focus {
  outline: none; border-bottom-color: var(--lca-accent); border-bottom-width: 2px;
}
.lca-field input[aria-invalid="true"], .lca-field textarea[aria-invalid="true"] { border-bottom-color: var(--lca-accent); }
.lca-field--inline { display: flex; align-items: baseline; gap: 1rem; }
.lca-field--inline label { margin: 0; white-space: nowrap; }
.lca-field--inline input { max-width: 12rem; }

.lca-field__error { display: none; font-size: .82rem; color: var(--lca-accent); margin: .5rem 0 0; }
.lca-field__error[data-shown="true"] { display: block; }

.lca-alert {
  padding: 1rem 0; font-size: .93rem; margin-bottom: 1.75rem;
  border-top: 1px solid var(--lca-accent); border-bottom: 1px solid var(--lca-rule);
  color: var(--lca-text);
}
.lca-alert__intro { margin: 1rem 0 0; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lca-text-faint); }
.lca-alert__times { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* --- confirmation ------------------------------------------------------- */

.lca-confirm { text-align: center; }
.lca-confirm:focus, .lca-confirm:focus-visible { outline: none; }
.lca-confirm h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.lca-confirm__ref {
  font-family: var(--lca-display); font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: .12em; color: var(--lca-text); margin: 1.5rem 0 2rem;
}
.lca-summary {
  list-style: none; margin: 0 auto 2rem; padding: 2rem 0;
  border-top: 1px solid var(--lca-rule); border-bottom: 1px solid var(--lca-rule);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1.5rem;
}
.lca-summary dt { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lca-text-faint); margin-bottom: .5rem; }
.lca-summary dd { margin: 0; font-size: 1rem; }
.lca-confirm .lca-step__actions { justify-content: center; }

/* --- footer ------------------------------------------------------------- */

.lca-footer {
  background: var(--lca-inverse-bg); color: var(--lca-inverse-text);
  padding-block: clamp(4rem, 8vw, 6rem) 2.5rem;
}
.lca-footer__grid {
  display: grid; grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem); padding-bottom: 3.5rem;
}
/* The restaurant's own script wordmark, masked so it paints in the footer's
   ink whatever the scheme — same technique as the nav-over-hero states. */
.lca-footer__mark {
  display: block; height: 64px; aspect-ratio: 220 / 120;
  background-color: var(--lca-inverse-text);
  -webkit-mask: url(/assets/img/lca-logo.png) left center/contain no-repeat;
          mask: url(/assets/img/lca-logo.png) left center/contain no-repeat;
}
.lca-footer h4 {
  font-family: var(--lca-body); font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase; color: color-mix(in srgb, var(--lca-inverse-text) 52%, transparent);
  margin: 0 0 1.25rem; font-weight: 600;
}
.lca-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lca-footer a { color: var(--lca-inverse-text); text-decoration: none; font-size: .92rem; transition: opacity var(--lca-dur-hover) var(--lca-ease); }
.lca-footer a:hover { opacity: .62; color: var(--lca-inverse-text); }
.lca-footer p { color: color-mix(in srgb, var(--lca-inverse-text) 68%, transparent); font-size: .92rem; }
.lca-footer__everyday {
  font-size: .88rem; margin-bottom: .6rem;
  color: color-mix(in srgb, var(--lca-inverse-text) 82%, transparent);
}

/* Brand glyph beside its label: one flat colour from the palette, never the
   multicolour badge — a coloured chip would be the loudest thing on the page. */
.lca-social { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.lca-icon { flex: none; width: 16px; height: 16px; }
.lca-footer .lca-social { color: color-mix(in srgb, var(--lca-inverse-text) 78%, transparent); }
.lca-footer .lca-social:hover { color: var(--lca-inverse-text); opacity: 1; }
.lca-hours-list { list-style: none; margin: 0; padding: 0; }
.lca-hours-list li { display: flex; justify-content: space-between; gap: 1.5rem; font-size: .88rem; color: color-mix(in srgb, var(--lca-inverse-text) 68%, transparent); }
.lca-footer__base {
  padding-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  justify-content: space-between; font-size: .72rem; letter-spacing: .1em;
  color: color-mix(in srgb, var(--lca-inverse-text) 42%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--lca-inverse-text) 14%, transparent);
}

/* Stacked on a phone, the three footer columns read as three more page
   sections. Tighten it so the footer reads as a footer: smaller type, dense
   rows, links in two columns. */
@media (max-width: 760px) {
  .lca-footer { padding-block: 3rem 2rem; }
  .lca-footer__grid { grid-template-columns: 1fr; gap: 2.25rem; padding-bottom: 2.25rem; }
  .lca-footer h4 { margin-bottom: .85rem; }
  .lca-footer ul { gap: .5rem; }
  .lca-footer a { font-size: .88rem; }
  .lca-footer__pages ul { grid-template-columns: 1fr 1fr; gap: .55rem 1.25rem; }
  .lca-hours-list li { font-size: .8rem; gap: 1rem; }
  .lca-footer__mark { font-size: 1.45rem; }
}

/* --- admin dashboard ---------------------------------------------------- */
/* Staff tool, not the public site: legibility beats restraint here.
   (The admin page itself arrives with slice 4.) */

.lca-panel { border: 1px solid var(--lca-rule); border-radius: var(--lca-radius); padding: clamp(1.4rem, 3vw, 2rem); background: var(--lca-surface); }
.lca-panel > h2:first-child { margin-top: 0; font-size: 1.5rem; }
.lca-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.lca-stat { border: 1px solid var(--lca-rule); border-radius: var(--lca-radius); padding: 1.1rem 1.25rem; background: var(--lca-surface); }
.lca-stat__value { font-family: var(--lca-display); font-size: 2rem; line-height: 1; }
.lca-stat__label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lca-text-faint); margin-top: .45rem; }

.lca-table-wrap { overflow-x: auto; border: 1px solid var(--lca-rule); border-radius: var(--lca-radius); background: var(--lca-surface); }
.lca-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 900px; }
.lca-table th { text-align: left; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lca-text-faint); padding: .85rem 1rem; border-bottom: 1px solid var(--lca-rule); background: var(--lca-bg-alt); position: sticky; top: 0; }
.lca-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--lca-rule); vertical-align: top; }
.lca-table tr:last-child td { border-bottom: none; }
.lca-table__when { white-space: nowrap; }
.lca-table__muted { color: var(--lca-text-faint); font-size: .85rem; }

/* Status is written, never worn as a chip: small caps, colour only. The
   no-bubble rule holds on the staff sheet too — nothing on this site is a
   badge. (Used by the slice-4 admin table.) */
.lca-status { display: inline-block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--lca-text-soft); }
.lca-status--confirmed { color: var(--lca-text); }
.lca-status--cancelled { opacity: .5; text-decoration: line-through; }
.lca-status--busy { color: var(--lca-accent); }

.lca-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.lca-toolbar__spacer { margin-left: auto; }

/* --- utilities ---------------------------------------------------------- */

.lca-center { text-align: center; }
.lca-mt-1 { margin-top: 1.5rem; }
.lca-mt-2 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.lca-hidden { display: none !important; }
.lca-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .lca-nav, .lca-footer, .lca-btn, .lca-menu-nav { display: none !important; }
  body { background: #fff; color: #000; padding-top: 0; }
}

/* --- mobile rendering cost ------------------------------------------------
   backdrop-filter is the most expensive thing on this site, and the cost is
   paid per frame for any blurred surface that is on screen while the page
   scrolls. Two are:

     .lca-nav     fixed, on screen for every frame of every scroll
     .lca-widget  large, and it scrolls with the page

   Those two drop the blur entirely below 1000px and lean on an opaque
   background instead — no blur, no per-frame cost, and contrast actually
   improves. The overlay and the language dropdown keep a blur (halved to
   8px) because they only exist while open, and the page behind them is not
   scrolling at the time.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .lca-nav,
  .lca-widget {
    background: var(--lca-glass-solid);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  /* the bar over the hero stays transparent — nothing to blur there anyway */
  .lca-nav--over,
  .lca-nav--menu-open,
  .lca-nav--over.lca-nav--menu-open {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .lca-nav--over {
    background: linear-gradient(to bottom, rgba(11, 18, 29, .42), transparent);
  }

  /* only visible while open, and scrolling is locked then */
  .lca-js .lca-nav__links,
  .lca-lang__list {
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
            backdrop-filter: blur(8px) saturate(1.2);
  }
}

/* --- scroll reveal --------------------------------------------------------
   Sections ease in as they arrive. Gated behind a class the reveal script
   sets itself, immediately before it starts observing — NOT on .lca-js,
   which the inline head script sets. If the deferred file ever fails to
   load, nothing is hidden and the page is simply a page. Content must never
   depend on a script to become visible. Transform and opacity only — never
   a layout property.
   -------------------------------------------------------------------------- */

html.lca-reveal-ready [data-lca-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--lca-dur) var(--lca-ease),
              transform var(--lca-dur) var(--lca-ease);
  will-change: opacity, transform;
}
html.lca-reveal-ready [data-lca-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- image loading --------------------------------------------------------
   Space is reserved by the aspect-ratio boxes and the width/height attributes,
   so nothing shifts; the pixels then fade in rather than popping.
   -------------------------------------------------------------------------- */

.lca-js img[data-lca-img] {
  opacity: 0;
  transition: opacity var(--lca-dur) var(--lca-ease);
}
.lca-js img[data-lca-img].is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.lca-reveal-ready [data-lca-reveal] { opacity: 1; transform: none; }
  .lca-js img[data-lca-img] { opacity: 1; }
}