/*
Theme Name:    Bodyterapie
Theme URI:     https://bodyterapie.com
Description:   Bodyterapie — somatic psychology, body-mind integration, therapeutic practice. Triangle identity from Marusankakushikaku.
Version: 1.7.1
Author:        zemla.org studio
Text Domain:   bodyterapie
*/

:root {
  --c-primary:   #b05a18;
  --c-secondary: #d4761a;
  --c-accent:    #e38322;
  --c-accent-2:  #f0a84a;
  --c-gradient:  linear-gradient(135deg, #b05a18 0%, #e38322 100%);
  --c-bg:        #fef7ec;
  --c-surface:   #fffbf4;
  --c-ink:       #1f0e00;
  --c-ink-2:     #4a2810;
  --c-ink-3:     #8a6040;
  --c-ink-4:     #c49870;
  --c-ink-5:     #f0dfc8;
  --c-border:    #e8cfb0;
  --f-body:      'Georgia', serif;
  --f-ui:        'Inter', 'Segoe UI', sans-serif;
  --f-mono:      'JetBrains Mono', monospace;
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-4xl: 2.5rem;
  --lh-base: 1.7;
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;   --sp-10: 2.5rem;  --sp-12: 3rem;
  --sp-16: 4rem;   --sp-20: 5rem;  --sp-24: 6rem;
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px;
  --w-content: 680px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--f-body);
  background: var(--c-bg);
  color: var(--c-ink);
  line-height: var(--lh-base);
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-ui);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-primary);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

p {
  margin-bottom: var(--sp-4);
}

ul, ol {
  margin-left: var(--sp-6);
  margin-bottom: var(--sp-4);
}

li {
  margin-bottom: var(--sp-2);
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

.container {
  max-width: 1100px;
  margin: auto;
  padding: 0 var(--sp-6);
}

/* ── Site header ─────────────────────────────────────────────────────── */
.site-header {
  background: var(--c-surface);
  border-bottom: 2px solid var(--c-primary);
  padding: var(--sp-4) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(176,90,24,.07);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.site-title {
  font-family: var(--f-ui);
  font-size: var(--fs-xl);
  font-weight: 700;
  background: var(--c-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.site-title::before {
  content: '▲ ';
  font-size: 0.8em;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: var(--sp-6);
}

.site-nav a {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--c-primary);
}

.lang-switcher {
  display: flex;
  gap: var(--sp-2);
}

.lang-btn {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  padding: 3px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: none;
  color: var(--c-ink-3);
  cursor: pointer;
  text-decoration: none;
}

.lang-btn--active,
.lang-btn:hover {
  background: var(--c-primary);
  color: white;
  border-color: var(--c-primary);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.1s;
}

.btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--c-gradient);
  color: white;
}

.btn--outline {
  background: none;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--c-ink);
  color: var(--c-ink-4);
  padding: var(--sp-10) 0;
  margin-top: var(--sp-24);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
}

.site-footer a {
  color: var(--c-ink-4);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--c-accent);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* ── Front page — triangle layout ────────────────────────────────────── */
.fp-container {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-20) var(--sp-6);
}

.fp-triangle-wrap {
  position: relative;
  width: 600px;
  height: 520px;
  margin: auto;
}

.fp-triangle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Triangle nodes — proportions refined: symbol smaller, title/desc larger */
.fp-node {
  position: absolute;
  width: 180px;
  text-decoration: none;
  color: inherit;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  transition: transform 0.2s, background 0.15s;
}

.fp-node:hover {
  transform: scale(1.04);
  background: rgba(176,90,24,.04);
}

/*
 * Positions anchored to actual SVG vertices of the 45°-CW-rotated triangle
 * in 600×520 viewBox: A(452,108) top/apex  C(92,204) left  B(356,468) bottom.
 * A: bottom-anchored, centred on x=452 → element bottom at y=108, left at 452-90=362
 * C: left-anchored at x=92 → right edge at x=92 (left = 92-180 = -88), centred on y=204
 * B: top-anchored, centred on x=356 → element top at y=468, left at 356-90=266
 */
.fp-node--top {
  bottom: 412px;   /* element bottom at y=108 (520-108=412) */
  left:   362px;   /* centres 180px element on x=452        */
  text-align: center;
}

.fp-node--top:hover {
  transform: scale(1.04);
}

.fp-node--left {
  top:  144px;     /* centres ~180px-tall element on y=204 */
  left:  -88px;    /* right edge at x=92 (92-180=-88)     */
  text-align: right;
}

.fp-node--right {
  top:  468px;     /* element top at y=468                 */
  left: 266px;     /* centres 180px element on x=356       */
  text-align: center;
}

.fp-node__symbol {
  display: block;
  font-size: 2.64rem;
  color: var(--c-primary);
  line-height: 1;
  margin-bottom: 0.3rem;
  font-family: var(--f-ui);
}

.fp-node__title {
  display: block;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-ink);
  margin-bottom: 0.25rem;
}

.fp-node__desc {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  line-height: 1.45;
}

.fp-node:hover .fp-node__symbol {
  color: var(--c-accent);
}

