:root{
    --paper:#EDEAE1;
    --paper-deep:#E3DFD3;
    --ink:#20241F;
    --ink-soft:#4B5049;
    --indigo:#2C3E4A;
    --indigo-soft:#54697A;
    --seal:#B5482E;
    --rule:rgba(32,36,31,0.14);
    --max:920px;
  }

  *{box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Noto Serif JP", serif;
    font-weight:400;
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
  }

  [data-i18n]{ }
  html[data-lang="en"] .ja{display:none;}
  html[data-lang="ja"] .en{display:none;}
  html[data-lang="ja"] body{line-height:2.05;}

  h1,h2,h3,.display{
    font-family:"Cormorant Garamond", serif;
    font-weight:400;
    letter-spacing:0.01em;
    margin:0;
  }
  html[data-lang="ja"] h1,
  html[data-lang="ja"] h2,
  html[data-lang="ja"] h3{
    font-family:"Noto Serif JP", serif;
    font-weight:500;
  }

  a{color:var(--indigo); text-decoration:none;}
  a:hover{color:var(--seal);}
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--indigo);
    outline-offset:3px;
  }

  ::selection{ background:var(--indigo); color:var(--paper); }

  /* ---------- Header ---------- */

  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 6vw;
    background:linear-gradient(to bottom, rgba(237,234,225,0.92), rgba(237,234,225,0));
    pointer-events:none;
  }
  header > *{pointer-events:auto;}

  .mark{
    width:38px; height:38px;
    flex:none;
    color:var(--ink);
  }
  .mark svg{ width:100%; height:100%; display:block; }

  nav{
    display:flex;
    align-items:center;
    gap:clamp(14px,3vw,34px);
    font-size:0.86rem;
    letter-spacing:0.03em;
  }
  nav a{ color:var(--ink-soft); }
  nav a:hover{ color:var(--seal); }

  .lang-toggle{
    display:flex;
    border:1px solid var(--rule);
    border-radius:999px;
    overflow:hidden;
    font-family:"Noto Serif JP", serif;
    font-size:0.78rem;
  }
  .lang-toggle button{
    background:none;
    border:none;
    padding:6px 14px;
    cursor:pointer;
    color:var(--ink-soft);
    font-family:inherit;
    font-size:inherit;
  }
  .lang-toggle button[aria-pressed="true"]{
    background:var(--ink);
    color:var(--paper);
  }

  /* ---------- Hero ---------- */

  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 6vw 80px;
    position:relative;
    overflow:hidden;
  }

  .ensou{
    width:min(40vw, 220px);
    aspect-ratio:1/1;
    margin-bottom:clamp(20px,4vw,36px);
    color:var(--ink);
    opacity:0;
    animation:reveal 1.6s ease 0.2s forwards;
  }
  .ensou svg{ width:100%; height:100%; display:block; }
  @keyframes reveal{ to{ opacity:1; } }
  @media (prefers-reduced-motion:reduce){
    .ensou{ animation:none; opacity:1; }
  }

  .hero h1{
    font-size:clamp(2.6rem, 7vw, 4.6rem);
    line-height:1.05;
  }
  .hero .kana{
    display:block;
    font-family:"Noto Serif JP", serif;
    font-weight:400;
    font-size:clamp(1.1rem,2.6vw,1.4rem);
    color:var(--ink-soft);
    margin-top:10px;
    letter-spacing:0.08em;
  }
  .hero .tagline{
    margin-top:26px;
    font-size:clamp(1rem,2vw,1.2rem);
    color:var(--indigo-soft);
    max-width:34ch;
    font-style:italic;
  }
  html[data-lang="ja"] .hero .tagline{ font-style:normal; }

  .hero .place{
    margin-top:34px;
    font-size:0.85rem;
    letter-spacing:0.06em;
    color:var(--ink-soft);
  }

  /* ---------- Sections ---------- */

  section{
    max-width:var(--max);
    margin:0 auto;
    padding:min(14vw,120px) 6vw;
  }

  .rule{
    max-width:var(--max);
    margin:0 auto;
    border:none;
    border-top:1px solid var(--rule);
  }

  .section-head{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:clamp(36px,6vw,60px);
  }
  .section-head .en-title{
    font-size:clamp(1.9rem,4vw,2.6rem);
  }
  .section-head .kana-title{
    font-family:"Noto Serif JP", serif;
    color:var(--ink-soft);
    font-size:0.95rem;
    letter-spacing:0.14em;
  }
  html[data-lang="ja"] .section-head .kana-title{ display:none; }

  .prose{
    max-width:64ch;
  }
  .prose p{ margin:0 0 1.3em; }
  .prose p:last-child{ margin-bottom:0; }

  .about-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:clamp(30px,6vw,80px);
    align-items:start;
  }
  @media (max-width:760px){
    .about-grid{ grid-template-columns:1fr; }
    .about-grid img{ order:-1; max-width:220px; margin:0 auto; }
  }
  .about-grid img{
    width:100%;
    display:block;
    filter:grayscale(15%);
    border:1px solid var(--rule);
  }

  .story-block{ margin-top:56px; }
  .story-block h3{
    font-size:1.5rem;
    margin-bottom:18px;
    color:var(--indigo);
  }

  .chair-photo{
    margin:56px 0 0;
    max-width:560px;
  }
  .chair-photo img{
    width:100%;
    display:block;
    filter:grayscale(12%);
  }
  .chair-photo figcaption{
    margin-top:12px;
    font-size:0.82rem;
    letter-spacing:0.03em;
    color:var(--ink-soft);
  }

  .benefit-list{
    list-style:none;
    margin:0; padding:0;
    display:grid;
    gap:14px;
    margin-top:56px;
  }
  .benefit-list li{
    padding:16px 0;
    border-top:1px solid var(--rule);
    max-width:56ch;
  }
  .benefit-list li:last-child{ border-bottom:1px solid var(--rule); }

  .practice-details{
    margin-top:64px;
    display:grid;
    grid-template-columns:repeat(3,auto);
    gap:clamp(24px,5vw,64px);
    justify-content:start;
  }
  @media (max-width:640px){
    .practice-details{ grid-template-columns:1fr; }
  }
  .practice-details dt{
    font-size:0.78rem;
    letter-spacing:0.1em;
    color:var(--ink-soft);
    margin-bottom:6px;
  }
  .practice-details dd{
    margin:0;
    font-size:1.15rem;
  }
  .practice-details dd .accent{ color:var(--ink); }

  /* ---------- Contact ---------- */

  .contact-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
  }
  .contact-line{
    font-size:1.3rem;
  }
  .contact-line a{ border-bottom:1px solid var(--rule); padding-bottom:2px; }
  .socials{
    display:flex;
    gap:22px;
    margin-top:8px;
  }
  .socials a{ color:var(--ink-soft); font-size:0.85rem; letter-spacing:0.05em; }

  footer{
    padding:40px 6vw 60px;
    text-align:center;
    font-size:0.78rem;
    color:var(--ink-soft);
    letter-spacing:0.03em;
  }

  @media (max-width:640px){
    header{ padding:16px 5vw; }
    nav{ display:none; }
  }

