﻿/* ──────────────────────────────────────────────────────────────
   Yoga Aaria — styles
   Off-white cream + sage / muted lavender accent
   ────────────────────────────────────────────────────────────── */

:root{
  --bg:           #FFFFFF;
  --bg-warm:      #FBFAF7;
  --bg-card:      #FFFFFF;
  --bg-soft:      #F8F8F5;

  --ink:          #3A3933;
  --ink-soft:     #5C574E;
  --ink-mute:     #94897A;
  --border:       #E3DCCB;
  --border-soft:  #EFE9D9;

  --sage:         oklch(0.66 0.038 138);   /* header bar / brand */
  --sage-soft:    oklch(0.88 0.025 138);
  --sage-deep:    oklch(0.52 0.045 138);
  --sage-tint:    oklch(0.94 0.020 138);

  --lavender:      oklch(0.74 0.040 305);
  --lavender-soft: oklch(0.92 0.022 305);
  --lavender-deep: oklch(0.55 0.050 305);

  --line:         oklch(0.70 0.045 30);   /* warm clay accent line */

  --serif: "Lora","Times New Roman",serif;
  --sans:  "BIZ UDPGothic","Hiragino Sans","Yu Gothic",sans-serif;
  --en:    "Lora","Times New Roman",serif;
  --mono:  ui-monospace,monospace;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius-lg: 18px;
  --radius-md: 14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.85;-webkit-font-smoothing:antialiased;letter-spacing:.02em}
body{overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ── shared type ────────────────────────────────────── */
.h-jp{ font-family:var(--serif); font-weight:500; letter-spacing:.08em; line-height:1.6; }
.h-en{ font-family:var(--en); font-weight:300; font-style:italic; letter-spacing:.18em; color:var(--ink-soft); }
.h-en-cap{ font-family:var(--en); font-weight:400; letter-spacing:.32em; text-transform:uppercase; font-size:.72rem; color:var(--ink-mute); }
.mono{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--ink-mute); text-transform:uppercase; }

