/* Bundled from css/app.css. Layers are flattened: a layered rule loses
   to the site's own unlayered stylesheet, and the import order already
   carries the precedence the layers declared. */

/* --- import: editable areas covering several elements --- */
.pb-group { display: flex; flex-direction: column; gap: inherit; align-items: inherit; min-width: 0; }

/* --- import: a call to action's field draws no box --- */
:where(div.rich-text:has(> a:only-child:is(.button, .text-link, .nav-link, .underlined-link))) { display: contents; }
:where(.site-header, .site-menu, .site-footer, [data-block]) .nav-link { display: revert; padding: revert; }

/* --- tokens.css --- */
/* Design tokens. Change values here, not in blocks. */
:root {
  /* Colour: warm ivory ground, one claret accent */
  --color-canvas: #f8f4ed;
  --color-surface: #f0ebe1;
  --color-sunken: #e7e0d3;
  --color-field: #fff;
  --color-contrast: #211d18;
  --color-contrast-soft: #2d2721;
  --color-ink: #231f1a;
  --color-ink-muted: #5d564c;
  --color-ink-subtle: #6f6759;
  --color-ink-inverse: #f8f4ed;
  --color-ink-inverse-muted: #c9c1b3;
  --color-line: #ddd5c7;
  --color-line-strong: #8d8574;
  --color-line-inverse: #4a443b;
  --color-accent: #6d2a22;
  --color-accent-hover: #511d17;

  /* Typefaces */
  --font-display: "Gilda Display", Georgia, serif;
  --font-body: "Newsreader", Georgia, serif;

  /* Fluid body text. Headings set their own size in their block. */
  --text-xs: clamp(0.8125rem, 0.7905rem + 0.094vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.831rem + 0.188vw, 1rem);
  --text-base: clamp(1rem, 0.956rem + 0.188vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.059rem + 0.282vw, 1.3125rem);
  --leading-xs: 1.5;
  --leading-sm: 1.55;
  --leading-base: 1.6;
  --leading-lg: 1.5;

  /* Flow: space between elements inside a block */
  --flow-3xs: 0.25rem;
  --flow-2xs: 0.5rem;
  --flow-sm: clamp(1rem, 0.912rem + 0.376vw, 1.25rem);
  --flow-md: clamp(1.5rem, 1.412rem + 0.376vw, 1.75rem);
  --flow-lg: clamp(2rem, 1.8239rem + 0.751vw, 2.5rem);
  --flow-xl: clamp(2.75rem, 2.4859rem + 1.127vw, 3.5rem);
  --flow-2xl: clamp(3.75rem, 3.3099rem + 1.878vw, 5rem);

  /* Measure (ch follows the typeface) and page width */
  --measure-short: 46ch;
  --measure-reading: 62ch;
  --width-shell: 87.5rem;

  /* Motion: one easing curve, two speeds */
  --ease-brand: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-slow: 320ms;
}

/* --- global.css --- */
/* Reset and document defaults. */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button,
input[type="submit"] {
  appearance: button;
}

textarea {
  resize: vertical;
}

option {
  padding: 0;
}

summary {
  display: list-item;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* --- compositions.css --- */
/* Layout primitives. They arrange children; blocks decide spacing and size. */

/* Centred page column with growing side padding */
.wrapper {
  width: 100%;
  max-width: var(--width-shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 480px) { .wrapper { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .wrapper { padding-inline: 2rem; } }
@media (min-width: 1024px) { .wrapper { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .wrapper { padding-inline: 3rem; } }
@media (min-width: 1536px) { .wrapper { padding-inline: 4rem; } }

/* Standard vertical padding for a pageblock */
.region {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

/* Vertical flow */
.stack {
  display: flex;
  flex-direction: column;
}

/* Horizontal group that wraps */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* One column that blocks can split at larger widths */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* 4 / 8 / 12 column page grid */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .grid { column-gap: 2rem; }
}

/* --- components/surface.css --- */
/* Section backgrounds. Maps to a "background" select field in the CMS:
   data-surface="raised" | "contrast" (omit for the default canvas). */
[data-surface="raised"] {
  background-color: var(--color-surface);
}

[data-surface="contrast"] {
  background-color: var(--color-contrast);
  color: var(--color-ink-inverse);
}

/* Keep the keyboard focus ring visible on the dark background */
[data-surface="contrast"] :focus-visible {
  outline-color: var(--color-ink-inverse);
}

/* --- components/media.css --- */
/* An image that fills its (positioned) frame. */
.cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Focal point, e.g. from a CMS field */
.cover-image[data-focus="bottom"] {
  object-position: 50% 100%;
}

/* --- components/button.css --- */
/* Buttons. Default is the solid claret button; variants via data-variant. */
.button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;
  padding-inline: 2rem;
  border: 1px solid var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-canvas);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-base);
  white-space: nowrap;
  text-decoration-line: none;
  transition-property: color, background-color, border-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-brand);
}

