/*
Theme Name: YOGARSPACE
Theme URI: https://yogarspace.ir
Author: OpenAI for YOGARSPACE
Description: Premium one-page WordPress theme for a movement, wellness, creative and retail studio.
Version: 1.0.0
Text Domain: yogarspace
*/

:root{
  --bg:#F6F0E7;
  --paper:#FFFDF8;
  --ink:#1E211C;
  --olive:#4F5A45;
  --sand:#DCCFBC;
  --line:rgba(30,33,28,.14);
  --radius:28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  line-height:1.65;
}
body.rtl{font-family:Tahoma,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.site-shell{overflow:hidden}

.header{
  position:fixed;z-index:50;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 4vw;
  background:rgba(246,240,231,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800;letter-spacing:.18em;font-size:18px}
.nav{display:flex;gap:24px;align-items:center;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.nav .book{border:1px solid var(--ink);padding:10px 16px;border-radius:999px}
.menu-toggle{display:none;background:none;border:0;font-size:24px}

.hero{
  min-height:100vh;
  padding:140px 6vw 72px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end;
}
.eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.65}
.hero h1{
  font-size:clamp(62px,10vw,150px);
  line-height:.82;margin:18px 0 24px;letter-spacing:-.06em;
}
.hero-copy{max-width:620px;font-size:clamp(18px,2vw,28px)}
.hero-visual{
  min-height:70vh;border-radius:var(--radius);
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.22)),
    radial-gradient(circle at 30% 25%,#d9cdbb 0 18%,transparent 19%),
    linear-gradient(140deg,#b8c0ae,#58624e 55%,#242820);
  position:relative;overflow:hidden;
}
.hero-visual:after{
  content:"MOVE\A RECOVER\A CREATE";
  white-space:pre;position:absolute;left:28px;bottom:26px;
  color:#fff;font-size:clamp(26px,4vw,58px);font-weight:700;line-height:1;
  letter-spacing:-.04em;
}

.section{padding:90px 6vw}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}
.section h2{font-size:clamp(42px,6vw,90px);line-height:.95;margin:0;letter-spacing:-.04em}
.section p.lead{max-width:560px;font-size:18px;opacity:.75;margin:0}

.world{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{
  min-height:420px;border-radius:var(--radius);padding:30px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line)
}
.card h3{font-size:clamp(34px,4vw,64px);margin:0;letter-spacing:-.04em}
.card p{max-width:420px;margin:0;font-size:17px}
.card .tag{font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.move{background:linear-gradient(135deg,#dfe5d5,#9ea98e)}
.recover{background:linear-gradient(135deg,#eadfce,#c9b89e)}
.create{background:linear-gradient(135deg,#f2d7cb,#c79f8c)}
.shop{background:linear-gradient(135deg,#d7d7d2,#aaa9a0)}

.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;white-space:nowrap;overflow:hidden;font-size:18px;letter-spacing:.08em
}
.marquee span{display:inline-block;padding-right:50px}

.experiences{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.exp{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:26px;min-height:230px
}
.exp .num{opacity:.45;font-size:12px}
.exp h3{font-size:28px;margin:35px 0 8px}
.exp p{opacity:.7}

.schedule{
  background:var(--olive);color:#fff;border-radius:var(--radius);padding:38px;
  display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center
}
.schedule h3{font-size:clamp(42px,6vw,82px);line-height:.95;margin:0}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{
  display:inline-block;padding:13px 20px;border-radius:999px;border:1px solid currentColor;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase
}
.btn.light{background:#fff;color:var(--olive);border-color:#fff}

.footer{
  padding:56px 6vw 30px;border-top:1px solid var(--line);display:grid;
  grid-template-columns:1.4fr 1fr 1fr;gap:24px
}
.footer .big{font-size:clamp(36px,5vw,72px);font-weight:700;letter-spacing:-.04em}
.footer small{opacity:.6}

@media(max-width:900px){
  .nav{display:none}.menu-toggle{display:block}
  .hero{grid-template-columns:1fr;padding-top:120px}
  .hero-visual{min-height:52vh}
  .world,.experiences,.schedule,.footer{grid-template-columns:1fr}
  .section-head{align-items:start;flex-direction:column}
}