/* =========================================================================
   Hatha Yoga Space — redesign draft
   Single stylesheet, no framework. Colours are lifted from the current site.
   ========================================================================= */

@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; }

  body { -webkit-font-smoothing: antialiased; }

  img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select { font: inherit; color: inherit; }

  p, h1, h2, h3, h4 { overflow-wrap: break-word; }

  :target { scroll-margin-block-start: 6rem; }
}

/* --------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    /* Brand palette, taken from the existing stylesheets ------------------ */
    --cyan:        #1bb1dc;   /* primary — links, buttons, accents          */
    --cyan-deep:   #0a98c0;   /* hover                                      */
    --cyan-bright: #08c2f8;   /* highlight                                  */
    --teal-dark:   #065e77;   /* deep accent                                */
    --indigo:      #413e66;   /* headings                                   */
    --indigo-mid:  #535074;   /* body copy                                  */
    --indigo-soft: #a2a0bd;   /* muted copy                                 */
    --orange:      #f37b1a;   /* warm accent — section eyebrows, CTA        */
    --orange-warm: #f76d25;
    --wash:        #f5f8fd;   /* section background                          */
    --wash-blue:   #ebf1fa;
    --wash-cool:   #f8fcff;
    --sky:         #8dc2fa;

    /* Feature accents, from the three "why us" hearts */
    --accent-pink: #f058dc;
    --accent-peach:#ffb774;
    --accent-blue: #589af1;

    /* Semantic roles ------------------------------------------------------ */
    --bg:          #ffffff;
    --bg-alt:      var(--wash);
    --surface:     #ffffff;
    --text:        var(--indigo-mid);
    --heading:     var(--indigo);
    --muted:       var(--indigo-soft);
    --brand:       var(--cyan);
    --brand-ink:   var(--teal-dark);
    --rule:        color-mix(in oklab, var(--indigo) 12%, transparent);

    /* Fluid type — scales between 360px and 1400px viewports -------------- */
    --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
    --step-0:  clamp(1rem,    0.94rem + 0.28vw, 1.15rem);
    --step-1:  clamp(1.2rem,  1.09rem + 0.5vw,  1.5rem);
    --step-2:  clamp(1.44rem, 1.25rem + 0.85vw, 1.95rem);
    --step-3:  clamp(1.73rem, 1.42rem + 1.35vw, 2.53rem);
    --step-4:  clamp(2.07rem, 1.58rem + 2.1vw,  3.29rem);
    --step-5:  clamp(2.49rem, 1.7rem + 3.2vw,   4.28rem);

    /* Spacing */
    --space-2xs: 0.375rem;
    --space-xs:  0.75rem;
    --space-s:   1.125rem;
    --space-m:   1.75rem;
    --space-l:   2.75rem;
    --space-xl:  4.5rem;
    --space-2xl: 7rem;

    --measure: 68ch;
    --radius:  18px;
    --radius-s: 10px;
    --shadow: 0 1px 2px rgb(65 62 102 / 0.05),
              0 8px 24px -12px rgb(65 62 102 / 0.22);
    --shadow-lift: 0 2px 4px rgb(65 62 102 / 0.06),
                   0 18px 44px -18px rgb(65 62 102 / 0.3);

    --ease: cubic-bezier(0.4, 0.1, 0.2, 1);

    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg:      #14131f;
      --bg-alt:  #1b1a2a;
      --surface: #1f1e30;
      --text:    #c9c6e0;
      --heading: #f0eefb;
      --muted:   #8e8ab0;
      --brand:   var(--cyan-bright);
      --brand-ink: var(--cyan);
      --rule:    color-mix(in oklab, #ffffff 14%, transparent);
      --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
      --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.4), 0 18px 44px -18px rgb(0 0 0 / 0.7);
    }
  }
}

/* ----------------------------------------------------------------- base -- */
@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: var(--step-0);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    color: var(--heading);
    font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }

  p { text-wrap: pretty; }

  a {
    color: var(--brand-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.2s var(--ease);
  }
  a:hover { color: var(--orange); }

  :focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
  }

  ::selection { background: color-mix(in oklab, var(--cyan) 30%, transparent); }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
}

