/* ==========================================================================
   EAT TCI
   Palette: Papaya / Lime / Ocean / Passion / Wave / Mango
   All motion is CSS transitions + keyframes. No animation libraries.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  --papaya:  #e25220;
  --lime:    #ddd480;
  --ocean:   #226b6b;
  --passion: #e02c53;
  --wave:    #b0d7ce;
  --mango:   #cf7e00;

  --cream:   #faf5ef;
  --sand:    #f0e6d8;
  --ink:     #241a12;
  --ink-60:  rgba(36, 26, 18, .62);
  --ink-30:  rgba(36, 26, 18, .3);
  --ink-12:  rgba(36, 26, 18, .12);

  --display: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1360px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------------ RESET -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Native smooth scrolling for the in-page nav links */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
}

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

.em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Repeating diamond pattern lifted from the texture references */
.diamonds {
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.07) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 14px, transparent 14px 28px);
  background-size: 40px 40px;
}

.kicker {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.25rem;
}
.kicker::before {
  content: '';
  width: 26px; height: 2px;
  background: currentColor;
  flex: none;
}

/* -------------------------------------------------------------- PROMO --- */
/* Thin, high-contrast announcement bar. Passion pink on near-black keeps it
   loud against the cream page without fighting the papaya buttons. */
.promo {
  position: relative;
  z-index: 70;
  background: var(--passion);
  color: #fff;
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
.promo[hidden] { display: none; }

.promo__track {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  padding: .5rem var(--gutter);
  text-align: center;
}
.promo__item {
  font-family: var(--display);
  font-size: clamp(.66rem, 1.5vw, .8rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
}
/* A blinking dot either side — small, and it stops for reduced motion. */
.promo__track::before,
.promo__track::after {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  background: var(--lime);
  transform: rotate(45deg);
  animation: promoPulse 1.8s var(--ease) infinite;
}
@keyframes promoPulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
.promo__link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.55); }
.promo__link:hover { border-bottom-color: #fff; }

/* ------------------------------------------------------------------- NAV -- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--ink-12);
  transition: box-shadow .4s var(--ease), background .4s var(--ease);
}
.nav.is-stuck { box-shadow: 0 6px 26px rgba(36, 26, 18, .08); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
}
.nav__inner > .btn { white-space: nowrap; flex: none; }
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand__logo {
  height: clamp(20px, 2vw, 26px);
  width: auto;
  transition: opacity .4s var(--ease);
}
.brand:hover .brand__logo { opacity: .68; }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
  text-decoration: none;
  white-space: nowrap;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  position: relative;
  padding: .3rem 0;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--papaya);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* The one link that sells. Marked so it reads as a different kind of item. */
.nav__links--sell { color: var(--papaya); font-weight: 700; }
.nav__links--sell::after { background: var(--papaya); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* Seven items is a lot for one row, so the gap and type step down before the
   hamburger takes over. */
@media (max-width: 1380px) { .nav__links { gap: 1.35rem; } }
@media (max-width: 1260px) {
  .nav__links { gap: 1rem; }
  .nav__links a { font-size: .72rem; letter-spacing: .07em; }
}
@media (max-width: 1140px) {
  .nav__links { gap: .8rem; }
  .nav__links a { font-size: .68rem; letter-spacing: .05em; }
}

@media (max-width: 1040px) { .nav__links { display: none; } }

/* --------------------------------------------------------- MOBILE NAV -- */
/* Built by main.js from the links already in the header. */
.navtoggle {
  display: none;
  width: 42px; height: 42px;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.navtoggle span {
  display: block;
  width: 16px; height: 2px;
  background: var(--ink);
  transition: transform .35s var(--ease-out), opacity .25s var(--ease);
}
/* Morph to an X while open */
.nav.is-open .navtoggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .navtoggle span:nth-child(2) { opacity: 0; }
.nav.is-open .navtoggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.navmenu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: none;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem var(--gutter) 1.5rem;
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 18px 34px rgba(36, 26, 18, .14);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .35s var(--ease-out);
}
.nav.is-open .navmenu { opacity: 1; transform: translateY(0); pointer-events: auto; }

.navmenu__links { display: flex; flex-direction: column; }
.navmenu__links a {
  display: block;
  padding: .85rem 0;
  border-bottom: 1px solid var(--ink-12);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.navmenu__sell { color: var(--papaya); }
.navmenu__cta { margin-top: 1.1rem; align-self: flex-start; }

@media (max-width: 1040px) {
  .navtoggle { display: flex; }
  .navmenu { display: flex; }
  /* the header CTA lives inside the panel below this width */
  .nav__inner > .btn { display: none; }
}

/* Keep the logo comfortably beside the button on small screens */
@media (max-width: 560px) {
  .nav__inner { height: 58px; gap: .75rem; }
  .brand__logo { height: 17px; }
  .navmenu__cta { font-size: .7rem; }
}

/* ------------------------------------------------------------------ HERO -- */
.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ocean);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: -8% 0 0;
  z-index: -2;
  /* Slow drift so the hero never feels frozen */
  animation: heroDrift 26s var(--ease) infinite alternate;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Portrait source: pull the crop up so the water stays in frame on wide
     screens instead of centring on the table. */
  object-position: center 34%;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(24, 16, 10, .88) 0%, rgba(24, 16, 10, .62) 34%,
                    rgba(24, 16, 10, .34) 62%, rgba(24, 16, 10, .46) 100%);
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(0, -2.2%, 0); }
}

