/* Layout refinements. Existing palette, fonts and type scale are inherited. */
/* Site-wide editorial alignment, including explicitly centered legacy blocks. */
#main h1,#main h2,#main h3,#main h4,#main p,#main .banner__body,#main .card,#main .fact{text-align:left}
#main .section-head{margin-inline:0}
#main .lede,#main .hero__stand{margin-inline:0}
#main .eyebrow{justify-content:flex-start}
#main .card__icon,#main .card>.tag,#main .card .arrow-link{align-self:flex-start}
#main .btn-row{justify-content:flex-start}
#main .topic-preview .section-head{max-width:none}
/* Center the page composition while keeping forms and long reading usable. */
.section-head,.measure{margin-inline:auto;text-align:left}
.section .btn-row,.hero .btn-row,.banner .btn-row{justify-content:center}
.banner__body,.fact,.card{text-align:center}
.banner .lede{margin-inline:auto}
.hero__grid>div:first-child{text-align:left}
.hero .lede,.hero__stand{margin-inline:0}
.hero .btn-row,.hero__meta{justify-content:flex-start}
.card__icon,.card>.tag{align-self:center}
.card .arrow-link{align-self:center}
.topics{justify-content:center}
.entry__content>:not(.bleed),.band>*{margin-inline:auto}
.entry__content>h2,.entry__content>h3,.entry__content>.lede{text-align:left}
.page-head,.page-head--with-image{padding-block:clamp(2.5rem,5vw,4rem)}
.page-head__grid{grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center;text-align:left}
.page-head--with-image .page-head__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;text-align:left}
.page-head .page-head__text{padding:0;max-width:760px;margin:0;min-width:0}
.page-head__text::before{content:"";display:block;width:48px;height:4px;border-radius:4px;background:var(--terracotta);margin-bottom:1.5rem}
.page-head__text .lede{margin:1.25rem 0 0;max-width:44ch}
.page-head__media{width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:calc(var(--r-lg) + 12px);background:var(--cream)}
.page-head--with-image .page-head__media .figure{height:auto;aspect-ratio:4/3;margin:0;border-radius:var(--r-lg)}
.page-head--with-image .page-head__media .figure img{object-position:center}
.page-head--with-image .page-head__media .ph{aspect-ratio:4/3}
.contact-hero .banner__body{text-align:left}
.contact-hero .banner .lede{margin-inline:0}
.contact-hero .banner .btn-row{justify-content:flex-start}
.contact-more{align-items:center}
.contact-more__note:last-child{margin-bottom:0}
@media(max-width:860px){
  .page-head--with-image .page-head__grid{grid-template-columns:1fr;gap:2rem}
  .page-head__media{max-width:600px}
}
.break.break--panel{background:var(--cream);padding:clamp(2rem,4vw,3rem) 0}
.break__panel{overflow:hidden;border-radius:var(--r-lg);background:var(--forest)}
.break--panel .figure{height:auto;aspect-ratio:16/7;margin:0;border-radius:0}
.break--panel .figure img{border-radius:0;object-position:center}
.break__body{padding:1.25rem clamp(1.25rem,3vw,2.5rem)}
.break--panel .break__caption{display:flex;align-items:center;justify-content:center;gap:1rem 2rem;margin:0;padding:0;text-align:center}
.break__caption span{max-width:65ch}
.break--panel .break__caption a{flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:.5rem 1rem;border:1px solid var(--muted);border-radius:100px}
.ask-form{max-width:680px;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r-lg);background:var(--white);color:var(--forest);box-shadow:var(--shadow-sm)}
.ask-form .ask-form__title{color:var(--forest);margin-bottom:1.5rem}
.ask-form .form-card{padding:0;border:0;box-shadow:none;background:transparent;gap:.25rem 1.25rem}
.form-card .field label,.form-card .field legend,.form-card .consent{color:var(--forest)}
.form-card{text-align:left}
.ask-form .field{min-width:0}
.ask-form .field input,.ask-form .field textarea{background:var(--cream);border-color:var(--line)}
@media(max-width:640px){
  .page-head--with-image .page-head__media .figure,.page-head--with-image .page-head__media .ph,.break--panel .figure{aspect-ratio:4/3}
  .break--panel .break__caption{flex-direction:column;gap:.75rem}
  .ask-form .field:not(:has(textarea)){grid-column:1/-1}
}
:root{--section-y:clamp(3rem,6vw,5.5rem)}
html{scroll-padding-top:112px}
.section--tight{padding-block:clamp(2.5rem,4vw,4rem)}
.hero{padding-block:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:901px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,3vw,2.75rem)}
  .hero .figure{width:100%;height:auto;aspect-ratio:1/1}
  .hero .figure img{object-position:35% center}
}
.grid>*,.banner>*,.hero__grid>*,.topic-preview>*{min-width:0}
.section-head{margin-bottom:clamp(1.5rem,3vw,2.618rem)}
.card,.card--fork,.testimonial,.form-card{border-radius:var(--r-lg)}
.card{gap:.8rem}
/* Static information should not lift as though the whole card were a link. */
.card:hover{transform:none;box-shadow:var(--shadow-sm)}
.ladder li:hover,.questions li:hover,.topics-grid li:hover{transform:none;filter:none}
.questions li:hover{border-left-width:4px}
.card .arrow-link{align-self:center;min-height:44px}
.card__icon{flex-shrink:0}
.btn{min-height:48px;max-width:100%;white-space:normal;text-align:center}
.btn .icon,.contact-alt .icon,.contact-email .icon{flex-shrink:0}
.chip,.nav-toggle,.carousel__arrow{min-height:44px;min-width:44px}
.nav .sub-menu::before{content:"";position:absolute;inset:-10px 0 100%}
.nav a:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.signup input:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.field textarea{resize:vertical;min-height:140px}
.contact-alt__email,.contact-alt__phone,.contact-email a{white-space:normal;overflow-wrap:anywhere;min-width:0}
.footer-contact a{overflow-wrap:anywhere;min-height:36px}
.figure:not(.figure--illustration),.figure:not(.figure--illustration) img{border-radius:var(--r-lg)}
.page-head--with-image .page-head__media{margin-inline:0}
.learning-media{max-width:860px;margin:0 auto clamp(2rem,4vw,3rem)}
.learning-media .figure,.learning-media .ph{aspect-ratio:16/7}
.topic-preview{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;justify-items:center;text-align:center}
.topic-preview>.measure{max-width:100%;width:100%}
.topic-preview .section-head{max-width:800px;margin-inline:auto}
.topic-preview .lede{margin-inline:auto}
.topic-preview .topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;max-width:980px;margin-inline:auto}
.topic-preview .topics .tag{display:flex;align-items:center;justify-content:center;min-height:64px;padding:1rem;border-radius:var(--r-md);text-align:center;white-space:normal}
.topic-preview .btn-row{justify-content:center;margin-top:2rem}
.topic-preview__media{width:100%;max-width:980px}
.topic-preview__media .ph,.topic-preview__media .figure{aspect-ratio:16/5}
.topic-preview .section-head{margin-bottom:1.5rem}
.ph{position:relative;width:100%;border:1px dashed var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2.5rem)}
.ph__content{display:grid;justify-items:center;gap:1rem;max-width:28ch}
.ph__content svg{width:56px;height:42px;opacity:.65}
.media-placeholder__caption{margin:1rem 0 0}
.fact{padding-block:1.25rem;border-top:1px solid var(--line)}
.faq,.faq summary,.faq details p{text-align:left}
.faq summary{min-height:56px;gap:1rem}
[hidden]{display:none!important}
@media(max-width:1100px){
  .site-header.is-open .nav{max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:860px){
  .topic-preview{grid-template-columns:1fr}
  .topic-preview__media{width:100%}
  .learning-media .figure,.learning-media .ph{aspect-ratio:16/9}
}
@media(max-width:640px){
  .topic-preview .topics{grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem}
  .topic-preview .topics .tag{padding:.75rem;min-height:72px}
  .topic-preview .topics .tag:last-child:nth-child(odd){grid-column:1/-1}
  .topic-preview__media .ph,.topic-preview__media .figure{aspect-ratio:16/9}
  html{scroll-padding-top:88px}
  .hero__grid,.banner{gap:2rem}
  .card,.card--fork,.form-card{padding:1.25rem}
  .btn-row>.btn{width:100%}
  .contact-alt__links{min-width:0}
  .contact-alt__email,.contact-alt__phone,.contact-email a{padding-inline:1rem}
  .site-header.is-open .nav{max-height:calc(100dvh - 72px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   VERTICAL RHYTHM (1.10)
   One spacing scale for every page. Sections share --section-y,
   blocks inside a page body share --flow, and nothing carries its
   own one-off margin. Loaded after style.css, so these win.
   ============================================================ */
:root{
  --section-y:clamp(3.5rem,6vw,6rem);
  --flow:clamp(2.5rem,4vw,4rem);
  --flow-sm:clamp(1.25rem,2vw,1.75rem);
}
.section{padding-block:var(--section-y)}
.section--tight,.page-head,.page-head--with-image{padding-block:clamp(2.75rem,4.5vw,4.25rem)}
.hero{padding-block:var(--section-y)}
.section-head,.section-head.center{margin-bottom:var(--flow-sm)}
.section-head.center{margin-inline:auto}
.section .btn-row--after,.entry__content .btn-row--after{margin-top:var(--flow-sm)}
.break.break--panel{padding-block:0 var(--section-y);background:var(--cream)}
.site-footer{padding-block:var(--section-y) 0}

/* Page body: the reading column and its wide blocks. */
.entry{padding-block:var(--flow) var(--section-y)}
.entry__content>:first-child,.entry__content>h2:first-child,.entry__content>.facts-row:first-child{margin-top:0}
.entry__content>h2{margin:var(--flow) auto 1rem}
.entry__content>h2+p,.entry__content>h2+.lede{margin-top:0}
.entry__content>h3{margin-top:var(--flow-sm)}
.entry__content .bleed,.entry__content>.photo,.entry__content>.band,.entry__content>.split{margin-block:var(--flow-sm) var(--flow)}
.entry__content>.bleed+h2,.entry__content>.photo+h2,.entry__content>.band+h2{margin-top:0}
.entry__content>.band{margin-block:var(--flow)}
.entry__content>.band:last-child{margin-bottom:0}
.entry__content .facts-row{margin:0 auto var(--flow)}
.entry__content>.steps,.entry__content>.timeline,.entry__content>.rule-list,.entry__content>.index,.entry__content>.spec{margin-block:var(--flow-sm) var(--flow)}
.entry__content>p:last-child{margin-bottom:0}
.entry__content>p>.btn{margin-top:.5rem}
.entry__content>*:not(.bleed):not(.band){max-width:var(--wrap-narrow);margin-inline:auto}
#main .entry__content>.lede,#main .entry__content>p.lede{margin-inline:auto}
.band{margin-block:var(--flow);padding-block:var(--flow)}
.band>*{margin-inline:auto}
.band>h2{margin-top:0}
.band>:last-child{margin-bottom:0}
.band .bleed{margin-block:var(--flow-sm)}
.split{align-items:center;gap:clamp(1.5rem,4vw,3.5rem)}
.split__body h2{margin-top:0}
.split__body>:last-child{margin-bottom:0}
.split .steps,.split .timeline{margin-block:1rem 0}
.photo-grid{gap:clamp(1rem,2vw,1.5rem)}
.photo{gap:.6rem}
.grid{gap:clamp(1rem,2vw,1.5rem)}
.card{padding:clamp(1.25rem,2.5vw,1.75rem)}
.entry__content .card h3{margin-top:.25rem}
.checklist--grid{gap:.6rem 1.25rem}

/* Home: the topic preview strip. */
.topic-preview{display:block;text-align:center}
.topic-preview .section-head{max-width:64ch;margin-inline:auto;text-align:center}
.topic-preview .section-head h2,.topic-preview .section-head p{text-align:center}
.topic-preview .lede{margin-inline:auto}
.topic-strip{list-style:none;margin:0 0 var(--flow-sm);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.75rem,1.5vw,1.25rem)}
.topic-strip li{display:grid;gap:.6rem;min-width:0}
.topic-strip .figure{aspect-ratio:4/3;height:auto;border-radius:var(--r-md);margin:0}
.topic-strip .figure img{border-radius:var(--r-md)}
.topic-strip__label{font-weight:600;font-size:.92rem;color:var(--ink);line-height:1.3;text-align:center}
.topic-preview .topics{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 auto;max-width:900px}
.topic-preview .topics .tag{display:inline-flex;align-items:center;min-height:0;padding:.4rem .8rem;border-radius:100px;text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:500}
.topic-preview .btn-row{justify-content:center}
@media(max-width:860px){.topic-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.topic-strip li:nth-child(n+4){display:none}}
@media(max-width:480px){.topic-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.topic-strip li:nth-child(n+3){display:none}}

/* Home: the "how a child grows" photograph and the founder panel. */
.learning-media{max-width:none;margin:0 auto var(--flow)}
.learning-media .figure{aspect-ratio:16/7;height:auto}
.learning-media .figure img{object-position:center 40%}

/* Topic tiles with a picture, on the Curriculum page. */
.topics-grid li.topic-tile{padding:0;overflow:hidden;gap:0;align-content:start}
.topic-tile .photo{margin:0 0 .85rem;gap:0}
.topic-tile .photo .figure,.topic-tile .photo .figure img{border-radius:0}
.topic-tile .photo .figure{border:0;box-shadow:none;aspect-ratio:3/2}
.topic-tile .photo-ph{border-radius:0;aspect-ratio:3/2}
.topic-tile>strong,.topic-tile>span{padding-inline:1.1rem}
.topic-tile>span{padding-bottom:1.1rem;margin-top:.25rem}
.topic-tile>strong{padding-bottom:.1rem}
.topic-tile>strong:last-child{padding-bottom:1.1rem}

/* Contact: the two lower columns start at the same line. */
.contact-more{align-items:start}
.contact-photo{margin:0 0 1rem}
.contact-photo .photo{margin:0}
.map{margin-bottom:1rem}

/* Centres: the card photograph sits flush to the top of the card. */
.centre-card__photo{margin:0 0 1rem}
.centre-card__photo .photo{margin:0}
.centre-card__photo .figure{aspect-ratio:16/9}
/* Topic tiles stack picture over text, whatever the icon layout did. */
.topics-grid li.topic-tile{display:flex;flex-direction:column;align-items:stretch;grid-template-columns:none}
.topic-tile .photo{width:100%}
.topic-tile>strong,.topic-tile>span{display:block}
.facts-row strong{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.25rem)}

/* ============================================================
   MICRO-INTERACTIONS (1.10.1)
   Small, quick, and only ever in answer to the page arriving or the
   reader's hand. Every rule here is switched off under reduced motion.
   ============================================================ */

/* Reveal on scroll. Only hidden once the script has confirmed it will
   reveal them (html.js-reveal), so nothing is ever left invisible. */
.js-reveal .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);will-change:opacity,transform}
.js-reveal .reveal.is-in{opacity:1;transform:none;will-change:auto}
.js-reveal .hero__grid>div.reveal{transform:translateY(10px)}
.js-reveal .hero__grid>div:last-child.reveal{transition-delay:120ms}

