/* ==========================================================================
   TCC — site.css

   Design 4 is Design 2 after the client's September 2026 review. Warm was the
   chosen direction; this is that direction with their notes applied. It loads
   tokens.css and base.css and nothing else, so it cannot reach Designs 1-3
   and they cannot reach it. Every selector is prefixed tcc-.

   What changed, and why:

     Palette    Black and white as the base, the old sage retired entirely. The
                five swatches from the client's palette image carry the
                accents — near-black grounds, a tan for eyebrows and links,
                a blue for focus and hover. ("Black & White as the base, no
                to the current green.")
     Header     One tier, logo left, frozen on scroll. Order Now and the
                phone number sit on the bar. ("Logo to the left – like
                Structured format" / "Order Now button – Needs to be on the
                navigation menu" / "Add – Phone number".)
     Buttons    Outline, not solid fills. ("Buttons – Can they be an outline,
                rather than a solid colour.")
     Footer     Four columns, the shape they liked in Structured.
     Tiles      Rectangular rather than square, the Structured proportion,
                but keeping the rounded corners they asked to carry over.
     Type       Three pairings behind a review switch — a slim tall
                condensed sans, Times, and a modern geometric sans — because
                the brief asked for both "San Serif style / Slim Tall" and
                "Maybe try Times New Roman". js/fonts.js drives it.

   Structure is inherited from Design 2 unchanged: the split hero, centred
   heads, alternating venue bands, soft 6px edges.
   ========================================================================== */

/* Ren Burton, 9 November 2026: "expand the box the copy is in by 5cm across
   all pages" and "can the spacing between each block of text or image be
   minimised?" Agreed on the 10 November call. Was 64-132px bands, a 46rem
   head, a 66ch measure. */
:root {
  --tcc-radius: 6px;
  --tcc-band:   clamp(44px, 5.5vw, 88px);
}

body { background: var(--off-white); }

:is(.tcc, .editor-styles-wrapper) h1, :is(.tcc, .editor-styles-wrapper) h2, :is(.tcc, .editor-styles-wrapper) h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.tcc-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tcc-tan-deep);
  margin-bottom: var(--s-3);
}

.tcc-lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--ink-muted);
}


/* == Header ===============================================================
   One tier, logo left, frozen on scroll — the client's three asks in one
   block. Ground is the near-black from their palette; the logo asset is
   still a white-only PNG, so a light bar remains unavailable.

   BLOCKER, unchanged from Design 2: no vector logo and no dark version. */

/* The notice bar: a line above the header while Settings -> Site details has
   words in its Notice bar box (an email outage, a public holiday). It scrolls
   away; the header stays. Ren Burton, 13 November 2026, wanted one on the old
   site the day their email was down. */
.tcc-notice { background: var(--tcc-tan-deep); color: #fff; font-size: 0.9375rem; line-height: 1.45; text-align: center; }
.tcc-notice > .container { padding-block: 10px; }
.tcc-notice a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.tcc-notice a:hover { text-decoration: none; }

.tcc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tcc-ink);
  color: var(--white);
}

/* Not position:relative. The menus panel is absolute and has to escape the
   container to run full-bleed, so the sticky header is its containing
   block. */
.tcc-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-2), 1.8vw, var(--s-4));
  min-height: 78px;
}
.tcc-header__logo { flex: none; }
.tcc-header__logo img { width: 150px; height: auto; }

.tcc-header__drawer {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--s-2), 2vw, var(--s-4));
}

.tcc-nav__list {
  display: flex;
  justify-content: flex-start;
  gap: clamp(10px, 1.5vw, 26px);
  list-style: none;
}
.tcc-nav__link {
  display: inline-block;
  padding: 27px 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tcc-nav__link:hover,
.tcc-nav__link[aria-current="page"] { border-bottom-color: var(--white); }

.tcc-header__cta {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
}
.tcc-header__cta .tcc-btn--sm { padding: 10px var(--s-2); font-size: 0.75rem; }
.tcc-header__phone {
  display: inline-block;
  min-height: 26px;
  padding-block: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--white);
  white-space: nowrap;
}
.tcc-header__phone:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* In flex flow rather than absolutely placed, so it sits inside the
   container's gutter instead of on the viewport edge. */
.tcc-toggle {
  display: none;
  position: static;
  transform: none;
  margin-left: auto;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  color: var(--white);
}
.tcc-toggle__bars,
.tcc-toggle__bars::before,
.tcc-toggle__bars::after {
  display: block; width: 22px; height: 2px; background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.tcc-toggle__bars { position: relative; }
.tcc-toggle__bars::before,
.tcc-toggle__bars::after { content: ""; position: absolute; left: 0; }
.tcc-toggle__bars::before { transform: translateY(-7px); }
.tcc-toggle__bars::after  { transform: translateY(7px); }
.tcc-toggle[aria-expanded="true"] .tcc-toggle__bars { background: transparent; }
.tcc-toggle[aria-expanded="true"] .tcc-toggle__bars::before { transform: rotate(45deg); }
.tcc-toggle[aria-expanded="true"] .tcc-toggle__bars::after  { transform: rotate(-45deg); }

/* 1180, not 1024. Six items, a phone number and two buttons -- Request a
   Quote and Order Now -- do not fit below that even tightened. nav.js resets
   the drawer state at the same width; the two have to agree or the nav
   strands between them. */
@media (max-width: 1180px) {
  .tcc-header__inner { min-height: 64px; }
  .tcc-toggle { display: flex; }
  .tcc-header__drawer {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-2) var(--gutter) var(--s-4);
    background: var(--tcc-ink);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .tcc-header__drawer[data-open="true"] { display: flex; }
  .tcc-nav__list { flex-direction: column; gap: 0; }
  .tcc-nav__link { padding: var(--s-2) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .tcc-header__cta {
    margin-top: var(--s-3);
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }
  .tcc-header__phone { text-align: center; font-size: 1rem; }
  .tcc-panel { display: none; }
  .tcc-nav__chev { display: none; }
}


/* == Menus panel ==========================================================
   The client asked for this specifically, so it is in all three designs. In
   Design 2's language: a soft light panel, square frames, centred labels,
   the same 6px radius as everything else.

   CSS-only — :hover and :focus-within — so it works with JS off and there is
   no open/closed state to fall out of sync. nav.js adds one thing: Escape
   dismisses it. Hidden below 900px, where a hover affordance is hostile.

   BUILD.md 5.2 holds here too: image and label, nothing else. The client's
   objection was to the 17-item text-dense dropdown, not to dropdowns. */

.tcc-nav__item--panel { position: static; }

.tcc-nav__chev {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 7px;
  vertical-align: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.tcc-nav__item--panel:hover .tcc-nav__chev,
.tcc-nav__item--panel:focus-within .tcc-nav__chev { transform: rotate(180deg); }

.tcc-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 90;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 22px 48px rgba(35, 31, 32, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}

/* Bridges the dead space between the link and the panel so the pointer can
   travel down without dropping the hover. Inert while hidden, because
   visibility:hidden takes its children with it.

   It runs the full width of the panel, so anything it covers belongs to the
   open panel and not to the item underneath. The gap it has to cover is the
   1.1px between the link box and the bottom of the 78px bar; at the 22px it
   was, it swallowed the bottom quarter of every other link, and with a second
   panel on the bar (October 2026) that meant sliding from Menus to What We
   Offer left Menus open over a panel that never opened. */
.tcc-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 3px;
}

.tcc-nav__item--panel:hover > .tcc-panel,
.tcc-nav__item--panel:focus-within > .tcc-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.tcc-panel__inner { padding-block: var(--s-5); }
.tcc-panel .tcc-grid { gap: var(--s-3); }
.tcc-panel .tcc-card__label { margin-top: var(--s-2); font-size: 0.9375rem; }

.tcc-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(35, 31, 32, 0.55);
}


/* == Buttons ============================================================== */

.tcc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px var(--s-4);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--tcc-radius);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Outline, never a solid fill — the client asked for this directly. All
   three modifiers now render the same way and differ only in the ground they
   expect; they are kept so existing markup does not have to change.

   --btn-ink is the line and the label; --btn-on is what the label turns into
   once the fill arrives on hover. Dark grounds flip the pair. */
.tcc-btn { --btn-ink: var(--tcc-ink); --btn-on: var(--white); }
.tcc-header .tcc-btn,
.tcc-band--deep .tcc-btn,
.tcc-cband .tcc-btn,
.tcc-footer .tcc-btn { --btn-ink: var(--white); --btn-on: var(--tcc-ink); }

.tcc-btn--solid,
.tcc-btn--light,
.tcc-btn--line { background: transparent; border-color: var(--btn-ink); color: var(--btn-ink); }
.tcc-btn--solid:hover,
.tcc-btn--light:hover,
.tcc-btn--line:hover { background: var(--btn-ink); border-color: var(--btn-ink); color: var(--btn-on); }
.tcc-btn--sm { min-height: 40px; padding: 10px var(--s-3); }

/* The header carries two buttons now. Request a Quote is the one we want
   pressed, so Order Now -- which leaves for the ordering portal -- drops to a
   quieter weight rather than matching it stroke for stroke. */
.tcc-btn--quiet { border-color: rgba(255, 255, 255, 0.4); }
.tcc-btn--quiet:hover { border-color: var(--btn-ink); }

.tcc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tcc-tan-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.tcc-link:hover { color: var(--ink); }
.tcc-link::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.tcc-link:hover::after { transform: translateX(4px); }


/* == Split hero ===========================================================
   Type on one half, photograph on the other. */

.tcc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(88vh, 860px);
}
.tcc-hero__panel {
  background: var(--tcc-mist);
  display: grid;
  align-content: center;
  /* Tighter padding than a first pass used: at 5fr the panel left about
     460px of usable column and the headline dropped to three cramped
     lines. */
  padding: clamp(var(--s-5), 5vw, var(--s-7)) clamp(var(--s-4), 4.5vw, var(--s-6));
}
.tcc-hero__panel > * { max-width: none; }
.tcc-hero__title { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4rem); max-width: 15ch; }
.tcc-hero__sub {
  margin-top: var(--s-3);
  max-width: 40ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink-muted);
}
.tcc-hero__actions { max-width: none; margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tcc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }

@media (max-width: 860px) {
  .tcc-hero { grid-template-columns: 1fr; min-height: 0; }
  .tcc-hero__media { order: -1; aspect-ratio: 4 / 3; }
  .tcc-hero__media img { aspect-ratio: 4 / 3; height: auto; }
  .tcc-hero__frame { aspect-ratio: auto; height: 100%; }
}

/* Ren Burton, 11 November 2026, on the split banner: the photograph should
   take more than half, "visually things look better in uneven numbers,
   thirds". One third words, two thirds photograph; the headline comes down a
   size so it still sits in three or four lines. A little more room for the
   words on a small laptop. */
