/* ---- tatami (Tatami — Karate & judo dojo 215) — tatami black, bone type, one
   aizome indigo. No red anywhere: red is the reference's own skin, we took the
   shape. STRUCTURAL MOVE: the gapless full-bleed photo band — four dark panels
   shoulder to shoulder with zero gutter, floor to ceiling, captions low ON the
   picture at roughly 90% image to 10% type, the exact inverse of the four
   contained icon tiles above it. The timetable then blows back out to full
   width, so the page runs contained → full-bleed → narrow → full-bleed and
   never repeats a width. Indigo appears only on the buttons and on the
   day-rules of the timetable; everything else is monochrome. */
body.t-tatami.ws-body { --bg: #0f0f11; --fg: #b3afa7; --heading: #f2efe8; --text: #b3afa7; --muted: #8d8a84; --hero-a: rgba(15,15,17,0.34); --hero-b: rgba(15,15,17,0.72); }
body.t-tatami { background: #0f0f11; }
body.t-tatami .ws-brand, body.t-tatami .ws-nav-links a { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11.5px; font-weight: 600; }
body.t-tatami .ws-section, body.t-tatami .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; padding: 96px 0; }
body.t-tatami .ws-hero { min-height: 100vh; }
/* the heavy vignette — all three frames have to hold centred type */
body.t-tatami .ws-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 32%, rgba(0,0,0,0.74) 100%); }
body.t-tatami .ws-hero h1 { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; font-size: clamp(30px, 6.2vw, 74px); line-height: 1.04; max-width: 15ch; }
body.t-tatami .ws-h2 { text-transform: uppercase; letter-spacing: 0.26em; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 36px; }
body.t-tatami .ws-col-h, body.t-tatami .ws-feature h3, body.t-tatami .ws-gallery-cap strong { text-transform: uppercase; letter-spacing: 0.16em; font-size: 12.5px; font-weight: 700; color: var(--heading); }
body.t-tatami .ws-title-sub, body.t-tatami .ws-story-copy p, body.t-tatami .ws-member p, body.t-tatami .ws-feature p, body.t-tatami .ws-col p, body.t-tatami .ws-gallery-cap span { color: var(--text); }
body.t-tatami .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; margin: 0 0 16px; }
/* the band and the timetable both break the container; the band loses its air too */
body.t-tatami .ws-gallery { padding: 0; }
body.t-tatami .ws-gallery .ws-container, body.t-tatami .ws-listblock .ws-container { max-width: none; padding: 0; }
body.t-tatami .ws-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-tatami .ws-gallery-item { position: relative; }
body.t-tatami .ws-gallery-item img { aspect-ratio: 3 / 4; border-radius: 0; }
body.t-tatami .ws-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; gap: 4px; padding: 96px 26px 26px; background: linear-gradient(rgba(15,15,17,0), rgba(15,15,17,0.88)); }
body.t-tatami .ws-list { list-style: none; padding: 0 clamp(22px, 5vw, 72px); border-bottom: 1px solid #2b3560; }
body.t-tatami .ws-list li { border-top: 1px solid #2b3560; padding: 19px 2px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--heading); }
body.t-tatami .ws-story .ws-story-grid { max-width: none; padding: 0 clamp(24px, 6vw, 88px) 0 0; gap: clamp(28px, 6vw, 88px); }
body.t-tatami .ws-story-media img { aspect-ratio: 3 / 4; border-radius: 0; }
body.t-tatami .ws-contact { background: #141418; border-top: 1px solid #26262c; }
body.t-tatami .ws-contact .ws-container { max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
body.t-tatami .ws-contact .ws-sub { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin: 0; text-align: left; white-space: pre-line; font-size: 15px; line-height: 1.85; color: var(--text); }
body.t-tatami .ws-field input, body.t-tatami .ws-field textarea, body.t-tatami .ws-field select { background: transparent; border: 1px solid #33333b; border-radius: 0; color: var(--heading); }
body.t-tatami.ws-body .btn.brand { background: #3a4a86; color: #f2efe8; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.22em; font-size: 10.5px; font-weight: 700; padding: 16px 32px; }
body.t-tatami.ws-body .btn.brand:hover { background: #5f79d4; }
@media (max-width: 900px) {
  body.t-tatami .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-tatami .ws-contact .ws-container, body.t-tatami .ws-story .ws-story-grid { grid-template-columns: 1fr; padding: 0 22px; }
  body.t-tatami .ws-contact .ws-sub { grid-column: 1; grid-row: auto; }
}

/* tatami night — the day look is already black, so night sinks to true ink and
   lifts the bone rather than inverting anything */
html[data-theme="dark"] body.t-tatami.ws-body { --bg: #08080a; --fg: #a8a49c; --heading: #f7f5f0; --text: #a8a49c; --muted: #7c7973; --hero-a: rgba(8,8,10,0.42); --hero-b: rgba(8,8,10,0.80); }
html[data-theme="dark"] body.t-tatami { background: #08080a; }
html[data-theme="dark"] body.t-tatami .ws-contact { background: #101013; border-top-color: #1e1e23; }
html[data-theme="dark"] body.t-tatami .ws-gallery-cap { background: linear-gradient(rgba(8,8,10,0), rgba(8,8,10,0.9)); }
html[data-theme="dark"] body.t-tatami .ws-list, html[data-theme="dark"] body.t-tatami .ws-list li { border-color: #232c50; }
html[data-theme="dark"] body.t-tatami .ws-field input, html[data-theme="dark"] body.t-tatami .ws-field textarea, html[data-theme="dark"] body.t-tatami .ws-field select { border-color: #2a2a31; }