/* Photographs: fade in as they finish loading, and a slow, shallow zoom
   under the hand where a picture sits inside something you can hover. */
.figure img.is-loading{opacity:0}
.figure img.is-loaded{opacity:1}
.figure img{transition:opacity .5s var(--ease-out),transform .7s var(--ease-out),filter .5s var(--ease-out)}
.figure{transition:box-shadow var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.photo:hover .figure img,.topic-strip li:hover .figure img,.centre-card:hover .figure img,.banner__media:hover .figure img,.split__media:hover .figure img,.break__panel:hover .figure img,.page-head__media:hover .figure img,.topic-tile:hover .figure img{transform:scale(1.035)}
.photo:hover .figure img{filter:sepia(.14) saturate(1) contrast(.98) brightness(1.04)}
.photo .photo__caption{transition:color var(--t-base) var(--ease-out)}
.photo:hover .photo__caption{color:var(--ink)}
.topic-strip li{transition:transform var(--t-base) var(--ease-out)}
.topic-strip li:hover{transform:translateY(-3px)}
.topic-strip li:hover .figure{box-shadow:var(--shadow-md)}
.topic-strip__label{transition:color var(--t-base) var(--ease-out)}
.topic-strip li:hover .topic-strip__label{color:var(--terracotta-dark)}
.topic-tile{transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.topics-grid li.topic-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line)}

