/* ==========================================================================
   Tel Aviv Yafo
   Colour, type and spacing come from theme.json as --wp--preset--* vars.
   This file holds layout, components and motion.
   ========================================================================== */

:root {
  --tay-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tay-max: 1240px;
  --tay-gutter: 48px;
  --tay-band: 112px;
  --tay-r-card: 20px;
  --tay-r-panel: 16px;
  --tay-r-tile: 12px;
  --tay-nav-h: 76px;
}

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

html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }

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

::selection { background: var(--wp--preset--color--stone); color: var(--wp--preset--color--dark); }

:focus-visible {
  outline: 2px solid var(--wp--preset--color--tan);
  outline-offset: 3px;
}

.tay-skip {
  position: fixed; top: -100px; left: 16px; z-index: 500;
  background: var(--wp--preset--color--dark); color: var(--wp--preset--color--offwhite);
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--wp--preset--font-family--label); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: top .2s var(--tay-ease);
}
.tay-skip:focus { top: 16px; }

/* Shared shell ------------------------------------------------------------ */

.tay-wrap { max-width: var(--tay-max); margin-inline: auto; padding-inline: var(--tay-gutter); }
.tay-band { padding-block: var(--tay-band); }
.tay-band--sm { padding-block: clamp(48px, 6.5vw, 80px); }
.tay-band--md { padding-block: clamp(52px, 7.5vw, 96px); }

/* Rhythm classes that replace padding written inline by the page patterns.
   Inline values could not be scaled down for small screens without
   !important, which is why mobile inherited full desktop spacing. */
.tay-sec { padding-block: clamp(52px, 7.5vw, 96px); }
.tay-sec--sm { padding-block: clamp(44px, 6vw, 80px); }
.tay-sec--lg { padding-block: clamp(60px, 8.5vw, 112px); }
.tay-sec--top {
  padding-top: calc(var(--tay-nav-h) + clamp(30px, 5.5vw, 84px));
  padding-bottom: clamp(44px, 5.5vw, 64px);
}
.tay-sec--top-lg {
  padding-top: calc(var(--tay-nav-h) + clamp(30px, 5.5vw, 84px));
  padding-bottom: clamp(60px, 8.5vw, 112px);
}
.tay-sec--bottom-lg { padding: 0 0 clamp(60px, 8.5vw, 112px); }

/* Eyebrow: small caps label with the rule the design uses beside it -------- */

.tay-eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--wp--preset--color--muted);
  margin: 0 0 16px;
}
.tay-eyebrow::after {
  content: ""; flex: 0 0 44px; height: 2px; border-radius: 1px;
  background: var(--wp--preset--color--olive);
}
.tay-eyebrow--center { justify-content: center; }
.tay-eyebrow--center::before {
  content: ""; flex: 0 0 44px; height: 2px; border-radius: 1px;
  background: var(--wp--preset--color--olive);
}
.tay-eyebrow--onDark { color: var(--wp--preset--color--mist); }
.tay-eyebrow--onDark::after, .tay-eyebrow--onDark::before { background: var(--wp--preset--color--tan); }

.tay-h2 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; margin: 0 0 24px; }
.tay-h2 em { font-style: italic; font-weight: 500; color: var(--wp--preset--color--tan); }
.tay-lede { font-size: 17px; line-height: 1.8; max-width: 60ch; margin: 0; }

/* Buttons ----------------------------------------------------------------- */

.tay-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 14px; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 18px 38px; min-height: 56px; border-radius: 999px;
  border: 2px solid var(--wp--preset--color--dark);
  background: var(--wp--preset--color--dark); color: var(--wp--preset--color--offwhite);
  cursor: pointer; text-decoration: none;
  /* A resting shadow, not just a hover one: a call to action that only gains
     weight once you have already found it is not doing its job. */
  box-shadow: 0 10px 26px -14px rgba(20, 18, 14, .55);
  transition: transform .22s var(--tay-ease), box-shadow .22s var(--tay-ease),
              background-color .22s var(--tay-ease), color .22s var(--tay-ease);
}
.tay-btn:hover, .tay-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -14px rgba(20, 18, 14, .55);
  color: var(--wp--preset--color--offwhite);
}
.tay-btn--light {
  background: var(--wp--preset--color--offwhite); color: var(--wp--preset--color--dark);
  border-color: var(--wp--preset--color--offwhite);
}
.tay-btn--light:hover, .tay-btn--light:focus-visible { color: var(--wp--preset--color--dark); }
.tay-btn--ghost {
  /* Was transparent with a 75% border, which disappeared against busy
     photography. A blurred scrim keeps it legible over any image while still
     reading as the secondary choice next to the solid button. */
  background: rgba(16, 14, 11, .38); color: #fff; border-color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.tay-btn--ghost:hover, .tay-btn--ghost:focus-visible { background: rgba(250, 248, 245, .12); color: #fff; }
.tay-btn--sand {
  background: var(--wp--preset--color--sand); color: var(--wp--preset--color--dark);
  border-color: var(--wp--preset--color--sand);
}
.tay-btn--sand:hover, .tay-btn--sand:focus-visible { color: var(--wp--preset--color--dark); }

.tay-textlink {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--dark); background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none;
  transition: gap .25s var(--tay-ease), color .25s var(--tay-ease);
}
.tay-textlink:hover, .tay-textlink:focus-visible { gap: 16px; color: var(--wp--preset--color--tan); }

/* USP pill with the pulsing dot ------------------------------------------- */

.tay-usp {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--dark); background: var(--wp--preset--color--cream);
  border: 1.5px solid var(--wp--preset--color--olive);
  padding: 12px 22px 12px 18px; border-radius: 999px; margin: 32px 0 0;
  box-shadow: 0 6px 18px rgba(46, 42, 36, .1);
}
.tay-usp__dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wp--preset--color--olive); flex-shrink: 0;
}
.tay-usp__dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--wp--preset--color--olive);
  animation: tayPulse 2.2s ease infinite;
}
@keyframes tayPulse {
  0%   { transform: scale(.6);  opacity: .8; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Header ------------------------------------------------------------------ */

.tay-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  /* The design's 35% tint only works over light sections. Over the muted
     menu band the blend lands at #938D86, which drops the nav to 4.34:1.
     Raised so the bar is legible over every section; the blur, not the
     transparency, is what makes it read as glass. Over the home hero the
     --over variant below takes charge with light ink instead. */
  background: rgba(250, 248, 245, .85);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  transition: background 400ms ease;
}
.tay-header__inner {
  max-width: var(--tay-max); margin-inline: auto;
  padding: 14px 32px; height: var(--tay-nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.tay-logo { display: block; flex-shrink: 0; line-height: 0; }
.tay-logo img { height: 58px; width: auto; filter: invert(1); transition: filter 400ms ease; }

.tay-nav { display: flex; align-items: center; gap: 32px; }
.tay-nav a {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 400; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--dark); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 6px;
  transition: color .25s var(--tay-ease), border-color .25s var(--tay-ease);
}
.tay-nav a:hover { border-bottom-color: var(--wp--preset--color--tan); }
.tay-nav a[aria-current="page"] { border-bottom-color: var(--wp--preset--color--tan); }
.tay-nav .tay-nav__cta {
  /* 1px rather than 2px. The alpha is lifted so the thinner line does not read
     as fainter than the heavier one did. */
  border: 1px solid rgba(46, 42, 36, .58); border-radius: 999px;
  padding: 11px 22px; font-weight: 500; font-size: 12px;
}
.tay-nav .tay-nav__cta:hover {
  background: var(--wp--preset--color--dark); color: var(--wp--preset--color--offwhite);
  border-color: var(--wp--preset--color--dark);
}
.tay-nav .tay-nav__cta[aria-current="page"] {
  background: var(--wp--preset--color--dark); color: var(--wp--preset--color--offwhite);
  border-color: var(--wp--preset--color--dark);
}

/* Over the home hero the bar is transparent with light ink. */
.tay-header--over {
  background: linear-gradient(to bottom, rgba(20, 18, 14, .42) 0%, rgba(20, 18, 14, 0) 100%);
}
.tay-header--over .tay-logo img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25)); }
.tay-header--over .tay-nav a { color: var(--wp--preset--color--offwhite); text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.tay-header--over .tay-nav .tay-nav__cta { border-color: rgba(250, 248, 245, .9); }
.tay-header--over .tay-nav .tay-nav__cta:hover,
.tay-header--over .tay-nav .tay-nav__cta[aria-current="page"] {
  background: var(--wp--preset--color--offwhite); color: var(--wp--preset--color--dark);
  border-color: var(--wp--preset--color--offwhite); text-shadow: none;
}

.tay-burger {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--wp--preset--color--dark);
}
.tay-header--over .tay-burger { color: var(--wp--preset--color--offwhite); }

.tay-mobile { display: none; background: rgba(20, 18, 14, .94); padding: 8px 32px 24px; }
.tay-mobile.is-open { display: flex; flex-direction: column; }
.tay-mobile a {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 400; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--offwhite); text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid rgba(250, 248, 245, .12);
}
.tay-mobile a[aria-current="page"] { color: var(--wp--preset--color--tan); }

@media (max-width: 899px) {
  .tay-nav { display: none; }
  .tay-burger { display: flex; }
}

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

.tay-hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden;
}
.tay-hero__media { position: absolute; inset: 0; z-index: 0; }
.tay-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  image-orientation: from-image;
  animation: tayDrift 40s linear infinite alternate;
}
@keyframes tayDrift {
  0%   { transform: scale(1.08) translateY(0); }
  100% { transform: scale(1.08) translateY(5%); }
}
.tay-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(38, 42, 32, .62) 0%, rgba(38, 42, 32, .48) 45%, rgba(38, 42, 32, .8) 100%);
}
.tay-hero__inner {
  position: relative; z-index: 2; flex: 1;
  padding: clamp(88px, 12vw, 112px) clamp(20px, 4vw, 32px); text-align: center;
}
.tay-hero__box { max-width: 820px; margin-inline: auto; }
.tay-hero h1 {
  font-size: clamp(56px, 10vw, 128px); font-weight: 400; line-height: .95;
  letter-spacing: -0.01em; color: #fff; margin: 0 0 24px;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .4);
}
.tay-hero__rule {
  width: 72px; height: 4px; border-radius: 2px;
  background: var(--wp--preset--color--olive); margin: 0 auto 24px;
}
.tay-hero__tag {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 400; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; margin: 0 0 40px;
}
.tay-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Tier cards -------------------------------------------------------------- */

