@charset "UTF-8";
/* GENERATED from static/scss/main.scss by Sass. Do not edit this file: edit the .scss partials and recompile (npm run css). */
@layer tokens, reset, base, layout, components, includes, blocks, pages, utilities;
@layer tokens {
  /* =========================================================================
     Design tokens — Mastering Management (main site)
     Source: Sketch File/Mastering_Management_02_DELIVERED.sketch, colours and
     sizes as used on the page artboards (not the 00_Designsystem swatches,
     which disagree). See docs/component-inventory.md.

     Two tiers:
     1. Palette   --color-<name>   raw colours. Don't use in blocks directly
                                   unless a block needs that exact colour.
     2. Semantic  --color-ink, --color-surface, ... what blocks should use.
                                   The book section (_tokens-book.scss) remaps these.
     ========================================================================= */
  :root {
    /* ---- 1. Palette ---------------------------------------------------- */
    --color-navy: #19485C; /* headings, body text, rules, primary buttons */
    --color-rhino: #0F2B4A; /* footer, dark buttons, quote text */
    --color-cream: #F6EEE2; /* header band, panels, carousel buttons */
    --color-barley: #FFF5D2; /* pale offset blocks, inputs, light cards */
    --color-yellow: #F0E142; /* newsletter strip, highlights */
    --color-yellow-deep: #DFCB1D; /* speaker panel, event card */
    --color-orange: #FF5F00; /* offset blocks, bullets, illustrations */
    --color-orange-text: #F16F32; /* orange text on dark buttons (book) */
    --color-teal: #235D61; /* video panel, teal buttons */
    --color-teal-deep: #174850; /* duotone images, dark tiles */
    --color-teal-darkest:#12323E; /* darkest tiles, book overlays */
    --color-sage: #8EBD9D; /* tag pill, small buttons, attribution */
    --color-aqua: #98D4CC; /* book promo panel, handwritten captions */
    --color-olive: #B4BF64; /* event card, numbered card, tiles */
    --color-white: #FFFFFF;
    --color-logo: #0C444E; /* the logo's own colour (Sketch logo bitmap) */
    /* ---- 2. Semantic --------------------------------------------------- */
    --color-ink: var(--color-navy); /* headings, links, rules, primary buttons */
    --color-text: var(--color-rhino); /* body copy (design paragraphs are #0F2B4A) */
    --color-ink-strong: var(--color-rhino); /* footer bg, strong text */
    --color-surface: var(--color-white); /* page background */
    --color-surface-2: var(--color-cream); /* tinted sections, header band */
    --color-surface-3: var(--color-barley); /* pale panels, inputs */
    --color-accent: var(--color-teal); /* secondary dark colour */
    --color-accent-2: var(--color-yellow); /* highlight colour (underline, strip) */
    --color-highlight: var(--color-orange); /* offsets, bullets, figures */
    --color-caption: var(--color-aqua); /* handwritten captions */
    --color-on-dark: var(--color-white); /* text on navy/teal/rhino */
    --color-ink-contrast: var(--color-white); /* text on anything filled with --color-ink (primary buttons); dark bands flip it */
    --color-focus: var(--color-rhino); /* focus ring: ≥3:1 on every light background (orange was 2.7:1 on cream); dark areas switch to yellow */
    /* ---- Typography ---------------------------------------------------- */
    --font-display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
    --font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Type sizes (css-guide §4 "Type").
       Mobile (base): mobile design px / 420 × 100vw — keeps the 420px artboard's proportions —
       capped at the tablet size so nothing jumps at 48rem. Body/lead have a legibility floor.
       Tablet: fixed. Desktop 64–100rem: scales up to the 1600px design. 100rem+: fixed.
       (Tablet and desktop values are in the media queries at the end.) */
    --fs-h1: min(8.5714vw, 2.64rem); /* 36 @420, max 42 */
    --fs-h2: min(5.7143vw, 1.92rem); /* 24 @420, max 31 */
    --fs-h3: min(5.7143vw, 1.5rem); /* 24 @420 */
    --fs-h4: min(5vw, 1.3125rem); /* 21 @420 */
    --fs-lead: clamp(1rem, 4.2857vw, 1.125rem); /* 18 @420, never below 16 */
    --fs-body: clamp(.875rem, 3.3333vw, 1rem); /* 14 @420 → 16, never below 14 */
    --fs-body-lg: clamp(1rem, 4.2857vw, 1.125rem); /* 18: testimonial attribution; never below 16 */
    --fs-button: var(--fs-body); /* 16: button labels (book remaps) */
    --fs-small: .875rem; /* 14 (footer, meta) */
    --fs-xsmall: .75rem; /* 12 (legal line; also the 13px mobile Menu/Close labels) */
    --fs-caption: min(4.7619vw, 1.25rem); /* 20 @420 */
    --lh-h1: 1.15;
    --ls-h1: -.017em; /* mobile 42/36; desktop value set at 48rem below */
    --lh-h2: 1.15;
    --ls-h2: -.01em;
    --lh-h3: 1.2;
    --lh-h4: 1.25;
    --lh-body: 1.6;
    --lh-lead: 1.5; /* 24/36 */
    --lh-caption: 1.3;
    --lh-statement: 1.15; /* long display-font statements in sentence case (book_promo): room for descenders */
    /* ---- Space ---------------------------------------------------------
       Steps 1–4 fixed everywhere. Steps 5–9 follow the same three-tier rule as type:
       mobile scales from the 420px design (capped at the tablet value), tablet fixed,
       desktop 64–100rem scales up to the 1600px design, 100rem+ fixed. */
    --space-1: .25rem; /*  4px */
    --space-2: .5rem; /*  8px */
    --space-3: .75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: min(3.8095vw, 1rem); /* 16 @420: heading to text */
    --space-6: min(5.7143vw, 1.5rem); /* 24 @420: column gaps, small panels */
    --space-7: min(7.619vw, 2rem); /* 32 @420: panel padding */
    --space-8: min(9.5238vw, 3.2rem); /* 40 @420, max 51: large panel padding */
    --space-9: min(14.2857vw, 4.8rem); /* 60 @420, max 77: gap between sections */
    /* ---- Page width ----------------------------------------------------
       Mobile: 90% of the viewport. Tablet (48–64rem): fixed 692px column.
       Desktop 64–100rem: 88% (design: 1406/1600). 100rem+: fixed 1406px, centred. */
    --page-width: 90%; /* mobile: ~21px margins at 420, as in the design */
    --container: 87.875rem; /* 1406px cap */
    --container-narrow: 56.8125rem; /* 909px cap for text columns (57% of 1600) */
    --tap-target: 2.75rem; /* 44px minimum for buttons, arrows, nav links */
    --radius: .625rem; /* rectangle buttons, inputs (10px in the Sketch file) */
    --radius-lg: 1.5rem; /* rounded section tops (course band) */
    --radius-pill: 999px; /* oval buttons, tag pill */
    --border: 2px solid var(--color-ink);
    --offset-block: min(9.5238vw, 2.5rem); /* colour block behind photos: 40px @420, 40px desktop */
  }
  /* Breakpoints (css-guide §4): 48rem tablet · 64rem small desktop · 100rem large desktop.
     Media queries can't read custom properties, so these values are written literally. */
  /* Tablet (48–64rem): fixed column, fixed type and spacing — nothing scales.
     Values = the 1600px design scaled to 1024px (where desktop scaling starts), never smaller
     than the mobile design or a readable minimum, so both neighbouring tiers join up. */
  @media (min-width: 48rem) {
    :root {
      --container: 43.25rem; /* 692px column, centred (= 90% of 768) */
      --fs-h1: 2.64rem; /* 42 */
      --fs-h2: 1.92rem; /* 31 */
      --fs-h3: 1.5rem; /* 24 */
      --fs-h4: 1.3125rem; /* 21 */
      --fs-lead: 1.125rem; /* 18 */
      --fs-body: 1rem; /* 16 */
      --fs-body-lg: 1.125rem; /* 18 — fixed from here up */
      --fs-caption: 1.25rem; /* 20 */
      --space-5: 1rem; /* 16 */
      --space-6: 1.5rem; /* 24 */
      --space-7: 2rem; /* 32 */
      --space-8: 3.2rem; /* 51 */
      --space-9: 4.8rem; /* 77 */
      --offset-block: 2.5rem; /* 40 */
      --lh-h1: .95; /* desktop 62/66 */
    }
  }
  /* Small desktop (64–100rem): content 88% wide; type and spacing scale with the viewport,
     true to the 1600px design (design px / 1600 × 100vw), from the tablet values up.
     Large desktop (100rem+): the clamp() maximums are the design values and are reached at
     exactly 1600px, so from 100rem everything is fixed; content is fixed at 1406px, centred. */
  @media (min-width: 64rem) {
    :root {
      --page-width: 88%;
      --container: 87.875rem; /* 1406px cap = fixed and centred from 100rem */
      --fs-h1: clamp(2.64rem, 4.125vw, 4.125rem); /* 42 → 66 */
      --fs-h2: clamp(1.92rem, 3vw, 3rem); /* 31 → 48 */
      --fs-h3: clamp(1.5rem, 2.25vw, 2.25rem); /* 24 → 36 */
      --fs-h4: clamp(1.3125rem, 1.5vw, 1.5rem); /* 21 → 24 */
      --fs-lead: clamp(1.125rem, 1.5vw, 1.5rem); /* 18 → 24 */
      --space-5: clamp(1rem, 1.5vw, 1.5rem); /* 16 → 24 */
      --space-6: clamp(1.5rem, 2vw, 2rem); /* 24 → 32 */
      --space-7: clamp(2rem, 3vw, 3rem); /* 32 → 48 */
      --space-8: clamp(3.2rem, 5vw, 5rem); /* 51 → 80 */
      --space-9: clamp(4.8rem, 7.5vw, 7.5rem); /* 77 → 120 */
    }
  }
}
@layer base {
  /* Self-hosted fonts. Files and licences in static/fonts/. Browsers only download a face when it is used. */
  @font-face {
    font-family: "Lilita One";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lilita-one-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/noto-sans-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/noto-sans-600.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/noto-sans-700.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/noto-sans-400-italic.woff2") format("woff2");
  }
  @font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/oswald-700.woff2") format("woff2");
  }
  @font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/open-sans-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/open-sans-700.woff2") format("woff2");
  }
}
@layer reset {
  /* Minimal reset (layer: reset). */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote {
    margin: 0;
  }
  :where(ul[class], ol[class], nav ul) {
    list-style: none;
    padding: 0;
  }
  img, svg, video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  input, button, textarea, select {
    font: inherit;
  }
}
@layer base {
  /* Base typography (layer: base). Element defaults only — blocks and components style their own parts. */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-surface);
    -webkit-font-smoothing: antialiased;
  }
  /* The book theme sits on <main> and the sub-nav, so re-apply the inherited text settings there. */
  [data-section=book] {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text);
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-ink);
    text-wrap: balance;
  }
  h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    text-transform: uppercase;
    color: var(--color-accent);
  }
  h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    text-transform: uppercase;
  }
  h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
  h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
  }
  [data-section=book] :is(h1, h2, h3, h4) {
    font-weight: 700;
  }
  p {
    text-wrap: pretty;
  }
  .u-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  strong, b {
    font-weight: 700;
  }
  a {
    color: inherit;
    text-underline-offset: 0.15em;
  }
  @media (hover: hover) {
    a:hover {
      text-decoration-thickness: 2px;
    }
  }
  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }
  /* ---- Rich text (.u-rich-text wraps any RichText field) ------------------------------
     Content page (06): paragraphs at lead size (24px design), headings as the type scale,
     lists with orange dots and items in the display font. :where() keeps these overridable. */
  :where(.u-rich-text) > * + * {
    margin-block-start: var(--space-5);
  }
  :where(.u-rich-text) > :is(h2, h3, h4) {
    margin-block-start: var(--space-8);
  }
  :where(.u-rich-text) > :is(h2, h3, h4):first-child {
    margin-block-start: 0;
  }
  :where(.u-rich-text) > :is(h2, h3, h4) + * {
    margin-block-start: var(--space-5);
  }
  :where(.u-rich-text) > :is(ul, ol) {
    margin-block: var(--space-7);
  }
  :where(.u-rich-text) :is(p, ol) {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  :where(.u-rich-text) h2 {
    color: var(--color-ink-strong);
  }
  :where(.u-rich-text) a {
    color: var(--color-ink);
    text-decoration-thickness: 1px;
  }
  :where(.u-rich-text) ul {
    list-style: none;
    padding: 0;
  }
  :where(.u-rich-text) ul > li {
    position: relative;
    padding-inline-start: 2.25em;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: 1.4;
    color: var(--color-ink-strong);
  }
  :where(.u-rich-text) ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.3em;
    inline-size: 0.75em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-highlight);
  }
  :where(.u-rich-text) ul > li + li {
    margin-block-start: var(--space-4);
  }
  :where(.u-rich-text) ol {
    padding-inline-start: 1.5em;
  }
  :where(.u-rich-text) ol > li + li {
    margin-block-start: var(--space-3);
  }
  :where(.u-rich-text) blockquote {
    margin-block: var(--space-7);
    padding-inline-start: var(--space-6);
    border-inline-start: var(--space-1) solid var(--color-highlight);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: 1.4;
    color: var(--color-ink-strong);
  }
  :where(.u-rich-text) blockquote p {
    font-size: inherit;
    line-height: inherit;
  }
}
@layer layout {
  .l-container {
    inline-size: min(var(--page-width), var(--container));
    margin-inline: auto;
  }
  .l-container--narrow {
    max-inline-size: var(--container-narrow);
  }
  /* Layout modes (css-guide §4 "Content width").
     Default: block root is full width (it carries any background colour edge to edge) and its
     content sits in .l-container — fixed and centred.
     .l-bleed      content fills the whole screen width (e.g. image_carousel).
     .l-bleed-end  content starts on the container's left edge and runs off the right edge of
                   the screen (e.g. card_carousel). Use on a full-width element. */
  .l-bleed {
    inline-size: 100%;
  }
  /* .l-panel  a coloured panel (usually with u-band): edge to edge on phones, as in the mobile design, with its
               content lined up with the page margins; from 48rem exactly the content width, centred. */
  .l-panel {
    inline-size: 100%;
    padding-inline: calc((100% - var(--page-width)) / 2);
  }
  @media (min-width: 48rem) {
    .l-panel {
      inline-size: min(var(--page-width), var(--container));
      margin-inline: auto;
      padding-inline: 0;
    }
  }
  .l-bleed-end {
    padding-inline-start: calc((100% - min(var(--page-width), var(--container))) / 2);
  }
  .u-skip-link {
    position: absolute;
    inset-inline-start: -999px;
  }
  .u-skip-link:focus {
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-4);
    z-index: 100;
    background: var(--color-surface);
    padding: var(--space-2) var(--space-4);
  }
  .u-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@layer components {
  /* Component: icon (Font Awesome 6 Pro, self-hosted sprite). Sized by font-size, coloured by currentColor. */
  .c-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    fill: currentColor;
    vertical-align: -0.125em;
  }
}
@layer components {
  /* Component: logo. Sized by its container (the header, footer tile or book hero sets the width). */
  .c-logo {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1967/1815;
    color: var(--color-logo);
    fill: currentColor;
  }
}
@layer components {
  /* Component: button. Template: templates/components/button.html.
     Variants (component-inventory "Master list 4"):
     primary  navy rectangle, white label + arrow ("Let's talk", "Book a course now")
     small    sage rectangle, dark label + arrow ("Ask me a question" in panels)
     accent   orange rectangle ("Start your journey today")
     oval     outline ellipse + arrow ("Ask me a question", "Explore the book"); fills sage on hover (design board)
     icon     teal panel: big icon, two-line label, arrow ("Purchase my book now"); add --social for a round icon (LinkedIn)
     outline  transparent with a border (book page, secondary actions)
     Colours are set through --btn-* so variants only change the custom properties. */
  .c-button {
    --btn-bg: var(--color-ink);
    --btn-fg: var(--color-ink-contrast);
    --btn-border: transparent; /* stays transparent so forced-colours mode still shows an outline */
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    min-block-size: var(--tap-target);
    padding: 0.75em 1.5em;
    border: 2px solid var(--btn-border);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: 400 var(--fs-button)/1.4 var(--font-body);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .c-button__icon {
    font-size: 1em;
  }
  .c-button__label {
    display: block;
  }
  .c-button--small {
    --btn-bg: var(--color-sage);
    --btn-fg: var(--color-rhino);
    font-size: var(--fs-small);
  } /* fixed fill, so a fixed label colour (stays dark on dark bands) */
  .c-button--accent {
    --btn-bg: var(--color-highlight);
    --btn-fg: var(--color-rhino);
  }
  .c-button--outline {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink);
    --btn-border: currentColor;
  }
  .c-button--oval {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink-strong);
    --btn-border: currentColor;
    justify-content: center;
    padding: 1.25em 2em;
    border-radius: 50%; /* a true ellipse, as drawn — not --radius-pill */
  }
  .c-button--icon {
    --btn-bg: var(--color-accent);
    gap: 1em;
    padding: 1em 1.5em;
    font-size: var(--fs-small);
  }
  .c-button--icon .c-button__icon:first-child {
    font-size: 3.4em;
  } /* the large leading icon */
  .c-button--icon .c-button__label {
    max-inline-size: 9em;
  } /* breaks "Purchase my / book now" over two lines */
  .c-button--social .c-button__icon:first-child {
    font-size: 1.75em;
    box-sizing: content-box;
    padding: 0.3em;
    border: 2px solid currentColor;
    border-radius: 50%;
  }
  /* Book section: square corners, bold, orange label on dark teal */
  [data-section=book] .c-button {
    border-radius: 0;
    font-weight: 700;
  }
  [data-section=book] .c-button--primary {
    --btn-bg: var(--color-ink);
    --btn-fg: var(--color-button-text);
  } /* orange label on darkest teal: 4.55:1 (on teal-deep it was 3.4:1) */
  @media (hover: hover) {
    .c-button:hover:not(:disabled) {
      --btn-bg: color-mix(in srgb, var(--color-ink) 80%, var(--color-ink-strong));
    }
    .c-button:is(.c-button--small, .c-button--accent, .c-button--icon):hover:not(:disabled) {
      --btn-bg: var(--color-ink);
      --btn-fg: var(--color-ink-contrast);
    }
    .c-button:is(.c-button--outline, .c-button--oval):hover:not(:disabled) {
      --btn-bg: var(--color-sage);
      --btn-fg: var(--color-rhino);
    }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .c-button {
      transition: background-color 0.15s, color 0.15s;
    }
    .c-button .c-button__icon:last-child {
      transition: translate 0.15s;
    }
    .c-button:hover:not(:disabled) .c-button__icon:last-child {
      translate: 0.2em 0;
    }
  }
  .c-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
