/* ==========================================================================
   Base — reset, shell, shared link/heading primitives and the reveal system.
   ========================================================================== */

/* Cross-document transition between Home / About / Our Food. Browsers without
   support simply navigate normally. */
@view-transition {
  navigation: auto;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor jumps must clear the sticky band */
  scroll-padding-top: calc(var(--header-h) + 24 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* Clears the fixed branding band */
  padding-top: var(--header-h);
  background: var(--c-cream);
  color: var(--c-green);
  font-family: var(--f-body);
  font-size: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.tb-overlay-header {
  padding-top: 0;
  background: #111;
}

/* Book Now is one locked stage. 100svh is taller than the phone chrome
   and hid the photo; 100vw is wider than the visible screen and clips
   the right-hand menu. Lock to the visual viewport instead. */
html[data-page="book"],
html[data-page="book"] body {
  width: 100%;
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}
html[data-page="book"] {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

/* Locks scrolling while the menu overlay is open */
body.tb-no-scroll {
  overflow: hidden;
}

/* Food card: keep the page width stable so hiding the scrollbar
   does not shove the layout a few pixels left, then back. */
html.tb-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
  scroll-behavior: auto;
}
html.tb-modal-open body {
  overflow: hidden;
  padding-right: var(--tb-scroll-gap, 0px);
  overscroll-behavior: none;
}
html.tb-modal-open .tb-header {
  right: var(--tb-scroll-gap, 0px);
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

/* picture is only a format switch — layout still follows the img rules.
   Not used inside Book Now: display:contents drops the photo on Android. */
picture {
  display: contents;
}
.tb-reserve__figure picture {
  display: block;
  width: 100%;
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.tb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--c-green);
  color: var(--c-cream);
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tb-skip:focus {
  left: 1rem;
  top: 1rem;
}

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

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

.tb-shell {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tb-main {
  display: block;
  opacity: 1;
  transition: opacity 400ms var(--motion-easing);
}

.tb-inline-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: opacity 420ms var(--motion-easing);
}

@media (hover: hover) {
  .tb-inline-link:hover {
    opacity: 0.72;
  }
}

/* Hides the half-built DOM until app.js has injected the generated rules */
body.tb-booting .tb-main,
body.tb-booting .tb-header {
  opacity: 0;
}

.tb-header {
  transition: opacity 400ms var(--motion-easing);
}

/* --------------------------------------------------- arrow link primitive */
/* Matches the comp: underlined word mark, then a long hairline arrow that
   stretches on hover. */

.tb-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: var(--f-label);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: currentColor;
}

.tb-arrow-link__text {
  position: relative;
  padding-bottom: 0.32em;
  border-bottom: 2px solid currentColor;
}

.tb-arrow-link__arrow {
  position: relative;
  display: block;
  width: 2.6em;
  height: 1px;
  background: currentColor;
  transition: width 560ms var(--motion-easing);
}

.tb-arrow-link__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.46em;
  height: 0.46em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(-1px, -50%) rotate(45deg);
}

@media (hover: hover) {
  .tb-arrow-link:hover .tb-arrow-link__arrow {
    width: 3.7em;
  }
}

/* ------------------------------------------------------- reveal on scroll */
/* JS adds .is-inview via IntersectionObserver. Every transform is multiplied
   by --motion-scale so reduced-motion users get the fade only. */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, calc(var(--motion-distance) * var(--motion-scale)), 0);
  transition:
    opacity var(--motion-duration) var(--motion-easing) var(--reveal-delay, 0ms),
    transform var(--motion-duration) var(--motion-easing) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* Headings are split into one masked row per line so they rise into view */
.tb-lines {
  display: block;
}

.tb-lines__line {
  display: block;
  overflow: hidden;
}

.tb-lines__inner {
  display: block;
  transform: translate3d(0, calc(108% * var(--motion-scale)), 0);
  transition: transform var(--motion-duration) var(--motion-easing) var(--line-delay, 0ms);
  will-change: transform;
}

.is-inview .tb-lines__inner,
.tb-lines.is-inview .tb-lines__inner {
  transform: none;
}

/* Photos stay visible as soon as their frame is on screen. A clip-path wipe
   used to hide them until IntersectionObserver fired, which left empty
   green frames sitting in the viewport. Hover zoom still keys off .is-inview. */
.tb-media-reveal img {
  transform: none;
}

.tb-media-reveal.is-inview img {
  transform: none;
}

/* Drift driven by js/lib/reveal.js — strength comes from the JSON */
[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* Failsafe: if boot never completes, the inline timeout in the HTML clears
   .tb-booting and this makes sure nothing stays invisible. */
body:not(.tb-booting) .tb-no-reveal [data-reveal] {
  opacity: 1;
  transform: none;
}
.no-js .tb-lines__inner {
  transform: none;
}

/* Desktop headings keep designed line breaks. On phones those forced
   breaks isolate single words, so the sentence wraps as one block and
   text-wrap:balance evens the rag (no “inspired” / “at” sitting alone). */
@media (max-width: 860px) {
  .tb-lines,
  .tb-lines--flow {
    display: block;
    text-wrap: pretty;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  .tb-lines__line {
    display: inline;
    overflow: visible;
  }

  .tb-lines__inner {
    display: inline;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .tb-lines__line + .tb-lines__line::before {
    content: " ";
    display: inline;
    white-space: pre;
  }

  .tb-hero__heading,
  .tb-copy-band__heading,
  .tb-story__heading,
  .tb-flavor__heading,
  .tb-flavor__quote,
  .tb-statement__heading,
  .tb-split__heading,
  .tb-locate__heading,
  .tb-faqc__heading {
    text-wrap: pretty;
  }

  .tb-hero__body,
  .tb-story__col,
  .tb-split__body,
  .tb-faq__answer,
  .tb-dish-modal__body p {
    text-wrap: pretty;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  /* Headings share one left edge with their body copy. Do not include
     the shell itself (.tb-flavor, .tb-copy-band, .tb-story) — that is
     what holds --gutter, the same side margin Home uses. */
  .tb-split__heading,
  .tb-split__body,
  .tb-flavor__heading,
  .tb-flavor__quote,
  .tb-story__heading,
  .tb-story__col,
  .tb-copy-band__heading,
  .tb-locate__heading,
  .tb-locate__copy,
  .tb-faqc__heading {
    margin-inline: 0;
    padding-inline: 0;
    text-align: left;
  }

  .tb-split__heading,
  .tb-flavor__heading,
  .tb-flavor__quote,
  .tb-story__heading,
  .tb-copy-band__heading,
  .tb-locate__heading,
  .tb-faqc__heading {
    max-width: none;
    width: 100%;
  }
}