/*
Theme Name: Yoga Studio MURA
Theme URI: https://example.com/
Author: Codex PM Team
Description: WordPress theme for Yoga Studio MURA. Static zip converted into PHP templates with reservation handling.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mura
*/

/* =========================================================
   ヨガスタジオMURA — 共通スタイル
   自然・和のやすらぎ / 少人数制
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --washi:        #F8F4EC;   /* 和紙 */
  --washi-2:      #F1EADD;
  --washi-3:      #EAE1D0;
  --sumi:         #2C2925;   /* 墨 */
  --sumi-soft:    #4E4940;
  --sumi-faint:   #8A8377;
  --sand:         #B6A88C;
  --sand-deep:    #9C8868;
  --sage:         #7C9080;
  --sage-deep:    #5E7264;
  --line:         #E0D7C6;
  --line-soft:    #ECE5D7;

  /* palette-driven (overridden by [data-palette]) */
  --bg:           var(--washi);
  --accent:       #62786A;
  --accent-2:     #A78D63;
  --accent-ink:   #41514A;

  --font-serif: "Shippori Mincho", "Zen Old Mincho", serif;
  --font-sans:  "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-latin: "Cormorant Garamond", serif;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-palette="sand"]{ --bg:#F8F4EC; --accent:#6E8472; --accent-2:#A78D63; --accent-ink:#46564D; }