.tay-tiers { display: flex; gap: 20px; height: 460px; align-items: stretch; }
.tay-tier {
  flex: 1 1 0%; min-width: 220px; position: relative; overflow: hidden;
  border-radius: var(--tay-r-card); cursor: pointer; text-decoration: none;
  box-shadow: 0 24px 50px -32px rgba(46, 42, 36, .45);
  display: flex; flex-direction: column;
  transition: flex-grow 640ms var(--tay-ease);
}
/* Veil that fades in with the hover state, so the plain card colour underneath
   still carries white type. Tan alone is 4.01:1, which is under AA. */
.tay-tier::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(20, 18, 14, .14); opacity: 0;
  transition: opacity 520ms ease;
}
.tay-tier__bg {
  position: relative; z-index: 0; display: block; flex: 1 1 auto; min-height: 150px;
  background-size: cover; background-position: center;
  filter: brightness(1.04) saturate(1.02);
  transition: opacity 520ms ease, flex-basis 640ms var(--tay-ease),
              min-height 640ms var(--tay-ease), flex-grow 640ms var(--tay-ease);
}
/* The gradient existed to lift text off the photograph. Nothing sits on the
   photograph now. */
.tay-tier__scrim { display: none; }
.tay-tier__text {
  position: relative; z-index: 2; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 24px 26px;
  /* One brown across all three bands. Not the raw tan token: white on
     #8C7765 is 4.01:1, under AA for the 11px label. This is that tan
     with a 14 per cent veil baked in, which lands at 4.94:1. */
  background: #7B6959;
  transition: background-color 520ms ease, flex-grow 640ms var(--tay-ease),
              padding 520ms ease;
}
.tay-tier__label {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wp--preset--color--offwhite); margin: 0 0 8px; display: block;
}
.tay-tier__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: 27px; line-height: 1.12; color: #FFFDFA;
  margin: 0; display: block;
}
.tay-tier__body {
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden; opacity: 0; max-height: 0;
  transition: opacity 420ms ease, max-height 560ms var(--tay-ease);
}
.tay-tier__desc {
  font-size: 14.5px; line-height: 1.7; color: #F2EEE8; margin: 12px 0 0;
  max-width: 40ch; display: block;
}
.tay-tier__cta {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #FFFDFA; margin: 16px 0 0; display: flex; align-items: center; gap: 9px;
}

@media (hover: hover) and (min-width: 900px) {
  .tay-tiers:hover .tay-tier { flex-grow: 1; }
  /* Hovering a card also hovers the wrapper, so both rules match it. The
     wrapper rule scores (0,3,0) and beat a bare `.tay-tier:hover` at (0,2,0),
     which is why the card never grew. Qualifying it lifts this to (0,4,0). */
  .tay-tiers:hover .tay-tier:hover { flex-grow: 2.4; }
  /* The photograph slides away and the caption expands to fill the plain
     colour, centred - the behaviour the design shipped with. */
  .tay-tier:hover::after { opacity: 1; }
  .tay-tier:hover .tay-tier__bg { opacity: 0; flex: 0 0 0; min-height: 0; }
  .tay-tier:hover .tay-tier__text {
    flex: 1 1 auto; justify-content: center; background: transparent; padding: 32px 28px;
  }
  .tay-tier:hover .tay-tier__body { opacity: 1; max-height: 320px; }
}

/* Keyboard parity: focus opens the card exactly as hover does. */
.tay-tier:focus-visible { outline: 3px solid var(--wp--preset--color--sand); outline-offset: 3px; }
.tay-tier:focus-visible::after { opacity: 1; }
.tay-tier:focus-visible .tay-tier__bg { opacity: 0; flex: 0 0 0; min-height: 0; }
.tay-tier:focus-visible .tay-tier__text { flex: 1 1 auto; justify-content: center; background: transparent; }
.tay-tier:focus-visible .tay-tier__body { opacity: 1; max-height: 320px; }

@media (max-width: 899px) {
  .tay-tiers { flex-direction: column; height: auto; }
  .tay-tier__bg { min-height: 220px; }
  /* No hover on a touch screen, so the description would be unreachable. */
  .tay-tier__body { opacity: 1; max-height: none; }
}


/* Sasha's card: plaster on hover ------------------------------------------
   The card previews where it leads - the same plaster wall the Catering page
   opens with. Carried on ::after rather than the element itself, because the
   card's brand colour is written inline and an inline background cannot be
   overridden from a stylesheet.

   The texture averages #E1DFDA, so the white caption would disappear on it.
   On this card only, the type flips to dark ink: 9.15:1 against the darkest
   part of the image, and 6.64:1 for the forest label. Off-white would be
   1.47:1. Nothing about the resting state changes - ::after is transparent
   until hover. */

.tay-tier[href*="catering"]::after {
  background-image: url('../img/plaster-bg.webp');
  background-size: cover; background-position: center;
  background-color: var(--wp--preset--color--offwhite);
}
.tay-tier[href*="catering"]:hover .tay-tier__label,
.tay-tier[href*="catering"]:focus-visible .tay-tier__label {
  color: var(--wp--preset--color--forest);
}
.tay-tier[href*="catering"]:hover .tay-tier__name,
.tay-tier[href*="catering"]:hover .tay-tier__desc,
.tay-tier[href*="catering"]:hover .tay-tier__cta,
.tay-tier[href*="catering"]:focus-visible .tay-tier__name,
.tay-tier[href*="catering"]:focus-visible .tay-tier__desc,
.tay-tier[href*="catering"]:focus-visible .tay-tier__cta {
  color: var(--wp--preset--color--dark);
}

/* Split sections ---------------------------------------------------------- */

.tay-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 112px; align-items: center; }
.tay-split--even { grid-template-columns: 1fr 1fr; }
.tay-split__media {
  width: 100%; border-radius: var(--tay-r-card); overflow: hidden;
  box-shadow: 0 30px 70px rgba(46, 42, 36, .2);
}
.tay-split__media img { width: 100%; height: 100%; object-fit: cover; }
.tay-split__media--portrait { aspect-ratio: 4 / 5; }
.tay-split__media--tall { aspect-ratio: 3 / 4; }
.tay-split__media--wide { aspect-ratio: 4 / 3; }
.tay-split p { max-width: 60ch; }
.tay-split__foot { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid rgba(46, 42, 36, .13); }

/* Quote band -------------------------------------------------------------- */

/* Brand tan cannot carry 12px text at AA in either direction: white reaches
   only 4.25:1 against it and the dark ink only 3.36:1. The attribution line is
   12px, so the band itself deepens instead. Mixed from the brand tan rather
   than picked fresh, so it stays in the family. */
.tay-quote { background: var(--wp--preset--color--tan); padding: clamp(44px, 6vw, 64px) clamp(20px, 4vw, 32px); text-align: center; }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .tay-quote { background: color-mix(in srgb, var(--wp--preset--color--tan) 70%, var(--wp--preset--color--dark)); }
}
.tay-quote__inner { max-width: 820px; margin-inline: auto; }
.tay-quote p:first-child {
  font-family: var(--wp--preset--font-family--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 1.6vw + 1rem, 1.9rem); line-height: 1.5;
  color: var(--wp--preset--color--offwhite); margin: 0 0 16px;
}
.tay-quote cite {
  font-family: var(--wp--preset--font-family--label); font-style: normal;
  font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--cream);
}

/* Chef ------------------------------------------------------------------- */

.tay-chef { display: grid; grid-template-columns: .85fr 1.15fr; gap: 0 88px; align-items: start; }
.tay-chef__head { grid-column: 1 / -1; margin: 0 0 64px; text-align: center; padding: 0 24px; }
.tay-chef__head .tay-h2 { margin: 0; padding: 8px 0; line-height: 1.15; }
.tay-chef__aside { position: sticky; top: 120px; }
.tay-chef__caption {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  /* Tan on off-white is 4.0:1, under AA for 12px. Deepened just enough while
     staying a warm tan rather than dropping to the neutral body ink. */
  color: var(--wp--preset--color--tan); margin: 20px 0 0; text-align: center;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .tay-chef__caption { color: color-mix(in srgb, var(--wp--preset--color--tan) 80%, var(--wp--preset--color--dark)); }
}
.tay-chef__body p { max-width: 64ch; margin: 0 0 22px; }

/* Bento grid (menu highlights, catering offers, gallery) ------------------- */

.tay-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 230px; gap: 20px; margin-top: 64px; }
.tay-bento--4 { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.tay-bento__item {
  position: relative; overflow: hidden; border-radius: var(--tay-r-card);
  background: var(--wp--preset--color--night);
}
.tay-bento__item img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--tay-ease);
}
.tay-bento__item:hover img { transform: scale(1.05); }
.tay-bento__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(20, 18, 14, .9) 0%, rgba(20, 18, 14, .3) 55%, rgba(20, 18, 14, .05) 100%);
}
.tay-bento__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; pointer-events: none; }
.tay-bento__label {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; margin: 0 0 6px;
}
.tay-bento__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: 26px; line-height: 1.08; color: #fff; margin: 0;
}
.tay-bento__item--lg { grid-column: span 2; grid-row: span 2; }
.tay-bento__item--lg .tay-bento__name { font-size: 38px; }
.tay-bento__item--wide { grid-column: span 2; }

/* Reviews scroll stack ---------------------------------------------------- */

