/* ---- kantel (Kantel — Contemporary dance company 204) ----------------------
   THE STRUCTURAL MOVE: one stage-dark ground runs the whole page and is LIFTED
   exactly twice — under the gapless three-across photograph wall and under the
   enquiry band — so the only two WIDE moments read as their own plane while
   everything else stays a 58-character centred column. The new work is the one
   asymmetric split on the page, and the only place a photograph ever sits
   beside a paragraph. Sodium amber is spent on three things and nothing else:
   the link underline, the opening date, and the rule under the submit. */
body.t-kantel.ws-body {
  --bg: #0d0e10; --fg: #e2ded5; --heading: #f2efe8; --text: #e2ded5; --muted: #8e8a83;
  --kn-band: #15171a; --kn-line: #24272b; --kn-amber: #c8874a;
  --hero-a: rgba(5, 6, 7, .26); --hero-b: rgba(5, 6, 7, .60);
}
body.t-kantel { background: var(--bg); }

/* the plain bar and the plain tail — one hairline each, type only, never order */
body.t-kantel .ws-nav, body.t-kantel .ws-footer { border-color: var(--kn-line); }
body.t-kantel .ws-brand { color: var(--heading); text-transform: uppercase; letter-spacing: .38em; font-size: 12.5px; font-weight: 600; }
body.t-kantel .ws-nav-links a { color: var(--heading); opacity: .66; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; }
/* amber 1 of 3 — the link underline */
body.t-kantel .ws-nav-links a:hover, body.t-kantel .ws-nav-links a.on { opacity: 1; color: var(--heading); border-bottom-color: var(--kn-amber); }

/* the stage — one whole viewport, one line, one ghost ask, nothing else */
body.t-kantel .ws-hero { min-height: 100vh; }
body.t-kantel.ws-body .ws-hero h1 { color: var(--heading); font-size: clamp(40px, 8vw, 104px); font-weight: 400; letter-spacing: -.045em; line-height: .96; text-shadow: none; }
body.t-kantel.ws-body .ws-hero p { color: #cfcabf; font-size: 12px; text-transform: uppercase; letter-spacing: .26em; line-height: 2; margin: 26px auto 40px; }
body.t-kantel.ws-body .btn.brand, body.t-kantel.ws-body .ws-hero-cta.btn.brand { background: rgba(242, 239, 232, .12); color: var(--heading); border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 600; padding: 17px 40px; }

/* one ground, no zebra anywhere, generous air between the beats */
body.t-kantel.ws-body .ws-section, body.t-kantel.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { padding: 124px 0; background: var(--bg); }
body.t-kantel .ws-h2 { color: var(--heading); text-transform: uppercase; letter-spacing: .3em; font-size: 11px; font-weight: 600; margin: 0 0 44px; }
body.t-kantel .ws-richtext .ws-narrow { max-width: 58ch; }
body.t-kantel .ws-richtext p, body.t-kantel .ws-story-copy p { color: var(--text); font-size: 16.5px; line-height: 2.05; }

/* THE ONE ASYMMETRIC MOMENT — and amber 2 of 3, the opening date above it */
body.t-kantel .ws-story-grid { grid-template-columns: 5fr 6fr; gap: 70px; align-items: center; }
body.t-kantel .ws-story-media img, body.t-kantel .ws-gallery-item img { border-radius: 0; aspect-ratio: 4 / 5; }
body.t-kantel .ws-story-copy h2 { color: var(--heading); font-weight: 400; letter-spacing: -.03em; font-size: clamp(30px, 4.4vw, 52px); margin: 0 0 20px; }
body.t-kantel .ws-story-copy h2::before { content: 'Opens 14 March · Baxter Flipside'; display: block; margin: 0 0 18px; color: var(--kn-amber); text-transform: uppercase; letter-spacing: .26em; font-size: 10.5px; font-weight: 600; }

/* the season — four ruled lines, no bullets, the dates carried by the copy */
body.t-kantel .ws-list { list-style: none; padding: 0; border-bottom: 1px solid var(--kn-line); }
body.t-kantel .ws-list li { border-top: 1px solid var(--kn-line); padding: 24px 0; margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.85; }

/* the rehearsal film runs seam to seam; only the words keep the gutter */
body.t-kantel .ws-video .ws-container { max-width: 100%; padding: 0; }
body.t-kantel .ws-video .ws-h2 { padding: 0 22px; }
body.t-kantel .ws-video-frame { border-radius: 0; box-shadow: none; aspect-ratio: 21 / 9; }
body.t-kantel .ws-video-caption { color: var(--muted); font-size: 12.5px; line-height: 1.8; margin-top: 22px; padding: 0 22px; }

/* THE LIFT — the only two wide bands sit on their own plane, and the wall runs
   three across with no gutter, contained to the page width rather than bleeding */
body.t-kantel.ws-body .ws-section.ws-gallery,
body.t-kantel.ws-body .ws-section.ws-contact,
body.t-kantel.ws-body .ws-section.ws-gallery:nth-child(even):not(.ws-cta):not(.ws-shoplink),
body.t-kantel.ws-body .ws-section.ws-contact:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: var(--kn-band); }
body.t-kantel .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }

/* the director, unitalicised */
body.t-kantel .ws-quote-t { color: var(--heading); font-style: normal; font-weight: 400; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.42; max-width: 26ch; margin: 0 auto 22px; }
body.t-kantel .ws-quote-a, body.t-kantel .ws-contact .ws-sub, body.t-kantel .ws-field label { color: var(--muted); text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 600; }

/* four fields straight on the ground, no boxes — and amber 3 of 3 under the submit */
body.t-kantel .ws-field input, body.t-kantel .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--kn-line); border-radius: 0; color: var(--heading); padding: 13px 2px; resize: vertical; }
body.t-kantel .ws-contact .ws-form::after { content: ''; align-self: center; width: 64px; height: 2px; margin-top: 8px; background: var(--kn-amber); }

@media (max-width: 760px) {
  body.t-kantel .ws-story-grid { grid-template-columns: 1fr; gap: 30px; }
  body.t-kantel .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* night — the house lights fully out; band, hairline and amber each one stop on */
html[data-theme="dark"] body.t-kantel.ws-body {
  --bg: #050506; --fg: #d8d3ca; --heading: #f6f3ec; --text: #d8d3ca; --muted: #7c7871;
  --kn-band: #0e1012; --kn-line: #1b1e21; --kn-amber: #d9964f;
  --hero-a: rgba(0, 0, 0, .32); --hero-b: rgba(0, 0, 0, .68);
}
html[data-theme="dark"] body.t-kantel { background: var(--bg); }