/* ============================================================
   Two Goose Market & Barbecue — Design Tokens
   Import once, anywhere:  @import url("./colors_and_type.css");

   Naming convention: --tg-{group}-{token}
   Semantic tokens map to base tokens below.
   ============================================================ */

/* Google Fonts (production: prefer to self-host into /fonts) */
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ============================================================
     OFFICIAL TWO GOOSE BRAND PALETTE (Brand Guideline Sheet)
       Butter      #FFFDC2   homey foundation / page bg
       Fire        #C01A2D   primary red
       Cherry Cola #820300   deep red, pressed / hover
       Barbecue    #330000   darkest — dark sections + ink
       Blueberry   #4170DC   fresh contrast accent (sparing)
       Ice Water   #DCF6FF   light fresh accent (sparing)
       Smoke       #FDFDF0   near-white card surface
     Existing token names are kept as aliases below so every
     page recolors to brand without markup changes.
     ============================================================ */

  /* --- Brand: named tokens ---------------------------------- */
  --tg-butter: #FFFDC2;
  --tg-butter-deep: #F4EE9E;     /* deeper butter for alt sections */
  --tg-fire: #C01A2D;
  --tg-cherry: #820300;
  --tg-barbecue: #330000;
  --tg-blueberry: #4170DC;
  --tg-blueberry-deep: #2F55B2;  /* small blue text — passes AA on butter */
  --tg-icewater: #DCF6FF;
  --tg-smokewhite: #FDFDF0;

  /* --- Color: brand red family (semantic names kept) -------- */
  --tg-brisket: var(--tg-fire);         /* primary red */
  --tg-brisket-deep: var(--tg-cherry);  /* pressed / hover */
  --tg-brisket-soft: #E8A19A;           /* soft fire tint, on dark only */

  /* --- Color: surfaces -------------------------------------- */
  --tg-cream: var(--tg-butter);         /* default page bg */
  --tg-cream-deep: var(--tg-butter-deep);/* alt sections, sidebars */
  --tg-paper: var(--tg-smokewhite);     /* cards on butter */
  --tg-bone: #E2D98C;                   /* hairline borders on butter */

  /* --- Color: ink (warm, anchored to Barbecue) -------------- */
  --tg-char: var(--tg-barbecue);        /* primary text + dark sections */
  --tg-smoke: #5E3A35;                  /* secondary text */
  --tg-ash: #79615B;                    /* tertiary text, dividers */
  --tg-fog: #C2AFA9;                    /* placeholder, disabled */

  /* --- Color: accents (very sparing) ------------------------ */
  --tg-mustard: var(--tg-blueberry);    /* retired gold → blueberry */
  --tg-pickle: var(--tg-blueberry);     /* retired green → blueberry */

  /* --- Color: semantic -------------------------------------- */
  --tg-success: var(--tg-blueberry);
  --tg-warning: var(--tg-fire);
  --tg-danger: var(--tg-fire);

  /* --- Type: families --------------------------------------- */
  --tg-font-display: "new-spirit", "Domine", "Source Serif 4", Georgia, serif;
  --tg-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tg-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type: scale (mobile-first; sized in rem) ------------- */
  --tg-text-xs: 0.75rem;    /* 12px */
  --tg-text-sm: 0.875rem;   /* 14px */
  --tg-text-base: 1rem;     /* 16px */
  --tg-text-md: 1.125rem;   /* 18px */
  --tg-text-lg: 1.375rem;   /* 22px */
  --tg-text-xl: 1.75rem;    /* 28px */
  --tg-text-2xl: 2.25rem;   /* 36px */
  --tg-text-3xl: 3rem;      /* 48px */
  --tg-text-4xl: 4rem;      /* 64px */
  --tg-text-5xl: 5.25rem;   /* 84px — hero only */

  /* --- Type: line-height ------------------------------------ */
  --tg-leading-tight: 1.05;
  --tg-leading-snug: 1.2;
  --tg-leading-normal: 1.45;
  --tg-leading-loose: 1.65;

  /* --- Type: letter-spacing --------------------------------- */
  --tg-tracking-display: -0.015em;
  --tg-tracking-body: 0;
  --tg-tracking-eyebrow: 0.16em;   /* ALL-CAPS labels  */
  --tg-tracking-mono: 0.02em;

  /* --- Spacing (8-pt baseline) ------------------------------ */
  --tg-space-1: 4px;
  --tg-space-2: 8px;
  --tg-space-3: 16px;
  --tg-space-4: 24px;
  --tg-space-5: 32px;
  --tg-space-6: 48px;
  --tg-space-7: 64px;
  --tg-space-8: 96px;
  --tg-space-9: 128px;

  /* --- Radii ------------------------------------------------ */
  --tg-radius-sm: 2px;
  --tg-radius-md: 4px;
  --tg-radius-lg: 8px;
  --tg-radius-pill: 999px;       /* small chips only */

  /* --- Borders ---------------------------------------------- */
  --tg-border-hair: 1px solid var(--tg-bone);
  --tg-border-strong: 1px solid var(--tg-char);
  --tg-border-red: 1px solid var(--tg-brisket);

  /* --- Shadows (used sparingly) ----------------------------- */
  --tg-shadow-card: 0 1px 2px rgba(51,0,0,0.07), 0 12px 28px -16px rgba(51,0,0,0.20);
  --tg-shadow-sticker: 4px 4px 0 0 var(--tg-brisket-deep);  /* goose callout */

  /* --- Layout ---------------------------------------------- */
  --tg-container-max: 1240px;
  --tg-gutter-mobile: 24px;
  --tg-gutter-desktop: 64px;

  /* --- Motion ---------------------------------------------- */
  --tg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tg-dur-fast: 180ms;
  --tg-dur: 240ms;
  --tg-dur-slow: 600ms;
}

