/* Self-hosted variable webfonts — Cormorant Garamond + Jost (SIL Open Font License 1.1) */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-300-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-300-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(../fonts/Jost-200-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(../fonts/Jost-200-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   Ta' Ċenċ Il-Kantra Lido, Bar & Restaurant
   Sannat, Gozo — scroll-scrubbed cinematic site
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  /* Brand palette, sampled from the Il-Kantra social artwork and logo. */
  --green-900: #171c15;
  --green-850: #1e241b;
  --green-800: #2b3327;
  --green-700: #404b3b; /* primary brand green */
  --green-600: #4e5a47;
  --sage-500: #768170;  /* secondary brand green */
  --sage-300: #9aa394;

  --cream: #f3efe6;
  --bone: #e2d9c8;
  --limestone: #c9a87c;
  --sea: #2aa3b4;
  --sea-deep: #0f6d7e;

  --ink: rgba(23, 28, 21, 0.92);

  /* type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.9rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  --step-3: clamp(2.1rem, 1.5rem + 2.9vw, 4rem);
  --step-4: clamp(2.9rem, 1.7rem + 5.4vw, 6.4rem);
  --step-5: clamp(3.4rem, 1.4rem + 8.6vw, 9.2rem);

  /* layout */
  --gutter: clamp(1.25rem, 5vw, 6.5rem);
  --rule: rgba(243, 239, 230, 0.16);
  --rule-dark: rgba(23, 28, 21, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* Native smooth scrolling MUST stay off while JS runs. GSAP's ScrollToPlugin
   writes scrollTop every frame; the browser answers each write with its own
   animation, the positions disagree, and autoKill aborts the tween after a few
   dozen pixels — which is exactly how the nav links died. The inline bootstrap
   in index.html drops .no-js, so this rule only ever applies without scripting,
   where it is the right fallback for the anchors. */
html.no-js { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html.no-js { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--green-900);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.7;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-loading { overflow: hidden; height: 100vh; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--limestone); color: var(--green-900); }

:focus-visible {
  outline: 1px solid var(--limestone);
  outline-offset: 4px;
}

.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   The film — a single fixed canvas behind the whole document, its playhead
   driven entirely by scroll position.
   ========================================================================== */
.film {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--green-900);
}

.film__media,
.film__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.film__media { transform: scale(1.06); }

/* Still-frame fallback stack (small screens, reduced motion, decode failure) */
.film__stills { position: absolute; inset: 0; display: none; }
.film__still { opacity: 0; }
.film__still:first-child { opacity: 1; }
.film.is-stills .film__stills { display: block; }
.film.is-stills .film__media { display: none; }

/* Graded scrims: a warm-dark base plus a section-driven veil. */
.film__grade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(23, 28, 21, 0) 38%, rgba(23, 28, 21, 0.62) 100%),
    linear-gradient(180deg, rgba(23, 28, 21, 0.58) 0%, rgba(23, 28, 21, 0.12) 26%, rgba(23, 28, 21, 0.2) 62%, rgba(23, 28, 21, 0.72) 100%);
  pointer-events: none;
}

.film__veil {
  position: absolute;
  inset: 0;
  background: var(--green-800);
  opacity: 0;
  pointer-events: none;
}

/* Fine film grain, generated in-document so nothing is fetched. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(5) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(4%, -6%); }
  60% { transform: translate(-3%, -3%); }
  80% { transform: translate(5%, 5%); }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* ==========================================================================
   Preloader
   ========================================================================== */
