/* ====================================================
   The Materialistic Yogini — brand stylesheet
   Palette:
     ink     #2b1a3a  (deep plum)
     plum    #4a2148  (aubergine)
     gold    #c9a24a  (antique gold)
     gold-lt #f4d47a
     cream   #f6efe2  (page cream)
     ivory   #fbf7ee  (surface)
     rose    #c46e7a  (rare accent)
   Type:
     display / heads : Cormorant Garamond
     body            : Inter
   ==================================================== */

:root{
  --ink:#2b1a3a;
  --plum:#4a2148;
  --gold:#c9a24a;
  --gold-lt:#f4d47a;
  --cream:#f6efe2;
  --ivory:#fbf7ee;
  --rose:#c46e7a;
  --muted:#6b5f6b;
  --line:rgba(43,26,58,.14);

  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;

  --wrap: 1160px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== NAV ===== */
.nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(20px, 4vw, 56px);
  background:rgba(251,247,238,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__brand{display:flex; align-items:center; gap:12px}
.nav__brand img, .nav__mark{width:38px; height:38px}
.nav__wordmark{
  font-family:var(--serif);
  font-size:22px;
  color:var(--ink);
  letter-spacing:.5px;
}
.nav__wordmark em{font-style:italic; color:var(--muted); font-weight:400; margin-right:4px}
.nav__wordmark i{font-style:italic; color:var(--plum)}
.nav__links{display:flex; gap:28px}
.nav__links a{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); position:relative; padding:6px 0;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold);
}
@media (max-width:640px){ .nav__links{display:none} }

/* nav uses <img> for mark for reliability */
.nav__brand svg{display:none}
.nav__brand::before{
  content:""; width:36px; height:36px;
  background:url('assets/logo-mark.svg') center/contain no-repeat;
}

/* ===== HERO ===== */
.hero{
  position:relative;
  padding: clamp(48px, 8vw, 110px) clamp(20px, 4vw, 56px) 80px;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(201,162,74,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%,  rgba(74,33,72,.08),  transparent 60%),
    var(--ivory);
  overflow:hidden;
}
.hero__grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr 1.2fr;
  align-items:center;
  gap: clamp(24px, 5vw, 72px);
}
.hero__mark{
  position:relative; padding: 8px;
}
.hero__mark img{
  width:min(420px, 100%);
  margin-inline:auto;
  filter: drop-shadow(0 24px 40px rgba(43,26,58,.10));
}
.hero__mark::before{
  content:""; position:absolute; inset:auto 8% 4% 8%;
  height:14px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(43,26,58,.18), transparent 70%);
  filter:blur(6px);
}

.eyebrow{
  font-family:var(--sans);
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 22px;
}
.eyebrow--center{text-align:center; display:block}
.eyebrow--gold{color:var(--gold-lt)}

.display{
  font-family:var(--serif);
  color:var(--ink);
  margin:0;
  line-height:.98;
  font-weight:500;
}
.display__the{
  display:block;
  font-size:clamp(16px, 1.4vw, 20px);
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
  font-weight:500;
}
.display__mid{
  display:block;
  font-size: clamp(46px, 7.2vw, 96px);
  letter-spacing:-.005em;
}
.display__yogini{
  display:block;
  font-style:italic;
  font-family:var(--serif);
  color:var(--plum);
  font-size: clamp(62px, 9.8vw, 132px);
  line-height:.92;
  margin-top:-.1em;
}
.tagline{
  font-family:var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  color:var(--muted);
  margin: 22px 0 30px;
  max-width:32ch;
}
.tagline em{color:var(--gold); font-style:italic}

