@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --sand:#F5F0E8;
  --sand-dark:#E8E0D0;
  --ink:#1A1714;
  --ink-mid:#5C5650;
  --ink-light:#9C948A;
  --gold:#B8975A;
  --gold-light:#E8D9B8;
  --gold-pale:#F7F2E8;
  --sage:#7A8C7E;
  --sage-light:#EBF0EC;
  --blush:#C4A0A0;
  --blush-light:#F5EDED;
  --white:#FEFCF9;
}

body{
  font-family:'DM Sans',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
}

/* NAV */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem 3rem;
  border-bottom:.5px solid var(--sand-dark);
  background:var(--white);
  position:sticky;
  top:0;
  z-index:100;
}
.nav-logo{display:flex;flex-direction:column;gap:3px;text-decoration:none}
.nav-name{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:300;letter-spacing:.38em;color:var(--ink);text-transform:uppercase}
.nav-tag{font-family:'Cormorant Garamond',serif;font-size:11px;font-style:italic;color:var(--gold);letter-spacing:.06em}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:11px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:8px 20px;background:var(--gold);color:var(--white)!important;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-radius:1px}
.nav-cta:hover{background:#a0844a!important}

/* HERO */
.hero{
  text-align:center;
  padding:6rem 2rem 5rem;
  border-bottom:.5px solid var(--sand-dark);
  background:var(--sand);
}
.hero-wordmark{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:3rem}
.hero-name{font-family:'DM Sans',sans-serif;font-size:42px;font-weight:300;letter-spacing:.42em;color:var(--ink);text-transform:uppercase}
.hero-subtitle{font-family:'Cormorant Garamond',serif;font-size:14px;font-style:italic;color:var(--gold);letter-spacing:.08em}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:300;line-height:1.1;color:var(--ink);margin-bottom:1.5rem}
.hero-divider{width:28px;height:.5px;background:var(--gold);margin:0 auto 1.75rem}
.hero-sub{font-size:14px;font-weight:300;color:var(--ink-mid);line-height:2.1;max-width:440px;margin:0 auto 2.5rem;letter-spacing:.02em}
.hero-sub em{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--gold)}
.hero-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:1px;cursor:pointer;border:none}
.btn-primary{background:var(--gold);color:var(--white)}
.btn-primary:hover{background:#a0844a}
.btn-outline{background:transparent;border:.5px solid var(--sand-dark);color:var(--ink-mid)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-sage{background:var(--sage);color:var(--white)}
.btn-sage:hover{background:#647068}

/* HOW IT WORKS */
.how{padding:5rem 3rem;border-bottom:.5px solid var(--sand-dark)}
.section-eyebrow{font-size:10px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:12px}
.section-eyebrow::after{content:'';flex:1;height:.5px;background:var(--gold-light)}
.section-title{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:var(--ink);margin-bottom:.75rem;line-height:1.2}
.section-sub{font-size:13px;font-weight:300;color:var(--ink-mid);line-height:1.9;max-width:480px}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3.5rem}
.how-col-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:.5px solid var(--sand-dark)}
.how-steps{display:flex;flex-direction:column;gap:1.5rem}
.how-step{display:flex;gap:1rem}
.how-step-num{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--gold-light);line-height:1;flex-shrink:0;width:28px}
.how-step-content{}
.how-step-title{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:.3rem;letter-spacing:.02em}
.how-step-body{font-size:12px;font-weight:300;color:var(--ink-mid);line-height:1.8}

/* PATH CARDS */
.paths{padding:5rem 3rem;background:var(--sand);border-bottom:.5px solid var(--sand-dark)}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sand-dark);border:.5px solid var(--sand-dark);border-radius:2px;margin-top:3rem;max-width:800px;margin-left:auto;margin-right:auto}
.path-card{background:var(--white);padding:2.5rem 2rem;text-decoration:none;display:block}
.path-card:hover{background:var(--gold-pale)}
.path-card:first-child{border-radius:2px 0 0 2px}
.path-card:last-child{border-radius:0 2px 2px 0}
.path-ey{font-size:10px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:1rem}
.path-title{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:var(--ink);margin-bottom:.5rem}
.path-body{font-size:12px;font-weight:300;color:var(--ink-mid);line-height:1.9;margin-bottom:2rem}
.path-link{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px}
.path-link::after{content:'→'}