.tay-reviews { background: var(--wp--preset--color--dark); padding: clamp(64px, 9vw, 112px) 0 0; }
.tay-reviews__head { max-width: var(--tay-max); margin-inline: auto; padding-inline: var(--tay-gutter); text-align: center; }
.tay-reviews__head .tay-h2 { color: var(--wp--preset--color--offwhite); margin-bottom: 20px; }
.tay-reviews__head .tay-h2 em { color: var(--wp--preset--color--light-tan); }
.tay-reviews__head p { color: var(--wp--preset--color--mist); max-width: 52ch; margin-inline: auto; }
.tay-reviews__track { position: relative; height: 260vh; perspective: 1000px; }
.tay-reviews__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.tay-reviews__deck { position: relative; width: min(420px, 86vw); height: 400px; }
.tay-review {
  position: absolute; left: 0; right: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 40px 36px; box-sizing: border-box;
  background: var(--wp--preset--color--offwhite);
  border: 1px solid rgba(46, 42, 36, .12); border-radius: var(--tay-r-card);
  box-shadow: 0 24px 60px rgba(20, 18, 14, .28);
  backface-visibility: hidden; will-change: transform;
}
.tay-review__stars {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 11px; letter-spacing: 0.18em;
  color: var(--wp--preset--color--tan); margin: 0;
}
.tay-review blockquote {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-style: italic; font-size: 23px; line-height: 1.45;
  color: var(--wp--preset--color--dark); margin: 0; text-wrap: pretty;
}
.tay-review__by { display: flex; flex-direction: column; gap: 4px; }
.tay-review__name {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--dark);
}
.tay-review__meta { font-size: 13px; color: var(--wp--preset--color--muted); }

/* Without JS the deck is a plain readable column, not a pile. */
.no-js .tay-reviews__track { height: auto; }
.no-js .tay-reviews__pin { position: static; height: auto; padding: 56px 0; }
.no-js .tay-reviews__deck { width: min(560px, 90vw); height: auto; display: grid; gap: 24px; }
.no-js .tay-review { position: static; height: auto; }

/* Social ------------------------------------------------------------------ */

.tay-social-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 48px; }
/* The radius was only ever on `a`, but these tiles render as <figure>, so it
   never applied and the photos sat square. Both are covered now: the grid is a
   static set today and becomes links the day a real feed is wired up. */
.tay-social-grid figure,
.tay-social-grid a {
  position: relative; display: block; aspect-ratio: 1;
  border-radius: 14px; overflow: hidden; margin: 0;
}
.tay-social-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit; transition: transform 600ms var(--tay-ease);
}
.tay-social-grid a:hover img,
.tay-social-grid figure:hover img { transform: scale(1.06); }
.tay-social-row { display: flex; gap: 16px; justify-content: center; }
.tay-social-row a {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--wp--preset--color--dark); color: var(--wp--preset--color--offwhite);
  display: flex; align-items: center; justify-content: center;
  transition: transform 220ms ease;
}
.tay-social-row a:hover { transform: translateY(-3px); color: var(--wp--preset--color--offwhite); }

/* Menu pages -------------------------------------------------------------- */

.tay-menu-head { background: var(--wp--preset--color--muted); padding: clamp(64px, 8vw, 104px) 0; }
/* On the Menu page this band is the page top and has to clear the fixed
   header; on Express it sits mid-page and does not. Adding the header
   allowance unconditionally made the top look nearly three times the bottom.
   Applied only where it is actually the first section, so the *visible*
   padding is symmetric on both pages. */
.tay-menu-head:first-of-type { padding-top: calc(var(--tay-nav-h) + clamp(64px, 8vw, 104px)); }
.tay-menu-head h1 { color: var(--wp--preset--color--offwhite); margin: 0 0 24px; }
/* Sand (#DCC5AC) on the muted ground measures 4.47:1, a hair under AA for
   12px text. Lifted just enough to clear it while reading as the same warm
   sand; the rule beside it keeps the design's exact value. */
.tay-menu-head .tay-eyebrow { color: #E5D5C2; }
.tay-menu-head .tay-eyebrow::after { background: var(--wp--preset--color--sand); }
.tay-menu-head p { color: var(--wp--preset--color--mist); max-width: 60ch; margin: 0 0 40px; }

.tay-filters { display: flex; gap: 12px; flex-wrap: wrap; }
.tay-filter {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--wp--preset--color--cream);
  border: 2px solid rgba(240, 237, 232, .7);
  transition: background-color .2s ease, color .2s ease;
}
.tay-filter[aria-pressed="true"] {
  background: var(--wp--preset--color--offwhite); color: var(--wp--preset--color--dark);
}

.tay-menu-body { background: var(--wp--preset--color--cream); padding: clamp(44px, 6vw, 64px) 0 clamp(56px, 8.5vw, 112px); }
.tay-menu-group { margin-bottom: 72px; padding-left: 24px; border-left: 3px solid var(--wp--preset--color--moss); }
.tay-menu-group h2, .tay-menu-group h3 {
  font-size: 27px; margin: 0; color: var(--wp--preset--color--dark);
}
.tay-menu-group__head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 16px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(46, 42, 36, .35);
}
.tay-menu-group__head + .tay-menu-group__head { margin-top: 40px; }

.tay-dish { padding: 18px 0; border-bottom: 1px solid rgba(46, 42, 36, .2); }
.tay-dish__row { display: flex; align-items: baseline; gap: 16px; }
.tay-dish__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: 20px; color: var(--wp--preset--color--dark); flex: 1;
}
.tay-dish__price {
  font-weight: 400; font-size: 15px; color: var(--wp--preset--color--muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tay-dish__note {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 400; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin: 4px 0 0;
}
.tay-dish__desc { font-size: 14px; line-height: 1.65; color: var(--wp--preset--color--muted); margin: 6px 0 0; max-width: 62ch; }
.tay-tag {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--offwhite); background: var(--wp--preset--color--moss);
  padding: 3px 9px; border-radius: 999px; margin-left: 8px; white-space: nowrap;
}

.tay-cols2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 72px; }
.tay-addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.tay-addon {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid rgba(46, 42, 36, .15); font-size: 13.5px; color: var(--wp--preset--color--muted);
}
.tay-drink {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid rgba(46, 42, 36, .15);
}
.tay-drink span:first-child { font-size: 14px; color: var(--wp--preset--color--dark); }
.tay-drink span:last-child { font-size: 13px; color: var(--wp--preset--color--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tay-menu-note {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 400; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin: 24px 0 0;
}

/* Express ----------------------------------------------------------------- */

.tay-express-hero { background: var(--wp--preset--color--offwhite); padding: calc(var(--tay-nav-h) + clamp(30px, 5.5vw, 84px)) 0 0; }
/* The catering hero carried its padding inline, which meant it could not shrink
   on small screens. Owned here now, on the same fluid scale as every other
   page top. */
.tay-catering-hero { padding: calc(var(--tay-nav-h) + clamp(30px, 5.5vw, 84px)) 0 clamp(60px, 8.5vw, 112px); }
.tay-express-hero .tay-wrap { padding-bottom: clamp(44px, 5.5vw, 64px); }

.tay-express-feature {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--wp--preset--color--deep-olive) 0%, var(--wp--preset--color--muted) 100%);
  padding: clamp(60px, 8.5vw, 112px) 0;
}
.tay-blob { position: absolute; border-radius: 50%; filter: blur(6px); pointer-events: none; }
.tay-blob--1 {
  top: -90px; right: -70px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(193, 168, 143, .5) 0%, rgba(193, 168, 143, 0) 70%);
  animation: tayBlob1 11s ease-in-out infinite;
}
.tay-blob--2 {
  bottom: -110px; left: -60px; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(140, 119, 101, .55) 0%, rgba(140, 119, 101, 0) 70%);
  animation: tayBlob2 13s ease-in-out infinite;
}
@keyframes tayBlob1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-30px) scale(1.08); } }
@keyframes tayBlob2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-20px,26px) scale(1.1); } }
.tay-express-feature .tay-split { position: relative; }
.tay-express-feature p { color: var(--wp--preset--color--cream); max-width: 55ch; }
.tay-express-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(220, 197, 172, .18); border: 1.5px solid var(--wp--preset--color--sand);
  display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}

.tay-express-strip {
  position: relative; background: #EDEAE4 center / cover no-repeat; text-align: center;
  /* Taller, so the plaster texture reads as a surface rather than a stripe and
     the line has room to land. Fluid, so it does not swallow a phone screen. */
  padding: clamp(88px, 13vw, 168px) 0;
}
.tay-express-strip h2 {
  font-style: italic; font-size: clamp(26px, 3.2vw, 36px);
  color: var(--wp--preset--color--muted); margin: 0;
}

.tay-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.tay-info-card {
  background: var(--wp--preset--color--offwhite); border-radius: var(--tay-r-panel);
  padding: 36px 32px; border-top: 4px solid var(--wp--preset--color--tan);
  box-shadow: 0 16px 36px -20px rgba(46, 42, 36, .35);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.tay-info-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -18px rgba(46, 42, 36, .4); }
.tay-info-card__icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(140, 119, 101, .15);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.tay-info-card__label {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--tan); margin: 0 0 8px;
}
.tay-info-card p:last-child { font-size: 15px; color: var(--wp--preset--color--dark); margin: 0; line-height: 1.8; }

/* Catering ---------------------------------------------------------------- */

.tay-plaster { position: relative; overflow: hidden; }
.tay-plaster__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .14; pointer-events: none;
}
.tay-plaster > .tay-wrap { position: relative; }

.tay-catering-menu { background: var(--wp--preset--color--forest); padding: clamp(48px, 6.5vw, 80px) 0; }
.tay-catering-menu .tay-eyebrow { color: var(--wp--preset--color--tan); }
.tay-catering-menu .tay-h2 { color: var(--wp--preset--color--offwhite); margin-bottom: 16px; }
.tay-catering-menu > .tay-wrap > p { color: var(--wp--preset--color--mist); max-width: 65ch; margin: 0 0 56px; }
.tay-catering-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 72px; }
.tay-catering-col { padding-left: 24px; border-left: 3px solid var(--wp--preset--color--tan); }
.tay-catering-col h3 { font-size: 27px; color: var(--wp--preset--color--offwhite); margin: 0; }
.tay-catering-col h3 small { font-size: 14px; color: var(--wp--preset--color--mist); font-family: var(--wp--preset--font-family--body); }
.tay-catering-col__head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(140, 119, 101, .55);
}
.tay-catering-col__head + .tay-catering-col__head { margin-top: 32px; }
.tay-catering-row { padding: 16px 0; border-bottom: 1px solid rgba(124, 128, 103, .3); }
.tay-catering-row__line { display: flex; align-items: baseline; gap: 16px; }
.tay-catering-row__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: 19px; color: var(--wp--preset--color--offwhite); flex: 1;
}
.tay-catering-row__price { font-size: 14px; color: var(--wp--preset--color--mist); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tay-catering-row__desc { font-size: 13px; line-height: 1.6; color: var(--wp--preset--color--mist); margin: 4px 0 0; }
.tay-tag--light {
  color: var(--wp--preset--color--dark); background: var(--wp--preset--color--stone);
  font-size: 10px; padding: 2px 8px;
}
.tay-catering-col--full { grid-column: 1 / -1; }
.tay-platters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; }