/* ============================================================
   Semantic / role tokens — refer to these in components.
   ============================================================ */
:root {
  --tg-bg: var(--tg-cream);
  --tg-bg-alt: var(--tg-cream-deep);
  --tg-bg-card: var(--tg-paper);
  --tg-fg: var(--tg-char);
  --tg-fg-muted: var(--tg-smoke);
  --tg-fg-subtle: var(--tg-ash);
  --tg-fg-on-brisket: var(--tg-cream);
  --tg-accent: var(--tg-brisket);
  --tg-accent-hover: var(--tg-brisket-deep);
  --tg-divider: var(--tg-bone);
}

/* ============================================================
   Base element styles — opt in by importing this CSS.
   Wrap content in .tg-prose to scope these styles only.
   ============================================================ */

.tg-prose, .tg-base {
  font-family: var(--tg-font-body);
  font-size: var(--tg-text-base);
  line-height: var(--tg-leading-normal);
  color: var(--tg-fg);
  background: var(--tg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tg-prose h1, .tg-h1 {
  font-family: var(--tg-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw + 1rem, var(--tg-text-5xl));
  line-height: var(--tg-leading-tight);
  letter-spacing: var(--tg-tracking-display);
  color: var(--tg-fg);
  text-wrap: balance;
}

.tg-prose h2, .tg-h2 {
  font-family: var(--tg-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw + 0.5rem, var(--tg-text-3xl));
  line-height: var(--tg-leading-snug);
  letter-spacing: var(--tg-tracking-display);
  text-wrap: balance;
}

.tg-prose h3, .tg-h3 {
  font-family: var(--tg-font-display);
  font-weight: 600;
  font-size: var(--tg-text-xl);
  line-height: var(--tg-leading-snug);
}

.tg-prose p, .tg-body {
  font-family: var(--tg-font-body);
  font-size: var(--tg-text-base);
  line-height: var(--tg-leading-normal);
  color: var(--tg-fg);
  text-wrap: pretty;
  max-width: 68ch;
}

.tg-eyebrow {
  font-family: var(--tg-font-mono);
  font-weight: 500;
  font-size: var(--tg-text-xs);
  letter-spacing: var(--tg-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tg-brisket);
}

.tg-price, .tg-mono {
  font-family: var(--tg-font-mono);
  font-weight: 500;
  letter-spacing: var(--tg-tracking-mono);
  font-variant-numeric: tabular-nums;
}

.tg-caption {
  font-family: var(--tg-font-body);
  font-size: var(--tg-text-sm);
  color: var(--tg-fg-muted);
  line-height: var(--tg-leading-normal);
}

/* Logo-script vibe (use ONLY when wordmark image isn't usable; rarely) */
.tg-script {
  font-family: "Lobster Two", "Pacifico", cursive;  /* fallback approximation */
  font-style: italic;
  font-weight: 700;
}


/* ===== COMPONENT CSS ===== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--tg-cream);
  color: var(--tg-char);
  font-family: var(--tg-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ----------- Layout ----------- */
.tg-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 900px) { .tg-container { padding: 0 56px; } }

.tg-section { padding: 56px 0; }
@media (min-width: 900px) { .tg-section { padding: 96px 0; } }

.tg-section--cream-deep { background: var(--tg-cream-deep); }
.tg-section--char { background: var(--tg-char); color: var(--tg-cream); }
.tg-section--char .tg-eyebrow { color: var(--tg-brisket-soft); }

/* ----------- Type helpers ----------- */
.tg-eyebrow {
  font-family: var(--tg-font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tg-brisket);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tg-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.tg-eyebrow.no-rule::before { display: none; }

.tg-h1 {
  font-family: var(--tg-font-display);
  font-size: clamp(2.4rem, 5vw + 1rem, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
  color: var(--tg-char);
}
.tg-h2 {
  font-family: var(--tg-font-display);
  font-size: clamp(1.875rem, 3.2vw + 0.6rem, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0;
}
.tg-h3 {
  font-family: var(--tg-font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
}
.tg-lead {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--tg-smoke);
  text-wrap: pretty;
  max-width: 60ch;
}
.tg-meta {
  font-family: var(--tg-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tg-ash);
  text-transform: uppercase;
}

/* ----------- Buttons ----------- */
.tg-btn {
  font-family: var(--tg-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 220ms var(--tg-ease), color 220ms var(--tg-ease), transform 120ms var(--tg-ease);
  text-decoration: none;
  white-space: nowrap;
}
.tg-btn:active { transform: translateY(1px); }
.tg-btn--primary { background: var(--tg-brisket); color: var(--tg-cream); }
.tg-btn--primary:hover { background: var(--tg-brisket-deep); }
.tg-btn--secondary { background: transparent; color: inherit; border-color: currentColor; }
.tg-btn--secondary:hover { background: var(--tg-char); color: var(--tg-cream); }
.tg-section--char .tg-btn--secondary:hover { background: var(--tg-cream); color: var(--tg-char); }
.tg-btn--ghost {
  background: transparent; color: inherit; border: none; border-bottom: 1px solid currentColor; border-radius: 0;
  padding: 4px 0; font-weight: 600;
}
.tg-btn--ghost:hover { color: var(--tg-brisket); }

/* ----------- Image plate (no real images) ----------- */
.tg-image {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #4a1a0d 0%, #b1542a 45%, #d68549 65%, #6b2014 100%);
  color: var(--tg-cream);
  border-radius: 4px;
}
.tg-image::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,240,200,0.18), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.28), transparent 55%);
  pointer-events: none;
}
.tg-image > .tg-image__noise {
  position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
}
.tg-image > .tg-image__label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--tg-font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85;
  z-index: 2;
}

