/* ---------- kota — a Soweto kota counter on bone paper ----------
   THE STRUCTURAL MOVE IS WELDING. The headless four-tile photographic row is
   taken full-bleed, stripped of every gutter and hairline and pushed flush
   against the floor of the full-viewport stage, with its labels lying ON the
   pictures rather than under them — so the second screen carries photographs
   and four words and nothing else. The menu repeats the trick contained: a
   3 x 2 wall of priced tiles butted edge to edge, held apart only by a 1px
   line showing through the gap. The two strips are told apart honestly, by
   whether a heading printed — :not(:has(.sc-h2)) is the welded row at the
   top, :has(.sc-h2) is the branch row near the foot — never by position.
   Charcoal grounds appear exactly twice, at the stage and at the band; the
   atchar orange is spent only on prices, the stage button and the submit and
   never fills a background, which is what keeps a takeaway page off the wall
   of a franchise. */
body.t-kota {
  background: #f3ede2;
  color: #3a352d;
  --kt-orange: #c94f06;
  --kt-coal: #17140f;
  --bg-flat: #f3ede2;
  --surface: #faf6ee;
  --surface-2: #eae2d4;
  --line: #ded5c6;
  --line-strong: #c6bba7;
  --heading: #17140f;
  --text: #3a352d;
  --muted: #7c756a;
  --header-bg: #f3ede2;
  --radius: 0;
  --shadow: none;
}

