/* PsychedelicPractice101.com. Uses the Satura Practice "Grove" tokens and type. */
/* Self-hosted fonts (latin subset; SIL OFL, from Fontsource). No requests to Google. */
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Figtree'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Figtree'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Figtree'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/figtree-latin-600-normal.woff2') format('woff2'); }
:root{
  --spruce:#1F3A2E;
  --aspen:#D9A227;   /* lines and shapes only, never text on bone */
  --sage:#8DA396;
  --bark:#4A463F;
  --bone:#F3EEE2;
  --bone-deep:#E9E3D5;
  --bone-light:#FAF7EF;
  --rule:#CFC8B8;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
section[id]{ scroll-margin-top:24px; }
body{ font-family:var(--sans); font-size:17px; line-height:1.55; background:var(--bone); color:var(--spruce); }
a{ color:var(--spruce); font-weight:500; text-decoration:none; border-bottom:1px solid var(--aspen); }
a:hover{ border-bottom-width:2px; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
h2, h3{ font-family:var(--serif); font-weight:700; color:var(--spruce); }
p{ color:var(--bark); max-width:720px; }
ul, ol{ max-width:720px; padding-left:20px; color:var(--bark); display:grid; gap:8px; }
.small{ font-size:14px; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--aspen); outline-offset:2px; }

/* Header */
.site-head .wrap{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; padding-top:24px; padding-bottom:24px; }
.brand{ font-family:var(--serif); font-weight:600; font-size:32px; line-height:1; letter-spacing:-.005em; border:0; }
.site-head nav{ display:flex; flex-wrap:wrap; gap:10px 28px; align-items:baseline; font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.site-head nav a{ padding-bottom:2px; border-bottom:2px solid transparent; }
.site-head nav a:hover, .site-head nav a[aria-current="page"]{ border-bottom-color:var(--rule); }
.site-head nav a.cta-link{ border-bottom-color:var(--aspen); }
@media (max-width:640px){ .site-head nav{ gap:8px 18px; } .brand{ font-size:28px; } }

/* Buttons */
.btn{
  display:inline-block; text-decoration:none; padding:16px 28px; cursor:pointer;
  background:var(--spruce); color:var(--bone); border:1px solid var(--spruce); border-radius:0;
  font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.2;
  transition:background .15s, color .15s;
}
.btn:hover{ background:#2a4d44; border-bottom-width:1px; }
.btn.ghost{ background:transparent; color:var(--spruce); }
.btn.ghost:hover{ background:var(--bone-deep); }
.row{ display:flex; flex-wrap:wrap; gap:16px; }

/* Hero */
.hero{ border-top:1px solid var(--rule); }
.hero .wrap{ padding-top:72px; padding-bottom:80px; display:flex; flex-direction:column; gap:28px; }
h1.page-label{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:var(--spruce); margin-bottom:-12px; max-width:880px; }
.headline{ font-family:var(--serif); font-weight:700; font-size:clamp(40px, 6vw, 72px); line-height:1.02; letter-spacing:-.01em; max-width:960px; text-wrap:balance; }
.lede{ font-size:clamp(19px, 2.2vw, 22px); line-height:1.5; max-width:720px; }

/* Bands */
.band{ padding:72px 0; }
.band .wrap{ display:flex; flex-direction:column; gap:20px; }
.band.deep{ background:var(--bone-deep); }
.band:not(.deep):not(.dark) + .band:not(.deep):not(.dark), .hero + .band:not(.deep):not(.dark){ border-top:1px solid var(--rule); }
.band .wrap > h2{ font-size:clamp(30px, 4vw, 40px); line-height:1.1; }
.band .wrap > h3{ font-size:26px; line-height:1.15; margin-top:8px; }
.band .wrap > p, .band .wrap > ul{ font-size:19px; line-height:1.6; }
.band .wrap > p.small{ font-size:14px; }
.band.dark{ background:var(--spruce); }
.band.dark h2, .band.dark h3, .band.dark p{ color:var(--bone); }
.band.dark a{ color:var(--bone); }
.band.dark .btn{ background:var(--bone); color:var(--spruce); border-color:var(--bone); }
.band.dark .btn.ghost{ background:transparent; color:var(--bone); }

/* Cards: columns with an aspen top rule */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:40px 48px; margin-top:20px; }
.grid.two{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.card{ display:flex; flex-direction:column; gap:14px; border-top:2px solid var(--aspen); padding-top:18px; }
.card h3{ font-size:28px; line-height:1.15; }
.kicker{ font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--spruce); }
.steps{ list-style:none; padding:0; counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:40px 48px; max-width:none; margin-top:20px; }
.steps li{ counter-increment:step; display:flex; flex-direction:column; gap:14px; }
.steps li::before{ content:counter(step, decimal-leading-zero); font-size:13px; font-weight:500; letter-spacing:.16em; color:var(--spruce); border-bottom:2px solid var(--aspen); width:fit-content; padding-bottom:4px; }
.steps li > div{ display:flex; flex-direction:column; gap:10px; }
.steps h3{ font-size:28px; line-height:1.15; }

/* Forms */
.note{ background:var(--bone-light); border:1px solid var(--rule); padding:24px; display:flex; flex-direction:column; gap:12px; max-width:720px; }
.band.deep .note{ background:var(--bone); }
.note h3{ font-size:24px; line-height:1.15; }
form.signup{ display:flex; gap:12px; flex-wrap:wrap; }
form.signup label{ flex-basis:100%; font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--spruce); }
input[type=email]{ flex:1 1 240px; min-width:0; font:400 17px var(--sans); padding:14px 16px; border:1px solid var(--spruce); border-radius:0; background:var(--bone-light); color:var(--spruce); }
.signup-msg:empty{ display:none; }

/* Quiz */
#app{ border-top:2px solid var(--aspen); background:var(--bone); padding:32px; gap:22px; max-width:820px; }
#app > h2, .tier h2{ font-size:clamp(28px, 3.6vw, 38px); line-height:1.12; }
.progress{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.bar{ height:2px; background:var(--rule); overflow:hidden; }
.bar span{ display:block; height:100%; background:var(--aspen); width:0; transition:width .2s; }
.choices{ display:grid; gap:12px; }
.choice{ text-align:left; font:500 17px/1.4 var(--sans); color:var(--spruce); background:var(--bone-light); border:1px solid var(--rule); border-radius:0; padding:16px 18px; cursor:pointer; display:grid; gap:4px; }
.choice small{ font-weight:400; color:var(--bark); font-size:15px; }
.choice:hover{ border-color:var(--spruce); }
.row .choice{ flex:1 1 140px; text-align:center; }
.tier{ border-left:2px solid var(--aspen); padding:4px 0 4px 20px; display:flex; flex-direction:column; gap:10px; }
.tier p{ font-size:19px; }
.score{ font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.gaps{ display:grid; gap:18px; }
.gaps > h3{ font-size:26px; }
.gap{ border-top:1px solid var(--rule); padding-top:14px; display:grid; gap:8px; }
.gap h3{ font-size:22px; }
@media (max-width:520px){ #app{ padding:24px 18px; } }
@media (prefers-reduced-motion:reduce){ .bar span{ transition:none; } html{ scroll-behavior:auto; } }

/* Footer */
.site-foot{ border-top:1px solid var(--rule); }
.site-foot .wrap{ padding-top:28px; padding-bottom:40px; display:flex; flex-direction:column; gap:10px; font-size:13px; letter-spacing:.04em; color:var(--bark); }
.site-foot nav{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.site-foot a{ font-weight:400; border-bottom:1px solid transparent; }
.site-foot a:hover{ border-bottom-color:var(--aspen); }
.site-foot p{ font-size:12px; max-width:none; }