.fp-triangle-center {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.fp-center-kicker {
  font-size: 3rem;
  color: var(--c-primary);
  opacity: 0.2;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.fp-center-title {
  font-family: var(--f-ui);
  font-size: var(--fs-2xl);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

.fp-center-tagline {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--sp-3);
}

/* 800px — wrap 320×278, scale ≈ 0.534 → A(241,58) C(49,109) B(190,250) */
@media (max-width: 800px) {
  .fp-triangle-wrap { width: 320px; height: 278px; }
  .fp-node { width: 120px; }
  .fp-node__symbol { font-size: 2rem; }
  .fp-node__title { font-size: var(--fs-sm); }
  .fp-node__desc { font-size: var(--fs-xs); }
  .fp-node--top   { bottom: 220px; left: 181px; }  /* bottom@y=58, centred@x=241 (120px elem) */
  .fp-node--left  { top:  49px;  left: -71px; }    /* centred@y=109, right@x=49               */
  .fp-node--right { top:  250px; left: 130px; }    /* top@y=250, centred@x=190                */
}

/* 480px — wrap 220×190, scale ≈ 0.366 → A(166,39) C(34,74) B(131,171) */
@media (max-width: 480px) {
  .fp-triangle-wrap { width: 220px; height: 190px; }
  .fp-node { width: 100px; }
  .fp-node--top   { bottom: 151px; left: 116px; }  /* centred@x=166 (100px elem)  */
  .fp-node--left  { top:   24px;  left: -66px; }   /* right@x=34                  */
  .fp-node--right { top:  171px;  left:  81px; }   /* centred@x=131               */
}

/* ── Marusankakushikaku widget ───────────────────────────────────────── */
.msks-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--r-md);
  padding: 8px 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.msks-svg { width: 94px; height: 36px; display: block; }
.msks-widget circle, .msks-widget rect, .msks-widget polygon { transition: fill .2s; }
.msks-link:hover .msks-circle { fill: #1a1a1a; }
.msks-link:hover .msks-square { fill: #0b5c78; }
.msks-link:hover .msks-tri    { fill: #b05a18; }

/* ── Page content / post ─────────────────────────────────────────────── */
.page-header {
  padding: var(--sp-16) 0 var(--sp-10);
}

.page-symbol {
  font-size: 4rem;
  color: var(--c-primary);
  opacity: 0.7;
  display: block;
  margin-bottom: var(--sp-4);
}

.page-header h1 {
  font-size: clamp(1.6rem, 4vw, var(--fs-4xl));
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-primary);
}

.page-header .page-lead {
  font-size: var(--fs-lg);
  color: var(--c-ink-2);
  margin-top: var(--sp-4);
  max-width: 580px;
}

.post-content {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  max-width: var(--w-content);
}

.post-content h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  color: var(--c-primary);
}

.post-content h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.post-content p { margin-bottom: var(--sp-4); }

.post-content a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  margin-bottom: var(--sp-8);
}

.breadcrumb a { color: var(--c-ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-primary); }

/* ── Schools grid ────────────────────────────────────────────────────── */
.school-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}

@media (max-width: 700px) {
  .school-grid { grid-template-columns: 1fr; }
}

.school-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  border-top: 3px solid var(--c-primary);
  transition: box-shadow .2s, transform .15s;
}

.school-card:hover {
  box-shadow: 0 4px 18px rgba(176,90,24,.09);
  transform: translateY(-2px);
}

.school-card__founder {
  font-family: var(--f-ui);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--sp-1);
}

.school-card__concept {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
}

.school-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.6;
}

/* ── Section sub-topic grid ──────────────────────────────────────────── */
.bth-subtopic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-6);
  margin: var(--sp-10) 0;
}

.bth-subtopic-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  border-left: 4px solid var(--c-primary);
  transition: box-shadow .2s, transform .15s;
}

.bth-subtopic-card:hover {
  box-shadow: 0 4px 18px rgba(176,90,24,.09);
  transform: translateY(-2px);
}

.bth-subtopic-card__icon {
  font-size: 1.8rem;
  color: var(--c-primary);
  opacity: .7;
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--f-ui);
  line-height: 1;
}

.bth-subtopic-card__title {
  font-family: var(--f-ui);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}

.bth-subtopic-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  line-height: 1.55;
}

.bth-subtopic-card--placeholder {
  border-left-color: var(--c-border);
  opacity: .72;
}

/* ── "In preparation" badge ─────────────────────────────────────────── */
.bth-prep-badge {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  margin-left: var(--sp-3);
  vertical-align: middle;
}

/* ── Embed placeholder blocks ───────────────────────────────────────── */
.bth-embed-placeholder {
  border: 2px dashed var(--c-border);
  border-radius: var(--r-md);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--c-ink-4);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  margin: var(--sp-8) 0;
  text-align: center;
  padding: var(--sp-8);
}

.bth-embed-placeholder__icon { font-size: 2.4rem; opacity: .5; }
.bth-embed-placeholder__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }

/* ══════════════════════════════════════════════════════════════════
   3-FOLD-PATH GRAPHIC ELEMENTS — HMSW / VMSW series  (v1.1.3)
   ══════════════════════════════════════════════════════════════════
   Shared with mim2000.cz and zemla.org. Per-site overrides applied
   via CSS custom properties on :root or per-class.

   Source: assets/images/HMSW25.svg (630×320 viewBox, rendered 25×13)
   Amber (warm terracotta) tint via stroke in SVG; site brand colour
   modulates opacity.
*/

:root {
  --hmsw-tile-w:   28px;         /* bodyterapie override — warm amber tile, slightly larger */
  --hmsw-tile-h:   14px;
  --hmsw-opacity:  0.12;         /* gentle on warm cream background */
}

/* Base horizontal divider — use as <hr class="hmsw25"> */
.hmsw25 {
  border: none;
  height: var(--hmsw-tile-h);
  margin: var(--sp-6) 0;
  background-image: url('assets/images/HMSW25.svg');
  background-repeat: repeat-x;
  background-size: var(--hmsw-tile-w) var(--hmsw-tile-h);
  background-position: center;
  opacity: var(--hmsw-opacity);
  display: block;
}