/* The two curtains carry the colour and split apart on exit. The .loader
   itself must stay transparent — a background here would sit behind the split
   and make the reveal invisible — and .loader__inner must be raised above the
   curtains, which are absolutely positioned and would otherwise paint over the
   logo and progress bar for the whole of the load. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: transparent;
}
.loader__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  width: min(78vw, 22rem);
}
.loader__mark {
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(14px);
}
.loader__bar {
  margin-top: 2.4rem;
  height: 1px;
  background: rgba(243, 239, 230, 0.2);
  overflow: hidden;
}
.loader__fill {
  height: 100%;
  width: 100%;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left center;
}
.loader__pct {
  margin-top: 0.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.5);
  font-weight: 300;
}
.loader__curtain {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: var(--green-700);
}
.loader__curtain--t { top: 0; }
.loader__curtain--b { bottom: 0; }

/* ==========================================================================
   Chrome — nav + chapter rail
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1rem, 2.2vh, 1.6rem) var(--gutter);
  transition: background-color 0.6s var(--ease), backdrop-filter 0.6s var(--ease);
}
/* The scrim lives in a pseudo-element so it can fade out downwards without
   taking the nav content's opacity with it. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 210%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(23, 28, 21, 0.82) 0%,
    rgba(23, 28, 21, 0.52) 48%,
    rgba(23, 28, 21, 0) 100%);
  backdrop-filter: blur(11px) saturate(1.08);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.nav.is-stuck::before { opacity: 1; }

.nav__brand { display: flex; align-items: center; gap: 0.9rem; }
.nav__mark { width: clamp(88px, 10vw, 124px); height: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
}
.nav__link {
  position: relative;
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.72);
  padding-block: 0.35rem;
  transition: color 0.4s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.nav__link:hover { color: var(--cream); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(243, 239, 230, 0.34);
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.nav__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease);
}
.nav__cta:hover { color: var(--green-900); border-color: var(--cream); }
.nav__cta:hover::before { transform: translateY(0); }

.nav__right { display: flex; align-items: center; gap: 0.9rem; }

/* Burger + sheet: the nav links collapse below the tablet breakpoint. */
.burger { display: none; padding: 0.6rem; margin-right: -0.6rem; }
.burger__box {
  display: block;
  width: 26px;
  height: 10px;
  position: relative;
}
.burger__box i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cream);
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.burger__box i:first-child { top: 0; }
.burger__box i:last-child { bottom: 0; }
.burger[aria-expanded="true"] .burger__box i:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 6rem var(--gutter) 3rem;
  background: var(--green-700);
  opacity: 0;
  visibility: hidden;
}
.sheet[hidden] { display: none; }
.sheet__nav { display: grid; gap: 0.4rem; }
.sheet__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--serif);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.15;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--rule);
}
.sheet__n {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--limestone);
}
.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.66);
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .burger { display: block; }
}
@media (max-width: 520px) {
  .nav__cta { display: none; }
}

/* Chapter rail */
.rail {
  position: fixed;
  right: clamp(0.9rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.rail__track {
  position: relative;
  width: 1px;
  height: clamp(120px, 22vh, 220px);
  background: rgba(243, 239, 230, 0.2);
}
.rail__fill {
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: scaleY(0);
  transform-origin: top center;
}
.rail__label {
  writing-mode: vertical-rl;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.55);
}
@media (max-width: 700px) {
  .rail { display: none; }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
main { position: relative; z-index: 2; }

.chapter {
  position: relative;
  padding-block: clamp(7rem, 18vh, 14rem);
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.6rem);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.64rem;
  font-weight: 300;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.55);
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  max-width: 7rem;
  background: var(--rule);
}
.eyebrow__num {
  font-variant-numeric: tabular-nums;
  color: var(--limestone);
}

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--bone);
}
.display--xl { font-size: var(--step-5); }

.lede {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.32;
  color: rgba(243, 239, 230, 0.88);
  text-wrap: pretty;
}

.prose p {
  max-width: 44ch;
  color: rgba(243, 239, 230, 0.74);
  line-height: 1.8;
}
.prose p + p { margin-top: 1.15rem; }

/* Line-reveal masks (built by the split engine in site.js) */
.line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.04em; }
.line__i { display: block; will-change: transform; }
/* Word spans need a layout box so the splitter can measure line breaks. */
.w { display: inline-block; }
/* Emphasis survives the split as a class rather than a wrapping element. */
.w.is-em { font-style: italic; color: var(--bone); }

.fx { opacity: 0; }
.no-js .fx, .no-fx .fx { opacity: 1; }

/* ==========================================================================
   No-scripting escape hatches
   Without these the preloader stays up forever and body.is-loading keeps the
   page locked at 100vh with overflow hidden — the whole site renders as a
   blank green panel. Everything here is inert once the head script has
   dropped .no-js.
   ========================================================================== */
html.no-js #loader { display: none; }
html.no-js body.is-loading { overflow: visible; height: auto; }
html.no-js .film__media { display: none; }
html.no-js .film__stills { display: block; }
html.no-js .rail,
html.no-js .peek { display: none; }
html.no-js [data-split],
html.no-js .hero__mark { opacity: 1; }