/* The hero photograph and its question card arrive one after the other. */
.js-reveal .hero .figure__q{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out) .45s,transform .5s var(--ease-out) .45s}
.js-reveal .hero .is-in .figure__q{opacity:1;transform:none}

/* Topic tags: a lift and a tint, so a list of fifteen feels touchable. */
.topics .tag{transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.topics .tag:hover{background:var(--soft-sage);border-color:var(--forest);color:var(--forest);transform:translateY(-1px)}

/* Cards that only inform still acknowledge the hand: a hairline darkens
   and the icon tilts. No lift, so they never pretend to be links. */
.card{transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.card:hover{border-color:var(--line);box-shadow:var(--shadow-sm)}
.card__icon,.fact__icon{transition:transform var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
.card:hover .card__icon,.fact:hover .fact__icon{transform:translateY(-2px) rotate(-4deg)}
.card--fork:hover,.entry__content .card:has(.btn):hover,.not-near .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card--fork{transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}

/* Checklist ticks and rule lists: a nudge, nothing more. */
.checklist--grid li{transition:transform var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.checklist--grid li:hover{transform:translateX(3px)}
.rule-list li,.runs li,.index li{transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.rule-list li:hover,.runs li:hover{border-color:var(--terracotta)}
.questions li{transition:transform var(--t-fast) var(--ease-out),border-left-width var(--t-fast) var(--ease-out)}
.questions li:hover{transform:translateX(3px)}

/* Level cards on the curriculum page: the question sharpens. */
.level-grid .card q{transition:color var(--t-base) var(--ease-out)}
.level-grid .card:hover q{color:var(--terracotta-dark)}

/* FAQ: the answer rises in when a question is opened. */
.faq details.is-opening>*:not(summary){animation:bt-rise .32s var(--ease-out) both}
@keyframes bt-rise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq summary{transition:color var(--t-fast) var(--ease-out),padding-left var(--t-fast) var(--ease-out)}
.faq summary:hover{color:var(--terracotta-dark)}

/* Links: arrows lead, underlines settle in. */
.arrow-link{transition:color var(--t-fast) var(--ease-out)}
.entry__content a:not(.btn),.footer-cols a,.break__caption a,.site-footer a{transition:color var(--t-fast) var(--ease-out),text-decoration-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.entry__content a:not(.btn):hover{text-decoration-thickness:2px}
.break--panel .break__caption a:hover{border-color:#fff;color:#fff}

/* Buttons: the WhatsApp icon leans forward with the hand. */
.btn .icon{transition:transform var(--t-base) var(--ease-out)}
.btn:hover .icon{transform:translateX(2px)}

/* Centre cards: the photograph responds; the card itself stays put. */
.centre-card{transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.centre-card:hover{border-color:var(--line);box-shadow:var(--shadow-md);transform:none}
.centre-card__photo .figure{overflow:hidden}

/* Contact routes and footer socials. */
.routes__item .icon,.socials a .icon{transition:transform var(--t-fast) var(--ease-out)}
.routes__item:hover .icon{transform:scale(1.1)}
.socials a{transition:background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.socials a:hover{transform:translateY(-2px)}

/* Header logo: a breath, not a bounce. */
.brand img{transition:transform var(--t-base) var(--ease-out)}
.brand:hover img{transform:scale(1.03)}

/* Touch screens get the finished state; there is no hover to wait for. */
@media(hover:none){
  .photo .figure img,.topic-strip li .figure img,.centre-card .figure img,.topic-tile .figure img{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .js-reveal .reveal,.js-reveal .hero .figure__q{opacity:1;transform:none;transition:none}
  .figure img,.figure,.topic-strip li,.topic-tile,.card__icon,.fact__icon,.checklist--grid li,.questions li{transition:none}
  .faq details.is-opening>*:not(summary){animation:none}
}

/* ============================================================
   MOBILE CAROUSELS (1.10.1)
   Below 700px, long galleries and card grids become one snapping
   track with dots. The script adds .is-carousel; without it the
   grids simply stack as before.
   ============================================================ */
@media(max-width:700px){
  .is-carousel{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:.9rem!important;
    margin-inline:calc(var(--gutter) * -1);padding:.25rem var(--gutter) .5rem;scroll-padding-inline:var(--gutter);
    scrollbar-width:none;outline:none}
  .is-carousel::-webkit-scrollbar{display:none}
  .is-carousel>*{flex:0 0 82%;max-width:82%;scroll-snap-align:start;scroll-snap-stop:always;min-width:0;display:none}
  .is-carousel>*{display:block}
  .is-carousel>.card,.is-carousel>li.topic-tile,.is-carousel>article{display:flex}
  .is-carousel>li{display:grid}
  .is-carousel>li.topic-tile{display:flex}
  .is-carousel.topic-strip>li{flex-basis:70%;max-width:70%;display:grid}
  .is-carousel.photo-grid>*{flex-basis:84%;max-width:84%}
  .is-carousel .card{height:auto}
  .is-carousel:focus-visible{outline:3px solid var(--terracotta);outline-offset:4px;border-radius:var(--r-md)}
  .topic-strip.is-carousel li:nth-child(n){display:grid}
  .carousel-dots{display:flex;justify-content:center;gap:.4rem;margin:.25rem 0 0}
  .carousel-dots[hidden]{display:none}
  .carousel-dots__dot{width:6px;height:6px;border-radius:100px;background:var(--line);transition:width var(--t-slow) var(--ease-out),background var(--t-base) var(--ease-out)}
  .carousel-dots__dot.is-on{width:18px;background:var(--terracotta)}
  .band--ink .carousel-dots__dot{background:rgba(255,255,255,.25)}
  .band--ink .carousel-dots__dot.is-on{background:var(--gold)}
  .section--ink .carousel-dots__dot{background:rgba(255,255,255,.25)}
  .section--ink .carousel-dots__dot.is-on{background:var(--gold)}
  /* A carousel replaces the "hide the extra tiles" rule for the topic strip. */
  .topic-strip.is-carousel{grid-template-columns:none}
  .entry__content .bleed .is-carousel{margin-inline:calc(var(--gutter) * -1)}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .is-carousel{scroll-behavior:auto}
  .carousel-dots__dot{transition:none}
}

/* Footer on a phone: the brand block full width, the link lists in two
   columns beneath it instead of one long stack. */
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .footer-grid>:first-child{grid-column:1/-1}
  .footer-grid h4{margin-bottom:.6rem}
}
@media(max-width:520px){
  /* Parents and Teachers stack on the left; About fills the right. */
  .footer-grid>:nth-child(2),.footer-grid>:nth-child(3){grid-column:1}
  .footer-grid>:nth-child(4){grid-column:2;grid-row:2/4}
}

/* ============================================================
   HERO, SPLIT (1.11)
   The photograph is the hero: it runs from the middle of the screen
   to the right edge for the full height of the section. The copy
   sits in the left half on the same left edge as every other
   section. One headline, one line under it, one button, three
   facts. Nothing else.
   ============================================================ */
.hero.hero--split{padding:0;overflow:visible}
.hero.hero--split .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;width:100%}
.hero--split .hero__copy{display:flex;align-items:center;
  padding-block:clamp(3rem,6vw,5.5rem);
  padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2));
  padding-right:clamp(1.5rem,4vw,3.5rem)}
.hero--split .hero__copy-inner{max-width:560px}
.hero--split .eyebrow{margin-bottom:1rem}
.hero--split h1{font-size:clamp(2.5rem,1.6rem + 3.4vw,4.25rem);line-height:1.06;letter-spacing:-.025em;max-width:14ch;margin:0 0 1.25rem}
.hero--split .hero__line{display:inline}
.hero--split .lede{font-size:var(--step-lead);font-weight:400;color:var(--ink-soft);max-width:36ch;margin:0 0 1.75rem}
.hero--split .btn-row{margin:0 0 2rem}
.hero--split .btn--primary{padding-inline:1.75rem;min-height:52px;font-size:1.02rem}

/* Trust badges: an icon in a soft-sage disc and a short fact. A row, not
   cards, so they read as a caption to the button rather than a feature. */
.hero__badges{list-style:none;margin:0;padding:1.5rem 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.75rem 1.75rem}
.hero__badges li{display:inline-flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500;color:var(--ink);white-space:nowrap}
.hero__badge-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft-sage);color:var(--forest);flex:none}
.hero__badge-icon .icon{width:1.05rem;height:1.05rem}

/* The photograph: full-bleed, full height, square corners, no frame. */
.hero--split .hero__photo{position:relative;min-height:clamp(420px,46vw,680px)}
.hero.hero--split .hero__photo .figure{position:absolute;inset:0;height:100%;width:100%;aspect-ratio:auto;
  border-radius:0;border:0;box-shadow:none;margin:0}
.hero.hero--split .hero__photo .figure img{height:100%;width:100%;object-fit:cover;object-position:55% 45%;border-radius:0}
.hero.hero--split .hero__photo .figure::after{background:linear-gradient(180deg,rgba(23,53,31,0) 55%,rgba(23,53,31,.28) 100%)}
.hero.hero--split .hero__photo .figure__q{left:0;bottom:0;margin:clamp(1.25rem,3vw,2.25rem);max-width:min(80%,18ch)}
.hero--split .hero__tree{display:none}

/* Tablet and phone: the photograph on top, edge to edge, then the copy. */
@media(max-width:900px){
  .hero.hero--split .hero__grid{grid-template-columns:1fr}
  .hero--split .hero__photo{order:-1;min-height:0;aspect-ratio:4/3;max-height:60vh}
  .hero--split .hero__copy{padding:clamp(2rem,6vw,3rem) var(--gutter) clamp(2.5rem,6vw,3.5rem)}
  .hero--split .hero__copy-inner{max-width:640px}
  .hero--split h1{max-width:none}
  .hero__badges{gap:.6rem 1.25rem}
  .hero__badges li{font-size:.9rem}
}
@media(max-width:480px){
  .hero--split .hero__photo{aspect-ratio:5/4}
  .hero--split .btn-row>.btn{width:100%}
  .hero__badges{flex-direction:column;gap:.6rem}
  .hero__badges li{white-space:normal}
}

/* Hero copy must clear the container edge; style.css zeroes padding on
   the first grid child, so this needs the extra weight. */
.hero.hero--split .hero__grid>.hero__copy{padding-block:clamp(3rem,6vw,5.5rem);padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2));padding-right:clamp(1.5rem,4vw,3.5rem)}
@media(max-width:900px){.hero.hero--split .hero__grid>.hero__copy{padding:clamp(2rem,6vw,3rem) var(--gutter) clamp(2.5rem,6vw,3.5rem)}}

/* ============================================================
   INNER PAGE HEADERS, SPLIT (1.11)
   The same shape as the home hero: title, one line, three facts on
   the left; the page's photograph running to the right edge.
   ============================================================ */
.page-head.page-head--split{padding:0;background:var(--cream-deep);overflow:visible}
.page-head--split .page-head__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;width:100%;text-align:left}
.page-head--split .page-head__copy{display:flex;align-items:center;
  padding-block:clamp(2.75rem,5vw,4.5rem);
  padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2));
  padding-right:clamp(1.5rem,4vw,3.5rem)}
