/* single-class.css
   Reconciled onto the site's design system on 2 September 2026, when 29 pages
   designed outside were merged in. Three kinds of rule were removed; the full
   list is in the commit, not here.

     1. Rules that re-styled SHARED shell components. This stylesheet loads
        AFTER palesas.css, so each one silently overrode the site-wide header,
        footer or nav ON THIS PAGE ONLY, while shell.mjs check called the page
        clean because the MARKUP was identical. A markup checker cannot see a
        stylesheet. That went for CLASS selectors and, in a second pass, for
        bare ELEMENT selectors too: one page stylesheet said nav{display:none}
        below 700px and was hiding the site's primary navigation.
     2. Rules for markup that no longer exists: the chrome this page arrived
        with, and its own hero.
     3. Document-level rules that fought palesas.css, which owns them.

   Colours are tokens now. palesas.css owns every shared component.

   Two things have already broken this banner, both worth knowing. It once
   PASTED THE REMOVED SELECTOR LIST INTO ITSELF, and that list held a star next
   to a slash, which closed the comment early and swallowed the next real rule.
   Then a sweep that counted braces without skipping comments read this prose
   as a selector and deleted words out of it. A tool that parses CSS must strip
   comments FIRST, and no generated text belongs inside one. */
/* .wrap was a SECOND container: 1100px with 24px gutters, against .pk-wrap
   at 1200 with 20. One page in thirty-two had its own content column. */
.wrap{width:min(var(--pk-wrap),calc(100% - (var(--pk-pad) * 2)));margin:auto}.top .wrap{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.tutor>div>p:first-child{color:var(--pk-primary);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.intro{display:grid;grid-template-columns:1.2fr .85fr;gap:26px;margin-top:44px}.intro>img{width:100%;height:100%;min-height:370px;object-fit:cover;border-radius:var(--pk-r)}.intro article, .overview article, .benefits article, .syllabus, .tutor{border:1px solid var(--pk-border);border-radius:var(--pk-r);background:var(--pk-surface)}.intro article{padding:22px}.intro h1{margin:0;color:var(--pk-primary);font:600 29px/1.08 Outfit,sans-serif}.intro>article>p{line-height:1.5}.intro dl{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:20px 0;font-size:12px}.intro dt{color:var(--pk-muted)}.intro dd{margin:0;text-align:right;font-weight:600}.btn, .enrol button{display:inline-block;border:0;border-radius:var(--pk-r);padding:13px 22px;background:var(--pk-primary);color:var(--pk-primary-fg);font-weight:600;text-decoration:none}.overview{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.overview article{padding:27px}.overview h2, .syllabus h2, .benefits h2, .enrol h2, .related h2{margin:0 0 17px;color:var(--pk-primary);font:700 15px Outfit,sans-serif;text-transform:uppercase}.overview p{font-size:13px;line-height:1.6}.overview ul, .benefits ul{padding-left:20px;font-size:13px;line-height:1.9}.overview li::marker, .benefits li::marker{color:var(--pk-primary)}.syllabus{margin-top:25px;padding:var(--pk-band) 0}.syllabus ol{margin:0;padding:0;list-style:none}.syllabus li{display:grid;grid-template-columns:30px 1fr auto;gap:13px;padding:14px 0;border-bottom:1px solid var(--pk-border);font-size:12px}.syllabus li:last-child{border:0}.syllabus b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pk-primary);color:var(--pk-primary-fg);font-size:10px}.syllabus strong{display:block;margin-bottom:2px;color:var(--pk-primary)}.syllabus time{color:var(--pk-muted);font-size:10px}.benefits{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:25px}.benefits article{padding:28px}.tutor{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center;margin-top:25px;padding:var(--pk-band) 0}.tutor img{width:230px;height:230px;object-fit:cover;border-radius:50%}.tutor h2{margin:0;color:var(--pk-primary);font:700 clamp(26px,3.4vw,33.6px)/1.15 var(--pk-display);letter-spacing:-.02em}.tutor p{font-size:13px;line-height:1.6}.cta{padding:var(--pk-band) 0;text-align:center;background:var(--pk-primary);color:var(--pk-primary-fg)}.cta .pk-wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}.cta strong{display:block;font:600 24px Outfit,sans-serif}.cta span{font-size:12px}.enrol{padding:var(--pk-band) 0;text-align:center}.enrol h2{font-size:17px}.enrol form{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:700px;margin:20px auto}.enrol input, .enrol select{border:1px solid var(--pk-border);padding:12px;font:12px "DM Sans",sans-serif}.enrol select, .enrol button{grid-column:1/-1}.enrol #message{font-size:12px;color:var(--pk-muted)}.related{padding-bottom:var(--pk-band)}.related>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.related a{border:1px solid var(--pk-border);color:var(--pk-fg);text-decoration:none}.related img{display:block;width:100%;aspect-ratio:4/2.2;object-fit:cover}.related strong, .related small{display:block;padding:10px 12px 0}.related strong{font:600 16px Outfit,sans-serif;color:var(--pk-primary)}.related small{padding-bottom:12px;color:var(--pk-muted)}@media(max-width:760px){.intro, .overview, .benefits{grid-template-columns:1fr}.tutor{grid-template-columns:1fr;text-align:center}.tutor img{margin:auto}.cta .wrap{display:block;text-align:center}}@media(max-width:480px){.wrap{width:min(100% - 32px,1100px)}.intro{margin-top:24px}.intro article{padding:22px}.syllabus li{grid-template-columns:30px 1fr}.syllabus time{grid-column:2}.enrol form, .related>div{grid-template-columns:1fr}}
/* Real SVG icons (D17), added for the redesign: the .intro dl's dt icons and
   the repeated section-marker sparkle both used to be Georgia glyphs. */