/* Accent variant — stronger presence for section breaks */
.hmsw25--accent {
  --hmsw-opacity: 0.22;
  --hmsw-tile-w: 36px;
  --hmsw-tile-h: 18px;
}

/* HMSW33 — finer 1/33 downscale; carousel-border and subtle lining (3-fold-path shared) */
.hmsw33 {
  border: none;
  height: 8px;
  background-image: url('assets/images/HMSW25.svg');
  background-repeat: repeat-x;
  background-size: 16px 8px;
  background-position: center;
  opacity: 0.18;
  margin: 0;
  display: block;
}
.hmsw33--top    { margin-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.hmsw33--bottom { margin-top: 0;    border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* Dynamic variant — full CSS-custom-property control */
.hmsw-dynamic {
  border: none;
  height: var(--hmsw-tile-h, 14px);
  background-image: url('assets/images/HMSW25.svg');
  background-repeat: repeat-x;
  background-size: var(--hmsw-tile-w, 28px) var(--hmsw-tile-h, 14px);
  background-position: center;
  opacity: var(--hmsw-opacity, 0.12);
  margin: var(--sp-5) 0;
  display: block;
}

/* VMSW25 — vertical motif strip for column accents */
.vmsw25 {
  border: none;
  width: var(--hmsw-tile-h, 14px);
  min-height: 120px;
  background-image: url('assets/images/VMSW25.svg');
  background-repeat: repeat-y;
  background-size: var(--hmsw-tile-h, 14px) var(--hmsw-tile-w, 28px);
  background-position: center top;
  opacity: var(--hmsw-opacity, 0.12);
  display: block;
}

/* Section wrapper with top + bottom HMSW25 lining */
.hmsw25-strip { position: relative; }
.hmsw25-strip::before,
.hmsw25-strip::after {
  content: '';
  display: block;
  height: var(--hmsw-tile-h, 14px);
  background-image: url('assets/images/HMSW25.svg');
  background-repeat: repeat-x;
  background-size: var(--hmsw-tile-w, 28px) var(--hmsw-tile-h, 14px);
  background-position: center;
  opacity: var(--hmsw-opacity, 0.12);
}

/* ── 3-fold-path shared identity tokens ──────────────────────────
   AOZI vertex: Ω (Omega) — Contacts & Personas
   Property shared with mim2000.cz (α vertex) and zemla.org (∞ vertex).
*/
:root {
  --3fp-vertex-symbol: 'Ω';
  --3fp-site-id:       'bodyterapie';
  --3fp-noto-serif-jp: 'Noto Serif JP', 'Yu Mincho', serif; /* shared kanji font stack */
}

/* ── A-F1-01 PORT — Noto Serif JP activation (v1.1.5) ───────────────────
   Ported from zemla-theme v1.6.1.
   .lang-ja body class (bth_body_lang_class filter) activates font for
   cookie-based JA locale; :lang(ja) activates when <html lang="ja">
   (bth_html_lang_attribute filter). Both selectors required.
   ─────────────────────────────────────────────────────────────────────── */
.lang-ja,
:lang(ja) {
  font-family: var(--3fp-noto-serif-jp);
}


/* ============================================================================
   ZEMLA v1.3.0 — bodyterapie.com style.css APPEND BLOCK
   Apply: WP Admin → Appearance → Theme File Editor → style.css
          Scroll to bottom → paste entire block → Update File

   Contents:
     §GAL    Gallery layout fix — THEMEPORT-03 (GAL-D01 + Z-02 + Z-13)
             bodyterapie has no gallery page as of v1.2.0 — preemptive fix.
             Uncomment §Z-11 sidebar stub when gallery page is introduced.
   ============================================================================ */


/* ── §GAL-D01 LAYER 1: .gallery-layout container ─────────────────────────────
   Problem: .container caps max-width; outer 2-column grid leaves permanent void.
   Fix:     Block layout, override to 1080px (container--wide equivalent).
   Note:    bodyterapie has no gallery page as of v1.2.0 — applies preemptively.
   Migrate: Replace 1080px with var(--bth-content-width-wide, 1080px) after ARCH-08.
   -------------------------------------------------------------------------- */
.gallery-layout {
  display: block;
  max-width: 1080px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}


/* ── §GAL-D01 LAYER 2: .album-grid ──────────────────────────────────────────
   Problem: Hardcoded 2×110px columns inside constrained container.
   Fix:     Responsive auto-fill grid, 220px min per card.
   Migrate: Replace gap with var(--bth-gallery-gap, 24px) after ARCH-08.
   -------------------------------------------------------------------------- */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}


/* ── §GAL-D01 LAYER 3: .album-card + .album-card__link ──────────────────────
   Problem: Side-by-side grid layout clips title in 240px card.
   Fix:     Flex column — full-width image top, full-width info below.
   -------------------------------------------------------------------------- */
.album-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.album-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
}

.album-card__thumb {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

/* §Z-02 + §Z-13: Safari height fix + 3:2 aspect ratio (zemla v1.6.6 standard)
   Z-02: height: 100% + display: block required for object-fit in Safari <15
   Z-13: 4/3 → 3/2 — vertical card standard per ADR-03
   Note: GAL-D01 original used aspect-ratio: 4/3 — this is the Z-13 upgrade.  */
.album-card__thumb img {
  display: block;               /* Z-02: Safari thumb alignment */
  width: 100%;
  height: 100%;                 /* Z-02: required for object-fit: cover in Safari */
  aspect-ratio: 3 / 2;         /* Z-13: vertical card standard (was 4/3 in GAL-D01) */
  object-fit: cover;
}

/* §Z-02: .album-card__link Safari alignment fix */
.album-card__link {
  align-items: stretch;         /* Z-02: replaces grid-template-rows: 1fr */
}

.album-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  overflow: visible;
  height: auto;
}