@media (min-width: 861px) {
  .tcc-hero:not(.tcc-hero--cover) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .tcc-hero:not(.tcc-hero--cover) .tcc-hero__title { font-size: clamp(1.9rem, 0.9rem + 2.1vw, 3rem); max-width: none; }
  .tcc-hero:not(.tcc-hero--cover) .tcc-hero__panel { padding-inline: clamp(var(--s-4), 3vw, var(--s-5)); }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .tcc-hero:not(.tcc-hero--cover) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* The photograph still leads on mobile -- that is this direction's character
   -- but a 4:3 crop ate 280px and took the CTA off the screen with it. A
   banner crop keeps the image first AND the proposition above the fold. */
@media (max-width: 700px) {
  .tcc-hero__media { aspect-ratio: 16 / 9; }
  .tcc-hero__media img { aspect-ratio: 16 / 9; }
  .tcc-hero__frame { aspect-ratio: auto; height: 100%; }
  .tcc-hero__panel { padding-block: var(--s-5) var(--s-6); }
  .tcc-hero__actions { margin-top: var(--s-4); }
}


/* == Bands and centred heads ============================================== */

.tcc-band { padding-block: var(--tcc-band); }
.tcc-band--white { background: var(--white); }
.tcc-band--cream { background: var(--off-white); }
.tcc-band--tint  { background: var(--tcc-mist); }
.tcc-band--deep  { background: var(--tcc-ink); color: var(--white); }
.tcc-band--ink   { background: var(--ink); color: var(--white); }

.tcc-band--deep .tcc-eyebrow,
.tcc-band--ink  .tcc-eyebrow,
.tcc-cband .tcc-eyebrow,
.tcc-eyebrow--inv { color: rgba(255, 255, 255, 0.86); }
.tcc-band--deep .tcc-lede,
.tcc-band--ink  .tcc-lede { color: rgba(255, 255, 255, 0.86); }

.tcc-head {
  text-align: center;
  max-width: 58rem;
  margin: 0 auto clamp(var(--s-4), 3.5vw, var(--s-6));
}
.tcc-head .tcc-lede { max-width: none; }
.tcc-head h2 { font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); }
.tcc-head .tcc-lede { margin-top: var(--s-3); }
/* A head with nothing after it in its band -- an intro that is only a
   heading and its lede -- keeps no bottom margin. The margin is there to
   space the head from the cards or grid under it; with nothing under it,
   it stacked on the band's own padding and left a screen-height gap.
   Heath King, 28 October 2026, on Venues: "there is a huge gap here". */
.tcc-head:last-child { margin-bottom: 0; }

.tcc-statement {
  text-align: center;
  max-width: 30ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.375rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}


/* == Cards: image + centred label ========================================= */

.tcc-grid { display: grid; gap: clamp(var(--s-3), 2.6vw, var(--s-5)); }
.tcc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tcc-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* A grid whose last row is short sits centred (What we offer's seven). */
:is(.tcc, .editor-styles-wrapper) .grid--3.grid--centre { display: flex; flex-wrap: wrap; justify-content: center; }
:is(.tcc, .editor-styles-wrapper) .grid--3.grid--centre > * { flex: 0 1 calc((100% - 2 * clamp(var(--s-3), 2.6vw, var(--s-5))) / 3); }
@media (max-width: 900px) { :is(.tcc, .editor-styles-wrapper) .grid--3.grid--centre > * { flex-basis: calc((100% - clamp(var(--s-3), 2.6vw, var(--s-5))) / 2); } }
@media (max-width: 560px) { :is(.tcc, .editor-styles-wrapper) .grid--3.grid--centre > * { flex-basis: 100%; } }
.tcc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tcc-grid--6 { grid-template-columns: repeat(6, 1fr); }
/* Seven, for the seven services in the What We Offer panel. Only ever used
   above 1180px, where the drop panels exist at all. */
.tcc-grid--7 { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 900px) { .tcc-grid--3, .tcc-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tcc-grid { grid-template-columns: 1fr; } }

/* BUILD.md 5.2 — image and label. Nothing else goes in here. */
.tcc-card { display: block; text-decoration: none; color: inherit; text-align: center; }
.tcc-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--tcc-radius);
  background: var(--tcc-mist);
}
.tcc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.tcc-card:hover .tcc-card__media img { transform: scale(1.05); }
.tcc-card__label {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.tcc-card:hover .tcc-card__label { text-decoration: underline; text-underline-offset: 0.18em; }

/* The three banners on the gallery index, as theirs are: stacked, 822 by
   400, the set's name across the middle. Theirs are beige artwork with the
   name set in type and a photograph on hover; Ren Burton, 22 October 2026,
   "maybe not the plain blocks of colour", so the photograph is behind the
   name from the start, under a scrim that keeps the type legible, and the
   hover is the same slow zoom every card on the site has. The class is on
   the grid rather than the cards so the page-cards block carries the cards
   unchanged and the grid's class with them. */
.grid--banners .tcc-card { position: relative; }
.grid--banners .tcc-card__media { aspect-ratio: 822 / 400; position: relative; }
.grid--banners .tcc-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(35, 31, 32, 0.38);
}
.grid--banners .tcc-card__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--s-4);
  color: #fff;
  font-size: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
}
.grid--banners .tcc-card:hover .tcc-card__label { text-decoration: none; }

/* Bento: the same cards in mixed sizes, the name over the photograph.
   Heath King, 10 November 2026, on the Home page tiles: "not as basic as it
   is now, sort of like the gallery". The pattern is written for six and
   repeats every six: one large, two small, one tall, then two wide.
       A A B C
       A A D C
       E E F F
   The class is on the grid, as the banners' is, so the cards are carried
   unchanged. */
.tcc-bento {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(170px, 19vw, 260px);
  grid-auto-flow: dense;
  gap: clamp(var(--s-2), 1.2vw, var(--s-3));
}
.tcc-bento > :nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.tcc-bento > :nth-child(6n + 3) { grid-row: span 2; }
.tcc-bento > :nth-child(6n + 5),
.tcc-bento > :nth-child(6n + 6) { grid-column: span 2; }
.tcc-bento .tcc-card { position: relative; overflow: hidden; border-radius: var(--tcc-radius); text-align: left; }
.tcc-bento .tcc-card__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.tcc-bento .tcc-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 18, 18, 0.72) 0%, rgba(20, 18, 18, 0.18) 42%, rgba(20, 18, 18, 0) 65%);
  /* The fade is decoration: a click goes through to the photograph, which
     is how it is changed in the editor. */
  pointer-events: none;
}
:is(.tcc, .editor-styles-wrapper) .tcc-bento .tcc-card__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  color: #fff;
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);
  line-height: 1.2;
}
.tcc-bento > :nth-child(6n + 1) .tcc-card__label { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); padding: var(--s-4); }
.tcc-bento .tcc-card:hover .tcc-card__label { text-decoration: none; }
@media (max-width: 900px) {
  .tcc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 42vw, 300px); }
  .tcc-bento > :nth-child(6n + 1) { grid-column: span 2; grid-row: span 1; }
  .tcc-bento > :nth-child(6n + 3) { grid-row: span 1; }
  .tcc-bento > :nth-child(6n + 5) { grid-column: span 1; }
  .tcc-bento > :nth-child(6n + 6) { grid-column: span 2; }
}


/* == Alternating venue bands ==============================================
   Full width, image one side and copy the other, flipping each row. */

.tcc-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: min(62vh, 560px);
}
.tcc-feature--flip .tcc-feature__media { order: 2; }
.tcc-feature__media img,
.tcc-feature__media .tcc-plate { width: 100%; height: 100%; object-fit: cover; }
.tcc-feature__body {
  display: grid;
  align-content: center;
  padding: clamp(var(--s-5), 5vw, var(--s-7)) clamp(var(--s-4), 5vw, var(--s-7));
}
.tcc-feature__body > * { max-width: 56ch; }
.tcc-feature__body h3 { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); }
.tcc-feature__meta {
  margin-top: var(--s-2);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tcc-tan-deep);
}
.tcc-feature__body p { margin-top: var(--s-3); line-height: 1.7; color: var(--ink-muted); }
.tcc-feature__body .tcc-link { margin-top: var(--s-4); }

.tcc-plate {
  display: grid;
  place-content: center;
  padding: var(--s-4);
  background: var(--tcc-ink);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
}

@media (max-width: 860px) {
  .tcc-feature { grid-template-columns: 1fr; min-height: 0; }
  .tcc-feature--flip .tcc-feature__media { order: 0; }
  .tcc-feature__media img { aspect-ratio: 3 / 2; height: auto; }
}


/* == Venue index rows ===================================================== */

.tcc-rows { max-width: 58rem; margin-inline: auto; }
.tcc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  /* 0.18 measured 1.43:1; these separate tappable rows, so 3:1. */
  border-bottom: 1px solid rgba(35, 31, 32, 0.55);
  text-decoration: none;
  color: inherit;
}
.tcc-row:first-child { border-top: 1px solid rgba(35, 31, 32, 0.55); }
.tcc-row__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.tcc-row:hover .tcc-row__name { text-decoration: underline; text-underline-offset: 0.18em; }
.tcc-row__meta { font-size: var(--t-small); color: var(--ink-muted); text-align: right; }
@media (max-width: 560px) {
  .tcc-row { grid-template-columns: 1fr; }
  .tcc-row__meta { text-align: left; }
}


/* == Numbers ============================================================== */

.tcc-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.tcc-figures > * + * { border-left: 1px solid rgba(35, 31, 32, 0.55); }
.tcc-figure { padding-inline: var(--s-3); }
.tcc-figure__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.tcc-figure__label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--ink-muted);
  max-width: 26ch;
  margin-inline: auto;
}
@media (max-width: 700px) {
  .tcc-figures { grid-template-columns: 1fr; gap: var(--s-4); }
  .tcc-figures > * + * { border-left: 0; border-top: 1px solid rgba(35,31,32,0.55); padding-top: var(--s-4); }
}


/* == Quote ================================================================ */

.tcc-quote { text-align: center; max-width: 40rem; margin-inline: auto; }
.tcc-quote__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.35;
}
.tcc-quote__cite {
  display: block;
  margin-top: var(--s-4);
  font-style: normal;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tcc-ink);
}


/* == Form ================================================================= */

.tcc-form { max-width: 40rem; margin-inline: auto; display: grid; gap: var(--s-3); }
.tcc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 640px) { .tcc-form__row { grid-template-columns: 1fr; } }

/* The generator emits .tcc-form__grid around the whole field set. Design 2's
   stylesheet never defined the matching rule, so every generated enquiry form
   in that direction quietly stacks into one column; this is where it should
   have been. .tcc-form__row above is only used by hand-written markup. */
.tcc-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (max-width: 640px) { .tcc-form__grid { grid-template-columns: 1fr; } }
/* Two columns inside the Weddings lead card would be about 230px each. */
.tcc-lead__form .tcc-form__grid,
.tcc-download .tcc-form__grid { grid-template-columns: 1fr; }

.tcc-field { display: flex; flex-direction: column; gap: 6px; }
.tcc-field--full { grid-column: 1 / -1; }
.tcc-field > label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tcc-charcoal);
}
.tcc-field input,
.tcc-field select,
.tcc-field textarea {
  width: 100%;
  padding: 14px var(--s-2);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  /* --rule-input, not --rule: a field boundary is a UI component and has to
     clear 3:1 (WCAG 1.4.11). */
  border: 1px solid var(--rule-input);
  border-radius: var(--tcc-radius);
}
.tcc-field textarea { min-height: 128px; resize: vertical; }
.tcc-field input:focus,
.tcc-field select:focus,
.tcc-field textarea:focus { border-color: var(--tcc-blue); }
.tcc-field[data-invalid="true"] input,
.tcc-field[data-invalid="true"] select,
.tcc-field[data-invalid="true"] textarea { border-color: var(--tcc-ink); border-width: 2px; }
.tcc-field .field__error { font-size: var(--t-small); font-weight: 700; color: var(--tcc-ink); }
.tcc-note { font-size: var(--t-small); color: var(--ink-muted); text-align: center; }

/* The same form on the dark enquiry band. */
.tcc-band--deep .tcc-field > label { color: rgba(255, 255, 255, 0.86); }
.tcc-band--deep .tcc-field input,
.tcc-band--deep .tcc-field select,
.tcc-band--deep .tcc-field textarea { border-color: var(--white); }
.tcc-band--deep .tcc-field input:focus,
.tcc-band--deep .tcc-field select:focus,
.tcc-band--deep .tcc-field textarea:focus { border-color: var(--tcc-blue); }
.tcc-band--deep .tcc-field[data-invalid="true"] input,
.tcc-band--deep .tcc-field[data-invalid="true"] select,
.tcc-band--deep .tcc-field[data-invalid="true"] textarea { border-color: var(--white); border-width: 2px; }
.tcc-band--deep .tcc-field .field__error { color: var(--white); }
.tcc-band--deep .tcc-note { color: rgba(255, 255, 255, 0.78); }


/* == Footer ===============================================================
   Four columns. "Like — Footer" was said of the Structured direction, so
   Design 4 borrows its shape and dresses it in this palette. */