.intro dt svg{width:14px;height:14px;flex:none;vertical-align:-2px;color:var(--pk-primary)}
.pk-icon-sparkle{width:14px;height:14px;flex:none;vertical-align:-2px;color:var(--pk-gold)}
.cta .pk-btn svg{width:15px;height:15px}
/* The CTA band computed 0 padding top and bottom, so its heading, sub-line
   and button sat against the left edge with the button overhanging the band. */
.cta > .pk-wrap{display:grid;justify-items:center;gap:14px}
/* The enrol controls were a fixed 415px at every viewport, 95px past a 320px
   screen, and took the page sideways with them. A form control is fluid. */
.enrol input,.enrol select,.enrol textarea,.enrol .pk-btn{width:100%;max-width:100%;box-sizing:border-box}
.enrol form,.enrol{min-width:0}

/* Her booking terms, beside the enrolment form. Added 7 September 2026;
   the class page had nowhere to put them before, so the payment and
   cancellation rules off her own posters were being dropped. Left-aligned
   inside a centred section on purpose: a four-item list of conditions is
   read, not scanned. */
.enrol__terms{max-width:700px;margin:26px auto 0;padding:20px 22px;border:1px solid var(--pk-border);border-radius:var(--pk-r);background:var(--pk-cream);text-align:left}
.enrol__terms h3{margin:0 0 10px;color:var(--pk-primary);font:700 13px Outfit,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.enrol__terms ul{margin:0;padding-left:18px;font-size:12px;line-height:1.8;color:var(--pk-muted)}
.enrol__terms li::marker{color:var(--pk-primary)}

/* --------------------------------------------------------------------------
   Sticky "Book now", added for the redesign. Desktop: the details panel
   itself becomes a sticky column, no JS pinning needed. Mobile: a separate
   fixed bottom bar, since the details panel is not a sidebar at that width
   (.intro collapses to one column below 760px, see the base rule above).
   -------------------------------------------------------------------------- */
@media (min-width:761px){
  .intro article.sticky-book{position:sticky;top:calc(var(--pk-headerrow) + 20px);align-self:start}
}
.sticky-book .pk-chip,.sticky-book .pk-muted-note{display:block;margin-top:16px}
.sticky-book .past-class-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.sticky-book .pk-muted-note{margin:16px 0 0;font-size:12px;color:var(--pk-muted)}

.sticky-bookbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--pk-surface);border-top:1px solid var(--pk-border);
  box-shadow:0 -8px 24px -12px rgba(31,10,20,.25);
}
.sticky-bookbar .pk-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--pk-pad);
}
.sticky-bookbar strong{display:block;font:600 14px Outfit,sans-serif;color:var(--pk-fg)}
.sticky-bookbar span{font-size:12px;color:var(--pk-muted)}
.sticky-bookbar .pk-btn{flex:none}
@media (max-width:760px){
  .sticky-bookbar{display:block}
  /* Reserve the space the fixed bar occupies so it never covers the last
     section's content or the footer links underneath it. Scoped to
     body.has-sticky-bookbar (set in single-pbt_class.php only when the bar
     itself actually renders) - past and dateless class pages carry no bar
     and must not carry its padding either. */
  body.has-sticky-bookbar{padding-bottom:76px}
}