.tay-masonry { columns: 3; gap: 20px; }
.tay-masonry figure { break-inside: avoid; margin: 0 0 20px; border-radius: var(--tay-r-tile); overflow: hidden; }

/* Forms ------------------------------------------------------------------- */

.tay-form-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: stretch; }
.tay-form {
  background: rgba(250, 248, 245, .86); border: 1px solid rgba(46, 42, 36, .13);
  border-radius: var(--tay-r-panel); padding: 48px;
}
.tay-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 24px; }
.tay-field { margin-bottom: 24px; }
.tay-field label,
.tay-form__row label {
  display: block; font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin-bottom: 8px;
}
.tay-field input, .tay-field select, .tay-field textarea,
.tay-form__row input, .tay-form__row select {
  width: 100%; background: transparent; border: 0;
  border-bottom: 2px solid rgba(46, 42, 36, .28);
  padding: 12px 0; font-size: 16px; color: var(--wp--preset--color--dark);
  font-family: var(--wp--preset--font-family--body);
  transition: border-color .2s ease;
}
.tay-field textarea { resize: vertical; min-height: 110px; }
.tay-field input:focus, .tay-field select:focus, .tay-field textarea:focus,
.tay-form__row input:focus, .tay-form__row select:focus {
  outline: none; border-bottom-color: var(--wp--preset--color--tan);
}
.tay-field__hint { font-size: 13px; color: var(--wp--preset--color--muted); margin-top: 6px; }
.tay-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tay-notice {
  background: rgba(124, 128, 103, .16); border: 1px solid var(--wp--preset--color--olive);
  border-radius: var(--tay-r-panel); padding: 24px 32px; margin-bottom: 32px;
  font-size: 16px; color: var(--wp--preset--color--dark);
}
.tay-notice--error { background: rgba(140, 119, 101, .14); border-color: var(--wp--preset--color--tan); }
.tay-map { border-radius: var(--tay-r-card); overflow: hidden; box-shadow: 0 10px 34px rgba(46, 42, 36, .14); min-height: 320px; }
.tay-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* Contact ----------------------------------------------------------------- */

.tay-contact-band { background: var(--wp--preset--color--stone); padding: clamp(48px, 6.5vw, 80px) 0; }
.tay-contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: stretch; }
.tay-contact-card { background: rgba(250, 248, 245, .6); border-radius: var(--tay-r-panel); padding: 44px 40px; }
.tay-contact-card h2 { font-size: 27px; color: var(--wp--preset--color--forest); margin: 0 0 24px; }
.tay-contact-row { display: flex; gap: 24px; padding: 16px 0; border-bottom: 1px solid rgba(46, 42, 36, .18); }
.tay-contact-row:last-of-type { border-bottom: 0; }
.tay-contact-row__label {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--forest); width: 110px; flex-shrink: 0; margin: 0;
}
.tay-contact-row p { font-size: 15px; color: var(--wp--preset--color--dark); line-height: 1.7; margin: 0; }
/* The phone and email are real links here, which the design had as plain text.
   Tan on this panel is only 4.01:1, so they take the body ink and earn their
   affordance from the underline instead of from colour. */
.tay-contact-row a { color: var(--wp--preset--color--dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tay-contact-row a:hover, .tay-contact-row a:focus-visible { color: var(--wp--preset--color--forest); }

/* The contact panel sits on Stone, where the footer's off-white icons measure
   1.81:1 - effectively invisible. Dark ink reaches 7.43:1, and the ring needs
   65 per cent opacity to clear the 3:1 WCAG 1.4.11 asks of a UI boundary.
   Left-aligned too: everything else in that column starts at the same edge,
   so a centred row of icons sat 170px adrift of the Send button. */
.tay-contact-card .tay-footer__social { justify-content: flex-start; }
.tay-contact-card .tay-footer__social a {
  color: var(--wp--preset--color--dark);
  border-color: rgba(46, 42, 36, .65);
}
.tay-contact-card .tay-footer__social a:hover,
.tay-contact-card .tay-footer__social a:focus-visible {
  background: rgba(46, 42, 36, .1);
  color: var(--wp--preset--color--dark);
}

.tay-contact-card .tay-map { height: 220px; min-height: 220px; margin-top: 24px; border-radius: var(--tay-r-panel); }
.tay-contact-card .tay-map iframe { min-height: 220px; }
.tay-contact-card .tay-field input,
.tay-contact-card .tay-field textarea {
  background: rgba(250, 248, 245, .7); border-bottom: 2px solid var(--wp--preset--color--tan);
  padding: 12px; font-size: 15px;
}
/* Tan at 11px on this panel is 3.2:1. Labels take the card's own heading
   ink, which reads as deliberate rather than as a downgrade. */
.tay-contact-card .tay-field label { color: var(--wp--preset--color--forest); font-size: 11px; }
.tay-contact-card .tay-btn { background: var(--wp--preset--color--forest); border-color: #F2F0ED; }

/* Footer ------------------------------------------------------------------ */

.tay-footer { background: var(--wp--preset--color--forest); padding: clamp(64px, 9vw, 112px) 0 48px; }
.tay-footer__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px;
  padding-bottom: 72px; border-bottom: 1px solid rgba(250, 248, 245, .16); text-align: center;
}
.tay-footer__mark {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 300; font-size: 38px; line-height: 1.1;
  color: var(--wp--preset--color--offwhite); margin: 0 0 16px;
}
.tay-footer__tagline {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--mist); margin: 0 0 28px;
  /* On one line this ran wider than the logo beneath it and pushed the whole
     column out of step with the other two. Held to the logo's width it breaks
     into two balanced rows. */
  max-width: 220px; margin-inline: auto; text-wrap: balance; line-height: 1.9;
}
.tay-footer__logo { height: 58px; width: auto; margin-inline: auto; }
.tay-footer__head {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wp--preset--color--offwhite); margin: 0 0 16px;
  border-bottom: 2px solid var(--wp--preset--color--olive);
  display: inline-block; padding-bottom: 8px;
}
.tay-footer__links { display: flex; flex-direction: column; gap: 8px; }
.tay-footer a { color: var(--wp--preset--color--mist); text-decoration: none; font-size: 16px; }
.tay-footer a:hover { color: var(--wp--preset--color--offwhite); }
.tay-footer p { color: var(--wp--preset--color--mist); font-size: 16px; line-height: 1.8; margin: 0 0 12px; }
.tay-footer__social { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.tay-footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--wp--preset--color--mist);
  display: flex; align-items: center; justify-content: center;
  color: var(--wp--preset--color--offwhite);
  transition: transform 220ms ease, background-color 220ms ease;
}
.tay-footer__social a:hover { transform: translateY(-3px); background: rgba(250, 248, 245, .1); }
.tay-footer__base {
  padding-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.tay-footer__base span { font-size: 14px; color: var(--wp--preset--color--mist); }
.tay-footer__base span:last-child {
  font-family: var(--wp--preset--font-family--label);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .85;
}

/* Reveal ------------------------------------------------------------------ */

.tay-reveal { opacity: 1; transform: none; }
.js .tay-reveal.is-armed {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--tay-ease), transform .8s var(--tay-ease);
}
.js .tay-reveal.is-armed.is-in { opacity: 1; transform: none; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1100px) {
  .tay-split, .tay-split--even { grid-template-columns: 1fr; gap: 56px; }
  .tay-chef { grid-template-columns: 1fr; gap: 48px; }
  .tay-chef__aside { position: static; }
  .tay-form-grid, .tay-contact-grid { grid-template-columns: 1fr; }
  .tay-catering-grid { grid-template-columns: 1fr; gap: 48px; }
  .tay-masonry { columns: 2; }
}

@media (max-width: 899px) {
  :root { --tay-gutter: 24px; --tay-band: 68px; }
  .tay-header__inner { padding: 12px 20px; }
  .tay-bento, .tay-bento--4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; gap: 16px; }
  .tay-bento__item--lg .tay-bento__name { font-size: 28px; }
  .tay-info-cards { grid-template-columns: 1fr; }
  .tay-cols2 { grid-template-columns: 1fr; gap: 40px; }
  .tay-social-grid { grid-template-columns: repeat(3, 1fr); }
  .tay-footer__grid { grid-template-columns: 1fr; gap: 48px; }
  .tay-form { padding: 32px 24px; }
  .tay-form__row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .tay-platters { grid-template-columns: 1fr; }
  .tay-express-hero, .tay-catering-hero { padding-top: calc(var(--tay-nav-h) + 44px); }

  /* Touch targets. WCAG 2.5.8 asks for 24px minimum; 44px is the platform
     convention and what a thumb actually needs. These were 38-41px. */
  .tay-filter { min-height: 44px; }
  .tay-footer__social a, .tay-social-row a { width: 44px; height: 44px; }
  .tay-textlink { min-height: 44px; }
  /* Footer nav sat at 29px tall, which is a miss waiting to happen on a phone.
     Padding rather than a height, so the link box grows with the text. */
  .tay-footer__links a { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 560px) {
  :root { --tay-band: 54px; --tay-gutter: 20px; }
  .tay-masonry { columns: 1; }
  .tay-addons { grid-template-columns: 1fr; }
  .tay-social-grid { grid-template-columns: repeat(2, 1fr); }
  .tay-contact-row { flex-direction: column; gap: 6px; }
  .tay-contact-row__label { width: auto; }
  /* Phone and email are the whole point of this page, so on a phone they get
     a real target rather than a 19px line of text. */
  .tay-contact-row a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Block gap between sections -----------------------------------------------
   WordPress gives every top-level block a 24px block gap. These sections are
   full-bleed colour bands butted against each other, so that gap renders as a
   stripe of page background between them - and above the hero. Zeroed here
   rather than in theme.json, because blockGap still needs to apply inside
   content the client adds in the editor. */

.wp-site-blocks > *,
.wp-site-blocks section,
.wp-site-blocks > .wp-block-group > * { margin-block-start: 0; }

/* Back to top -------------------------------------------------------------
   Works without JavaScript: the href is a plain fragment. The script only
   handles fading it in after a few screens, so it is not sitting over the
   hero from the moment the page loads. */

.tay-totop {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  z-index: 60; width: 48px; height: 48px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wp--preset--color--forest); color: var(--wp--preset--color--offwhite);
  border: 1px solid rgba(250, 248, 245, .28);
  box-shadow: 0 12px 28px -12px rgba(20, 18, 14, .6);
  text-decoration: none;
  transition: opacity .3s ease, transform .3s var(--tay-ease), background-color .3s ease;
}
.tay-totop:hover, .tay-totop:focus-visible {
  background: var(--wp--preset--color--deep-olive);
  transform: translateY(-3px);
  color: var(--wp--preset--color--offwhite);
}
.tay-totop:focus-visible { outline: 2px solid var(--wp--preset--color--sand); outline-offset: 3px; }

