/* ---- tolk (Tolk — Language school 200) ------------------------------------
   THE STRUCTURAL MOVE: the fold is ONE object. The full-viewport three-slide
   stage is not allowed to end — a six-across gapless photograph wall is pulled
   flush against its floor with no gutter, no hairline and no change of ground,
   so stage and strip read as a single welded slab before the page has said a
   word of prose. Everything after it contracts into one bone column that never
   widens again and is parted only by warm hairlines, and no count is repeated:
   six tiles, then six courses three across, then four fee cards. Karoo-road
   ochre is spent on exactly three controls — the stage button, the
   placement-test button and the submit — so the photograph wall, the course
   tiles and the fee cards all stay uncoloured. */
body.t-tolk.ws-body {
  --bg: #f7f3ea; --fg: #35312a; --heading: #17140f; --text: #35312a; --muted: #7d7566;
  --tk-line: #ded5c3; --tk-ochre: #b25f21;
  --hero-a: rgba(20, 14, 7, .22); --hero-b: rgba(20, 14, 7, .54);
}
body.t-tolk { background: var(--bg); }

/* wordmark hard left, five links right — the reference's fixed bar, kept plain */
body.t-tolk .ws-brand { color: var(--heading); text-transform: uppercase; letter-spacing: .28em; font-size: 13px; font-weight: 700; }
body.t-tolk .ws-nav-links a { color: var(--heading); opacity: .74; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; }
body.t-tolk .ws-nav-links a:hover, body.t-tolk .ws-nav-links a.on { color: var(--tk-ochre); opacity: 1; }

/* the stage — one whole viewport, the kicker hoisted above the heading, one ask */
body.t-tolk .ws-hero { min-height: 100vh; }
body.t-tolk .ws-hero-inner { display: flex; flex-direction: column; align-items: center; }
body.t-tolk .ws-hero-inner p { order: -1; max-width: none; margin: 0 0 18px; color: #e7dfd0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; }
body.t-tolk .ws-hero h1 { color: #fbf7ee; font-size: clamp(38px, 6.6vw, 84px); font-weight: 700; letter-spacing: -.038em; line-height: 1.02; text-shadow: none; max-width: 18ch; }

/* ochre 1 and 2 of 3 — flat slabs, never a border */
body.t-tolk.ws-body .btn.brand { background: var(--tk-ochre); color: #fbf7ee; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 700; padding: 16px 34px; }
body.t-tolk.ws-body .ws-hero-cta.btn.brand, body.t-tolk.ws-body .ws-cta .btn.brand { background: var(--tk-ochre); color: #fbf7ee; box-shadow: none; }

/* one bone ground the whole way down, contained blocks parted by hairlines */
body.t-tolk .ws-section { padding: 94px 0; border-top: 1px solid var(--tk-line); }
body.t-tolk .ws-hero + .ws-section, body.t-tolk .ws-photogrid + .ws-section { border-top: 0; }
body.t-tolk.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-tolk .ws-h2, body.t-tolk .ws-story-copy h2 { color: var(--heading); font-size: clamp(25px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.032em; line-height: 1.08; margin: 0 0 14px; }
body.t-tolk .ws-story-copy p, body.t-tolk .ws-richtext p { color: var(--text); font-size: 15.5px; line-height: 1.85; }
body.t-tolk .ws-sub, body.t-tolk .ws-gallery-cap span, body.t-tolk .ws-plan li { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.68; }
body.t-tolk .ws-gallery-cap strong, body.t-tolk .ws-plan h3 { display: block; color: var(--heading); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; margin: 14px 0 5px; }

/* THE WELD — no padding, no gutter and no rule between the stage and the six */
body.t-tolk.ws-body .ws-photogrid { padding: 0; }
body.t-tolk .ws-photogrid-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }

/* courses three across and two down, gapped and contained; the story sits left */
body.t-tolk .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
body.t-tolk .ws-gallery-item img, body.t-tolk .ws-story-media img { border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; }

/* the one break in the contained rhythm — the free placement test */
body.t-tolk.ws-body .ws-cta { padding: 122px 0; border-top: 0; background-color: #17140f; background-image: linear-gradient(rgba(20, 15, 8, .58), rgba(20, 15, 8, .74)), url("/media/samples/tlk_cta.jpg"); background-size: cover; background-position: center; }

/* four fee cards, equal, none highlighted — and their buttons stay ink, not ochre */
body.t-tolk .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1120px; gap: 18px; }
body.t-tolk .ws-plan { background: transparent; border: 1px solid var(--tk-line); border-radius: 0; padding: 30px 22px; text-align: left; }
body.t-tolk.ws-body .ws-plan .btn.brand { background: var(--heading); color: var(--bg); }
body.t-tolk .ws-field input, body.t-tolk .ws-field select, body.t-tolk .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--tk-line); border-radius: 0; color: var(--heading); padding: 11px 2px; }

@media (max-width: 760px) {
  body.t-tolk .ws-photogrid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-tolk .ws-gallery-grid, body.t-tolk .ws-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* night — the same bone room after dark, the ochre one stop hotter */
html[data-theme="dark"] body.t-tolk.ws-body {
  --bg: #14120d; --fg: #a9a294; --heading: #f3ede1; --text: #a9a294; --muted: #7e7566;
  --tk-line: #2c2820; --tk-ochre: #d17c3a;
  --hero-a: rgba(8, 6, 3, .30); --hero-b: rgba(8, 6, 3, .64);
}
html[data-theme="dark"] body.t-tolk { background: var(--bg); }
html[data-theme="dark"] body.t-tolk.ws-body .ws-cta { background-image: linear-gradient(rgba(6, 5, 3, .70), rgba(6, 5, 3, .84)), url("/media/samples/tlk_cta.jpg"); }