.page-head--split .page-head__copy-inner{max-width:560px}
.page-head--split .page-head__copy-inner::before{content:"";display:block;width:48px;height:4px;border-radius:4px;background:var(--terracotta);margin-bottom:1.25rem}
.page-head--split h1{font-size:clamp(2.25rem,1.5rem + 2.8vw,3.75rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 1rem}
.page-head--split .lede{margin:0;max-width:40ch;font-weight:400;color:var(--ink-soft)}
.page-head--split .page-head__photo{position:relative;min-height:clamp(340px,36vw,520px)}
.page-head--split .page-head__photo .figure{position:absolute;inset:0;height:100%;width:100%;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none;margin:0}
.page-head--split .page-head__photo .figure img{height:100%;width:100%;object-fit:cover;object-position:50% 45%;border-radius:0}
.page-head--split .page-head__photo .figure::after{background:linear-gradient(180deg,rgba(23,53,31,0) 60%,rgba(23,53,31,.22) 100%)}
.page-head--split .page-head__photo .media-placeholder,.page-head--split .page-head__photo .photo-ph{position:absolute;inset:0;height:100%;border-radius:0;aspect-ratio:auto}
.page-head--curriculum.page-head--split .figure img{object-position:72% 50%}
.page-head--collective.page-head--split .figure img{object-position:45% 40%}
.page-head--ankieta.page-head--split .figure img{object-position:50% 55%}

/* Badges: shared by the hero and every page header. */
.badges{list-style:none;margin:0;padding:1.5rem 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.75rem 1.75rem}
.page-head--split .badges{margin-top:1.75rem}
.badges li{display:inline-flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500;color:var(--ink);white-space:nowrap}
.badges__icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft-sage);color:var(--forest);flex:none}
.badges__icon .icon{width:1.05rem;height:1.05rem}
.page-head--split+.entry{padding-top:var(--flow)}
.page-head--split+.entry .entry__content>.facts-row:first-child{margin-top:0}