/* With JavaScript the button waits until it is useful. */
.js .tay-totop { opacity: 0; pointer-events: none; transform: translateY(10px); }
.js .tay-totop.is-in { opacity: 1; pointer-events: auto; transform: none; }

@media print { .tay-totop { display: none; } }


/* Footer tagline ------------------------------------------------------------
   `.tay-footer p` scores (0,1,1) and was beating the (0,1,0) class selector,
   which killed the auto margins and pinned the tagline to the left edge while
   the mark and the logo stayed centred. Qualified to (0,2,0) so it wins. */
.tay-footer .tay-footer__tagline {
  max-width: 220px; margin: 0 auto 28px; text-wrap: balance;
  font-size: 12px; line-height: 1.9;
}

/* Back to top ---------------------------------------------------------------
   Forest on a forest footer is invisible. Tan reads as brown against both the
   light page and the dark footer; the stone ring supplies the 3:1 boundary
   WCAG 1.4.11 wants where the fill alone gets to 2.44 over the footer. */
.tay-totop {
  background: var(--wp--preset--color--tan);
  border: 1px solid rgba(220, 214, 207, .85);
  color: var(--wp--preset--color--offwhite);
}
.tay-totop:hover, .tay-totop:focus-visible {
  background: var(--wp--preset--color--muted);
  color: var(--wp--preset--color--offwhite);
}

/* Find Us --------------------------------------------------------------------
   Stone rather than sand, on the same geometry as every other button: it
   inherits .tay-btn, so size, weight, radius and shadow already match. Dark
   ink on stone measures 7.43:1. */
.tay-btn--stone {
  background: var(--wp--preset--color--stone); color: var(--wp--preset--color--dark);
  border-color: var(--wp--preset--color--stone);
}
.tay-btn--stone:hover, .tay-btn--stone:focus-visible { color: var(--wp--preset--color--dark); }


/* Contact card: Send button and the icons beneath it -----------------------
   The icons were flush with the button's left edge, which is a different
   thing from being centred under it. Both now share one width, so the row
   centres on the button's axis. Button trimmed a little at the same time. */
.tay-contact-card { --tay-cta-w: 170px; }
.tay-contact-card .tay-form .tay-btn {
  width: var(--tay-cta-w); min-width: 0;
  min-height: 52px; padding: 14px 20px; font-size: 13px;
}
.tay-contact-card .tay-footer__social {
  width: var(--tay-cta-w); justify-content: center; margin-top: 22px;
}


/* Footer tagline ------------------------------------------------------------
   220px happened to be the exact width of the line once the label webfont
   loaded, so it stopped wrapping. The longest half is 122px and the logo
   beneath is 129px, so this both forces the break and matches the logo. */
.tay-footer .tay-footer__tagline {
  max-width: 132px; margin: 0 auto 28px; text-wrap: balance;
  font-size: 12px; line-height: 1.9;
}

/* Buttons -------------------------------------------------------------------
   Trimmed back. 56px tall at 14px was heavier than the type around it,
   especially beside the refined display face. */
.tay-btn {
  min-height: 48px; padding: 14px 30px; font-size: 13px; letter-spacing: 0.14em;
}

/* Contact card: Send button and the icons beneath it.
   The form carries no class, so the earlier `.tay-form .tay-btn` never
   matched. Both share one width so the icons centre on the button's axis. */
.tay-contact-card { --tay-cta-w: 178px; }
.tay-contact-card .tay-btn {
  width: var(--tay-cta-w); min-width: 0; padding-inline: 12px;
}
.tay-contact-card .tay-footer__social {
  width: var(--tay-cta-w); justify-content: center; margin-top: 22px;
}

/* Express feature -----------------------------------------------------------
   The column was an icon, a 592-character paragraph and a button: no heading,
   nothing to anchor the eye, and nothing for a screen reader or a search
   engine to navigate by. Structured now, and the measure is held to a
   comfortable line length. */
.tay-express-feature .tay-express-icon {
  width: 48px; height: 48px; margin-bottom: 20px;
}
.tay-express-feature .tay-eyebrow {
  /* Sand is 3.49:1 on the deep-olive end of the gradient and the lifted tone
     used elsewhere only reaches 4.05 - both under AA for an 11px label.
     Cream clears it at 4.97. */
  color: #F0EDE8; margin-bottom: 14px;
}
.tay-express-feature .tay-h2 {
  color: var(--wp--preset--color--offwhite); margin: 0 0 20px; font-size: clamp(30px, 3.4vw, 42px);
}
.tay-express-feature .tay-h2 em { color: #E5D5C2; }
.tay-express-feature .tay-lede {
  font-size: 18.5px; line-height: 1.65; color: var(--wp--preset--color--offwhite);
  margin: 0 0 18px; max-width: 46ch;
}
.tay-express-feature p { max-width: 52ch; }
.tay-express-feature .tay-btn { margin-top: 30px; }


/* Audit fixes ---------------------------------------------------------------
   From the redesign audit. Everything here is CSS-only and reversible. */

/* Buttons had hover and focus but no pressed state, so a tap gave no physical
   feedback. Transform only, so it costs nothing. */
.tay-btn:active { transform: translateY(1px) scale(.985); }
.tay-tier:active { transform: translateY(1px); }

/* Display headings sat at default tracking. At 54px the letterfit is loose;
   large type wants slightly negative tracking. */
.tay-h2 { letter-spacing: -0.012em; }

/* Orphan control - single words stranded on a last line. */
 h1,  h2,  .tay-h2,  .tay-lede { text-wrap: balance; }
 .tay-dish__desc,  .tay-split p,  .tay-chef p { text-wrap: pretty; }

/* The reviews deck pins with height:100vh. On iOS Safari 100vh excludes the
   collapsing URL bar, so the pinned panel jumps as you scroll. svh is the
   stable equivalent. The hero already uses svh; this one was missed. */
.tay-reviews__pin { height: 100svh; }

/* Express feature: icon and label removed, so the column closes up. */
.tay-express-feature .tay-lede { margin-bottom: 14px; }
.tay-express-feature .tay-btn { margin-top: 22px; }
.tay-express-feature p { max-width: 62ch; }


/* Labelled paragraphs -------------------------------------------------------
   The eyebrow, lede, usp and menu-note are all <p> elements, so a section rule
   written as a bare `p` selector matches them as well - and at (0,1,1) it beats
   their own (0,1,0) class rule. That is why the eyebrow-to-heading gap was
   40px under the menu head and 56px in the catering menu, where every other
   section sits at 16px. Excluding the labelled paragraphs restores one rhythm.

   Same root cause as the footer tagline losing its auto margins to
   `.tay-footer p`. */
.tay-menu-head p:not(.tay-eyebrow):not(.tay-menu-note) {
  color: var(--wp--preset--color--mist); max-width: 60ch; margin: 0 0 40px;
}
.tay-menu-head .tay-eyebrow { margin: 0 0 16px; }

.tay-catering-menu > .tay-wrap > p:not(.tay-eyebrow) {
  color: var(--wp--preset--color--mist); max-width: 65ch; margin: 0 0 56px;
}
.tay-catering-menu > .tay-wrap > .tay-eyebrow { margin: 0 0 16px; }

.tay-footer p:not(.tay-footer__tagline):not(.tay-footer__head):not(.tay-footer__mark) {
  color: var(--wp--preset--color--mist); font-size: 16px; line-height: 1.8; margin: 0 0 12px;
}


/* Footer headings on small screens -----------------------------------------
   The heading is inline-block, so its 2px rule is only as wide as the word:
   76px under "Explore", 47px under "Visit". In three desktop columns that
   reads as deliberate. Stacked into one column on a phone, two rules of
   different lengths sit directly above each other and look like a mistake.
   Fixed width instead, matching the 44px eyebrow rules used elsewhere - but
   doubled, so it still reads as a heading rule rather than an eyebrow. */
@media (max-width: 899px) {
  .tay-footer__head {
    display: block; width: 88px; margin-left: auto; margin-right: auto;
  }
}


/* Tier cards on small screens ----------------------------------------------
   Side by side, a 20px gutter separates three cards the eye reads as one row.
   Stacked on a phone they become three separate blocks, and 20px is not
   enough air to tell them apart - especially now the caption band sits at the
   bottom of each one. */
@media (max-width: 899px) {
  .tay-tiers { gap: 32px; }
}
@media (max-width: 560px) {
  .tay-tiers { gap: 28px; }
}


/* Review cards --------------------------------------------------------------
   The deck is a fixed 400px stack - the scroll animation depends on that - so
   a quote that runs long has nowhere to go and spills out through the bottom
   of the card. Measured: every card overflowed on a 390px screen, by 29 to
   65px, because the 23px quote wraps to eight lines in a 256px-wide card. The
   longest card had only 6px of headroom at 1280 too.

   Fixed by scaling the quote with the viewport rather than the card growing:
   desktop keeps its 23px, small screens step down, and the padding and gap
   tighten to buy back the rest. */
.tay-review blockquote { font-size: clamp(16px, 1.15vw + 10.5px, 23px); }

@media (max-width: 899px) {
  .tay-review { padding: 30px 24px; gap: 16px; }
  .tay-review blockquote { line-height: 1.5; }
  .tay-review__stars { margin-bottom: 0; }
}

/* Belt and braces: if a review is ever pasted in longer than these allow, it
   scrolls inside the card instead of escaping it. */
.tay-review { overflow: auto; overscroll-behavior: contain; }


/* Long-form pages -----------------------------------------------------------
   Privacy and terms. Held to a reading measure rather than the full grid
   width, with the same type scale as the rest of the site so they do not read
   as bolted on. */
.tay-prose { max-width: 68ch; margin-inline: auto; }
.tay-prose > * + * { margin-top: 20px; }
.tay-prose h2 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2;
  color: var(--wp--preset--color--forest); margin-top: 48px; margin-bottom: 12px;
}
.tay-prose h2:first-child { margin-top: 0; }
.tay-prose h3 {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin-top: 32px; margin-bottom: 8px;
}
.tay-prose p, .tay-prose li {
  font-size: 16.5px; line-height: 1.8; color: var(--wp--preset--color--dark);
}
.tay-prose ul { padding-left: 22px; margin-top: 12px; }
.tay-prose li { margin-bottom: 8px; }
.tay-prose li::marker { color: var(--wp--preset--color--tan); }
.tay-prose a { color: var(--wp--preset--color--forest); text-underline-offset: 3px; }
.tay-prose__updated {
  font-family: var(--wp--preset--font-family--label);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin-bottom: 40px;
}