.tcc-footer {
  background: var(--tcc-ink);
  color: var(--white);
  padding-block: var(--s-7) var(--s-4);
}
.tcc-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.9fr 1.5fr;
  gap: var(--s-6) var(--s-4);
}
.tcc-footer__logo img { width: 168px; height: auto; }
.tcc-footer__blurb {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
}
.tcc-footer__note {
  margin-top: var(--s-2);
  max-width: 34ch;
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.tcc-footer h2 {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.tcc-footer ul { list-style: none; margin-top: var(--s-3); display: grid; gap: 2px; }
.tcc-footer li { font-size: 0.9375rem; line-height: 1.5; }
.tcc-footer a {
  color: var(--white);
  text-decoration: none;
  display: inline-block;
  min-height: 26px;
  padding-block: 3px;
}
.tcc-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }
/* The base stylesheet darkens every plain link on hover, which on the ink
   footer and the dark bands (the quote form, the closing band) made the link
   vanish. Heath King, 28 October 2026: "the footer hover colour is black on
   a black footer". */
.tcc-band--deep a:not([class]):hover,
.tcc-band--ink a:not([class]):hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }
/* Acknowledgement of Country. Quieter than the columns above it, but not
   so quiet it reads as fine print. */
.tcc-footer__ack {
  max-width: 68ch;
  margin-top: var(--s-6);
  font-size: var(--t-small);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.tcc-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.72);
}
.tcc-footer__legal a { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 1100px) { .tcc-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tcc-footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .tcc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tcc-footer__grid { grid-template-columns: 1fr; gap: var(--s-5); } }


/* == Motion =============================================================== */

.tcc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.tcc-reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .tcc-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tcc-reveal { opacity: 1; transform: none; } }


/* --- Movement ------------------------------------------------------------
   "Could we also see a bit of movement on the home page", with
   carvercoeventcatering.com.au as the reference. That site runs AOS for
   staggered scroll reveals and a cross-fading hero. Both are reproduced here
   in CSS rather than by adding a library -- the whole site is 8KB of script
   and it is not worth 40KB of AOS to fade some tiles in.

   Grid and gallery cells arrive in sequence instead of as one block. The
   trigger is unchanged: the container still gets .is-visible from nav.js, so
   this inherits the two independent paths to visible described there rather
   than introducing a third thing that can fail. Every escape hatch that
   applies to .tcc-reveal is repeated for the children. */

.tcc-grid.tcc-reveal,
.tcc-gallery.tcc-reveal { opacity: 1; transform: none; }

.tcc-grid.tcc-reveal > *,
.tcc-gallery.tcc-reveal > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.tcc-grid.tcc-reveal.is-visible > *,
.tcc-gallery.tcc-reveal.is-visible > * { opacity: 1; transform: none; }

.tcc-grid.tcc-reveal.is-visible > *:nth-child(2),
.tcc-gallery.tcc-reveal.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.tcc-grid.tcc-reveal.is-visible > *:nth-child(3),
.tcc-gallery.tcc-reveal.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.tcc-grid.tcc-reveal.is-visible > *:nth-child(4),
.tcc-gallery.tcc-reveal.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.tcc-grid.tcc-reveal.is-visible > *:nth-child(5),
.tcc-gallery.tcc-reveal.is-visible > *:nth-child(5) { transition-delay: 100ms; }
.tcc-grid.tcc-reveal.is-visible > *:nth-child(6),
.tcc-gallery.tcc-reveal.is-visible > *:nth-child(6) { transition-delay: 180ms; }
.tcc-grid.tcc-reveal.is-visible > *:nth-child(7),
.tcc-gallery.tcc-reveal.is-visible > *:nth-child(7) { transition-delay: 260ms; }
.tcc-grid.tcc-reveal.is-visible > *:nth-child(8),
.tcc-gallery.tcc-reveal.is-visible > *:nth-child(8) { transition-delay: 340ms; }

html:not(.js) .tcc-grid.tcc-reveal > *,
html:not(.js) .tcc-gallery.tcc-reveal > * { opacity: 1; transform: none; }

/* Media on the alternating venue bands drifts up a little further, which
   reads as depth without anything sliding sideways across the page. */
.tcc-feature .tcc-reveal { transform: translateY(28px); }

/* --- Hero cross-fade -----------------------------------------------------
   Three frames stacked, each visible for about a third of the cycle, with a
   slow scale underneath so the picture is never completely still. Home page
   only: an inner page that keeps moving while you read it is a nuisance. */

.tcc-hero__media { position: relative; overflow: hidden; }

.tcc-hero__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0;
  animation: tcc-hero-fade 21s linear infinite;
}
.tcc-hero__frame:nth-child(1) { animation-delay: 0s; }
.tcc-hero__frame:nth-child(2) { animation-delay: 7s; }
.tcc-hero__frame:nth-child(3) { animation-delay: 14s; }

@keyframes tcc-hero-fade {
  0%   { opacity: 0; transform: scale(1); }
  3%   { opacity: 1; }
  30%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.07); }
}

/* Without animation every frame sits at opacity 0, which would leave the hero
   empty. The first frame is pinned on instead. */
@media (prefers-reduced-motion: reduce) {
  .tcc-grid.tcc-reveal > *,
  .tcc-gallery.tcc-reveal > * { opacity: 1; transform: none; transition: none; }
  .tcc-hero__frame { animation: none; opacity: 0; transform: none; }
  .tcc-hero__frame:nth-child(1) { opacity: 1; }
}


/* --- Home banner, covering --------------------------------------------------
   Heath King, 11 November 2026, for Ren Burton to compare with the split
   banner: the same words and the same three cross-fading photographs, but
   the photographs fill the screen under the header and the words sit over
   them. A switch on the Home banner block. */
