@font-face{
  font-family:Montserrat;
  src:url('/assets/assets/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}
@font-face{
  font-family:Montserrat;
  src:url('/assets/assets/fonts/montserrat/Montserrat-Semibold.ttf') format('truetype');
  font-weight:600 800;
  font-display:swap
}
:root{
  font-family:Montserrat,sans-serif;
  color:#302e45;
  background:#f8f8fc;
  font-synthesis:none;
  --muted:#68657c;
  --line:#dcdbe7;
  --accent:#f6a01d
}
*{
  box-sizing:border-box
}
body{
  margin:0
}
a{
  color:inherit;
  text-underline-offset:5px
}
a:hover{
  text-decoration-color:#d37b00
}
a:focus-visible,summary:focus-visible{
  outline:3px solid #b66a00;
  outline-offset:5px
}
p{
  line-height:1.8
}
h1,h2{
  line-height:1.2;
  letter-spacing:-.035em
}
h1{
  font-size:clamp(2.1rem,4.2vw,3.7rem);
  font-weight:600;
  margin:18px 0 24px
}
h2{
  font-weight:600
}
img{
  max-width:100%
}
.site-header{
  max-width:1160px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 32px;
  gap:24px;
  border-bottom:1px solid var(--line)
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-weight:600;
  font-size:1.3rem
}
.brand img{
  border-radius:8px
}
.site-header nav{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:.8rem
}
.site-header nav a[aria-current]{
  font-weight:600;
  text-decoration:underline
}
.app-link{
  display:inline-block;
  background:var(--accent);
  color:#302517;
  padding:13px 19px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600
}
.app-link:hover{
  background:#ffb540
}
main{
  max-width:1040px;
  margin:auto;
  padding:0 32px
}
.intro{
  max-width:820px;
  padding:72px 0 52px
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.8rem;
  font-weight:600;
  margin:0;
  color:#925400
}
.lead{
  font-size:1.1rem;
  line-height:1.9;
  color:var(--muted);
  max-width:760px
}
.guides{
  padding-bottom:72px
}
.guide{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:24px;
  border-top:1px solid var(--line);
  padding:38px 0
}
.number{
  font-size:1.4rem;
  color:#a15c00;
  padding-top:5px
}
.guide h2{
  font-size:clamp(1.4rem,2.5vw,2rem);
  max-width:740px;
  margin:12px 0 16px
}
.guide h2 a{
  text-decoration:none
}
.guide h2 a:hover{
  text-decoration:underline
}
.guide p{
  max-width:760px;
  color:var(--muted);
  margin:0 0 16px
}
.meta{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.025em;
  color:var(--muted)
}
.read-link{
  display:inline-block;
  margin-top:6px;
  font-weight:600;
  font-size:.9rem
}
.reading{
  max-width:760px;
  margin:auto;
  padding:42px 0 72px
}
.back{
  display:inline-block;
  font-size:.85rem;
  margin-bottom:36px
}
.reading>.meta{
  margin:0
}
.reading h1{
  font-size:clamp(2rem,3.9vw,3rem)
}
.prose{
  margin-top:40px;
  font-size:1.05rem
}
.prose p{
  margin:0 0 26px;
  overflow-wrap:anywhere
}
.prose h2{
  font-size:1.2rem;
  margin:0 0 20px
}
.overview{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:30px 0;
  margin-bottom:36px
}
.overview p:last-child,.practice p:last-child{
  margin-bottom:0
}
.practice{
  padding:26px 28px;
  background:#f0eef7;
  border-radius:8px;
  margin:32px 0
}
.practice ol{
  padding-left:24px;
  line-height:1.8
}
.practice li{
  margin-bottom:10px
}
details{
  border-top:1px solid #d2cfdf;
  margin-top:22px;
  padding-top:18px
}
summary{
  cursor:pointer;
  font-size:.9rem;
  font-weight:600
}
details[open] summary{
  margin-bottom:20px
}
.continue{
  border-top:1px solid var(--line);
  margin-top:48px;
  padding-top:32px
}
.continue h2{
  font-size:1.5rem
}
.continue p{
  color:var(--muted)
}
footer{
  max-width:1096px;
  margin:auto;
  border-top:1px solid var(--line);
  padding:28px 32px 40px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:.8rem
}
@media(max-width:680px){
  .site-header{
    padding:20px;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:20px
  }
  .site-header nav{
    gap:14px;
    flex-wrap:wrap;
    width:100%;
    font-size:.78rem
  }
  .site-header nav .app-link{
    margin-left:auto;
    padding:10px 13px
  }
  main{
    padding:0 20px
  }
  .intro{
    padding:44px 0 32px
  }
  .guide{
    grid-template-columns:30px 1fr;
    gap:12px;
    padding:28px 0
  }
  .number{
    font-size:1.1rem
  }
  .lead{
    font-size:1rem
  }
  .guide h2{
    font-size:1.35rem
  }
  .reading{
    padding-top:28px
  }
  .prose{
    font-size:1rem
  }
  .practice{
    padding:22px 18px
  }
  footer{
    padding:24px 20px;
    flex-direction:column;
    gap:14px
  }
}