:root{
  --ink:#1c141b;
  --paper:#f6efe6;
  --paper-soft:#fbf7f2;
  --lavender:#e0d3e9;
  --lavender-deep:#cbb8d9;
  --lavender-fade:#eadff0;
  --rust:#c95f2f;
  --rust-deep:#a34a24;
  --cream:#f7f0e7;
  --shadow:0 18px 42px rgba(65,35,73,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg,#eee6f3 0%, #e5d9ee 100%);
  font-family:Arial, Helvetica, sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site{
  width:min(1440px, 100%);
  margin:0 auto;
  background:var(--paper-soft);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.micro{
  font:11px/1.55 "Courier New", monospace;
  letter-spacing:.18em;
}
.script{
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
}
.texture{position:relative; isolation:isolate}
.texture::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
  background-image:radial-gradient(rgba(38,26,35,.18) .45px, transparent .65px);
  background-size:3px 3px;
  opacity:.14;
  mix-blend-mode:multiply;
}

.site-nav{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 40px 0;
}
.nav-mark img{
  width:128px;
  height:128px;
  object-fit:contain;
}
.site-nav nav{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px;
  letter-spacing:.06em;
}
.site-nav nav a{
  position:relative;
}
.site-nav nav a:hover::after,
.site-nav nav a:focus-visible::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:1px;
  background:currentColor;
}

.hero{
  min-height:680px;
  background:
    linear-gradient(90deg,
      rgba(231,220,239,.98) 0%,
      rgba(231,220,239,.94) 20%,
      rgba(231,220,239,.82) 35%,
      rgba(231,220,239,.56) 46%,
      rgba(231,220,239,.26) 58%,
      rgba(231,220,239,.04) 70%,
      rgba(231,220,239,0) 100%),
    url("header-lunge-clean.png") center right / cover no-repeat;
  box-shadow:inset 0 -30px 48px rgba(90,53,110,.05);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 32%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:5;
  display:flex;
  align-items:flex-end;
  min-height:500px;
  padding:64px 40px 80px;
}
.hero-copy{
  max-width:760px;
}
.hero h1{
  margin:0 0 28px;
  font:400 clamp(64px, 6.1vw, 108px)/.94 Georgia, "Times New Roman", serif;
  letter-spacing:-.045em;
}
.hero .micro{
  font-size:14px;
  color:rgba(28,20,27,.82);
}

.soft{
  min-height:630px;
  padding:42px 46px 54px;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(8,7,22,.8) 0%, rgba(8,7,22,.52) 45%, rgba(8,7,22,.12) 78%, rgba(8,7,22,.04) 100%),
    url("soft-sunday-blue.jpg") center 50%/cover no-repeat;
}
.soft-layout{
  display:grid;
  grid-template-columns:1fr 190px;
  gap:24px;
  position:relative;
  z-index:2;
}
.soft h2{
  margin:30px 0 10px;
  font-size:clamp(80px, 11vw, 148px);
  line-height:.76;
  letter-spacing:-.07em;
  font-weight:900;
}
.soft .script{
  font-size:clamp(34px, 5vw, 60px);
  margin:0 0 18px;
}
.lede{
  max-width:640px;
  font:18px/1.4 Georgia, "Times New Roman", serif;
}
.soft-side{
  padding-top:34px;
  line-height:1.9;
  text-align:left;
}
.returning{
  position:absolute;
  right:46px;
  bottom:30px;
  margin:0;
  z-index:3;
  font:italic 30px Georgia, serif;
  transform:rotate(-4deg);
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:12px 18px;
  margin-top:16px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.08em;
  font-weight:700;
  transition:transform .18s ease, opacity .18s ease;
}
.pill:hover{transform:translateY(-2px);opacity:.9}
.pill.light{background:var(--cream); color:var(--ink)}
.pill.outline{border:1px solid var(--ink); color:var(--ink)}

.paper{background:var(--paper)}
.practice,
.archive,
.about,
.host,
.footer{position:relative}

.practice{padding:30px}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:18px;
}
.section-head h2,
.archive-head h2,
.host h2{
  margin:0 0 6px;
  font:400 clamp(42px, 4.8vw, 66px)/1 Georgia, "Times New Roman", serif;
  letter-spacing:-.04em;
}
.practice-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:16px;
}
.current-event{
  min-height:285px;
  padding:28px;
  color:#fff;
  background:
    linear-gradient(110deg,rgba(76,58,106,.92) 0%, rgba(133,103,151,.68) 50%, rgba(110,84,126,.24) 78%),
    url("yogidelic-dream.jpg") center/cover no-repeat;
}
.current-event h3{
  margin:8px 0 0;
  font:400 47px/1.02 Georgia, "Times New Roman", serif;
}
.small-script{font-size:28px; margin:0 0 12px}
.current-event > p:not(.micro,.script){font:17px/1.42 Georgia, "Times New Roman", serif; max-width:460px}

.soft-soon{
  min-height:285px;
  display:grid;
  grid-template-columns:1fr .92fr;
  background:#e6cee8;
}
.soft-soon-copy{padding:28px}
.soft-soon-copy h3{margin:8px 0; font:400 43px/1.04 Georgia, "Times New Roman", serif}
.soft-soon-copy > p:not(.micro){font:16px/1.45 Georgia, "Times New Roman", serif}
.soft-soon-image{background:url("flower.jpg") center/cover no-repeat}