/* Footer legal links --------------------------------------------------------
   Sits above the copyright line, quieter than the navigation above it. */
.tay-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tay-footer__legal a {
  font-family: var(--wp--preset--font-family--label);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--mist); text-decoration: none;
  border-bottom: 1px solid rgba(220, 214, 207, .35); padding-bottom: 2px;
}
.tay-footer__legal a:hover,
.tay-footer__legal a:focus-visible {
  color: var(--wp--preset--color--offwhite); border-bottom-color: var(--wp--preset--color--sand);
}
@media (max-width: 899px) {
  .tay-footer__legal a { min-height: 44px; display: inline-flex; align-items: center; }
}


/* Studio credit -------------------------------------------------------------
   Quieter than the copyright above it: this is a signature, not a claim on the
   page. The link still meets AA on the forest footer. */
.tay-footer__credit {
  font-family: var(--wp--preset--font-family--label);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--mist); opacity: .75; margin-top: 4px;
}
.tay-footer__credit a {
  color: var(--wp--preset--color--mist); text-decoration: none;
  border-bottom: 1px solid rgba(220, 214, 207, .4); padding-bottom: 1px;
}
.tay-footer__credit a:hover,
.tay-footer__credit a:focus-visible {
  color: var(--wp--preset--color--offwhite); border-bottom-color: var(--wp--preset--color--sand);
}


/* Contact form panel --------------------------------------------------------
   Both forms are one block now, and the block carries `.tay-form` - which is a
   panel: background, border, 48px of padding. Right for the catering page,
   where the form stands on its own. Wrong inside the contact card, which is
   already a panel, and the padding pushed the Send button out of line with the
   icons beneath it. Neutralised here; the catering page keeps the panel. */
.tay-contact-card .tay-form {
  background: none; border: 0; border-radius: 0; padding: 0;
}


/* Add-ons heading -----------------------------------------------------------
   Was an 11px note sitting 4px under the Kids Mezze description, so it read as
   a footnote to that dish rather than the title of the list beneath it. Now a
   heading: larger, with real space above to break from the dish before it and
   almost none below, so it binds to the list it introduces. */
.tay-addons__head {
  font-family: var(--wp--preset--font-family--label);
  font-weight: 600; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--dark);
  margin: 44px 0 4px; padding-top: 20px;
  border-top: 1px solid rgba(46, 42, 36, .18);
}
.tay-addons { margin-top: 0; }
@media (max-width: 560px) {
  .tay-addons__head { font-size: 14px; margin-top: 36px; }
}


/* Seasonality note ----------------------------------------------------------
   Set in the italic display face rather than the label face, because it is a
   sentence from the kitchen, not a disclaimer. Lifted sand rather than mist:
   5.18:1 on the muted band, where plain sand would be 4.47 and marginal at
   this size. */
.tay-menu-fresh {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic; font-weight: 400;
  font-size: clamp(17px, 1.5vw + 8px, 21px); line-height: 1.6;
  color: #E5D5C2; max-width: 58ch;
  margin: 20px 0 36px; padding-left: 18px;
  border-left: 2px solid var(--wp--preset--color--sand);
}
@media (max-width: 560px) {
  .tay-menu-fresh { padding-left: 14px; margin-bottom: 28px; }
}


/* Footer base, after the credit was added -----------------------------------
   Two corrections.

   The brand line used to be the last child, and took its small-caps treatment
   from `.tay-footer__base span:last-child`. The credit is now last, so it
   inherited that styling and the brand line lost it. Targeted from the end
   instead, which holds whether or not the legal links are present.

   And the credit's link was rendering at 16px inside a 12px span - the size
   jump between "website by" and the studio name. It inherits now, and the
   whole line is smaller: this is a signature, not a line of copy. */
.tay-footer__base span:nth-last-child(2) {
  font-family: var(--wp--preset--font-family--label);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .85;
}
.tay-footer .tay-footer__base .tay-footer__credit {
  font-size: 10px; letter-spacing: 0.16em; opacity: .8; margin-top: 6px;
}
.tay-footer .tay-footer__base .tay-footer__credit a {
  font-size: inherit; letter-spacing: inherit; font-family: inherit;
}


/* Express feature: bottom alignment -----------------------------------------
   The Find Us button sat 39px below the photograph's bottom edge, so the two
   columns finished at different heights. The gap between the last paragraph
   and the button was 67px - the paragraph's own bottom margin stacked on the
   button's top margin. One controlled gap instead. */
.tay-express-feature p:last-of-type { margin-bottom: 0; }
.tay-express-feature .tay-btn { margin-top: 28px; }

/* Express strip -------------------------------------------------------------
   Trimmed back. It reads as a breath between sections, and at 166px it was
   taking more room than the line inside it needs. */
.tay-express-strip { padding: clamp(72px, 10vw, 132px) 0; }


/* Express feature: match the two columns ------------------------------------
   The grid is centred, so the taller text column overhangs the photograph
   equally top and bottom - and trimming the gap only moved the button up by
   half of what was trimmed. Stretching the row and letting the photograph
   fill its column makes both edges line up exactly. The crop is a few pixels
   on a 516px-wide image. */
@media (min-width: 900px) {
  .tay-express-feature .tay-split { align-items: stretch; }
  .tay-express-feature .tay-split__media { display: flex; }
  .tay-express-feature .tay-split__media img {
    height: 100%; width: 100%; object-fit: cover;
  }
  .tay-express-feature .tay-split > div:not(.tay-split__media) {
    display: flex; flex-direction: column; justify-content: center;
  }
}


/* Express feature: let the text set the height -------------------------------
   Stretching the row alone was not enough: the photograph's own aspect ratio
   was still setting the row height, so the text column overflowed and the
   button hung 24px below. Taking the image out of the flow - absolute inside
   its column - means the text decides how tall the row is and the photograph
   fills whatever that turns out to be. */
@media (min-width: 900px) {
  .tay-express-feature .tay-split__media {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--tay-r-card); min-height: 320px;
  }
  .tay-express-feature .tay-split__media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 0;
  }
  .tay-express-feature .tay-split > div:not(.tay-split__media) {
    display: block;
  }
}


/* `.tay-split__media--wide` carries aspect-ratio: 4/3, which was setting the
   row height regardless of the absolute positioning. Released here only, so
   the photograph takes the height the copy needs. Every other split keeps its
   ratio. */
@media (min-width: 900px) {
  .tay-express-feature .tay-split__media--wide { aspect-ratio: auto; }
}


/* Express feature: final alignment ------------------------------------------
   Stretching both columns forced the text to a height set by the row, and its
   content overflowed - the button hung below its own box. Inverted: the copy
   takes whatever height it needs, and the photograph stretches to match it.
   Supersedes the stretch rules above. */
@media (min-width: 900px) {
  .tay-express-feature .tay-split { align-items: start; }
  .tay-express-feature .tay-split__media { align-self: stretch; }
  .tay-express-feature .tay-split > div:not(.tay-split__media) {
    display: block; align-self: start;
  }
}


/* The button is inline-flex, and an atomic inline's top margin does not add to
   the height of the block that contains it. So the column measured 405px while
   its content ran to 430 - which is why aligning the grid never helped. Made
   block-level, sized to its text, so the margin counts and the column reports
   its true height. */
@media (min-width: 900px) {
  .tay-express-feature .tay-btn { display: flex; width: fit-content; }
}


/* The block column was under-reporting its height - margins collapsing meant
   the grid row measured 405px while the content ran to 430, so the button had
   nowhere to sit but past the bottom edge. A flex column does not collapse
   margins, so it sizes to its content exactly and the photograph stretches to
   match. Supersedes the display:block rule above. */