.hero__inner { width: 100%; padding-block: clamp(3rem, 9vh, 7rem) clamp(2.5rem, 7vh, 4.5rem); }
.hero__kicker { color: var(--wave); opacity: 0; animation: fadeUp .9s var(--ease-out) .15s forwards; }

.hero h1 {
  color: var(--cream);
  font-size: clamp(2.9rem, 10.4vw, 9.2rem);
  max-width: 15ch;
  margin-bottom: 1.6rem;
}
/* Each word is masked and pushed up, then released one at a time */
/* Word spacing comes from the real space between spans, not padding —
   this only needs to clip the glyph vertically while it slides up. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.word > span {
  display: inline-block;
  transform: translateY(105%);
  animation: wordUp .95s var(--ease-out) forwards;
  animation-delay: calc(.28s + var(--i) * .085s);
}
.word--accent > span { color: var(--lime); }
@keyframes wordUp {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

.hero__lede {
  color: rgba(250, 245, 239, .9);
  max-width: 46ch;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  margin: 0 0 2.2rem;
  opacity: 0;
  animation: fadeUp .9s var(--ease-out) .85s forwards;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  opacity: 0;
  animation: fadeUp .9s var(--ease-out) 1s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 7vh, 4.5rem);
  color: rgba(250, 245, 239, .75);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .7rem;
  opacity: 0;
  animation: fadeUp .9s var(--ease-out) 1.2s forwards;
}
.hero__scroll i {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--lime));
  animation: scrollPulse 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.35); opacity: .4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
@media (max-width: 860px) { .hero__scroll { display: none; } }

/* ----------------------------------------------------------------- BTNS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: var(--papaya);
  color: var(--cream);
  transition: transform .38s var(--ease-out), background .38s var(--ease),
              color .38s var(--ease), border-color .38s var(--ease);
}
.btn:hover { transform: translateY(-3px); background: var(--passion); }
.btn__arrow { transition: transform .38s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  border-color: rgba(250, 245, 239, .45);
  color: var(--cream);
}
.btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn--ink { background: var(--ink); }
.btn--ink:hover { background: var(--ocean); }

/* --------------------------------------------------------------- MARQUEE -- */
.marquee {
  --speed: 26s;   /* lower = faster. Both tickers travel leftwards. */
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: .95rem;
  background: var(--papaya);
  color: var(--cream);
  border-block: 2px solid var(--ink);
  user-select: none;
}
.marquee--ocean { background: var(--ocean); }
.marquee--lime  { background: var(--lime); color: var(--ink); }

/* Two identical tracks slide left; when the first has fully cleared,
   the second sits exactly where it began — a seamless loop. */
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem;
  min-width: 100%;
  animation: ticker var(--speed) linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