.tcc-hero--cover {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 78px);
  min-height: calc(100svh - 78px);
}
.tcc-hero--cover .tcc-hero__media { position: absolute; inset: 0; order: 0; aspect-ratio: auto; }
.tcc-hero--cover .tcc-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 18, 18, 0.34), rgba(20, 18, 18, 0.5));
}
.tcc-hero--cover .tcc-hero__media img { aspect-ratio: auto; height: 100%; }
.tcc-hero--cover .tcc-hero__panel {
  position: relative;
  z-index: 1;
  background: none;
  justify-items: center;
  text-align: center;
  color: #fff;
}
:is(.tcc, .editor-styles-wrapper) .tcc-hero--cover .tcc-hero__title { max-width: 18ch; color: #fff; font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem); }
.tcc-hero--cover .tcc-hero__sub { max-width: 52ch; color: rgba(255, 255, 255, 0.92); }
.tcc-hero--cover .tcc-hero__actions { justify-content: center; }
.tcc-hero--cover .tcc-anniv { justify-self: center; color: #fff; border-bottom-color: rgba(255, 255, 255, 0.55); }
.tcc-hero--cover .tcc-anniv__num { color: #fff; }
:is(.tcc, .editor-styles-wrapper) .tcc-hero--cover .tcc-btn--solid { background: #fff; border-color: #fff; color: var(--tcc-ink); }
:is(.tcc, .editor-styles-wrapper) .tcc-hero--cover .tcc-btn--solid:hover { background: var(--tcc-ink); border-color: var(--tcc-ink); color: #fff; }
:is(.tcc, .editor-styles-wrapper) .tcc-hero--cover .tcc-btn--line { background: transparent; border-color: #fff; color: #fff; }
:is(.tcc, .editor-styles-wrapper) .tcc-hero--cover .tcc-btn--line:hover { background: #fff; color: var(--tcc-ink); }
.tcc-hero--cover :focus-visible { outline-color: #fff; }
@media (max-width: 1024px) {
  .tcc-hero--cover { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
}
/* Logged in, WordPress's own bar sits above the header: 32px, 46px on a phone. */
.admin-bar .tcc-hero--cover { min-height: calc(100svh - 110px); }
@media (max-width: 1024px) { .admin-bar .tcc-hero--cover { min-height: calc(100svh - 96px); } }
@media (max-width: 782px) { .admin-bar .tcc-hero--cover { min-height: calc(100svh - 110px); } }
html:not(.js) .tcc-hero__frame:nth-child(1) { opacity: 1; }


/* ==========================================================================
   INNER PAGES
   Everything below is used by the generated pages. The homepage components
   above are reused wherever they fit — .tcc-card, .tcc-grid, .tcc-feature,
   .tcc-rows, .tcc-quote, .tcc-form — and what follows fills the gaps.

   The rules: centred heads, soft edges, and the mist and cream grounds
   carrying the page. Body copy stays left-aligned; centring a paragraph is a
   decision that costs the reader.
   ========================================================================== */

/* --- Page hero -----------------------------------------------------------
   Not text over the photograph. A centred type panel on the mist ground, with
   the image beneath it. */

/* The mist ground runs past the photograph, not up to it.
   Client, 15 October 2026: "Can we add space / padding, in the grey colour
   on the bottom half of the image? To all pages?" With a top padding only,
   the band stopped dead on the image's bottom edge and the photograph read
   as a seam between two colours rather than as part of the panel. */
.tcc-phero {
  background: var(--tcc-mist);
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.tcc-phero__type { max-width: 780px; margin-inline: auto; text-align: center; }
.tcc-phero__title {
  margin-top: var(--s-2);
  font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.tcc-phero__sub {
  margin-top: var(--s-3);
  margin-inline: auto;
  max-width: 56ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-muted);
}
.tcc-phero__media {
  margin-top: clamp(32px, 4vw, 56px);
  overflow: hidden;
  border-radius: var(--tcc-radius);
  background: var(--white);
}
.tcc-phero__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* The page's actions, centred on its banner photograph -- Heath King,
   28 October 2026: "add cta ... in the middle of the hero image". A light
   scrim so white buttons read on any photograph; the first button solid
   white, the rest outlined in white. */
.tcc-phero__media { position: relative; }
.tcc-phero__cta {
  position: absolute; inset: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-3); padding: var(--s-4);
  background: rgba(20, 18, 19, 0.28);
}
:is(.tcc, .editor-styles-wrapper) .tcc-phero__cta .btn { background: #fff; border-color: #fff; color: var(--tcc-ink); }
:is(.tcc, .editor-styles-wrapper) .tcc-phero__cta .btn:hover { background: var(--tcc-ink); border-color: var(--tcc-ink); color: #fff; }
:is(.tcc, .editor-styles-wrapper) .tcc-phero__cta .btn--line { background: transparent; color: #fff; }
:is(.tcc, .editor-styles-wrapper) .tcc-phero__cta .btn--line:hover { background: #fff; border-color: #fff; color: var(--tcc-ink); }
@media (max-width: 560px) { .tcc-phero__cta { gap: var(--s-2); } :is(.tcc, .editor-styles-wrapper) .tcc-phero__cta .btn { padding-inline: var(--s-3); } }

/* The full-width hero, words over the photograph. Tried on Weddings and
   taken site-wide, 28 October 2026 (Heath King, Ren Burton). Switch:
   HERO_OVERLAY_ALL / HERO_OVERLAY_OFF in make-pages.py. */
.tcc-phero--overlay { padding: 0; background: var(--tcc-ink); }
.tcc-phero--overlay > .container { max-width: none; padding-inline: 0; }
.tcc-phero--overlay .tcc-phero__media { margin-top: 0; border-radius: 0; background: var(--tcc-ink); }
.tcc-phero--overlay .tcc-phero__media img,
.tcc-phero--overlay.tcc-phero--short .tcc-phero__media img {
  aspect-ratio: auto;
  height: clamp(520px, 78vh, 860px);
}
.tcc-phero__over {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-6) var(--s-4);
  text-align: center;
  background: linear-gradient(180deg, rgba(20, 18, 19, 0.35) 0%, rgba(20, 18, 19, 0.5) 100%);
}
.tcc-phero__over .tcc-phero__type { max-width: 820px; }
.tcc-phero__over .tcc-eyebrow,
.tcc-phero__over .tcc-phero__title,
.tcc-phero__over .tcc-phero__sub { color: #fff; }
.tcc-phero__over .tcc-phero__title { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.tcc-phero__over .tcc-phero__sub { color: rgba(255, 255, 255, 0.88); }
.tcc-phero__over .tcc-phero__cta { position: static; inset: auto; padding: 0; margin-top: var(--s-5); background: none; }
/* Corporate's photograph: the chefs' faces sit below the words, not behind
   them. Matched on the file so it travels with the photo, not the page. */
.tcc-phero--overlay .tcc-phero__media img[src*="corporate-chefs"] { object-position: 50% 100%; }
/* Menus: half the height, so the menu starts near the top. */
.tcc-phero--overlay-short .tcc-phero__media img,
.tcc-phero--overlay-short.tcc-phero--short .tcc-phero__media img { height: clamp(340px, 48vh, 520px); }
.tcc-phero--overlay-short .tcc-phero__over .tcc-phero__title { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); }
@media (max-width: 560px) {
  .tcc-phero--overlay .tcc-phero__media img { height: clamp(460px, 72vh, 620px); }
  .tcc-phero--overlay-short .tcc-phero__media img { height: clamp(320px, 52vh, 440px); }
  .tcc-phero__over { padding: var(--s-5) var(--s-3); }
}

/* One crop, everywhere.
   The markup is Design 2's, which marks most inner pages "short" and cropped
   them to 24:7. Side by side with a page that did not carry the modifier the
   difference read as a mistake rather than a variant -- client, 15 October,
   on the Buffet hero: "Can this image be made bigger? It looks like half a
   photo size", and on the Corporate hero, which has no modifier: "The size
   of this image looks better."
   The class stays because it is inherited markup shared with Design 2; in
   this direction it is simply the same crop. */
.tcc-phero--short .tcc-phero__media img { aspect-ratio: 21 / 9; }

/* A hero with no photograph under it.

   Ren Burton, 28 October 2026, on Finger Food -- "I think people need to
   scroll too long to see the menu. Can we remove the top picture." -- and on
   Buffet, which has a second photograph beside the menu anyway.

   The band's bottom padding was sized to sit under a photograph, so with the
   photograph gone it reads as a gap rather than as the foot of the panel.
   This evens it up against the top. */
.tcc-phero--bare { padding-bottom: clamp(48px, 6vw, 88px); }
/* No photograph: the buttons go under the words, in the page's own ink.
   Laid over the banner, as they are on a photograph, they greyed it and, in
   the editor, took every click meant for the title. Ren Burton, 11 November
   2026, could not rename a Gallery page's banner. */
.tcc-phero--bare .tcc-phero__cta { position: static; inset: auto; padding: 0; margin-top: var(--s-5); background: none; }
:is(.tcc, .editor-styles-wrapper) .tcc-phero--bare .tcc-phero__cta .btn { background: var(--tcc-ink); border-color: var(--tcc-ink); color: #fff; }
:is(.tcc, .editor-styles-wrapper) .tcc-phero--bare .tcc-phero__cta .btn:hover { background: transparent; color: var(--tcc-ink); }
:is(.tcc, .editor-styles-wrapper) .tcc-phero--bare .tcc-phero__cta .btn--line { background: transparent; color: var(--tcc-ink); }
:is(.tcc, .editor-styles-wrapper) .tcc-phero--bare .tcc-phero__cta .btn--line:hover { background: var(--tcc-ink); color: #fff; }

/* A bulleted list inside migrated copy.

   Their pages write bullets as paragraphs opening with a plus sign -- "+ Any
   budget constraints?", "+ How long does your event run?" -- which is
   styling rather than structure, so the build collects the run into one list
   and styles it here. See live_prose() in make-pages.py.

   Sits on the measure, like the paragraphs either side of it. */
.tcc-list {
  margin-top: var(--s-3);
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: var(--s-1);
}
.tcc-list li {
  position: relative;
  padding-left: 1.4em;
  line-height: 1.55;
}
.tcc-list li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tcc-tan);
}

/* A hero that runs into a dark band leaves the photograph sitting flush
   against black. The hairline marks the join; the ground below it is the
   section padding above. */
.tcc-phero--rule { border-bottom: 1px solid var(--tcc-tan); }


/* --- Section head, on inner pages ----------------------------------------- */

.tcc-head__link { margin-top: var(--s-3); }
.tcc-band--deep .tcc-head h2 { color: var(--white); }
.tcc-band--deep .tcc-lede { color: rgba(255, 255, 255, 0.86); }
.tcc-band--tight { padding-block: clamp(28px, 3vw, 44px); }


/* --- Colour band — one line of type over a photograph --------------------- */

.tcc-cband { position: relative; display: grid; }
.tcc-cband > * { grid-area: 1 / 1; }
.tcc-cband__media { min-height: clamp(280px, 34vw, 440px); }
.tcc-cband__media img { width: 100%; height: 100%; object-fit: cover; }
/* Ink at 0.55 over the photograph, so white type clears AA against even the
   lightest frame we ship. */
.tcc-cband__scrim { background: rgba(35, 31, 32, 0.55); }
.tcc-cband__inner {
  position: relative;
  align-self: center;
  text-align: center;
  padding-block: var(--s-6);
  color: var(--white);
}
.tcc-cband__title {
  margin-top: var(--s-2);
  margin-inline: auto;
  max-width: 20ch;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  line-height: 1.1;
  color: var(--white);
}


/* --- Inline feature block ------------------------------------------------- */

.tcc-feature--inline {
  align-items: center;
  gap: clamp(var(--s-4), 4vw, var(--s-7));
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
}
.tcc-feature--inline .tcc-feature__media { border-radius: var(--tcc-radius); overflow: hidden; }
.tcc-feature--inline .tcc-feature__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.tcc-feature--inline .tcc-feature__body { text-align: left; }
.tcc-feature--inline .tcc-feature__body > * { max-width: 58ch; margin-inline: 0; }
.tcc-feature--inline .tcc-feature__body h2 { margin-top: var(--s-2); }
.tcc-feature--inline .tcc-feature__body p + p { margin-top: var(--s-2); }
.tcc-feature--inline + .tcc-feature--inline { margin-top: clamp(48px, 6vw, 88px); }


/* --- Venue card ----------------------------------------------------------- */

.tcc-vcard { display: block; text-decoration: none; color: inherit; text-align: center; }
.tcc-vcard__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--tcc-radius);
  background: var(--tcc-mist);
}
.tcc-vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.tcc-vcard:hover .tcc-vcard__media img { transform: scale(1.05); }
.tcc-vcard__name {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.tcc-vcard:hover .tcc-vcard__name { text-decoration: underline; text-underline-offset: 0.18em; }
.tcc-vcard__meta { display: block; margin-top: 6px; font-size: var(--t-small); color: var(--ink-muted); }

/* Where a venue has no photograph cleared yet. */
.tcc-plate {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  padding: var(--s-3);
  background: var(--tcc-charcoal);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-align: center;
}


/* --- Priced menu list ----------------------------------------------------- */

.tcc-items { max-width: 940px; margin-inline: auto; list-style: none; text-align: left; }
.tcc-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 14px 0;
  border-bottom: 1px solid rgba(35, 31, 32, 0.3);
}
.tcc-item:last-child { border-bottom: 0; }
.tcc-item__name { font-size: 1.0625rem; }
.tcc-item__price { flex: none; font-weight: 700; }
.tcc-item__diet {
  margin-left: 6px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tcc-charcoal);
}
.tcc-band--deep .tcc-item { border-bottom-color: rgba(255, 255, 255, 0.32); }
.tcc-band--deep .tcc-item__diet { color: rgba(255, 255, 255, 0.86); }

/* Two columns on a wide screen. Client, 15 October 2026: "The long content
   menus need to be a 2-column page. Customers may get scroll fatigue or stop
   scrolling." Canapes measured 8916px tall at 1280; this takes it to 7553.

   Only the grouped lists, which is where the long menus are. A list inside
   .tcc-package is already the right-hand column of a two-column composition
   and runs 583px at 1280 -- splitting that again gives 270px columns, which
   wraps most dishes onto four lines and measured a 4% saving for a much worse
   line. The groups give up the 760px measure and run the container instead,
   so each of the two columns is close to the width the list had on its own.

   min-width: 901px is the complement of this file's 900px breakpoint, written
   that way so nothing below it changes at all. break-inside keeps a dish, its
   dietary codes and its price whole across the column break.

   And only the lists that are lists of dishes. 16 October 2026: the grazing
   platters moved to Delivered Catering in the same week this rule was
   written, and the two met badly. A platter's "items" are not dishes, they
   are two or three sentences describing what is on the board, and its price
   is in the group's own heading. Measured at 1280: seven platter lists, two
   to six rows each, every one of them in two columns -- the Vegan Feast
   list ran 85px of content in the left column against a 142px box, so the
   last row's hairline rule hung in mid-air with half a column of nothing
   under it, seven times down the page. Nothing was gained either: two
   columns of three sentences saves no scrolling worth having and halves the
   reading line.

   The discriminator is :has(.tcc-item__price), which is not a proxy for it --
   it is the thing itself. Checked against the export: every row of every
   other grouped list on the site carries a price, because it is something
   you can order one of. Not one platter row does, because the one priced
   thing is the platter. So the rule reads "two columns for a list of
   orderable rows", which is what it always meant.

   Written as an opt-in rather than :not(:has(...)) on purpose: a browser
   without :has() drops the whole block and gets the single-column design
   that was signed off in September, rather than keeping the two-column
   treatment on the one band that cannot take it. */

@media (min-width: 901px) {
  /* A grouped list aligns to its group, rather than centring inside it.
     .tcc-items centres on a 760px measure, which is right for a list that is
     the whole of a band and wrong for one that sits under a full-width
     label: the platters' heading started at the container's left edge and
     their description started 228px in. The priced lists never showed it
     because the rule below gives them the container's full width. */
  .tcc-menu-group .tcc-items { margin-inline: 0; }

  .tcc-menu-group .tcc-items:has(.tcc-item__price) {
    max-width: none;
    column-count: 2;
    column-gap: clamp(var(--s-5), 4vw, var(--s-7));
  }
  .tcc-menu-group .tcc-items:has(.tcc-item__price) .tcc-item { break-inside: avoid; }

  /* :last-child falls at the foot of the second column only, so the rule that
     closes a single-column list leaves the two columns ending differently.
     In two columns every row keeps its hairline and both close together. */
  .tcc-menu-group .tcc-items:has(.tcc-item__price) .tcc-item:last-child { border-bottom: 1px solid rgba(35, 31, 32, 0.3); }
  .tcc-band--deep .tcc-menu-group .tcc-items:has(.tcc-item__price) .tcc-item:last-child { border-bottom-color: rgba(255, 255, 255, 0.32); }
}


/* --- Feature blocks (title + body) ---------------------------------------- */

.tcc-feats { display: grid; gap: clamp(var(--s-4), 3vw, var(--s-6)); }
.tcc-feats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcc-feats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcc-feats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tcc-feat { text-align: center; }
.tcc-feat p { color: var(--ink-muted); max-width: 42ch; margin-inline: auto; }
.tcc-feat__title {
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.tcc-band--deep .tcc-feat p { color: rgba(255, 255, 255, 0.86); }
.tcc-band--deep .tcc-feat__title { color: var(--white); }


/* --- Gallery -------------------------------------------------------------- */

.tcc-gallery { display: grid; gap: var(--s-3); }

/* The gallery set pages, as the live ones are laid out: rows of columns in
   twelfths -- an 8/12 landscape beside a 4/12 stack of two portraits, a
   6/6 pair, one frame centred by two empty 2/12 columns -- with the
   testimonials as rows of their own between. Ripped from their pages on
   28 October 2026; see _tools/gallery-layout.json. Inside a column the
   photographs keep their own proportions, which is what makes the rows
   line up the way theirs do. Under tablet width every column is the full
   width and the empty spacers vanish, which is what their Bootstrap grid
   does at the same point. */
/* Their measurements, read in the browser at 1280 wide: a 1000px run of
   photographs, 30px between columns and between rows, 20px between the two
   photographs stacked in a narrow column. */
.tcc-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
  max-width: 1000px;
  margin-inline: auto;
}
.tcc-mosaic + .tcc-mosaic { margin-top: 30px; }
.tcc-mosaic .tcc-gallery { gap: 20px; }
.tcc-mosaic__col { min-width: 0; }
.tcc-mosaic__col--1 { grid-column: span 1; }
.tcc-mosaic__col--2 { grid-column: span 2; }
.tcc-mosaic__col--3 { grid-column: span 3; }
.tcc-mosaic__col--4 { grid-column: span 4; }
.tcc-mosaic__col--5 { grid-column: span 5; }
.tcc-mosaic__col--6 { grid-column: span 6; }
.tcc-mosaic__col--7 { grid-column: span 7; }
.tcc-mosaic__col--8 { grid-column: span 8; }
.tcc-mosaic__col--9 { grid-column: span 9; }
.tcc-mosaic__col--10 { grid-column: span 10; }
.tcc-mosaic__col--11 { grid-column: span 11; }
.tcc-mosaic__col--12 { grid-column: span 12; }
/* No aspect-ratio here, on purpose. WordPress marks lazy photographs
   sizes="auto", and Chrome gives those size containment: their height then
   comes from the width/height attributes' ratio or, failing that, from
   WordPress's 3000x1500 placeholder. Any aspect-ratio declaration -- even
   `auto` -- discards the attributes' ratio, and five of the eighteen
   photographs rendered 1500px tall. So the square crop below simply does
   not reach a mosaic, and each photograph keeps its own proportions, as
   theirs do. */
.tcc-mosaic__col--text { padding: var(--s-5) 0; }
@media (max-width: 760px) {
  .tcc-mosaic__col { grid-column: span 12; }
  /* The spacers. :empty would do for the static page, but WordPress
     wraps every column in an inner div, so ask what is in it instead. */
  .tcc-mosaic__col:not(:has(img, blockquote)) { display: none; }
  .tcc-mosaic__col--text { padding: var(--s-4) 0; }
}
.tcc-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcc-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcc-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tcc-gallery figure { margin: 0; overflow: hidden; border-radius: var(--tcc-radius); background: var(--tcc-mist); }
.tcc-gallery img { width: 100%; object-fit: cover; }
.tcc-gallery:not(.tcc-mosaic .tcc-gallery) img { aspect-ratio: 1 / 1; }
.tcc-mosaic .tcc-gallery img { height: auto; }

/* A frame can carry a line about itself, revealed over the photograph.

   Ren Burton, 22 October 2026: "maybe not the plain blocks of colour, I
   quite like the, that you can hover on an image and maybe there's like a
   little testimonial sort of thing". She was describing her own site's
   gallery, which does exactly this on thirteen of its forty-five frames --
   mostly a line about the food, once a testimonial in full.

   One thing of theirs deliberately not reproduced: theirs is hover only, so
   on a phone the words cannot be reached at all. Here the frame carries a
   button, so a tap opens it, and :focus-within gets a keyboard to it. */
.tcc-gallery figure { position: relative; }
.tcc-gallery__reveal {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: var(--s-3);
  background: var(--tcc-mist);
  color: var(--tcc-ink);
  font-size: 0.8125rem;
  line-height: 1.55;
  text-align: center;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms;
}
.tcc-gallery figure:hover .tcc-gallery__reveal,
.tcc-gallery figure:focus-within .tcc-gallery__reveal,
.tcc-gallery figure.is-open .tcc-gallery__reveal {
  opacity: 1;
  visibility: visible;
}
.tcc-gallery__reveal p { margin: 0; }
.tcc-gallery__reveal p + p { margin-top: 0.5em; }
.tcc-gallery__cite {
  display: block;
  margin-top: var(--s-2);
  font-style: normal;
  font-weight: 600;
  color: var(--tcc-muted);
}
/* Covers the frame, so the whole photograph is the target. Transparent and
   unlabelled visually -- the words it opens are right behind it. */
.tcc-gallery__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tcc-gallery__toggle:focus-visible { outline: 2px solid var(--tcc-ink); outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  .tcc-gallery__reveal { transition: none; }
}



/* --- Quote grid ----------------------------------------------------------- */

.tcc-quotes { display: grid; gap: clamp(var(--s-4), 3vw, var(--s-6)); }
.tcc-quotes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcc-quotes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcc-quote--sm { text-align: center; }
.tcc-quote--sm .tcc-quote__text {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  max-width: none;
}


/* --- CTA band ------------------------------------------------------------- */

.tcc-cta { text-align: center; }
.tcc-cta h2 { margin-top: var(--s-2); color: var(--white); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.tcc-cta .tcc-lede { margin-inline: auto; max-width: 64ch; color: rgba(255, 255, 255, 0.86); }


/* --- Enquiry -------------------------------------------------------------- */

.tcc-enquiry__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-3);
}
.tcc-enquiry__contact a {
  display: inline-block;
  min-height: 26px;
  padding-block: 3px;
  color: var(--white);
  font-weight: 700;
}


/* --- Image placeholder ---------------------------------------------------- */

.tcc-ph {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 220px;
  aspect-ratio: 4 / 3;
  padding: var(--s-3);
  background: var(--tcc-mist);
  border: 1px dashed rgba(35, 31, 32, 0.55);
  border-radius: var(--tcc-radius);
  color: var(--tcc-charcoal);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}


/* --- Shared vocabulary ---------------------------------------------------
   The page builders emit a handful of generic utility classes directly,
   because they are content-level rather than architectural. They are scoped
   to :is(.tcc, .editor-styles-wrapper) on <html>, so Design 1 is untouched — but they must still speak
   this design's language rather than inherit nothing. */

:is(.tcc, .editor-styles-wrapper) .eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tcc-tan-deep);
}
:is(.tcc, .editor-styles-wrapper) .tcc-band--deep .eyebrow { color: rgba(255, 255, 255, 0.86); }

:is(.tcc, .editor-styles-wrapper) .lede { font-size: 1.125rem; line-height: 1.55; color: var(--ink-muted); }
:is(.tcc, .editor-styles-wrapper) .tcc-band--deep .lede { color: rgba(255, 255, 255, 0.86); }

:is(.tcc, .editor-styles-wrapper) .measure { max-width: 84ch; margin-inline: auto; }
:is(.tcc, .editor-styles-wrapper) .measure p + p { margin-top: var(--s-3); }
:is(.tcc, .editor-styles-wrapper) .container--narrow { max-width: 1060px; }

:is(.tcc, .editor-styles-wrapper) .form__footnote,
:is(.tcc, .editor-styles-wrapper) .tcc-note { font-size: var(--t-small); color: var(--ink-muted); }
:is(.tcc, .editor-styles-wrapper) .tcc-band--deep .form__footnote,
:is(.tcc, .editor-styles-wrapper) .tcc-band--deep .tcc-note { color: rgba(255, 255, 255, 0.86); }

/* --- Order bar -----------------------------------------------------------
   Order now and the standing terms, directly under the hero on every priced
   menu. Client, 15 October 2026: "All menus need to have the Order Now at
   the top of the page", with the notice, the GST line and the dietary key
   beside it. They were at the foot of the page, which on a long menu is
   after the reader has gone.

   The button is first in the markup because it is the point of the band;
   the terms sit beside it on a wide screen and under it on a narrow one. */
.tcc-orderbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) clamp(var(--s-4), 4vw, var(--s-6));
}
.tcc-orderbar__action { flex: 0 0 auto; }
.tcc-orderbar__terms { flex: 1 1 28ch; min-width: 0; }
.tcc-orderbar__terms .form__footnote + .form__footnote { margin-top: var(--s-1); }

/* Under the drawer breakpoint the button reads better full width than
   stranded on a line of its own. */
@media (max-width: 560px) {
  .tcc-orderbar__action { flex: 1 1 100%; }
  .tcc-orderbar__action .btn { display: block; text-align: center; }
}

:is(.tcc, .editor-styles-wrapper) .grid { display: grid; gap: clamp(var(--s-3), 2.6vw, var(--s-5)); }
:is(.tcc, .editor-styles-wrapper) .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.tcc, .editor-styles-wrapper) .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.tcc, .editor-styles-wrapper) .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

:is(.tcc, .editor-styles-wrapper) .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); text-align: center; }
:is(.tcc, .editor-styles-wrapper) .stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  line-height: 1;
}
:is(.tcc, .editor-styles-wrapper) .stat__label { display: block; margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-muted); }
:is(.tcc, .editor-styles-wrapper) .tcc-band--deep .stat__label { color: rgba(255, 255, 255, 0.86); }