@media(max-width:900px){
  .page-head--split .page-head__grid{grid-template-columns:1fr}
  .page-head--split .page-head__photo{order:-1;min-height:0;aspect-ratio:16/10;max-height:55vh}
  .page-head--split .page-head__copy{padding:clamp(2rem,6vw,3rem) var(--gutter) clamp(2.25rem,6vw,3rem)}
  .page-head--split .page-head__copy-inner{max-width:640px}
  .badges{gap:.6rem 1.25rem}
  .badges li{font-size:.9rem}
}
@media(max-width:480px){
  .page-head--split .page-head__photo{aspect-ratio:4/3}
  .badges{flex-direction:column;gap:.6rem}
  .badges li{white-space:normal}
}

/* ============================================================
   ONE LEFT EDGE (1.11)
   Every page starts its text on the same line: the container's left
   edge. Reading-width blocks sit on that edge rather than floating
   in the middle; galleries, grids and bands run the full container.
   Only the closing call to action and the testimonial heading are
   centred, because they are stages rather than reading.
   ============================================================ */
.entry__content>*:not(.bleed):not(.band){margin-inline:0}
#main .entry__content>.lede,#main .entry__content>p.lede{margin-inline:0}
.entry__content>h2{margin-inline:0}
.entry__content .facts-row{margin-inline:0}
.measure{margin-inline:0}
.section-head:not(.center){margin-inline:0}
.entry .wrap-narrow.entry__content{width:min(var(--wrap),100% - var(--gutter)*2)}
.entry__content>.photo:not(.photo--wide){max-width:var(--wrap-narrow)}
.entry__content>.photo.photo--wide{max-width:none}
.entry__content>.split,.entry__content>.steps,.entry__content>.timeline{max-width:var(--wrap-narrow)}
.entry__content .bleed>.split{max-width:none}
/* Curriculum: the same container as everywhere else, not its own 980px. */
.is-curriculum .entry__content{width:min(var(--wrap),100% - var(--gutter)*2)}
.is-curriculum .entry__content>*{max-width:var(--wrap-narrow);margin-inline:0}
.is-curriculum .entry__content>.bleed,.is-curriculum .entry__content>.band,.is-curriculum .entry__content>.photo--wide,.is-curriculum .entry__content>.ladder,.is-curriculum .entry__content>.runs,.is-curriculum .entry__content>.ladder-note{max-width:none}
.is-curriculum .entry__content>.ladder-note{max-width:var(--wrap-narrow)}
.is-curriculum .band>*{max-width:none}
.is-curriculum .band>h2,.is-curriculum .band>p{max-width:var(--wrap-narrow)}
/* Ask / CTA blocks stay centred; the FAQ list beneath them sits on the edge. */
#faq .measure{margin-inline:0}
#faq .section-head{margin-inline:0}
/* Page headers, hero and the entry column share the same left edge. */
.page-head--split .page-head__copy-inner,.hero--split .hero__copy-inner{margin-inline:0}
/* Contact: the lower columns, left column first. */
.contact-more>div>h2{margin-top:0}
/* If a picture's load event is missed, it still appears after a beat. */
.figure img.is-loading{animation:bt-img-show .4s var(--ease-out) 1.2s forwards}
@keyframes bt-img-show{to{opacity:1}}
/* Page header button: sits between the line and the badges, left-aligned. */
.page-head--split .page-head__cta{justify-content:flex-start;margin:1.5rem 0 0}
.page-head--split .page-head__cta .btn--primary{padding-inline:1.6rem;min-height:50px}
.page-head--split .page-head__cta .btn--ghost{border-color:var(--forest);color:var(--forest)}
.page-head--split .page-head__cta .btn--ghost:hover{background:var(--forest);color:#fff}
.page-head--split .page-head__cta+.badges{margin-top:1.5rem}
@media(max-width:480px){.page-head--split .page-head__cta .btn{width:100%}}

/* ============================================================
   HERO AND PAGE HEADERS, REFINED (1.11.1)
   The photograph gets a soft inner corner where it meets the copy, so
   the split reads as designed rather than cut. A faint banyan sits
   behind the copy. Inner pages carry a question card on the picture,
   like the home hero, and a line above the title saying who the page
   is for. On a phone the copy overlaps the photo as a cream card.
   ============================================================ */
.hero.hero--split,.page-head.page-head--split{position:relative;isolation:isolate}
.hero.hero--split .hero__copy,.page-head--split .page-head__copy{position:relative;overflow:hidden}
.hero__tree.hero__tree--split,.page-head__tree{display:block;position:absolute;right:-6%;bottom:-14%;width:min(52%,420px);height:auto;color:var(--forest);opacity:.055;z-index:0;pointer-events:none}
.hero--split .hero__copy-inner,.page-head--split .page-head__copy-inner{position:relative;z-index:1}

/* The copy column breathes more; the eyebrow and rule share one accent. */
.hero.hero--split .hero__grid>.hero__copy{padding-block:clamp(3.5rem,7vw,6.5rem)}
.hero--split .hero__copy-inner{max-width:580px}
.hero--split .eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.25rem}
.hero--split .eyebrow::before{content:"";width:1.75rem;height:3px;border-radius:3px;background:var(--terracotta)}
.page-head--split .page-head__copy{padding-block:clamp(3rem,6vw,5rem)}
.page-head--split .page-head__copy-inner::before{display:none}
.page-head--split .eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;color:var(--terracotta-dark)}
.page-head--split .eyebrow::before{content:"";width:1.75rem;height:3px;border-radius:3px;background:var(--terracotta)}
.page-head--split h1{font-size:clamp(2.5rem,1.6rem + 3vw,4rem)}