[data-palette="sage"]{ --bg:#EDF0E9; --accent:#5E7264; --accent-2:#7C9080; --accent-ink:#3E4E45; }
[data-palette="sumi"]{ --bg:#F2EEE6; --accent:#3C3A34; --accent-2:#9C8868; --accent-ink:#2C2925; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  background:var(--bg);
  color:var(--sumi);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.85;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
  transition:background .6s var(--ease);
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:600; line-height:1.4; margin:0; letter-spacing:.06em; }
p{ margin:0; }

/* ---------- utilities ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.latin{ font-family:var(--font-latin); font-style:italic; letter-spacing:.02em; }
.eyebrow{
  font-family:var(--font-latin); font-style:italic;
  font-size:clamp(15px,1.5vw,19px); color:var(--accent);
  letter-spacing:.08em; display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--accent); display:inline-block; }
.jp-label{ font-family:var(--font-serif); font-size:13px; letter-spacing:.4em; color:var(--sumi-faint); }
.vlabel{ writing-mode:vertical-rl; text-orientation:upright; }

/* ---------- buttons ---------- */
.btn{
  --bg-btn:var(--sumi); --fg-btn:var(--washi);
  display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--font-sans); font-size:14px; font-weight:500; letter-spacing:.14em;
  padding:16px 30px; border-radius:999px; cursor:pointer; border:1px solid var(--sumi);
  background:var(--bg-btn); color:var(--fg-btn);
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
  position:relative; overflow:hidden;
}
.btn .arw{ transition:transform .4s var(--ease); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(44,41,37,.6); }
.btn:hover .arw{ transform:translateX(5px); }
.btn--ghost{ --bg-btn:transparent; --fg-btn:var(--sumi); border-color:var(--sumi); }
.btn--ghost:hover{ --bg-btn:var(--sumi); --fg-btn:var(--washi); }
.btn--accent{ --bg-btn:var(--accent); --fg-btn:#fff; border-color:var(--accent); }
.btn--light{ --bg-btn:rgba(248,244,236,.14); --fg-btn:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px); }
.btn--light:hover{ --bg-btn:var(--washi); --fg-btn:var(--sumi); border-color:var(--washi); }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad); gap:24px;
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  padding-block:14px; box-shadow:0 1px 0 var(--line), 0 12px 30px -26px rgba(44,41,37,.5);
}
.brand{ display:flex; align-items:baseline; gap:12px; color:var(--c-head,#fff); transition:color .5s var(--ease); }
.scrolled .brand,.site-header.solid .brand{ color:var(--sumi); }
.brand__mark{ font-family:var(--font-serif); font-weight:700; font-size:26px; letter-spacing:.34em; }
.brand__sub{ font-family:var(--font-latin); font-style:italic; font-size:13px; opacity:.85; }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  position:relative; font-size:13.5px; letter-spacing:.1em; color:var(--c-head,#fff);
  transition:color .5s var(--ease), opacity .3s; padding:4px 0;
}
.scrolled .nav a,.site-header.solid .nav a{ color:var(--sumi); }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor; transition:width .35s var(--ease); }
.nav a:hover::after{ width:100%; }
.nav a:hover{ opacity:.7; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.menu-toggle{ display:none; }

@media(max-width:1024px){
  .nav{ display:none; }
  .header-cta .btn{ padding:12px 20px; font-size:12px; }
}

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-reveal="fade"]{ transform:none; }
[data-delay="1"]{ transition-delay:.12s; }
[data-delay="2"]{ transition-delay:.24s; }
[data-delay="3"]{ transition-delay:.36s; }
[data-delay="4"]{ transition-delay:.48s; }
@media(prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- section scaffolding ---------- */
.section{ padding-block:clamp(80px,11vw,150px); position:relative; }
.section--washi{ background:var(--washi-2); }
.sec-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(40px,6vw,72px); }
.sec-head h2{ font-size:clamp(28px,4.4vw,52px); letter-spacing:.08em; }
.sec-head .en{ font-family:var(--font-latin); font-style:italic; color:var(--accent); font-size:clamp(15px,1.6vw,19px); }
.lead{ font-size:clamp(15px,1.4vw,17px); color:var(--sumi-soft); max-width:60ch; line-height:2.1; }

/* hairline divider with center motif */
.rule{ display:flex; align-items:center; gap:18px; color:var(--sand-deep); }
.rule::before,.rule::after{ content:""; height:1px; background:var(--line); flex:1; }
.rule .dot{ width:6px; height:6px; border:1px solid var(--accent-2); border-radius:50%; }

/* ---------- footer ---------- */
.site-footer{ background:var(--sumi); color:var(--washi); padding:clamp(64px,8vw,100px) 0 40px; }
.site-footer a{ color:var(--washi); opacity:.78; transition:opacity .3s; }
.site-footer a:hover{ opacity:1; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.footer-grid h4{ font-size:14px; letter-spacing:.3em; opacity:.6; margin-bottom:18px; font-weight:500; }
.foot-mark{ font-family:var(--font-serif); font-size:34px; letter-spacing:.34em; }
.foot-list{ display:flex; flex-direction:column; gap:12px; font-size:14px; }
.foot-bottom{ margin-top:64px; padding-top:24px; border-top:1px solid rgba(248,244,236,.15);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; opacity:.6; letter-spacing:.08em; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:36px; } }

/* image-slot default look */
image-slot{ background:linear-gradient(135deg,var(--washi-3),var(--washi-2)); display:block; }

/* ---------- subpage: solid header ---------- */
.site-header.solid{
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:0 1px 0 var(--line);
}
.site-header.solid .brand,.site-header.solid .nav a{ color:var(--sumi); }

/* ---------- subpage: page-hero band ---------- */
.page-hero{ padding:clamp(150px,18vh,210px) 0 clamp(60px,8vw,96px); position:relative; overflow:hidden; }
.page-hero .crumb{ font-family:var(--font-latin); font-style:italic; font-size:14px; color:var(--sumi-faint); margin-bottom:22px; display:flex; gap:10px; align-items:center; }
.page-hero .crumb a{ color:var(--sumi-faint); }
.page-hero .crumb a:hover{ color:var(--accent); }
.page-hero h1{ font-size:clamp(40px,6.4vw,84px); letter-spacing:.06em; line-height:1.1; }
.page-hero .en{ font-family:var(--font-latin); font-style:italic; font-size:clamp(16px,1.8vw,22px); color:var(--accent); display:block; margin-top:14px; }
.page-hero .pkanji{ position:absolute; right:2%; top:38%; font-family:var(--font-serif); font-size:clamp(140px,24vw,340px);
  color:var(--accent); opacity:.06; line-height:1; pointer-events:none; user-select:none; }
.page-hero .lead{ margin-top:30px; }