.album-card__title {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}


/* ── §Z-02: .gallery-grid Safari/Chrome cross-browser fixes ──────────────────
   Z-02: Remove clamp() from minmax() — Safari <15 bug with nested clamp.
   Z-02: aspect-ratio on .gallery-item--photo for uniform row height.
   -------------------------------------------------------------------------- */
.gallery-grid {
  /* Ensure minmax does not use clamp() — Safari <15 compatibility */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gallery-item--photo {
  aspect-ratio: 4 / 3;         /* Z-02: uniform grid row height across browsers */
}

.gallery-item--photo img {
  height: 100%;                 /* Z-02: required for object-fit in Safari */
}


/* ── §Z-11 SIDEBAR STUB (COMMENTED — bodyterapie has no gallery page as of v1.2.0)
   Uncomment when bodyterapie introduces a gallery page with .gallery-sidebar.
   ADR-02: .gallery-layout must have exactly 2 direct children:
     <aside class="gallery-sidebar"> + .album-grid
   grid-template-columns: 220px 1fr (sidebar fixed, album-grid fluid)
   -------------------------------------------------------------------------- */
/*
.gallery-layout--with-sidebar {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}

.gallery-sidebar {
  position: sticky;
  top: 24px;
}

@media (max-width: 860px) {
  .gallery-layout--with-sidebar {
    display: block;
  }
  .gallery-sidebar {
    position: static;
    margin-bottom: 24px;
  }
}
*/


/* ── RESPONSIVE BREAKPOINTS ──────────────────────────────────────────────────
   Aligns with bodyterapie's existing breakpoints (860px tablet, 480px mobile).
   Gap tightens per viewport — consistent with 3-fold-path gallery standard.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .gallery-layout {
    padding-inline: 16px;
  }
}

@media (max-width: 480px) {
  .gallery-layout {
    padding-inline: 12px;
  }

  .album-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .album-card__info {
    padding: 8px;
  }
}


/* ── ACCEPTANCE CRITERIA (manual verification — run after deploy) ─────────────
   Gallery layout (if gallery page exists):
   [ ] Full-width at desktop ≥1200px (spans content area, no 220px contracted stub)
   [ ] 4 columns at 1080–1280px viewport
   [ ] 3 columns at 860–1079px (auto-fill)
   [ ] 2 columns at ≤480px (forced)
   [ ] Album cards: image top, info below, 3:2 aspect ratio
   [ ] No title/description overflow outside card boundary
   [ ] Safari 15+: gallery renders identically to Chrome
   [ ] Firefox: no regression

   Cross-browser (applies to all pages with .gallery-item--photo):
   [ ] Safari <15: no layout collapse from nested clamp()
   [ ] object-fit: cover applies correctly in Safari (height: 100% on img)

   Multilingual (4 locales — CS/EN/JA/DE):
   [ ] Gallery renders correctly on all 4 locale switches
   [ ] No font-family regression on JA locale (--3fp-noto-serif-jp still active)

   If no gallery page exists on bodyterapie yet:
   [ ] Zero visual regression on all existing static pages
   [ ] No .gallery-* selectors conflicting with existing styles
   -------------------------------------------------------------------------- */

/* ================================================================
   bodyterapie v1.4.0 — DESIGN-BT-01
   Triangle: deeper crimson red, azure node text, balanced sizing,
   improved positioning, slow 3D clockwise rotation, center cycling
   ================================================================ */

/* ── Colour overrides — homepage triangle only ─────────────────── */
/* Triangle fill: deeper crimson replacing terracotta               */
.fp-triangle-svg path {
  /* override inline SVG stroke via filter trick is not possible —  */
  /* stroke is hardcoded in SVG; use SVG class override instead     */
}
/* Node text: azure/deep blue replacing warm brown */
.fp-node__symbol,
.fp-node__title {
  color: #1a4a7a;
}
.fp-node:hover .fp-node__symbol,
.fp-node:hover .fp-node__title {
  color: #0d2d50;
}
.fp-node__desc {
  color: #3a5a7a;
}
.fp-node:hover {
  background: rgba(26,74,122,.05);
}

/* ── Type size — balanced with shape (match mim2000 ratio) ─────── */
.fp-node__symbol { font-size: 1.9rem; }       /* was 2.64rem */
.fp-node__title  { font-size: var(--fs-sm); } /* was fs-md   */
.fp-node__desc   { font-size: var(--fs-xs); }

/* ── Node positioning — tighter to shape edges ─────────────────── */
/* Desktop 600×520. Vertices: A(452,108) top  C(92,204) left  B(356,468) right */
/* Node width reduced to 160px                                       */
.fp-node { width: 160px; }

.fp-node--top {
  bottom: 416px;    /* element bottom at y=104 — 4px above apex     */
  left:   376px;    /* centres 160px on x=456                       */
  text-align: center;
}
.fp-node--left {
  top:   110px;     /* centres ~130px element on y=204              */
  left:  -60px;     /* right edge at x=100 (10px inside apex)       */
  text-align: right;
}
.fp-node--right {
  top:   380px;     /* pushed up from 468→380 so it fits in view    */
  left:  280px;     /* centres 160px on x=360                       */
  text-align: center;
}

/* 800px breakpoints (scale ≈ 0.534) */
@media (max-width: 800px) {
  .fp-node { width: 110px; }
  .fp-node__symbol { font-size: 1.4rem; }
  .fp-node--top   { bottom: 222px; left: 186px; }
  .fp-node--left  { top:  60px;  left: -50px; }
  .fp-node--right { top:  205px; left: 150px; }
}

/* 480px breakpoints (scale ≈ 0.366) */
@media (max-width: 480px) {
  .fp-node { width: 90px; }
  .fp-node__symbol { font-size: 1.1rem; }
  .fp-node--top   { bottom: 152px; left: 121px; }
  .fp-node--left  { top:  40px;  left: -50px; }
  .fp-node--right { top:  140px; left:  90px; }
}

/* ── SVG rotation — 3D clockwise ───────────────────────────────── */
/* Rotate only the SVG inside .fp-triangle-svg                      */
.fp-triangle-wrap { perspective: 1000px; }

@keyframes bt-tri-rotate3d {
  0%   { transform: rotate(  0deg) rotateY(  0deg); }
  25%  { transform: rotate( 90deg) rotateY(  8deg); }
  50%  { transform: rotate(180deg) rotateY(  0deg); }
  75%  { transform: rotate(270deg) rotateY( -8deg); }
  100% { transform: rotate(360deg) rotateY(  0deg); }
}
.fp-triangle-svg svg {
  animation: bt-tri-rotate3d 45s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-animation: bt-tri-rotate3d 45s linear infinite;
  -webkit-transform-origin: 50% 50%;
}

/* ── Center repositioned to geometric centroid ─────────────────── */
/* Triangle centroid at (300,260) in 600×520 → top: 50%            */
.fp-triangle-center {
  top: 50%;
}

/* ── Center topic cycling ───────────────────────────────────────── */
.fp-bt-topics {
  position: relative;
  height: 3.2rem;
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.fp-bt-topic {
  position: absolute;
  inset: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  font-family: var(--f-ui);
  font-size: 2.4rem;
  font-weight: 300;
  color: rgba(26,74,122,.18);
  opacity: 0;
  -webkit-transition: opacity .65s ease-in-out;
  transition: opacity .65s ease-in-out;
  pointer-events: none;
  line-height: 1;
}
.fp-bt-topic--label {
  font-size: var(--fs-md);
  font-weight: 600;
  color: #1a4a7a;
  letter-spacing: .04em;
}
.fp-bt-topic--active { opacity: 1; pointer-events: auto; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .fp-triangle-svg svg { animation: none; -webkit-animation: none; }
  .fp-bt-topic { transition: none; }
}

/* ================================================================
   bodyterapie v1.5.0 — DESIGN-BT-01 revision 2
   Wrap-level rotation: triangle + nodes rotate together.
   Nodes counter-rotate to stay upright while orbiting corners.
   12% bigger canvas (672×582). Sandstone 3D in SVG (see PHP).
   ================================================================ */

/* ── Cancel v1.4.0 SVG-only rotation — whole wrap rotates now ─── */
.fp-triangle-svg svg {
  animation: none !important;
  -webkit-animation: none !important;
  transform: none;
  will-change: auto;
}

/* ── Remove v1.4.0 perspective from wrap (now in keyframe fn) ─── */
.fp-triangle-wrap { perspective: none; }

/* ── 12% bigger canvas ──────────────────────────────────────────── */
.fp-triangle-wrap {
  width:  672px;
  height: 582px;
}

/* ── Keyframe: whole-wrap clockwise rotation + Y-wobble 3D ─────── */
@keyframes bt-wrap-rotate {
  0%   { transform: perspective(1000px) rotate(  0deg) rotateY(  0deg); }
  25%  { transform: perspective(1000px) rotate( 90deg) rotateY(  8deg); }
  50%  { transform: perspective(1000px) rotate(180deg) rotateY(  0deg); }
  75%  { transform: perspective(1000px) rotate(270deg) rotateY( -8deg); }
  100% { transform: perspective(1000px) rotate(360deg) rotateY(  0deg); }
}

/* ── Keyframe: nodes counter-rotate (orbit corner, text upright) ── */
@keyframes bt-node-counter {
  0%   { transform: rotate(  0deg); }
  25%  { transform: rotate(-90deg); }
  50%  { transform: rotate(-180deg); }
  75%  { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

/* ── Keyframe: center counter-rotate (bakes translate centering) ── */
@keyframes bt-center-counter {
  0%   { transform: translate(-50%,-50%) rotate(  0deg); }
  25%  { transform: translate(-50%,-50%) rotate(-90deg); }
  50%  { transform: translate(-50%,-50%) rotate(-180deg); }
  75%  { transform: translate(-50%,-50%) rotate(-270deg); }
  100% { transform: translate(-50%,-50%) rotate(-360deg); }
}

/* ── Apply animations ───────────────────────────────────────────── */
.fp-triangle-wrap {
  animation: bt-wrap-rotate 45s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-animation: bt-wrap-rotate 45s linear infinite;
}

/* Nodes orbit with wrap — counter-rotate to keep text upright */
.fp-node {
  animation: bt-node-counter 45s linear infinite;
  transform-origin: 50% 50%;
  -webkit-animation: bt-node-counter 45s linear infinite;
}

/* Center stays upright — translate(-50%,-50%) baked into frames */
.fp-triangle-center {
  animation: bt-center-counter 45s linear infinite;
  transform-origin: 50% 50%;
  -webkit-animation: bt-center-counter 45s linear infinite;
}

/* ── Node positions for 672×582 canvas ─────────────────────────── */
/* Vertices at ×1.12 scale: A≈(506,121) top  C≈(103,229) left  B≈(399,524) right */
.fp-node { width: 160px; }

.fp-node--top {
  bottom: 466px;   /* element-bottom at y≈116, apex A at y≈121     */
  left:   421px;   /* centres 160px on x≈501, apex A at x≈506      */
  text-align: center;
}
.fp-node--left {
  top:    123px;   /* centres element on y≈229, vertex C at y≈229   */
  left:   -67px;   /* right-edge at x≈93, vertex C at x≈103         */
  text-align: right;
}
.fp-node--right {
  top:    426px;   /* pushed up from 524 (B) to keep within canvas  */
  left:   314px;   /* centres 160px on x≈394, vertex B at x≈399     */
  text-align: center;
}

/* ── Responsive overrides (pixel sizes unchanged — screen limits)  */
@media (max-width: 800px) {
  .fp-triangle-wrap { width: 320px; height: 278px; }
  .fp-node { width: 120px; }
  .fp-node--top   { bottom: 222px; left: 187px; }
  .fp-node--left  { top:  50px;  left: -50px; }
  .fp-node--right { top:  205px; left: 134px; }
}
@media (max-width: 480px) {
  .fp-triangle-wrap { width: 220px; height: 190px; }
  .fp-node { width: 100px; }
  .fp-node--top   { bottom: 153px; left: 122px; }
  .fp-node--left  { top:   26px;  left: -46px; }
  .fp-node--right { top:   142px; left:  86px; }
}

/* ── Reduce motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fp-triangle-wrap   { animation: none; -webkit-animation: none; }
  .fp-node            { animation: none; -webkit-animation: none; }
  .fp-triangle-center {
    animation: none; -webkit-animation: none;
    transform: translate(-50%,-50%);
  }
}

/* ================================================================
   bodyterapie v1.6.0 — node repositioning
   Nodes shifted ~30px from each vertex toward triangle centroid
   (between outer-stroke tip and inner-stroke edge).
   Centroid at 1.12× scale: (336,291).
   Vertex A→(485,142) C→(132,236) B→(391,495) centre targets.
   ================================================================ */

/* Desktop 672×582 — centroid-shifted positions */
.fp-node--top {
  bottom: 390px;   /* element-centre-y ≈ 142 — 21px below apex A(506,121) */
  left:   405px;   /* element-centre-x ≈ 485 — 21px inward from apex x    */
  text-align: center;
}
.fp-node--left {
  top:    186px;   /* element-centre-y ≈ 236 — 8px inward from C(103,228) */
  left:    52px;   /* element-centre-x ≈ 132 — 29px inward from C         */
  text-align: right;
}
.fp-node--right {
  top:    445px;   /* element-centre-y ≈ 495 — 29px up from B(399,524)    */
  left:   311px;   /* element-centre-x ≈ 391 — 8px inward from B          */
  text-align: center;
}

/* 800px responsive — proportionally scaled */
@media (max-width: 800px) {
  .fp-node--top   { bottom: 186px; left: 193px; }
  .fp-node--left  { top:  89px;  left:  25px; }
  .fp-node--right { top: 213px; left: 148px; }
}

/* 480px responsive */
@media (max-width: 480px) {
  .fp-node--top   { bottom: 127px; left: 132px; }
  .fp-node--left  { top:  61px;  left:  17px; }
  .fp-node--right { top: 145px; left: 102px; }
}

/* ================================================================
   Seed Page Template — shared across zemla / mim2000 / bodyterapie
   ================================================================ */
.seed-page {
  max-width: var(--w-content, 72ch);
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-12, 3rem) var(--sp-6, 1.5rem) var(--sp-24, 6rem);
}
.seed-header {
  text-align: center;
  margin-bottom: var(--sp-16, 4rem);
}
.seed-symbol {
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--c-primary);
  line-height: 1;
  margin-bottom: var(--sp-4, 1rem);
  font-family: var(--f-ui);
  font-weight: 300;
}
.seed-title {
  font-size: clamp(1.55rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--sp-4, 1rem);
  line-height: 1.2;
}
.seed-lead {
  font-size: var(--fs-md, 1rem);
  color: var(--c-ink-2);
  max-width: 52ch;
  margin: 0 auto var(--sp-6, 1.5rem);
  line-height: 1.68;
}
.seed-badge {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--r-sm, 4px);
}
.seed-badge--seed    { background: rgba(11,92,120,.07);  color: var(--c-primary);     border: 1px solid rgba(11,92,120,.2); }
.seed-badge--growing { background: rgba(40,140,40,.07);  color: #256f25;              border: 1px solid rgba(40,140,40,.2); }
.seed-badge--mature  { background: rgba(130,88,0,.07);   color: #6a4800;              border: 1px solid rgba(130,88,0,.2); }

/* ── Body content area ──────────────────────────────────────────── */
.seed-body { margin-bottom: var(--sp-16, 4rem); }
.seed-body p,
.seed-body li { line-height: 1.75; }

/* Gutenberg video/iframe embeds — responsive 16:9 */
.seed-body .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-md, 8px);
}
.seed-body .wp-block-embed__wrapper iframe,
.seed-body .wp-block-embed__wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Image blocks */
.seed-body .wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md, 8px);
  display: block;
}
.seed-body .wp-block-image figcaption {
  font-size: var(--fs-xs, .8rem);
  color: var(--c-ink-3);
  text-align: center;
  margin-top: var(--sp-2, .5rem);
}