.tg-image--breakfast { background: linear-gradient(135deg, #2b1a08 0%, #a6691c 35%, #e6ad4a 60%, #5a2c12 100%); }
.tg-image--smoker    { background: linear-gradient(135deg, #16110d 0%, #3e2a1c 50%, #1f1410 100%); }
.tg-image--sausage   { background: linear-gradient(135deg, #4d1f12 0%, #9a3a23 50%, #c45a35 80%, #491d10 100%); }
.tg-image--bar       { background: linear-gradient(135deg, #1c160f 0%, #5c3a1a 50%, #2a1c10 100%); }
.tg-image--paper-tag { background: linear-gradient(135deg, #c2a06a 0%, #e7c98b 60%, #a47842 100%); color: var(--tg-char); }

/* ----------- Cards ----------- */
.tg-card {
  background: var(--tg-paper);
  border: 1px solid var(--tg-bone);
  border-radius: 4px;
  padding: 24px;
}
@media (min-width: 700px) { .tg-card { padding: 32px; } }

/* ----------- Goose callout sticker ----------- */
.tg-sticker {
  width: 124px; height: 124px;
  background: var(--tg-brisket);
  border-radius: 999px;
  box-shadow: 4px 4px 0 0 var(--tg-brisket-deep);
  color: var(--tg-cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px;
  font-family: var(--tg-font-display); font-weight: 700; line-height: 1.05;
  transform: rotate(-6deg);
}
.tg-sticker__sub { font-family: var(--tg-font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.9; margin-top: 4px; }

/* ----------- Tag/Chip ----------- */
.tg-tag {
  font-family: var(--tg-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-block;
}
.tg-tag--brisket { background: var(--tg-brisket); color: var(--tg-cream); }
.tg-tag--fresh { background: var(--tg-icewater); color: var(--tg-blueberry-deep); }
.tg-tag--breakfast { background: rgba(192,26,45,0.10); color: var(--tg-fire); }
.tg-tag--outline { border: 1px solid var(--tg-bone); color: var(--tg-smoke); }
.tg-tag--char { background: var(--tg-char); color: var(--tg-cream); }
.tg-tag--blue { background: var(--tg-blueberry); color: var(--tg-smokewhite); }

/* ----------- Menu row ----------- */
.tg-menu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 24px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--tg-bone);
}
.tg-menu-row:last-child { border-bottom: none; }
.tg-menu-row__name { font-family: var(--tg-font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--tg-char); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tg-menu-row__desc { font-size: 14px; color: var(--tg-smoke); margin-top: 4px; max-width: 56ch; }
.tg-menu-row__price { font-family: var(--tg-font-mono); font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tg-char); text-align: right; align-self: start; padding-top: 4px; }

/* ----------- Inputs ----------- */
.tg-input, .tg-select, .tg-textarea {
  font-family: var(--tg-font-body); font-size: 15px;
  padding: 12px 14px;
  background: var(--tg-paper);
  border: 1px solid var(--tg-bone);
  border-radius: 4px;
  color: var(--tg-char);
  width: 100%;
  appearance: none;
}
.tg-input:focus, .tg-select:focus, .tg-textarea:focus {
  outline: 2px solid rgba(192,26,45,0.20); outline-offset: 0; border-color: var(--tg-brisket);
}
.tg-label {
  font-family: var(--tg-font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tg-smoke);
  display: block; margin-bottom: 6px;
}

/* ----------- Header ----------- */
.tg-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 253, 194, 0.94);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--tg-bone);
}
.tg-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.tg-header__logo { height: 56px; cursor: pointer; }
.tg-header__nav { display: none; }
@media (min-width: 900px) {
  .tg-header__nav { display: flex; gap: 28px; }
}
.tg-header__nav a {
  font-family: var(--tg-font-body); font-size: 15px; font-weight: 500;
  text-decoration: none; color: var(--tg-char); cursor: pointer;
  padding-bottom: 4px; border-bottom: 2px solid transparent;
  transition: border-color 220ms var(--tg-ease), color 220ms var(--tg-ease);
}
.tg-header__nav a:hover { color: var(--tg-brisket); }
.tg-header__nav a.is-active { border-bottom-color: var(--tg-brisket); }
.tg-header__cta { display: none; }
@media (min-width: 720px) { .tg-header__cta { display: inline-flex; } }
.tg-header__burger { background: none; border: 1px solid var(--tg-char); border-radius: 4px; padding: 8px 10px; font-family: var(--tg-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
@media (min-width: 900px) { .tg-header__burger { display: none; } }

/* ----------- Footer ----------- */
.tg-footer { background: var(--tg-char); color: var(--tg-cream); padding: 64px 0 32px; }
.tg-footer__top { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tg-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; } }
.tg-footer h4 { font-family: var(--tg-font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tg-brisket-soft); margin: 0 0 14px; font-weight: 500; }
.tg-footer a { color: var(--tg-cream); text-decoration: none; display: block; padding: 4px 0; font-size: 14px; }
.tg-footer a:hover { color: var(--tg-brisket-soft); }
.tg-footer__legal {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(244,236,216,0.18);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--tg-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tg-ash);
}
.tg-footer__taglines { display: flex; gap: 18px; flex-wrap: wrap; }

/* ----------- Mobile menu ----------- */
.tg-mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--tg-cream);
  display: flex; flex-direction: column; padding: 24px 28px;
  overflow-y: auto;
}
.tg-mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
.tg-mobile-menu__nav { display: flex; flex-direction: column; gap: 8px; margin-top: 40px; }
.tg-mobile-menu__nav a { font-family: var(--tg-font-display); font-size: 36px; font-weight: 700; color: var(--tg-char); cursor: pointer; padding: 6px 0; }
.tg-mobile-menu__nav a.is-active { color: var(--tg-brisket); }

/* ----------- Press strip ----------- */
.tg-press-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px; padding: 24px 0; }
.tg-press-strip__item { font-family: var(--tg-font-display); font-weight: 700; font-size: 22px; color: var(--tg-char); }
.tg-press-strip__item small { font-family: var(--tg-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tg-ash); display: block; margin-top: 2px; }
a.tg-press-strip__item { text-decoration: none; transition: color var(--tg-dur) var(--tg-ease); }
a.tg-press-strip__item:hover { color: var(--tg-fire); }

/* Instagram CTA band (home) */
.tg-ig-cta { background: var(--tg-fire); }
.tg-ig-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.tg-ig-cta__eyebrow { color: var(--tg-butter); opacity: 0.85; }
.tg-ig-cta__title { color: var(--tg-butter); margin-top: 14px; }
.tg-ig-cta__sub { color: var(--tg-butter); opacity: 0.92; margin-top: 12px; max-width: 48ch; font-size: 1.05rem; line-height: 1.5; }
.tg-ig-cta__sub strong { font-weight: 700; }
.tg-ig-cta__btn { background: var(--tg-butter); color: var(--tg-fire); border: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.tg-ig-cta__btn:hover { background: var(--tg-smokewhite); color: var(--tg-cherry); }
.tg-ig-cta__btn svg { width: 20px; height: 20px; }

/* Instagram follow pill (footer) */
.tg-footer-ig { display: flex; width: fit-content; align-items: center; gap: 10px; margin-top: 20px; font-family: var(--tg-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tg-butter); text-decoration: none; padding: 10px 16px; border: 1px solid rgba(255,253,194,0.4); border-radius: 999px; transition: background var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease); }
.tg-footer-ig:hover { background: var(--tg-butter); color: var(--tg-barbecue); border-color: var(--tg-butter); }
.tg-footer-ig svg { width: 18px; height: 18px; }

/* ----------- Utility ----------- */
.tg-hr { border: 0; border-top: 1px solid var(--tg-bone); margin: 0; }
.tg-hr--strong { border-top-color: var(--tg-char); }

/* Fix: hidden attribute must override display:flex on mobile menu */
.tg-mobile-menu[hidden] { display: none !important; }
/* Fix: header burger only shows on mobile (design system intent) */
@media (min-width: 900px) { #burger { display: none; } }


/* ===== HOME PAGE LAYOUTS — desktop two-column ===== */
@media (min-width: 900px) {
  .tg-hero-grid {
    grid-template-columns: 6fr 5fr !important;
    gap: 64px !important;
    align-items: center !important;
  }
  .tg-breakfast-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 64px !important;
    align-items: center !important;
  }
  .tg-cater-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 64px !important;
  }
  .tg-visit-short {
    grid-template-columns: 1fr 1fr !important;
    gap: 64px !important;
    align-items: center !important;
  }
}

/* Slightly tighter image presentation when real photos are in */
.tg-image,
figure.tg-image {
  border-radius: 4px;
  box-shadow: 0 14px 32px -16px rgba(51, 0, 0, 0.35);
}

/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */
@media (max-width: 899px) {
  /* Stop grid/flex children from forcing horizontal overflow */
  .tg-hero-grid > *, .tg-breakfast-grid > *, .tg-cater-grid > *,
  .tg-visit-short > *, .tg-menu-row > *, .tg-ig-cta__inner > * { min-width: 0; }

  /* Images fill their column rather than forcing intrinsic width */
  figure.tg-image { width: 100% !important; }
  img { max-width: 100%; }

  /* Catering form: stack the two-up field rows */
  .tg-form-row { grid-template-columns: 1fr !important; }
}

/* Press strip: tidy 2-column grid on small phones */
@media (max-width: 560px) {
  .tg-press-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .tg-press-strip__item { font-size: 19px; }
}

/* ===================================================================
   Instagram glyph rendered from the stylesheet (mask) instead of inline
   HTML, so the icon updates with the CSS and is not affected by cached
   page markup. One mask, tinted by currentColor (cream in footer,
   fire on the IG band button).
   =================================================================== */
.tg-footer-ig svg, .tg-ig-cta__btn svg { display: none; }
.tg-footer-ig::before, .tg-ig-cta__btn::before {
  content: "";
  display: block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%226%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%226.5%22%20r%3D%221.6%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%226%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%226.5%22%20r%3D%221.6%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.tg-footer-ig::before { width: 18px; height: 18px; }
.tg-ig-cta__btn::before { width: 20px; height: 20px; }

/* Footer Instagram pill removed; hide it via CSS too so cached page markup can't show it */
.tg-footer-ig { display: none !important; }