/* The photograph: a rounded inner corner, a soft forest wash at the foot,
   and a hairline of sand between it and the copy. */
.hero--split .hero__photo,.page-head--split .page-head__photo{background:var(--sand)}
.hero.hero--split .hero__photo .figure,.page-head--split .page-head__photo .figure{border-radius:var(--r-xl) 0 0 var(--r-xl);overflow:hidden}
.hero.hero--split .hero__photo .figure img,.page-head--split .page-head__photo .figure img{border-radius:var(--r-xl) 0 0 var(--r-xl)}
.hero--split .hero__photo{min-height:clamp(460px,50vw,720px)}
.page-head--split .page-head__photo{min-height:clamp(360px,38vw,560px)}
.page-head--split .page-head__photo .figure__q{left:0;bottom:0;margin:clamp(1.25rem,3vw,2rem);max-width:min(80%,20ch);font-size:var(--step-1)}
.page-head--split .page-head__photo .media-placeholder,.page-head--split .page-head__photo .photo-ph{border-radius:var(--r-xl) 0 0 var(--r-xl)}

/* Badges: a touch more presence. */
.hero__badges,.badges{gap:.75rem 2rem}
.hero__badges li,.badges li{font-size:.98rem}
.hero__badge-icon,.badges__icon{width:38px;height:38px;background:var(--soft-sage);box-shadow:inset 0 0 0 1px rgba(23,53,31,.08)}

