/* Additions needed when the static design is rendered by Wagtail/Django (editable content, real forms).
   Everything visual still comes from tokens.css + site.css. */
.section--tight { padding-block: var(--s-8); }
.richtext { font-size: 1.1rem; line-height: 1.75; }
.richtext > :first-child { margin-top: 0; }
.richtext h2 { font-size: var(--step-3); margin: 1.8em 0 .5em; }
.richtext h3 { font-size: var(--step-2); margin: 1.6em 0 .4em; }
.richtext a { color: var(--green-600); font-weight: 600; }
.richtext ul, .richtext ol { padding-left: 1.3rem; display: grid; gap: .5rem; margin: 0 0 1.4em; }
.richtext li::marker { color: var(--spark-600); font-weight: 700; }
.richtext img { border-radius: var(--r-md); }
.prose-block .richtext { font-size: var(--step-0); }
.split--reverse > :first-child { order: 2; }
.ph-note { font-size: var(--step--1); color: var(--c-text-muted); max-width: 26rem; }
.stats-note { font-size: var(--step--1); margin: var(--s-4) 0 0; }
.footer__legal a { color: inherit; opacity: .85; }
.footer__legal a:hover { opacity: 1; }
.member__ph--img { border: 0; overflow: hidden; padding: 0; }
.member__ph--img img { width: 100%; height: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: var(--r-sm); padding: .85rem 1rem; margin: 0 0 var(--s-5); font-weight: 600; }
.form-status.is-ok { background: var(--green-100); color: var(--ink-800); border: 1px solid var(--green-200); }
.form-status.is-err { background: #fdeae6; color: #8a2a1a; border: 1px solid #f0b8ad; }
.errorlist { list-style: none; margin: .2rem 0 0; padding: 0; color: #b03a26; font-size: .85rem; }
.fields--stack { grid-template-columns: 1fr; }
.sticky-card .fields { gap: .85rem; margin: var(--s-4) 0; }
.sticky-card .field textarea { min-height: 5.5rem; }
.sticky-card form .btn { margin-top: .25rem; }
.form-fine { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: var(--c-text-muted); margin: .75rem 0 0; }
.sticky-card .price + .ph { display: inline-flex; }
.lessons { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; counter-reset: l; }
.lessons li { counter-increment: l; }
.lessons a { display: block; background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.25rem 1rem 3.5rem; position: relative; text-decoration: none; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.lessons a::before { content: counter(l); position: absolute; left: 1.1rem; top: 1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--ink-900); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 700; }
.lessons a:hover { border-color: var(--green-500); box-shadow: var(--sh-1); }
.lessons small { display: block; color: var(--c-text-muted); }
.lesson-nav { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--step--1); }
.pager { display: flex; justify-content: center; align-items: center; gap: var(--s-5); margin-top: var(--s-7); color: var(--c-text-muted); }
.page-hero .lede p { margin: 0 0 .6em; }
.page-hero .lede p:last-child { margin: 0; }
.post__img img, .door > img { width: 100%; height: 100%; object-fit: cover; }
/* Stats on a dark band (About) */
.section--dark .stats, .section--dark .stat { border-color: var(--c-border-on-dark); }
.section--dark .stat__n { color: #fff; }
.section--dark .stat__l { color: var(--c-text-on-dark-muted); }
.section--tight + .section--tight { padding-top: 0; }

/* Imported content hardening: grid children may shrink, wide tables scroll inside their wrapper, no stray overflow */
.svc-layout > *, .prose-block, .prose { min-width: 0; }
.prose-block img, .prose img, .prose-block table, .prose table { max-width: 100%; height: auto; }
.prose-block table, .prose table { display: block; overflow-x: auto; }
.prose-block, .prose { overflow-wrap: anywhere; }
@media (max-width: 640px) { .price-table { min-width: 480px; } .price-table th, .price-table td { padding: .75rem .6rem; } }
html, body { overflow-x: clip; }