/* d5 . Local Restaurant Menu Led, after the Surella library entry.
   The menu is the page and gets most of the vertical space. Booking and
   questions are merged into one block because a visitor deciding to come has
   one intent, not two. No about section, no team, no story: the reference's
   constraint is that the moment one appears the page becomes a brochure. */

@font-face { font-family: 'Big Shoulders'; src: url('assets/fonts/display.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Manrope';       src: url('assets/fonts/sans.woff2')    format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --wash: #E6EEF2;
  --paper: #FFFFFF;
  --ink: #0E1417;
  --soft: #4E5A60;
  --accent: #E02412;
  --line: #C3D2D9;
  --pad: clamp(1.15rem, 4.5vw, 4rem);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--wash); color: var(--ink); font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-size: 1rem; line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 9; background: var(--ink); color: var(--wash); padding: 0.75rem 1.25rem; text-decoration: none; }
.skip:focus { left: 0; }

/* ---- Fold ---------------------------------------------------------------- */
.fold { position: relative; min-height: 88svh; display: grid; align-content: end; overflow: hidden; }
.fold__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  /* fades out across the lower half rather than ending on a line */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 92%);
}
/* The type sits on a solid block rather than on the photograph: the accent is
   too strong to survive being laid over a busy image. */
.fold__type { position: relative; z-index: 1; background: linear-gradient(to bottom, rgb(230 238 242 / 0) 0%, var(--wash) 38%); padding: clamp(3.5rem, 9vw, 6rem) var(--pad) clamp(1.75rem, 4vw, 3rem); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem var(--pad); }
.bar__mark { margin: 0; font-family: "Big Shoulders", Impact, sans-serif; font-weight: 800; font-size: 1.25rem; text-transform: uppercase; }
.bar a { font-size: 0.875rem; font-weight: 700; }
.fold h1 { margin: 0; font-family: 'Big Shoulders', Impact, sans-serif; font-weight: 800; font-size: clamp(2.5rem, 8.5vw, 7rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
.fold__sub { margin: 0.9rem 0 0; max-width: 44ch; color: var(--soft); }

/* ---- The menu, which is most of the page --------------------------------- */
.menu { padding: clamp(3rem, 8vw, 6rem) var(--pad); }
.menu__h { margin: 0 0 clamp(2rem, 5vw, 3.5rem); font-family: 'Big Shoulders', Impact, sans-serif; font-weight: 800; font-size: clamp(2.25rem, 7vw, 5.5rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
.course { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.course__h { margin: 0 0 0.9rem; font-family: 'Big Shoulders', Impact, sans-serif; font-weight: 700; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); }
.course ul { list-style: none; margin: 0; padding: 0; }
.course li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.course li .i { font-weight: 600; }
/* leader dots between the item and its duration, the way a printed menu sets it */
.course li::after { content: ""; flex: 1 1 auto; order: 1; border-bottom: 1px dotted var(--line); transform: translateY(-0.25em); min-width: 1.5rem; }
.course li .d { order: 2; flex: none; font-variant-numeric: tabular-nums; color: var(--soft); font-size: 0.9375rem; white-space: nowrap; }
.course__n { margin: 0.9rem 0 0; max-width: 48ch; color: var(--soft); font-size: 0.9375rem; }

/* ---- Booking and questions, deliberately one block ----------------------- */
.both { background: var(--paper); padding: clamp(3rem, 8vw, 6rem) var(--pad); display: grid; gap: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--accent); }
@media (min-width: 901px) { .both { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.both h2 { margin: 0 0 0.75rem; font-family: 'Big Shoulders', Impact, sans-serif; font-weight: 800; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 0.95; letter-spacing: -0.015em; text-transform: uppercase; }
.both__ask > p { margin: 0 0 1.5rem; max-width: 46ch; color: var(--soft); }

/* the routing choice sits at the top, visible, not hidden in a select */
.route { border: 0; margin: 0 0 1.25rem; padding: 0; display: flex; gap: 0.5rem; }
.route input { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.route label { border: 1px solid var(--ink); border-radius: 999px; padding: 0.35rem 1rem; cursor: pointer; font-size: 0.9375rem; font-weight: 600; }
.route input:checked + label { background: var(--ink); color: var(--paper); }
.route input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.f { display: grid; gap: 0.2rem; margin-bottom: 0.9rem; }
.f span { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.f input, .f textarea { border: 0; border-bottom: 1px solid var(--ink); background: transparent; font: inherit; color: var(--ink); padding: 0.35rem 0; resize: vertical; }
.f input:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.both button { margin-top: 0.4rem; border: 0; background: var(--accent); color: var(--paper); font: inherit; font-weight: 700; padding: 0.6rem 1.6rem; border-radius: 999px; cursor: pointer; }
.both button:hover { background: var(--ink); }

.pairs { margin: 0; }
.pairs > div { padding: 0.85rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.15rem; }
.pairs dt { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.pairs dd { margin: 0; font-weight: 600; }

.fine { margin: 1rem 0 0; max-width: 52ch; font-size: 0.8125rem; line-height: 1.6; color: var(--soft); }
.menu .fine { margin-top: 0; }

.foot { padding: clamp(2.5rem, 6vw, 4rem) var(--pad) clamp(3rem, 7vw, 4.5rem); border-top: 1px solid var(--line); display: grid; gap: 0.85rem; }
.foot__mark { margin: 0; font-family: 'Big Shoulders', Impact, sans-serif; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; }
.foot .fine { margin: 0; }

/* ---- Motion -------------------------------------------------------------
   Additive, and gated on the .js-motion class which is only set when the
   visitor has not asked for reduced motion. With scripting off, or reduced
   motion on, every element is simply visible and nothing is transformed. */
.js-motion [data-rise] {
  opacity: 0;
  transform: translateY(18px);
  /* exponential ease out, from an already laid out position */
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-motion [data-rise].is-up { opacity: 1; transform: none; }

/* the hero is scaled a little so the parallax has somewhere to travel without
   ever exposing an edge */
.js-motion .fold__img { will-change: transform; transform: scale(1.08); }

/* menu rows answer the pointer: the leader rule solidifies and the duration
   steps toward the item it belongs to */
.course li .d { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.course li:hover .d { transform: translateX(-0.35rem); }
.course li::after { transition: border-color 220ms ease, border-bottom-style 220ms ease; }
.course li:hover::after { border-bottom-style: solid; border-bottom-color: var(--accent); }

.route label, .both button, .bar a { transition: background-color 200ms ease, color 200ms ease; }

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