.hero__cta{display:flex; flex-wrap:wrap; gap:14px}
.hero__cta--center{justify-content:center; margin-top:36px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 26px;
  font-family:var(--sans); font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:500;
  border-radius:999px;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border:1px solid transparent;
  cursor:pointer;
}
.btn--primary{background:var(--ink); color:var(--ivory)}
.btn--primary:hover{background:var(--plum); transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--gold{background:linear-gradient(180deg, var(--gold-lt), var(--gold)); color:#3b2708; border:1px solid #a88232}
.btn--gold:hover{filter:brightness(1.03); transform:translateY(-1px)}

.hero__scroll{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:12px;
}
.hero__scroll span{
  width:1px; height:36px; background:var(--muted); display:inline-block; opacity:.5;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scaleY(.5); opacity:.35} 50%{transform:scaleY(1); opacity:.7} }

@media (max-width:820px){
  .hero__grid{grid-template-columns:1fr; text-align:center}
  .tagline{margin-inline:auto}
  .hero__cta{justify-content:center}
}

/* ===== SECTIONS ===== */
.section{
  padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 56px);
  max-width:100%;
}
.section > *{ max-width:var(--wrap); margin-inline:auto }
.section--cream{background:var(--cream)}
.section--dark{
  background:
    radial-gradient(600px 300px at 80% 10%, rgba(201,162,74,.14), transparent 60%),
    linear-gradient(180deg, #1e1129, #2b1a3a);
  color:var(--ivory);
}
.section__title{
  font-family:var(--serif);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.05;
  text-align:center;
  margin: 0 0 22px;
}
.section__title i{color:var(--gold); font-style:italic}
.section__title--light{color:var(--ivory); text-align:left}
.section__lede{
  font-family:var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  color:var(--muted);
  max-width:60ch;
  margin: 0 auto;
  text-align:center;
  line-height:1.55;
}
.section__lede em{font-style:italic; color:var(--plum)}
.section__lede--short{max-width:52ch}
.section__lede--light{color:rgba(251,247,238,.78); text-align:left; margin-left:0}
.section__head{text-align:center; margin-bottom:56px}

/* ===== PILLARS ===== */
.pillars{
  display:grid; gap:28px;
  grid-template-columns: repeat(3, 1fr);
  margin-top:64px;
}
.pillar{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:14px;
  padding:36px 30px;
  position:relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pillar:hover{transform:translateY(-4px); box-shadow: 0 24px 40px -24px rgba(43,26,58,.25)}
.pillar__num{
  font-family:var(--serif); font-style:italic;
  color:var(--gold); font-size:34px; display:block; margin-bottom:14px;
}
.pillar h3{
  font-family:var(--serif); font-size:26px; font-weight:500;
  margin:0 0 12px; letter-spacing:.005em;
}
.pillar p{color:var(--muted); margin:0; font-size:15.5px}
@media (max-width:820px){ .pillars{grid-template-columns:1fr} }

/* ===== JOURNAL CARDS ===== */
.cards{
  display:grid; gap:28px;
  grid-template-columns: repeat(3, 1fr);
}
.card{
  display:block;
  padding:32px 28px 28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--ivory);
  position:relative;
  transition: transform .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-4px); border-color:rgba(43,26,58,.28)}