.marquee__item {
  font-family: var(--display);
  font-size: clamp(.95rem, 1.9vw, 1.45rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.marquee__item::after {
  content: '';
  width: 9px; height: 9px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* --------------------------------------------------------------- SECTION -- */
/* The header is sticky, so anchor jumps need to stop short of it or the
   heading lands underneath the nav bar. */
section[id], [id="feed"] { scroll-margin-top: 88px; }
@media (max-width: 560px) { section[id], [id="feed"] { scroll-margin-top: 74px; } }

.section { padding-block: clamp(4.5rem, 11vw, 9rem); }
.section--sand { background: var(--sand); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* The italic accent word carries the section, the same way "catch" carries
   the newsletter. The display words above it step back into a lead-in. */
.section__head h2 {
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1;
}
.section__head h2 .em {
  display: block;
  font-size: 2.15em;
  line-height: .84;
  margin-top: .06em;
  padding-bottom: .08em;   /* room for italic descenders */
}
.section__head p { margin: 0; color: var(--ink-60); max-width: 46ch; }
.section__head p a { color: var(--papaya); text-decoration: underline; text-underline-offset: 3px; }
.grid__empty a { color: var(--papaya); }
@media (max-width: 860px) { .section__head { grid-template-columns: 1fr; align-items: start; } }

/* -------------------------------------------------------------- INTRO --- */
.intro__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 860px) { .intro__grid { grid-template-columns: 1fr; } }

.pillar {
  border-top: 2px solid var(--ink);
  padding-top: 1.4rem;
}
.pillar__num {
  font-family: var(--display);
  font-size: .8rem;
  color: var(--papaya);
  letter-spacing: .1em;
}
.pillar h3 { font-size: 1.35rem; margin: .5rem 0 .6rem; }
.pillar p { margin: 0; color: var(--ink-60); font-size: .95rem; }

/* ------------------------------------------------------- FEATURED/PARALLAX */
/* Layers are moved by --p, a scroll progress value (-1 → 1) set in JS.
   Each layer multiplies it differently, so background trails foreground. */
.featured {
  position: relative;
  overflow: hidden;
  background: var(--ocean);
  color: var(--cream);
  padding-block: clamp(5.5rem, 13vw, 11rem);
  isolation: isolate;
}
.featured__bg {
  position: absolute;
  inset: -18% 0;
  z-index: -3;
  opacity: .3;
  transform: translate3d(0, calc(var(--p, 0) * 90px), 0) scale(1.15);
  will-change: transform;
}
.featured__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Big outlined word drifting behind everything, slowest layer of all */
.featured__ghost {
  position: absolute;
  top: 8%;
  left: 50%;
  z-index: -2;
  font-family: var(--display);
  font-size: clamp(6rem, 22vw, 20rem);
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(250, 245, 239, .13);
  pointer-events: none;
  transform: translate3d(-50%, calc(var(--p, 0) * 40px), 0);
  will-change: transform;
}

.featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
@media (max-width: 940px) { .featured__grid { grid-template-columns: 1fr; } }

.featured__copy { transform: translate3d(0, calc(var(--p, 0) * -34px), 0); will-change: transform; }
.featured__kicker { color: var(--lime); }
.featured h2 {
  font-size: clamp(2rem, 4.4vw, 3.7rem);
  margin-bottom: 1.5rem;
  white-space: pre-line;
}
.featured__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--wave);
  margin: 0 0 1rem;
}
.featured p.featured__body { color: rgba(250, 245, 239, .82); max-width: 46ch; }

.featured__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem clamp(1.5rem, 3.4vw, 2.6rem);
  margin: 2.2rem 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(250, 245, 239, .25);
}
.featured__stat b {
  display: block;
  font-family: var(--display);
  /* "Anything Conch" is far longer than "$$", so this scales to fit */
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.15;
  color: var(--lime);
}
.featured__stat span {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250, 245, 239, .6);
}

/* Foreground image moves against the background — the parallax payoff */
.featured__art {
  position: relative;
  transform: translate3d(0, calc(var(--p, 0) * -66px), 0);
  will-change: transform;
}
.featured__art img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 3px solid var(--cream);
}
.featured__badge {
  position: absolute;
  top: -28px; right: -18px;
  width: 108px; height: 108px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--papaya);
  color: var(--cream);
  font-family: var(--display);
  font-size: .74rem;
  line-height: 1.25;
  border: 2px solid var(--ink);
  animation: badgeSpin 18s linear infinite;
}
@keyframes badgeSpin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .featured__badge { width: 84px; height: 84px; font-size: .62rem; top: -18px; right: -6px; } }

/* --------------------------------------------------------- EVENTS SLIDER -- */
.slider { position: relative; }

/* Scroll-snap does the work; the buttons only call scrollBy(). */
.slider__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline: 2px solid var(--papaya); outline-offset: 4px; }

.event {
  flex: 0 0 clamp(255px, 78vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 2px solid var(--ink);
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.event:hover { transform: translateY(-6px); box-shadow: 10px 12px 0 var(--ink); }

.event__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand); }
.event__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.event:hover .event__media img { transform: scale(1.07); }

/* Date block sits over the corner of the photo */
.event__date {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--ocean);
  color: var(--cream);
  padding: .45rem .8rem;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.event__date b { font-family: var(--display); font-size: .82rem; letter-spacing: .02em; }
.event__date span { font-size: .66rem; letter-spacing: .12em; color: var(--wave); }

.event__paid {
  position: absolute;
  top: .7rem; left: .7rem;
  background: var(--cream);
  border: 2px solid var(--ink);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .2rem .5rem;
}

.event__body { padding: 1.15rem 1.15rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.event__venue {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--papaya);
  margin: 0 0 .45rem;
}
.event__body h3 { font-size: 1.12rem; margin-bottom: .6rem; }
.event__pitch { font-size: .88rem; color: var(--ink-60); margin: 0 0 1rem; }
.event__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-bottom: 2px solid var(--papaya);
  padding-bottom: 2px;
  transition: gap .32s var(--ease-out), color .32s var(--ease);
}
.event__link:hover { gap: .8rem; color: var(--papaya); }

/* The permanent sales slot at the end of the run */
.event--advert {
  background: var(--lime);
  border-style: dashed;
  justify-content: center;
}
.event--advert .event__body { padding-block: 2rem; }