/* Set by the head failsafe when the main script never ran. */
html.no-fx .film__media { display: none; }
html.no-fx .film__stills { display: block; }
html.no-fx [data-split],
html.no-fx .hero__mark { opacity: 1; }

/* Skip link — first thing in the tab order, hidden until focused. */
.skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.95rem 1.5rem;
  background: var(--cream);
  color: var(--green-900);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transform: translateY(-130%);
  transition: transform 0.35s var(--ease);
}
.skip:focus { transform: translateY(0); }
main:focus { outline: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  min-height: 100svh;
  display: grid;
  align-content: space-between;
  padding-block: clamp(7rem, 16vh, 11rem) clamp(2rem, 5vh, 3.5rem);
}

/* A soft radial lifts the lockup off the brightest part of the footage
   without reading as a plate behind it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 46% at 50% 40%,
    rgba(23, 28, 21, 0.44) 0%,
    rgba(23, 28, 21, 0.16) 52%,
    rgba(23, 28, 21, 0) 76%);
}

.hero__mark {
  width: min(54vw, 23rem);
  height: auto;
  margin-inline: auto;
  filter:
    drop-shadow(0 16px 48px rgba(23, 28, 21, 0.6))
    drop-shadow(0 2px 10px rgba(23, 28, 21, 0.45));
}

.hero__title {
  text-shadow: 0 2px 22px rgba(23, 28, 21, 0.5);
  margin-top: clamp(1.5rem, 4vh, 3rem);
  text-align: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: rgba(243, 239, 230, 0.9);
}

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.hero__meta {
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.62);
  line-height: 2.2;
}
.hero__meta strong { font-weight: 400; color: var(--cream); }

.scrollcue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.55);
}
.scrollcue__line {
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(180deg, rgba(243, 239, 230, 0.7), rgba(243, 239, 230, 0));
  position: relative;
  overflow: hidden;
}
.scrollcue__line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 40%;
  background: var(--cream);
  animation: cue 2.6s var(--ease-io) infinite;
}
@keyframes cue {
  0% { transform: translateY(-110%); }
  60%, 100% { transform: translateY(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .scrollcue__line::after { animation: none; }
}

/* ==========================================================================
   Editorial sections over the film
   ========================================================================== */
.split { align-items: end; row-gap: clamp(2.5rem, 6vh, 5rem); }
.split__head { grid-column: 1 / span 12; }
.split__body { grid-column: 1 / span 12; }

@media (min-width: 860px) {
  .split__head { grid-column: 1 / span 6; }
  .split__body { grid-column: 8 / span 5; }
  .split--flip .split__head { grid-column: 7 / span 6; }
  .split--flip .split__body { grid-column: 1 / span 4; }
}

.statline {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
}
.stat__k {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.48);
}
.stat__v {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--cream);
  margin-top: 0.4rem;
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(23, 28, 21, 0.34);
  backdrop-filter: blur(6px);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: slide 38s linear infinite;
}
.marquee__group {
  display: flex;
  gap: 3rem;
  align-items: center;
  flex: 0 0 auto;
}
.marquee__item {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4.2vw, 3.4rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: rgba(243, 239, 230, 0.9);
}
.marquee__item--ghost {
  color: transparent;
  -webkit-text-stroke: 1px rgba(243, 239, 230, 0.4);
}
.marquee__dot { color: var(--limestone); font-size: 1.1rem; }
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================================
   Menu panel
   ========================================================================== */