/* ABOUT PAGE */
.about-hero{padding:6rem 3rem 4rem;border-bottom:.5px solid var(--sand-dark);background:var(--sand);max-width:720px;margin:0 auto}
.about-body{max-width:640px;margin:0 auto;padding:4rem 3rem}
.about-body h2{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--ink);margin:2.5rem 0 1rem;line-height:1.3}
.about-body p{font-size:14px;font-weight:300;color:var(--ink-mid);line-height:2;margin-bottom:1.25rem}
.about-placeholder{padding:1.5rem;background:var(--gold-pale);border:.5px solid var(--gold-light);border-radius:1px;margin:1.5rem 0}
.about-placeholder-label{font-size:9px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:.4rem}
.about-placeholder-hint{font-size:12px;font-weight:300;color:var(--ink-mid);font-style:italic;line-height:1.8}

/* BLOG */
.blog-hero{padding:5rem 3rem 3rem;border-bottom:.5px solid var(--sand-dark);background:var(--sand)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--sand-dark);border:.5px solid var(--sand-dark);border-radius:2px;margin:3rem}
.blog-card{background:var(--white);padding:2rem;text-decoration:none;display:block}
.blog-card:hover{background:var(--gold-pale)}
.blog-card-date{font-size:10px;letter-spacing:.15em;color:var(--ink-light);text-transform:uppercase;margin-bottom:.75rem}
.blog-card-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--ink);margin-bottom:.5rem;line-height:1.3}
.blog-card-excerpt{font-size:12px;font-weight:300;color:var(--ink-mid);line-height:1.8;margin-bottom:1.25rem}
.blog-card-link{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.blog-notion-note{text-align:center;padding:2rem 3rem 3rem;font-size:12px;font-weight:300;color:var(--ink-light);font-style:italic}

/* BLOG POST */
.post-hero{padding:5rem 3rem 3rem;border-bottom:.5px solid var(--sand-dark);background:var(--sand);max-width:720px;margin:0 auto}
.post-body{max-width:640px;margin:0 auto;padding:3rem}
.post-body p{font-size:14px;font-weight:300;color:var(--ink-mid);line-height:2.1;margin-bottom:1.5rem}
.post-body h2{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:var(--ink);margin:2.5rem 0 1rem}
.post-body h3{font-size:14px;font-weight:500;color:var(--ink);margin:2rem 0 .75rem;letter-spacing:.04em}

/* QUIZ PAGE */
.quiz-wrap{max-width:680px;margin:0 auto;padding:3rem 2rem}

/* FOOTER */
footer{padding:3rem;border-top:.5px solid var(--sand-dark);background:var(--sand);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-logo{display:flex;flex-direction:column;gap:3px}
.footer-name{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:300;letter-spacing:.35em;color:var(--ink);text-transform:uppercase}
.footer-tag{font-family:'Cormorant Garamond',serif;font-size:11px;font-style:italic;color:var(--gold)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:11px;font-weight:300;color:var(--ink-light);text-decoration:none;letter-spacing:.06em}
.footer-links a:hover{color:var(--ink)}
.footer-copy{font-size:11px;font-weight:300;color:var(--ink-light)}

/* QUIZ STYLES */
.wm{display:flex;flex-direction:column;gap:5px}
.wm-name{font-family:'DM Sans',sans-serif;font-weight:300;letter-spacing:.42em;color:var(--ink);text-transform:uppercase;line-height:1}
.wm-tag{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;letter-spacing:.08em;color:var(--gold)}
.qv{display:none}
.qv.active{display:block}
.qhead{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:.5px solid var(--sand-dark)}
.qey{font-size:10px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:.75rem}
.qtitle{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--ink);margin-bottom:.5rem;line-height:1.3}
.qtitle em{font-style:italic}
.qsub{font-size:12px;font-weight:300;color:var(--ink-mid);line-height:1.8}
.prog{height:1px;background:var(--sand-dark);margin-bottom:2.5rem}
.prog-fill{height:1px}
.qb{margin-bottom:2.5rem;padding-bottom:2.5rem;border-bottom:.5px solid var(--sand-dark)}
.qb:last-of-type{border-bottom:none}
.qn{font-size:10px;letter-spacing:.15em;color:var(--gold);text-transform:uppercase;margin-bottom:.4rem}
.qt{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);margin-bottom:.5rem;line-height:1.4}
.qh{font-size:11px;font-weight:300;color:var(--ink-light);margin-bottom:1rem;font-style:italic}
.tg{display:flex;flex-wrap:wrap;gap:6px}
.t{padding:6px 14px;border:.5px solid var(--sand-dark);font-size:11px;font-weight:300;letter-spacing:.04em;cursor:pointer;color:var(--ink-mid);background:var(--white);border-radius:1px;transition:all .1s}
.t:hover{border-color:var(--gold);color:var(--ink)}
.t.sg{background:var(--gold-pale);border-color:var(--gold);color:var(--gold)}
.t.ss{background:var(--sage-light);border-color:var(--sage);color:var(--sage)}
.t.sb{background:var(--blush-light);border-color:var(--blush);color:var(--blush)}
.luxe-input{width:100%;border:.5px solid var(--sand-dark);border-radius:1px;padding:12px 14px;font-size:13px;font-weight:300;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--white);resize:vertical;min-height:80px;line-height:1.8;letter-spacing:.02em}
.luxe-input:focus{outline:none;border-color:var(--gold)}
.luxe-input::placeholder{color:var(--ink-light);font-style:italic}
.sr{font-size:10px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:.5px solid var(--sand-dark)}
.mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px}
.mc{border:.5px solid var(--sand-dark);padding:10px 12px;cursor:pointer;background:var(--white);border-radius:1px;transition:all .1s}
.mc:hover{border-color:var(--gold)}
.mc.sg{background:var(--gold-pale);border-color:var(--gold)}
.mc.ss{background:var(--sage-light);border-color:var(--sage)}
.mn{font-size:12px;font-weight:400;color:var(--ink);letter-spacing:.03em}
.ms{font-size:11px;color:var(--ink-light);margin-top:3px;font-weight:300}
.mc.sg .mn{color:var(--gold)}
.mc.ss .mn{color:var(--sage)}
.fr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fr input[type=number]{width:88px;border:.5px solid var(--sand-dark);border-radius:1px;padding:8px 10px;font-size:13px;font-family:'DM Sans',sans-serif;font-weight:300;color:var(--ink);background:var(--white)}
.fr input[type=number]:focus{outline:none;border-color:var(--gold)}
.sw{display:flex;flex-direction:column;gap:.75rem}
.sr2{display:flex;flex-direction:column;gap:6px}
.sl{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-light);letter-spacing:.03em}
.st{display:flex;align-items:center;gap:10px}
.st input[type=range]{flex:1;accent-color:var(--gold)}
.sv{font-size:12px;color:var(--gold);min-width:18px;text-align:right}
.ec{display:flex;align-items:center;gap:12px;padding:14px 16px;border:.5px solid var(--sand-dark);cursor:pointer;background:var(--white);border-radius:1px;width:100%;text-decoration:none}
.ec:hover{border-color:var(--gold);background:var(--gold-pale)}
.et{text-align:left;flex:1}
.et-title{font-size:12px;font-weight:400;color:var(--ink);letter-spacing:.03em}
.et-sub{font-size:11px;color:var(--ink-light);margin-top:3px;font-weight:300;font-style:italic}
.subrow{margin-top:2.5rem;padding-top:2rem;border-top:.5px solid var(--sand-dark);display:flex;justify-content:space-between;align-items:center}
.subnote{font-size:11px;color:var(--ink-light);font-weight:300;font-style:italic}
.done-wrap{text-align:center;padding:4rem 1.5rem}
.dm{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;font-style:italic;color:var(--gold);margin-bottom:1.5rem}
.dt{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;color:var(--ink);margin-bottom:.75rem}
.db{font-size:12px;font-weight:300;color:var(--ink-mid);line-height:1.9;max-width:340px;margin:0 auto 2rem}
.dc{display:flex;flex-direction:column;gap:1.25rem}
.tn{padding:1rem 1.25rem;background:var(--gold-pale);border:.5px solid var(--gold-light);border-radius:1px}
.back-btn{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;color:var(--ink-light);cursor:pointer;background:none;border:none;padding:0 0 2rem;text-transform:uppercase}
.back-btn:hover{color:var(--ink)}
.back-btn::before{content:'←';color:var(--gold)}

/* RESPONSIVE */
@media(max-width:768px){
  nav{padding:1.25rem 1.5rem}
  .nav-links{display:none}
  .hero{padding:4rem 1.5rem 3rem}
  .hero-name{font-size:28px}
  .hero-title{font-size:36px}
  .how{padding:3rem 1.5rem}
  .how-grid{grid-template-columns:1fr;gap:2rem}
  .paths{padding:3rem 1.5rem}
  .path-grid{grid-template-columns:1fr}
  .path-card:first-child{border-radius:2px 2px 0 0}
  .path-card:last-child{border-radius:0 0 2px 2px}
  .about-hero,.about-body,.post-hero,.post-body{padding:3rem 1.5rem}
  .blog-grid{margin:1.5rem}
  footer{padding:2rem 1.5rem}
  .quiz-wrap{padding:2rem 1.5rem}
}