.slider__nav { display: flex; gap: .6rem; margin-top: 1.5rem; }
.sliderbtn {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  transition: background .32s var(--ease), color .32s var(--ease),
              transform .32s var(--ease-out), opacity .32s var(--ease);
}
.sliderbtn:hover:not(:disabled) { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.sliderbtn:disabled { opacity: .25; cursor: default; }

/* ------------------------------------------------------------ DIRECTORY -- */
.filterbar {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink-12);
}
.filtergroup { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .9rem; }
.filtergroup__label {
  flex: none;
  min-width: 5.5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-30);
}
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 560px) { .filtergroup__label { min-width: 100%; } }
.filter {
  padding: .58rem 1.15rem;
  border: 2px solid var(--ink-12);
  border-radius: 999px;
  background: transparent;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .32s var(--ease), color .32s var(--ease),
              border-color .32s var(--ease), transform .32s var(--ease-out);
}
.filter:hover { transform: translateY(-2px); border-color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 2px solid var(--ink);
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.section--sand .card { background: var(--cream); }
.card:hover { transform: translateY(-6px); box-shadow: 10px 12px 0 var(--ink); }

.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.07); }

.card__tag {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--lime);
  color: var(--ink);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .42rem .85rem;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
}
.card__price {
  position: absolute;
  top: .7rem; right: .7rem;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display);
  font-size: .68rem;
  padding: .25rem .6rem;
}

.card__body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.card__area {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papaya);
  margin: 0 0 .7rem;
}
.card__note { font-size: .88rem; color: var(--ink-60); margin: 0 0 1.1rem; }
.card__foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card__link {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-bottom: 2px solid var(--papaya);
  padding-bottom: 2px;
  transition: gap .32s var(--ease-out), color .32s var(--ease);
}
.card__link:hover { gap: .8rem; color: var(--papaya); }
.card__ext { font-size: .9em; transition: transform .32s var(--ease-out); }
.card__link:hover .card__ext { transform: translate(1px, -2px); }

/* Visible to screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.card__soon {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-30);
}
.card__updated { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-30); }

/* Past a year. Says only that it may be out of date, never for how long. */
.card__flag {
  flex-basis: 100%;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--passion);
}
.card__foot { flex-wrap: wrap; row-gap: .45rem; }

.showmore {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding-top: 1.5rem;
  text-align: center;
}
.showmore p { margin: 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-30); }
.board .showmore { padding-top: 2rem; }

/* Owners of listings without a menu get a way in */
.card__claim {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-60);
  border-bottom: 2px dashed var(--ink-12);
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.card__claim:hover { color: var(--papaya); border-bottom-color: var(--papaya); }

.grid__empty {
  grid-column: 1 / -1;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--ink-60);
}

/* ---------------------------------------------------------------- SPLIT --- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split__art img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border: 2px solid var(--ink); }

/* ------------------------------------------------------------ NEWSLETTER -- */
.signup {
  background: var(--mango);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; } }
/* "Catch" carries the weight — "The Local" steps back to a lead-in. */
.signup h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }

.signup__title { line-height: 1; }
.signup__pre {
  display: block;
  font-size: clamp(.88rem, 1.5vw, 1.1rem);
  letter-spacing: .05em;
  color: rgba(36, 26, 18, .72);
}
/* The word carries the section. Sized on its own scale rather than off the
   h2, and given room above so the tall italic ascenders (t, h) clear the
   line before it. */
.signup__hero {
  display: block;
  font-size: clamp(4.4rem, 11vw, 9.5rem);
  line-height: .82;
  letter-spacing: -.015em;
  margin-top: .1em;
  /* italic descenders (the tail of the 'h') need room below */
  padding-bottom: .1em;
}
.signup p { color: rgba(36, 26, 18, .78); max-width: 40ch; }

.signup__form { display: flex; flex-wrap: wrap; gap: .6rem; }
.signup__form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: .95rem 1.15rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  font: inherit;
  font-size: .92rem;
  transition: box-shadow .3s var(--ease);
}
.signup__form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(36, 26, 18, .25); }
/* First name needs less room than an email address, so it does not get an
   equal share of the row. */
.signup__form .signup__name { flex: 1 1 150px; }

.signup__note { font-size: .74rem; margin: .9rem 0 0; color: rgba(36, 26, 18, .6); }
.signup__note--ok  { color: var(--ink); font-weight: 700; }
.signup__note--err { color: var(--papaya); font-weight: 700; }

/* -------------------------------------------------------- FOR RESTAURANTS -- */
/* Owner-facing, so it deliberately looks different from the diner sections:
   ink ground, one column of argument, one hard-edged price card. */
.sell {
  background: var(--ink);
  color: var(--cream);
  /* Same ink as the footer, and no bottom padding stripe or border between
     them, so the dark canvas bleeds straight through into the footer. */
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem);
  margin-bottom: 0;
}
.sell + .footer { padding-top: clamp(2rem, 5vw, 3.5rem); }
.sell__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 940px) { .sell__grid { grid-template-columns: 1fr; } }