.menu {
  position: relative;
  z-index: 2;
  padding-block: clamp(6rem, 15vh, 11rem);
  padding-inline: var(--gutter);
  background: rgba(43, 51, 39, 0.84);
  backdrop-filter: blur(16px) saturate(1.05);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.menu__head { max-width: 52rem; }
.menu__note {
  margin-top: 1.4rem;
  max-width: 40ch;
  font-size: var(--step--1);
  color: rgba(243, 239, 230, 0.6);
  line-height: 1.75;
}

.courses {
  margin-top: clamp(3rem, 7vh, 5.5rem);
  border-top: 1px solid var(--rule);
}

.course {
  border-bottom: 1px solid var(--rule);
}
/* Placement is stated explicitly at both breakpoints. With only implicit
   flow the description dropped into the narrow index column on mobile and
   wrapped to one word per line. */
.course__row {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  column-gap: clamp(0.75rem, 3vw, 2.5rem);
  row-gap: 0;
  align-items: baseline;
  padding-block: clamp(1.5rem, 3.4vh, 2.4rem);
  position: relative;
  transition: opacity 0.5s var(--ease);
}
.course__idx { grid-column: 1; grid-row: 1; }
.course__name { grid-column: 2; grid-row: 1; }
.course__desc { grid-column: 2; grid-row: 2; margin-top: 0.7rem; }

@media (min-width: 860px) {
  .course__row { grid-template-columns: 3.2rem minmax(0, 20rem) minmax(0, 1fr); }
  .course__name { grid-column: 2; grid-row: 1; }
  .course__desc { grid-column: 3; grid-row: 1; margin-top: 0; }
}
.course__idx {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--limestone);
  font-variant-numeric: tabular-nums;
}
.course__name {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  transition: transform 0.7s var(--ease), color 0.5s var(--ease);
}
.course__desc {
  font-size: var(--step--1);
  color: rgba(243, 239, 230, 0.62);
  line-height: 1.8;
  max-width: 42ch;
}
@media (hover: hover) {
  .courses:hover .course__row { opacity: 0.42; }
  .courses:hover .course__row:hover { opacity: 1; }
  .course__row:hover .course__name { transform: translateX(0.8rem); color: var(--bone); }
}

/* Cursor-following dish plate */
.peek {
  position: fixed;
  top: 0; left: 0;
  z-index: 30;
  width: clamp(150px, 15vw, 230px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.peek img {
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (hover: none), (max-width: 860px) {
  .peek { display: none; }
}

/* ==========================================================================
   Horizontal plate rail
   ========================================================================== */
.rail-scene {
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* Fills the pinned viewport, otherwise the tint ends mid-screen and reads
     as an accidental band across the film. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: rgba(23, 28, 21, 0.42);
}
.rail-scene__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  /* Extra head-room keeps the tallest plates clear of the fixed nav. */
  padding: clamp(7rem, 16vh, 10rem) var(--gutter) clamp(4rem, 9vh, 6rem);
  width: max-content;
}
.plate {
  flex: 0 0 auto;
  width: clamp(200px, 24vw, 340px);
}
/* Ratio boxes rather than intrinsic heights, so no plate can outgrow the
   pinned viewport and slide under the chrome. */
.plate img {
  width: 100%;
  height: 100%;
  max-height: 62vh;
  object-fit: cover;
  filter: saturate(1.02);
  aspect-ratio: 1 / 1;
}
.plate--tall img { aspect-ratio: 3 / 4; }
.plate--drop img { aspect-ratio: 4 / 5; }
.plate--tall { align-self: flex-start; }
.plate--drop { align-self: flex-end; }
.plate__cap {
  margin-top: 0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.5);
}
/* Lead card shared by the gallery and the reviews rail. */
.rail-lead {
  flex: 0 0 auto;
  width: clamp(240px, 32vw, 30rem);
  align-self: center;
}
.rail-lead .display { font-size: var(--step-3); }

/* ==========================================================================
   Voices — a second scroll-driven horizontal rail
   ========================================================================== */
.voices__agg {
  margin-top: 1.6rem;
  max-width: 30ch;
  font-size: var(--step--1);
  line-height: 1.75;
  color: rgba(243, 239, 230, 0.62);
}
.voices__agg a {
  border-bottom: 1px solid rgba(243, 239, 230, 0.3);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.voices__agg a:hover { color: var(--cream); border-color: var(--cream); }

.quote {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vh, 1.5rem);
  width: clamp(255px, 27vw, 355px);
  /* Equal-height cards regardless of quote length. */
  align-self: stretch;
  max-height: 62vh;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background: rgba(23, 28, 21, 0.42);
  backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid var(--rule);
  margin: 0;
}
.quote__stars {
  color: var(--limestone);
  letter-spacing: 0.38em;
  font-size: 0.74rem;
  line-height: 1;
}
.quote__text {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.36;
  letter-spacing: -0.005em;
  color: var(--cream);
  text-wrap: pretty;
}
.quote__by {
  display: grid;
  gap: 0.35rem;
  padding-top: clamp(0.9rem, 2vh, 1.3rem);
  border-top: 1px solid var(--rule);
}
.quote__name {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
}
.quote__meta {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.45);
}

