/* ============================== KANALA ==============================
   THE STRUCTURAL MOVE: two full-bleed banner bands welded back to back
   directly under a full-viewport slider. Every vertical margin comes off
   .sc-banner so the second band begins on the pixel the first one ends, and
   the pair spends the entire second screen on photography before a single
   word of commerce arrives. Below them the counter board is eight square
   tiles four across in two exact rows — parseSections clamps a strip to six
   items, so it ships as two four-item strips and the second one's top padding
   is taken to the row gap, which makes the pair read as one 4 x 2 grid with
   no caption between the rows. Milled oat under roasted chicory brown, with
   the category line pulled back to mid-stone so the page is two weights of
   brown before any colour lands; syrup rose is then spent on the eight rand
   figures and the buy slabs and on nothing else at all. Nothing in this block
   touches header order, position or alignment — type, colour and spacing
   only. */
body.t-kanala {
  background: #f2ece0;
  color: #2b211a;
  --kn-rose: #b5476a;
  --kn-lit: #c8577b;
  --kn-stone: #8a7f72;
  --bg-flat: #f2ece0;
  --header-bg: #f2ece0;
  --surface: #f2ece0;
  --surface-2: #ebe3d4;
  --line: #ddd3c1;
  --line-strong: #c3b7a2;
  --heading: #2b211a;
  --text: #2b211a;
  --muted: #8a7f72;
  --radius: 0;
  --shadow: none;
}

/* a flat oat bar exactly the colour of the ground, so the stage starts under
   the header rather than behind it — colour and tracking only */
body.t-kanala .sf-head, body.t-kanala .sf-header,
body.t-kanala .sf-foot, body.t-kanala .sf-footer, body.t-kanala .sf-cats {
  background: #f2ece0; border-color: #ddd3c1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kanala .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; }

/* ROSE 1 of 2 — every buy control is a flat syrup slab with no edge on it */
body.t-kanala .btn.brand { background: var(--kn-rose); border: 0; box-shadow: none; color: #fdf6f0; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; padding: 13px 26px; }
body.t-kanala .btn.brand:hover { background: var(--kn-lit); opacity: 1; }

/* THE STAGE — the whole window, three photographs cross-fading, copy dead on
   the vertical midline over the darkened image and nothing else on screen */
body.t-kanala .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-kanala .sc-hero h1 { font-size: clamp(28px, 4.4vw, 54px); font-weight: 500; line-height: 1.14; letter-spacing: -0.015em; margin: 0 0 18px; }
body.t-kanala .sc-hero p { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.22em; margin: 0 0 34px; }

/* THE MOVE — both bands lose every margin, so they touch and read as one
   uninterrupted screen of photography sitting straight under the slider */
body.t-kanala .sc-banner { margin: 0 calc(50% - 50vw); min-height: 48vh; display: grid; align-content: center; padding: 56px 28px; }
body.t-kanala .sc-banner h2 { font-size: clamp(21px, 2.9vw, 33px); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 24px; }

/* THE COUNTER BOARD — eight square tiles, four across, two exact rows */
body.t-kanala .sc-strip { max-width: 1220px; padding: 96px 20px 0; }
body.t-kanala .sc-strip + .sc-strip { padding-top: 26px; }
body.t-kanala .sc-strip .sc-h2, body.t-kanala .sc-buygrid .sc-h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; font-weight: 700; color: var(--kn-stone); margin: 0 0 34px; }
body.t-kanala .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-kanala .sc-strip-img { border: 0; background: #ebe3d4; }
body.t-kanala .sc-strip-label { margin-top: 13px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; }

/* THE PAGE GOES SILENT — no photograph at all after two full-bleed bands: a
   narrow centred measure on the bare oat ground and nothing beside it */
body.t-kanala .sc-richtext { max-width: 620px; padding: 104px 20px 92px; }
body.t-kanala .sc-richtext .sc-h2, body.t-kanala .sc-contact .sc-h2 { font-size: clamp(20px, 2.4vw, 27px); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 20px; }
body.t-kanala .sc-richtext p { color: var(--text); font-size: 15.5px; line-height: 2; }

/* THE ONLY PRICED BLOCK — eight tiles four across into two exact rows, image
   over title over rand figure over slab, no card, no border, no shadow.
   ROSE 2 of 2 lands on the figure and the category drops to mid-stone. */
body.t-kanala .sc-buygrid { max-width: 1220px; padding: 16px 20px 100px; }
body.t-kanala .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 26px; }
body.t-kanala .sc-buy-cat { margin-top: 18px; color: var(--kn-stone); font-size: 10px; letter-spacing: 0.24em; }
body.t-kanala .sc-buy-t { margin-top: 8px; font-size: 16px; font-weight: 500; }
body.t-kanala .sc-buy-p { margin-top: 8px; color: var(--kn-rose); font-size: 17px; font-weight: 700; }

/* closes on the midline, exactly as the reference does: hours, street and
   telephone stacked, the form under them, nothing after it */
body.t-kanala .sc-contact { max-width: 560px; padding: 0 20px 112px; }
body.t-kanala .sc-contact-sub { font-size: 14px; line-height: 2; color: var(--kn-stone); }

@media (max-width: 860px) {
  body.t-kanala .sc-hero { min-height: 86vh; }
  body.t-kanala .sc-banner { min-height: 38vh; padding: 46px 22px; }
  body.t-kanala .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kanala .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
}

/* NIGHT — the oat goes to the brown of a cold syrup pot and the type comes up
   to a warm cream, with the rose lifted to the pink the syrup throws back
   under the counter light so the rand figure and the buy slab still carry.
   The two banner bands become the only lit things above the fold, which is
   roughly what the street looks like at half past six in winter. */
html[data-theme="dark"] body.t-kanala {
  background: #1a1512;
  color: #e6dccd;
  --kn-rose: #e08099;
  --kn-lit: #ef95ac;
  --kn-stone: #948779;
  --bg-flat: #1a1512;
  --header-bg: #1a1512;
  --surface: #1a1512;
  --surface-2: #221b16;
  --line: #302620;
  --line-strong: #453830;
  --heading: #f4ebdc;
  --text: #e6dccd;
  --muted: #948779;
}
html[data-theme="dark"] body.t-kanala .sf-head, html[data-theme="dark"] body.t-kanala .sf-header,
html[data-theme="dark"] body.t-kanala .sf-foot, html[data-theme="dark"] body.t-kanala .sf-footer,
html[data-theme="dark"] body.t-kanala .sf-cats { background: #1a1512; border-color: #302620; }
html[data-theme="dark"] body.t-kanala .btn.brand { background: var(--kn-rose); color: #26100f; }
html[data-theme="dark"] body.t-kanala .btn.brand:hover { background: var(--kn-lit); color: #26100f; }
html[data-theme="dark"] body.t-kanala .sc-strip-img { background: #221b16; }
html[data-theme="dark"] body.t-kanala .sc-field input,
html[data-theme="dark"] body.t-kanala .sc-field textarea { background: #221b16; border-color: #302620; color: #e6dccd; }