.sell__kicker { color: var(--lime); }
.sell h2 { font-size: clamp(2rem, 5vw, 3.9rem); margin-bottom: 1.6rem; }
.sell__copy p { color: rgba(250, 245, 239, .8); max-width: 52ch; }

/* The price card */
.offer {
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--papaya);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.offer__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--papaya);
  margin: 0 0 .6rem;
}
.offer__price { margin: 0; font-family: var(--display); line-height: 1; }
.offer__price b { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 400; }
.offer__price span { font-size: 1rem; letter-spacing: .04em; }
.offer__alt { margin: .4rem 0 1.4rem; font-size: .9rem; color: var(--ink-60); }

.offer__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .7rem; }
.offer__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .93rem;
}
.offer__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 8px; height: 8px;
  background: var(--papaya);
  transform: rotate(45deg);
}

.offer__rise {
  margin: -.6rem 0 1.3rem;
  font-size: .88rem;
  color: var(--ink-60);
}
.offer__rise b { color: var(--ink); font-weight: 700; }

.offer__scarcity {
  background: var(--lime);
  border: 2px solid var(--ink);
  padding: .7rem .9rem;
  font-size: .86rem;
  margin: 0 0 1.4rem;
}
.offer__fine { font-size: .8rem; color: var(--ink-60); margin: 1rem 0 0; }
.offer__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--ink-12);
  padding-bottom: 2px;
  transition: gap .32s var(--ease-out), border-color .32s var(--ease);
}
.offer__more:hover { gap: .8rem; border-bottom-color: var(--papaya); }

/* Wide variant used on the For Restaurants page */
.offer--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  background: var(--cream);
}
@media (max-width: 860px) { .offer--wide { grid-template-columns: 1fr; } }
.offer__aside h3 { font-size: 1.15rem; margin-bottom: 1.1rem; }

.steps { margin: 0; padding-left: 1.1rem; display: grid; gap: 1rem; }
.steps li { font-size: .93rem; color: var(--ink-60); }
.steps li b { color: var(--ink); }

/* -------------------------------------------------------- SILLY SEASON -- */
/* Lime reads as a notice rather than an emergency, and keeps the band
   distinct from the ocean feature directly beneath it. */
.silly {
  background: var(--lime);
  color: var(--ink);
  border-block: 2px solid var(--ink);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.silly[hidden] { display: none; }

.silly__inner { text-align: center; }

/* The kicker is a flex row with a rule before it, so centre it as a row */
.silly__kicker { color: var(--papaya); justify-content: center; }

.silly h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  max-width: 22ch;
  margin-inline: auto;
}
.silly__lede {
  margin: 1.2rem auto 1.8rem;
  max-width: 62ch;
  color: rgba(36, 26, 18, .78);
}

/* Doubled class so these beat the base .pagehead rule further down the
   sheet, which is ocean. Without it the band kept ocean and took the ink
   text, which is unreadable. */
.pagehead.pagehead--silly { background: var(--lime); color: var(--ink); }
.pagehead.pagehead--silly .pagehead__kicker { color: var(--papaya); }
.pagehead.pagehead--silly .pagehead__lede { color: rgba(36, 26, 18, .8); }
.pagehead.pagehead--silly h1 { color: var(--ink); }
.pagehead.pagehead--silly .word--accent > span { color: var(--papaya); }
.pagehead.pagehead--silly .btn--ghost { border-color: var(--ink); color: var(--ink); }
.pagehead.pagehead--silly .btn--ghost:hover { background: var(--ink); color: var(--cream); }

/* -------------------------------------------------------------- BOARD --- */
.board { border-top: 2px solid var(--ink); }
.board__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ink-12);
}
@media (max-width: 700px) {
  .board__row { grid-template-columns: 1fr; row-gap: .45rem; }
}