@media(max-width:900px){
  .hero.hero--split .hero__photo .figure,.page-head--split .page-head__photo .figure,
  .hero.hero--split .hero__photo .figure img,.page-head--split .page-head__photo .figure img,
  .page-head--split .page-head__photo .media-placeholder,.page-head--split .page-head__photo .photo-ph{border-radius:0}
  .hero--split .hero__photo,.page-head--split .page-head__photo{min-height:0}
  /* The copy overlaps the photo as a card with one rounded shoulder. */
  .hero.hero--split .hero__grid>.hero__copy,.page-head--split .page-head__copy{margin-top:-2.25rem;border-radius:var(--r-xl) 0 0 0;background:var(--cream);padding-top:clamp(2rem,6vw,2.75rem)}
  .page-head--split .page-head__copy{background:var(--cream-deep)}
  .hero.hero--split .hero__grid>.hero__copy{padding-top:clamp(2.25rem,6vw,3rem)}
  .hero__tree.hero__tree--split,.page-head__tree{width:60%;right:-12%;bottom:-18%}
  .hero.hero--split .hero__photo .figure__q,.page-head--split .page-head__photo .figure__q{bottom:2.25rem}
}
@media(prefers-reduced-motion:no-preference){
  .js-reveal .hero__tree--split,.js-reveal .page-head__tree{opacity:0;transform:translateY(8px);transition:opacity 1s var(--ease-out) .3s,transform 1s var(--ease-out) .3s}
  .js-reveal .is-in .hero__tree--split,.js-reveal .is-in .page-head__tree{opacity:.055;transform:none}
}
/* Badges stay on one line at desktop widths. */
.hero__badges,.badges{gap:.6rem 1.4rem}
.hero__badges li,.badges li{font-size:.92rem;gap:.5rem}
.hero__badge-icon,.badges__icon{width:34px;height:34px}
.hero--split .hero__copy-inner,.page-head--split .page-head__copy-inner{max-width:600px}
/* The header is the same on every page: the current page gets the leaf
   underline only, never a filled pill. */
.nav .current-menu-item>a,.nav .current_page_item>a{background:transparent}
.nav a:hover{background:var(--cream-deep)}
/* The faint banyan behind the copy read as a smudge on cream; removed. */
.hero__tree.hero__tree--split,.page-head__tree{display:none}
/* FAQ: the question list runs the full container, so the margins match. */
#faq .measure{max-width:none}
#faq .section-head{max-width:64ch}
#faq .faq{width:100%}
/* Home, on a phone: the topic carousel and the button say enough; the
   list of fifteen names is hidden. It stays on wider screens. */
@media(max-width:700px){
  .topic-preview .topics{display:none}
  .topic-preview .carousel-dots+.topics{display:none}
  .topic-preview .btn-row{margin-top:1.25rem}
}
/* The header badges already state the three facts, so a facts row at the
   top of a page body is hidden. Covers a live site whose page bodies have
   not yet been updated. */
.page-head--split+.entry .entry__content>.facts-row:first-child{display:none}

/* Bands ("What changes after a term", "What you can earn", "What we do
   not do"): a rounded panel inside the container rather than an
   edge-to-edge slab, on every page and every width. */
.entry__content>.band,.band{margin-inline:0;width:100%;max-width:none;border-radius:var(--r-xl);
  padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem)}