/* ── placeholder image ─────────────────────────────── */
.ph{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), transparent 34%),
    radial-gradient(circle at 78% 72%, rgba(151,174,145,.20), transparent 32%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(60,55,49,.035) 14px 15px),
    linear-gradient(180deg, #EFE7D5, #DDD2B9);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-soft);
}
.ph--sage{ background:
  repeating-linear-gradient(135deg, transparent 0 14px, rgba(90,120,90,.05) 14px 15px),
  linear-gradient(180deg, oklch(0.92 0.025 138), oklch(0.82 0.04 138));
}
.ph--lav{ background:
  repeating-linear-gradient(135deg, transparent 0 14px, rgba(120,100,140,.05) 14px 15px),
  linear-gradient(180deg, oklch(0.92 0.022 305), oklch(0.82 0.035 305));
}
.ph--dim{ background:
  repeating-linear-gradient(135deg, transparent 0 14px, rgba(60,55,49,.08) 14px 15px),
  linear-gradient(180deg, #C8BCA5, #A99A80); color:#FBF9F6;
}
.ph::before{
  content:"";
  position:absolute;
  inset:auto auto -18% -10%;
  width:58%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  filter:blur(2px);
}
.ph::after{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:inherit;
}
.ph .lbl{ display:none; }

/* ── HEADER ────────────────────────────────────────── */
.header{
  background: transparent;
  color: #FBF9F6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}
.header .container{
  max-width: none;
  width: 100%;
  padding-inline: clamp(16px, 2vw, 32px);
}
.header__row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 0;
  gap: 24px;
}
.header__brand{
  display:inline-flex;
  line-height:1.2;
}
.header__brand-badge{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(58,57,51,.06);
}
.header__brand-logo{
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.header__brand-wordmark{
  display:block;
  width: clamp(132px, 11vw, 164px);
  flex-shrink: 0;
}
.header__brand-wordmark img{
  display:block;
  width:100%;
  height: auto;
}
.header__menubtn{
  display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center;
  width:76px; height:76px; border-radius:50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(58,57,51,.06);
}
.header__menubtn span{ display:block; width:24px; height:1px; background:var(--ink); }

@media (max-width: 640px){
  .header .container{ padding-inline: 12px; }
  .header__row{ padding:16px 0; }
  .header__brand-badge{ padding: 11px 16px; gap: 10px; }
  .header__brand-logo{ width: 22px; height: 22px; }
  .header__brand-wordmark{
    width: 116px;
  }
  .header__menubtn{ width:58px; height:58px; }
  .header__menubtn span{ width:18px; }
}

/* mobile drawer */
.drawer{
  position: fixed; inset: 0 0 0 auto; width: 80%; max-width: 320px;
  background: var(--sage); color:#FBF9F6;
  transform: translateX(100%); transition: transform .35s ease;
  z-index: 50; padding: 28px 26px; display:flex; flex-direction:column; gap:22px;
}
.drawer.is-open{ transform: translateX(0); }
.drawer__close{
  align-self: flex-end; width: 36px; height: 36px;
  border:1px solid rgba(255,255,255,.4); border-radius:50%;
  font-size: 18px;
}
.drawer a{ display:block; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.18); font-size:.95rem; letter-spacing:.1em; }
.scrim{ position:fixed; inset:0; background: rgba(40,35,30,.4); opacity:0; pointer-events:none; transition: opacity .3s; z-index: 45; }
.scrim.is-open{ opacity:1; pointer-events:auto; }

/* ── HERO ──────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  padding: 0;
  display:flex;
  align-items:stretch;
  background:#d8d0c2;
}
.hero__media{
  position:absolute;
  inset:0;
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.hero__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(34,31,27,.46) 0%, rgba(34,31,27,.26) 30%, rgba(248,244,236,.06) 64%, rgba(248,244,236,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 28%, rgba(34,31,27,.1) 100%);
}
.hero__inner{
  width:100%;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  position:relative;
  z-index:2;
  padding-top: clamp(100px, 14vw, 160px);
  padding-bottom: clamp(52px, 8vw, 88px);
}

.hero__copy{
  max-width:min(560px, 92%);
  padding: 0;
  position:relative;
  z-index:2;
}
.hero__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 18px;
  font-size: .72rem;
  letter-spacing: .18em;
  color: rgba(248,244,236,.86);
  text-shadow: 0 2px 10px rgba(34,31,27,.18);
}
.hero__eyebrow::before{
  content:"";
  width: 36px;
  height: 1px;
  background: rgba(248,244,236,.62);
}
.hero__h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  letter-spacing: .06em; line-height: 1.3;
  color: #fbf8f1;
  margin-bottom: 24px;
  text-shadow: 0 12px 30px rgba(34,31,27,.2);
}
.hero__h1 .br{ display:block; }
.hero__lede{
  font-size: clamp(.96rem, 1.15vw, 1.08rem);
  color: rgba(251,248,241,.88);
  line-height: 2;
  letter-spacing: .04em;
  margin-bottom: 18px;
  max-width: 460px;
  text-shadow: 0 4px 20px rgba(34,31,27,.15);
}
.hero__rule{ width:54px; height:1px; background: rgba(251,248,241,.52); margin: 20px 0 18px; }
.hero__sub-en{
  font-family: var(--en); font-style: italic; font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  letter-spacing: .08em;
  color: rgba(251,248,241,.74);
  line-height: 1.8;
  margin-bottom: 34px;
  max-width: 460px;
  text-shadow: 0 4px 20px rgba(34,31,27,.12);
}
.btn{
  display:inline-flex; align-items:center; gap: 12px;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: .85rem; letter-spacing: .12em;
  transition: transform .2s, background .25s, color .25s, border-color .25s;
  font-family: var(--sans);
}
.btn:hover{ transform: translateY(-1px); }
.btn .ico{ width:18px; height:18px; }
.btn--line{ background:#06C755; color:#fff; }
.btn--line:hover{ background:#05B14A; }
.btn--mosh{
  background: rgba(248,244,236,.16);
  color: #fbf8f1;
  border: 1px solid rgba(248,244,236,.38);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(34,31,27,.12);
}
.btn--mosh:hover{ background: rgba(248,244,236,.24); }
.btn--ghost{ background: transparent; color: var(--ink); border:1px solid var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--bg); }
.btn--ig{ background:#C0876B; color:#fff; }
.btn--ig:hover{ background:#A8745A; }

@media (max-width: 900px){
  .hero__inner{ align-items:flex-end; padding-bottom: 34px; }
  .hero__copy{ max-width: 100%; }
}
@media (max-width: 640px){
  .hero{ min-height: 88svh; }
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(34,31,27,.22) 0%, rgba(34,31,27,.1) 20%, rgba(34,31,27,.32) 62%, rgba(248,244,236,.62) 100%),
      linear-gradient(90deg, rgba(34,31,27,.28) 0%, rgba(34,31,27,.06) 100%);
  }
  .hero__inner{ min-height: 88svh; }
  .hero__copy{
    width:100%;
    padding: 0;
  }
  .hero__h1{ font-size: clamp(1.9rem, 10vw, 2.7rem); }
  .hero__eyebrow{
    margin-bottom: 14px;
    font-size: .66rem;
    letter-spacing: .14em;
  }
  .hero__lede{
    max-width: 320px;
    font-size: .92rem;
  }
  .hero__sub-en{
    font-size: .92rem;
    line-height: 1.7;
  }
  .btn{
    justify-content:center;
    width:min(280px, 100%);
  }
}

/* ── INTRO BRIDGE ─────────────────────────────────── */
.intro-bridge{
  position: relative;
  margin-top: 0;
  padding: clamp(48px, 7vw, 80px) 0;
  z-index: 3;
}
.intro-bridge__panel{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr);
  gap: clamp(24px, 4vw, 54px);
  align-items:end;
  padding: 0;
}
.intro-bridge__title{
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  line-height: 1.55;
  letter-spacing: .08em;
  font-weight: 500;
  color: var(--ink);
}
.intro-bridge__lead{
  margin-top: 16px;
  max-width: 620px;
  font-size: .92rem;
  line-height: 2.05;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.intro-bridge__actions{
  display:flex;
  flex-direction:column;
  gap: 16px;
  padding: 0;
  align-self:center;
}
.intro-bridge__note{
  font-size: .78rem;
  line-height: 1.9;
  letter-spacing: .08em;
  color: var(--ink-mute);
}
.intro-bridge__ctas{
  display:flex;
  flex-direction:column;
  gap: 12px;
  width: min(100%, 360px);
}
.intro-bridge__btn{
  justify-content:center;
  width: 100%;
}
.intro-bridge__btn--line{
  background:#06C755;
  color:#fff;
}
.intro-bridge__btn--line:hover{
  background:#05B14A;
}
.intro-bridge__btn--ghost{
  background: transparent;
  color: var(--sage-deep);
  border: 1px solid rgba(157,174,156,.56);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.intro-bridge__btn--ghost:hover{
  background: #EEE7DA;
  color: var(--sage-deep);
  border-color: rgba(157,174,156,.42);
}
@media (max-width: 860px){
  .intro-bridge{
    margin-top: 0;
  }
  .intro-bridge__panel{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px){
  .intro-bridge{
    padding: 40px 0 56px;
  }
  .intro-bridge__panel{
    gap: 20px;
  }
}

/* ── SECTION HEAD ──────────────────────────────────── */
.section-head{ text-align:center; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .h-jp{
  font-family: var(--serif); font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  letter-spacing: .14em; font-weight: 500; color: var(--ink);
}
.section-head .h-en-cap{ display:block; margin-bottom: 10px; }
.section-head .h-en{ display:block; margin-top: 10px; font-size: .9rem; letter-spacing: .2em; }

/* ── CONCERNS (pill chips) ─────────────────────────── */
.concerns{
  padding: clamp(72px, 9vw, 120px) 0 clamp(40px, 5vw, 64px);
}
.concerns .container{
  max-width: none;
  width: 100%;
  padding-inline: 0;
}
.concerns__field{
  position: relative;
  overflow: visible;
  padding: clamp(72px, 9vw, 120px) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  border-radius: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(221,231,220,.52), transparent 26%),
    radial-gradient(circle at 84% 22%, rgba(241,230,212,.56), transparent 24%),
    radial-gradient(circle at 68% 82%, rgba(233,239,228,.5), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #efffe0 34%, #ffefcf 68%, #f8ffef 100%);
}
.concerns__head{
  position: relative;
  z-index: 1;
  text-align:center;
  margin-bottom: clamp(28px, 4vw, 42px);
}
.concerns__head .h-en-cap{
  display:block;
  margin-bottom: 10px;
  font-size: .72rem;
  letter-spacing: .32em;
}
.concerns__head .h-jp{
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  letter-spacing: .14em;
  font-weight: 500;
  color: var(--ink);
}
.concerns__lead{
  margin-top: 16px;
  font-size: .9rem;
  line-height: 2.05;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-align:center;
}
.concerns__row{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  max-width: 920px;
  margin: 0 auto;
}
.concern{
  display:flex;
  align-items:center;
  gap: 14px;
  min-height: 96px;
  padding: 16px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 26px rgba(60,55,49,.06);
}
.concern__art{
  width: 84px;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  flex-shrink: 0;
}
.concern__art::before{
  content:"";
  position:absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,242,.94) 0%, rgba(255,246,242,.48) 72%, rgba(255,246,242,0) 100%);
  filter: blur(5px);
}
.concern__art img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
}
.concern__text{
  display:flex;
  flex-direction:column;
  gap: 4px;
  text-align:left;
}
.concern__title{
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink);
}
.concern__sub{
  font-size: .74rem;
  line-height: 1.8;
  letter-spacing: .08em;
  color: var(--ink-mute);
}
@media (max-width: 900px){
  .concerns__row{
    grid-template-columns: 1fr;
    max-width: 580px;
  }
}
@media (max-width: 640px){
  .concerns .container{
    padding-inline: 0;
  }
  .concerns__field{
    padding: 56px var(--gutter);
  }
  .concerns__row{
    gap: 14px;
  }
  .concern__art{
    width: 68px;
  }
  .concern__title{
    font-size: .94rem;
  }
  .concern__sub{
    font-size: .72rem;
  }
}