/* Audio block */
.seed-body .wp-block-audio audio {
  width: 100%;
  border-radius: var(--r-sm, 4px);
}

/* Table block */
.seed-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm, .875rem);
  margin: var(--sp-6, 1.5rem) 0;
}
.seed-body th,
.seed-body td {
  padding: var(--sp-2, .5rem) var(--sp-4, 1rem);
  border: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
.seed-body th {
  background: var(--c-surface);
  font-weight: 600;
  color: var(--c-ink);
}

/* Cross-site reference block styling (use .wp-block-group with class) */
.seed-xref-block {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-md, 8px);
  padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
  margin: var(--sp-8, 2rem) 0;
  font-size: var(--fs-sm, .875rem);
}
.seed-xref-block p { margin: 0 0 var(--sp-2, .5rem); color: var(--c-ink-2); }
.seed-xref-block a { color: var(--c-primary); font-weight: 500; }

/* Back navigation */
.seed-back-nav {
  text-align: center;
  margin-top: var(--sp-16, 4rem);
  padding-top: var(--sp-8, 2rem);
  border-top: 1px solid var(--c-border);
}
.seed-back-nav a {
  color: var(--c-accent);
  font-size: var(--fs-sm, .875rem);
  text-decoration: none;
  font-family: var(--f-ui);
}
.seed-back-nav a:hover { text-decoration: underline; }