/* bone bar, flat and unblurred, the name set like a board above a counter */
body.t-kota .sf-header, body.t-kota .sf-head,
body.t-kota .sf-footer, body.t-kota .sf-foot, body.t-kota .sf-cats {
  background: #f3ede2; border-color: #ded5c6;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kota .sf-name { font-weight: 800; font-size: 21px; letter-spacing: 0.08em; text-transform: uppercase; }

/* on the landing page only, the bar lies over the first slide and scrolls
   away with it, so the fold is a photograph and one line. Never on a product
   page, where near-white ink on bone paper would disappear. */
body.t-kota:has(.sc-hero) .sf-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom-color: transparent; }
body.t-kota:has(.sc-hero) .sf-name, body.t-kota:has(.sc-hero) .sf-header .sf-cart,
body.t-kota:has(.sc-hero) .sf-searchbtn, body.t-kota:has(.sc-hero) .sf-header .theme-toggle,
body.t-kota:has(.sc-hero) .sf-makeyours { color: #fff8f0; }

/* the only orange slab on the page, and it goes coal when you touch it */
body.t-kota .btn.brand { background: var(--kt-orange); border-color: var(--kt-orange); color: #fff8f0; border-radius: 0; box-shadow: none; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 28px; }
body.t-kota .btn.brand:hover { background: var(--kt-coal); border-color: var(--kt-coal); opacity: 1; }

/* the stage — four plates cross-fading, one shouted line, nothing else */
body.t-kota .sc-hero { min-height: 100vh; padding: 26px 20px; }
body.t-kota .sc-hero h1 { font-weight: 800; font-size: clamp(38px, 7.4vw, 96px); line-height: 0.96; letter-spacing: -0.035em; text-transform: uppercase; max-width: 880px; margin: 0 auto 18px; }
body.t-kota .sc-hero p { font-size: 17px; line-height: 1.55; max-width: 520px; margin: 0 auto 32px; }

body.t-kota .sc-h2 { font-weight: 800; font-size: clamp(22px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.025em; text-transform: uppercase; color: var(--heading); text-align: center; margin: 0 0 32px; }

/* THE WELD — full-bleed, gapless, no top margin, no hairline, hard against
   the bottom edge of the stage */
body.t-kota .sc-strip { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-kota .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 0; }
body.t-kota .sc-strip:not(:has(.sc-h2)) .sc-strip-card { position: relative; display: block; }
body.t-kota .sc-strip:not(:has(.sc-h2)) .sc-strip-img { aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
body.t-kota .sc-strip:not(:has(.sc-h2)) .sc-strip-label { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 18px 18px; color: #fff8f0; background: linear-gradient(rgba(23, 20, 15, 0), rgba(23, 20, 15, 0.82)); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

/* the branch row, same element, told apart by the heading it prints */
body.t-kota .sc-strip:has(.sc-h2) { padding: 78px clamp(20px, 5vw, 70px) 88px; }
body.t-kota .sc-strip:has(.sc-h2) .sc-strip-row { gap: 22px; }
body.t-kota .sc-strip:has(.sc-h2) .sc-strip-img { aspect-ratio: 4 / 3; border: 1px solid var(--line); }
body.t-kota .sc-strip:has(.sc-h2) .sc-strip-label { margin-top: 13px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--heading); }

/* charcoal ground number two, and the last one */
body.t-kota .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 92px 24px; background-color: var(--kt-coal); }
body.t-kota .sc-banner-inner { max-width: 660px; }
body.t-kota .sc-banner h2 { font-weight: 800; font-size: clamp(26px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -0.03em; text-transform: uppercase; margin: 0 0 16px; }
body.t-kota .sc-banner p { font-size: 16.5px; line-height: 1.65; margin: 0 0 28px; }

/* the imageless column that lets the page breathe between band and menu */
body.t-kota .sc-richtext { max-width: 720px; padding: 88px 20px 12px; }
body.t-kota .sc-richtext p { font-size: 17px; line-height: 1.82; color: var(--text); }

/* THE MENU WALL — three across in two rows, butted edge to edge with a single
   hairline showing through the 1px gap, and the price the only orange on it */
body.t-kota .sc-buygrid { max-width: 1080px; padding: 88px 20px 16px; }
body.t-kota .sc-buy-grid { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
body.t-kota .sc-buy-card { background: var(--surface); padding: 0 22px 28px; }
body.t-kota .sc-buy-media { margin: 0 -22px; }
body.t-kota .sc-buy-media img { aspect-ratio: 4 / 3; }
body.t-kota .sc-buy-cat { color: var(--muted); font-weight: 700; }
body.t-kota .sc-buy-t { margin-top: 7px; font-size: 17px; font-weight: 700; }
body.t-kota .sc-buy-p { margin-top: 7px; font-size: 21px; font-weight: 800; color: var(--kt-orange); }
body.t-kota .btn.brand.sc-buy-btn { margin-top: 17px; padding: 12px 22px; }

body.t-kota .sc-contact-split { padding: 86px 20px 98px; gap: 60px; }
body.t-kota .sc-contact-split .sc-h2 { text-align: left; }

@media (max-width: 900px) {
  body.t-kota .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-kota .sc-buy-grid { grid-template-columns: repeat(2, 1fr); }
}

/* NIGHT — the paper drops to a warm near-black, the orange lifts because it is
   still carrying every price and every control on its own, and the two
   charcoal grounds go darker still so they stay the darkest thing here. */
html[data-theme="dark"] body.t-kota {
  background: #14120f;
  color: #c3bcb0;
  --kt-orange: #ff8a3d;
  --kt-coal: #0b0908;
  --bg-flat: #14120f;
  --surface: #1b1815;
  --surface-2: #221e19;
  --line: #2c2823;
  --line-strong: #423c34;
  --heading: #f4efe4;
  --text: #c3bcb0;
  --muted: #8b8377;
  --header-bg: #14120f;
}
html[data-theme="dark"] body.t-kota .sf-header, html[data-theme="dark"] body.t-kota .sf-head,
html[data-theme="dark"] body.t-kota .sf-footer, html[data-theme="dark"] body.t-kota .sf-foot,
html[data-theme="dark"] body.t-kota .sf-cats { background: #14120f; border-color: #2c2823; }
html[data-theme="dark"] body.t-kota .btn.brand { color: #1a0d04; }
html[data-theme="dark"] body.t-kota .btn.brand:hover { background: #f4efe4; border-color: #f4efe4; color: #17140f; }