@layer components {
  /* Component: framed_image. The colour block starts about a third of the way in and down, and sticks out
     by --offset-block to the bottom and one side (physical direction is part of the design). */
  .c-framed-image {
    --frame-colour: var(--color-orange);
    position: relative;
    isolation: isolate;
    margin: 0;
    padding-block-end: var(--offset-block);
    padding-inline-end: var(--offset-block);
  }
  .c-framed-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 36% 0 0 38%;
    background: var(--frame-colour);
  }
  .c-framed-image__img {
    inline-size: 100%;
    object-fit: cover;
  }
  .c-framed-image--start {
    padding-inline: var(--offset-block) 0;
  }
  .c-framed-image--start::before {
    inset: 36% 38% 0 0;
  }
  .c-framed-image--yellow {
    --frame-colour: var(--color-yellow);
  }
  .c-framed-image--pale {
    --frame-colour: var(--color-barley);
  }
}
@layer components {
  /* Component: handwritten_caption. Arrow is a decorative mask (static/img/mm_caption-arrow.svg) so it takes the text colour. */
  .c-handwritten-caption {
    position: relative;
    max-inline-size: 12em;
    padding-block-start: 1.4em;
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    text-transform: uppercase;
    text-align: center;
    color: var(--color-caption);
  }
  .c-handwritten-caption::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1.4em;
    aspect-ratio: 1;
    background: currentColor;
    mask: url("../img/mm_caption-arrow.svg") center/contain no-repeat;
  }
  .c-handwritten-caption--arrow-end {
    padding-block: 0 1.4em;
  }
  .c-handwritten-caption--arrow-end::before {
    inset: auto 0 0 auto;
    rotate: 180deg;
  }
}
@layer components {
  /* Component: carousel_controls. Round cream buttons with a navy chevron; vertical variant is bare chevrons. */
  .c-carousel-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .c-carousel-controls__btn {
    display: inline-grid;
    place-items: center;
    inline-size: clamp(var(--tap-target), 4vw, 4rem); /* 63px at 1600, never under 44px; no text inside */
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--color-surface-2);
    color: var(--color-ink);
    font-size: 1.5rem;
    cursor: pointer;
  }
  .c-carousel-controls__btn[aria-disabled=true] {
    opacity: 0.4;
    cursor: default;
  } /* set by carousel.js at either end; stays focusable */
  .c-carousel-controls--vertical {
    flex-direction: column;
    gap: var(--space-3);
  }
  .c-carousel-controls--vertical .c-carousel-controls__btn {
    background: transparent;
    font-size: 2rem;
  }
  @media (hover: hover) {
    .c-carousel-controls__btn:hover:not([aria-disabled=true]) {
      background: var(--color-ink);
      color: var(--color-ink-contrast);
    }
  }
}
@layer components {
  /* Component: scroller — a horizontal (default) or vertical scroll-snap list, used by the carousels
     (image_carousel, card_carousel, reviews). Put it on the <ul> together with js-carousel, an id, tabindex="0"
     and an aria-label; arrows come from components/carousel_controls.html (static/js/modules/carousel.js).
     Blocks set the item sizes and gaps (--scroller-gap); the scrollbar is hidden because the arrows, swipe,
     trackpad and keyboard all scroll the list. */
  .c-scroller {
    display: flex;
    gap: var(--scroller-gap, var(--space-4));
    list-style: none; /* no padding/margin reset here (base/_reset.scss does it), so layout classes like .l-bleed-end still apply */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .c-scroller::-webkit-scrollbar {
    display: none;
  }
  .c-scroller > * {
    flex: none;
    min-inline-size: 0;
    scroll-snap-align: start;
  }
  .c-scroller--vertical {
    flex-direction: column;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
  }
  @media (prefers-reduced-motion: no-preference) {
    .c-scroller {
      scroll-behavior: smooth;
    }
  }
}
@layer components {
  /* Component: tag. */
  .c-tag {
    display: inline-block;
    padding: 0.2em 0.9em;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-sage);
    color: var(--color-rhino); /* fixed fill, so a fixed label colour (stays dark on the teal band) */
    font-size: var(--fs-small);
    line-height: var(--lh-lead);
  }
}
@layer components {
  /* Component: check_list. Body-size rows with a larger tick and hairline dividers, as in the Services benefits list. */
  .c-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .c-check-list__item {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding-block: 0.85em;
  }
  .c-check-list__item:not(:last-child) {
    border-block-end: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  }
  .c-check-list__icon {
    flex: none;
    font-size: 1.5em;
    color: var(--color-ink);
  }
}
@layer components {
  /* Component: back_to_top. */
  .c-back-to-top {
    display: inline-grid;
    place-items: center;
    align-self: center;
    inline-size: var(--tap-target);
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 1.25rem;
  }
  @media (hover: hover) {
    .c-back-to-top:hover {
      background: var(--color-yellow);
    }
  }
}
@layer components {
  /* Component: form_field. Pale input on any background, as in the newsletter strip. */
  .c-form-field {
    display: grid;
    gap: var(--space-2);
    text-align: start;
  }
  .c-form-field__label {
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-ink-strong);
  }
  .c-form-field__input {
    inline-size: 100%;
    min-block-size: var(--tap-target);
    padding: 0.75em 1.5em;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--color-surface-3);
    color: var(--color-ink-strong);
    font-size: var(--fs-body);
    line-height: 1.4;
  }
  .c-form-field__input::placeholder {
    color: var(--color-ink-strong);
    opacity: 0.75;
  }
  .c-form-field__input--textarea {
    resize: vertical;
  }
  .c-form-field__help {
    font-size: var(--fs-small);
  }
  .c-form-field__error {
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-ink-strong);
  }
  .c-form-field:has([aria-invalid=true]) .c-form-field__input,
  .c-form-field__input:user-invalid {
    border-color: var(--color-orange);
  }
  /* Select: native control with a drawn chevron (no icon font needed) */
  .c-form-field__input--select {
    appearance: none;
    padding-inline-end: 3em;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.6em center, right 1.2em center;
    background-size: 0.4em 0.4em;
    background-repeat: no-repeat;
  }
  /* Checkbox: box first, label beside it; help/error line up under the label */
  .c-form-field--checkbox {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: var(--space-3);
  }
  .c-form-field--checkbox > :is(.c-form-field__help, .c-form-field__error) {
    grid-column: 2;
  }
  .c-form-field__check {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    accent-color: var(--color-ink);
  }
  .c-form-field--checkbox .c-form-field__label {
    font-weight: 400;
    font-size: var(--fs-body);
    color: inherit;
    padding-block-start: 0.1em;
  }
}
@layer components {
  /* Component: heading_accent. */
  .c-heading-accent {
    background: linear-gradient(var(--color-accent-2), var(--color-accent-2)) no-repeat 0 100%/100% 0.1em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding-block-end: 0.05em;
  }
  [data-section=book] .c-heading-accent {
    background-size: 100% 100%;
    padding-inline: 0.15em;
  }
}
@layer components {
  /* Component: event_card. Colour panels that alternate yellow / olive (fixed palette colours, as drawn). */
  .c-event-card {
    --card-bg: var(--color-yellow-deep);
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-7);
    border: 2px solid transparent;
    background: var(--card-bg);
    color: var(--color-rhino);
  }
  .c-event-card--olive {
    --card-bg: var(--color-olive);
  }
  .c-event-card__date,
  .c-event-card__place {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .c-event-card__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-navy);
  }
  .c-event-card__action {
    margin-block-start: var(--space-5);
  }
}
@layer components {
  /* Component: card. Numbered colour card; the colours cycle in card_carousel (fixed palette colours, as drawn).
     Cards in a row stretch to the same height; the button sits at the bottom. */
  .c-card {
    --card-bg: var(--color-yellow-deep);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-block-size: 100%;
    padding: var(--space-7) var(--space-7) var(--space-6);
    border: 2px solid transparent;
    background: var(--card-bg);
    color: var(--color-navy);
  }
  .c-card--olive {
    --card-bg: var(--color-olive);
  }
  .c-card--barley {
    --card-bg: var(--color-barley);
  }
  .c-card--sage {
    --card-bg: var(--color-sage);
  }
  .c-card--aqua {
    --card-bg: var(--color-aqua);
  }
  .c-card__number {
    font-size: var(--fs-lead);
  }
  .c-card__text {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-caption);
  }
  .c-card__action {
    margin-block-start: auto;
    align-self: flex-start;
  }
}
@layer components {
  /* Component: testimonial. */
  .c-testimonial {
    display: grid;
    gap: var(--space-5);
    margin: 0;
  }
  .c-testimonial__quote {
    display: grid;
    gap: var(--space-5);
    margin: 0;
  }
  .c-testimonial__headline {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-caption);
    text-transform: uppercase;
    color: var(--color-ink-strong);
  }
  .c-testimonial__headline::before {
    content: open-quote;
  }
  .c-testimonial__headline::after {
    content: close-quote;
  }
  .c-testimonial__text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .c-testimonial__text::before {
    content: open-quote;
  }
  .c-testimonial__text::after {
    content: close-quote;
  }
  .c-testimonial__cite {
    font-size: var(--fs-body-lg);
    color: var(--color-ink);
  } /* design: sage, but sage is 1.9:1 on cream; ink passes on every band (white on teal) */
}
@layer components {
  /* Component: video. Poster with a translucent play button; the player replaces the poster in the same 3:2 frame. */
  .c-video {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }
  .c-video__heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    text-transform: none;
  }
  .c-video__frame {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 3/2;
    container-type: inline-size;
  }
  .c-video__poster,
  .c-video__frame iframe {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border: 0;
  }
  .c-video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--color-white);
    font-size: clamp(3rem, 20cqi, 8rem); /* the play triangle is about a fifth of the poster width, as drawn */
    text-decoration: none;
  }
  .c-video__play .c-icon {
    opacity: 0.75;
    filter: drop-shadow(0 0 0.1em color-mix(in srgb, var(--color-rhino) 40%, transparent));
  }
  .c-video__play:focus-visible {
    outline-offset: -6px;
  }
  @media (hover: hover) {
    .c-video__play:hover .c-icon {
      opacity: 1;
    }
  }
  .c-video__transcript summary {
    cursor: pointer;
    min-block-size: var(--tap-target);
    display: flex;
    align-items: center;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  .c-video__transcript[open] summary {
    margin-block-end: var(--space-4);
  }
}
@layer components {
  /* Component: star_rating. Orange stars (non-text graphic: 3:1 on white); empty stars are the same shape, faded. */
  .c-star-rating {
    display: inline-flex;
    gap: 0.1em;
    color: var(--color-highlight);
    font-size: var(--fs-h4);
    line-height: 1;
  }
  .c-star-rating__star--empty {
    opacity: 0.3;
  }
}
@layer components {
  /* Component: article_card. Template: templates/components/article_card.html. Whole card clickable via the stretched title link. */
  .c-article-card {
    position: relative; /* anchors the stretched link */
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-block-size: 100%;
  }
  .c-article-card__img {
    inline-size: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
  }
  .c-article-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    flex: 1;
  }
  .c-article-card__phase {
    margin: 0;
  }
  .c-article-card__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    color: var(--color-ink);
  }
  .c-article-card__link {
    color: inherit;
    text-decoration: none;
  }
  .c-article-card__link::after { /* stretched link: covers the whole card */
    content: "";
    position: absolute;
    inset: 0;
  }
  .c-article-card__link:focus-visible {
    outline: none;
  }
  .c-article-card__link:focus-visible::after {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
  }
  .c-article-card__summary {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .c-article-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin-block-start: auto;
    padding-block-start: var(--space-2);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .c-article-card__meta > * + *::before {
    content: "· ";
  } /* middle dot between reading time and date */
  @media (hover: hover) {
    .c-article-card:hover .c-article-card__title {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
}
@layer includes {
  /* Include: page_title. The cream band continues from the header; page_header (if next) joins it without a gap. */
  .c-page-title {
    padding-block: var(--space-5) var(--space-7);
    background: var(--color-surface-2);
    text-align: center;
  }
  .c-page-title__heading {
    max-inline-size: 22ch;
    margin-inline: auto;
  }
}
@layer blocks {
  /* Block: section_heading. Sits --space-7 above the block it introduces (css-guide §4 "Space between blocks"). */
  .b-section-heading {
    margin-block: var(--space-9) var(--space-7);
  }
  .b-section-heading + [class] {
    margin-block-start: 0;
  }
  .b-section-heading__inner > * + * {
    margin-block-start: var(--space-5);
  }
  .b-section-heading__eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-section-heading__eyebrow + .b-section-heading__heading {
    color: var(--color-accent);
  }
  .b-section-heading__intro {
    max-inline-size: 54rem;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .b-section-heading--center {
    text-align: center;
  }
  .b-section-heading--center .b-section-heading__intro {
    margin-inline: auto;
  }
}
@layer blocks {
  /* Block: rich_text. Narrow centred column; element styles come from .u-rich-text (base/_typography.scss). */
  .b-rich-text {
    margin-block: var(--space-9);
  }
}
@layer blocks {
  /* Block: page_header. A three-column grid (margin · content · margin) lets the banner run edge to edge while
     the text and the cut-out line up with the content column. The cut-out overlaps the banner. */
  .b-page-header {
    display: grid;
    grid-template-columns: 1fr min(var(--page-width), var(--container)) 1fr;
    margin-block: 0 var(--space-9);
    background: var(--color-surface-2);
  }
  .b-page-header__text {
    grid-column: 2;
    grid-row: 1;
    padding-block: var(--space-6) var(--space-8);
  }
  .b-page-header__text > * + * {
    margin-block-start: var(--space-5);
  }
  .b-page-header__heading {
    color: var(--color-ink);
  }
  .b-page-header__intro {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .b-page-header__statement {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--color-ink);
    text-wrap: balance;
  }
  .b-page-header__statement::before {
    content: open-quote;
  }
  .b-page-header__statement::after {
    content: close-quote;
  }
  .b-page-header__banner {
    grid-column: 1/-1;
    grid-row: 2;
    inline-size: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  .b-page-header__cutout {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    position: relative;
    z-index: 1;
    inline-size: auto;
    block-size: min(36vw, 14rem); /* image only, no text: height sets its size, width follows; stays within the banner */
  }
  @media (min-width: 64rem) {
    .b-page-header__text {
      max-inline-size: calc(var(--container-narrow) + var(--space-9));
      padding-block: var(--space-8) var(--space-9);
      padding-inline-start: var(--space-9); /* text column indented from the container, as drawn (215 vs 97px) */
    }
    .b-page-header--has-cutout .b-page-header__text {
      max-inline-size: min(var(--container-narrow) + var(--space-9), 74%);
    }
    .b-page-header__banner {
      aspect-ratio: 1600/586;
    }
    .b-page-header__cutout {
      grid-row: 1/3;
      align-self: start;
      margin-block-start: var(--space-8);
      block-size: clamp(22rem, 37.8vw, 37.8rem); /* 605px @1600 */
    }
  }
}
@layer blocks {
  /* Block: pattern_strip. Decorative tiles with a fixed colour sequence (palette tokens: the design needs these exact colours).
     Mobile: 10 tiles per row, edge to edge (as the mobile design, and like the panels above it).
     Tablet and up: 22 tiles per row across the content width (the 1406px desktop design). */
  .b-pattern-strip {
    margin-block: 0;
  } /* touches the band or panel above, as drawn (css-guide §4 exception) */
  .b-pattern-strip:is(.l-panel + .b-pattern-strip) {
    margin-block-start: calc(var(--space-9) * -1);
  } /* cancels the panel's bottom margin */
  .b-pattern-strip__row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .b-pattern-strip__tile {
    aspect-ratio: 1;
    min-inline-size: 0;
  }
  /* Only the first 10 tiles show on mobile. */
  .b-pattern-strip__tile:nth-child(n+11) {
    display: none;
  }
  /* Row 1: six-tile cycle — dark teal, orange, yellow, barley, olive, sage. */
  .b-pattern-strip__tile:nth-child(6n+1) {
    background-color: var(--color-teal-darkest);
  }
  .b-pattern-strip__tile:nth-child(6n+2) {
    background-color: var(--color-orange);
  }
  .b-pattern-strip__tile:nth-child(6n+3) {
    background-color: var(--color-yellow);
  }
  .b-pattern-strip__tile:nth-child(6n+4) {
    background-color: var(--color-barley);
  }
  .b-pattern-strip__tile:nth-child(6n+5) {
    background-color: var(--color-olive);
  }
  .b-pattern-strip__tile:nth-child(6n) {
    background-color: var(--color-sage);
  }
  /* Row 2: the same cycle, offset. Tiles 1 and 2 are yellow and barley, then the cycle starts at dark teal. */
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(1) {
    background-color: var(--color-yellow);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(2) {
    background-color: var(--color-barley);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+3) {
    background-color: var(--color-teal-darkest);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+4) {
    background-color: var(--color-orange);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+5) {
    background-color: var(--color-yellow);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n) {
    background-color: var(--color-barley);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+7) {
    background-color: var(--color-olive);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+8) {
    background-color: var(--color-sage);
  }
  @media (min-width: 48rem) {
    .b-pattern-strip__inner {
      inline-size: min(var(--page-width), var(--container));
      margin-inline: auto;
    }
    .b-pattern-strip__row {
      grid-template-columns: repeat(22, minmax(0, 1fr));
    }
    .b-pattern-strip__tile:nth-child(n+11) {
      display: block;
    }
  }
}
@layer blocks {
  /* Block: benefits_row. Contained on the page background; sits one --space-9 from its neighbours. */
  .b-benefits-row {
    margin-block: var(--space-9);
  }
  .b-benefits-row__inner {
    display: grid;
    gap: var(--space-7);
    justify-items: center;
  }
  .b-benefits-row__heading {
    text-align: center;
  }
  .b-benefits-row__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
    inline-size: 100%;
  }
  .b-benefits-row__item {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--space-5);
    text-align: center;
  }
  .b-benefits-row__icon {
    inline-size: min(100%, 7rem);
    block-size: auto;
    aspect-ratio: 1;
    object-fit: contain;
  }
  .b-benefits-row__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    text-transform: uppercase;
  }
  .b-benefits-row__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-inline-size: 22ch;
  }
  @media (min-width: 64rem) {
    .b-benefits-row__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .b-benefits-row__text {
      max-inline-size: 26ch;
    }
  }
}
@layer blocks {
  /* Block: contact_methods. Cream panel (Panel layout mode, css-guide §4: edge to edge on phones, content width
     from 48rem). Rows stack on mobile and become label | value columns from 48rem. */
  .b-contact-methods {
    margin-block: var(--space-9);
    padding-block: var(--space-8);
    background: var(--color-surface-2);
  }
  @media (min-width: 48rem) {
    .b-contact-methods {
      padding-inline: var(--space-8);
    }
  }
  @media (min-width: 64rem) {
    .b-contact-methods {
      padding-inline: min(16.8%, 15rem);
    } /* 236px of 1406 at 1600 */
  }
  .b-contact-methods__list {
    display: grid;
    gap: var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .b-contact-methods__row {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
    align-items: center;
  }
  @media (min-width: 48rem) {
    .b-contact-methods__row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: var(--space-6);
    }
  }
  .b-contact-methods__label,
  .b-contact-methods__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    text-transform: uppercase;
    color: var(--color-accent);
    overflow-wrap: anywhere;
  }
  .b-contact-methods__value a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }
  @media (hover: hover) {
    .b-contact-methods__value a:hover {
      text-decoration-thickness: 2px;
    }
  }
}
@layer blocks {
  /* Block: cta_banner. Sits on an editable band (u-band), so the block sets no background and text colour follows the band.
     Mobile: text, then the figures below it. From 64rem the figures sit at the right of the same row, as drawn. */
  .b-cta-banner {
    margin-block: 0;
    padding-block: var(--space-8);
  }
  .b-cta-banner__inner {
    display: grid;
    gap: var(--space-6);
    justify-items: center;
  }
  .b-cta-banner__text {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    text-align: center;
  }
  .b-cta-banner__heading {
    text-wrap: balance;
  }
  .b-cta-banner__body {
    max-inline-size: 65ch;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .b-cta-banner__figures {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    inline-size: 40%;
  }
  .b-cta-banner__img {
    inline-size: 100%;
    block-size: auto;
  }
  @media (min-width: 64rem) {
    /* Text centred on the container; figures over the right-hand side of the same row. */
    .b-cta-banner__inner {
      grid-template-columns: minmax(0, 1fr);
    }
    .b-cta-banner__text,
    .b-cta-banner__figures {
      grid-area: 1/1;
    }
    .b-cta-banner__text {
      inline-size: 100%;
      max-inline-size: 37rem;
      justify-self: center;
    }
    .b-cta-banner__figures {
      inline-size: 22%;
      justify-self: end;
      align-self: center;
      margin-inline-end: var(--space-8);
    }
  }
}
@layer blocks {
  /* Block: text_image. Compact: image (pale framed_image) first, then text; from 48rem 1fr 1fr, image_side "end" swaps
     them with `order`. Rich: plain image, markup order body > media > action; mobile stacks in that order, from 48rem
     grid areas put the image and its accent button in one column and the text beside them, either side. */
  .b-text-image {
    margin-block: var(--space-9);
  }
  .b-text-image__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }
  .b-text-image__body {
    display: grid;
    gap: var(--space-5);
    align-content: center;
    min-inline-size: 0;
  }
  .b-text-image__text {
    max-inline-size: 26em;
  }
  .b-text-image__action {
    justify-self: start;
  }
  /* compact */
  .b-text-image__frame {
    inline-size: 100%;
  }
  .b-text-image__frame .c-framed-image__img {
    aspect-ratio: 690/452;
  }
  .b-text-image--compact .b-text-image__action {
    margin-block-start: var(--space-3);
  }
  /* Only paragraphs and ordered lists are set to body size; bullet lists (ul) deliberately keep the rich-text
     list style (display font, orange dots) from .u-rich-text. */
  .b-text-image--compact .b-text-image__text :is(p, ol) {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .b-text-image--compact .b-text-image__text > p + p {
    margin-block-start: var(--space-5);
  }
  /* rich */
  .b-text-image--rich .b-text-image__grid {
    grid-template-areas: "body" "media" "action";
  }
  .b-text-image--rich .b-text-image__body {
    grid-area: body;
  }
  .b-text-image--rich .b-text-image__media {
    grid-area: media;
  }
  .b-text-image--rich .b-text-image__action {
    grid-area: action;
  }
  .b-text-image--rich .b-text-image__heading {
    color: var(--color-ink-strong);
  }
  .b-text-image--rich .b-text-image__text {
    max-inline-size: none;
  }
  .b-text-image__img {
    inline-size: 100%;
    aspect-ratio: 565/380;
    object-fit: cover;
  }
  @media (min-width: 48rem) {
    .b-text-image__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-6);
    }
    .b-text-image--image-end .b-text-image__media {
      order: 2;
    }
    .b-text-image--compact .b-text-image__body {
      padding-inline: var(--space-7);
    }
    .b-text-image--rich .b-text-image__grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      grid-template-areas: "media body" "action body";
      column-gap: var(--space-7);
      row-gap: var(--space-6);
      align-items: start;
    }
    .b-text-image--rich .b-text-image__media {
      align-self: end;
    }
    .b-text-image--rich .b-text-image__body {
      align-self: center;
    }
    .b-text-image--rich.b-text-image--image-end .b-text-image__grid {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      grid-template-areas: "body media" "body action";
    }
  }
}
@layer blocks {
  /* Block: image_list (put a section_heading above it). Stacked on mobile; from 48rem with_benefits rows are photo (left) + text (right) on a subgrid;
     plain is one photo beside a stacked text column with the list button under it. The list is capped at
     about 1050px (the design's 340–1388 of 1600). */
  .b-image-list {
    margin-block: var(--space-9);
  }
  .b-image-list__list {
    display: grid;
    gap: var(--space-9) var(--space-6);
    max-inline-size: 66rem;
    margin-inline: auto;
  }
  .b-image-list__item {
    display: grid;
    gap: var(--space-6);
    align-content: start;
  }
  .b-image-list__img {
    inline-size: 100%;
    aspect-ratio: 448/370;
    object-fit: cover;
  }
  .b-image-list__entry {
    display: grid;
    gap: var(--space-5);
  }
  .b-image-list__body {
    display: grid;
    align-content: start;
    gap: var(--space-5);
  }
  .b-image-list__stack {
    gap: var(--space-8);
  }
  .b-image-list__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-ink);
  }
  .b-image-list__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-inline-size: 65ch;
  }
  .b-image-list__benefits {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-6);
  }
  .b-image-list__benefits-title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    color: var(--color-ink);
  }
  .b-image-list__check {
    border-block: 2px solid var(--color-ink);
  }
  .b-image-list__action,
  .b-image-list__list-action {
    justify-self: start;
    margin-block-start: var(--space-3);
  }
  @media (min-width: 48rem) {
    .b-image-list__list {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }
    .b-image-list__item {
      grid-column: 1/-1;
      grid-template-columns: subgrid;
      align-items: start;
    }
    .b-image-list__list--single {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      align-items: start;
    }
    .b-image-list__body {
      grid-column: 2;
    } /* stays in the text column when an item has no photo */
  }
}
@layer blocks {
  /* Block: accordion. Cream panel (.l-panel: edge to edge on phones, content width from 48rem). Stacked on mobile; from 64rem heading/intro/photo left (2fr)
     and the items right (3fr). The photo hangs below the panel on desktop, as drawn. Items are native <details>:
     state is styled from [open]. */
  .b-accordion {
    display: grid;
    gap: var(--space-7);
    margin-block: var(--space-9);
    padding-block: var(--space-7); /* side padding on mobile comes from .l-panel */
    background: var(--color-surface-2);
  }
  @media (min-width: 48rem) {
    .b-accordion {
      padding-inline: var(--space-7);
    }
  }
  .b-accordion__intro {
    display: grid;
    align-content: start;
    gap: var(--space-5);
  }
  .b-accordion__lead {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    max-inline-size: 26em;
  }
  .b-accordion__photo {
    margin-block-start: var(--space-5);
    max-inline-size: 75%;
  }
  .b-accordion__heading {
    color: var(--color-ink-strong);
  }
  .b-accordion__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 412/380;
    object-fit: cover;
  }
  .b-accordion__items {
    display: grid;
    align-content: start;
    gap: var(--space-4);
  }
  .b-accordion__item {
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  }
  .b-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-block-size: var(--tap-target);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
  }
  .b-accordion__summary::-webkit-details-marker {
    display: none;
  }
  .b-accordion__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    text-transform: uppercase;
    color: var(--color-ink-strong);
  }
  .b-accordion__chevron {
    font-size: var(--fs-h3);
    color: var(--color-ink-strong);
  }
  .b-accordion__item[open] .b-accordion__chevron {
    transform: rotate(180deg);
  }
  .b-accordion__body {
    padding: 0 var(--space-6) var(--space-6);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  @media (hover: hover) {
    .b-accordion__summary:hover .b-accordion__title {
      text-decoration: underline;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .b-accordion__chevron {
      transition: transform 0.2s ease;
    }
  }
  @media (min-width: 64rem) {
    .b-accordion {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--space-8);
    }
    .b-accordion__intro {
      grid-template-rows: auto auto 1fr;
    }
    .b-accordion__photo {
      align-self: end;
      margin-block-end: calc(var(--space-9) * -1); /* hangs below the cream panel */
    }
  }
}
@layer blocks {
  /* Block: book_promo. A panel (the root is .l-panel + .u-band, css-guide §4 "Panel"): edge to edge on phones,
     content width from 48rem; it sits on the page background and spaces itself with margin-block. No background set here:
     the band preset supplies it and re-points the text tokens.
     Mobile: statement, image, text stacked. From 48rem the image and text sit side by side. */
  .b-book-promo {
    margin-block: var(--space-9);
    padding-block: var(--space-8); /* l-panel supplies the side padding on mobile */
    display: grid;
    gap: var(--space-8);
  }
  .b-book-promo__statement {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-statement);
    letter-spacing: var(--ls-h2);
    color: var(--color-accent); /* sentence case, not capitals: a long statement in caps is hard to read (review 1) */
    text-wrap: balance;
  }
  .b-book-promo__row {
    display: grid;
    gap: var(--space-8);
    align-items: start;
  }
  .b-book-promo__body {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
  }
  .b-book-promo__heading { /* an h2 for the outline, styled as an H3 */
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: normal;
    text-transform: none;
  }
  .b-book-promo__text {
    max-inline-size: 65ch;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .b-book-promo__action {
    margin-block-start: var(--space-5);
  }
  @media (min-width: 48rem) {
    .b-book-promo {
      padding-inline: var(--space-7);
    }
    .b-book-promo__row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-7);
    }
  }
  @media (min-width: 64rem) {
    .b-book-promo {
      padding-inline: var(--space-9);
    }
    .b-book-promo__statement {
      font-size: var(--fs-h1);
      line-height: var(--lh-statement);
      letter-spacing: var(--ls-h1);
      max-inline-size: 90%;
      padding-inline-start: var(--space-9); /* statement is indented from the image edge, as drawn */
    }
    .b-book-promo__row {
      gap: var(--space-9);
    }
  }
  /* On a yellow band the yellow offset block would vanish. */
  .b-book-promo.u-band--yellow .c-framed-image {
    --frame-colour: var(--color-orange);
  }
}
@layer blocks {
  /* Block: speaker_promo. The root is a panel (.l-panel + .u-band, colour from the band preset): edge to edge on
     phones, content width from 48rem. Mobile: stacked, photo first. From 48rem: photo left (5fr), text right (4fr). */
  .b-speaker-promo {
    margin-block: var(--space-9);
    padding-block: var(--space-7);
  }
  .b-speaker-promo__header > * + * {
    margin-block-start: var(--space-6);
  }
  .b-speaker-promo__eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-speaker-promo__heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-speaker-promo__eyebrow + .b-speaker-promo__heading {
    color: var(--color-accent);
  }
  .b-speaker-promo__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
    margin-block-start: var(--space-7);
  }
  .b-speaker-promo__frame {
    inline-size: 100%;
  }
  .b-speaker-promo__frame .c-framed-image__img {
    aspect-ratio: 560/515;
  }
  .b-speaker-promo__body {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    min-inline-size: 0;
  }
  .b-speaker-promo__icon {
    font-size: calc(var(--fs-h2) * 2);
    color: var(--color-ink);
  }
  .b-speaker-promo__subheading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-ink);
  }
  .b-speaker-promo__text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--color-text);
    max-inline-size: 26em;
  }
  .b-speaker-promo__actions {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    margin-block-start: var(--space-3);
  }
  @media (min-width: 48rem) {
    .b-speaker-promo {
      padding-block: var(--space-8);
      padding-inline: var(--space-8);
    }
    .b-speaker-promo__heading {
      max-inline-size: 50%;
    }
    .b-speaker-promo__grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
      gap: var(--space-8);
    }
  }
  @media (min-width: 64rem) {
    .b-speaker-promo {
      padding-inline: var(--space-9);
    }
  }
}
@layer blocks {
  /* Block: image_carousel. Full-bleed scroll-snap row of photos on the cream band under the page title.
     Phones: one slide fills the width. From 48rem: slides of varying width (about 480-560px at 1600). Arrows sit at the screen edges. */
  .b-image-carousel {
    margin-block: 0;
    padding-block-end: var(--space-8);
    background: var(--color-surface-2);
  }
  .b-image-carousel__stage {
    position: relative;
  }
  .b-image-carousel__list {
    --scroller-gap: var(--space-2);
  } /* scroll behaviour: components/_scroller.scss */
  .b-image-carousel__slide {
    position: relative;
    flex: 0 0 100%;
  }
  .b-image-carousel__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
  }
  @media (min-width: 48rem) {
    .b-image-carousel__slide {
      flex-basis: 35%;
    }
    .b-image-carousel__slide:nth-child(3n+1) {
      flex-basis: 30%;
    }
    .b-image-carousel__image {
      aspect-ratio: 0.97;
    }
    .b-image-carousel__slide:nth-child(3n+1) .b-image-carousel__image {
      aspect-ratio: 0.83;
    }
  }
  /* Caption sits over the photo, top or bottom, centred. */
  .b-image-carousel__caption {
    position: absolute;
    inset-inline: var(--space-5);
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  .b-image-carousel__caption--top {
    inset-block-start: 20%;
  }
  .b-image-carousel__caption--bottom {
    inset-block-end: var(--space-6);
  }
  /* Round arrows: left and right screen edges, centred over the photos. Layout only; the buttons keep their component style. */
  .b-image-carousel__controls {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    translate: 0 -50%;
    justify-content: space-between;
    pointer-events: none;
  }
  .b-image-carousel__controls .c-carousel-controls__btn {
    pointer-events: auto;
  }
}
@layer blocks {
  /* Block: card_carousel. Row of cards that starts on the content's left edge and runs off the right edge (.l-bleed-end).
     Card width is worked out from the block's own width (cqi) so it matches the content width at every tier. */
  .b-card-carousel {
    --carousel-content: 90cqi; /* content width, same tiers as --page-width / --container */
    --carousel-gap: var(--space-6);
    --carousel-edge: calc((100% - min(var(--page-width), var(--container))) / 2);
    container-type: inline-size;
    margin-block: var(--space-9);
  }
  .b-card-carousel__list { /* scroll behaviour: components/_scroller.scss */
    --scroller-gap: var(--carousel-gap);
    padding-inline-end: var(--carousel-edge);
    scroll-padding-inline: var(--carousel-edge);
  }
  .b-card-carousel__item {
    display: flex;
    flex: 0 0 80cqi; /* phones: next card peeks in */
    scroll-snap-align: start;
  }
  .b-card-carousel__item > * {
    inline-size: 100%;
  }
  .b-card-carousel__controls {
    margin-block-start: var(--space-6);
  }
  @media (min-width: 48rem) {
    .b-card-carousel {
      --carousel-content: min(43.25rem, 100cqi);
    }
    .b-card-carousel__item {
      flex-basis: calc((var(--carousel-content) - var(--carousel-gap)) / 2);
    }
  }
  @media (min-width: 64rem) {
    .b-card-carousel {
      --carousel-content: min(88cqi, 87.875rem);
    }
    .b-card-carousel__item {
      flex-basis: calc((var(--carousel-content) - 3 * var(--carousel-gap)) / 4);
    } /* a quarter of the content: about 328px at 1600, four and a bit cards visible */
  }
}
@layer blocks {
  /* Block: event_list. Rounded light panel on top (figures overlap its bottom edge), then photo | event cards.
     Mobile: stacked, all cards shown. From 48rem: two columns, the card list scrolls vertically inside the photo's height. */
  .b-event-list {
    margin-block: var(--space-9);
  }
  .b-event-list__panel {
    position: relative;
    z-index: 1;
    padding-block: var(--space-8) var(--space-9);
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-2) 35%, var(--color-white));
    text-align: center;
  }
  .b-event-list__header > * + * {
    margin-block-start: var(--space-5);
  }
  .b-event-list__eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-event-list__heading {
    max-inline-size: 16em;
    margin-inline: auto;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-event-list__eyebrow + .b-event-list__heading {
    color: var(--color-accent);
  }
  .b-event-list__intro {
    max-inline-size: 36rem;
    margin-inline: auto;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .b-event-list__figures {
    position: absolute;
    inset-inline-end: 4%;
    inset-block-end: calc(var(--space-8) * -1);
    inline-size: clamp(8rem, 24%, 23rem);
    block-size: auto;
    pointer-events: none;
  }
  .b-event-list__body {
    display: grid;
    background: var(--color-surface-2);
  }
  .b-event-list__media {
    position: relative;
    margin: 0;
  }
  .b-event-list__img {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .b-event-list__caption {
    position: absolute;
    inset-inline-start: 16%;
    inset-block-end: 8%;
    max-inline-size: 9em;
  }
  .b-event-list__events {
    display: grid;
    align-content: start;
    gap: var(--space-6);
    min-inline-size: 0;
    inline-size: min(var(--page-width), var(--container));
    margin-inline: auto;
    padding-block: var(--space-7);
  }
  .b-event-list__list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .b-event-list__controls {
    display: none;
  }
  .b-event-list__all {
    justify-self: center;
  }
  /* phones: first three events only; the all-events link covers the rest */
  .b-event-list--has-all .b-event-list__item:nth-child(n+4) {
    display: none;
  } /* phones: three cards when the all-events link can reach the rest */
  .b-event-list__scroller {
    min-inline-size: 0;
  }
  .b-event-list__empty {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    padding: var(--space-7);
    border: 2px solid transparent;
    background: var(--color-surface-3);
  }
  .b-event-list__empty-text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--color-ink);
  }
  @media (min-width: 48rem) {
    .b-event-list__body {
      grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
      gap: var(--space-1);
      background: transparent;
    }
    .b-event-list__media {
      background: var(--color-surface-2);
      aspect-ratio: 11/9;
    }
    .b-event-list__img {
      position: absolute;
      inset: 0;
      block-size: auto;
      min-block-size: 100%;
      aspect-ratio: auto;
    }
    .b-event-list__events {
      inline-size: auto;
      margin-inline: 0;
      padding: var(--space-7) var(--space-6);
      grid-template-rows: minmax(0, 1fr) auto;
      background: var(--color-surface-2);
    }
    .b-event-list__scroller {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: var(--space-5);
      min-block-size: 0;
      contain: size; /* the photo sets the row height; the list scrolls inside it */
    }
    .b-event-list__list {
      align-self: stretch;
      max-inline-size: 28rem;
      margin-inline: auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      scroll-snap-type: y mandatory;
      scrollbar-width: none;
    }
    .b-event-list__list::-webkit-scrollbar {
      display: none;
    } /* own scroll rules (not c-scroller): it only scrolls from 48rem */
    .b-event-list__item {
      scroll-snap-align: start;
    }
    .b-event-list--has-all .b-event-list__item:nth-child(n+4) {
      display: list-item;
    }
    .b-event-list__controls {
      display: flex;
      padding-block-end: var(--space-7);
    }
    .b-event-list__empty {
      align-self: center;
      max-inline-size: 28rem;
      justify-self: center;
    }
  }
  @media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
    .b-event-list__list {
      scroll-behavior: smooth;
    }
  }
}
@layer blocks {
  /* Block: split_panels. Root is a panel (.l-panel) holding two bands (.u-band, colours from the presets).
     Mobile: stacked, bands edge to edge with content on the page margins. From 48rem: two equal columns, small gap. */
  .b-split-panels {
    display: grid;
    margin-block: var(--space-9);
    padding-inline: 0;
  }
  .b-split-panels__panel {
    padding-block: var(--space-7);
    padding-inline: calc((100% - var(--page-width)) / 2);
    min-inline-size: 0;
  }
  @media (min-width: 48rem) {
    .b-split-panels {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
    }
    .b-split-panels__panel {
      padding-block: var(--space-8);
      padding-inline: var(--space-7);
    }
  }
  @media (min-width: 64rem) {
    .b-split-panels__panel {
      padding-inline: var(--space-8);
    }
  }
}
@layer blocks {
  /* Block: form. Fields of a Wagtail form page on an editable band (contained). One column on phones;
     the first two short fields (name / email) sit side by side from 48rem. Template: templates/blocks/form.html.
     The shared input is pale on every band, so here it gets a dark border (≥3:1 on each band) and a fixed dark
     text colour (the fill is fixed too; on the teal band --color-ink-strong is white). */
  .b-form {
    margin-block: 0;
    padding-block: var(--space-8);
  }
  .b-form__heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .b-form__intro {
    margin-block-start: var(--space-5);
    max-inline-size: 65ch;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .b-form__form {
    display: grid;
    gap: var(--space-6);
    margin-block-start: var(--space-7);
  }
  .b-form__heading:only-child,
  .b-form__inner > .b-form__form:first-child {
    margin-block-start: 0;
  }
  .b-form__required-note {
    margin: 0;
    font-size: var(--fs-small);
  }
  .b-form__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .b-form__field {
    grid-column: 1/-1;
    align-content: start;
  } /* a field with an error message must not stretch its row-mate */
  @media (min-width: 48rem) {
    .b-form__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .b-form__field--half {
      grid-column: auto;
    }
  }
  /* Inputs: visible boundary on any band, readable text on the pale fill */
  .b-form .c-form-field__input {
    border-color: var(--color-ink-strong);
    color: var(--color-rhino);
  }
  .b-form .c-form-field__input::placeholder {
    color: var(--color-rhino);
  }
  /* Error state: thicker border and a bar beside the message, so it never relies on colour alone */
  .b-form .c-form-field:has([aria-invalid=true]) .c-form-field__input,
  .b-form .c-form-field__input:user-invalid {
    border-color: var(--color-ink-strong);
    border-width: var(--space-1);
    border-inline-start-width: var(--space-3);
  } /* heavy bar on the start edge: shows on every band, not by colour */
  .b-form .c-form-field__error {
    padding-inline-start: var(--space-3);
    border-inline-start: var(--space-1) solid currentColor;
  }
  /* Error summary (GOV.UK pattern): only in the page when there are errors; form.js moves focus to it */
  .b-form__summary {
    padding: var(--space-5);
    border: var(--space-1) solid var(--color-ink-strong);
    border-radius: var(--radius);
    color: var(--color-ink-strong);
  }
  .b-form__summary-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    text-transform: uppercase;
  }
  .b-form__summary-list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
    font-size: var(--fs-body);
  }
  .b-form__summary a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }
  @media (hover: hover) {
    .b-form__summary a:hover {
      text-decoration-thickness: 2px;
    }
  }
  /* Radio buttons and checkbox groups: fieldset + legend, options laid out like the single checkbox in form_field */
  .b-form__group {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }
  .b-form__legend {
    padding: 0;
    margin-block-end: var(--space-2);
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-ink-strong);
  }
  .b-form__option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-3);
    min-block-size: var(--tap-target);
  }
  .b-form__option-input {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    accent-color: var(--color-ink);
  }
  .b-form__actions {
    display: flex;
  }
  .b-form__privacy {
    margin: 0;
    max-inline-size: 65ch;
    font-size: var(--fs-small);
  }
  .b-form__privacy a {
    color: inherit;
    text-underline-offset: 0.15em;
  }
}
@layer blocks {
  /* Block: latest_articles (not designed; built from existing styles). Coloured band (u-band, white by default): padding inside,
     no outer margin. Heading with a plain "All articles" text link, then a grid of article cards: 1 column, 2 from 48rem, 3 from 64rem.
     The whole card is clickable through the stretched title link. */
  .b-latest-articles {
    margin-block: 0;
    padding-block: var(--space-8);
  }
  .b-latest-articles__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-block-end: var(--space-7);
  }
  .b-latest-articles__heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-latest-articles__all {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-block-size: var(--tap-target);
    font-size: var(--fs-button);
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .b-latest-articles__all-icon {
    flex: none;
  }
  .b-latest-articles__list {
    display: grid;
    gap: var(--space-7) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (hover: hover) {
    .b-latest-articles__all:hover {
      text-decoration-thickness: 2px;
    }
  }
  @media (min-width: 48rem) {
    .b-latest-articles__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .b-latest-articles__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}
@layer utilities {
  /* =========================================================================
     Band colours — the background presets an editor can choose for a block.
     Wagtail: a ChoiceBlock named `background` on the block, whose choice values are exactly
     these suffixes (docs/wagtail-folder-structure.md, "Shared choice sets → background").
     Template:  <section class="b-speaker-promo u-band u-band--{{ value.background|default:'yellow' }}">

     A preset is a small local theme, not just a fill: it sets the background and re-points the
     semantic colour tokens inside the band, so headings, text, links, buttons and the focus ring
     stay readable on whatever the editor picks. Blocks style themselves with the usual tokens
     (--color-ink, --color-text, …) and pick up the band automatically.

     Adding a preset: add a rule here, add it to the choice set in the docs, and check contrast
     (body text ≥ 4.5:1, focus ring ≥ 3:1 against --band-bg).
     Layer: utilities (loaded after blocks, so a chosen band wins over a block's default).
     ========================================================================= */
  .u-band {
    background: var(--band-bg);
    color: var(--color-text);
  }
  /* Light bands: dark text (contrast measured: navy 6.0–9.9:1, rhino 8.6–14.3:1) */
  .u-band--white {
    --band-bg: var(--color-white);
  }
  .u-band--cream {
    --band-bg: var(--color-cream);
  }
  .u-band--yellow {
    --band-bg: var(--color-yellow-deep);
    --color-focus: var(--color-ink-strong);
  } /* speaker panel; orange ring would be 1.8:1 */
  .u-band--aqua {
    --band-bg: var(--color-aqua);
    --color-focus: var(--color-ink-strong);
  } /* book promo panel */
  /* Dark bands: light text (white on teal 7.5:1) */
  .u-band--teal {
    --band-bg: var(--color-teal);
    --color-ink: var(--color-on-dark);
    --color-ink-strong: var(--color-on-dark);
    --color-text: var(--color-on-dark);
    --color-accent: var(--color-on-dark);
    --color-ink-contrast: var(--color-rhino); /* label colour on buttons whose background is --color-ink */
    --color-focus: var(--color-yellow);
  }
}
@layer utilities {
  /* Utility: u-duotone — the teal duotone look of the book page photos (book_hero, author_strip), made from an
     ordinary colour photo with CSS filters, so editors upload normal photos. On an <img> or on a wrapper of one. */
  :is(img.u-duotone, .u-duotone img) {
    filter: grayscale(1) sepia(0.55) hue-rotate(140deg) saturate(1.6) contrast(1.05) brightness(0.82);
  }
}
@layer includes {
  /* Include: header. Mobile/tablet: centred logo + Menu button. 64rem+: full nav, actions, rule below.
     The single-row desktop layout (nav · logo · actions, logo centred) needs the header to be about 85rem wide
     (two equal side columns each wide enough for the six nav links), so below that the logo sits on its own row
     above nav and actions. A container query on the header, not a new breakpoint (css-guide §4). */
  .c-site-header {
    background: var(--color-surface-2);
    container: site-header/inline-size;
  }
  .c-site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". logo menu";
    align-items: center;
    gap: var(--space-4) var(--space-6);
    padding-block: var(--space-4);
  }
  .c-site-header__logo {
    grid-area: logo;
    display: block;
    inline-size: min(26.6667vw, 7rem);
  } /* 112px @420, as the mobile design */
  .c-site-header__nav,
  .c-site-header__actions {
    display: none;
  }
  .c-site-header__menu-btn {
    grid-area: menu;
    justify-self: end;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-inline-size: var(--tap-target);
    min-block-size: var(--tap-target);
    padding: var(--space-1);
    border: 0;
    background: none;
    color: var(--color-ink);
    font-size: var(--fs-xsmall);
    cursor: pointer;
  }
  .c-site-header__menu-btn .c-icon {
    font-size: 1.75rem;
  }
  .c-site-header__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
  }
  .c-site-header__link,
  .c-site-header__contact {
    display: inline-block;
    font-weight: 600; /* semi-bold: the regular weight looked thin beside the headings (review 1) */
    padding-block: var(--space-2);
    color: var(--color-ink);
    text-decoration: none;
    text-underline-offset: 0.45em;
  }
  .c-site-header__link[aria-current=page],
  .c-site-header__contact[aria-current=page] {
    text-decoration: underline 3px var(--color-accent-2);
  }
  .c-site-header__actions {
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-7);
  }
  .c-site-header__cta {
    min-inline-size: 10.3125rem;
  } /* 165px: label left, arrow right, as drawn */
  @media (hover: hover) {
    .c-site-header__link:hover:not([aria-current]),
    .c-site-header__contact:hover:not([aria-current]) {
      text-decoration: underline 2px;
    }
  }
  @media (min-width: 64rem) {
    .c-site-header__inner {
      grid-template-columns: 1fr auto;
      grid-template-areas: "logo logo" "nav actions";
      padding-block: var(--space-5) var(--space-4);
      border-block-end: 3px solid var(--color-ink);
    }
    .c-site-header__logo {
      justify-self: center;
      inline-size: clamp(7rem, 11.1875vw, 11.1875rem);
    } /* 179px @1600 */
    .c-site-header__nav {
      grid-area: nav;
      display: block;
    }
    .c-site-header__actions {
      grid-area: actions;
      display: flex;
    }
    .c-site-header__menu-btn {
      display: none;
    }
  }
  @container site-header (min-width: 85rem) {
    .c-site-header__inner {
      grid-template-columns: 1fr auto 1fr;
      grid-template-areas: "nav logo actions";
    }
  }
}
@layer includes {
  /* Include: nav_mobile. Navy panel from the right edge, leaving a strip of the page visible (as drawn: 374 of 420px). */
  .c-nav-mobile {
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    inline-size: 89%;
    max-inline-size: 26rem;
    block-size: auto;
    max-block-size: none;
    padding: var(--space-5) var(--space-7) var(--space-8);
    border: 0;
    background: var(--color-ink);
    color: var(--color-on-dark);
    overflow-y: auto;
    --color-focus: var(--color-yellow);
  }
  .c-nav-mobile::backdrop {
    background: transparent;
  }
  .c-nav-mobile__top {
    display: flex;
    justify-content: flex-end;
  }
  .c-nav-mobile__close {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-inline-size: var(--tap-target);
    min-block-size: var(--tap-target);
    padding: var(--space-1);
    border: 0;
    background: none;
    color: inherit;
    font-size: var(--fs-xsmall);
    cursor: pointer;
  }
  .c-nav-mobile__close .c-icon {
    font-size: 2.25rem;
  }
  .c-nav-mobile__list {
    margin-block: var(--space-5) var(--space-7);
  }
  .c-nav-mobile__link {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-target);
    color: inherit;
    font-size: var(--fs-body);
    text-decoration: none;
    text-underline-offset: 0.45em;
  }
  .c-nav-mobile__link[aria-current=page] {
    text-decoration: underline 3px var(--color-yellow);
  }
  @media (prefers-reduced-motion: no-preference) {
    .c-nav-mobile {
      translate: 100% 0;
      transition: translate 0.25s ease-out, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
    }
    .c-nav-mobile:popover-open {
      translate: 0 0;
    }
    @starting-style {
      .c-nav-mobile:popover-open {
        translate: 100% 0;
      }
    }
  }
  @media (min-width: 64rem) {
    .c-nav-mobile:popover-open {
      display: none;
    } /* desktop nav takes over if the window is widened */
  }
}
@layer includes {
  /* Include: newsletter_signup. Yellow strip above the footer. */
  .c-newsletter {
    padding-block: var(--space-7) var(--space-8);
    background: var(--color-accent-2);
    text-align: center;
  }
  .c-newsletter__heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    text-transform: uppercase;
  }
  .c-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-4);
    margin-block-start: var(--space-6);
  }
  .c-newsletter__field {
    flex: 1 1 15rem;
    max-inline-size: 27.125rem;
  } /* 434px input, as drawn */
  .c-newsletter__submit {
    --btn-bg: var(--color-ink-strong);
  }
  .c-newsletter__note {
    flex-basis: 100%;
    font-size: var(--fs-xsmall);
    color: var(--color-ink-strong);
  }
}
@layer includes {
  /* Include: footer. Rhino band; logo tile, Pages and Contact columns, then legal line and back-to-top. */
  .c-site-footer {
    padding-block: var(--space-8) var(--space-6);
    background: var(--color-ink-strong);
    color: var(--color-on-dark);
    font-size: var(--fs-small);
    line-height: 2;
    --color-focus: var(--color-yellow);
  }
  .c-site-footer a:not(.c-back-to-top) {
    color: inherit;
    text-decoration: none;
  }
  .c-site-footer__inner {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-7) var(--space-7);
  }
  .c-site-footer__col {
    overflow-wrap: anywhere;
  }
  .c-site-footer__logo {
    grid-column: 1/-1;
    display: grid;
    place-items: center;
    inline-size: min(100%, 8.25rem); /* 132px tile */
    aspect-ratio: 1;
    padding: 8%;
    background: var(--color-surface-2);
  }
  .c-site-footer__heading {
    margin-block-end: var(--space-4);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
  }
  .c-site-footer__email {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .c-site-footer__address {
    margin-block-start: var(--space-5);
    font-style: normal;
  }
  .c-site-footer__bottom {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    margin-block-start: var(--space-8);
    font-size: var(--fs-xsmall);
    text-align: center;
  }
  .c-site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .c-site-footer__legal li:not(:last-child)::after {
    content: "";
    display: inline-block;
    block-size: 0.9em;
    margin-inline: 0.6em;
    border-inline-end: 1px solid currentColor;
    vertical-align: -0.1em;
  }
  @media (hover: hover) {
    .c-site-footer a:not(.c-back-to-top):hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
  @media (min-width: 48rem) {
    .c-site-footer__inner {
      grid-template-columns: max-content max-content minmax(0, 1fr);
      column-gap: var(--space-8);
    }
    .c-site-footer__logo {
      grid-column: auto;
    }
    .c-site-footer__bottom {
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      justify-items: start;
      text-align: start;
    }
    .c-site-footer__legal {
      justify-content: flex-start;
    }
  }
  @media (min-width: 64rem) {
    .c-site-footer__inner {
      grid-template-columns: 17% 17% 1fr;
      gap: var(--space-6) 0;
    } /* columns start where the design puts them */
  }
}
@layer pages {
  /* Page: KnowledgeIndexPage and taxonomy_index (templates/knowledge/). Not designed: built from existing components.
     Intro, filter chips, article card grid (1 column, 2 from 48rem, 3 from 64rem) and pagination. */
  .p-knowledge-index__inner {
    padding-block: var(--space-8) var(--space-9);
  }
  .p-knowledge-index__kicker {
    margin-block-end: var(--space-3);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .p-knowledge-index__description {
    max-inline-size: 46ch;
    margin: var(--space-5) auto 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .p-knowledge-index__intro {
    max-inline-size: var(--container-narrow);
    margin-block-end: var(--space-7);
  }
  /* Filter chips */
  .p-knowledge-index__filters {
    display: grid;
    gap: var(--space-6);
    margin-block-end: var(--space-8);
  }
  .p-knowledge-index__filter-label {
    margin-block-end: var(--space-3);
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-ink);
  }
  .p-knowledge-index__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .p-knowledge-index__chip,
  .p-knowledge-index__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-block-size: var(--tap-target);
    padding-inline: var(--space-4);
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-pill);
    font-size: var(--fs-body);
    line-height: 1;
    color: var(--color-ink);
    text-decoration: none;
  }
  .p-knowledge-index__chip[aria-current=page],
  .p-knowledge-index__page--current {
    background: var(--color-ink);
    color: var(--color-ink-contrast);
  }
  .p-knowledge-index__chip:focus-visible,
  .p-knowledge-index__page:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
  /* Card grid */
  .p-knowledge-index__grid {
    display: grid;
    gap: var(--space-8) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .p-knowledge-index__empty {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  /* Pagination */
  .p-knowledge-index__pagination {
    margin-block-start: var(--space-9);
  }
  .p-knowledge-index__pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .p-knowledge-index__page {
    min-inline-size: var(--tap-target);
    padding-inline: var(--space-3);
  }
  .p-knowledge-index__page--step {
    padding-inline: var(--space-4);
  }
  @media (hover: hover) {
    .p-knowledge-index__chip:hover {
      background: var(--color-surface-2);
    }
    .p-knowledge-index__page:is(a):hover {
      background: var(--color-surface-2);
    }
    .p-knowledge-index__chip[aria-current=page]:hover {
      background: var(--color-ink);
    }
  }
  @media (min-width: 48rem) {
    .p-knowledge-index__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .p-knowledge-index__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}
@layer pages {
  /* Page: ArticlePage. Header (phase and topic tags, title, date and reading time), optional illustration, body, "From the book" box.
     Not designed beyond the content-page body styles (06). */
  .p-article-page__header .c-page-title__heading {
    max-inline-size: 28ch;
  }
  .p-article-page__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
  }
  .p-article-page__phase,
  .p-article-page__topic {
    text-decoration: none;
  }
  .p-article-page__phase:focus-visible,
  .p-article-page__topic:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
  .p-article-page__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.5em;
    margin-block-start: var(--space-5);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
  }
  .p-article-page__meta > * + *::before {
    content: "· ";
  }
  .p-article-page__illustration {
    margin-block: var(--space-8) 0;
  }
  .p-article-page__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }
  /* "From the book: Chapter N" */
  .p-article-page__book {
    margin-block: var(--space-8) var(--space-9);
  }
  .p-article-page__book-box {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-7);
    border-radius: var(--radius-lg);
    background: var(--color-surface-3);
  }
  .p-article-page__book-label {
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .p-article-page__book-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-ink);
  }
  .p-article-page__book-text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .p-article-page__book-action {
    margin-block-start: var(--space-3);
  }
}
@layer pages {
  /* Page: VideoPage. Tags and date, then the video component and its summary in a narrow column. Not designed. */
  .p-video-page__inner {
    padding-block: var(--space-8) var(--space-9);
    display: grid;
    gap: var(--space-5);
  }
  .p-video-page__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .p-video-page__tags a {
    text-decoration: none;
  }
  .p-video-page__tags a:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
  .p-video-page__meta {
    font-size: var(--fs-small);
    line-height: var(--lh-body);
  }
}
@layer pages {
  /* Page: NewsletterIssuePage. Issue number and send date above the body. Not designed. */
  .p-newsletter-issue-page__inner {
    padding-block-start: var(--space-8);
  }
  .p-newsletter-issue-page__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: var(--lh-body);
    color: var(--color-ink);
  }
  .p-newsletter-issue-page__meta > * + *::before {
    content: "· ";
  }
}
@layer pages {
  /* Shared key-facts panel (EventPage, ProgrammePage). Colours come from the u-band--yellow preset (dark text on yellow). */
  .p-facts {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
    align-content: start;
    align-self: start;
    padding: var(--space-7);
    border-radius: var(--radius-lg);
  }
  .p-facts__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-ink);
  }
  .p-facts__list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
  }
  .p-facts__item dt {
    font-weight: 700;
  }
  .p-facts__item dd {
    margin: 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
}
@layer pages {
  /* Page: EventIndexPage. Grid of event cards, a plain past-events list, empty state. */
  .p-event-index__upcoming {
    padding-block: var(--space-7) var(--space-9);
  }
  .p-event-index__intro {
    max-inline-size: var(--container-narrow);
    margin-block-end: var(--space-7);
  }
  .p-event-index__heading {
    margin-block-end: var(--space-6);
  }
  .p-event-index__grid {
    display: grid;
    gap: var(--space-5);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .p-event-index__item {
    display: grid;
  }
  .p-event-index__empty {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    padding: var(--space-7);
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
  }
  .p-event-index__empty-text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--color-ink);
  }
  .p-event-index__past {
    padding-block: var(--space-7) var(--space-9);
    background: var(--color-surface-2);
  }
  .p-event-index__past-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .p-event-index__past-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding-block: var(--space-3);
    border-block-end: 1px solid currentColor;
  }
  .p-event-index__past-date {
    min-inline-size: 9em;
  }
  @media (min-width: 48rem) {
    .p-event-index__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 64rem) {
    .p-event-index__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
@layer pages {
  /* Page: EventPage. Key-facts panel (_facts.scss) first in the DOM: above the content on phones, right column from 64rem. */
  .p-event__layout {
    display: grid;
    gap: var(--space-7);
    padding-block: var(--space-7) var(--space-8);
  }
  .p-event__main {
    display: grid;
    gap: var(--space-7);
    align-content: start;
  }
  .p-event__section {
    display: grid;
    gap: var(--space-4);
  }
  .p-event__back {
    padding-block-end: var(--space-8);
  }
  .p-event__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--tap-target);
  }
  @media (min-width: 64rem) {
    .p-event__layout {
      grid-template-columns: 2fr 1fr;
      gap: var(--space-8);
    }
    .p-event__layout > .p-facts {
      grid-column: 2;
      grid-row: 1;
      position: sticky;
      inset-block-start: var(--space-5);
    }
    .p-event__main {
      grid-column: 1;
      grid-row: 1;
    }
  }
}
@layer pages {
  /* Page: ProgrammePage. Summary beside the key-facts panel (_facts.scss; stacked on phones), dates, then body blocks. */
  .p-programme__intro {
    padding-block: var(--space-7);
  }
  .p-programme__layout {
    display: grid;
    gap: var(--space-7);
  }
  .p-programme__dates {
    padding-block: var(--space-7);
  }
  .p-programme__dates-title {
    margin-block-end: var(--space-6);
  }
  .p-programme__dates-grid {
    display: grid;
    gap: var(--space-5);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  @media (min-width: 48rem) {
    .p-programme__dates-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 64rem) {
    .p-programme__layout {
      grid-template-columns: 2fr 1fr;
      gap: var(--space-8);
    }
  }
}
@layer pages {
  /* Page: search results. Templates: templates/search/search.html. Only layout no block covers: search form row, result list, pagination. */
  .p-search__content {
    margin-block: var(--space-8) var(--space-9);
  }
  .p-search__form {
    display: grid;
    gap: var(--space-5);
    align-items: end;
  }
  .p-search__count {
    margin-block-start: var(--space-8);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
  .p-search__list {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
  }
  .p-search__item {
    padding-block: var(--space-6);
  }
  .p-search__item:not(:last-child) {
    border-block-end: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  }
  .p-search__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
  }
  .p-search__path {
    margin-block-start: var(--space-1);
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
  }
  .p-search__snippet {
    margin-block-start: var(--space-3);
    max-inline-size: 65ch;
  }
  .p-search__prompt {
    margin-block-start: var(--space-7);
  }
  .p-search__empty > * + * {
    margin-block-start: var(--space-5);
  }
  .p-search__empty .p-search__count {
    margin-block-start: var(--space-8);
  }
  .p-search__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
  }
  .p-search__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-block-start: var(--space-7);
  }
  .p-search__page {
    margin: 0;
    font-size: var(--fs-small);
  }
  @media (min-width: 48rem) {
    .p-search__form {
      grid-template-columns: 1fr auto;
    }
  }
}
@layer pages {
  /* Page: 404 and 500. Templates: templates/404.html, templates/500.html (500 is standalone: no header, footer or page title). */
  .p-error__content {
    margin-block: var(--space-9);
    text-align: center;
  }
  .p-error__message {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .p-error__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
    margin-block-start: var(--space-7);
  }
  .p-error__logo {
    display: block;
    inline-size: 30%;
    min-inline-size: 7rem;
    max-inline-size: 11rem;
    margin: 0 auto var(--space-7);
  }
  .p-error__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }
  .p-error__title + .p-error__message {
    margin-block-start: var(--space-5);
  }
  .p-error--standalone {
    background: var(--color-surface-2);
  }
  .p-error__content--standalone {
    margin-block: 0;
    padding-block: var(--space-9);
    min-block-size: 100svh;
    display: grid;
    align-content: center;
  }
}
@layer pages {
  /* Page: thank-you pages after a form (contact and newsletter). Templates: templates/forms/*_landing.html. */
  .p-thanks__content {
    margin-block: var(--space-8) var(--space-9);
  }
  .p-thanks__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-block-start: var(--space-7);
  }
}
@layer pages {
  /* Page: newsletter sign-up. Template: templates/forms/newsletter_page.html. The form itself is the `form` block. */
  .p-newsletter__benefits {
    margin-block: var(--space-8) var(--space-8);
  }
  .p-newsletter__heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    margin-block-end: var(--space-5);
  }
  .p-newsletter__benefits + .b-form {
    margin-block-start: 0;
  }
}
@layer pages {
  /* Page: LegalPage (templates/pages/legal_page.html). Spacing around the "Last updated" line and the rich-text body. */
  .p-legal-page__updated {
    margin-block: var(--space-9) var(--space-7);
    font-size: var(--fs-small);
  }
  .p-legal-page__body {
    margin-block-end: var(--space-9);
  }
}