/* ================================================================
   bodyterapie v1.7.0 — DESIGN-BT-01 revision 3
   Symbol-only nodes carved ON the stone at path vertices.
   Restore vertex % positions (cancel v1.6.0 inward shift).
   Brushstone filter replaces smooth sandstone (see PHP).
   Static .fp-tri-nav — decoupled text labels outside rotating wrap.
   ================================================================ */

/* ── Redefine bt-node-counter: bake translate(-50%,-50%) in ────── */
/* Previous keyframe had no translate — static transform overridden  */
@keyframes bt-node-counter {
  0%   { transform: translate(-50%,-50%) rotate(  0deg); }
  25%  { transform: translate(-50%,-50%) rotate(-90deg); }
  50%  { transform: translate(-50%,-50%) rotate(-180deg); }
  75%  { transform: translate(-50%,-50%) rotate(-270deg); }
  100% { transform: translate(-50%,-50%) rotate(-360deg); }
}

/* ── Node — transparent, symbol-only, centred exactly on vertex ── */
.fp-node {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: auto;
  /* Centre on vertex via translate (baked into counter keyframe) */
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.fp-node:hover { background: transparent !important; }

/* ── Hide title and desc — symbol only orbits with wrap ─────────── */
.fp-node__title,
.fp-node__desc { display: none; }

/* ── Carved symbol — large, dark, chisel text-shadow ────────────── */
.fp-node__symbol {
  font-size: clamp(2.4rem, 4.8vw, 3.4rem);
  color: rgba(25,8,8,0.82);
  font-family: var(--f-ui);
  font-weight: 700;
  line-height: 1;
  text-shadow:
    1px  2px  4px rgba(0,0,0,0.58),
    2px  3px  6px rgba(0,0,0,0.32),
   -1px -1px  2px rgba(255,255,255,0.14);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.28);
}
.fp-node:hover .fp-node__symbol {
  color: rgba(25,8,8,0.95);
  text-shadow:
    1px  2px  5px rgba(0,0,0,0.65),
    2px  4px  8px rgba(0,0,0,0.38),
   -1px -1px  2px rgba(255,255,255,0.18);
}

