/* =========================================================
   開腸瑜伽協会 — レイアウト
   役割: ページの骨格。ヘッダー／フッター／ナビ（殻）、セクションの縦リズムと
         地色、汎用グリッド（2カラム split）。
   依存: tokens.css, base.css
   注意: SPブレークポイントは responsive.css に集約。ここには max-width 系の
         @media を置かない（挙動系の prefers-reduced-motion は animation.css）。
   ========================================================= */

/* ====================================================================
   セクションの縦リズム・地色・締め色（アンカー）
   ==================================================================== */
.sec { padding: var(--section-y) 0; }
.sec--sakura { background: #F4E8E7; }   /* ピンクベージュ系の淡面 */
.sec--mint   { background: #E6F0ED; }   /* ミントグレー系の淡面 */
.sec--rose   { background: #E0C6C5; }   /* 桜系の締め（Certified Studios） */
.sec--rose .sec-eyebrow { color: #6F4E47; }
.sec--ink    { background: var(--anchor); color: var(--on-dark); }
.sec--ink h2, .sec--ink h3 { color: var(--paper); }

/* 締め色（アンカー）— data-anchor で切替（Tweak連動） */
html[data-anchor="sumi"] { --anchor: #221E1A; }
html[data-anchor="cha"]  { --anchor: #382B22; }
html[data-anchor="teal"] { --anchor: #1F302B; }

/* 余白リズム — data-rhythm で切替（Tweak連動） */
html[data-rhythm="airy"]  { --section-y: clamp(108px,15vw,236px); --lh-body: 2.1; }
html[data-rhythm="dense"] { --section-y: clamp(48px,6vw,92px); --lh-body: 1.74; }

/* ====================================================================
   汎用2カラム（split）。セクション固有の50/50は top.css 側（.fullsec 等）。
   ==================================================================== */
.split { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--rev { grid-template-columns: 0.96fr 1.04fr; }

/* ====================================================================
   グローバルヘッダー（殻）。ナビのリンク装飾は components.css。
   ==================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  transition: background 0.6s var(--ease), border-color 0.6s var(--ease), backdrop-filter 0.6s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  width: 100%;
  padding: clamp(16px, 2vw, 26px) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
}
/* スクロール後 / 濃色HERO上 の状態クラス */
.site-header.is-solid {
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom-color: var(--line);
}

/* ====================================================================
   フッター（殻）
   ==================================================================== */
.site-footer {
  background: var(--anchor);
  color: var(--on-dark);
  padding: var(--section-y) 0 var(--s-7);
}
.site-footer a { color: var(--on-dark); }
.site-footer__pre {
  border-bottom: 1px solid rgba(250,247,243,0.16);
  padding-bottom: var(--section-y);
  margin-bottom: var(--s-8);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8); align-items: end;
}
.site-footer__pre h2 { color: var(--paper); font-size: var(--fs-display); letter-spacing: 0.04em; }
.site-footer__pre p { color: var(--on-dark-2); margin-top: var(--s-4); }
.footer-wordmark {
  font-family: var(--font-display); font-size: clamp(1.3rem,2vw,1.7rem);
  letter-spacing: 0.34em; color: var(--paper);
  display: inline-block;
}
.footer-wordmark__logo { display: block; width: clamp(76px, 8vw, 104px); height: auto; }
/* ロゴリンクは下線アニメを出さない（リンクは活かしつつ装飾だけ抑制） */
.footer-wordmark::after { content: none; display: none; }
.footer-wordmark__en { display: block; font-family: var(--font-latin); font-size: var(--fs-small); letter-spacing: 0.3em; color: var(--on-dark-2); margin-top: var(--s-4); }

.footer-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-7); }
.footer-cols .footer-col:last-child { position: relative; }
.footer-cols .footer-col:last-child::before { content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--s-7) / -2 - 50px); width: 1px; background: rgba(250,247,243,0.16); }
.footer-col h4 { font-family: var(--font-sans); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--on-dark-2); font-weight: 500; margin-bottom: var(--s-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.footer-nav2 { display: grid; grid-template-columns: max-content max-content; gap: var(--s-7); }
.footer-col a { position: relative; display: inline-block; width: fit-content; font-size: var(--fs-small); letter-spacing: 0.06em; color: var(--on-dark); opacity: 0.86; transition: opacity 0.4s var(--ease); }
.footer-col a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); }
.footer-col a:hover { opacity: 1; }
.footer-col a:hover::after { transform: scaleX(1); transform-origin: left; }
/* フッター：見出しのみ 案内＝桜 / 規定＝ミント（リンクは元の色のまま） */
.footer-cols .footer-col:nth-child(2) h4 { color: var(--pink-beige); }
.footer-cols .footer-col:nth-child(3) h4 { color: var(--mint-grey); }

.footer-bar {
  margin-top: var(--section-y);
  padding-top: var(--s-5);
  padding-inline: var(--gutter);
  border-top: 1px solid rgba(250,247,243,0.16);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--on-dark-2);
}
.footer-sns { display: flex; gap: var(--s-5); }
.footer-sns a { position: relative; display: inline-block; }
.footer-sns a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); }
.footer-sns a:hover::after { transform: scaleX(1); transform-origin: left; }