/* Root Awakening — Katie Albee
   Palette: soil-dark ground, cream type, chakra spectrum used as DATA colour
   on the Love Wheel (not decoration). Heart-green carries every action. */
:root{
  --soil:#17120F; --soil-2:#211A16; --soil-3:#2C2320;
  --cream:#F2EBE2; --cream-dim:#C9BCAE; --muted:#8E7E70;
  --line:#3A2F29;
  --heart:#5C8F63; --heart-lift:#6EA675;
  --c-root:#B8453E; --c-sacral:#CE7430; --c-solar:#CFA43A;
  --c-heart:#5C8F63; --c-throat:#3B7B9C; --c-brow:#4A5390; --c-crown:#7E5A9B;
  --c-body:#A8654E;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--soil);color:var(--cream);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.01em}
h3{font-size:1.25rem}
p{margin:0 0 1.1em;max-width:62ch}
a{color:var(--cream)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* nav */
nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(23,18,15,.94);backdrop-filter:blur(8px);z-index:20}
nav .wrap{display:flex;align-items:baseline;gap:32px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:1.15rem;text-decoration:none;letter-spacing:-.01em;margin-right:auto}
.brand span{color:var(--muted)}
nav a.nl{color:var(--cream-dim);text-decoration:none;font-size:.93rem}
nav a.nl:hover,nav a.nl[aria-current]{color:var(--cream)}
nav a.nl[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--heart)}

/* buttons */
.btn{display:inline-block;background:var(--heart);color:#0F1A11;text-decoration:none;
  padding:14px 26px;border-radius:2px;font-weight:700;font-size:.97rem;border:0;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--heart-lift)}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--muted);background:transparent}
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--heart-lift);outline-offset:3px}

/* sections */
section{padding:88px 0;border-bottom:1px solid var(--line)}
section.tight{padding:56px 0}
.lede{font-size:1.28rem;line-height:1.55;color:var(--cream);max-width:34ch}
.dim{color:var(--cream-dim)}
.small{font-size:.92rem;color:var(--muted);max-width:56ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.hero{padding:104px 0 88px}
.hero h1{max-width:16ch}
.pull{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.3;
  border-left:2px solid var(--heart);padding-left:24px;margin:36px 0;max-width:30ch;color:var(--cream)}
.quiet{color:var(--muted);font-size:.9rem}

/* recognition list — hanging marks, not cards */
.rec{list-style:none;padding:0;margin:0;max-width:60ch}
.rec li{padding:16px 0 16px 30px;border-top:1px solid var(--line);position:relative}
.rec li:before{content:"";position:absolute;left:0;top:26px;width:12px;height:1px;background:var(--heart)}
.rec li:last-child{border-bottom:1px solid var(--line)}

/* spectrum strip — the 8 areas, coloured by their energy centre */
.spectrum{display:grid;grid-template-columns:repeat(8,1fr);gap:0;margin:40px 0 8px;border:1px solid var(--line)}
.spectrum div{height:10px}
.weeks{list-style:none;padding:0;margin:0;counter-reset:w}
.weeks li{counter-increment:w;display:grid;grid-template-columns:52px minmax(180px,300px) 1fr;column-gap:28px;row-gap:4px;
  padding:20px 0;border-top:1px solid var(--line);align-items:start}
.weeks li:last-child{border-bottom:1px solid var(--line)}
.weeks li:before{content:"0" counter(w);font-family:var(--serif);color:var(--muted);font-size:1.05rem;padding-top:2px}
.weeks b{display:block;font-weight:700;font-size:1.02rem}
.weeks span{color:var(--cream-dim);font-size:.95rem}

/* wheel */
.wheelgrid{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:56px;align-items:start}
#wheel{width:100%;height:auto;display:block}
.sliders{margin:0;padding:0;list-style:none}
.sl{padding:14px 0;border-top:1px solid var(--line)}
.sl:last-child{border-bottom:1px solid var(--line)}
.sl .top{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.sl .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;position:relative;top:-1px}
.sl .nm{font-weight:700;font-size:.98rem}
.sl .ch{color:var(--muted);font-size:.84rem;margin-left:auto}
.sl .q{color:var(--cream-dim);font-size:.9rem;margin:0 0 10px;max-width:52ch}
.sl input[type=range]{width:100%;accent-color:var(--heart);height:22px}
.val{font-variant-numeric:tabular-nums;color:var(--cream);font-weight:700;min-width:2ch}

form.capture{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;max-width:460px}
form.capture input{flex:1 1 220px;background:var(--soil-2);border:1px solid var(--line);
  color:var(--cream);padding:13px 14px;border-radius:2px;font-family:var(--sans);font-size:1rem}
#res{margin-top:22px;padding:22px;background:var(--soil-2);border-left:2px solid var(--heart);display:none}

footer{padding:56px 0 72px;color:var(--muted);font-size:.9rem}
footer a{color:var(--cream-dim)}
footer .fl{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:22px}

@media (max-width:860px){
  .two,.wheelgrid{grid-template-columns:1fr;gap:36px}
  section{padding:60px 0}
  .hero{padding:64px 0 56px}
  nav .wrap{gap:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- hero photos (Katie's own images from her Root Awakening site) --- */
.hero.photo{position:relative;min-height:78vh;display:flex;align-items:flex-end;padding:140px 0 88px;
  background-image:linear-gradient(180deg,rgba(18,14,12,.35) 0%,rgba(18,14,12,.55) 55%,rgba(18,14,12,.94) 100%),var(--hero);
  background-size:cover;background-position:var(--hero-pos,center);}
.hero.photo .wrap{width:100%}
.hero.photo h1,.hero.photo .lede{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.weeks span{grid-column:3}
.about-split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start}
.portrait{width:100%;max-height:560px;object-fit:cover;object-position:center 30%;border-radius:18px;display:block;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.portrait-cap{font-size:.85rem;color:var(--muted);margin-top:10px}
@media(max-width:860px){
  .weeks li{grid-template-columns:44px 1fr}
  .weeks span{grid-column:2}
  .hero.photo{min-height:64vh;padding:110px 0 56px}
  .about-split{grid-template-columns:1fr}
}

.offers{display:grid;gap:40px}
.offer{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start;padding-bottom:40px;border-bottom:1px solid var(--line)}
.offer img{width:100%;border-radius:14px;display:block;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.offer h2{margin-bottom:8px}
.offer .meta{color:var(--muted);font-size:.95rem;margin-bottom:10px}
.offer p{margin-bottom:14px}
@media(max-width:760px){.offer{grid-template-columns:1fr}.offer img{max-width:320px}}