/* ── Vertex positions (% of 672×582 container, ×1.12 scale) ─────── */
/* ViewBox 600×520 vertices at ×1.12: A(506,121) top  C(103,229) left  B(399,524) right */
/* centroid ≈ (336, 291)                                                                */
.fp-node--top   { top: 20.8%; left: 75.3%; bottom: auto; text-align: center; }
.fp-node--left  { top: 39.3%; left: 15.3%; text-align: center; }
.fp-node--right { top: 90.0%; left: 59.4%; text-align: center; }

/* 800px responsive — scale 320×278 — vertex A(241,58) C(49,109) B(190,250) */
@media (max-width: 800px) {
  .fp-node__symbol { font-size: 2rem; }
  .fp-node--top   { top: 20.9%; left: 75.3%; }
  .fp-node--left  { top: 39.2%; left: 15.3%; }
  .fp-node--right { top: 89.9%; left: 59.4%; }
}
/* 480px responsive — scale 220×190 */
@media (max-width: 480px) {
  .fp-node__symbol { font-size: 1.5rem; }
}

/* ── Reduce motion override — restore static translate ───────────── */
@media (prefers-reduced-motion: reduce) {
  .fp-node {
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
}

/* ================================================================
   .fp-tri-nav — static decoupled navigation below triangle
   Three symbol+label links arranged in a horizontal row.
   ================================================================ */
.fp-tri-nav {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 4rem);
  flex-wrap: wrap;
  margin-top: var(--sp-6, 1.5rem);
  margin-bottom: var(--sp-2, .5rem);
}
.fp-tri-nav__item {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-size: var(--fs-sm, .875rem);
  letter-spacing: .03em;
  -webkit-transition: color .18s;
  transition: color .18s;
}
.fp-tri-nav__item:hover { color: var(--c-primary); }
.fp-tri-nav__symbol {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1;
}
.fp-tri-nav__label {
  color: var(--c-ink-2);
  font-weight: 500;
}
.fp-tri-nav__item:hover .fp-tri-nav__label { color: var(--c-primary); }

/* ================================================================
   bodyterapie v1.7.0 — mobile / iOS Safari refinement
   Root causes fixed:
   1. SVG width="672" attribute removed (PHP) — SVG now fills wrap
   2. rotateY wobble in bt-wrap-rotate causes uncompensated drift on
      iOS Safari when combined with counter-rotating children.
      Switch to pure 2D rotation — counter-rotation tracks exactly.
   3. Fluid wrap width/height via min() — fills any viewport.
   ================================================================ */