.board__who b { display: block; font-family: var(--display); font-size: 1rem; }
.board__who span {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papaya);
}
.board__state { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.board__updated {
  margin: 0 0 1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.board__reopen { font-size: .74rem; color: var(--ink-60); }

.pill {
  display: inline-block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.pill--open      { background: var(--wave); }
.pill--reopening { background: var(--lime); }
.pill--closed    { background: var(--passion); color: var(--cream); }

/* ------------------------------------------------------- PAGE HEADER ---- */
.pagehead {
  background: var(--ocean);
  color: var(--cream);
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.pagehead__kicker { color: var(--lime); }
.pagehead h1 {
  font-size: clamp(2.3rem, 6.6vw, 5.4rem);
  max-width: 18ch;
  margin-bottom: 1.5rem;
}
.pagehead__lede {
  max-width: 56ch;
  color: rgba(250, 245, 239, .85);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  margin: 0 0 2rem;
}
.pagehead__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ------------------------------------------------------------------ FAQ -- */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.faq__item { border-top: 2px solid var(--ink); padding-top: 1.2rem; }
.faq__item h3 { font-size: 1.05rem; margin-bottom: .55rem; }
.faq__item p { margin: 0; font-size: .93rem; color: var(--ink-60); }

/* --------------------------------------------------------------- CLOSER -- */
.closer {
  background: var(--papaya);
  color: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  text-align: center;
}
.closer h2 { font-size: clamp(2.1rem, 6vw, 4.4rem); margin-bottom: 1.2rem; }
.closer p { max-width: 46ch; margin: 0 auto 2rem; color: rgba(250, 245, 239, .9); }
.closer__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.closer .btn { background: var(--ink); }
.closer .btn:hover { background: var(--cream); color: var(--ink); }
.closer .btn--ghost { background: transparent; }

/* ----------------------------------------------------------- SOCIAL FEED -- */
/* Deliberately not another arrow slider. Two rows drift in opposite
   directions using the same ticker keyframe as the text marquees, on the
   ocean band so the photos pop and the page steps down into the dark footer. */
.feed {
  background: var(--ocean);
  color: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  overflow: hidden;
}
.feed__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.feed__kicker { color: var(--lime); }
.feed__head h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
.feed__cta { flex: none; }
.feed__cta [data-feed-handle] { text-transform: none; letter-spacing: .06em; }

.river { display: grid; gap: clamp(.7rem, 1.4vw, 1rem); }
.river__row { display: flex; overflow: hidden; }

.river__track {
  --speed: 68s;
  display: flex;
  flex: none;
  gap: clamp(.7rem, 1.4vw, 1rem);
  padding-right: clamp(.7rem, 1.4vw, 1rem);
  /* No min-width: the track must be exactly its content width so that
     translating -100% lands the clone precisely where it started. main.js
     repeats the tiles until the row is overfilled. */
  animation: ticker var(--speed) linear infinite;
}
/* Second row runs the other way, a touch slower, so the two never lock step */
.river__row--rev .river__track { animation-direction: reverse; --speed: 84s; }
.river:hover .river__track { animation-play-state: paused; }

.tile {
  position: relative;
  flex: none;
  width: clamp(150px, 30vw, 215px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--cream);
  background: rgba(250, 245, 239, .1);
  display: block;
  text-decoration: none;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.tile:hover img { transform: scale(1.07); }

.tile__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(36, 26, 18, .58);
  color: var(--cream);
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .06em;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.tile:hover .tile__veil,
.tile:focus-visible .tile__veil { opacity: 1; }

/* Handle chip punctuating the run of photos */
.tile--chip {
  display: grid;
  place-items: center;
  background: var(--lime);
  border-color: var(--ink);
  width: clamp(120px, 22vw, 165px);
}
.tile--chip span {
  font-family: var(--display);
  font-size: clamp(.8rem, 1.6vw, 1rem);
  color: var(--ink);
  letter-spacing: .02em;
}

/* The sixty-second signup: one short group, so the page should not look
   like the five-minute one wearing a smaller coat. */
.jform--fast .jgroup { border: 0; padding: 0; }
.jform--fast legend { margin-bottom: 1.1rem; }

.jalt {
  margin: 1.6rem 0 0;
  font-size: .85rem;
  color: var(--ink-60);
}
.jalt a { color: var(--papaya); }

/* ---------------------------------------------------------- MENU PAGE -- */
.menuhead {
  background: var(--ocean);
  color: var(--cream);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.menuhead__back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wave);
  transition: gap .3s var(--ease-out);
}
.menuhead__back:hover { gap: .85rem; }
.menuhead__kicker { color: var(--lime); }
.menuhead h1 { font-size: clamp(2.4rem, 7vw, 5rem); margin-bottom: .8rem; }
.menuhead__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--wave);
  margin: 0 0 2rem;
}

.menuhead__facts {
  list-style: none;
  margin: 0 0 2rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(250, 245, 239, .25);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem clamp(1.5rem, 4vw, 3rem);
}
.menuhead__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  color: var(--lime);
}
.menuhead__facts span {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250, 245, 239, .6);
}
.menuhead__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* The scans themselves */
.menupages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.menupage {
  position: relative;
  display: block;
  border: 2px solid var(--ink);
  background: var(--cream);
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.menupage:hover { transform: translateY(-5px); box-shadow: 10px 12px 0 var(--ink); }
.menupage img { width: 100%; height: auto; }
/* -------------------------------------------------------- MENU GATE -- */
/* The featured restaurant's menu opens after someone joins the list. */
.gate {
  width: min(92vw, 460px);
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 12px 14px 0 var(--ink);
}
.gate::backdrop { background: rgba(36, 26, 18, .55); }
.gate__close {
  position: absolute;
  top: .5rem;
  right: .65rem;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-60);
}
.gate__close:hover { color: var(--ink); }
.gate__kicker { color: var(--papaya); }
.gate h2 { font-size: clamp(1.6rem, 5vw, 2.1rem); margin: 0 0 .6rem; }
.gate__lede { margin: 0 0 1.4rem; font-size: .92rem; color: var(--ink-60); }
.gate__form { display: grid; gap: .6rem; }
.gate__form input {
  padding: .9rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  font: inherit;
  font-size: .92rem;
}
.gate__form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(36, 26, 18, .25); }
.gate__form .btn { justify-self: start; }
.gate__note { margin: .9rem 0 0; font-size: .78rem; color: var(--ink-60); min-height: 1.2em; }
.gate__note--ok  { color: var(--ink); font-weight: 700; }
.gate__note--err { color: var(--papaya); font-weight: 700; }