:is(.tcc, .editor-styles-wrapper) .capacity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); text-align: center; }
/* Only the capacities a venue has supplied print, so the row may hold one or
   two -- centred under the intro at the width one box would have. */
:is(.tcc, .editor-styles-wrapper) .capacity--1 { grid-template-columns: minmax(0, 12rem); justify-content: center; }
:is(.tcc, .editor-styles-wrapper) .capacity--2 { grid-template-columns: repeat(2, minmax(0, 12rem)); justify-content: center; }
:is(.tcc, .editor-styles-wrapper) .capacity__item { padding: var(--s-4) var(--s-3); background: var(--white); border-radius: var(--tcc-radius); }
:is(.tcc, .editor-styles-wrapper) .tcc-band--white .capacity__item { background: var(--tcc-mist); }
:is(.tcc, .editor-styles-wrapper) .capacity__value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
:is(.tcc, .editor-styles-wrapper) .capacity__label {
  display: block; margin-top: 8px;
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}

:is(.tcc, .editor-styles-wrapper) .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--s-4), 4vw, var(--s-7)); align-items: center; }
:is(.tcc, .editor-styles-wrapper) .split--top { align-items: start; }
/* Photograph on the right. Every split on a page built from page_copy.py
   alternates, so two in a row do not both lead with a picture on the left.
   Design 4 never had a rule for this until 28 October 2026. */
:is(.tcc, .editor-styles-wrapper) .split--reverse .split__media { order: 2; }
/* Paragraphs under a centred section head, in an intro built from
   page_copy.py: centred with it, rather than a left-aligned column under a
   centred heading. */
:is(.tcc, .editor-styles-wrapper) .measure--intro { margin-inline: auto; text-align: center; }
:is(.tcc, .editor-styles-wrapper) .split__media { overflow: hidden; border-radius: var(--tcc-radius); }
:is(.tcc, .editor-styles-wrapper) .split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
:is(.tcc, .editor-styles-wrapper) .split__body > * + * { margin-top: var(--s-3); }

:is(.tcc, .editor-styles-wrapper) .proof-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); align-items: center; }
:is(.tcc, .editor-styles-wrapper) .proof-row__item {
  display: grid; place-items: center;
  aspect-ratio: 5 / 2;
  padding: var(--s-2);
  border: 1px solid rgba(35, 31, 32, 0.55);
  border-radius: var(--tcc-radius);
  font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-muted); text-align: center;
}
:is(.tcc, .editor-styles-wrapper) .tcc-band--deep .proof-row__item { border-color: rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.86); }

:is(.tcc, .editor-styles-wrapper) .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s-4);
  font-family: var(--font-body); font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--tcc-radius);
  background: transparent; color: var(--tcc-ink); border: 1px solid var(--tcc-ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
:is(.tcc, .editor-styles-wrapper) .btn:hover { background: var(--tcc-ink); border-color: var(--tcc-ink); color: var(--white); }
:is(.tcc, .editor-styles-wrapper) .tcc-band--deep .btn { background: transparent; color: var(--white); border-color: var(--white); }
:is(.tcc, .editor-styles-wrapper) .tcc-band--deep .btn:hover { background: var(--white); color: var(--tcc-ink); }

:is(.tcc, .editor-styles-wrapper) .link-arrow {
  display: inline-block; min-height: 26px; padding-block: 3px;
  font-size: var(--t-small); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid currentColor;
}
:is(.tcc, .editor-styles-wrapper) .link-arrow:hover { border-bottom-color: transparent; }

:is(.tcc, .editor-styles-wrapper) .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }

/* Standalone contact links are targets, not inline prose — they have to
   clear 24x24 (SC 2.5.8). */