.band>*{margin-inline:0}
.band>h2{max-width:var(--wrap-narrow)}
.band>p{max-width:var(--wrap-narrow)}
.band>.bleed{margin-inline:0}
.band .checklist--grid{gap:.75rem 1rem;margin-top:1.5rem}
.band .checklist--grid li{padding:.9rem 1rem .9rem 2.6rem;border-radius:var(--r-md);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);line-height:1.5}
.band .checklist--grid li::before{left:1rem;top:1rem}
.band .checklist--grid li::after{left:calc(1rem + 6px);top:calc(1rem + .27rem)}
.band--sand .checklist--grid li{background:rgba(255,255,255,.55);border-color:rgba(23,53,31,.08)}
.band .stat-card{border-radius:var(--r-lg)}
@media(max-width:700px){
  .entry__content>.band,.band{border-radius:var(--r-lg);padding:1.75rem 1.15rem 1.9rem}
  .band .checklist--grid{grid-template-columns:1fr;gap:.6rem}
  .band .checklist--grid li{padding:.85rem .9rem .85rem 2.4rem}
  .band .checklist--grid li::before{left:.85rem;top:.95rem}
  .band .checklist--grid li::after{left:calc(.85rem + 6px);top:calc(.95rem + .27rem)}
}
/* Contact: "What is this about?" is a select rather than a row of chips. */
.field--select{position:relative}
.field--select select{width:100%;appearance:none;-webkit-appearance:none;padding:.85rem 2.75rem .85rem 1rem;font:inherit;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--line);border-radius:10px;cursor:pointer;line-height:1.4}
.field--select::after{content:"";position:absolute;right:1rem;bottom:1.15rem;width:.55rem;height:.55rem;border:solid var(--forest);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.field--select select:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
/* The photo column has no background of its own, so the picture's rounded
   corners open onto the panel behind them rather than a sand notch. */
.hero--split .hero__photo,.page-head--split .page-head__photo{background:transparent}
.hero.hero--split .hero__photo .figure,.page-head--split .page-head__photo .figure{background:transparent}
/* A Group's inner container used as a phone carousel track. */
@media(max-width:700px){.wp-block-group__inner-container.is-carousel{display:flex!important}}
/* Centre pages: the card title links to the centre's own page. */
.centre-card__link{color:inherit;text-decoration:none}
.centre-card__link:hover{color:var(--terracotta-dark);text-decoration:underline;text-underline-offset:3px}
.page-head--centre .page-head__cta .btn{white-space:normal;text-align:left}

/* ============================================================
   BLOG (1.13.1)
   The article shares the site's left edge. Header, picture, reading
   column and the previous/next row all start on the container line.
   ============================================================ */
.page-head--post{padding-block:clamp(2.75rem,5vw,4.5rem) clamp(2.5rem,4vw,3.5rem)}
.post-head{max-width:var(--wrap-narrow);margin-inline:0}
.post-head .tag{display:inline-block;margin-bottom:1rem}
.post-head h1{font-size:clamp(2.25rem,1.5rem + 2.8vw,3.5rem);line-height:1.1;letter-spacing:-.025em;margin:0 0 .75rem;max-width:22ch}
.post-head .lede{margin:0 0 1rem;max-width:44ch;font-weight:400;color:var(--ink-soft)}
.post-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin:0;font-size:.9rem;color:var(--muted)}
.post-meta>*{position:relative}
.post-meta>*+*::before{content:"";position:absolute;left:-.9rem;top:50%;width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.6;transform:translateY(-50%)}
.post-hero{margin:clamp(1.5rem,3vw,2.5rem) 0 0;aspect-ratio:21/9;height:auto}
.post-hero img{width:100%;height:100%;object-fit:cover}
.entry--post{padding-block:var(--flow) var(--flow)}
.entry--post .entry__content>.lede{font-size:var(--step-lead);line-height:1.5;color:var(--ink);font-weight:500;margin-bottom:1.25rem}
.entry--post .entry__content>p{font-size:1.07rem;line-height:1.78}
.entry--post .entry__content>h2{margin-top:var(--flow-sm);margin-bottom:.75rem;font-size:var(--step-2)}
.entry--post .entry__content>h3{margin-top:1.5rem;margin-bottom:.5rem}
.entry--post .entry__content>.wp-block-image{margin-block:var(--flow-sm)}
.entry--post .entry__content>.wp-block-image+h2{margin-top:var(--flow-sm)}
.entry--post .entry__content>.wp-block-image:not(.photo) img{border-radius:var(--r-lg)}
.entry--post .entry__content>.wp-block-image figcaption{margin-top:.6rem;font-size:.85rem;color:var(--muted);text-align:left}
.entry--post .entry__content>.wp-block-quote.quote{margin-block:var(--flow-sm)}
.entry--post .entry__content>ul:not([class]),.entry--post .entry__content>ol:not([class]){padding-left:1.25rem;margin:0 0 1.25rem}
.entry--post .entry__content>ul:not([class]) li,.entry--post .entry__content>ol:not([class]) li{margin-bottom:.4rem}
.entry--post .entry__content>.wp-block-buttons{margin-top:var(--flow-sm)}
.entry--post .entry__content>.steps{margin-block:1rem var(--flow-sm)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:0 0 var(--section-y)}
.post-nav__item{display:flex;flex-direction:column;gap:.35rem;padding:1.15rem 1.35rem;border:1px solid var(--line-soft);border-radius:var(--r-md);background:#fff;text-decoration:none;color:var(--ink);transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.post-nav__item:hover{border-color:var(--line);box-shadow:var(--shadow-md);transform:translateY(-2px);color:var(--ink)}
.post-nav__item--next{text-align:right;align-items:flex-end}
.post-nav__label{font-size:.8rem;color:var(--muted)}
.post-nav__title{font-family:var(--font-display);font-weight:600;line-height:1.3}
.post-card__fallback{border-radius:0;border:0;box-shadow:none;height:100%}
.post-card__fallback img{border-radius:0}
.post-card .tag{align-self:flex-start}
@media(max-width:700px){
  .post-hero{aspect-ratio:16/10;margin-top:1.25rem}
  .post-nav{grid-template-columns:1fr}
  .post-nav__item--next{text-align:left;align-items:flex-start}
  .post-head h1{max-width:none}
}