/* ---- stilte (Stilte — Yoga studio 106) ---------------------------------------
   STRUCTURAL MOVE: the schedule board. Every block on this page is held inside
   one narrow centred column on a single chalk ground — except the timetable,
   which is the only thing allowed to break the container. It opens to 1440px,
   drops its gutters to zero and rules itself with hairlines, so the page goes
   from its narrowest measure to edge-to-edge in a single step and closes again
   immediately after. Each column is a part of the day; each paragraph inside it
   is one class, ruled off from the next and set in tabular figures so the times
   line up down the board. Green is spent on three jobs only — the nav over the
   photograph, the buttons and the icon strokes — and headings sit a shade
   darker than all three. The nav is absolute rather than sticky so it leaves
   with the hero instead of following pale green-on-white down the page. No
   :first-of-type / :nth-of-type is used to reach a section; :first-child on
   .ws-col is safe because every sibling in .ws-cols is a .ws-col. */
body.t-stilte.ws-body {
  --bg: #fbfbf8; --fg: #35393a; --heading: #1d4436; --text: #35393a; --muted: #7f8783;
  --st-green: #2f6b56; --st-line: #e0e2db;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hero-a: rgba(16, 26, 21, .20); --hero-b: rgba(16, 26, 21, .54);
}
body.t-stilte { background: var(--bg); }

/* the nav rides on the photograph and has no band of its own */
body.t-stilte .ws-nav { position: absolute; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: 0; color: #f4f7f2; }
body.t-stilte .ws-brand { color: #f4f7f2; font-family: var(--sf-serif); font-weight: 500; font-size: 21px; letter-spacing: .05em; }
body.t-stilte .ws-nav-links a { color: #f4f7f2; opacity: .84; font-size: 13px; font-weight: 500; letter-spacing: .09em; }
body.t-stilte .ws-nav-links a:hover, body.t-stilte .ws-nav-links a.on { opacity: 1; color: #f4f7f2; border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(244, 247, 242, .85); }

/* hero — one whole viewport, three photographs, everything on the centre axis */
body.t-stilte .ws-hero { min-height: 100vh; }
body.t-stilte .ws-hero h1 { font-family: var(--sf-serif); font-size: clamp(38px, 6.6vw, 78px); font-weight: 400; letter-spacing: -.015em; line-height: 1.06; text-shadow: none; max-width: 17ch; }
body.t-stilte.ws-body .btn.brand { background: var(--st-green); color: #fbfbf8; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .17em; font-size: 11.5px; font-weight: 600; padding: 16px 32px; }
body.t-stilte.ws-body .ws-hero-cta.btn.brand { background: rgba(251, 251, 248, .94); color: var(--heading); }

/* generous vertical air first, then the zebra wash off so the chalk is unbroken */
body.t-stilte .ws-section { padding: 104px 0; }
body.t-stilte.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-stilte .ws-h2, body.t-stilte .ws-title-h, body.t-stilte .ws-cta-inner h2, body.t-stilte .ws-story-copy h2 { font-family: var(--sf-serif); color: var(--heading); font-size: clamp(26px, 3.6vw, 42px); font-weight: 400; letter-spacing: -.01em; line-height: 1.14; margin: 0 0 14px; }
body.t-stilte .ws-feature h3, body.t-stilte .ws-member strong { color: var(--heading); font-size: 15.5px; font-weight: 650; letter-spacing: -.005em; }
body.t-stilte .ws-sub, body.t-stilte .ws-title-sub, body.t-stilte .ws-feature p, body.t-stilte .ws-member p, body.t-stilte .ws-cta-inner p { color: var(--muted); font-size: 14.5px; line-height: 1.72; }
body.t-stilte .ws-story-media img { border-radius: 0; aspect-ratio: 4 / 5; }

/* THE BOARD — the one block that leaves the column, straight under the narrowest */
body.t-stilte .ws-titleblock { padding: 108px 0 6px; }
body.t-stilte .ws-columns { padding: 8px 0 112px; }
body.t-stilte .ws-columns .ws-container { max-width: 1440px; }
body.t-stilte .ws-columns .ws-cols-4 { gap: 0; border-top: 2px solid var(--heading); }
body.t-stilte .ws-col { padding: 22px 26px 0; border-left: 1px solid var(--st-line); }
body.t-stilte .ws-col:first-child { padding-left: 0; border-left: 0; }
body.t-stilte .ws-col-h { color: var(--st-green); text-transform: uppercase; letter-spacing: .19em; font-size: 11px; font-weight: 700; margin: 0 0 12px; }
body.t-stilte .ws-col p { border-top: 1px solid var(--st-line); margin: 0; padding: 13px 0; font-size: 13.5px; line-height: 1.5; color: var(--text); font-variant-numeric: tabular-nums; }

/* the icon wall — four across and four again, not a photograph in it */
body.t-stilte .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 50px 34px; margin-top: 20px; }
body.t-stilte .ws-feature { text-align: left; padding: 0; }
body.t-stilte .ws-feature-icon { color: var(--st-green); margin-bottom: 15px; }

/* the photographs go flush — no gutter, no margin, hard against the type */
body.t-stilte .ws-photogrid { padding: 0; }
body.t-stilte .ws-photogrid-grid { gap: 0; }

/* four teachers, square plates, read left like the icon wall above them */
body.t-stilte .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
body.t-stilte .ws-member { text-align: left; }
body.t-stilte .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; margin: 0 0 14px; }

/* it ends quietly — no coloured band anywhere, one button, then the form */
body.t-stilte.ws-body .ws-cta { background: transparent; color: var(--text); padding: 0 0 100px; }
body.t-stilte .ws-contact { border-top: 1px solid var(--st-line); }
body.t-stilte .ws-field input, body.t-stilte .ws-field textarea, body.t-stilte .ws-field select { background: transparent; border: 0; border-bottom: 1px solid var(--st-line); border-radius: 0; color: var(--heading); padding: 11px 2px; }

/* the board stacks before the menu does, so its rules come off one step earlier */
@media (max-width: 720px) {
  body.t-stilte .ws-col { padding: 20px 0 0; border-left: 0; }
}
@media (max-width: 760px) {
  body.t-stilte .ws-nav-links a { color: var(--heading); opacity: 1; box-shadow: none; }
  body.t-stilte .ws-features-grid, body.t-stilte .ws-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-stilte .ws-hero h1 { font-size: clamp(34px, 11vw, 56px); }
}

/* night — same one hue and two neutrals, the green lifted so it still carries */
html[data-theme="dark"] body.t-stilte.ws-body {
  --bg: #131714; --fg: #a6ada8; --heading: #e9f0ea; --text: #a6ada8; --muted: #7b837e;
  --st-green: #6fbf99; --st-line: #262d28;
  --hero-a: rgba(8, 12, 10, .26); --hero-b: rgba(8, 12, 10, .60);
}
html[data-theme="dark"] body.t-stilte { background: var(--bg); }