@media (min-width: 900px) {
  .tay-express-feature .tay-split > div:not(.tay-split__media) {
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .tay-express-feature .tay-split > div:not(.tay-split__media) > * { width: 100%; }
  .tay-express-feature .tay-btn { width: fit-content; }
}


@media (min-width: 900px) {
  .tay-express-feature .tay-btn { margin-top: 4px; }
}


@media (min-width: 900px) {
  .tay-express-feature .tay-split > div:not(.tay-split__media) {
    padding-bottom: 24px;
  }
  .tay-express-feature .tay-btn { margin-top: 28px; }
}


/* Centring inside the mobile tap targets -------------------------------------
   Giving these links `display:flex` to reach a 44px tap height stopped
   `text-align:center` applying to them - flex children are placed by
   justify-content, not text-align - so the boxes were centred but the words
   sat hard against the left edge. */
@media (max-width: 899px) {
  .tay-footer__links a,
  .tay-footer__legal a,
  .tay-contact-row a { justify-content: center; }
  .tay-contact-row a { justify-content: flex-start; }
}

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .tay-totop { transform: none; }
  .tay-totop { transition: opacity .2s linear; }
  .tay-hero__media img,
  .tay-blob,
  .tay-usp__dot::after { animation: none !important; }
  .js .tay-reveal.is-armed { opacity: 1; transform: none; transition: none; }
  .tay-reviews__track { height: auto; }
  .tay-reviews__pin { position: static; height: auto; padding: 56px 0; }
  .tay-reviews__deck { width: min(560px, 90vw); height: auto; display: grid; gap: 24px; }
  .tay-review { position: static; height: auto; transform: none !important; opacity: 1 !important; }
  * { transition-duration: .01ms !important; }
}

/* Print ------------------------------------------------------------------- */

@media print {
  .tay-header, .tay-footer__social, .tay-social-grid, .tay-map { display: none; }
  .tay-reviews__track { height: auto; }
  .tay-reviews__pin { position: static; height: auto; }
  .tay-review { position: static; height: auto; transform: none !important; box-shadow: none; }
}

/* Anchor targets clear the fixed header rather than landing beneath it. */
[id] { scroll-margin-top: calc(var(--tay-nav-h) + 24px); }


/* Gallery: masonry + lightbox ---------------------------------------------
 *
 * The gallery used the same fixed-row bento as the homepage. With 230px rows
 * and object-fit:cover, the 49 portrait photos were cropped to a thin band.
 * Columns let every photo keep its own shape. tay-bento--4 is gallery-only,
 * so the homepage and catering grids are untouched.
 * Doubled selectors: the live layer is printed before the theme stylesheet.
 */