/* ------------------------------------------------------- TYPED MENU -- */
/* The menu as real text: readable on a phone, and searchable, which a photo
   of a menu board never is. */
.tmenu__jump {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.tmenu__jump .filter { text-decoration: none; }

.tmenu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.tmenu__sec {
  border: 2px solid var(--ink);
  background: var(--cream);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  scroll-margin-top: 6rem;
}
.tmenu__sec h3 {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  text-transform: uppercase;
  margin: 0 0 .9rem;
}
.tmenu__sec h4 {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--papaya);
  margin: 1.2rem 0 .2rem;
}
.tmenu__sec h4:first-of-type { margin-top: 0; }
.tmenu__intro { font-size: .85rem; color: var(--ink-60); margin: -.5rem 0 .8rem; }

.tmenu__list { list-style: none; margin: 0; padding: 0; }
.tmenu__list li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px dotted var(--ink-30);
  font-size: .95rem;
}
.tmenu__list li:last-child { border-bottom: 0; }
.tmenu__name { flex: 1; min-width: 0; }
.tmenu__name small { display: block; font-size: .78rem; color: var(--ink-60); margin-top: .1rem; }
.tmenu__price {
  flex: 0 0 4.2rem;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tmenu__list li.tmenu__head {
  padding-top: 0;
  border-bottom: 2px solid var(--ink);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.tmenu__note { font-size: .8rem; color: var(--ink-60); margin: .9rem 0 0; }
.tmenu__photo {
  display: inline-block;
  margin-top: 1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papaya);
}

/* Find them */
.visit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.visit__item span {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--papaya);
  margin-bottom: .35rem;
}
.visit__item b { display: block; font-family: var(--display); font-size: 1.15rem; }
.visit__item b a { color: inherit; text-decoration: none; }
.visit__item p { margin: .3rem 0 .6rem; color: var(--ink-60); font-size: .92rem; }
.visit__item > a { color: var(--papaya); font-weight: 700; font-size: .85rem; }

/* A landscape board menu gets the full row, or its small print is unreadable. */
.menupage--wide { grid-column: 1 / -1; }
.menupage__tag {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--lime);
  color: var(--ink);
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem .8rem;
}
.menunote {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 60ch;
  font-size: .9rem;
  color: var(--ink-60);
}
.menunote a { color: var(--papaya); }

/* ---------------------------------------------------------- JOIN FORM -- */
.pagehead--join { background: var(--ink); color: var(--cream); }
.pagehead--join .pagehead__kicker { color: var(--lime); }
.pagehead--join .pagehead__lede { color: rgba(250, 245, 239, .85); }
.pagehead__note {
  margin: 0;
  font-size: .86rem;
  color: rgba(250, 245, 239, .6);
  max-width: 52ch;
}

.wrap--form { max-width: 860px; }

.jgroup {
  border: 0;
  border-top: 2px solid var(--ink);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 1.5rem 0 0;
}
.jgroup legend {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
  padding: 0 .6rem 0 0;
}

.jrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 620px) { .jrow { grid-template-columns: 1fr; } }

.jfield { display: block; margin-bottom: 1.1rem; }
.jfield > span, .jlabel {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .45rem;
}
.jfield b, .jlabel b { color: var(--papaya); }
.jfield small { display: block; margin-top: .4rem; font-size: .78rem; color: var(--ink-60); }

.jfield input, .jfield select, .jfield textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: .8rem .95rem;
  background: var(--cream);
  border: 2px solid var(--ink-12);
  border-radius: 0;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.jfield textarea { resize: vertical; }
.jfield input:focus, .jfield select:focus, .jfield textarea:focus {
  outline: none;
  border-color: var(--papaya);
  box-shadow: 0 0 0 3px rgba(226, 82, 32, .16);
}
/* Only scold a field once the visitor has actually interacted with it.
   :invalid alone would flag every empty required field on page load, and
   :not(:placeholder-shown) does not help on inputs that have no placeholder. */
.jfield input:user-invalid,
.jfield select:user-invalid,
.jfield textarea:user-invalid { border-color: var(--passion); }

.jfield input[type="file"] {
  padding: .7rem;
  background: var(--sand);
  border-style: dashed;
  cursor: pointer;
}