:is(.tcc, .editor-styles-wrapper) a[href^="tel:"],
:is(.tcc, .editor-styles-wrapper) a[href^="mailto:"] { display: inline-block; min-height: 26px; padding-block: 3px; }
:is(.tcc, .editor-styles-wrapper) .feature__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-bottom: var(--s-2); }


/* --- Inner-page responsive ------------------------------------------------ */

@media (max-width: 900px) {
  .tcc-feature--inline { grid-template-columns: 1fr; }
  .tcc-feats--3, .tcc-feats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcc-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcc-quotes--3 { grid-template-columns: 1fr; }
  :is(.tcc, .editor-styles-wrapper) .grid--3, :is(.tcc, .editor-styles-wrapper) .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.tcc, .editor-styles-wrapper) .split { grid-template-columns: 1fr; }
  :is(.tcc, .editor-styles-wrapper) .split--reverse .split__media { order: 0; }
  :is(.tcc, .editor-styles-wrapper) .proof-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .tcc-feats--2, .tcc-feats--3, .tcc-feats--4 { grid-template-columns: 1fr; }
  .tcc-gallery--2, .tcc-gallery--3, .tcc-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcc-quotes--2, .tcc-quotes--3 { grid-template-columns: 1fr; }
  :is(.tcc, .editor-styles-wrapper) .grid--2, :is(.tcc, .editor-styles-wrapper) .grid--3, :is(.tcc, .editor-styles-wrapper) .grid--4 { grid-template-columns: 1fr; }
  :is(.tcc, .editor-styles-wrapper) .stats, :is(.tcc, .editor-styles-wrapper) .capacity { grid-template-columns: 1fr; }
  :is(.tcc, .editor-styles-wrapper) .proof-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcc-item { flex-direction: column; align-items: flex-start; gap: 4px; }
}


/* ==========================================================================
   DESIGN 4 ADDITIONS
   Everything below is new to this direction — the typeface switch, the
   rectangular tiles, and the handful of blocks the revised pages need.
   ========================================================================== */

/* --- Typeface ------------------------------------------------------------
   Jost, chosen by the client on 10 September 2026 from the three that were
   put in front of them ("we are leaning towards the Modern Sans Font").
   Barlow Condensed and Tinos have gone, along with the switcher that offered
   them.

   Self-hosted, latin subset, one variable file covering 300-500, so the site
   still opens from file:// with no network. SIL Open Font Licence, which
   means the display face is settled and only Hanken Sans for body copy is
   still an open licence question. */

@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-variable.woff2') format('woff2');
  font-weight: 300 500; font-style: normal; font-display: swap;
}

:is(.tcc, .editor-styles-wrapper) {
  /* Secondary copy sits on --tcc-mist here more often than on white, and
     --ink-muted does not clear AA there. See tokens.css. */
  --ink-muted: var(--tcc-muted);
  --font-display: 'Jost', 'Century Gothic', 'Futura', sans-serif;
  --tcc-dw:  400;
  --tcc-dls: -0.005em;
  --tcc-dlh: 1.1;
}

/* Jost's display weight and tracking, applied to every surface that uses the
   display face rather than repeated at each one. */
:is(.tcc, .editor-styles-wrapper) h1, :is(.tcc, .editor-styles-wrapper) h2, :is(.tcc, .editor-styles-wrapper) h3,
.tcc-card__label, .tcc-row__name, .tcc-vcard__name, .tcc-figure__value,
.tcc-feat__title, .tcc-quote__text, .tcc-statement, .tcc-footer__blurb,
:is(.tcc, .editor-styles-wrapper) .stat__value, :is(.tcc, .editor-styles-wrapper) .capacity__value, :is(.tcc, .editor-styles-wrapper) .feature__title {
  font-weight: var(--tcc-dw);
  letter-spacing: var(--tcc-dls);
}
:is(.tcc, .editor-styles-wrapper) h1, :is(.tcc, .editor-styles-wrapper) h2, :is(.tcc, .editor-styles-wrapper) h3 { line-height: var(--tcc-dlh); }

/* Focus has to clear whichever ground it lands on. */
.tcc-header :focus-visible,
.tcc-footer :focus-visible,
.tcc-band--deep :focus-visible,
.tcc-cband :focus-visible { outline-color: var(--white); }


/* --- Rectangular tiles ---------------------------------------------------
   "3 tiles – Change to rectangle, like the format in the structured option."
   Structured runs 4:5, so that is the ratio here — with Design 2's rounded
   corners kept, which is the thing they preferred about this direction. */

.tcc-card__media { aspect-ratio: 4 / 5; }
.tcc-panel .tcc-card__media { aspect-ratio: 1 / 1; }   /* the dropdown stays compact */
.tcc-vcard__media { aspect-ratio: 4 / 3; }


/* --- Anniversary mark ----------------------------------------------------
   "we are entering our 40th year of catering and want to bring this to the
   forefront." A ruled mark rather than a roundel, which would fight the
   photograph running beside the hero panel. */

.tcc-anniv {
  display: inline-flex;
  justify-self: start;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tcc-tan);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tcc-tan-deep);
}
.tcc-anniv__num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--tcc-dw);
  letter-spacing: 0;
  line-height: 1;
  color: var(--tcc-ink);
}
.tcc-band--deep .tcc-anniv,
.tcc-cband .tcc-anniv { color: var(--white); border-bottom-color: rgba(255, 255, 255, 0.5); }
.tcc-band--deep .tcc-anniv__num,
.tcc-cband .tcc-anniv__num { color: var(--white); }


/* --- Phone callout -------------------------------------------------------
   "Couples like to call, and discuss so the phone number needs to be
   prominent here." Used on Weddings and on the venue pages. */

.tcc-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--tcc-grey);
  border-radius: var(--tcc-radius);
  background: var(--white);
}
.tcc-callout__label {
  display: block;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tcc-tan-deep);
}
.tcc-callout__num {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: var(--tcc-dw);
  line-height: 1;
  text-decoration: none;
  color: var(--tcc-ink);
}
.tcc-callout__num:hover { color: var(--tcc-blue); }
.tcc-callout__note { max-width: 36ch; font-size: var(--t-small); color: var(--ink-muted); }


/* --- Lead block: copy beside a form --------------------------------------
   Weddings asked for "more room for copy" and the "quote function to higher
   up on the page". Both at once means the form sits beside the copy rather
   than under it. */

.tcc-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--s-4), 4vw, var(--s-7));
  align-items: start;
  text-align: left;
}
.tcc-lead__copy > * + * { margin-top: var(--s-3); }
.tcc-lead__copy p { line-height: 1.75; color: var(--ink-muted); }
.tcc-lead__form {
  padding: clamp(var(--s-4), 3vw, var(--s-5));
  border: 1px solid var(--tcc-grey);
  border-radius: var(--tcc-radius);
  background: var(--white);
}
.tcc-lead__form .tcc-form { max-width: none; }
.tcc-lead__form h2 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); }
.tcc-lead__form .tcc-lede { margin-top: var(--s-2); font-size: 1rem; }
/* .tcc-note is written for the dark enquiry band; inside the white card it has
   to come back to ink. */
.tcc-lead__form .tcc-note,
.tcc-lead__form .form__footnote { color: var(--ink-muted); text-align: left; }

@media (max-width: 900px) {
  .tcc-lead { grid-template-columns: 1fr; }
}


/* --- Long-form prose -----------------------------------------------------
   About and the revised Weddings page carry real copy now, so there is a
   measure set for reading rather than for scanning. */

.tcc-prose { max-width: 84ch; text-align: left; }
.tcc-prose > * + * { margin-top: var(--s-3); }
.tcc-prose p { line-height: 1.8; color: var(--ink-muted); }
.tcc-prose h2 { margin-top: var(--s-6); }
.tcc-prose h3 { margin-top: var(--s-5); font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); }
.tcc-prose h2 + p, .tcc-prose h3 + p { margin-top: var(--s-3); }
.tcc-prose--centre { margin-inline: auto; }


/* --- Menu package --------------------------------------------------------
   "More space for images to separate the packages." Each package is an image
   and its dish list side by side, alternating down the page, so the eye gets
   a break between one price tier and the next instead of meeting three lists
   in a row.

   The list itself is .tcc-items -- hairline rows, no bullets. The client was
   explicit: "I personally don't like the dot points and prefer your version
   with the faint lines." */

.tcc-package {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-4), 4vw, var(--s-7));
  align-items: center;
  text-align: left;
}
.tcc-package + .tcc-package { margin-top: clamp(56px, 7vw, 104px); }
.tcc-package--flip .tcc-package__media { order: 2; }

/* The photograph sits at the top of the package, not in the middle of it.
   Client, 15 October 2026, on Grazing Tables: "Can the image come further to
   the top?" The Tuscan table is one package with seven labelled groups under
   it, so its dish list runs about three times the height of a 4:3 image --
   and with the grid centred, the image floated level with the middle of the
   list, under a screen of empty column. Aligning the media to the start puts
   its top edge level with the package title, which is where the eye expects
   to meet it. Only the media moves: a package whose list is shorter than its
   image keeps its body centred, which is what the signed-off pages show. */
.tcc-package__media {
  align-self: start;
  overflow: hidden;
  border-radius: var(--tcc-radius);
  background: var(--tcc-mist);
}
.tcc-package__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.tcc-package__body > * + * { margin-top: var(--s-3); }
.tcc-package__title { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); }
.tcc-package__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
}
.tcc-package__price {
  font-family: var(--font-display);
  font-weight: var(--tcc-dw);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--tcc-ink);
}
.tcc-package__min {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tcc-tan-deep);
}
.tcc-package__note { font-size: var(--t-small); color: var(--ink-muted); }

/* The package's own notice, beside the price instead of under the dish list.
   Live Food Stations only -- Ren Burton, 22 October 2026: "the notices sit
   beside each station's price". Four stations, each with a sentence saying
   what it is, and each sentence was printed after its dish list, a screen
   below the price it describes.

   Two columns, so "beside" is literally beside: the price, its unit and its
   minimum stack into one narrow column and the notice takes the rest. They
   are a wrapping flex row, so under about 560px of body column the notice
   drops below the price rather than squeezing into a two-word measure --
   which is the same point the whole .tcc-package grid goes single column. */
.tcc-package__meta--notice { align-items: flex-start; gap: var(--s-3) var(--s-4); }
.tcc-package__pricing {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.tcc-package__notice {
  flex: 1 1 22ch;
  min-width: 22ch;
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-muted);
}

.tcc-package .tcc-items { max-width: none; margin-inline: 0; }

/* Their menu layout, from their live site -- Heath King, 28 October 2026:
   "go back to image, with the description to the right of it". A package
   is a photograph on the left and, on the right, a heading between two
   rules and its list. A package of more than two groups (Buffet) runs the
   full width, photograph above, its groups two to a row -- each group a
   column of its own, which is what made theirs easy to read. */
/* The photograph runs the height of its package, so a long list has a
   picture beside all of it rather than a short one at the top and white
   space under it. Heath King: "make the images bigger so the content
   fits". It never drops below its own 780 by 500 shape. */
.tcc-lpkg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s-4), 4vw, var(--s-7)); align-items: stretch; text-align: left; }
.tcc-lpkg + .tcc-lpkg { margin-top: clamp(48px, 6vw, 88px); }
/* The photograph never sets the package's height: it is taken out of the
   flow and fills whatever height the list needs, never under 320px,
   cropped to fit. A portrait photograph in flow made the row as tall as
   the picture, with the list stranded at the top of it -- Heath King,
   28 October 2026, on Substantial Canapes. */
.tcc-lpkg__media { position: relative; overflow: hidden; border-radius: var(--tcc-radius); background: var(--tcc-mist); min-height: 320px; }
.tcc-lpkg__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcc-lnotes { max-width: 52rem; margin: var(--s-4) auto 0; text-align: center; font-size: var(--t-small); color: var(--ink-muted); }
/* Compact, as theirs is: the title between two rules with its button on
   the right, the price and the minimum each on a ruled line, then tight
   lists -- so a package sits within its photograph's height. */
