/* Deeper page introductions, quiet colour studies below. */
body.color-depth {
  --ink:#283b34; --muted:#59655e; --paper:#fbfaf5; --white:#fffefa;
  --tone:#42644e; --tone-end:#567151; --tone-light:#e6ecdf;
  --tone-soft:#f1f4eb; --accent:#d4b896; --accent-soft:#f1e7db;
  --deep:var(--tone); --line:#dce1d7; --hero-ink:#fffdf5;
  background:var(--paper); color:var(--ink);
}
body[data-page="home"] {--tone:#2b544b;--tone-end:#3f6b5b;--tone-light:#e0e9df;--tone-soft:#f0f4eb;--accent:#d3b2a0;--accent-soft:#f2e6df}
body[data-page="about"] {--tone:#624b60;--tone-end:#806276;--tone-light:#e8dfe8;--tone-soft:#f6f0f5;--accent:#d8b58c;--accent-soft:#f5ecdf}
body[data-page="awareness"] {--tone:#315b64;--tone-end:#467580;--tone-light:#dce9e8;--tone-soft:#edf4f2;--accent:#b6acd0;--accent-soft:#eeebf5}
body[data-page="practice"] {--tone:#81513f;--tone-end:#936344;--tone-light:#efe0d4;--tone-soft:#f8f0e8;--accent:#b1bda6;--accent-soft:#eaf0e5}
body[data-page="courses"] {--tone:#494e71;--tone-end:#62688b;--tone-light:#e1e3ef;--tone-soft:#f0f1f8;--accent:#cfb17e;--accent-soft:#f5eedf}
body[data-page="resources"] {--tone:#65563f;--tone-end:#7c674b;--tone-light:#eae3d5;--tone-soft:#f5f1e8;--accent:#b4b2cd;--accent-soft:#edeaf4}
body[data-page="contact"] {--tone:#365466;--tone-end:#4d6f82;--tone-light:#dce6eb;--tone-soft:#eef3f5;--accent:#c9b2b6;--accent-soft:#f3e8e9}
body[data-page="programs"] {--tone:#5e4c6a;--tone-end:#766180;--tone-light:#e8dfed;--tone-soft:#f4eff7;--accent:#a6bcb3;--accent-soft:#e6efea}
body[data-page="course-intro"] {--tone:#754d54;--tone-end:#8c5d64;--tone-light:#eddee0;--tone-soft:#f8eff0;--accent:#b6bea6;--accent-soft:#ecf0e4}
body.color-depth header {background:rgba(251,250,245,.97);border-bottom:1px solid #e4e5db;backdrop-filter:blur(12px)}
body.color-depth header nav {min-height:84px}
body.color-depth .brand .brand-mark {width:54px;height:54px}
body.color-depth .nav-links a {color:#4b574e}
body.color-depth .nav-links a[aria-current="page"] {color:var(--tone);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
body.color-depth .nav-links .nav-cta {background:var(--tone);color:#fffdf7;border-radius:999px;text-decoration:none}
body.color-depth .button {border-radius:999px;min-height:50px;transition:background .2s,transform .2s}
body.color-depth .button:hover {transform:translateY(-2px)}
body.color-depth .button.primary {background:var(--tone);color:#fffdf7;border:1px solid var(--tone);box-shadow:none}
body.color-depth .button.secondary {border-color:var(--tone);color:var(--tone)}
body.color-depth :is(a,button,summary):focus-visible {outline:3px solid #c68540;outline-offset:5px}
body.color-depth :is(h1,h2) {font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;font-weight:500}
body.color-depth .kicker {color:var(--tone)}
body.color-depth.inner-page .page-hero.shell,
body.color-depth.home-intro .intro-hero {
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(115deg,var(--tone) 12%,var(--tone-end) 100%);
  color:var(--hero-ink);border:0;
}
body.color-depth.inner-page .page-hero.shell {padding-top:84px;padding-bottom:86px;min-height:430px}
body.color-depth.inner-page .page-hero> :not(.hero-art) {position:relative;z-index:1;max-width:760px}
body.color-depth.inner-page .page-hero h1 {color:var(--hero-ink);max-width:min(760px,76%);font-size:clamp(2.2rem,3.8vw,3.3rem);line-height:1.5;margin-bottom:22px;letter-spacing:.035em}
body.color-depth.inner-page .page-hero :is(.eyebrow,.lead,.copy-status) {color:#f1f2e9}
body.color-depth.inner-page .page-hero .lead {max-width:min(660px,73%);font-size:16px;line-height:2.05}
body.color-depth.inner-page .page-hero .eyebrow {font-size:12px;letter-spacing:.15em;margin-bottom:22px}
body.color-depth.inner-page .page-hero .button {background:transparent;color:#fffdf5;border-color:#cad5c5}
body.color-depth.inner-page .page-hero .button.primary {background:#fffdf5;color:var(--tone);border-color:#fffdf5}
body.color-depth.inner-page .page-hero .button:hover {background:var(--tone-light);color:var(--tone)}
.hero-art {position:absolute;z-index:0;pointer-events:none;width:280px;height:310px;right:max(34px,calc((100% - 1160px)/2));top:50%;transform:translateY(-45%);opacity:.85}
.hero-art span {position:absolute;display:block}
.hero-art span:nth-child(1) {width:160px;height:242px;left:24px;top:35px;border-radius:100px 100px 0 0;background:var(--accent);opacity:.9;transform:rotate(-16deg)}
.hero-art span:nth-child(2) {width:155px;height:242px;right:0;top:5px;border:1px solid #e8e3cb;border-radius:100px 100px 0 0;transform:rotate(17deg)}
.hero-art span:nth-child(3) {width:110px;height:110px;right:0;bottom:0;background:var(--tone-light);border-radius:50%;opacity:.8}
.hero-art:after {content:"";position:absolute;left:0;right:-35px;bottom:46px;height:1px;background:rgba(255,253,240,.4);transform:rotate(-12deg)}
body[data-page="awareness"] .hero-art span:nth-child(1),body[data-page="resources"] .hero-art span:nth-child(1) {border-radius:50% 50% 50% 0;transform:rotate(-30deg)}
body[data-page="practice"] .hero-art span:nth-child(1),body[data-page="contact"] .hero-art span:nth-child(1) {border-radius:100px 0 100px 0;transform:rotate(10deg)}
body.color-depth.home-intro .intro-hero {padding:68px 0 72px;min-height:650px}
body.color-depth.home-intro .intro-copy {grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
body.color-depth.home-intro .intro-hero h1 {color:#fffdf5;font-size:clamp(2.5rem,4vw,3.6rem);line-height:1.5;letter-spacing:.04em}
body.color-depth.home-intro .intro-hero .lead {color:#e5ebe3;max-width:490px;font-size:16px}
body.color-depth .notebook-eyebrow {color:#e2ded0;font-size:12px;letter-spacing:.13em}
body.color-depth .notebook-eyebrow:before {background:#d7b69e}
body.color-depth.home-intro .intro-hero .button {background:#fffdf5;color:var(--tone);border-color:#fffdf5}
body.color-depth.home-intro .hero-color-panel {background:#f6f4e9;border:0;border-radius:110px 24px 24px 24px;padding:42px 32px 26px;box-shadow:none;transform:rotate(2deg)}
body.color-depth .notebook-title {font-size:24px;color:#394d3f;margin:22px 0 6px}
body.color-depth .notebook-topline {color:#68715f;letter-spacing:.12em;border-bottom-color:#d5d9c9}
body.color-depth.home-intro .hero-color-panel .decorative-colors {gap:10px;padding:15px 0 22px}
body.color-depth.home-intro .hero-color-panel .decorative-swatch {border-radius:40px 40px 6px 6px;aspect-ratio:1/1.2;box-shadow:none}
body.color-depth.home-intro .hero-color-panel .decorative-swatch:nth-child(even) {border-radius:6px 6px 40px 40px}
body.color-depth .notebook-prompts {border-color:#d5d9c9;color:#52614e}
body.color-depth .notebook-prompts li {padding:8px 0;border-color:#dce0d1}
body.color-depth .notebook-caption {color:#68715f}
body.color-depth.home-intro .intro-credentials {background:var(--tone-light);color:#435747;padding:19px 0}
body.color-depth .section,body.color-depth.home-intro :is(.section,.method) {padding-top:80px;padding-bottom:80px}
body.color-depth main>.section,
body.color-depth.inner-page:not(.resources-page) main>.section:not(.deep) {background:var(--paper);position:relative;isolation:isolate}
body.color-depth main>.section.white,
body.color-depth.inner-page:not(.resources-page) main>.section.white {background:#fffefa}
body.color-depth main>.section.soft-field,
body.color-depth.inner-page:not(.resources-page) main>.section.soft-field {background:linear-gradient(125deg,var(--tone-soft),var(--accent-soft));border:0}
body.color-depth main>.section.soft-field:after {content:"";position:absolute;right:0;bottom:0;width:170px;height:170px;border-radius:170px 0 0 0;background:var(--tone-light);opacity:.65;z-index:-1;pointer-events:none}
body.color-depth .section-head h2 {font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.5}
body.color-depth .section-head {margin-bottom:34px}
body.color-depth .section-head .kicker {display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em}
body.color-depth .section-head .kicker:before {content:"";width:18px;height:18px;flex:none;background:var(--accent);border-radius:50% 50% 0 50%;transform:rotate(-15deg)}
body.color-depth :is(.card,.feature,.resource-card,.info-grid>div,.video-card) {background:#fffefa;border:1px solid var(--line);border-radius:18px;box-shadow:none}
body.color-depth .grid-3>.card {position:relative;overflow:hidden;border-top:3px solid var(--tone)}
body.color-depth .grid-3>.card:nth-child(2) {border-top-color:var(--accent);background:var(--accent-soft)}
body.color-depth .grid-3>.card:nth-child(3) {border-top-color:#9aa996;background:var(--tone-soft)}
body.color-depth .card .number {color:var(--tone);font:400 28px/1.3 Georgia,serif;margin-bottom:25px}
body.color-depth :is(.card,.feature) p {color:var(--muted)}
body.color-depth .feature {border-left:3px solid var(--accent);padding:32px}
body.color-depth .notice,body.color-depth.home-intro .awareness-note {background:var(--tone-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 18px 18px 0;padding:30px}
body.color-depth .course-card .tag,body.color-depth .tag {background:var(--tone-light);border-radius:999px;color:var(--tone)}
body.color-depth .featured-course {background:var(--tone-soft);border:1px solid var(--line);border-radius:32px 8px 32px 8px}
body.color-depth.inner-page .section.deep,body.color-depth.inner-page:not(.resources-page) .section.deep {
  background:linear-gradient(115deg,var(--tone-light),var(--accent-soft));color:var(--ink);border:0;position:relative;isolation:isolate;
}
body.color-depth.inner-page .section.deep:after {content:"";position:absolute;right:6%;bottom:0;width:160px;height:80px;border:1px solid var(--tone);border-bottom:0;border-radius:90px 90px 0 0;opacity:.22;z-index:-1;pointer-events:none}
body.color-depth.inner-page .section.deep :is(h2,h3,p,.kicker,.course-card a,.section-head p,.video-card>span) {color:var(--ink)}
body.color-depth.inner-page .section.deep .kicker[style] {color:var(--tone)!important}
body.color-depth.inner-page .section.deep :is(.card,.feature,.video-card) {background:rgba(255,254,250,.8);border-color:var(--line)}
body.color-depth.inner-page .section.deep .course-card .tag {background:var(--tone-light);color:var(--tone);border-radius:999px}
body.color-depth .topic-list.dark :is(p,article) {color:var(--muted);border-color:var(--line)}
body.color-depth :is(.resource-card[open] summary,.check-list li) {background:var(--tone-soft)}
body.color-depth .resource-card summary {position:relative;padding-right:50px}
body.color-depth .resource-card summary:after {content:"+";position:absolute;right:25px;top:27px;font-size:24px;font-weight:300;color:var(--tone)}
body.color-depth .resource-card[open] summary:after {content:"−"}
body.color-depth .resource-card summary span,body.color-depth .video-card>span {color:var(--tone)}
body.color-depth .contact-box,body.color-depth.home-intro .contact-box {background:var(--tone);color:#fffdf5;border:0;border-radius:32px 8px 32px 8px}
body.color-depth .contact-box :is(h2,p) {color:#fffdf5}
body.color-depth .contact-box .button[style],body.color-depth.home-intro .contact-box .button[style] {background:#fffdf5!important;color:var(--tone)!important}
body.color-depth .contact-box .button.primary {background:#fffdf5;color:var(--tone);border-color:#fffdf5}
body.color-depth.inner-page .page-hero .email-address {background:rgba(255,255,255,.06);color:#fffdf5;border-color:#adbfc7;border-radius:10px}
body.color-depth.home-intro .home-difference,body.color-depth.home-intro .home-purpose,body.color-depth.home-intro .home-next {border:0}
body.color-depth.home-intro .method-head>p {background:var(--accent-soft);border:0;border-radius:48px 8px 48px 8px;padding:38px;color:var(--ink)}
body.color-depth.home-intro .audience {background:var(--tone-soft);color:var(--ink);padding:75px 0}
body.color-depth.home-intro .audience-grid>div:first-child {background:var(--tone);color:white;border:0;border-radius:90px 14px 14px 14px;padding:42px 32px}
body.color-depth.home-intro .audience-grid>div:first-child .kicker {color:#e7e8d8!important}
body.color-depth.home-intro .moment {background:#fffefa;border:1px solid var(--line);border-radius:16px}
body.color-depth.home-intro .moment p {color:var(--muted)}
body.color-depth.home-intro .moment span {color:var(--tone)}
body.color-depth.home-intro .home-entry-card {background:var(--tone-soft);border:1px solid var(--line);border-radius:28px 8px 28px 8px}
body.color-depth.home-intro .home-entry-card.course-entry {background:var(--accent-soft);border-radius:8px 28px 8px 28px}
body.color-depth.home-intro .home-founder-photo {background:var(--tone-light);border-radius:120px 120px 14px 14px;padding:18px 18px 0;overflow:hidden}
body.color-depth.home-intro .home-founder-photo img {filter:none;border-radius:105px 105px 0 0}
body.color-depth.inner-page .founder-photo img {border-radius:80px 8px 8px 8px}
body.color-depth footer {background:var(--tone-soft);color:var(--muted);border-top:1px solid var(--line)}
body.color-depth .menu-button {border-radius:12px;background:#fffefa}
@media (max-width:1100px) {
  body.color-depth header nav {min-height:78px}
  body.color-depth .nav-links {top:78px;background:#fffefa;border-radius:0 0 18px 18px;box-shadow:0 18px 35px #283b3417}
  .hero-art {right:30px;transform:translateY(-40%) scale(.8);transform-origin:right center;opacity:.55}
  body.color-depth.inner-page .page-hero h1 {max-width:80%}
  body.color-depth.home-intro .intro-copy {gap:40px}
}
@media (max-width:760px) {
  body.color-depth .brand .brand-mark {width:48px;height:48px}
  body.color-depth.inner-page .page-hero.shell {padding:50px 24px 115px;min-height:0}
  body.color-depth.inner-page .page-hero h1 {font-size:clamp(1.75rem,8.2vw,2.1rem);line-height:1.6;max-width:100%;margin-bottom:20px;letter-spacing:.01em}
  body.color-depth.inner-page .page-hero .lead {max-width:100%;font-size:16px}
  body.color-depth.inner-page .page-hero .eyebrow {font-size:11px;margin-bottom:18px}
  .hero-art {width:140px;height:75px;top:auto;bottom:-4px;right:25px;transform:none;opacity:.55}
  .hero-art span:nth-child(1) {width:58px;height:85px;left:18px;top:3px;transform:rotate(-16deg)}
  .hero-art span:nth-child(2) {width:62px;height:90px;right:0;top:-5px}
  .hero-art span:nth-child(3) {width:44px;height:44px;right:3px;bottom:-6px}
  .hero-art:after {bottom:12px;right:-10px}
  body.color-depth.home-intro .intro-hero {padding:47px 0 50px}
  body.color-depth.home-intro .intro-copy {grid-template-columns:1fr;gap:38px}
  body.color-depth.home-intro .intro-hero h1 {font-size:2.3rem;line-height:1.5}
  body.color-depth.home-intro .hero-color-panel {padding:32px 24px 24px;max-width:430px;border-radius:75px 18px 18px 18px;transform:none}
  body.color-depth .notebook-title {font-size:22px}
  body.color-depth .section,body.color-depth.home-intro :is(.section,.method) {padding-top:52px;padding-bottom:52px}
  body.color-depth .section-head h2 {font-size:1.8rem}
  body.color-depth .section-head {margin-bottom:28px}
  body.color-depth main>.section.soft-field:after {width:85px;height:85px}
  body.color-depth .section-head .kicker {font-size:11px}
  body.color-depth .contact-box {padding:30px}
  body.color-depth.home-intro .audience {padding:52px 0}
  body.color-depth.home-intro .audience-grid>div:first-child {border-radius:60px 12px 12px 12px}
}
@media (prefers-reduced-motion:reduce) {body.color-depth .button {transition:none}body.color-depth .button:hover {transform:none}}

/* Homepage color spheres. */
body.color-depth.home-intro .hero-color-panel .decorative-swatch,
body.color-depth.home-intro .hero-color-panel .decorative-swatch:nth-child(even){
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 29% 24%,rgba(255,255,255,.82),rgba(255,255,255,.3) 16%,rgba(255,255,255,0) 46%),var(--c);
  box-shadow:inset -4px -6px 9px rgba(0,0,0,.19),inset 2px 2px 4px rgba(255,255,255,.3),0 5px 8px rgba(26,38,32,.15);
}