/* ── Pure 2D wrap rotation — replaces 3D wobble definition ──────── */
/* Later definition in same stylesheet wins; no !important needed    */
@keyframes bt-wrap-rotate {
  from { transform: rotate(  0deg); }
  to   { transform: rotate(360deg); }
}
@-webkit-keyframes bt-wrap-rotate {
  from { -webkit-transform: rotate(  0deg); transform: rotate(  0deg); }
  to   { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* ── -webkit- prefixed counter-rotation (older Safari compat) ───── */
@-webkit-keyframes bt-node-counter {
  0%   { -webkit-transform: translate(-50%,-50%) rotate(  0deg);   transform: translate(-50%,-50%) rotate(  0deg);   }
  25%  { -webkit-transform: translate(-50%,-50%) rotate( -90deg);  transform: translate(-50%,-50%) rotate( -90deg);  }
  50%  { -webkit-transform: translate(-50%,-50%) rotate(-180deg);  transform: translate(-50%,-50%) rotate(-180deg);  }
  75%  { -webkit-transform: translate(-50%,-50%) rotate(-270deg);  transform: translate(-50%,-50%) rotate(-270deg);  }
  100% { -webkit-transform: translate(-50%,-50%) rotate(-360deg);  transform: translate(-50%,-50%) rotate(-360deg);  }
}
@-webkit-keyframes bt-center-counter {
  0%   { -webkit-transform: translate(-50%,-50%) rotate(  0deg);   transform: translate(-50%,-50%) rotate(  0deg);   }
  25%  { -webkit-transform: translate(-50%,-50%) rotate( -90deg);  transform: translate(-50%,-50%) rotate( -90deg);  }
  50%  { -webkit-transform: translate(-50%,-50%) rotate(-180deg);  transform: translate(-50%,-50%) rotate(-180deg);  }
  75%  { -webkit-transform: translate(-50%,-50%) rotate(-270deg);  transform: translate(-50%,-50%) rotate(-270deg);  }
  100% { -webkit-transform: translate(-50%,-50%) rotate(-360deg);  transform: translate(-50%,-50%) rotate(-360deg);  }
}

/* ── Fluid wrap — scales from 672px down to 88vw on any device ─── */
.fp-triangle-wrap {
  width:  min(672px, 88vw);
  /* height proportional: 582/672 ≈ 0.866 */
  height: min(582px, calc(88vw * 0.866));
}

/* ── GPU compositing hint — helps Safari animate filters ────────── */
.fp-triangle-svg svg {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ── Container: reduce vertical padding on short screens ─────────── */
@media (max-height: 700px), (max-width: 480px) {
  .fp-container {
    padding-top: var(--sp-6, 1.5rem);
    padding-bottom: var(--sp-6, 1.5rem);
  }
}

/* ── fp-tri-nav: stack vertically on narrow phones ──────────────── */
@media (max-width: 400px) {
  .fp-tri-nav {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    gap: var(--sp-3, .75rem);
  }
}

/* ── Reduce motion: restore static centering on nodes ────────────── */
@media (prefers-reduced-motion: reduce) {
  .fp-node {
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .fp-triangle-wrap { animation: none; -webkit-animation: none; }
}

/* ================================================================
   bodyterapie v1.7.1 — layout fix + azure symbols + corner-nav
   ================================================================ */

/* ── Container: column layout so triangle centres on page ────────── */
.fp-container {
  position: relative;           /* anchor for .fp-corner-nav absolute */
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
}

/* ── Centre text: move to geometric centroid (50%,50%) ───────────── */
/* Previous top:60% was visual-balance offset — centroid is correct   */
.fp-triangle-center {
  top:  50%;
  left: 50%;
}

/* ── Node symbols: azure carved colour ───────────────────────────── */
.fp-node__symbol {
  color: #1a7a9a;
  text-shadow:
    1px  2px  4px rgba(0,0,0,0.50),
    2px  3px  6px rgba(0,0,0,0.28),
   -1px -1px  2px rgba(255,255,255,0.18);
  -webkit-text-stroke: 0.4px rgba(0,50,70,0.35);
}
.fp-node:hover .fp-node__symbol {
  color: #0d5e78;
}

/* ── Corner nav — top-left overlay list (desktop) ────────────────── */
/* Absolutely positioned within fp-container (which is relative)      */
/* Font: same as zemla.org — var(--f-ui), light, letter-spaced        */
.fp-corner-nav {
  position: absolute;
  top: var(--sp-8, 2rem);
  left: var(--sp-6, 1.5rem);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: var(--sp-3, .75rem);
  z-index: 5;
  pointer-events: auto;
}
.fp-corner-nav__item {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  -webkit-transition: opacity .18s;
  transition: opacity .18s;
}
.fp-corner-nav__item:hover { opacity: .65; }
.fp-corner-nav__symbol {
  font-family: var(--f-ui);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: #1a7a9a;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  min-width: 1.4rem;
  text-align: center;
}
.fp-corner-nav__label {
  font-family: var(--f-ui);
  font-size: var(--fs-xs, .8rem);
  font-weight: 300;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(26,122,154,.80);
  white-space: nowrap;
}

/* Hide corner-nav on small screens (triangle fills viewport) */
@media (max-width: 640px) {
  .fp-corner-nav { display: none; }
}

/* ── Cancel old fp-tri-nav (replaced by corner-nav) ─────────────── */
.fp-tri-nav { display: none; }