.tcc-lpkg__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 10px 0;
  border-top: 1px solid var(--tcc-ink);
  border-bottom: 1px solid var(--tcc-ink);
}
.tcc-lpkg__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tcc-lpkg__bar .btn { flex: 0 0 auto; }
.tcc-lpkg__row { margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(35, 31, 32, 0.3); font-size: 0.9375rem; }
.tcc-lpkg__line { margin-top: var(--s-2); font-size: 0.9375rem; color: var(--ink-muted); }
.tcc-lpkg__row + .tcc-lpkg__line, .tcc-lpkg__bar + .tcc-lpkg__line { margin-top: var(--s-3); }
.tcc-lpkg__group { margin-top: var(--s-3); }
.tcc-lpkg__group .tcc-items { max-width: none; margin-inline: 0; padding-left: 1.1em; list-style: disc; }
.tcc-lpkg__group .tcc-item { display: list-item; padding: 2px 0; border: 0; font-size: 0.9375rem; line-height: 1.5; }
.tcc-lpkg__group .tcc-item:last-child { border: 0; }
.tcc-lpkg__group .tcc-item > * { display: inline; }
.tcc-lpkg__group .tcc-item__price { margin-left: 0.4em; font-weight: 700; }
/* A category of dishes, the same on every menu: its name in bold capitals
   between two rules, as their Buffet sets "MAIN - PROTEIN", then its
   dishes. Heath King, 28 October 2026: "all the pages should have the same
   structure for the categories of dish so it looks uniform". */
.tcc-cat {
  margin: 0 0 var(--s-1);
  padding: 6px 0;
  border-top: 1px solid var(--tcc-ink);
  border-bottom: 1px solid var(--tcc-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tcc-cat + .tcc-items { margin-top: var(--s-2); }
/* The same heading in body type: no capitals, no rules, no weight. Ren
   Burton, 29 October 2026, Italian Buffet: "Something extra is bold, prefer
   the softness of the other fonts". That page lists its dishes as plain
   lines, so the one ruled heading on it read as an error. */
.tcc-cat--soft {
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Delivered Catering's grazing platters: a card each, three across. */
.tcc-plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--s-4), 3vw, var(--s-5)); text-align: left; }
.tcc-plat { padding: var(--s-4); background: var(--tcc-mist); border-radius: var(--tcc-radius); }
.tcc-plat__price { margin-top: var(--s-2); font-weight: 700; }
.tcc-plat .tcc-items { max-width: none; margin: var(--s-2) 0 0; }
.tcc-plat .tcc-item { padding: 8px 0; }
.tcc-plat .tcc-item__name { font-size: 0.9375rem; }
@media (max-width: 900px) { .tcc-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tcc-plats { grid-template-columns: 1fr; } }
.tcc-lpkg--wide { grid-template-columns: 1fr; }
.tcc-lpkg--wide .tcc-lpkg__media { min-height: 0; aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .tcc-lpkg__media { min-height: 0; aspect-ratio: 780 / 500; } }
@media (min-width: 901px) {
  .tcc-lpkg--wide .tcc-lpkg__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(var(--s-5), 4vw, var(--s-7)); }
  .tcc-lpkg--wide .tcc-lpkg__bar,
  .tcc-lpkg--wide .tcc-lpkg__row,
  .tcc-lpkg--wide .tcc-lpkg__line { grid-column: 1 / -1; }
  .tcc-lpkg--wide .tcc-lpkg__body { align-content: start; }
}
@media (max-width: 900px) { .tcc-lpkg { grid-template-columns: 1fr; } }

/* A page opening that uses the width: the copy and its buttons on the
   left, a panel of facts on the right. Heath King, 28 October 2026: "huge
   white space of both sides utilise it". */
.tcc-opening { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(var(--s-5), 5vw, var(--s-7)); align-items: start; text-align: left; }
.tcc-opening__copy > * + * { margin-top: var(--s-3); }
.tcc-opening__copy h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.tcc-opening__copy p { color: var(--ink-muted); line-height: 1.7; }
.tcc-opening__copy .tcc-lede { color: var(--tcc-ink); }
.tcc-opening .hero__actions { justify-content: flex-start; }
.tcc-facts { padding: clamp(var(--s-4), 3vw, var(--s-5)); background: var(--tcc-mist); border-radius: var(--tcc-radius); }
.tcc-facts h3 { font-size: 1.25rem; }
.tcc-facts dl { margin: var(--s-3) 0 0; }
.tcc-facts dl > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-3); padding: 10px 0; border-top: 1px solid rgba(35, 31, 32, 0.15); }
.tcc-facts dt { font-weight: 700; }
.tcc-facts dd { margin: 0; color: var(--ink-muted); }
@media (max-width: 900px) { .tcc-opening { grid-template-columns: 1fr; } .tcc-facts dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* Their "Menu Selections": a card per menu, photograph, name, their blurb. */
.tcc-msels { --msel-gap: clamp(var(--s-4), 3vw, var(--s-5)); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--msel-gap); text-align: left; }
/* Flex rather than grid so a short last row (five cards) sits centred. */
.tcc-msels--2 > .tcc-msel { flex: 0 1 calc((100% - var(--msel-gap)) / 2); }
.tcc-msels--3 > .tcc-msel { flex: 0 1 calc((100% - 2 * var(--msel-gap)) / 3); }
.tcc-msels--4 > .tcc-msel { flex: 0 1 calc((100% - 3 * var(--msel-gap)) / 4); }
.tcc-msel { display: flex; flex-direction: column; gap: var(--s-2); text-decoration: none; color: inherit; }
.tcc-msel__media { display: block; overflow: hidden; border-radius: var(--tcc-radius); aspect-ratio: 4 / 3; background: var(--tcc-mist); }
.tcc-msel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.tcc-msel:hover .tcc-msel__media img { transform: scale(1.04); }
.tcc-msel__title { margin-top: var(--s-2); font-family: var(--font-display); font-size: 1.25rem; }
.tcc-msel__text { color: var(--ink-muted); line-height: 1.6; font-size: 0.9375rem; }
.tcc-msel .link-arrow { margin-top: auto; align-self: flex-start; }
/* Healthy Choices: their menu, every item marked on the traffic light.
   Columns rather than a grid, so short sections and long ones pack. */
.tcc-hc { columns: 3 300px; column-gap: clamp(var(--s-5), 4vw, var(--s-6)); text-align: left; margin-top: var(--s-5); }
.tcc-hc__card { break-inside: avoid; margin-bottom: var(--s-6); }
.tcc-hc__divider { column-span: all; margin: var(--s-4) 0 var(--s-5); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); text-align: center; }
.tcc-hc__meta { margin-top: var(--s-2); font-size: var(--t-small); font-weight: 600; color: var(--tcc-tan-deep); }
.tcc-hc__list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.tcc-hc__list li { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--s-2) var(--s-3); align-items: baseline; }
.tcc-hc__item { display: grid; gap: 2px; }
.tcc-hc__dish { color: var(--tcc-ink); line-height: 1.4; }
.tcc-hc__desc { font-size: 0.875rem; line-height: 1.5; color: var(--ink-muted); }
.tcc-hc__price { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tcc-ink); font-weight: 600; }
.tcc-hc__note { margin-top: var(--s-2); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); }
.tcc-hc__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-1px); }
.tcc-hc__dot--green { background: #4f8a3c; }
.tcc-hc__dot--amber { background: #d99a2b; }
.tcc-hc__dot--red { background: #b5442f; }
/* The traffic-light key at the head of the menu: three short columns. */
.tcc-hc__key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); max-width: 900px; margin: var(--s-5) auto 0; text-align: left; }
.tcc-hc__keyitem { display: grid; grid-template-columns: 14px 1fr; gap: 4px var(--s-2); align-items: start; align-content: start; }
.tcc-hc__keyitem .tcc-hc__dot { width: 12px; height: 12px; margin-top: 8px; transform: none; }
.tcc-hc__keyitem strong { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; color: var(--tcc-ink); }
.tcc-hc__keyitem span:last-child { grid-column: 2; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 700px) { .tcc-hc__key { grid-template-columns: 1fr; max-width: 360px; } }
.tcc-hc__legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--t-small); color: var(--ink-muted); }
.tcc-hc__legend .tcc-hc__dot:not(:first-child) { margin-left: var(--s-4); }

/* The Feed: a post, set for reading. */
.tcc-post { max-width: 720px; margin-inline: auto; text-align: left; }
.tcc-post > p, .tcc-post li { font-size: 1.0625rem; line-height: 1.75; color: var(--tcc-ink); }
.tcc-post > p { margin-top: var(--s-3); }
.tcc-post > p:first-child { font-size: 1.1875rem; color: var(--ink-muted); }
.tcc-post h2 { margin-top: var(--s-6); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; }
.tcc-post h3 { margin-top: var(--s-5); font-size: 1.25rem; }
.tcc-post h4 { margin-top: var(--s-4); font-size: 1.0625rem; }
.tcc-post ul, .tcc-post ol { margin-top: var(--s-3); padding-left: 1.25rem; }
.tcc-post li { margin-top: var(--s-2); }
.tcc-post a { color: var(--tcc-tan-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.tcc-post__figure { margin: var(--s-6) 0; }
.tcc-post__figure img { width: 100%; height: auto; border-radius: var(--tcc-radius); }
.tcc-post__table { margin-top: var(--s-4); overflow-x: auto; }
.tcc-post__table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tcc-post__table th, .tcc-post__table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--tcc-tan); text-align: left; vertical-align: top; }
.tcc-post__table th { font-weight: 600; color: var(--tcc-ink); }
.tcc-post__by { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--tcc-tan); font-size: var(--t-small); color: var(--ink-muted); }
.tcc-post__date { font-size: var(--t-small); color: var(--tcc-tan-deep); margin-top: var(--s-2); }

/* A taste of the menu: a few real dishes per course, in columns. */
.tcc-taste { display: grid; gap: clamp(var(--s-5), 4vw, var(--s-6)); text-align: left; }
.tcc-taste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcc-taste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcc-taste__list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.tcc-taste__list li { display: grid; gap: 4px; }
.tcc-taste__dish { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.3; color: var(--tcc-ink); }
.tcc-taste__desc { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); }
.tcc-taste__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
@media (max-width: 900px) { .tcc-taste--3 { grid-template-columns: 1fr; } }

/* Their reviews: one at a time, in large type. Heath King, 28 October
   2026: "the testimonials on each page need a lot of work". */
.tcc-rv { position: relative; max-width: 880px; margin-inline: auto; text-align: center; }
.tcc-rv::before {
  content: '\201C';
  display: block;
  height: 0.5em;
  font-family: Georgia, 'Times New Roman', serif;   /* the display face draws it as two slashes */
  font-size: clamp(4.5rem, 7vw, 6.5rem);
  line-height: 1;
  color: var(--tcc-tan-deep);
}
.tcc-rv__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tcc-rv__track::-webkit-scrollbar { display: none; }
.tcc-rv__track:focus-visible { outline: 2px solid var(--tcc-tan-deep); outline-offset: 6px; border-radius: var(--tcc-radius); }
.tcc-rv__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  padding: var(--s-3) var(--s-2) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tcc-rv__quote { margin: 0; }
.tcc-rv__quote p {
  max-width: 48ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
  line-height: 1.55;
  color: var(--tcc-ink);
  text-wrap: pretty;
}
.tcc-rv__name {
  margin-top: var(--s-4);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tcc-tan-deep);
}
.tcc-rv__name::before { content: ''; display: block; width: 32px; height: 1px; margin: 0 auto var(--s-3); background: currentColor; }
.tcc-rv__nav { display: none; }
.tcc-rv.is-ready .tcc-rv__nav { display: flex; justify-content: center; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.tcc-rv__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tcc-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--tcc-ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tcc-rv__btn:hover, .tcc-rv__btn:focus-visible { background: var(--tcc-ink); color: var(--white); }
.tcc-rv__count { min-width: 5ch; font-size: var(--t-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* Reviews three across. Ren Burton, 10 November 2026: "they just seem to take
   up a lot of space", "maybe even three testimonials up". The same band,
   the reviews side by side in smaller type, no arrows. */
.tcc-rvgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s-4), 3vw, var(--s-6));
  text-align: center;
}
.tcc-rvgrid__item { margin: 0; display: flex; flex-direction: column; align-items: center; }
.tcc-rvgrid__item::before {
  content: '\201C';
  display: block;
  height: 0.5em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3rem, 4vw, 4rem);
  line-height: 1;
  margin-bottom: var(--s-2);
  color: var(--tcc-tan-deep);
}
.tcc-rvgrid__quote { margin: 0; }
.tcc-rvgrid__quote p {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tcc-ink);
  text-wrap: pretty;
}
.tcc-rvgrid__quote p + p { margin-top: var(--s-2); }
.tcc-rvgrid__name {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tcc-tan-deep);
}
.tcc-rvgrid__name::before { content: ''; display: block; width: 32px; height: 1px; margin: 0 auto var(--s-2); background: currentColor; }
@media (max-width: 900px) {
  .tcc-rvgrid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
}
.tcc-band--white .tcc-review { background: var(--tcc-mist); }
.tcc-review p { color: var(--tcc-ink); line-height: 1.7; }
@media (max-width: 900px) { .tcc-msels--3 > .tcc-msel, .tcc-msels--4 > .tcc-msel { flex-basis: calc((100% - var(--msel-gap)) / 2); } }
@media (max-width: 560px) { .tcc-msels > .tcc-msel { flex-basis: 100%; } }

