@font-face{font-family:Fraunces;src:url('/app/fonts/fraunces-latin-300-normal.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Fraunces;src:url('/app/fonts/fraunces-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url('/app/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url('/app/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
:root {
  --paper: #f4f1ea; --paper-2: #ebe7dd; --ink: #1b1830; --muted: #625f78; --hair: #d6d1c4;
  --accent: #3b3a8c; --accent-ink: #fff;
  --perennial-bg: #15132b; --perennial-fg: #ecEAf6; --bq-bg: #edf3ff; --bq-fg: #16305f;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5vw, 56px); --max: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #121019; --paper-2: #1a1724; --ink: #ece9f5; --muted: #a09cb8; --hair: #2c2840; --accent: #a9a7ff; --accent-ink: #121019; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--sans); }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(40px, 7.5vw, 76px); }
h2 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 14px; }
h3 { font-size: 24px; }
p { margin: 0 0 14px; }
.muted { color: var(--muted); font-size: 15px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 6px; z-index: 10; }
.skip:focus { left: 8px; }

.site-header, .site-footer, .hero, .products, .principles, .band > *, .page { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.site-header { display: flex; justify-content: space-between; align-items: center; padding-block: 22px; }
.site-header nav { display: flex; gap: 22px; font-size: 15px; }
.site-header nav a { color: var(--ink); text-decoration: none; }
.site-header nav a:hover { color: var(--accent); }
.wordmark { font: 300 28px/1 var(--serif); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.wordmark.small { font-size: 22px; margin-bottom: 6px; }

.hero { padding-block: clamp(56px, 11vw, 128px) clamp(40px, 6vw, 72px); }
.eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.lede { font: 300 clamp(20px, 2.6vw, 26px)/1.45 var(--serif); color: var(--ink); max-width: 36em; margin-top: 26px; }
.button { display: inline-block; background: var(--accent); color: var(--accent-ink); padding: 14px 24px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 16px; }
.button:hover { filter: brightness(1.1); }

.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; padding-bottom: 72px; }
.card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--hair); background: var(--paper-2); transition: transform .35s ease, border-color .35s ease; }
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card-art { display: grid; place-items: center; height: 240px; }
.card-perennial .card-art { background: var(--perennial-bg); color: var(--perennial-fg); }
.card-bq .card-art { background: var(--bq-bg); color: var(--bq-fg); }
.bq-word { font: 600 clamp(26px, 4.4vw, 38px)/1.1 var(--sans); letter-spacing: 0.14em; text-align: center; }
.card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body p { color: var(--ink); margin: 0 0 10px; }
.tag { font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) !important; }
.more { margin-top: auto; color: var(--accent); font-weight: 600; }

.principles { padding-block: 24px 96px; border-top: 1px solid var(--hair); padding-top: 56px; }
.principles ul { list-style: none; margin: 28px 0 0; padding: 0 var(--gutter) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.principles h3 { font-size: 22px; margin-bottom: 8px; }
.principles p { color: var(--muted); }

.page { padding-block: 40px 96px; max-width: 760px; }
.page h1 { font-size: clamp(36px, 6vw, 56px); margin-bottom: 8px; }
.page h2 { font-size: 24px; margin: 38px 0 8px; font-weight: 400; }
.page .lede { margin-bottom: 26px; }
.legal p { max-width: 38em; }
.crumbs { font-size: 14px; margin-bottom: 26px; color: var(--muted); }

.hero-perennial { text-align: center; }
.hero-perennial .lede { margin-inline: auto; }
.rings-hero { width: min(300px, 62vw); height: auto; display: block; margin: 0 auto 36px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.band { padding-block: 56px; }
.band.alt { background: var(--paper-2); }
.band > * { max-width: var(--max); }
.band > p, .band > h2 { margin-left: max(0px, calc((100% - var(--max)) / 2)); margin-right: auto; }
.band > p { max-width: calc(40em + 2 * var(--gutter)); }
.moves { list-style: none; padding: 28px var(--gutter) 0; margin: 0 auto; max-width: var(--max); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; }
.moves li { border-top: 1px solid var(--hair); padding-top: 16px; }
.moves .n { font: 300 14px var(--serif); color: var(--muted); }
.moves h3 { font-size: 24px; margin: 4px 0 6px; }
.moves p { color: var(--muted); }

.site-footer { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; padding-block: 40px 56px; border-top: 1px solid var(--hair); font-size: 15px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: flex-start; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer p { margin: 0; }

/* Perennial rings: each ring draws itself in turn, then the whole mark breathes. */
.rings { color: var(--perennial-fg); }
.hero-perennial .rings { color: var(--ink); }
.rings path { fill: none; stroke: currentColor; stroke-linecap: round; }
.rings circle { fill: currentColor; }
.rings-card { width: 168px; height: 168px; }
@media (prefers-reduced-motion: no-preference) {
  .rings path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: draw 1.5s cubic-bezier(.5,0,.2,1) forwards; animation-delay: calc(var(--i) * .28s + .15s); }
  .rings circle { opacity: 0; animation: pop .7s ease forwards; }
  .rings-hero { animation: breathe 9s ease-in-out 2.6s infinite alternate; }
  .card:hover .rings-card { transform: rotate(8deg); transition: transform 1.2s ease; }
  .rings-card { transition: transform 1.2s ease; }
}
@keyframes draw { to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes pop { to { opacity: 1; } }
@keyframes breathe { from { transform: rotate(-3deg) scale(.985); } to { transform: rotate(3deg) scale(1.025); } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

.course-grid{max-width:1080px;margin:0 auto;padding:32px var(--gutter) 72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.course-card{border:1px solid var(--hair);border-radius:18px;padding:28px;text-decoration:none;color:var(--ink);background:var(--paper-2)}
.course-card h2,.course-card h3{font-size:26px;margin:10px 0 14px}.course-card p{color:var(--muted)}.course-card .more{font-size:15px}
.course-card:hover{border-color:var(--accent)}.section-heading{max-width:1080px;margin:0 auto;padding:45px var(--gutter) 0}
blockquote{border-left:2px solid var(--accent);margin:30px 0;padding:5px 0 5px 24px;font:300 25px/1.5 var(--serif)}blockquote cite{display:block;font:400 14px/1.6 var(--sans);color:var(--muted);margin-top:18px}
.lesson-list{padding-left:24px}.lesson-list li{padding:10px 0;border-bottom:1px solid var(--hair)}.page .button{margin-block:16px}.hero .brand-art{display:block;width:min(230px,50vw);margin:0 auto 38px}.hero{text-align:center}.hero .lede{margin-inline:auto}
@media(max-width:540px){.wordmark{font-size:23px}.site-header nav{gap:14px}.site-header{align-items:flex-start}.site-header nav a{font-size:14px}.site-footer ul{display:grid;grid-template-columns:1fr 1fr}.page{overflow-wrap:break-word}}

@media(prefers-color-scheme:dark){.hero .brand-art{filter:invert(1) brightness(1.6)}}

/* Library: a quiet editorial collection, sharing the practice's paper and type. */
.library-shell{max-width:var(--max);margin-inline:auto;padding:40px var(--gutter) 80px}
.library-intro{padding:38px 0 36px;max-width:820px}.library-intro h1{font-size:clamp(44px,6.7vw,72px)}
.library-intro .lede{margin-bottom:20px}.library-search{margin-top:38px;max-width:620px}
.library-search label{display:block;font-size:15px;margin-bottom:8px;font-weight:600}
.search-field{display:flex;gap:8px}.search-field input{min-width:0;flex:1;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-radius:8px;padding:14px 16px;font:inherit;font-size:16px}
.search-field button{border:0;border-radius:8px;background:var(--accent);color:var(--accent-ink);font:600 15px var(--sans);padding:12px 20px;cursor:pointer}.library-search .muted{margin-top:9px;font-size:13px}
input:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.library-section{padding-block:36px}.library-section .eyebrow{margin-bottom:14px}
.theme-links,.category-links{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.theme-links a,.category-links a{border:1px solid var(--hair);border-radius:999px;padding:10px 17px;text-decoration:none;color:var(--ink);font-size:15px}
.theme-links a:hover,.category-links a:hover{background:var(--paper-2);border-color:var(--accent)}.theme-links a span{margin-left:14px}
.reading-path{background:var(--paper-2);border:1px solid var(--hair);border-radius:20px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1.4fr 1fr;gap:40px;margin:20px 0}
.reading-path h2{font-size:clamp(29px,4vw,42px)}.reading-path .eyebrow{margin-bottom:18px}.reading-path .button{margin-top:12px}.reading-path ol{list-style:none;padding:0;margin:0;align-self:center}.reading-path li{border-top:1px solid var(--hair);padding:18px 0;font:300 21px/1.4 var(--serif)}.reading-path li span{display:block;font:400 12px/1.6 var(--sans);letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.reading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.reading-card{display:flex;flex-direction:column;padding:28px;border:1px solid var(--hair);border-radius:14px;color:var(--ink);text-decoration:none;min-width:0}
.reading-card:hover{border-color:var(--accent);background:var(--paper-2)}.reading-card .tag{margin-bottom:15px}.reading-card h3{font-size:28px;line-height:1.2;margin-bottom:15px}.reading-card>p:not(.tag){color:var(--muted);font-size:16px}.reading-card .more{padding-top:15px;font-size:14px}.reading-card .more span{float:right}
[hidden]{display:none!important}.library-note{border-top:1px solid var(--hair);padding:36px 0;margin:28px 0}.library-note p{max-width:640px}.library-note h2{font-size:30px}.library-note .button{margin-top:10px}
.collection-intro{max-width:780px;padding:20px 0}.collection-intro h1{font-size:clamp(40px,6vw,64px)}.category-grid{max-width:760px}
.theme-start{border-left:3px solid var(--accent);background:var(--paper-2);padding:28px;margin-top:25px}.theme-start h2 a{color:var(--ink);text-decoration:none}.theme-start h2 a:hover{text-decoration:underline}
.article{max-width:760px;padding:40px var(--gutter) 0;margin:auto}.article-header h1{font-size:clamp(38px,5.5vw,58px);line-height:1.12}.article-header .eyebrow{font-size:11px;margin-bottom:18px}.article-header .lede{margin-top:22px}.article-meta{color:var(--muted);font-size:13px;margin:23px 0 30px}
.article-contents{border-block:1px solid var(--hair);padding:16px 0;margin:0 0 36px;font-size:15px}.article-contents summary{cursor:pointer;font-weight:600}.article-contents ol{padding-left:22px}.article-contents li{padding:5px 0}
.article-body{font-size:18px;line-height:1.85}.article-body h2{font-size:29px;margin:42px 0 18px;scroll-margin-top:25px}.article-body p{margin-bottom:20px}.article-body li{margin:10px 0}.article-body ul,.article-body ol{padding-left:25px}
.reflection{border-left:3px solid var(--accent);padding:22px 26px;margin:42px 0;background:var(--paper-2)}.reflection .eyebrow{font-size:11px;margin-bottom:12px}.reflection>p:last-child{font:300 27px/1.45 var(--serif);margin:0}
.article-sources{border-top:1px solid var(--hair);padding-top:26px;font-size:14px;scroll-margin-top:24px}.article-sources h2{font-size:25px}.article-sources ul{padding-left:20px}.article-sources li{margin-bottom:17px}.article-sources p{color:var(--muted);margin-top:4px}.article-practice{border:1px solid var(--hair);padding:28px;border-radius:14px;margin-top:36px;background:var(--paper-2)}.article-practice h2{font-size:30px}.article-practice .eyebrow{margin-bottom:15px;font-size:11px}.article-practice .button{margin-top:8px}
.related-reading{padding-top:60px}.related-reading>p:last-child{margin-top:30px}.related-reading .reading-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.related-reading .reading-card{padding:22px}.related-reading .reading-card h3{font-size:24px}.related-reading .tag{font-size:10px!important}
.table-scroll{overflow-x:auto;margin:24px 0}.article table{border-collapse:collapse;width:100%;min-width:480px;font-size:15px;line-height:1.6}.article caption{text-align:left;font-size:13px;color:var(--muted);margin-bottom:10px}.article th,.article td{text-align:left;vertical-align:top;border-bottom:1px solid var(--hair);padding:14px 12px}.article thead{background:var(--paper-2)}.practice-steps li{padding-bottom:14px}.practice-steps strong{display:block}
@media(max-width:700px){.reading-path{grid-template-columns:1fr;gap:20px}.related-reading .reading-grid{grid-template-columns:1fr}.reading-grid{grid-template-columns:1fr}.article-body{font-size:17px}.article-body h2{font-size:26px}.library-intro{padding-top:15px}.article{padding-top:24px}.reading-card h3{font-size:26px}}
@media(max-width:400px){.site-header{flex-wrap:wrap;gap:18px}.site-header nav{width:100%;justify-content:space-between}.search-field button{padding-inline:14px}.reading-card{padding:23px}.article-practice .button{font-size:14px;padding:12px 16px}}