.jintro {
  margin: 0 0 1.3rem;
  font-size: .92rem;
  color: var(--ink-60);
  max-width: 56ch;
}
[data-silly-dates][hidden] { display: none; }

.jchecks, .jradios {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
  margin-bottom: 1.3rem;
}
.jchecks label, .jradios label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  cursor: pointer;
}
.jchecks input, .jradios input { width: 17px; height: 17px; accent-color: var(--papaya); }

.jsubmit { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.jsubmit__note { margin: 0; font-size: .82rem; color: var(--ink-60); max-width: 46ch; }

.jerror {
  margin: 1.2rem 0 0;
  padding: .9rem 1.1rem;
  background: var(--passion);
  color: var(--cream);
  font-size: .9rem;
}
.jerror[hidden] { display: none; }

.jsubmit[hidden] { display: none; }

/* Post-submit confirmation */
.jdone {
  background: var(--lime);
  border: 2px solid var(--ink);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  margin-top: 1rem;
}
.jdone[hidden] { display: none; }
.jdone h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin-bottom: .8rem; }
.jdone p { margin: 0 0 .8rem; font-size: .95rem; }
.jdone p:last-child { margin-bottom: 0; }
.jdone__attach { padding-bottom: .8rem; border-bottom: 1px solid rgba(36, 26, 18, .25); }
.jdone__small { font-size: .84rem; color: rgba(36, 26, 18, .7); }
.jdone a { color: var(--papaya); }

/* ------------------------------------------------------ PAYMENT LINKS -- */
.pay__intro { max-width: 56ch; margin: 0 0 1.5rem; }
.pay__note { max-width: 60ch; margin: 1.4rem 0 0; font-size: .85rem; color: var(--ink-60); }

.pay__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.payopt {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 1.4rem;
  border: 2px solid var(--ink);
  background: var(--cream);
  text-decoration: none;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.payopt:hover { transform: translateY(-4px); box-shadow: 8px 10px 0 var(--ink); }
.payopt b { font-family: var(--display); font-size: 1.5rem; }
.payopt span {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papaya);
}
.payopt i { font-style: normal; }

.jpaypal {
  margin: -.6rem 0 1.3rem;
  padding: .8rem 1rem;
  background: var(--sand);
  border-left: 3px solid var(--papaya);
  font-size: .88rem;
}
.jpaypal[hidden] { display: none; }

/* Honeypot */
.jhide { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- FOOTER --- */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 6rem) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, .8fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(250, 245, 239, .18);
}
@media (max-width: 1180px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brandcol { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* Social + contact list */
.social a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.social a:hover { padding-left: 0; }          /* keep icons from shifting */
.social__icon {
  width: 19px; height: 19px;
  flex: none;
  transition: transform .35s var(--ease-out), color .3s var(--ease);
}
.social a:hover .social__icon { transform: translateY(-2px); color: var(--lime); }
.social b { font-weight: 700; }
.footer h4 {
  font-size: .74rem;
  letter-spacing: .18em;
  color: var(--wave);
  margin-bottom: 1.1rem;
  font-family: var(--body);
  font-weight: 700;
}
/* Cream-lettered variant of the logo; the black one would disappear here. */
.footer__logo {
  height: clamp(34px, 3.6vw, 44px);
  width: auto;
  margin-bottom: 1.1rem;
}
.footer p { color: rgba(250, 245, 239, .65); max-width: 38ch; margin: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer ul a {
  text-decoration: none;
  font-size: .9rem;
  color: rgba(250, 245, 239, .8);
  transition: color .3s var(--ease), padding-left .3s var(--ease-out);
}
.footer ul a:hover { color: var(--lime); padding-left: 6px; }
.footer__base {
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .76rem;
  color: rgba(250, 245, 239, .5);
}

/* ============================ SCROLL REVEAL ==============================
   Elements start shifted + transparent; an IntersectionObserver adds
   .is-in, and the CSS transition does the work. --d staggers siblings.
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .85s var(--ease-out) var(--d, 0s),
    transform .85s var(--ease-out) var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ==================== REDUCED MOTION ====================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Everything lands in its final state immediately */
  .reveal { opacity: 1; transform: none; transition: none; }
  .word > span { transform: none; animation: none; }
  .hero__kicker, .hero__lede, .hero__actions, .hero__scroll { opacity: 1; animation: none; }
  .hero__media { animation: none; transform: scale(1.06); }
  .marquee__track { animation: none; }
  .featured__bg, .featured__ghost, .featured__copy, .featured__art { transform: none; }
  .featured__badge, .hero__scroll i { animation: none; }
  .promo__track::before, .promo__track::after { animation: none; opacity: 1; }
  .slider__track { scroll-behavior: auto; }
  /* No drift: the rows become ordinary scrollable strips instead of
     freezing on the first few photos, and the duplicate is dropped. */
  .river__track { animation: none; }
  .river__row { overflow-x: auto; }
  .river__track--clone { display: none; }

  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}