.archive{padding:18px 18px 26px}
.archive-head{padding:0 8px 10px; border-bottom:1px solid rgba(0,0,0,.22)}
.archive-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  margin-top:10px;
}
.archive-card{
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
  padding:18px;
  color:#fff;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.archive-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(transparent 34%, rgba(0,0,0,.64) 100%);
}
.archive-card h3{margin:0; font:25px Georgia, "Times New Roman", serif}
.archive-card p{margin:4px 0 0; font:italic 17px Georgia, "Times New Roman", serif}
.archive-card span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;
}
.asana{background-image:url("archive-asana.png")}
.pranayama{background-image:url("lake.jpg")}
.dhyana{background-image:url("zinnia.jpg")}
.svadhyaya{background-image:url("archive-svadhyaya.png")}

.about{
  display:grid;
  grid-template-columns:.86fr 1.22fr .62fr;
  background:#f4ede4;
  min-height:380px;
}
.about-photo{
  min-height:380px;
  background:url("dre-headshot.jpg") center 28%/cover no-repeat;
}
.about-copy{
  padding:34px 38px;
  background:linear-gradient(135deg, #f5eee5 0%, #f5eee5 76%, #dfd2e8 100%);
}
.about-copy h2{
  margin:7px 0 14px;
  font-size:54px;
}
.about-copy > p:not(.micro){font:18px/1.45 Georgia, "Times New Roman", serif}
.about-side{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 20px;
  background:#cdb7da;
  text-align:left;
  line-height:2.05;
}

.host{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  min-height:420px;
  background:var(--rust);
  color:#fff;
}
.host-copy{
  padding:34px 40px;
  background:linear-gradient(135deg, #db6a38 0%, #d35929 68%, #ba4b22 100%);
}
.host h2{
  font-size:clamp(58px, 7vw, 86px);
  color:var(--ink);
}
.host-copy > p:not(.micro){font:18px/1.45 Georgia, "Times New Roman", serif; max-width:500px}
.host-image{
  background:
    linear-gradient(90deg, rgba(192,72,25,.22), rgba(80,20,8,.08)),
    url("soft-sunday-orange.jpg") center/cover no-repeat;
}

.footer{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  padding:22px 34px;
  background:linear-gradient(90deg, #c6a8de 0%, #dbc3ef 50%, #bb9fd2 100%);
}
.footer img{width:78px; height:78px; object-fit:contain}
.footer-tag{margin:0; font:22px/1.2 Georgia, "Times New Roman", serif}
.footer-links{display:flex; gap:20px; flex-wrap:wrap; justify-content:flex-end}

@media (max-width: 980px){
  .site-nav{padding:20px 24px 0}
  .site-nav nav{gap:18px; font-size:12px}
  .nav-mark img{width:104px;height:104px}
  .hero{min-height:600px}
  .hero-inner{padding:48px 24px 64px; min-height:430px}
  .hero h1{font-size:clamp(52px, 7vw, 86px)}
  .practice-grid,.about,.host{grid-template-columns:1fr}
  .soft-soon{grid-template-columns:1fr}
  .soft-soon-image{min-height:220px}
  .about-side{min-height:120px; justify-content:flex-start}
  .host-image{min-height:330px}
}

@media (max-width: 760px){
  .site{width:100%}
  .site-nav{flex-direction:column; align-items:flex-start; gap:8px}
  .site-nav nav{flex-wrap:wrap; gap:16px}
  .hero{
    min-height:560px;
    background:
      linear-gradient(180deg,
        rgba(231,220,239,.96) 0%,
        rgba(231,220,239,.90) 26%,
        rgba(231,220,239,.72) 44%,
        rgba(231,220,239,.34) 63%,
        rgba(231,220,239,.08) 84%,
        rgba(231,220,239,0) 100%),
      url("header-lunge-clean.png") center right / cover no-repeat;
  }
  .hero-inner{align-items:flex-start; min-height:360px; padding-top:28px}
  .hero-copy{max-width:430px}
  .hero h1{font-size:46px; line-height:.97; margin-bottom:18px}
  .hero .micro{font-size:12px}
  .soft{padding:34px 20px 46px; min-height:640px}
  .soft-layout{grid-template-columns:1fr}
  .soft h2{font-size:74px}
  .soft-side{display:none}
  .returning{right:24px; bottom:24px; font-size:24px}
  .section-head{flex-direction:column; align-items:flex-start}
  .archive-grid{grid-template-columns:1fr 1fr}
  .footer{grid-template-columns:auto 1fr; gap:14px}
  .footer-links{grid-column:1 / -1; justify-content:flex-start}
}

@media (max-width: 520px){
  .archive-grid{grid-template-columns:1fr}
  .current-event h3{font-size:39px}
  .soft-soon-copy h3{font-size:38px}
  .footer img{width:64px;height:64px}
  .footer-tag{font-size:19px}
}

/* ===== mobile header refinement =====
   Keep desktop unchanged.
   On phones: show more of the lunge pose and move the Yogidelic mark to the right.
*/
@media (max-width: 760px){
  .site-nav{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .nav-mark{
    align-self:flex-end;
  }

  .site-nav nav{
    justify-content:flex-start;
  }

  .hero{
    background:
      linear-gradient(180deg,
        rgba(231,220,239,.96) 0%,
        rgba(231,220,239,.90) 24%,
        rgba(231,220,239,.70) 43%,
        rgba(231,220,239,.34) 62%,
        rgba(231,220,239,.08) 82%,
        rgba(231,220,239,0) 100%),
      url("header-lunge-clean.png") center center / cover no-repeat;
  }
}
.about-side {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 48px 24px !important;
}

.about-side-text {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width: 980px) {
  .about-side {
    min-height: 180px !important;
  }
}