/* Their questions and answers, after the menu: a card each, so "How much
   food is the right amount?" reads as a question with its answer rather
   than as one more centred paragraph. */
.tcc-qas { display: grid; gap: clamp(var(--s-4), 3vw, var(--s-5)); text-align: left; }
.tcc-qas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcc-qas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcc-qa { padding: clamp(var(--s-4), 3vw, var(--s-5)); background: var(--white); border-radius: var(--tcc-radius); }
.tcc-band--white .tcc-qa { background: var(--tcc-mist); }
.tcc-qa__q { font-size: 1.25rem; line-height: 1.3; }
.tcc-qa p { margin-top: var(--s-3); color: var(--ink-muted); line-height: 1.65; }
.tcc-qa .tcc-list { margin-top: var(--s-3); }
@media (max-width: 900px) { .tcc-qas--2, .tcc-qas--3 { grid-template-columns: 1fr; } }

/* Their page copy under the menu, centred as theirs is. */
.tcc-lcopy { max-width: 58rem; margin-inline: auto; text-align: center; }
.tcc-lcopy h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.tcc-lcopy h3 { margin-top: var(--s-5); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.tcc-lcopy p { margin-top: var(--s-3); color: var(--ink-muted); line-height: 1.7; }
.tcc-lcopy .tcc-lcopy__plus { margin-top: var(--s-2); }
.tcc-package .tcc-item { padding: 11px 0; }

/* A package laid out like the finger food page: photograph above, the dish
   list the full width of the container and in two columns. Buffet only --
   Ren Burton, 28 October 2026: "I also prefer the two columns, like the
   finger food page. Too much scrolling." Its one real package is thirty-four
   dishes in five groups, which beside a 4:3 photograph is three screens of
   single column under a picture that ends on the first. The columns and the
   closing hairline follow .tcc-menu-group's priced lists above, so the two
   pages she is comparing are built from the same rules. See WIDE_PACKAGES. */
.tcc-package--wide { grid-template-columns: 1fr; align-items: start; }
.tcc-package--wide .tcc-package__media { order: 0; }
.tcc-package--wide .tcc-package__media img { aspect-ratio: 21 / 9; }
@media (min-width: 901px) {
  .tcc-package--wide .tcc-items {
    column-count: 2;
    column-gap: clamp(var(--s-5), 4vw, var(--s-7));
  }
  .tcc-package--wide .tcc-item { break-inside: avoid; }
  .tcc-package--wide .tcc-item:last-child { border-bottom: 1px solid rgba(35, 31, 32, 0.3); }
}

/* A course or component heading inside a package -- "Mains, select 3" -- and
   the same label above a priced list on the canape and finger food pages.
   The client's menus are grouped, and a flat list of forty items reads as
   one undifferentiated wall. */
.tcc-menu-label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tcc-tan-deep);
}
.tcc-package__body .tcc-menu-label { margin-top: var(--s-4); }
.tcc-package__body .tcc-menu-label + .tcc-items { margin-top: calc(var(--s-2) * -1); }
.tcc-menu-group + .tcc-menu-group { margin-top: var(--s-5); }
.tcc-menu-group .tcc-menu-label + .tcc-items { margin-top: var(--s-2); }

/* A photograph above a priced group.
   Client, 15 October 2026, on Canapes: "Also missing image boxes". Menus
   priced by the piece have no packages, and the packages are where every
   other menu carries its photographs -- so Canapes and Finger Food arrived
   with the hero and then several screens of type.

   Above the list rather than beside it, because the same email asked for the
   long menus to run in two columns and that is this group's own list. The
   crop is the page hero's 21:9, so a band image reads as one of the site's
   own rather than as a new shape. */
.tcc-menu-group--media + .tcc-menu-group--media { margin-top: var(--s-6); }
.tcc-menu-group__media {
  overflow: hidden;
  margin-bottom: var(--s-4);
  border-radius: var(--tcc-radius);
  background: var(--tcc-mist);
}
.tcc-menu-group__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }


/* --- Accordion ------------------------------------------------------------
   Built on <details>, so it opens without JavaScript, is keyboard
   accessible, and survives Find-in-page. */

.tcc-acc-set { max-width: 820px; margin-inline: auto; }
.tcc-acc { border-top: 1px solid rgba(35, 31, 32, 0.18); }
.tcc-acc:last-child { border-bottom: 1px solid rgba(35, 31, 32, 0.18); }

.tcc-acc__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--tcc-dw);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
}
.tcc-acc__summary::-webkit-details-marker { display: none; }
.tcc-acc__summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--tcc-tan-deep);
  border-bottom: 2px solid var(--tcc-tan-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms var(--ease);
}
.tcc-acc[open] .tcc-acc__summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.tcc-acc__summary:focus-visible { outline: 2px solid var(--tcc-tan-deep); outline-offset: 3px; }

.tcc-acc__body { padding-bottom: var(--s-4); }
.tcc-acc__body .tcc-items { max-width: none; margin-inline: 0; }

@media (prefers-reduced-motion: reduce) {
  .tcc-acc__summary::after { transition: none; }
}

@media (max-width: 900px) {
  .tcc-package { grid-template-columns: 1fr; gap: var(--s-4); }
  .tcc-package--flip .tcc-package__media { order: 0; }
  .tcc-package + .tcc-package { margin-top: var(--s-6); }
}


/* --- Download panel ------------------------------------------------------
   "We have different prices/packages for all our venues. Rather than the
   tiles. Can we have an enquiry form, to download the pdfs for each venue."
   One form, gated on an email address, that returns that venue's PDF. */

.tcc-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-4), 4vw, var(--s-6));
  align-items: center;
  padding: clamp(var(--s-4), 3.5vw, var(--s-6));
  border: 1px solid var(--tcc-grey);
  border-radius: var(--tcc-radius);
  background: var(--white);
  text-align: left;
}
.tcc-download__body > * + * { margin-top: var(--s-3); }
.tcc-download__body p { color: var(--ink-muted); line-height: 1.7; }
.tcc-download__list { list-style: none; display: grid; gap: 6px; margin-top: var(--s-3); }
.tcc-download__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.tcc-download__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 9px; height: 1px;
  background: var(--tcc-tan);
}
.tcc-download .tcc-form { max-width: none; gap: var(--s-2); }
.tcc-download .tcc-note { text-align: left; color: var(--ink-muted); }

@media (max-width: 900px) {
  .tcc-download { grid-template-columns: 1fr; }
}

/* Long words cannot push the page sideways.
   -------------------------------------------------------------------------
   Headings and the small eyebrow labels are edited in WordPress, so one day
   someone will paste a web address or a run-on name into one. Without this
   the word overflows, the heading is clipped and the whole page gains a
   horizontal scrollbar on a phone. break-word only acts when a word will not
   fit, and does not change how any existing line wraps. */
:is(.tcc, .editor-styles-wrapper) h1, :is(.tcc, .editor-styles-wrapper) h2, :is(.tcc, .editor-styles-wrapper) h3,
:is(.tcc, .editor-styles-wrapper) .tcc-eyebrow,
:is(.tcc, .editor-styles-wrapper) .tcc-card__label {
  overflow-wrap: break-word;
}


/* =========================================================================
   Texture, not colour. Tried as a fork on 28 October 2026 and approved by
   Ren Burton the same day ("adds something a little bit extra too, rather
   than just like the block"). The washed photograph behind the reviews was
   the one part of the fork not taken: "this is a background photo, I don't
   really like that".
   ========================================================================= */

/* A faint paper grain: an SVG noise tile. */
:is(.tcc, .editor-styles-wrapper) {
  --tcc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.18  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* The grey grounds: grain, and a gentle fade so the edges are soft. */
.tcc-band--cream,
.tcc-band--tint {
  background-color: #EFEDEA;
  background-image: var(--tcc-grain), linear-gradient(180deg, #F6F5F3 0%, #ECEAE6 100%);
}

/* Two white sections in a row: a fine tan rule with a small diamond. */
.tcc-band--white + .tcc-band--white { position: relative; }
.tcc-band--white + .tcc-band--white::before,
.tcc-band--white + .tcc-band--white::after { content: ''; position: absolute; top: 0; left: 50%; }
.tcc-band--white + .tcc-band--white::before {
  width: min(320px, 40%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(153, 99, 63, .55), transparent);
}
.tcc-band--white + .tcc-band--white::after {
  width: 7px;
  height: 7px;
  transform: translate(-50%, -3px) rotate(45deg);
  background: var(--white);
  border: 1px solid rgba(153, 99, 63, .7);
}

/* Photographs beside text: a fine tan frame line, offset behind. */
:is(.tcc, .editor-styles-wrapper) .split__media { overflow: visible; position: relative; }
:is(.tcc, .editor-styles-wrapper) .split__media img { border-radius: var(--tcc-radius); position: relative; z-index: 1; }
:is(.tcc, .editor-styles-wrapper) .split__media::after {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid rgba(153, 99, 63, .45);
  border-radius: var(--tcc-radius);
  z-index: 0;
  pointer-events: none;
}
:is(.tcc, .editor-styles-wrapper) .split--reverse .split__media::after { inset: 16px 16px -16px -16px; }
:is(.tcc, .editor-styles-wrapper) .split { padding-bottom: 16px; }
@media (max-width: 900px) {
  :is(.tcc, .editor-styles-wrapper) .split__media::after, :is(.tcc, .editor-styles-wrapper) .split--reverse .split__media::after { inset: 10px -10px -10px 10px; }
}

/* Photographs and tables inside long writing: the blog posts brought across
   from the old site on 11 November 2026. WordPress's own block styles are
   switched off, so the spacing and the table rules are ours. */
:is(.tcc, .editor-styles-wrapper) .measure figure { margin: var(--s-5) 0; }
:is(.tcc, .editor-styles-wrapper) .measure figure img { display: block; width: 100%; height: auto; border-radius: var(--tcc-radius); }
:is(.tcc, .editor-styles-wrapper) .measure figure table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.55; }
:is(.tcc, .editor-styles-wrapper) .measure figure th,
:is(.tcc, .editor-styles-wrapper) .measure figure td { padding: var(--s-2) var(--s-3); border: 1px solid rgba(35, 31, 32, 0.22); text-align: left; vertical-align: top; }
:is(.tcc, .editor-styles-wrapper) .measure figure th { font-weight: 700; background: var(--tcc-mist); }
:is(.tcc, .editor-styles-wrapper) .measure blockquote { margin: var(--s-5) 0; padding-left: var(--s-4); border-left: 2px solid var(--tcc-tan); }