/* ── ABOUT ─────────────────────────────────────────── */
.about{
  padding: clamp(48px, 7vw, 80px) 0;
  position: relative;
}
.about .container{
  max-width: none;
  width: 100%;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-right: 0;
}
.about__panel{
  display:grid;
  grid-template-columns: minmax(300px, 560px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items:center;
}
.about__panel + .about__panel{
  margin-top: 150px;
}
.about__media{
  order: 2;
  position: relative;
  min-height: clamp(440px, 52vw, 680px);
  align-self: stretch;
  width: 100%;
  justify-self: stretch;
}
.about__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
}
.about__veil{
  display:none;
}
.about__content{
  order: 1;
  width: min(100%, 520px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: clamp(10px, 2vw, 24px) 0 clamp(10px, 2vw, 24px) clamp(8px, 1.2vw, 12px);
}
.about__content h3{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: .12em;
  margin: 10px 0 20px;
}
.about__lead{
  font-size: .93rem;
  color: var(--ink-soft);
  line-height: 2.15;
  margin-bottom: 0;
  max-width: 33em;
}
.about__sublead{
  margin-top: 18px;
  font-size: .84rem;
  color: var(--ink-mute);
  line-height: 2;
  letter-spacing: .05em;
  max-width: 32em;
}
.about__panel--reverse{
  grid-template-columns: minmax(300px, 560px) minmax(0, 1fr);
  align-items: start;
  padding-top: 0;
}
.about__panel--reverse .about__media{
  order: 2;
}
.about__panel--reverse .about__content{
  order: 1;
  padding-left: 0;
  padding-right: clamp(8px, 1.2vw, 12px);
  justify-content: flex-start;
}
.about__content--secondary h3{
  max-width: 12em;
}

.profile{
  display:flex; align-items:flex-start; gap: 20px;
  margin-top: 28px;
  padding: 0;
}
.profile__avatar{
  width: 92px; height: 92px;
  border-radius: 50%; overflow:hidden;
  background: var(--lavender-soft);
  flex-shrink: 0;
}
.profile__avatar img{ width:100%; height:100%; object-fit:cover; }
.profile__head{ font-size:.78rem; letter-spacing:.18em; color:var(--ink-mute); margin-bottom:4px; }
.profile__head strong{ font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin-left:14px; font-weight:500; letter-spacing:.08em; }
.profile p{ font-size:.85rem; color: var(--ink-soft); line-height: 2; }
.profile__rate{
  display:flex;
  align-items:baseline;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(227,220,203,.72);
  font-size:.78rem;
  color:var(--ink-mute);
  letter-spacing:.1em;
}
.profile__rate-label{
  text-transform: uppercase;
}
.profile__rate .stars{
  letter-spacing:.08em;
  color: var(--sage-deep);
  font-family: var(--en);
  font-size: 1.05rem;
}
.profile__rate-count{
  color: var(--ink-soft);
  letter-spacing: .06em;
}
@media (max-width: 880px){
  .about .container{
    max-width: var(--container);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .about__panel{
    grid-template-columns: 1fr;
  }
  .about__content{
    width:100%;
    padding: 0;
  }
  .about__media{
    order: 1;
    min-height: 360px;
  }
  .about__content{
    order: 2;
    padding-left: 0;
  }
  .about__panel--reverse .about__media{
    order: 1;
  }
  .about__panel--reverse .about__content{
    order: 2;
    padding-right: 0;
  }
  .profile{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 640px){
  .about{
    padding-top: 40px;
  }
  .about__content{
    padding: 0;
  }
  .profile__avatar{
    width: 78px;
    height: 78px;
  }
  .profile__head strong{
    display:block;
    margin: 8px 0 0;
  }
  .profile__rate{
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .about__panel + .about__panel{
    margin-top: 88px;
  }
  .about__panel--reverse{
    padding-top: 0;
  }
}

/* ── LESSONS ───────────────────────────────────────── */
.lessons{ padding: clamp(32px, 4vw, 52px) 0 clamp(84px, 11vw, 150px); }
.lessons__head{
  display:flex; align-items:baseline; justify-content:center; gap: 18px;
  margin-bottom: clamp(34px, 5vw, 58px);
}
.lessons__head .h-jp{ font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing:.14em; }
.lessons__head .meta{ font-size: .78rem; color: var(--ink-mute); letter-spacing: .12em; padding-left: 18px; border-left: 1px solid var(--border); }
.lesson-list{
  display:flex;
  flex-direction:column;
  gap: clamp(56px, 8vw, 104px);
}
.lesson-block{
  display:grid;
  grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
  align-items:start;
}
.lesson-block--reverse{
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
}
.lesson-block--reverse .lesson-block__copy{ order: 2; }
.lesson-block--reverse .lesson-slider{ order: 1; }
.lesson-block__copy{
  display:flex;
  flex-direction:column;
  gap: 0;
  padding-top: 10px;
}
.lesson-block__eyebrow{
  font-family: var(--en);
  color: var(--sage-deep);
  font-size: .82rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.lesson-block__copy h3{
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.7vw, 2.1rem);
  line-height: 1.55;
  letter-spacing: .08em;
  font-weight: 500;
  color: var(--ink);
}
.lesson-block__tags{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 18px;
}
.lesson-block__tag{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(157,174,156,.34);
  background: rgba(249,247,242,.9);
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--sage-deep);
}
.lesson-block__desc{
  margin-top: 22px;
  font-size: .92rem;
  line-height: 2.15;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.lesson-block__specs{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  display:grid;
  gap: 12px;
}
.lesson-block__specs div{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items:start;
}
.lesson-block__specs dt{
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--sage-deep);
  font-weight: 700;
}
.lesson-block__specs dd{
  font-size: .86rem;
  line-height: 1.95;
  color: var(--ink);
}
.lesson-block__actions{
  margin-top: 26px;
}
.lesson-block__btn{
  background: var(--sage-deep);
  color: #fff;
  min-width: 220px;
  justify-content:center;
}
.lesson-block__btn:hover{
  background: #697b67;
}
.lesson-slider{
  position:relative;
}
.lesson-slider__viewport{
  overflow:hidden;
  border-radius: 30px;
  background: #f3ede2;
}
.lesson-slider__track{
  display:flex;
  transition: transform .42s ease;
}
.lesson-slide{
  min-width:100%;
  aspect-ratio: 1.22 / 1;
  background: #efe7d8;
}
.lesson-slide img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.lesson-slider__nav{
  position:absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 22px rgba(60,55,49,.14);
  color: var(--ink);
  font-size: 1.65rem;
  line-height: 1;
}
.lesson-slider__nav--prev{ left: 16px; }
.lesson-slider__nav--next{ right: 16px; }
.lesson-slider__dots{
  display:flex;
  justify-content:center;
  gap: 8px;
  padding-top: 14px;
}
.lesson-slider__dots button{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(148,137,122,.34);
}
.lesson-slider__dots button.is-active{
  background: var(--sage-deep);
}
@media (max-width: 980px){
  .lesson-block,
  .lesson-block--reverse{
    grid-template-columns: 1fr;
  }
  .lesson-block--reverse .lesson-block__copy,
  .lesson-block--reverse .lesson-slider{
    order: initial;
  }
}
@media (max-width: 640px){
  .lessons__head{
    flex-direction:column;
    gap: 8px;
    align-items:center;
    text-align:center;
  }
  .lessons__head .meta{
    border-left: 0;
    padding-left: 0;
  }
  .lesson-block__copy h3{
    font-size: clamp(1.3rem, 7vw, 1.7rem);
  }
  .lesson-block__specs div{
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .lesson-block__btn{
    width: 100%;
  }
  .lesson-slider__viewport{
    border-radius: 30px;
  }
  .lesson-slider__nav{
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
  }
  .lesson-slider__nav--prev{ left: 10px; }
  .lesson-slider__nav--next{ right: 10px; }
}


/* ── FOOD WS ───────────────────────────────────────── */
.food{
  padding: clamp(92px, 11vw, 150px) 0 clamp(84px, 11vw, 140px);
}
.food__intro{
  max-width: 38rem;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.food__title{
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  line-height: 1.5;
  letter-spacing: .12em;
  font-weight: 500;
}
.food__lead{
  margin-top: 24px;
  font-size: .94rem;
  line-height: 2.12;
  color: var(--ink-soft);
}
.food__note{
  margin-top: 22px;
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--ink-mute);
}
.food-band{
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 42vw, 480px);
}
.food-band + .food-band{
  margin-top: clamp(24px, 3vw, 32px);
}
.food-band__media,
.food-band__veil{
  position: absolute;
  inset: 0;
}
.food-band__media{
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transform: scale(1.04);
}
.food-band--chai .food-band__media{
  background-image: url("assets/chai_l.png");
}
.food-band--curry .food-band__media{
  background-image: url("assets/curr_l.jpg");
}
.food-band__veil{
  background:
    linear-gradient(90deg, rgba(250,247,242,.9) 0%, rgba(250,247,242,.74) 30%, rgba(250,247,242,.5) 56%, rgba(250,247,242,.82) 100%),
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 100%);
}
.food-band__inner{
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: grid;
  align-items: center;
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: clamp(48px, 6vw, 76px);
}
.food-item{
  width: min(100%, 38rem);
  padding: 0;
}
.food-item__meta{
  display:flex;
  align-items: baseline;
  gap: 18px;
}
.food-item__titleline{
  display:flex;
  align-items:flex-start;
  gap: 18px;
  margin-top: 10px;
}
.food-item__eyebrow{
  font-family: var(--en);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--sage-deep);
}
.food-item__price{
  font-family: var(--en);
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--sage-deep);
  white-space: nowrap;
}
.food-item h3{
  margin-top: 0;
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.8vw, 1.45rem);
  line-height: 1.8;
  letter-spacing: .08em;
  font-weight: 500;
  color: var(--ink);
}
.food-item__price{
  margin-left: auto;
  align-self: center;
}
.food-item p{
  margin-top: 12px;
  max-width: 36rem;
  font-size: .88rem;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
@media (max-width: 900px){
  .food-item{
    width: min(100%, 34rem);
  }
}
@media (max-width: 780px){
  .food-band{
    min-height: auto;
  }
  .food-band__media{
    background-attachment: scroll;
    transform: none;
  }
  .food-band__veil{
    background: linear-gradient(180deg, rgba(250,247,242,.92) 0%, rgba(250,247,242,.84) 100%);
  }
}
@media (max-width: 560px){
  .food-item__meta{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .food-item__titleline{
    flex-direction: column;
    gap: 6px;
  }
  .food-item__price{
    margin-left: 0;
    align-self: flex-start;
  }
}

/* ── VOICES ────────────────────────────────────────── */
.voices-section{
  padding: clamp(40px, 6vw, 72px) 0 clamp(84px, 11vw, 140px);
}
.voices-section__head{
  margin-bottom: clamp(34px, 5vw, 56px);
}
.voices-section__head .h-jp{
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: .12em;
  font-weight: 500;
}
.voices-section__meta{
  margin-top: 16px;
  font-family: var(--en);
  font-size: .88rem;
  letter-spacing: .08em;
  color: var(--sage-deep);
}
.voices-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 34px);
}
.voice-card{
  display:grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.voice-card__aside{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  padding-right: 22px;
  border-right: 1px solid rgba(170,159,143,.72);
}
.voice-card__avatar{
  width: 88px;
  height: 88px;
}
.voice-card__avatar img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}
.voice-card__quote{
  padding: 2px 0 0 24px;
  font-size: .86rem;
  line-height: 2.05;
  letter-spacing: .03em;
  color: var(--ink-soft);
}
.voice-card__who{
  width: 100%;
  text-align: center;
  font-size: .9rem;
  letter-spacing: .08em;
  color: var(--ink-mute);
}
@media (max-width: 920px){
  .voices-grid{
    grid-template-columns: 1fr;
  }
  .voice-card{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .voice-card__aside{
    padding-right: 0;
    padding-bottom: 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(170,159,143,.72);
    align-items:flex-start;
  }
  .voice-card__who{
    text-align: left;
  }
  .voice-card__quote{
    padding-left: 0;
  }
}

/* ── FLOW ──────────────────────────────────────────── */
.flow{ padding: 0 0 clamp(84px, 11vw, 150px); }
.flow__card{
  background: var(--bg-card);
  border-radius: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 44px);
  padding: clamp(14px, 2vw, 22px) 0 0;
  align-items: stretch;
}
@media (max-width: 980px){ .flow__card{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .flow__card{ grid-template-columns: 1fr; } }

.flow__step{
  position: relative;
  padding: 18px 22px 18px 22px;
  display:flex; flex-direction:column; gap: 10px;
}
.flow__art{
  width: 178px;
  max-width: 100%;
  margin: 8px 0 12px auto;
}
.flow__art img{
  width:100%;
  height:auto;
  display:block;
}
.flow__num{
  position:absolute;
  top: -10px;
  left: 0;
  font-family: var(--en);
  font-size: clamp(4.6rem, 7.5vw, 6.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  color: rgb(179 219 177 / 36%);
}
.flow__step h4{ font-family: var(--serif); font-size: clamp(1.1rem, 1.5vw, 1.28rem); font-weight: 500; letter-spacing: .08em; line-height: 1.7; margin-top: 8px; }
.flow__step p{ font-size: .78rem; color: var(--ink-soft); line-height: 1.95; }
@media (max-width: 980px){
  .flow__step:nth-child(3){
    padding-top: 24px;
  }
}
@media (max-width: 560px){
  .flow__step{
    padding-top: 24px;
  }
  .flow__step:first-child{
    padding-top: 18px;
  }
  .flow__art{
    width: 154px;
    margin-left: auto;
  }
  .flow__num{
    font-size: 4.2rem;
    top: 0;
  }
}

/* ── CTA BAR ───────────────────────────────────────── */
.ctabar{
  background: var(--sage-tint);
  padding: clamp(56px, 7vw, 92px) 0;
  position: relative;
}
.ctabar__inner{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.ctabar__title{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); letter-spacing: .12em;
  color: var(--ink); white-space: nowrap;
}
.ctabar__buttons{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ctabar-btn{
  background: var(--bg-card);
  border-radius: 999px;
  padding: 14px 22px;
  display:flex; align-items:center; gap: 14px;
  border: 1px solid rgba(157,174,156,.52);
  transition: transform .2s, box-shadow .2s;
}
.ctabar-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(60,55,49,.06); }
.ctabar-btn__ico{
  width: 52px; height: 52px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.ctabar-btn__ico img{
  width: 32px;
  height: 32px;
  object-fit: contain;
  display:block;
}
.ctabar-btn__txt{ display:flex; flex-direction:column; gap:2px; }
.ctabar-btn__name{ font-family: var(--serif); font-size: .95rem; letter-spacing: .06em; color: var(--ink); }
@media (max-width: 980px){
  .ctabar__inner{ grid-template-columns: 1fr; text-align:center; }
  .ctabar__buttons{ grid-template-columns: 1fr; }
  .ctabar__title{ white-space: normal; }
}

/* ── FOOTER ────────────────────────────────────────── */
.foot{ background: var(--bg-warm); padding: clamp(72px, 9vw, 120px) 0 clamp(36px, 4vw, 56px); }
.foot__top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: clamp(20px, 3vw, 50px);
  margin-bottom: 38px;
}
@media (max-width: 880px){ .foot__top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .foot__top{ grid-template-columns: 1fr; } }

.foot__logo{
  width: min(100%, 260px);
  margin-bottom: 10px;
}
.foot__logo img{
  width:100%;
  height:auto;
  display:block;
}
.foot__sub{ font-size: .72rem; color: var(--ink-mute); letter-spacing: .12em; }
.foot__col h5{ font-family: var(--serif); font-size: .92rem; font-weight: 500; letter-spacing:.1em; margin-bottom: 14px; }
.foot__col ul{ list-style:none; display:flex; flex-direction:column; gap: 10px; }
.foot__col li{ font-size: .82rem; color: var(--ink-soft); }
.foot__col a:hover{ color: var(--sage-deep); }
.foot__addr{ font-size: .82rem; color: var(--ink-soft); line-height: 2; }
.foot__addr .row{ display:flex; gap: 10px; }
.foot__addr .k{ color: var(--ink-mute); min-width: 64px; letter-spacing:.1em; font-size:.74rem; padding-top: 2px; }
.foot__social{ display:flex; gap:10px; margin-top: 14px; }
.foot__social a{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  transition: .2s;
}
.foot__social a:hover{ transform: translateY(-2px); }
.foot__social img{
  width:22px;
  height:22px;
  object-fit: contain;
  display:block;
}
.foot__bottom{
  border-top: 1px solid var(--border);
  padding-top: 22px;
  text-align:center;
  font-family: var(--en); font-size: .72rem; letter-spacing: .22em; color: var(--ink-mute);
  text-transform: none;
}

/* ── decorative leaves (page-wide) ─────────────────── */
.leaf{ position:absolute; pointer-events:none; opacity:.55; }
.leaf svg{ width:100%; height:auto; }

/* ── reveal ────────────────────────────────────────── */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ── Tweak variants ─────────────────────────────── */
body[data-tone="warm"]{ --bg:#FBF6EE; --bg-warm:#F1E9D9; --bg-soft:#FCF8EF; }
body[data-tone="cool"]{ --bg:#F4F4F3; --bg-warm:#EAEAE9; --bg-soft:#F8F8F7; }

body[data-accent="lavender"] .header{ background: var(--lavender-deep); }
body[data-accent="lavender"] .header__cta{ color: var(--lavender-deep); }
body[data-accent="lavender"] .ctabar{ background: var(--lavender-soft); }
body[data-accent="lavender"] .ctabar-btn__ico--mosh{ background: var(--lavender); }
body[data-accent="lavender"] .profile__rate{ background: var(--lavender-soft); color: var(--lavender-deep); }
body[data-accent="lavender"] .profile__rate .stars{ color: var(--lavender-deep); }
body[data-accent="lavender"] .flow__num{ background: var(--lavender-soft); color: var(--lavender-deep); }
body[data-accent="lavender"] .chip__ico{ color: var(--lavender-deep); }
body[data-accent="lavender"] .lesson__price{ color: var(--lavender-deep); }

body[data-head-font="sans"] .hero__h1,
body[data-head-font="sans"] .section-head .h-jp,
body[data-head-font="sans"] .lessons__head .h-jp,
body[data-head-font="sans"] .card__head .h-jp,
body[data-head-font="sans"] .lesson__name,
body[data-head-font="sans"] .about__card h3,
body[data-head-font="sans"] .ctabar__title,
body[data-head-font="sans"] .flow__step h4,
body[data-head-font="sans"] .header__brand .mark,
body[data-head-font="sans"] .foot__brand,
body[data-head-font="sans"] .ws-item__name,
body[data-head-font="sans"] .ctabar-btn__name,
body[data-head-font="sans"] .profile__head strong{
  font-family: var(--sans); font-weight: 600; letter-spacing: .06em;
}

.visual-copy{
  position:relative;
  z-index:1;
  font-family:var(--en);
  font-size:clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(58,57,51,.58);
}
.visual-copy--small{
  font-size:clamp(.78rem, 1.3vw, .95rem);
  letter-spacing:.22em;
}

.visual-copy{
  position:relative;
  z-index:1;
  font-family:var(--en);
  font-size:clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(58,57,51,.58);
}
.visual-copy--small{
  font-size:clamp(.78rem, 1.3vw, .95rem);
  letter-spacing:.22em;
}
