
:root {
  --ink: #18352f;
  --ink-soft: #435b52;
  --leaf: #3f7d58;
  --leaf-dark: #205843;
  --moss: #87985f;
  --sun: #e3a83f;
  --clay: #c96e4d;
  --plum: #63455f;
  --cream: #f8f2de;
  --cream-2: #efe4c3;
  --paper: #fffdf6;
  --line: rgba(24,53,47,.18);
  --shadow: 0 18px 55px rgba(24,53,47,.12);
  --radius: 1.35rem;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 7%, rgba(227,168,63,.14), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(63,125,88,.12), transparent 26rem),
    var(--cream);
  font-family: var(--sans);
  line-height: 1.65;
  transition: background .25s ease, color .25s ease;
}
body[data-theme="dusk"] {
  --ink: #f7f0d8;
  --ink-soft: #c9d2c3;
  --leaf: #91c49e;
  --leaf-dark: #b8dfbf;
  --moss: #acbd82;
  --sun: #f2be58;
  --clay: #e48b68;
  --plum: #c99ac2;
  --cream: #102a25;
  --cream-2: #193a32;
  --paper: #17332d;
  --line: rgba(247,240,216,.18);
  --shadow: 0 18px 55px rgba(0,0,0,.28);
}
img, svg { max-width: 100%; }
a { color: var(--leaf-dark); text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { color: var(--clay); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.skip-link { position: absolute; left: -9999px; top: .5rem; z-index: 1000; background: var(--paper); padding: .75rem 1rem; border-radius: .7rem; }
.skip-link:focus { left: .5rem; }
.container { width: min(1160px, calc(100% - 2rem)); margin-inline: auto; }
.narrow { width: min(780px, calc(100% - 2rem)); margin-inline: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 800; color: var(--clay); }
.display { font-family: var(--serif); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin: 0; }
.lede { font-size: clamp(1.05rem, 2vw, 1.27rem); color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-soft); }
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--cream) 86%, transparent); border-bottom: 1px solid var(--line); }
.nav-wrap { min-height: 74px; display: flex; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .72rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand svg { width: 43px; height: 43px; color: var(--leaf-dark); }
.brand strong { font-family: var(--serif); font-size: 1.05rem; line-height: 1.05; }
.brand-copy { display: block; }
.brand-copy > span { display: block; font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.site-nav { display: flex; gap: .15rem; align-items: center; }
.site-nav a { color: var(--ink); text-decoration: none; padding: .62rem .75rem; border-radius: 999px; font-size: .91rem; font-weight: 650; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: color-mix(in srgb, var(--leaf) 14%, transparent); color: var(--leaf-dark); }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.menu-btn { display: none; }
.hero { position: relative; overflow: hidden; padding: clamp(4.2rem, 9vw, 8.5rem) 0 5.5rem; }
.hero::after { content: ''; position: absolute; inset: auto -6% -120px -6%; height: 220px; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(63,125,88,.08), rgba(63,125,88,.18)); z-index: -1; }
.hero-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hero h1 { font-size: clamp(3rem, 7vw, 6.6rem); }
.hero h1 em { color: var(--leaf-dark); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.65rem; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 46px; padding: .72rem 1rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 750; background: var(--paper); color: var(--ink); }
.btn:hover { transform: translateY(-1px); color: var(--ink); box-shadow: 0 8px 25px rgba(24,53,47,.1); }
.btn-primary { background: var(--leaf-dark); border-color: var(--leaf-dark); color: #fff; }
body[data-theme="dusk"] .btn-primary { color: #102a25; }
.btn-clay { background: var(--clay); border-color: var(--clay); color: #fff; }
.hero-emblem { position: relative; display: grid; place-items: center; min-height: 440px; }
.hero-emblem::before, .hero-emblem::after { content: ''; position: absolute; border-radius: 50%; }
.hero-emblem::before { width: 390px; aspect-ratio: 1; background: radial-gradient(circle, rgba(227,168,63,.25), rgba(227,168,63,.03) 64%, transparent 65%); }
.hero-emblem::after { width: 330px; aspect-ratio: 1; border: 1px solid var(--line); }
.hero-emblem svg { width: min(310px, 75vw); color: var(--leaf-dark); position: relative; z-index: 2; filter: drop-shadow(0 24px 30px rgba(24,53,47,.15)); }
.orbit-word { position: absolute; z-index: 3; padding: .38rem .65rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: .75rem; font-weight: 800; box-shadow: var(--shadow); }
.orbit-word.one { top: 12%; left: 8%; }.orbit-word.two { top: 20%; right: 1%; }.orbit-word.three { bottom: 18%; left: 4%; }.orbit-word.four { bottom: 7%; right: 8%; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section-sm { padding: 3rem 0; }
.section-head { display: flex; gap: 1.5rem; align-items: end; justify-content: space-between; margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(2.15rem, 5vw, 4rem); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.card { background: color-mix(in srgb, var(--paper) 95%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.15rem, 2.5vw, 1.65rem); box-shadow: 0 12px 38px rgba(24,53,47,.06); }
.card h3 { margin: .4rem 0 .5rem; font-family: var(--serif); font-size: 1.45rem; }
.card p:last-child { margin-bottom: 0; }
.petal-card { position: relative; overflow: hidden; min-height: 230px; }
.petal-card::after { content:''; position:absolute; width: 130px; height: 130px; border-radius: 70% 20% 70% 20%; right:-50px; bottom:-55px; transform: rotate(18deg); background: color-mix(in srgb, var(--leaf) 18%, transparent); }
.number { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--sun); color: #33240b; font-weight: 900; }
.band { background: var(--leaf-dark); color: #fff; position: relative; overflow: hidden; }
body[data-theme="dusk"] .band { color: #102a25; }
.band::before { content:''; position:absolute; inset:0; opacity:.16; background-image: radial-gradient(circle at 20% 30%, currentColor 0 2px, transparent 2.5px); background-size: 38px 38px; }
.band > * { position: relative; }
.quote-box { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; max-width: 900px; margin-inline: auto; }
.quote-mark { font: 5rem/.8 var(--serif); color: var(--sun); }
.quote-text { font: clamp(1.55rem, 3.2vw, 2.7rem)/1.25 var(--serif); margin: 0; }
.quote-source { display:block; margin-top: 1rem; opacity:.82; }
.page-hero { padding: clamp(4rem, 8vw, 7rem) 0 3rem; }
.page-hero h1 { font-size: clamp(2.8rem, 7vw, 6rem); max-width: 14ch; }
.breadcrumbs { font-size: .82rem; margin-bottom: 1.2rem; color: var(--ink-soft); }
.toc { position: sticky; top: 96px; align-self: start; }
.toc a { display:block; padding: .42rem 0; text-decoration:none; color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: .85rem; }
.toc a:hover { color: var(--leaf-dark); border-color: var(--leaf); }
.article-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.prose { font-family: var(--serif); font-size: 1.09rem; }
.prose h2, .prose h3 { scroll-margin-top: 100px; color: var(--ink); }
.prose h2 { font-size: 2.25rem; margin: 3.1rem 0 1rem; }
.prose h3 { font-size: 1.5rem; margin: 2rem 0 .7rem; }
.prose p, .prose li { max-width: 72ch; }
.prose .callout { font-family: var(--sans); font-size: 1rem; }
.callout { border-left: 5px solid var(--sun); background: color-mix(in srgb, var(--sun) 10%, var(--paper)); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; margin: 1.5rem 0; }
.misconception { border-left-color: var(--clay); }
.term { display: grid; grid-template-columns: minmax(130px,.3fr) 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.term dt { font-weight: 800; color: var(--leaf-dark); }
.term dd { margin: 0; }
.filter-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.filter-btn { border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); padding: .55rem .8rem; font-weight: 700; }
.filter-btn.is-active { background: var(--leaf-dark); color: #fff; }
body[data-theme="dusk"] .filter-btn.is-active { color: #102a25; }
.teaching-card[hidden] { display:none; }
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-button { width:100%; text-align:left; border:0; background:transparent; color:var(--ink); padding:1.1rem 0; display:flex; justify-content:space-between; gap:1rem; font-weight:800; }
.accordion-button::after { content:'+'; font-size:1.4rem; }
.accordion-button[aria-expanded="true"]::after { content:'−'; }
.accordion-panel { padding: 0 0 1.25rem; color: var(--ink-soft); }
.accordion-panel[hidden] { display:none; }
.remedy-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.remedy { min-height:180px; display:flex; flex-direction:column; justify-content:space-between; border-radius:45% 45% 18% 18%; background:color-mix(in srgb,var(--leaf) 15%,var(--paper)); padding:1.2rem; border:1px solid var(--line); }
.remedy strong { font:1.35rem var(--serif); }
.practice-tool { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.field { margin-bottom: 1rem; }
.field label { display:block; font-weight:750; margin-bottom:.4rem; }
.field input, .field textarea, .field select { width:100%; border:1px solid var(--line); color:var(--ink); background:var(--cream); border-radius:.85rem; padding:.75rem .85rem; }
.field textarea { min-height: 110px; resize: vertical; }
.tool-result { margin-top: 1rem; padding: 1rem; border-radius: 1rem; background: color-mix(in srgb, var(--leaf) 12%, var(--paper)); min-height: 62px; }
.desire-board { display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; }
.desire-column { border:1px dashed var(--line); border-radius:1rem; padding:.9rem; min-height:210px; }
.desire-column h3 { font-size:1rem; margin-top:0; }
.desire-chip { background:var(--paper); border:1px solid var(--line); border-radius:.8rem; padding:.65rem; margin:.5rem 0; display:flex; justify-content:space-between; gap:.5rem; }
.desire-chip button { border:0; background:transparent; color:var(--clay); }
.podcast-layout { display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr); gap:1.2rem; align-items:start; }
.episode-list { display:grid; gap:.65rem; }
.episode-btn { width:100%; text-align:left; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:1rem; padding:.9rem; }
.episode-btn:hover, .episode-btn.is-active { border-color:var(--leaf); background:color-mix(in srgb,var(--leaf) 10%,var(--paper)); }
.episode-btn strong, .episode-btn span { display:block; }
.episode-btn span { font-size:.78rem; color:var(--ink-soft); margin-top:.2rem; }
.player { background:var(--leaf-dark); color:#fff; border-radius:var(--radius); padding:clamp(1.2rem,3vw,2rem); position:sticky; top:95px; }
body[data-theme="dusk"] .player { color:#102a25; }
.player h2 { font:clamp(1.7rem,3vw,2.5rem) var(--serif); margin:.35rem 0; }
.player-controls { display:grid; grid-template-columns:auto 1fr auto; gap:.8rem; align-items:center; margin-top:1.4rem; }
.play-btn { width:56px; height:56px; border-radius:50%; border:0; background:var(--sun); color:#2e230e; font-weight:900; }
.seek { width:100%; accent-color:var(--sun); }
.time { font-variant-numeric:tabular-nums; font-size:.8rem; }
.player-lower { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1rem; }
.player-lower label { font-size:.8rem; }
.player select { border:1px solid rgba(255,255,255,.35); border-radius:.6rem; padding:.25rem .4rem; background:rgba(255,255,255,.12); color:inherit; }
.player option { color:#18352f; }
.transcript { margin-top:1.2rem; padding:1rem; border-radius:1rem; background:rgba(255,255,255,.12); }
.transcript[hidden] { display:none; }
.library-item { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.library-icon { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--sun) 20%,var(--paper)); font-family:var(--serif); font-size:1.25rem; }
.site-footer { background:#102f29; color:#f7f0d8; padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:1.2fr repeat(3,.6fr); gap:2rem; }
.site-footer a { color:#f7f0d8; opacity:.85; text-decoration:none; }
.site-footer a:hover { opacity:1; color:#f2be58; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin:.45rem 0; }
.footer-brand svg { width:68px; color:#f2be58; }
.footer-base { border-top:1px solid rgba(255,255,255,.18); margin-top:2rem; padding-top:1.2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; opacity:.78; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 900px) {
  .menu-btn { display:inline-grid; }
  .site-nav { position:absolute; left:1rem; right:1rem; top:78px; background:var(--paper); border:1px solid var(--line); border-radius:1rem; padding:.6rem; box-shadow:var(--shadow); display:none; flex-direction:column; align-items:stretch; }
  .site-nav.is-open { display:flex; }
  .hero-grid,.article-layout,.podcast-layout { grid-template-columns:1fr; }
  .hero-emblem { min-height:360px; order:-1; }
  .toc { position:relative; top:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.2rem .8rem; }
  .grid-4,.remedy-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .player { position:relative; top:0; }
}
@media (max-width: 650px) {
  .brand-copy > span { display:none; }
  .hero { padding-top:3rem; }
  .hero-emblem { min-height:300px; }
  .hero-emblem::before { width:280px; }.hero-emblem::after { width:245px; }
  .orbit-word { font-size:.66rem; }
  .grid-2,.grid-3,.grid-4,.remedy-grid,.desire-board,.footer-grid { grid-template-columns:1fr; }
  .section-head { display:block; }
  .toc { grid-template-columns:1fr; }
  .term { grid-template-columns:1fr; gap:.2rem; }
  .player-controls { grid-template-columns:auto 1fr; }
  .time { grid-column:2; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }
