:root{
  --paper:#f7f3ea; --card:#fffdf7; --ink:#2b2a26; --muted:#6c685d; --line:#e2dccd;
  --green:#3f5a3a; --green-soft:#e6ecdc; --accent:#9c5b26; --accent-soft:#f3e4d3;
  --stem:#4d6b3f; --leaf:#6f8f5e; --leaf-2:#86a571; --bloom:#a77fb4; --bloom-2:#c7a3cf;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans)}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}
img,svg{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.narrow{max-width:720px}
.site-header{border-bottom:1px solid var(--line);background:var(--paper)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.logo-mark{width:30px;height:30px;color:var(--green)}
.brand b{font:700 24px/1 var(--serif);letter-spacing:.01em}
.brand span{color:var(--muted);font-size:14px}
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav a{padding:6px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px}
.nav a:hover,.nav a[aria-current]{background:var(--green-soft);color:var(--green)}
.nav a.btn-login{border:1px solid var(--green);color:var(--green);margin-left:6px}
.nav a.btn-login:hover{background:var(--green);color:#fff}
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;padding:48px 0 24px}
.hero h1{font:700 clamp(30px,4.6vw,46px)/1.15 var(--serif);margin:0 0 16px}
.hero p{font-size:19px;color:var(--muted);margin:0 0 22px;max-width:34em}
.hero .sprig{width:100%;max-height:320px}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;padding:11px 20px;border-radius:10px;font-weight:600;border:0;font:inherit;cursor:pointer}
.btn:hover{background:#334a2f;color:#fff}
.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--green)}
.btn.ghost:hover{background:var(--green-soft)}
.section{padding-top:32px;padding-bottom:32px}
.section h2.title{font:700 26px/1.2 var(--serif);margin:0 0 20px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.card h3{font:700 20px/1.3 var(--serif);margin:0}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--green)}
.card p{margin:0;color:var(--muted);font-size:16px}
.meta{font-size:14px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tag{background:var(--green-soft);color:var(--green);border-radius:999px;padding:1px 10px;font-size:13px;font-weight:600}
.promo{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.promo h2{font:700 26px/1.2 var(--serif);margin:0 0 10px}
.promo p{color:var(--muted);margin:0 0 18px}
.poster{position:relative;display:block;border-radius:12px;overflow:hidden;line-height:0}
.poster .poster-art{width:100%;height:auto}
.poster .caption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;line-height:1.35;color:#f3efe4;font-size:14px;background:linear-gradient(transparent,rgba(20,30,18,.75))}
.poster .caption b{display:block;font-size:15px}
.article{padding-top:36px;padding-bottom:24px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--muted)}
.article h1{font:700 clamp(28px,4vw,40px)/1.2 var(--serif);margin:0 0 12px}
.article > .meta{margin-bottom:24px}
.prose h2{font:700 24px/1.3 var(--serif);margin:34px 0 10px}
.prose h3{font:700 19px/1.3 var(--serif);margin:24px 0 6px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose li{margin:6px 0}
.prose .note{background:var(--accent-soft);border-left:3px solid var(--accent);padding:12px 16px;border-radius:0 10px 10px 0;font-size:16px}
.author-box{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:36px 0 8px}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:700 20px var(--serif)}
.author-box p{margin:0;font-size:15px;color:var(--muted)}
.author-box b{color:var(--ink)}
.post-list{list-style:none;padding:0;margin:0}
.post-list li{padding:20px 0;border-bottom:1px solid var(--line)}
.post-list h3{font:700 22px/1.3 var(--serif);margin:4px 0 6px}
.post-list h3 a{color:var(--ink);text-decoration:none}
.post-list h3 a:hover{color:var(--green)}
.post-list p{margin:0;color:var(--muted)}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:24px 0}
.feature{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.feature h3{font:700 18px/1.3 var(--serif);margin:0 0 6px}
.feature p{margin:0;color:var(--muted);font-size:15px}
.courses{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.course{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-top:1px solid var(--line);align-items:center}
.course:first-child{border-top:0}
.course .lock{color:var(--muted);font-size:14px;white-space:nowrap}
.closed{background:var(--green-soft);border-radius:14px;padding:20px 22px;margin:24px 0;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.closed p{margin:0}
.auth{max-width:400px;margin:56px auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px}
.auth h1{font:700 26px/1.2 var(--serif);margin:0 0 6px}
.auth p.sub{color:var(--muted);margin:0 0 20px;font-size:15px}
.auth label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
.auth input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.auth input:focus{outline:2px solid var(--leaf);border-color:var(--leaf)}
.auth .btn{width:100%;margin-top:20px}
.auth .error{background:#f8e1dc;color:#8a2c1d;border-radius:10px;padding:10px 12px;font-size:15px;margin:0 0 6px}
.auth .hint{font-size:14px;color:var(--muted);margin-top:16px}
.site-footer{border-top:1px solid var(--line);margin-top:48px;padding:24px 0 36px;color:var(--muted);font-size:14px}
.site-footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.notfound{text-align:center;padding-top:64px;padding-bottom:64px}
.notfound .sprig{width:140px;height:auto}
.notfound h1{font:700 32px/1.2 var(--serif);margin:12px 0 8px}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:28px}
  .hero .sprig{max-height:200px;order:-1}
  .promo{grid-template-columns:1fr}
  body{font-size:16px}
}