/* ---------- Blog list ---------- */

.blog-hero{
  padding:160px 6vw 60px;
  max-width:var(--max);
  margin:0 auto;
}
.blog-hero h1{
  font-size:clamp(2.2rem,5vw,3.2rem);
}
.blog-hero p{
  margin-top:18px;
  color:var(--ink-soft);
  max-width:56ch;
}

.post-list{
  max-width:var(--max);
  margin:0 auto;
  padding:0 6vw 120px;
  display:flex;
  flex-direction:column;
}
.post-list a{
  display:block;
  padding:32px 0;
  border-top:1px solid var(--rule);
  color:var(--ink);
}
.post-list a:last-child{ border-bottom:1px solid var(--rule); }
.post-list a:hover .post-title{ color:var(--seal); }
.post-date{
  font-size:0.8rem;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  display:block;
  margin-bottom:8px;
}
.post-title{
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(1.5rem,3vw,2rem);
  display:block;
  margin-bottom:10px;
  transition:color 0.2s ease;
}
html[data-lang="ja"] .post-title{
  font-family:"Noto Serif JP", serif;
  font-weight:500;
}
.post-excerpt{
  color:var(--ink-soft);
  max-width:60ch;
  font-size:0.98rem;
}

/* ---------- Single post ---------- */

.post-article{
  max-width:680px;
  margin:0 auto;
  padding:160px 6vw 100px;
}
.post-article .post-date{ margin-bottom:18px; }
.post-article h1{
  font-size:clamp(2rem,5vw,2.8rem);
  margin-bottom:36px;
}
html[data-lang="ja"] .post-article h1{
  font-family:"Noto Serif JP", serif;
  font-weight:500;
}
.post-body p{
  margin:0 0 1.5em;
  max-width:64ch;
}
.post-body p:last-child{ margin-bottom:0; }
.back-link{
  display:inline-block;
  margin-top:56px;
  font-size:0.85rem;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}
.back-link:hover{ color:var(--seal); }