.card__tag{
  display:inline-block;
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--plum); background:rgba(74,33,72,.08);
  padding:6px 10px; border-radius:999px; margin-bottom:16px;
}
.card h3{
  font-family:var(--serif);
  font-size:26px; font-weight:500; line-height:1.15;
  margin:0 0 12px;
}
.card p{color:var(--muted); margin:0 0 22px; font-size:15.5px}
.card__meta{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
@media (max-width:820px){ .cards{grid-template-columns:1fr} }

/* ===== PRACTICE ===== */
.practice{
  display:grid; gap:56px;
  grid-template-columns: 1.15fr 1fr;
  align-items:center;
}
.practice__copy .section__title{text-align:left}
.signup{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;
}
.signup input{
  flex:1 1 240px;
  padding:14px 18px; border-radius:999px;
  border:1px solid rgba(251,247,238,.28);
  background:rgba(255,255,255,.06); color:var(--ivory);
  font: 400 15px/1.2 var(--sans);
  outline:none;
}
.signup input::placeholder{color:rgba(251,247,238,.55)}
.signup input:focus{border-color:var(--gold); background:rgba(255,255,255,.09)}
.signup__done{flex-basis:100%; margin:8px 0 0; color:var(--gold-lt); font-family:var(--serif); font-style:italic}

.practice__quote{
  border-left:1px solid rgba(251,247,238,.22);
  padding-left:40px;
}
.practice__quote blockquote{margin:0}
.practice__quote p{
  font-family:var(--serif); font-style:italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height:1.35; color:var(--ivory); margin:0 0 18px;
}
.practice__quote em{color:var(--gold); font-style:italic}
.practice__quote footer{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(251,247,238,.6)}
@media (max-width:820px){
  .practice{grid-template-columns:1fr}
  .practice__quote{border-left:none; border-top:1px solid rgba(251,247,238,.22); padding:32px 0 0}
}

/* ===== CONNECT ===== */
.link{color:var(--plum); border-bottom:1px solid var(--gold); padding-bottom:1px}
.link:hover{color:var(--ink)}
.ig-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:10px;
  max-width:900px; margin:52px auto 0;
}
.ig-tile{
  aspect-ratio:1/1; border-radius:10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #efe1c4, #c9a24a);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:12px;
  color:#3b2708; font-family:var(--serif); font-style:italic; font-size:15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.ig-tile:nth-child(odd){
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(180deg, #4a2148, #2b1a3a);
  color:#f7e9c6;
}
.ig-tile:nth-child(3){
  background: linear-gradient(180deg, #c46e7a, #7d3a49);
  color:#fbf7ee;
}
.ig-tile:nth-child(5){
  background: linear-gradient(180deg, #dcd0b6, #a99270);
  color:#3b2708;
}
@media (max-width:820px){ .ig-grid{grid-template-columns:repeat(3,1fr)} }

/* ===== FOOTER ===== */
.foot{
  background:#1a0f24; color:rgba(251,247,238,.75);
  padding: 72px clamp(20px, 4vw, 56px) 32px;
}
.foot__grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:48px;
}
.foot__mark{width:56px; margin-bottom:18px; filter: invert(1) hue-rotate(180deg) brightness(1.2)}
.foot__name{font-family:var(--serif); font-size:24px; color:var(--ivory); margin:0 0 4px}
.foot__name em{font-style:italic; color:rgba(251,247,238,.55); font-weight:400}
.foot__name i{font-style:italic; color:var(--gold-lt)}
.foot__tag{font-family:var(--serif); font-style:italic; margin:0; color:rgba(251,247,238,.6)}
.foot h4{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-lt); margin:0 0 16px; font-weight:500;
}
.foot a{display:block; padding:5px 0; color:rgba(251,247,238,.75)}
.foot a:hover{color:var(--ivory)}
.foot__fine{
  max-width:var(--wrap); margin: 56px auto 0;
  padding-top:24px; border-top:1px solid rgba(251,247,238,.14);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(251,247,238,.5);
  text-align:center;
}
@media (max-width:820px){
  .foot__grid{grid-template-columns:1fr; gap:32px}
}

/* ====================================================
   ESSAY / ARTICLE PAGE
   Used by /essays/*.html and /journal.html
   ==================================================== */
.article{
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 40px) 96px;
}
.article__back{
  display:inline-block;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:36px;
}
.article__back:hover{color:var(--plum)}
.article__tag{
  display:inline-block;
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--plum); background:rgba(74,33,72,.08);
  padding:6px 12px; border-radius:999px; margin-bottom:24px;
}
.article h1{
  font-family:var(--serif);
  font-weight:500;
  font-size: clamp(38px, 5.5vw, 62px);
  line-height:1.05;
  letter-spacing:-.01em;
  margin: 0 0 20px;
  color: var(--ink);
}
.article h1 em, .article h1 i{ color: var(--plum); font-style:italic }
.article__meta{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin: 0 0 44px;
}
.article__meta span + span::before{ content:"·"; margin:0 10px; color:var(--muted) }
.article__lede{
  font-family:var(--serif);
  font-size: clamp(20px, 2.2vw, 24px);
  line-height:1.5;
  color: var(--plum);
  font-style: italic;
  margin: 0 0 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.article__body{
  font-size: 17.5px;
  line-height: 1.75;
  color: #34263c;
}
.article__body p{ margin: 0 0 22px }
.article__body p:first-of-type::first-letter{
  font-family:var(--serif);
  float:left;
  font-size: 66px;
  line-height:.9;
  padding: 8px 12px 0 0;
  color: var(--plum);
  font-weight:500;
}
.article__body h2{
  font-family:var(--serif);
  font-weight:500;
  font-size: clamp(26px, 3vw, 32px);
  line-height:1.2;
  margin: 48px 0 16px;
  color: var(--ink);
}
.article__body h3{
  font-family:var(--serif);
  font-weight:500;
  font-size: 22px;
  margin: 32px 0 12px;
  color: var(--plum);
}
.article__body blockquote{
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--gold);
  font-family:var(--serif);
  font-style:italic;
  font-size: 22px;
  line-height:1.45;
  color: var(--plum);
}
.article__body ul, .article__body ol{ padding-left: 22px; margin: 0 0 22px }
.article__body li{ margin-bottom: 10px }
.article__body a{
  color: var(--plum);
  border-bottom: 1px solid var(--gold);
  padding-bottom:1px;
}
.article__body a:hover{ color: var(--ink) }
.article__body hr{
  border:0; text-align:center; margin: 44px 0;
}
.article__body hr::before{
  content:"◈"; color: var(--gold); font-size: 14px; letter-spacing:.5em;
}
.article__foot{
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;
  font-size:13px; color:var(--muted);
}
.article__foot a{
  color: var(--plum);
  border-bottom: 1px solid var(--gold);
}

/* ====================================================
   JOURNAL INDEX PAGE
   ==================================================== */
.journal-index{
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 40px) 96px;
}
.journal-index__head{
  text-align:center; margin-bottom: 64px;
}
.journal-index__list{
  display:flex; flex-direction:column; gap: 0;
}
.journal-entry{
  display:block;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .25s ease;
}
.journal-entry:hover{ padding-left: 8px }
.journal-entry:hover h3{ color: var(--plum) }
.journal-entry__meta{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.journal-entry__meta span + span::before{ content:"·"; margin:0 10px; color:var(--muted) }
.journal-entry h3{
  font-family:var(--serif); font-weight:500;
  font-size: clamp(24px, 2.8vw, 32px); line-height:1.15;
  margin: 0 0 8px; color: var(--ink);
  transition: color .25s ease;
}
.journal-entry p{ margin:0; color: var(--muted); font-size: 15.5px }