/* --------------------------------------------------------------- layout -- */
@layer layout {
  .shell {
    width: min(100% - 2.5rem, 1180px);
    margin-inline: auto;
  }

  .section {
    padding-block: var(--space-2xl);
    /* Skip rendering work for sections still far off screen. */
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }

  .section--wash { background: var(--bg-alt); }

  .stack > * + * { margin-block-start: var(--space-s); }

  .split {
    display: grid;
    gap: clamp(var(--space-m), 5vw, var(--space-xl));
    align-items: center;
  }
  @media (width >= 62rem) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--wide-text { grid-template-columns: 0.85fr 1fr; }
  }

  .grid-auto {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }
}

/* ----------------------------------------------------------- components -- */
@layer components {

  /* Skip link ---------------------------------------------------------- */
  .skip {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    translate: 0 -120%;
    transition: translate 0.2s var(--ease);
  }
  .skip:focus-visible { translate: 0 0; color: #fff; }

  /* Header -------------------------------------------------------------- */
  .topbar {
    background: var(--teal-dark);
    color: #eaf7fc;
    font-size: var(--step--1);
  }
  .topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-m);
    justify-content: flex-end;
    padding-block: 0.5rem;
  }
  .topbar a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 44px;
  }
  .topbar a:hover { color: var(--accent-peach); }
  .topbar__social { display: flex; gap: 0.35rem; margin-inline-start: auto; }
  @media (width >= 48rem) { .topbar__social { margin-inline-start: 0; } }
  .topbar__social a {
    width: 44px;
    justify-content: center;
  }

  .masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    border-block-end: 1px solid var(--rule);
    transition: box-shadow 0.25s var(--ease);
  }
  .masthead[data-stuck] { box-shadow: var(--shadow); }

  .masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: 0.6rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--heading);
  }
  .brand img { width: 52px; height: auto; border-radius: 50%; }
  .brand__name {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: var(--step-0);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .brand__name span { display: block; color: var(--brand); font-size: 0.78em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

  /* Navigation ---------------------------------------------------------- */
  .nav { display: flex; align-items: center; gap: var(--space-xs); }
  .nav__list {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
    padding: 0;
  }
  .nav__list a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-s);
    text-decoration: none;
    color: var(--text);
    font-size: var(--step--1);
    font-weight: 600;
    white-space: nowrap;
  }
  .nav__list a:hover,
  .nav__list a[aria-current="true"] {
    background: color-mix(in oklab, var(--brand) 12%, transparent);
    color: var(--brand-ink);
  }

  @media (width < 62rem) {
    /* Anchored to .masthead (which is sticky, so it is a positioned ancestor)
       and dropped directly beneath it.

       This deliberately avoids position:fixed. .masthead sets backdrop-filter,
       and a non-none backdrop-filter makes an element a containing block for
       fixed descendants — so a "fixed" panel here anchored to the header
       rather than the viewport and landed on top of the toggle button, hiding
       the very control needed to close it again. */
    .nav__list {
      position: absolute;
      inset: 100% 0 auto 0;
      max-height: min(70svh, calc(100svh - 100%));
      overflow-y: auto;
      overscroll-behavior: contain;
      flex-direction: column;
      align-items: stretch;
      gap: 0.25rem;
      padding: var(--space-s);
      background: var(--surface);
      border-block-end: 1px solid var(--rule);
      border-end-start-radius: var(--radius);
      border-end-end-radius: var(--radius);
      box-shadow: var(--shadow-lift);
      translate: 0 -0.5rem;
      opacity: 0;
      visibility: hidden;
      transition: translate 0.25s var(--ease), opacity 0.25s var(--ease),
                  visibility 0.25s;
    }
    .nav__list a { padding: 0.85rem 1rem; font-size: var(--step-0); }

    .nav[data-open] .nav__list {
      translate: 0 0;
      opacity: 1;
      visibility: visible;
    }

    /* Keep the toggle above the panel no matter what. */
    .nav__toggle { position: relative; z-index: 1; }
  }

  .nav__toggle {
    display: none;
    flex: none;          /* or the flex row squeezes it below 44px */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    cursor: pointer;
  }
  @media (width < 62rem) { .nav__toggle { display: inline-flex; } }
  .nav__toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
  .nav[data-open] .nav__toggle .icon-open { display: none; }
  .nav:not([data-open]) .nav__toggle .icon-close { display: none; }

  /* Buttons ------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0.7em 1.6em;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
                box-shadow 0.2s var(--ease), translate 0.2s var(--ease);
  }
  .btn:hover { translate: 0 -2px; }
  .btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
  .btn--primary:hover { background: var(--cyan-deep); color: #fff; }
  .btn--warm { background: var(--orange); color: #fff; box-shadow: var(--shadow); }
  .btn--warm:hover { background: var(--orange-warm); color: #fff; }
  .btn--ghost { border-color: currentColor; color: var(--brand-ink); }
  .btn--ghost:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
  .btn--on-image { background: rgb(255 255 255 / 0.16); color: #fff; border-color: rgb(255 255 255 / 0.5); backdrop-filter: blur(6px); }
  .btn--on-image:hover { background: #fff; color: var(--teal-dark); }

  /* Hero ---------------------------------------------------------------- */
  .hero { position: relative; background: var(--bg-alt); }

  .hero__viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* The slide sets the height; no viewport units, so no dead space. */
  }
  .hero__viewport::-webkit-scrollbar { display: none; }

  .hero__slide {
    position: relative;
    flex: 0 0 100%;
    /* Flex items default to min-width:auto, so the slide would refuse to
       shrink below the image's intrinsic width and push itself wider than
       the viewport. */
    min-width: 0;
    scroll-snap-align: center;
    display: grid;
  }
  .hero__slide > * { grid-area: 1 / 1; }

  .hero__media {
    /* Height is reserved from the ratio, so it is right before the image
       loads and identical on every slide. */
    aspect-ratio: 16 / 9;
    width: 100%;
    /* On a wide, short window 16/9 of the viewport width is taller than the
       window itself — at 2000px wide that is 1125px of hero — so the slide ran
       off the bottom of the screen and looked cut in half. Cap it. */
    max-height: min(78svh, 820px);
    position: relative;
    overflow: hidden;
  }
  @media (width < 48rem) {
    /* Slides share the height of the tallest one. The retreat slide stacks a
       picture above its text, so it is taller than a plain 4/5 photo — which
       left a band of bare background under the others. Set the tall shape on
       the slide instead, and let each photo fill whatever height results. */
    .hero__slide { min-height: min(125vw, 68svh); }

    .hero__slide:not(.hero__slide--artwork) .hero__media {
      aspect-ratio: auto;
      height: 100%;
      max-height: none;
    }
  }

  /* Pinned rather than width/height:100%. Once max-height clamps a box whose
     height came from aspect-ratio, a percentage height on the child resolves
     against the unclamped height and the image spills out of its frame. */
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__slide::after {
    content: "";
    grid-area: 1 / 1;
    background: linear-gradient(
      100deg,
      rgb(6 94 119 / 0.78) 0%,
      rgb(6 94 119 / 0.45) 42%,
      rgb(6 94 119 / 0.08) 72%
    );
  }

  .hero__body {
    position: relative;
    z-index: 1;
    align-self: center;
    display: grid;
    gap: var(--space-s);
    justify-items: start;
    /* This is the page-width rail; the text inside it is what gets narrowed.
       Putting a max-width here as well would win over the width and let
       margin-inline:auto centre the whole block. */
    width: min(100% - 2.5rem, 1180px);
    margin-inline: auto;
    padding-block: var(--space-l);
    color: #fff;
  }
  .hero__body > :where(h1, h2, p) { max-width: 34rem; }
  @media (width >= 62rem) {
    .hero__body { padding-inline-start: clamp(0rem, 2vw, 2rem); }
  }
  .hero__body h1, .hero__body h2 { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / 0.35); }
  .hero__body p {
    color: rgb(255 255 255 / 0.92);
    font-size: var(--step-0);
    max-width: 34rem;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
  }

  .hero__eyebrow {
    font-family: "Montserrat", sans-serif;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-peach);
  }

  .hero__controls {
    position: absolute;
    inset-block-end: var(--space-s);
    inset-inline: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }
  .hero__dot {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .hero__dot::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.5);
    transition: background-color 0.2s var(--ease), scale 0.2s var(--ease);
  }
  .hero__dot[aria-current]::before { background: #fff; scale: 1.5; }

  .hero__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.18);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s var(--ease);
  }
  .hero__arrow:hover { background: rgb(255 255 255 / 0.4); }
  .hero__arrow[data-dir="prev"] { inset-inline-start: clamp(0.5rem, 2vw, 1.5rem); }
  .hero__arrow[data-dir="next"] { inset-inline-end: clamp(0.5rem, 2vw, 1.5rem); }
  @media (width < 48rem) { .hero__arrow { display: none; } }

  /* Artwork slide -------------------------------------------------------- */
  /* The retreat banner already contains its own headline, dates and call to
     action, so this slide drops the gradient and the overlay text and simply
     shows the artwork whole. It keeps 16/9 at every width — the banner's
     lettering is part of the image, so cropping it to the taller mobile ratio
     would cut the words in half. */
  .hero__slide--artwork::after { content: none; }

  .hero__slide--artwork {
    align-content: center;
    background: linear-gradient(170deg, #b2967a 0%, #ae8e6e 45%, #896741 100%);
  }

  /* contain, not cover: the headline and dates are part of the picture, so
     any crop would slice through the words. Combined with the max-height cap
     above, the banner is always shown whole and is never cut off. */
  .hero__slide--artwork .hero__media { aspect-ratio: 16 / 9; }
  .hero__slide--artwork .hero__media img { object-fit: contain; }

  /* Desktop shows the artwork on its own — it already carries its headline,
     dates and call to action. On a phone those baked-in words get too small
     to read, so there the slide splits: picture on top, then the same
     eyebrow / heading / text / button treatment as every other slide. */
  .hero__slide--artwork .hero__body { display: none; }

  @media (width < 48rem) {
    .hero__slide--artwork {
      align-content: start;
      grid-template-rows: auto 1fr;
      background: linear-gradient(170deg, #a9855f 0%, #7d5a34 100%);
    }
    .hero__slide--artwork .hero__artwork-link,
    .hero__slide--artwork .hero__body { grid-area: auto; }

    /* Crop to the left of the artwork, where the sunrise and the ocean are,
       so the lettering is not shown at a size nobody can read. */
    .hero__slide--artwork .hero__media {
      aspect-ratio: 16 / 10;
      max-height: none;
    }
    .hero__slide--artwork .hero__media img {
      object-fit: cover;
      object-position: 22% center;
    }

    .hero__slide--artwork .hero__body {
      display: grid;
      align-self: start;
      padding-block: var(--space-m);
    }
  }

  .hero__artwork-link {
    grid-area: 1 / 1;
    display: block;
    text-decoration: none;
  }
  .hero__artwork-link:focus-visible { outline-offset: -4px; }

  /* Retreat -------------------------------------------------------------- */
  .retreat__banner { box-shadow: var(--shadow-lift); }

  .retreat__opening {
    font-size: var(--step-1);
    color: var(--heading);
  }

  .retreat__facts { align-self: start; }
  .retreat__facts h3 { font-size: var(--step-1); margin-block-end: var(--space-xs); }

  .facts { display: grid; gap: 0.55rem; margin-block-end: var(--space-s); }
  .facts > div {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    padding-block-end: 0.55rem;
    border-block-end: 1px solid var(--rule);
  }
  .facts > div:last-of-type { border-block-end: 0; padding-block-end: 0; }
  .facts dt { color: var(--muted); font-size: var(--step--1); font-weight: 600; }
  .facts dd { margin: 0; color: var(--heading); font-weight: 600; }

  .retreat__subhead {
    margin-block: var(--space-xl) var(--space-m);
    text-align: center;
  }

  .retreat__item { display: grid; gap: 0.35rem; align-content: start; }
  .retreat__icon { font-size: 1.9rem; line-height: 1; }
  .retreat__item h4 { font-size: var(--step-1); }

  .retreat__closing { margin-block-start: var(--space-xl); align-items: start; }

  .retreat__mantra {
    font-family: "Montserrat", sans-serif;
    font-size: var(--step-2);
    font-weight: 600;
    color: var(--orange);
    letter-spacing: 0.01em;
  }

  .retreat__cta { margin-block-start: var(--space-xl); }
  .retreat__cta h3 { color: #fff; font-size: var(--step-2); }
  .retreat__calling { font-style: italic; }

  /* Section headings ---------------------------------------------------- */
  .section__head {
    display: grid;
    gap: var(--space-xs);
    max-width: var(--measure);
    margin-block-end: var(--space-l);
  }
  .section__head--centre { margin-inline: auto; text-align: center; justify-items: center; }

  .eyebrow {
    font-family: "Montserrat", sans-serif;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
  }

  .lead { font-size: var(--step-1); color: var(--text); }

  /* Cards --------------------------------------------------------------- */
  .card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--space-m);
    box-shadow: var(--shadow);
    transition: box-shadow 0.25s var(--ease), translate 0.25s var(--ease);
  }
  .card:hover { box-shadow: var(--shadow-lift); translate: 0 -3px; }

  .card__icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    margin-block-end: var(--space-xs);
    background: color-mix(in oklab, var(--tint) 18%, transparent);
    color: var(--tint);
  }
  .card__icon svg { width: 22px; height: 22px; fill: currentColor; }

  /* Checklist ----------------------------------------------------------- */
  .checks { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
  .checks li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
  }
  .checks svg { width: 22px; height: 22px; margin-block-start: 0.15em; fill: var(--brand); }
  .checks b { color: var(--heading); }

  /* Figures ------------------------------------------------------------- */
  .figure {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
  }
  .figure img { width: 100%; height: auto; }
  .figure--tall img { aspect-ratio: 4 / 3; object-fit: cover; }

  /* Teachers ------------------------------------------------------------ */
  .teacher { text-align: center; }
  .teacher img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-block-end: var(--space-xs);
  }
  .teacher h3 { font-size: var(--step-1); }
  .teacher__links { display: flex; justify-content: center; gap: 0.25rem; margin-block-start: 0.35rem; }
  .teacher__links a {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--brand-ink);
  }
  .teacher__links a:hover { background: color-mix(in oklab, var(--brand) 14%, transparent); }
  .teacher__links svg { width: 18px; height: 18px; fill: currentColor; }

  /* Details / philosophy ------------------------------------------------ */
  .prose-toggle {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    padding: var(--space-s) var(--space-m);
  }
  .prose-toggle summary {
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: var(--step-1);
    color: var(--heading);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-height: 44px;
  }
  .prose-toggle summary::-webkit-details-marker { display: none; }
  .prose-toggle summary::after {
    content: "";
    flex: none;
    width: 12px; height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    transition: rotate 0.25s var(--ease);
  }
  .prose-toggle[open] summary::after { rotate: -135deg; }
  .prose-toggle__body { margin-block-start: var(--space-s); columns: 2; column-gap: var(--space-l); }
  .prose-toggle__body p { break-inside: avoid; margin-block-end: var(--space-s); }
  @media (width < 48rem) { .prose-toggle__body { columns: 1; } }

  /* Banner CTA ---------------------------------------------------------- */
  .banner {
    background:
      radial-gradient(120% 140% at 12% 0%, var(--cyan-bright) 0%, transparent 55%),
      linear-gradient(105deg, var(--cyan) 0%, var(--teal-dark) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: clamp(var(--space-m), 5vw, var(--space-xl));
    display: grid;
    gap: var(--space-m);
    align-items: center;
  }
  @media (width >= 48rem) { .banner { grid-template-columns: 1fr auto; } }
  .banner h2 { color: #fff; font-size: var(--step-3); }
  .banner p { color: rgb(255 255 255 / 0.9); }

  /* Retreat highlights -------------------------------------------------- */
  .highlights { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
  .highlights li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
  }
  .highlights svg { width: 20px; height: 20px; fill: var(--accent-pink); margin-block-start: 0.2em; }

  .notice {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    border-radius: 999px;
    background: color-mix(in oklab, var(--orange) 15%, transparent);
    color: var(--orange);
    font-weight: 600;
    font-size: var(--step--1);
  }

  /* Sponsors ------------------------------------------------------------ */
  .sponsor { text-align: center; display: grid; gap: 0.4rem; justify-items: center; }
  .sponsor img {
    width: auto;
    max-height: 92px;
    object-fit: contain;
    filter: saturate(0.15) opacity(0.75);
    transition: filter 0.25s var(--ease);
  }
  .sponsor:hover img { filter: none; }
  .sponsor h3 { font-size: var(--step-0); }
  .sponsor p { font-size: var(--step--1); color: var(--muted); }

  /* Form ---------------------------------------------------------------- */
  .field { display: grid; gap: 0.4rem; }
  .field label { font-size: var(--step--1); font-weight: 600; color: var(--heading); }
  .field :is(input, textarea) {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    /* 16px minimum stops iOS zooming the page on focus. */
    font-size: max(16px, var(--step-0));
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .field textarea { min-height: 8rem; resize: vertical; }
  .field :is(input, textarea):focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);
  }
  .field :is(input, textarea):user-invalid {
    border-color: #d5455f;
  }
  .field :is(input, textarea):user-invalid + .field__error { display: block; }
  .field__error { display: none; font-size: var(--step--1); color: #d5455f; }

  .form-status {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-s);
    font-size: var(--step--1);
    font-weight: 600;
  }
  .form-status[data-state="ok"] {
    background: color-mix(in oklab, var(--brand) 14%, transparent);
    color: var(--brand-ink);
  }
  .form-status[data-state="error"] {
    background: color-mix(in oklab, #d5455f 14%, transparent);
    color: #b3324a;
  }

  /* Footer -------------------------------------------------------------- */
  .footer {
    background: var(--bg-alt);
    border-block-start: 1px solid var(--rule);
    padding-block: var(--space-xl) var(--space-m);
  }
  .footer__grid { display: grid; gap: var(--space-l); }
  @media (width >= 62rem) { .footer__grid { grid-template-columns: 1fr 1fr; } }
  .footer__contact { display: grid; gap: 0.5rem; list-style: none; padding: 0; }
  .footer__contact a { display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px; text-decoration: none; }
  .footer__contact svg { width: 20px; height: 20px; fill: var(--brand); flex: none; }
  .footer__base {
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    justify-content: space-between;
    font-size: var(--step--1);
    color: var(--muted);
  }

  /* Back to top ---------------------------------------------------------- */
  /* Hidden at the top of the page, fades in once you have scrolled past the
     first screenful. visibility (rather than just opacity) keeps it out of the
     tab order and away from screen readers while it is hidden. */
  .to-top {
    position: fixed;
    inset-block-end: clamp(0.9rem, 2.5vw, 1.75rem);
    inset-inline-end: clamp(0.9rem, 2.5vw, 1.75rem);
    z-index: 40;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-lift);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    translate: 0 0.5rem;
    transition: opacity 0.25s var(--ease), translate 0.25s var(--ease),
                visibility 0.25s, background-color 0.2s var(--ease);
  }

  .to-top[data-visible] {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }

  .to-top:hover { background: var(--cyan-deep); }

  @media (prefers-reduced-motion: reduce) {
    .to-top { transition: opacity 0.25s var(--ease), visibility 0.25s; translate: none; }
  }

  /* Timetable dialog ---------------------------------------------------- */
  .sheet {
    width: min(100% - 2rem, 62rem);
    max-height: 85svh;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lift);
  }
  .sheet::backdrop { background: rgb(20 19 31 / 0.55); backdrop-filter: blur(4px); }
  .sheet__head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
    background: var(--surface);
    border-block-end: 1px solid var(--rule);
  }
  .sheet__body { padding: var(--space-m); overflow-y: auto; }
  .sheet__close {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: none;
    cursor: pointer;
  }
}

/* ------------------------------------------------------------ utilities -- */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .centre { text-align: center; }
  .measure { max-width: var(--measure); }
  .mx-auto { margin-inline: auto; }

  /* Gentle entrance, only when the visitor has not asked for less motion. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 26%;
      }
      @keyframes reveal {
        from { opacity: 0; translate: 0 22px; }
        to   { opacity: 1; translate: 0 0; }
      }
    }
  }
}