.tay-bento.tay-bento--4 {
  display: block; column-count: 4; column-gap: 20px; margin-top: 0;
}
.tay-bento--4 .tay-bento__item {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: block; height: auto; margin: 0 0 20px; cursor: zoom-in;
}
.tay-bento--4 .tay-bento__item img {
  position: static; width: 100%; height: auto; object-fit: contain; display: block;
}
/* No captions on this page, so the scrim only muddied the photographs. */
.tay-bento--4 .tay-bento__scrim { display: none; }
.tay-bento--4 .tay-bento__item:focus-visible {
  outline: 3px solid var(--wp--preset--color--verdigris, #4a8f88); outline-offset: 3px;
}

@media (max-width: 1100px) { .tay-bento.tay-bento--4 { column-count: 3; } }
@media (max-width: 782px)  { .tay-bento.tay-bento--4 { column-count: 2; column-gap: 16px; }
                             .tay-bento--4 .tay-bento__item { margin-bottom: 16px; } }

/* Lightbox ---------------------------------------------------------------- */

.tay-lb {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center;
  background: rgba(20, 18, 14, .94);
  opacity: 0; transition: opacity 220ms ease;
}
.tay-lb[open], .tay-lb.is-open { display: flex; }
.tay-lb.is-visible { opacity: 1; }
.tay-lb__img {
  max-width: 92vw; max-height: 86vh; object-fit: contain; display: block;
  border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.tay-lb__btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
  background: rgba(20, 18, 14, .55); color: #fff; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.tay-lb__btn:hover, .tay-lb__btn:focus-visible {
  background: rgba(20, 18, 14, .85); border-color: rgba(255, 255, 255, .6);
}
.tay-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tay-lb__prev { left: 24px; top: 50%; margin-top: -26px; }
.tay-lb__next { right: 24px; top: 50%; margin-top: -26px; }
.tay-lb__close { right: 24px; top: 24px; }
.tay-lb__count {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;
  font-family: var(--wp--preset--font-family--label, sans-serif);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
@media (max-width: 782px) {
  .tay-lb__img { max-width: 96vw; max-height: 78vh; }
  .tay-lb__prev { left: 10px; } .tay-lb__next { right: 10px; }
  .tay-lb__close { right: 10px; top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tay-lb { transition: none; } }


/* Instagram feed ----------------------------------------------------------
 * Smash Balloon v6 ignores shortcode attributes, so its own settings drive
 * the column count and post count. These rules only make its tiles sit in the
 * design: square, rounded, same 20px rhythm as the grid they replaced.
 */
.tay-social-feed { margin-bottom: 48px; }
.tay-social-feed #sb_instagram { padding: 0 !important; background: transparent !important; }
.tay-social-feed #sb_instagram .sbi_item { padding: 10px !important; }
.tay-social-feed #sb_instagram .sbi_photo_wrap { border-radius: 14px; overflow: hidden; }
/* .sbi_photo is a link wrapping an image. With height:auto the child's own
   ratio sets the box height, so a portrait post grew taller than its square
   neighbours. Taking the image out of flow lets aspect-ratio hold. */
.tay-social-feed #sb_instagram .sbi_photo {
  position: relative; display: block; aspect-ratio: 1; height: auto !important;
  overflow: hidden; border-radius: 14px;
}
.tay-social-feed #sb_instagram .sbi_photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms var(--tay-ease);
}
.tay-social-feed #sb_instagram .sbi_photo:hover img { transform: scale(1.06); }

/* Mobile pass ------------------------------------------------------------
 * Doubled selectors throughout: the live layer is printed before the theme
 * stylesheet, so a theme rule at equal specificity would win.
 */

@media (max-width: 899px) {

  /* Brand cards: caption above the photograph, photograph given real height,
     and the three cards pulled apart so each reads as its own thing. */
  .wp-site-blocks .tay-tiers.tay-tiers { gap: 72px; }
  .wp-site-blocks .tay-tier.tay-tier { flex-direction: column-reverse; }
  .tay-tiers .tay-tier .tay-tier__bg { min-height: 300px; }
  /* Sage, darkened from the palette olive #7C8067. That olive puts the
     description at 3.53:1, under AA; this keeps the hue and reaches 4.62:1. */
  .tay-tiers .tay-tier .tay-tier__text,
  .tay-tiers .tay-tier:hover .tay-tier__text,
  .tay-tiers .tay-tier:focus-visible .tay-tier__text { background: #696D58; }

  /* Stacked, the two halves of a split sat 56px apart - a gap that reads as
     a section break rather than two parts of one thought. */
  .tay-split.tay-split { gap: 28px; }
}

@media (max-width: 782px) {

  /* Dish tiles: the caption sat on the photograph behind a dark scrim, which
     cost the photograph at phone size. Caption moves underneath, centred to
     match the section heading above it, and the scrim goes. Gallery grid
     (tay-bento--4) is excluded - it has its own masonry treatment. */
  .tay-bento:not(.tay-bento--4) { grid-auto-rows: auto; }
  .tay-bento:not(.tay-bento--4) .tay-bento__item {
    display: flex; flex-direction: column; height: auto;
    background: transparent; overflow: visible; border-radius: 0;
    grid-row: auto;
  }
  .tay-bento:not(.tay-bento--4) .tay-bento__item img {
    position: static; width: 100%; height: auto; aspect-ratio: 4 / 3;
    object-fit: cover; border-radius: 14px; display: block;
  }
  .tay-bento:not(.tay-bento--4) .tay-bento__scrim { display: none; }
  .tay-bento:not(.tay-bento--4) .tay-bento__cap {
    position: static; padding: 12px 2px 0; text-align: center;
  }
  .tay-bento:not(.tay-bento--4) .tay-bento__label {
    color: var(--wp--preset--color--muted); margin-bottom: 4px;
  }
  .tay-bento:not(.tay-bento--4) .tay-bento__name {
    color: var(--wp--preset--color--dark); font-size: 19px;
  }
  .tay-bento:not(.tay-bento--4) .tay-bento__item--lg .tay-bento__name { font-size: 22px; }
}

/* Mobile hero -------------------------------------------------------------
 * Two things were wrong. At 100svh the 1100x733 photograph was cropped to a
 * 375-wide slot, so only 31% of it was on screen. And the flat veil sat at
 * about .51 over the tagline, which crosses a white plate - white 15px type
 * landed at 3.14:1, under AA, before any of this.
 *
 * So the veil is not simply lifted. It is lifted at the top and bottom, where
 * nothing sits on it, and concentrated into a soft ellipse behind the type.
 * The photograph reads brighter and more open; the words stay legible.
 */
@media (max-width: 899px) {
  .tay-hero.tay-hero { min-height: 72svh; }          /* 31% -> 43% of the photo */
  .tay-hero .tay-hero__inner { padding-block: 64px; }
  .tay-hero .tay-hero__scrim {
    background:
      radial-gradient(ellipse 125% 48% at 50% 50%,
        rgba(38, 42, 32, .55) 0%, rgba(38, 42, 32, .42) 55%, rgba(38, 42, 32, 0) 100%),
      linear-gradient(to bottom,
        rgba(38, 42, 32, .38) 0%, rgba(38, 42, 32, .26) 42%, rgba(38, 42, 32, .52) 100%);
  }
}

/* Chef section, mobile ----------------------------------------------------
 * 86px sat between the heading and the portrait: tay-chef__head carries a
 * 64px bottom margin on top of the grid's own 48px gap. Stacked on a phone
 * that reads as a section break rather than a caption and its picture.
 * Only the margin is trimmed - the grid gap still spaces the photo from the
 * text below it.
 */
@media (max-width: 899px) {
  .tay-chef .tay-chef__head { margin-bottom: 10px; }
}


/* A tall bento slot -------------------------------------------------------
 * For portrait photographs. Without it a portrait sits in a 756x213 letterbox
 * and shows a band of itself.
 */
.wp-site-blocks .tay-bento__item--tall.tay-bento__item--tall { grid-row: span 2; }
@media (max-width: 782px) {
  .wp-site-blocks .tay-bento__item--tall.tay-bento__item--tall { grid-row: auto; }
}


/* Dish grid: one large tile, six identical ---------------------------------
 * Six equal tiles plus a 2x2 hero leaves two dead cells. Running the hero
 * 2 cols x 3 rows fills the grid exactly - column three takes three tiles,
 * the bottom row the other three - without giving any tile a bespoke shape.
 */
@media (min-width: 783px) {
  .wp-site-blocks .tay-bento__item--lg.tay-bento__item--lg { grid-row: span 3; }
}
/* The pitas sit low in this portrait frame; centred crop cut them in half. */
.wp-site-blocks .tay-bento__item img[src*="araies"] { object-position: 50% 72%; }


/* Line breaking -----------------------------------------------------------
 * balance evens out the lines of short centred blocks - headings, the pull
 * quote, ledes - so none is left carrying one word. pretty does the same job
 * for running copy by pulling a word down rather than leaving an orphan.
 * Both degrade to normal wrapping where unsupported.
 */
.wp-site-blocks .tay-quote__inner p,
.wp-site-blocks .tay-h2,
.wp-site-blocks .tay-lede,
.wp-site-blocks .tay-hero__tag,
.wp-site-blocks .tay-bento__name,
.wp-site-blocks .tay-tier__name,
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3 { text-wrap: balance; }

.wp-site-blocks .tay-prose p,
.wp-site-blocks .tay-chef p,
.wp-site-blocks .tay-tier__desc,
.wp-site-blocks .tay-dish__desc { text-wrap: pretty; }


/* Contact map: the iframe had no width ------------------------------------
 * An <iframe> with no width falls back to the HTML default of 300px. With the
 * card's 40px padding either side that made the card 380px wide at its
 * narrowest, and the grid track grew to match - 26px of sideways scroll on a
 * 375px phone. Nothing else on the site overflowed; this was the only one.
 */
.wp-site-blocks .tay-map iframe { width: 100%; }
.wp-site-blocks .tay-contact-grid > * { min-width: 0; }

/* Instagram feed: header and buttons off ----------------------------------
 * The section already carries its own heading and its own social icons, so
 * the plugin's account strip, Load More and Follow button were duplicating
 * furniture. Hidden here so it is right straight away; turning them off in
 * the feed's Customize screen is still worth doing, as that stops the markup
 * being produced at all.
 */
.tay-social-feed #sb_instagram .sbi_header_outer,
.tay-social-feed #sb_instagram #sbi_load,
.tay-social-feed #sb_instagram .sbi_load_btn,
.tay-social-feed #sb_instagram .sbi_follow_btn { display: none !important; }
.tay-social-feed #sb_instagram #sbi_images { padding-bottom: 0 !important; }

/* The account strip is .sb_instagram_header, not the sbi_header_outer I first
   reached for. */
.tay-social-feed #sb_instagram .sb_instagram_header { display: none !important; }


/* Contact card, mobile: centre the send button and the icons ---------------
 * Both sat flush with the form's left edge - 39px left of the card's axis.
 * The button is inline-flex, so auto margins need a block-level box first.
 */
@media (max-width: 899px) {
  .wp-site-blocks .tay-contact-card .tay-btn {
    display: flex; margin-inline: auto;
  }
  .wp-site-blocks .tay-contact-card .tay-footer__social { margin-inline: auto; }
}

/* Header over the hero, mobile: fully transparent -------------------------
 * The background was already transparent; what read as a bar was the
 * backdrop-filter blur. Dropped while the header is over the hero. It comes
 * back the moment the page scrolls, where the header does need to separate
 * itself from the content passing underneath.
 */
@media (max-width: 899px) {
  .wp-site-blocks .tay-header.tay-header--over {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}


/* Catering CTA rows -------------------------------------------------------
 * The enquiry form is the last thing on a long page, most of it menu. These
 * jump to it. scroll-margin-top keeps the fixed header off the heading when
 * the anchor lands.
 */
.wp-site-blocks #enquire { scroll-margin-top: 96px; }
.wp-site-blocks .tay-cta-row {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 56px; text-align: center;
}
.wp-site-blocks .tay-cta-row__note {
  font-size: 14px; color: var(--wp--preset--color--muted); margin: 0;
}
@media (max-width: 782px) { .wp-site-blocks .tay-cta-row { margin-top: 40px; } }


/* Gallery as a native block ------------------------------------------------
 * The page is a wp:gallery now, so photos can be added, reordered and deleted
 * in the editor. Core lays that block out with flex and sizes each figure with
 * a percentage width, carried on a `:not(#individual-image)` selector - an ID
 * in the selector, so it outranks anything written with classes alone. The
 * !important here is answering that, not papering over a guess: without it the
 * figures kept core's width and came out 74px wide inside 271px columns.
 */
.wp-site-blocks .tay-gallery.tay-gallery {
  display: block; margin: 0; position: relative;
}
.wp-site-blocks .tay-gallery.tay-gallery > figure.wp-block-image {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  display: block !important;
  margin: 0 0 20px !important;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  cursor: zoom-in;
}
.wp-site-blocks .tay-gallery.tay-gallery > figure.wp-block-image img {
  width: 100% !important; height: auto !important; display: block;
  border-radius: 14px; object-fit: contain;
}
.wp-site-blocks .tay-gallery.tay-gallery > figure.wp-block-image:focus-visible {
  outline: 3px solid var(--wp--preset--color--olive); outline-offset: 3px;
}
@media (max-width: 1100px) { .wp-site-blocks .tay-gallery.tay-gallery { column-count: 3; } }
@media (max-width: 782px)  {
  .wp-site-blocks .tay-gallery.tay-gallery { column-count: 2; column-gap: 16px; }
  .wp-site-blocks .tay-gallery.tay-gallery > figure.wp-block-image { margin-bottom: 16px !important; }
}


/* Mobile menu: sage, not near-black --------------------------------------
 * Off-white on this sage reads 5.04:1. The current-page link was tan, which
 * is 1.26:1 on it - effectively gone - so it keeps the off-white and is
 * marked with a rule underneath instead of by colour.
 */
.wp-site-blocks .tay-mobile a[aria-current="page"] {
  color: var(--wp--preset--color--offwhite);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}

/* Express hero: the plaster wall the catering page uses ------------------- */
.wp-site-blocks .tay-express-hero.tay-plaster { position: relative; overflow: hidden; }
.wp-site-blocks .tay-express-hero .tay-plaster__bg { opacity: .18; }
.wp-site-blocks .tay-express-hero > .tay-wrap { position: relative; z-index: 1; }

/* Contact card: some green in it -----------------------------------------
 * The card sits at #E3DFDB. Moss is 3.70:1 there, which clears the 3:1 that
 * applies to the 27px heading and to the field rules as non-text - but not
 * the 4.5:1 small copy needs, so the 11px labels stay on forest at 7.81:1.
 */
.wp-site-blocks .tay-contact-card h2 { color: var(--wp--preset--color--moss); }
.wp-site-blocks .tay-contact-card .tay-field input,
.wp-site-blocks .tay-contact-card .tay-field textarea {
  border-bottom-color: var(--wp--preset--color--moss);
}
.wp-site-blocks .tay-contact-card .tay-contact-row__label { color: var(--wp--preset--color--forest); }

/* Mobile hero: taller ------------------------------------------------------
 * 72svh was too tight once the header went transparent and started sharing
 * the space. The extra top padding keeps the heading clear of the logo.
 */
@media (max-width: 899px) {
}


/* Mobile menu: warm grey, dark type ---------------------------------------
 * Sage did not sit right. #D1CECC with forest type is 6.61:1; the greens all
 * fall under 4.5:1 on it, so the type is forest and the current page is marked
 * with a rule rather than a colour change.
 */
.wp-site-blocks .tay-mobile { background: #D1CECC; }
.wp-site-blocks .tay-mobile a { color: var(--wp--preset--color--forest); }
.wp-site-blocks .tay-mobile a[aria-current="page"] {
  color: var(--wp--preset--color--dark);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}

/* CTA note on the dark band ------------------------------------------------
 * The note took the muted body ink, which is 1.39:1 on forest - invisible.
 * Cream reads 8.86:1. The rule keys off the section's own colour so the note
 * stays dark on the light bands where it also appears.
 */
.wp-site-blocks .tay-cta-row__note { color: var(--wp--preset--color--muted); }
.wp-site-blocks .tay-plaster .tay-cta-row__note,
.wp-site-blocks .has-forest-background-color .tay-cta-row__note,
.wp-site-blocks .tay-band--md .tay-cta-row__note { color: var(--wp--preset--color--cream); }

.wp-site-blocks .tay-cta { display: flex; justify-content: flex-start; margin-top: 56px; }


/* Chef biography, mobile: first paragraph then a toggle -------------------- */
@media (max-width: 899px) {
  .wp-site-blocks .tay-chef__body.is-clamped > p:nth-of-type(n+2) { display: none; }
  .wp-site-blocks .tay-readmore {
    display: inline-flex; align-items: center; gap: 8px;
    margin: -6px 0 0; padding: 12px 4px; min-height: 44px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--wp--preset--font-family--label);
    font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--wp--preset--color--forest);
    text-decoration: underline; text-underline-offset: 5px;
  }
  .wp-site-blocks .tay-readmore:hover, .wp-site-blocks .tay-readmore:focus-visible {
    color: var(--wp--preset--color--dark);
  }
  .wp-site-blocks .tay-readmore[hidden] { display: none; }
}
/* Desktop shows the whole biography, so the toggle has no job there.
   Scoped to a min-width query rather than left as a bare default: as a
   default it sat after the mobile rule and hid the button everywhere. */
@media (min-width: 900px) { .wp-site-blocks .tay-readmore { display: none; } }

/* Hero fills the phone screen --------------------------------------------
 * svh, not vh: on iOS 100vh is the viewport with the toolbars hidden, so a
 * 100vh hero is clipped by the address bar on arrival. svh is the height with
 * the toolbars showing, which is what is actually on screen.
 */
@media (max-width: 899px) {
  .tay-hero.tay-hero { min-height: 100svh; }
  .tay-hero .tay-hero__inner { padding-block: 112px 80px; }
}