/* On a tall phone the desktop card sizes leave the rails floating in dead
   space. Scale them up and rebalance the padding so each rail fills the
   screen the way it does on desktop. */
@media (max-width: 860px) {
  .rail-scene__inner {
    padding-top: clamp(5rem, 11vh, 7rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }
  .rail-lead { width: min(82vw, 340px); }
  .plate { width: min(72vw, 300px); }
  .plate img { max-height: 54vh; }
  .quote {
    width: min(78vw, 330px);
    min-height: 44vh;
  }
}

/* Native swipe when the rail is not pinned.
   Snap targets align to the start, and the lead card is a target too —
   with centre alignment the browser snaps past the lead on load and the
   section opens halfway through the rail. */
.rail-scene.is-swipe {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail-scene.is-swipe::-webkit-scrollbar { display: none; }
.rail-scene.is-swipe .rail-lead,
.rail-scene.is-swipe .plate,
.rail-scene.is-swipe .quote { scroll-snap-align: start; }

/* ==========================================================================
   Visit / reserve
   ========================================================================== */
.visit {
  position: relative;
  z-index: 2;
  background: var(--green-700);
  color: var(--cream);
  padding-block: clamp(6rem, 15vh, 11rem);
  padding-inline: var(--gutter);
}
.visit__grid { row-gap: clamp(3rem, 8vh, 5.5rem); }
.visit__head { grid-column: 1 / span 12; }
.visit__hours { grid-column: 1 / span 12; }
.visit__where { grid-column: 1 / span 12; }
@media (min-width: 860px) {
  .visit__head { grid-column: 1 / span 12; }
  .visit__hours { grid-column: 1 / span 6; }
  .visit__where { grid-column: 8 / span 5; }
}

.hours { border-top: 1px solid var(--rule); }
.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.hours__day {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.66);
  flex: 0 0 auto;
}
.hours__time {
  font-family: var(--serif);
  font-size: var(--step-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hours__caveat {
  margin-top: 1.3rem;
  font-size: var(--step--1);
  color: rgba(243, 239, 230, 0.58);
  max-width: 40ch;
  line-height: 1.75;
}

.contact { display: grid; gap: 1.9rem; }
.contact__k {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.48);
  margin-bottom: 0.45rem;
}
.contact__v {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.4;
}
.contact__v a { position: relative; }
.contact__v a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.contact__v a:hover::after { transform: scaleX(1); opacity: 1; }

.bigcall {
  margin-top: clamp(3rem, 8vh, 5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  grid-column: 1 / span 12;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 2.1rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid rgba(243, 239, 230, 0.4);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease);
}
.btn:hover { color: var(--green-700); border-color: var(--cream); }
.btn:hover::before { transform: translateY(0); }
.btn--solid { background: var(--cream); color: var(--green-700); border-color: var(--cream); }
.btn--solid::before { background: var(--green-900); }
.btn--solid:hover { color: var(--cream); border-color: var(--green-900); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot {
  position: relative;
  z-index: 2;
  background: var(--green-900);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(2rem, 5vh, 3rem);
}
/* Explicit 12-column grid rather than flex + auto-fit. The previous
   `repeat(auto-fit, minmax(10rem, auto))` was invalid — auto-fit needs a
   definite max to resolve a repetition count, so it collapsed to one column
   and stacked all four lists down the right-hand edge. */
.foot__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 2.4vw, 2.6rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--rule);
}

.foot__mark {
  grid-column: 1 / span 12;
  width: clamp(150px, 20vw, 200px);
  height: auto;
}

.foot__cols {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.9rem, 3.5vh, 2.6rem) clamp(1.5rem, 3vw, 2.6rem);
}

@media (min-width: 640px) {
  .foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .foot__mark { grid-column: 1 / span 3; }
  .foot__cols { grid-column: 5 / span 8; }
}
.foot__h {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.42);
  margin-bottom: 1rem;
}
.foot__list li + li { margin-top: 0.55rem; }
.foot__list a, .foot__list span {
  font-size: var(--step--1);
  color: rgba(243, 239, 230, 0.72);
  transition: color 0.4s var(--ease);
}
.foot__list a:hover { color: var(--cream); }

.foot__base {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: rgba(243, 239, 230, 0.38);
}

/* --- reduced motion opt-outs ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx { opacity: 1 !important; transform: none !important; }
  .line__i { transform: none !important; }
}