.button:hover {
  border-color: var(--color-accent-hover);
  background-color: var(--color-accent-hover);
  color: var(--color-canvas);
}

@media (min-width: 480px) {
  .button { width: auto; }
}

/* Light button for dark surfaces */
.button[data-variant="inverse"] {
  border-color: var(--color-ink-inverse);
  background-color: var(--color-ink-inverse);
  color: var(--color-contrast);
}

.button[data-variant="inverse"]:hover {
  border-color: var(--color-ink-inverse-muted);
  background-color: var(--color-ink-inverse-muted);
}

/* Outlined, smaller secondary button */
.button[data-variant="outline"],
.button[data-variant="outline-inverse"] {
  width: auto;
  min-height: 3rem;
  padding-inline: 1.5rem;
  border-color: var(--color-line-strong);
  background-color: transparent;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.button[data-variant="outline"]:hover {
  border-color: var(--color-ink);
  background-color: transparent;
}

.button[data-variant="outline-inverse"] {
  border-color: var(--color-ink-inverse-muted);
  color: var(--color-ink-inverse);
}

.button[data-variant="outline-inverse"]:hover {
  border-color: var(--color-ink-inverse);
  background-color: transparent;
}

/* Compact size, used in the header */
.button[data-size="compact"] {
  min-height: 2.75rem;
  padding-inline: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- components/link.css --- */
/* Link styles shared across blocks. */

/* Plain link that underlines on hover (navigation, brand) */
.nav-link {
  text-decoration-line: none;
  text-underline-offset: 0.22em;
}

.nav-link:hover {
  text-decoration-line: underline;
  color: inherit;
}

/* Secondary call to action, usually followed by an arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  text-decoration-line: none;
  text-underline-offset: 0.22em;
}

.text-link:hover {
  text-decoration-line: underline;
  color: inherit;
}

/* Always-underlined link, e.g. an email address */
.underlined-link {
  text-decoration-line: underline;
  text-decoration-color: var(--color-line-strong);
  text-underline-offset: 0.22em;
}

.underlined-link:hover {
  text-decoration-color: currentColor;
  color: inherit;
}

/* --- components/label.css --- */
/* Small uppercase labels. */
.label {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* --- components/rich-text.css --- */
/* Editor content from a rich-text field.
   The field contains semantic HTML only (hgroup, h2, h3, p, ul, ol, li, em,
   strong, a[href]) without classes or inline styles. Tiptap wraps list item
   text in <p>, so blocks style body text with "> p", never plain "p". Each block styles these elements
   through its own __body class; this file holds only what every body shares. */

/* Links in running text. A link with a class (a button, a text link, a nav
   link) is styled by its own component. */
.rich-text a:where(:not([class])) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.22em;
}

.rich-text a:where(:not([class])):hover {
  text-decoration-color: currentColor;
}

.rich-text h2,
.rich-text h3 {
  font-family: var(--font-display);
  text-wrap: pretty;
}

/* A label above (or below) a heading: <hgroup><p>Label</p><h2>…</h2></hgroup>.
   Blocks set its colour and the gap to the heading. */
.rich-text hgroup {
  display: flex;
  flex-direction: column;
}

.rich-text hgroup > p {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* One call to action may end a body, written the way the editor writes it:
   <p><a class="button" href="…">…</a></p>, or with class="text-link". The
   link's class names its variant; the paragraph around it adds nothing. */
.rich-text > p:has(> a:only-child:is(.button, .text-link)) {
  display: flex;
  max-width: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.rich-text a:is(.button, .text-link) {
  text-decoration-line: none;
}

.rich-text a.text-link:hover {
  text-decoration-line: underline;
}

/* The arrow after a text link is drawn here rather than typed into the text,
   and screen readers skip it, as they did the design's aria-hidden span. */
.rich-text a.text-link::after {
  content: "→";
  content: "→" / "";
}

/* A link on its own - the header's button and name, a button and a text link
   side by side, the footer's e-mail address - is one link in its own
   rich-text element:
   <div class="rich-text"><a class="button" href="…">…</a></div>. The element
   is there to hold the field and draws no box, so the link is placed exactly
   as it would be without it: full width on a phone, held to the top of the
   menu's row. Zero specificity, so the element's own display (the header's,
   hidden on a phone) still wins. The import adds the same rule. */
:where(div.rich-text:has(> a:only-child:is(.button, .text-link, .nav-link, .underlined-link))) {
  display: contents;
}

/* --- blocks/site-header.css --- */
/* Site header: brand, desktop navigation, CTA and menu toggle. */
.site-header {
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--flow-sm);
  padding-block: 1.625rem;
}

.site-header__brand {
  font-size: clamp(1.3125rem, 2.2vw, 1.6875rem);
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.site-header__nav {
  display: none;
  align-items: center;
  gap: var(--flow-md);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header__cta {
  display: none;
}

.site-header__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: 0.3125rem;
  min-width: 3.5rem;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: 1px solid var(--color-line-strong);
  background-color: transparent;
  cursor: pointer;
}

.site-header__toggle-line {
  display: block;
  width: 1.375rem;
  height: 1px;
  background-color: var(--color-ink);
}

@media (min-width: 1260px) {
  .site-header__nav { display: flex; }
  .site-header__cta { display: inline-flex; }
  .site-header__toggle { display: none; }
}

/* --- blocks/site-menu.css --- */
/* Full-screen fold-out menu. js/site.js sets data-open="true". */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  translate: 0 -0.75rem;
  background-color: var(--color-canvas);
  color: var(--color-ink);
  transition-property: opacity, translate, visibility;
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--ease-brand);
}

.site-menu[data-open="true"] {
  /* Become visible at once on open (so focus can move into the menu);
     closing still waits for the fade before hiding. */
  transition-property: opacity, translate;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  translate: 0 0;
}

.site-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.625rem;
  border-bottom: 1px solid var(--color-line);
}

.site-menu__brand {
  font-size: clamp(1.3125rem, 2.2vw, 1.6875rem);
}

.site-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 2.75rem;
  border: 1px solid var(--color-line-strong);
  background-color: transparent;
  color: var(--color-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.site-menu__nav {
  flex: 1;
  justify-content: safe center;
  padding-block: clamp(1.75rem, 5vw, 3.5rem);
  overflow-y: auto;
}

.site-menu__eyebrow {
  margin-bottom: clamp(1rem, 2.5vw, 1.625rem);
}

.site-menu__links {
  border-top: 1px solid var(--color-line);
}

.site-menu__item {
  border-bottom: 1px solid var(--color-line);
}

.site-menu__link {
  display: block;
  padding-block: clamp(0.875rem, 2.4vw, 1.375rem);
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  line-height: 1.1;
}

.site-menu__action {
  align-items: center;
  gap: var(--flow-lg);
  margin-top: clamp(1.75rem, 4vw, 3rem);
}

.site-menu__action .button {
  align-self: flex-start;
}

.site-menu__description {
  max-width: 38ch;
  font-size: var(--text-sm);
  line-height: 1.65;
}

.site-menu__footer {
  justify-content: space-between;
  gap: var(--flow-md);
  padding-block: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

@media (min-width: 768px) {
  .site-menu__action { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- blocks/site-footer.css --- */
/* Site footer. */
.site-footer__inner {
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: 1.75rem;
}

.site-footer__grid {
  align-items: flex-start;
  row-gap: var(--flow-lg);
}

.site-footer__intro {
  grid-column: span 4;
  gap: var(--flow-md);
}

/* The intro is one rich-text field: a heading, a text and a button,
   spaced by the stack it is. The button's paragraph is laid out by
   rich-text.css (p:has(> a.button)). */
.site-footer__intro > h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.site-footer__intro > p:not(:has(> .button)) {
  max-width: 40ch;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.site-footer__nav,
.site-footer__contact {
  grid-column: span 2;
  gap: var(--flow-3xs);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.site-footer__label {
  margin-bottom: 0.375rem;
}

/* The contact column's text is one rich-text field: a label, the e-mail
   address and the place. */
.site-footer__contact-body {
  gap: var(--flow-3xs);
}

.site-footer__contact-body > h2 {
  margin-bottom: 0.375rem;
  line-height: inherit;
  color: var(--color-ink-subtle);
  font-family: inherit;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.site-footer__contact-body > p {
  padding-block: 0.375rem;
  overflow-wrap: anywhere;
}

.site-footer__link {
  padding-block: 0.375rem;
}

.site-footer__legal {
  justify-content: space-between;
  gap: var(--flow-sm);
  margin-top: clamp(1.875rem, 4vw, 3.25rem);
  padding-top: 1.125rem;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

@media (min-width: 768px) {
  .site-footer__intro { grid-column: span 8; }
  .site-footer__nav,
  .site-footer__contact { grid-column: span 4; }
}

@media (min-width: 1024px) {
  .site-footer__intro { grid-column: span 5; }
  .site-footer__nav { grid-column: 7 / span 3; }
  .site-footer__contact { grid-column: 10 / span 3; }
}

/* --- blocks/pb-hero.css --- */
/* Pageblock: hero (homepage opening).
   Fields: body (rich text: hgroup, h1, p) · button · link · facts (term, value) · image · caption */
.pb-hero__layout {
  align-items: stretch;
  gap: var(--flow-2xl);
}

.pb-hero__content {
  gap: var(--flow-lg);
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.pb-hero__body,
.pb-hero__body hgroup {
  display: flex;
  flex-direction: column;
  gap: var(--flow-lg);
}

/* The label above the heading (rich-text.css sets the letter-spacing and case) */
.pb-hero__body hgroup > p {
  color: var(--color-accent);
  font-size: 0.75rem;
}

.pb-hero__body h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.2vw, 4.375rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.pb-hero__body > p {
  max-width: 44ch;
  color: var(--color-ink-muted);
  font-size: var(--text-lg);
  line-height: 1.65;
}

.pb-hero__actions {
  gap: var(--flow-md);
}

.pb-hero__facts {
  row-gap: 0;
  margin-top: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--color-line);
}

.pb-hero__fact {
  grid-column: span 4;
  padding: 1.25rem 1.25rem 0;
}

.pb-hero__fact:first-child { padding-left: 0; }
.pb-hero__fact:last-child { padding-right: 0; }

.pb-hero__fact + .pb-hero__fact {
  border-left: 1px solid var(--color-line);
}

.pb-hero__fact-value {
  margin-top: 0.5rem;
  font-size: clamp(1.125rem, 1.8vw, 1.4375rem);
  line-height: 1.25;
}

.pb-hero__media {
  position: relative;
  min-height: clamp(22.5rem, 52vw, 42.5rem);
  background-color: var(--color-sunken);
}

.pb-hero__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0.8125rem 1.25rem;
  background-color: var(--color-canvas);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .pb-hero__layout { grid-template-columns: 7fr 5fr; }
  .pb-hero__content { padding-right: clamp(0rem, 3vw, 3.5rem); }
}

/* --- blocks/pb-approach.css --- */
/* Pageblock: approach.
   Fields: body (rich text: h2, p, ul; ends with one call-to-action link) */
.pb-approach__grid {
  row-gap: var(--flow-xl);
}

.pb-approach__content {
  grid-column: span 4;
  gap: var(--flow-xl);
}

.pb-approach__body {
  display: flex;
  flex-direction: column;
  gap: var(--flow-xl);
}

.pb-approach__body h2 {
  font-size: clamp(1.875rem, 4.4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.pb-approach__body > p {
  max-width: 60ch;
  color: var(--color-ink-muted);
  font-size: var(--text-lg);
  line-height: 1.7;
}

/* Ruled grid of short items: works for any number of items */
.pb-approach__body ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  padding-bottom: 1px; /* room for the closing rule of the last row */
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.pb-approach__body li {
  grid-column: span 2;
  padding-block: 0.75rem;
  border-top: 1px solid var(--color-line);
  /* Rule under every item; it overlaps the next row's top rule */
  box-shadow: 0 1px 0 var(--color-line);
}

@media (min-width: 768px) {
  .pb-approach__content { grid-column: span 8; }
  .pb-approach__body ul {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .pb-approach__body li { grid-column: span 4; }
}

@media (min-width: 1024px) {
  .pb-approach__content { grid-column: span 9; }
  .pb-approach__body ul { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .pb-approach__body ul { column-gap: 2rem; }
}

/* --- blocks/pb-online.css --- */
/* Pageblock: online lessons (wide image with caption). */
.pb-online__inner {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

.pb-online__frame {
  position: relative;
  max-height: 37.5rem;
  aspect-ratio: 21 / 9;
  background-color: var(--color-sunken);
}

.pb-online__caption {
  row-gap: var(--flow-md);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
}

.pb-online__lead {
  grid-column: span 4;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.18;
}

.pb-online__text {
  grid-column: span 4;
  font-size: var(--text-base);
  line-height: 1.7;
}

@media (min-width: 1024px) {
  .pb-online__lead { grid-column: span 5; }
  .pb-online__text { grid-column: 8 / span 5; }
}

/* --- blocks/pb-profiles.css --- */
/* Pageblock: student profiles (tabs) and lesson fees. */
.pb-profiles__heading {
  max-width: 26ch;
  margin-bottom: clamp(1.25rem, 2.4vw, 1.875rem);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.15;
}

.pb-profiles__tabs {
  gap: var(--flow-2xs);
  margin-bottom: clamp(1.5rem, 3vw, 2.375rem);
  padding-block: 0.375rem;
  border-block: 1px solid var(--color-line);
}

.pb-profiles__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: 0.875rem;
  background-color: transparent;
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition-property: color, background-color, text-decoration-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-brand);
}

.pb-profiles__tab:hover {
  background-color: color-mix(in srgb, var(--color-ink) 8%, transparent);
}

.pb-profiles__tab[aria-selected="true"] {
  color: var(--color-ink);
  text-decoration-line: underline;
}

.pb-profiles__tab[aria-selected="false"] {
  color: var(--color-ink-subtle);
  text-decoration-line: none;
}

.pb-profiles__layout {
  align-items: flex-start;
  gap: var(--flow-2xl);
}

.pb-profiles__content,
.pb-profiles__panel {
  gap: var(--flow-md);
}

/* A panel is a rich-text area: h3, the text, and the level line (p.level). */
.pb-profiles__panel > h3 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.2;
  text-wrap: pretty;
}

.pb-profiles__panel > p {
  max-width: 56ch;
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}

.pb-profiles__panel > p.level {
  max-width: none;
  color: var(--color-ink-subtle);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.pb-profiles__fees {
  align-self: flex-start;
  padding: clamp(1.625rem, 3.2vw, 2.5rem);
  background-color: var(--color-surface);
}

.pb-profiles__fees-heading {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.15;
}

.pb-profiles__fees-list {
  margin-top: 1.25rem;
}

.pb-profiles__fee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--color-line);
}

.pb-profiles__fee-term {
  font-size: var(--text-base);
  line-height: var(--leading-base);
}

.pb-profiles__fee-value {
  font-size: clamp(1.3125rem, 2.2vw, 1.5625rem);
}

.pb-profiles__note {
  margin-top: 1.125rem;
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .pb-profiles__layout { grid-template-columns: 7fr 5fr; }
}

/* --- blocks/pb-about-teaser.css --- */
/* Pageblock: about teaser.
   Fields: image + alt · body (rich text: hgroup, h2, p) · button · link */
.pb-about-teaser__layout {
  align-items: flex-start;
  gap: var(--flow-2xl);
}

.pb-about-teaser__media {
  background-color: var(--color-contrast-soft);
}

.pb-about-teaser__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.pb-about-teaser__content,
.pb-about-teaser__body,
.pb-about-teaser__body hgroup {
  display: flex;
  flex-direction: column;
  gap: var(--flow-md);
}

.pb-about-teaser__body hgroup > p {
  color: var(--color-ink-inverse-muted);
}

.pb-about-teaser__body h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  line-height: 1.12;
  text-wrap: wrap;
}

.pb-about-teaser__body > p {
  max-width: 60ch;
  color: var(--color-ink-inverse-muted);
  font-size: var(--text-lg);
  line-height: 1.75;
}

.pb-about-teaser__actions {
  gap: var(--flow-md);
  margin-top: 0.5rem;
}

@media (min-width: 1024px) {
  .pb-about-teaser__layout { grid-template-columns: 5fr 7fr; }
}

/* --- blocks/pb-gallery.css --- */
/* Pageblock: gallery. Tile sizes follow position, so editors only add images
   (designed for six).
   Fields: header (rich text: h2, one call-to-action link) · images */
.pb-gallery {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
}

.pb-gallery__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--flow-md);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.pb-gallery__header > h2 {
  max-width: 24ch;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.15;
  text-wrap: wrap;
}

.pb-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  padding-inline: 0.625rem;
}

.pb-gallery__item {
  position: relative;
  grid-column: span 1;
  height: clamp(15rem, 30vw, 27.5rem);
  background-color: var(--color-sunken);
}

.pb-gallery__item:nth-child(n + 4) {
  height: clamp(12.5rem, 24vw, 21.25rem);
}

@media (min-width: 768px) {
  .pb-gallery__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pb-gallery__item { grid-column: span 3; }
}

@media (min-width: 1024px) {
  .pb-gallery__item:nth-child(2),
  .pb-gallery__item:nth-child(n + 4) { grid-column: span 2; }
  .pb-gallery__item:nth-child(3) { grid-column: span 1; }
}

/* --- blocks/pb-trial-cta.css --- */
/* Pageblock: trial lesson call to action.
   Fields: body (rich text: hgroup, h2, p) · button · link · steps (rich text: ol) */
.pb-trial-cta__layout {
  align-items: flex-start;
  gap: var(--flow-2xl);
}

.pb-trial-cta__content,
.pb-trial-cta__body,
.pb-trial-cta__body hgroup {
  display: flex;
  flex-direction: column;
  gap: var(--flow-lg);
}

.pb-trial-cta__body hgroup > p {
  color: var(--color-ink-inverse-muted);
}

.pb-trial-cta__body h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.06;
}

.pb-trial-cta__body > p {
  max-width: 44ch;
  color: var(--color-ink-inverse-muted);
  font-size: var(--text-lg);
  line-height: 1.7;
}

.pb-trial-cta__actions {
  gap: var(--flow-md);
}

/* Numbered steps: numbers come from a CSS counter, not the content */
.pb-trial-cta__steps {
  align-self: flex-end;
}

.pb-trial-cta__steps ol {
  counter-reset: step;
  border-top: 1px solid var(--color-line-inverse);
}

.pb-trial-cta__steps li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.875rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--color-line-inverse);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  counter-increment: step;
}

.pb-trial-cta__steps li::before {
  content: counter(step);
  color: var(--color-ink-inverse-muted);
}

@media (min-width: 1024px) {
  .pb-trial-cta__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- blocks/pb-faq.css --- */
/* Pageblock: FAQ.
   Fields: heading · entries from the FAQ form (question: text,
   answer: rich text: p, ul, ol, a, strong, em) */
.pb-faq {
  padding-block: clamp(4rem, 8vw, 6.875rem);
}

.pb-faq__grid {
  row-gap: var(--flow-lg);
}

.pb-faq__heading {
  grid-column: span 4;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.15;
}

.pb-faq__list {
  grid-column: span 4;
  border-top: 1px solid var(--color-line);
}

.pb-faq__item {
  border-bottom: 1px solid var(--color-line);
}

.pb-faq__question {
  justify-content: space-between;
  gap: var(--flow-sm);
  padding-block: 1.25rem;
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  cursor: pointer;
}

/* The + that turns into a × is drawn here, not typed into every question. */
.pb-faq__question::after {
  content: "+";
  content: "+" / "";
  color: var(--color-ink-subtle);
  font-size: 1.125rem;
  transition-property: rotate;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-brand);
}

.pb-faq__item[open] .pb-faq__question::after {
  rotate: 45deg;
}

.pb-faq__answer {
  max-width: 66ch;
  margin-bottom: 1.375rem;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.pb-faq__answer > * + * {
  margin-top: 0.75em;
}

.pb-faq__answer ul,
.pb-faq__answer ol {
  padding-left: 1.25em;
}

.pb-faq__answer ul { list-style: disc; }
.pb-faq__answer ol { list-style: decimal; }

@media (min-width: 768px) {
  .pb-faq__heading,
  .pb-faq__list { grid-column: span 8; }
}

@media (min-width: 1024px) {
  .pb-faq__heading { grid-column: span 3; }
  .pb-faq__list { grid-column: 5 / span 8; }
}

/* --- blocks/pb-bio-intro.css --- */
/* Pageblock: biography opening.
   Fields: body (rich text: hgroup, h1, p) · button · link · image */
.pb-bio-intro__layout {
  align-items: stretch;
  gap: var(--flow-2xl);
}

.pb-bio-intro__content {
  gap: var(--flow-lg);
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.pb-bio-intro__body,
.pb-bio-intro__body hgroup {
  display: flex;
  flex-direction: column;
  gap: var(--flow-lg);
}

/* The label above the heading (rich-text.css sets the letter-spacing and case) */
.pb-bio-intro__body hgroup > p {
  color: var(--color-accent);
  font-size: 0.75rem;
}

.pb-bio-intro__body h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.pb-bio-intro__body > p {
  max-width: 46ch;
  color: var(--color-ink-muted);
  font-size: var(--text-lg);
  line-height: 1.65;
}

.pb-bio-intro__actions {
  gap: var(--flow-md);
}

.pb-bio-intro__media {
  position: relative;
  min-height: clamp(20rem, 46vw, 37.5rem);
  background-color: var(--color-sunken);
}

@media (min-width: 1024px) {
  .pb-bio-intro__layout { grid-template-columns: 7fr 5fr; }
  .pb-bio-intro__content { padding-right: clamp(0rem, 3vw, 3.5rem); }
}

/* --- blocks/pb-bio-path.css --- */
/* Pageblock: biography, "The path".
   Fields: label (sits in its own grid column, so it stays a separate field)
   · body (rich text: h2, p)
   Paragraphs pair up in two columns; a final unpaired paragraph runs full width. */
.pb-bio-path__grid {
  row-gap: var(--flow-xl);
}

.pb-bio-path__label {
  grid-column: span 4;
}

.pb-bio-path__body {
  display: grid;
  grid-column: span 4;
  gap: var(--flow-lg);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.pb-bio-path__body h2 {
  grid-column: 1 / -1;
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
}

.pb-bio-path__body > p {
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}

.pb-bio-path__body > p:last-child:nth-of-type(odd) {
  grid-column: 1 / -1;
  max-width: var(--measure-reading);
}

@media (min-width: 768px) {
  .pb-bio-path__label { grid-column: span 2; }
  .pb-bio-path__body {
    grid-column: span 6;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pb-bio-path__label { padding-top: 0.75rem; }
  .pb-bio-path__body { grid-column: 4 / span 8; }
}

/* --- blocks/pb-bio-facts.css --- */
/* Pageblock: biography, "The short version".
   Fields: body (rich text: h2, p) · facts (repeater or form: term, value) */
.pb-bio-facts__inner {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.pb-bio-facts__layout {
  align-items: flex-start;
  gap: var(--flow-2xl);
}

.pb-bio-facts__body {
  display: flex;
  flex-direction: column;
  gap: var(--flow-md);
}

.pb-bio-facts__body h2 {
  max-width: 24ch;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.15;
  text-wrap: wrap;
}

.pb-bio-facts__body > p {
  max-width: var(--measure-short);
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}

.pb-bio-facts__list {
  border-top: 1px solid var(--color-line);
}

.pb-bio-facts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--color-line);
}

.pb-bio-facts__term {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.pb-bio-facts__value {
  font-size: var(--text-base);
  line-height: var(--leading-base);
}

@media (min-width: 1024px) {
  .pb-bio-facts__layout { grid-template-columns: 5fr 7fr; }
}

/* --- blocks/pb-bio-teaching.css --- */
/* Pageblock: biography, "How I teach".
   Fields: image + alt · body (rich text: hgroup, h2, p, ul) */
.pb-bio-teaching__grid {
  align-items: flex-end;
  row-gap: 1rem;
}

.pb-bio-teaching__media {
  position: relative;
  grid-column: span 4;
  height: clamp(17.5rem, 34vw, 30rem);
  background-color: var(--color-sunken);
}

.pb-bio-teaching__content {
  grid-column: span 4;
  gap: var(--flow-md);
}

.pb-bio-teaching__body,
.pb-bio-teaching__body hgroup {
  display: flex;
  flex-direction: column;
  gap: var(--flow-md);
}

.pb-bio-teaching__body hgroup > p {
  color: var(--color-ink-subtle);
}

.pb-bio-teaching__body h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.15;
}

.pb-bio-teaching__body > p {
  max-width: var(--measure-reading);
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}

/* Ruled list: works for any number of items */
.pb-bio-teaching__body ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2rem;
  padding-bottom: 1px; /* room for the closing rule of the last row */
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.pb-bio-teaching__body li {
  padding-block: 0.75rem;
  border-top: 1px solid var(--color-line);
  /* Rule under every item; it overlaps the next row's top rule */
  box-shadow: 0 1px 0 var(--color-line);
}

@media (min-width: 480px) {
  .pb-bio-teaching__body ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .pb-bio-teaching__grid { row-gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .pb-bio-teaching__media { grid-column: span 5; }
  .pb-bio-teaching__content { grid-column: 7 / span 6; }
}

@media (min-width: 1280px) {
  .pb-bio-teaching__grid { row-gap: 2rem; }
}

/* --- blocks/pb-bio-fit.css --- */
/* Pageblock: biography, "Who I say yes to".
   Fields: heading · body (rich text: p; ends with one call-to-action link) */
.pb-bio-fit {
  padding-bottom: clamp(4rem, 8vw, 7.5rem);
}

.pb-bio-fit__grid {
  row-gap: var(--flow-lg);
}

.pb-bio-fit__heading {
  grid-column: span 4;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.15;
}

.pb-bio-fit__content {
  grid-column: span 4;
  gap: var(--flow-md);
}

.pb-bio-fit__body {
  display: flex;
  flex-direction: column;
  gap: var(--flow-md);
}

.pb-bio-fit__body > p {
  max-width: var(--measure-reading);
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .pb-bio-fit__heading,
  .pb-bio-fit__content { grid-column: span 8; }
}

@media (min-width: 1024px) {
  .pb-bio-fit__heading { grid-column: span 3; }
  .pb-bio-fit__content { grid-column: 5 / span 8; }
}

/* --- blocks/pb-bio-cta.css --- */
/* Pageblock: biography closing call to action.
   Fields: body (rich text: h2, p) · button text + URL */
.pb-bio-cta__inner {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.pb-bio-cta__layout {
  align-items: center;
  gap: var(--flow-xl);
}

.pb-bio-cta__body {
  display: flex;
  flex-direction: column;
  gap: var(--flow-md);
}

.pb-bio-cta__body h2 {
  font-size: clamp(1.75rem, 3.8vw, 2.875rem);
  line-height: 1.06;
}

.pb-bio-cta__body > p {
  max-width: 46ch;
  color: var(--color-ink-inverse-muted);
  font-size: var(--text-lg);
  line-height: 1.7;
}

.pb-bio-cta__actions {
  gap: var(--flow-md);
}

@media (min-width: 1024px) {
  .pb-bio-cta__layout { grid-template-columns: 7fr 5fr; }
  .pb-bio-cta__actions { justify-content: flex-end; }
}

/* --- blocks/pb-booking.css --- */
/* Pageblock: booking introduction and trial lesson form.
   Fields: body (rich text: hgroup, h1, p.lead, p) · facts · contact
   · sent (rich text: h2, p, one call-to-action link) · form labels */
.pb-booking {
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 7.5rem);
}

.pb-booking__layout {
  align-items: flex-start;
  gap: var(--flow-2xl);
}

.pb-booking__intro,
.pb-booking__body,
.pb-booking__body hgroup {
  display: flex;
  flex-direction: column;
  gap: var(--flow-md);
}

/* The label above the heading (rich-text.css sets the letter-spacing and case) */
.pb-booking__body hgroup > p {
  color: var(--color-accent);
  font-size: 0.75rem;
}

.pb-booking__body h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.pb-booking__body > p {
  max-width: 44ch;
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}

.pb-booking__body > p.lead {
  font-size: var(--text-lg);
}

.pb-booking__facts {
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.pb-booking__fact {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 0.8125rem;
  border-bottom: 1px solid var(--color-line);
}

.pb-booking__contact {
  max-width: 44ch;
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Confirmation shown after sending */
.pb-booking__sent {
  gap: var(--flow-md);
  padding-top: 1.75rem;
  border-top: 2px solid var(--color-accent);
}

.pb-booking__sent > h2 {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1.15;
  text-wrap: wrap;
}

.pb-booking__sent > p {
  max-width: 46ch;
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}

/* Form */
.pb-booking__form {
  gap: 1.5rem 1.75rem;
}

.pb-booking__field {
  gap: 0.4375rem;
}

.pb-booking__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-line-strong);
  background-color: var(--color-field);
  color: var(--color-ink);
  font-size: 1.0625rem;
  transition-property: color, background-color, border-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-brand);
}

.pb-booking__input:hover {
  border-color: var(--color-ink);
}

.pb-booking__input--select {
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.pb-booking__input--textarea {
  line-height: 1.6;
}

.pb-booking__actions {
  justify-content: space-between;
  gap: var(--flow-md);
  margin-top: 0.375rem;
}

.pb-booking__privacy {
  max-width: 34ch;
  font-size: var(--text-xs);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .pb-booking__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-booking__field--wide,
  .pb-booking__actions { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .pb-booking__layout { grid-template-columns: 5fr 7fr; }
  .pb-booking__intro { padding-right: clamp(0rem, 3vw, 3rem); }
}

/* --- blocks/pb-not-found.css --- */
/* Pageblock: page not found (the site's 404 page).
   Fields: body (rich text: hgroup, h1, p; ends with one call-to-action link)
   The body is a rich-text field, so it spaces its children with margins and
   never lays them out itself: the editor puts its own <div> inside it. */
.pb-not-found {
  padding-block: clamp(4rem, 10vw, 8rem);
}

.pb-not-found__body > * + *,
.pb-not-found__body hgroup > * + * {
  margin-block-start: var(--flow-lg);
}

/* The label above the heading (rich-text.css sets the letter-spacing and case) */
.pb-not-found__body hgroup > p {
  color: var(--color-accent);
  font-size: 0.75rem;
}

.pb-not-found__body h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.pb-not-found__body > p {
  max-width: 46ch;
  color: var(--color-ink-muted);
  font-size: var(--text-lg);
  line-height: 1.65;
}

/* --- utilities.css --- */
/* Single-purpose overrides. */
.u-font-display { font-family: var(--font-display); }
.u-text-ink-muted { color: var(--color-ink-muted); }
.u-text-ink-subtle { color: var(--color-ink-subtle); }
.u-text-ink-inverse-muted { color: var(--color-ink-inverse-muted); }
.u-text-accent { color: var(--color-accent); }