:root {
  --ink:      #1a1719;
  --greige:   #e3e2dd;
  --cream:    #f7f4ee;
  --petal:    #ffeaf7;
  --rose:     #d086a2;
  --rose-ink: #8e3a61;
  --star:     #c9789e;
  --pink:     #ea9ebb;
  --line:      rgba(26, 23, 25, 0.14);
  --line-rev:  rgba(247, 244, 238, 0.22);
  --cast:      rgba(142, 58, 97, 0.32);
  --rail-h: 70px;
  --band-h: 54px;
  --page:  clamp(20px, 5vw, 72px);
  --max:   1440px;
  --gap:   clamp(16px, 1.7vw, 24px);
  --room:  clamp(72px, 10vw, 152px);
  --d-xl: clamp(2.9rem, 7.6vw, 6rem);
  --d-l:  clamp(2.25rem, 5.4vw, 4.5rem);
  --d-m:  clamp(1.5rem, 2.8vw, 2.25rem);
  --n-xl: clamp(2.5rem, 5vw, 4rem);
  --body: clamp(1rem, 0.28vw + 0.94rem, 1.0625rem);
  --lede: clamp(1.25rem, 1.7vw, 1.625rem);
  --lab:  0.6875rem;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --arch: Archivo, "Helvetica Neue", Arial, sans-serif;
  --didone: "Bodoni Moda", Didot, "Bodoni MT", Georgia, serif;

  --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-inline-size: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
s { text-decoration-thickness: 1px; }
p { text-wrap: pretty; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 4px; }
.room--petal :focus-visible, .hero :focus-visible, .mya :focus-visible,
.review--ink :focus-visible, .foot :focus-visible,
.error :focus-visible { outline-color: var(--pink); }

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--ink); color: var(--cream);
  padding: 0.8rem 1.5rem; text-decoration: none;
  font-family: var(--arch); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: var(--lab); letter-spacing: 0.16em; text-transform: uppercase;

  &:focus { transform: translate(-50%, 0); }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.curtain {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--petal);
  overflow: hidden;
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);

  & > div {
    --period: 132px;
    position: absolute; inset: -20% -60%;
    background-image: repeating-linear-gradient(
      90deg,
      rgba(201, 120, 158, 0.17) 0 60px,
      rgba(201, 120, 158, 0)   60px var(--period));
    animation: glide 4.2s cubic-bezier(0.2, 0.75, 0.3, 1) infinite;
  }

  & > img {
    position: relative;
    width: min(520px, 62vw);
    animation: breathe 4.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  }

  &.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes glide {
  0%        { transform: translateX(0); }
  42%, 50%  { transform: translateX(var(--period)); }
  92%, 100% { transform: translateX(calc(var(--period) * 2)); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 0.94; }
  50%      { transform: scale(1.02); opacity: 1; }
}

.hero h1,
.head > h2,
.night h3,
.series h3,
.booked h3,
.stub > span:nth-of-type(3),
.submit > span:first-of-type,
.review blockquote + p,
.error h1 {
  font-family: var(--arch);
  font-variation-settings: "wdth" 62, "wght" 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.9;
  text-wrap: balance;
}

.label, .eyebrow, .head > p, .band > p, .stars, .foot > div > p:last-child {
  font-family: var(--arch);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: var(--lab);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}

.num {
  font-family: var(--didone);
  font-variation-settings: "opsz" 96, "wght" 400;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  font-size: var(--n-xl);
  line-height: 0.86;
  letter-spacing: -0.01em;

  &.num--sm {
    font-variation-settings: "opsz" 24, "wght" 500;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0;
  }
}

.spark {
  display: inline-block; flex: 0 0 auto;
  line-height: 1; color: var(--star);
  font-style: normal;

  &.spark--lg { font-size: 2rem; }
  &.spark--xl { font-size: 2.75rem; display: block; margin-bottom: 1rem; color: var(--pink); }
}

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1.05rem 1.9rem; text-decoration: none;
  font-family: var(--arch); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: var(--lab); letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--ink); color: var(--cream);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);

  &.btn--fill:hover { background: var(--rose-ink); border-color: var(--rose-ink); }

  &.btn--line {
    background: transparent; color: inherit;
    &:hover { background: var(--ink); color: var(--cream); }
  }

  .hero &.btn--line, .error &.btn--line {
    border-color: var(--line-rev); color: var(--cream);
    &:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  }
  .hero &.btn--fill, .error &.btn--fill {
    background: var(--pink); border-color: var(--pink); color: var(--ink);
    &:hover { background: var(--cream); border-color: var(--cream); }
  }
}

.room {
  padding: var(--room) var(--page);

  & > div { max-width: var(--max); margin: 0 auto; }

  &.room--greige { background: var(--greige); }
  &.room--cream  { background: var(--cream); }
  &.room--petal  { background: var(--petal); }

  & .head + p {
    max-width: 46ch;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    font-size: var(--lede);
    line-height: 1.4;
  }
}

.head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem var(--gap);
  padding-top: 1.25rem;
  border-top: 1px solid var(--star);
  margin-bottom: 2.5rem;

  & > h2 { font-size: var(--d-l); }
  & > p  { color: var(--rose-ink); text-align: right; }

  &.head--rev {
    border-top-color: var(--pink);
    & > p { color: var(--pink); }
  }
}

.rail {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--gap);
  min-height: var(--rail-h);
  padding: 16px var(--page);
  background: var(--ink); color: var(--cream);

  & > a:first-child {
    display: block; margin-right: auto;
    & img { width: clamp(112px, 13vw, 160px); filter: invert(1); }
  }

  & > nav {
    display: flex; gap: clamp(1rem, 2.4vw, 2.25rem);
    & a {
      color: var(--cream); opacity: 0.72;
      transition: opacity 0.25s var(--ease);
      &:hover { opacity: 1; }
    }
  }

  & > nav a, & > a:last-child {
    font-family: var(--arch); font-variation-settings: "wdth" 100, "wght" 700;
    font-size: var(--lab); letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none;
  }

  & > a:last-child {
    display: inline-flex; align-items: center;
    padding: 0.65rem 1.1rem; background: var(--pink); color: var(--ink);
    transition: background-color 0.25s var(--ease);
    &:hover { background: var(--cream); }
  }
}

.hero {
  background: var(--ink); color: var(--cream);
  padding: clamp(1.5rem, 3vw, 2.75rem) var(--page);
  display: flex; align-items: center;
  min-height: calc(100vh - var(--rail-h) - var(--band-h));
  min-height: calc(100svh - var(--rail-h) - var(--band-h));

  & > div {
    width: 100%; max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  }

  & h1 {
    font-size: var(--d-xl);
    line-height: 0.86;
    letter-spacing: -0.015em;
    margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);

    & span { display: block; }
    & span:nth-child(2) { color: var(--pink); }
  }

  & h1 + p {
    max-width: 42ch; font-size: var(--lede); line-height: 1.42;
    color: rgba(247, 244, 238, 0.86);
  }

  & > div > div > p:last-child {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    margin-top: clamp(1.35rem, 2.6vw, 1.9rem);
  }

  & figure img {
    width: 100%; aspect-ratio: 3 / 4;
    max-height: calc(100svh - var(--rail-h) - var(--band-h) - 2 * clamp(1.5rem, 3vw, 2.75rem));
    object-fit: cover; object-position: 50% 20%;
  }
}

.eyebrow { color: var(--pink); margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }

.hero figure, .review figure, .mya figure {
  position: relative;
  isolation: isolate;

  & img { position: relative; z-index: 1; }

  &::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    border: 1px solid var(--star);
    transform: translate(9px, 9px);
    pointer-events: none;
  }
}

.band {
  display: flex; align-items: center;
  min-height: var(--band-h);
  padding: 0.5rem var(--page);
  background: var(--rose); color: var(--ink);

  & > p {
    max-width: var(--max); margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: 0.5rem clamp(0.75rem, 2vw, 1.75rem);
  }
  & i { font-style: normal; color: var(--cream); font-size: 0.8em; }
}

.nights { border-top: 1px solid var(--line); }

/* The series block normally sits between the class list and the details,
   and both rules read correctly. With the bundle withdrawn — a class has
   started, or one is full — they become adjacent and stack into a double
   line. The sibling selector only fires in that case. */
.nights + .where { border-top: 0; padding-top: 0; }

/* A class that has already run stays listed — the series should read as a
   whole programme — but it is plainly no longer on sale. */
.night.is-past { opacity: 0.45; }

.night {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--line);

  & > p:first-child { color: var(--rose-ink); }

  & h3 { font-size: var(--d-m); margin-bottom: 0.45rem; }
  & > div > p { max-width: 44ch; color: rgba(26, 23, 25, 0.72); }

  & > p:last-child {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem;
    & .label { color: var(--rose-ink); }
  }
}

/* The prep list, without its big date: the title carries the row and the
   day sits with the price, so eight classes cost a quarter of the height. */
.nights--tight .night {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 1.25rem;
  padding: 0.85rem 0;

  /* The phone layout below lays the full rows out by name, around a date
     cell this list does not have — so the names go too, on the row and on
     both of its children. Two columns here, at every width. */
  grid-template-areas: none;

  & h3 { font-size: 1.3rem; margin-bottom: 0.2rem; }

  & > div {
    grid-area: auto;
    & > p { max-width: 38ch; font-size: 0.92rem; line-height: 1.45; }
  }

  & > p:last-child {
    grid-area: auto;
    flex-direction: column; align-items: flex-end; justify-content: flex-start;
    gap: 0.2rem;
  }
}

/* Two abreast once there are more than four, each column its own run of
   rules. */
.nights--two {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

@media (max-width: 760px) {
  .nights--two { grid-template-columns: minmax(0, 1fr); }
}

.series {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--petal);
  box-shadow: 10px 10px 0 0 var(--cast);

  & > div { flex: 1 1 16rem; }
  & h3 { font-size: var(--d-m); margin-bottom: 0.35rem; }
  & > div > p { color: rgba(26, 23, 25, 0.72); }

  & > p {
    display: flex; align-items: baseline; gap: 0.6rem;
    color: var(--rose-ink);
    /* The Didone at display size needs its own room — 0.86 clips the $. */
    line-height: 1.05;
    & .num { line-height: 1.05; }
    & s { color: rgba(26, 23, 25, 0.62); }
  }
}

.where {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 2rem var(--gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem; border-top: 1px solid var(--line);

  & dt { color: var(--rose-ink); margin-bottom: 0.6rem; }
  & dd { max-width: 34ch; }
  & a { text-underline-offset: 0.25em; }
}

.reviews .room--cream { padding-bottom: clamp(2rem, 4vw, 3rem); }

.review {
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--page);

  & > div {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  }

  & figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

  & > div > div { display: flex; flex-direction: column; min-height: 100%; }

  & blockquote p { max-width: 56ch; font-size: 1.0625rem; line-height: 1.62; }

  & blockquote + p {
    margin-top: auto; padding-top: 1.5rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--rose-ink);
  }

  &.review--greige { background: var(--greige); }

  &.review--ink {
    background: var(--ink); color: var(--cream);
    & figure::after { border-color: var(--pink); }
    & .stars { color: var(--pink); }
    & blockquote p { color: rgba(247, 244, 238, 0.88); }
    & blockquote + p { color: var(--pink); }
  }

  &.review--rose {
    background: var(--rose);
    & .stars { color: var(--ink); }
    & blockquote + p { color: var(--ink); }
  }
}

.stars { color: var(--rose-ink); font-size: 0.95rem; letter-spacing: 0.3em; margin-bottom: 1.1rem; }

/* ── Reviews carousel ─────────────────────────────────────────────────────
   Native scroll-snap does the sliding, so a swipe on a phone is the
   phone's own swipe, and it still works if the script never loads. The
   script adds the names and arrows above it. Each review keeps its own
   ground colour; the track only lines them up side by side. */
.reviews .room--cream .head { margin-bottom: 1.5rem; }

.review-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
}

/* The booking ticket's tabs, on cream: the same rule slides in under
   whichever review is showing. */
.review-picks {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;

  & button {
    position: relative; padding: 0.35rem 0; cursor: pointer;
    background: none; border: 0; border-radius: 0;
    font-family: var(--arch); font-variation-settings: "wdth" 88, "wght" 600;
    font-size: var(--lab); letter-spacing: 0.13em; text-transform: uppercase;
    color: rgba(26, 23, 25, 0.5);
    transition: color 0.22s var(--ease);

    &::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
      background: var(--rose-ink);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.28s var(--ease);
    }

    &:hover, &[aria-current="true"] { color: var(--ink); }
    &[aria-current="true"]::after { transform: scaleX(1); }
    &:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 4px; }
  }
}

.review-arrows { display: flex; gap: 0.4rem; }
.review-arrow { width: 2.6rem; height: 2.6rem; }

/* Pause and play, drawn rather than typed: the characters for them turn
   into colour emoji on some phones. Two bars while playing, a triangle
   while paused — each shows what pressing it will do. */
.review-play {
  display: grid; place-items: center;

  &::before {
    content: ""; width: 0.6rem; height: 0.75rem;
    border-inline: 2px solid currentColor;
  }

  &.is-paused::before {
    width: 0; height: 0;
    border-inline: 0;
    border-left: 0.6rem solid currentColor;
    border-block: 0.38rem solid transparent;
  }
}

.review-track {
  display: flex;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  /* Rose-ink reads on all three grounds — greige, rose and ink. */
  &:focus-visible { outline: 3px solid var(--rose-ink); outline-offset: -3px; }

  /* With the names and arrows showing, the scrollbar would only add a
     stripe under the reviews. Without the script it stays, as the one
     sign there is more to see. */
  &.is-enhanced {
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }

  & > .review { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
}

@media print {
  .review-bar { display: none; }
  .review-track { display: block; overflow: visible; }
}

.mya {
  background: var(--ink); color: var(--cream);
  padding: var(--room) var(--page);

  & > div {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch;
  }

  & figure {
    min-height: 26rem;
    &::after { border-color: var(--pink); }
    & img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: 50% 30%;
    }
  }

  & .head + p {
    font-family: var(--sans);
    font-size: var(--lede); line-height: 1.32; font-weight: 500;
    color: var(--pink); margin-bottom: 1.1rem; max-width: 26ch;
    text-wrap: balance;
  }

  & .head + p + p { max-width: 48ch; color: rgba(247, 244, 238, 0.86); }

  & ul {
    margin-top: clamp(2rem, 4vw, 2.75rem);
    border-top: 1px solid var(--line-rev);

    & .spark { color: var(--pink); }

    & li {
      display: flex; align-items: center; gap: 0.9rem;
      padding: 1.1rem 0; border-bottom: 1px solid var(--line-rev);
    }

    & a {
      text-decoration: none;
      background-image: linear-gradient(var(--pink), var(--pink));
      background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
      transition: background-size 0.35s var(--ease);
      &:hover { background-size: 100% 1px; }
    }
  }

  & ul + p { margin-top: 1.5rem; color: var(--pink); }
}

.ticket {
  --pad: clamp(1.25rem, 3.5vw, 2.5rem);
  max-width: 44rem;
  background: var(--cream);
  box-shadow: 12px 12px 0 0 var(--cast);

  & > div:first-child {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem;
    padding: 1rem var(--pad); background: var(--ink); color: var(--cream);

    & .label { color: var(--cream); }
    & .label:last-child { color: var(--pink); }
  }

  & form > div:first-child { padding: 2rem var(--pad); }

  & form > p:not(.visually-hidden) {
    padding: 0 var(--pad) var(--pad);
    color: var(--rose-ink);
    &:empty { padding: 0; }

    /* The status line hangs beneath the button and wants its room below.
       The fine print closes the ticket, so it takes the same total space
       split evenly — same height, line centred. */
    &.fine { padding-block: calc(var(--pad) / 2); }
  }
}


.field {
  display: block; margin-bottom: 2rem;
  &:last-child { margin-bottom: 0; }

  & .label { display: block; color: var(--rose-ink); margin-bottom: 0.4rem; }

  & input {
    display: block; width: 100%; padding: 0.2rem 0 0.45rem;
    background: transparent; border: 0; border-bottom: 2px solid var(--ink);
    border-radius: 0; -webkit-appearance: none; appearance: none;
    font-family: var(--arch); font-variation-settings: "wdth" 88, "wght" 600;
    font-size: 1.125rem;

    &::placeholder {
      color: rgba(26, 23, 25, 0.4);
      font-variation-settings: "wdth" 88, "wght" 400;
    }
    &[aria-invalid="true"] { border-bottom-color: var(--rose-ink); }
  }
}

.err {
  display: block; margin-top: 0.5rem; color: var(--rose-ink);
  font-family: var(--arch); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: var(--lab); letter-spacing: 0.1em; text-transform: uppercase;
}

.stubs {
  padding: 2rem var(--pad);

  & > legend {
    float: left; width: 100%;
    margin: 0 0 0.85rem; padding: 0;
    color: var(--rose-ink);
  }
  & > legend + * { clear: both; }
}

.stub {
  display: grid; grid-template-columns: 1.35rem 2.75rem minmax(0, 1fr) auto;
  align-items: center; gap: 0.9rem;
  padding: 0.95rem var(--pad);
  margin-inline: calc(var(--pad) * -1);
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.22s var(--ease);

  &:last-of-type { border-bottom: 1px solid var(--line); }

  & input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }

  & > span:nth-of-type(1) {
    width: 1.35rem; height: 1.35rem; border: 2px solid var(--ink); position: relative;
    &::after {
      content: ""; position: absolute; inset: 3px; background: var(--ink);
      transform: scale(0); transition: transform 0.2s var(--ease);
    }
  }
  & > span:nth-of-type(2) {
    color: var(--rose-ink);
    &.spark { font-size: 1.35rem; color: var(--star); }
  }
  & > span:nth-of-type(3) {
    font-size: 1.0625rem;
    & em {
      display: block; font-style: normal;
      font-variation-settings: "wdth" 100, "wght" 700;
      font-size: var(--lab); letter-spacing: 0.14em; color: var(--rose-ink);
      margin-top: 0.2rem;
    }
  }
  & > span:nth-of-type(4) { color: var(--ink); }

  &:hover { background: rgba(208, 134, 162, 0.12); }
  &:has(:focus-visible) { outline: 2px solid var(--rose-ink); outline-offset: -2px; }

  &.is-on {
    background: var(--petal);
    & > span:nth-of-type(1)::after { transform: scale(1); }
    & > span:nth-of-type(4) { color: var(--rose-ink); }
  }
  &.is-off { opacity: 0.42; }
}

/* ── Booking mode ─────────────────────────────────────────────────────
   Lives in the ticket's dark header, so it reads as a ticket type rather
   than a form control. Radios, not tabs: arrow-key navigation and the
   checked state come free and correct. */
.modes {
  display: flex; gap: 1.4rem;
  margin: 0; padding: 0; border: 0;

  & input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }

  & label {
    position: relative; cursor: pointer; padding-bottom: 0.25rem;
    font-family: var(--arch); font-variation-settings: "wdth" 88, "wght" 600;
    font-size: var(--lab); letter-spacing: 0.13em; text-transform: uppercase;
    color: rgba(247, 244, 238, 0.55);
    transition: color 0.22s var(--ease);

    &::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
      background: var(--pink);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.28s var(--ease);
    }

    &:hover { color: var(--cream); }
    &:has(:checked) { color: var(--cream); }
    &:has(:checked)::after { transform: scaleX(1); }
    &:has(:focus-visible) { outline: 2px solid var(--pink); outline-offset: 4px; }
  }
}

/* ── 1:1 picker ───────────────────────────────────────────────────────── */
.solo {
  padding: 2rem var(--pad);

  & > .label { display: block; color: var(--rose-ink); margin-bottom: 0.7rem; }
  & > .daystrip { margin-bottom: 1.8rem; }
}

.daystrip {
  display: flex; align-items: stretch; gap: 0.4rem;
}

/* Horizontal scroll is easy to miss with a mouse, so the strip says so
   twice: arrows to click, and a track showing how much more there is. */
.dayscroll, .review-arrow {
  flex: 0 0 auto; width: 2rem;
  border: 1px solid var(--line); border-radius: 0; background: transparent;
  color: var(--ink); cursor: pointer; line-height: 1; font-size: 1.15rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
              color 0.2s var(--ease), opacity 0.2s var(--ease);

  &:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--cream); }
  &:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 2px; }
  &:disabled { opacity: 0.22; cursor: default; }
}

.days {
  --fade: 2.25rem;
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 0.4rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;

  /* Hidden deliberately. macOS overlays the scrollbar and reserves no
     space, Windows reserves ~15px — leaving it visible makes the strip a
     different height on each. The arrows and the fade carry the message. */
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }

  /* Days dissolve at whichever edge has more behind it. */
  &.can-r:not(.can-l) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
  }
  &.can-l:not(.can-r) {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
            mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
  }
  &.can-l.can-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade),
                                        #000 calc(100% - var(--fade)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--fade),
                                        #000 calc(100% - var(--fade)), transparent);
  }
}

.day {
  flex: 0 0 auto; scroll-snap-align: start;
  display: grid; justify-items: center; gap: 0.15rem;
  min-width: 3.6rem; padding: 0.6rem 0.55rem;
  border: 1px solid var(--line); border-radius: 0; background: transparent;
  color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
              color 0.2s var(--ease);

  & .label { color: var(--rose-ink); transition: color 0.2s var(--ease); }
  & .num { font-size: 1.4rem; line-height: 1; }

  &:hover:not(:disabled) { border-color: var(--ink); }
  &:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 2px; }

  &[aria-pressed="true"] {
    background: var(--ink); border-color: var(--ink); color: var(--cream);
    & .label { color: var(--pink); }
  }

  &:disabled { opacity: 0.3; cursor: not-allowed; }
}

.times {
  display: grid; gap: 0.4rem;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
}

.time {
  padding: 0.78rem 0.5rem;
  border: 1px solid var(--line); border-radius: 0; background: transparent;
  font-family: var(--arch); font-variation-settings: "wdth" 92, "wght" 600;
  font-size: 0.92rem; color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
              color 0.2s var(--ease);

  &:hover:not(:disabled) { border-color: var(--ink); }
  &:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 2px; }
  &[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }

  /* Taken, not hidden: an empty grid looks broken, a struck-through one
     reads as "she is busy then". */
  &:disabled { opacity: 0.28; cursor: not-allowed; text-decoration: line-through; }
}

.solo-note {
  margin: 1.3rem 0 0; font-size: 0.92rem; color: rgba(26, 23, 25, 0.62);
  &:empty { display: none; }
}

/* ── Online coaching ──────────────────────────────────────────────────── */
/* Nothing to pick, so the panel reads rather than asks: what it is, what
   it costs every month, and how to stop. */
.coach {
  padding: 2rem var(--pad);

  & > p:first-child { max-width: 44ch; }
  & .fine { margin-top: 1rem; max-width: 46ch; }
}

.coach-rate {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin-top: 1.1rem;

  & .num { font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1; color: var(--rose-ink); }
  & .label { color: rgba(26, 23, 25, 0.62); }
}

.total {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.5rem var(--pad);
  background: var(--greige);

  & .label { color: var(--rose-ink); }

  & > p:last-child {
    display: flex; align-items: baseline; gap: 0.55rem; color: var(--rose-ink);
    line-height: 1.05;
    & .num { line-height: 1.05; }
    & s { color: rgba(26, 23, 25, 0.62); }
  }
}

.submit {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.35rem var(--pad);
  background: var(--ink); color: var(--cream);
  border: 0; border-radius: 0; cursor: pointer; text-align: left;
  transition: background-color 0.3s var(--ease);

  & > span { font-size: 1.25rem; }
  & > span:last-of-type { transition: transform 0.3s var(--ease); }

  &:hover {
    background: var(--rose-ink);
    & > span:last-of-type { transform: translateX(5px); }
  }

  &.is-quiet { background: rgba(26, 23, 25, 0.55); }
}

.booked {
  padding: var(--pad);

  & h3 { font-size: clamp(2.25rem, 6vw, 3.75rem); margin-bottom: 1rem; }
  & > p { max-width: 40ch; margin-bottom: 1.75rem; }

  & dl {
    border-top: 2px solid var(--ink);
    & > div {
      display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
      padding: 0.85rem 0; border-bottom: 1px solid var(--line);
    }
    & dt { color: var(--rose-ink); }
    & dd { text-align: right; max-width: 60%; }
  }
}

.foot {
  background: var(--ink); color: var(--cream);
  padding: var(--room) var(--page) 2.5rem;

  & > div { max-width: var(--max); margin: 0 auto; }

  & img {
    width: clamp(190px, 26vw, 330px);
    filter: invert(1);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }

  & > div > div {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 2.25rem var(--gap); padding-bottom: 2.75rem;

    & .label { display: block; color: var(--pink); margin-bottom: 0.6rem; }
    & p { line-height: 1.7; }
    & a { text-underline-offset: 0.25em; }
  }

  & > div > p:last-child {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem;
    padding-top: 1.6rem; border-top: 1px solid var(--line-rev);
    color: rgba(247, 244, 238, 0.6);
  }
}

.error {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.9rem; text-align: center;
  padding: var(--room) var(--page);
  background: var(--ink); color: var(--cream);

  & img {
    width: clamp(170px, 26vw, 280px);
    filter: invert(1);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* The status numeral on 403/404 — a direct child. Scoped so it cannot
     reach numerals nested inside a card on the same dark ground, which is
     how the confirmation page's total ended up ten rems tall. */
  & > .num {
    color: var(--pink);
    font-size: clamp(4.5rem, 17vw, 10rem);
    line-height: 0.9;
  }

  & h1 { font-size: var(--d-l); }

  & h1 + p {
    max-width: 42ch;
    font-size: var(--lede); line-height: 1.42;
    color: rgba(247, 244, 238, 0.86);
  }

  & > p:last-child {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
  }
}

.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);

  &.is-in { opacity: 1; transform: none; }
}

@media (min-width: 860.02px) and (max-height: 860px) {
  :root { --d-xl: clamp(2.4rem, 5vw, 4.5rem); }
  .hero {
    padding-block: clamp(1rem, 2vw, 1.75rem);
    & h1 + p { font-size: 1.1875rem; }
    & h1 { margin-bottom: 1rem; }
    & > div > div > p:last-child { margin-top: 1.25rem; }
  }
  .eyebrow { margin-bottom: 1rem; }
  .btn { padding: 0.9rem 1.6rem; }
}

@media (min-width: 860.02px) and (max-height: 660px) {
  :root { --d-xl: clamp(1.9rem, 3.6vw, 3rem); }
  .hero {
    padding-block: 0.75rem;
    & h1 + p { font-size: 0.9375rem; }
    & h1 { margin-bottom: 0.7rem; }
    & > div > div > p:last-child { margin-top: 0.85rem; }
  }
  .eyebrow { margin-bottom: 0.55rem; }
  .btn { padding: 0.7rem 1.3rem; }
}

@media (max-width: 1100px) {
  .hero > div   { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .review > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
  .mya > div    { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .rail > nav { display: none; }

  .hero {
    & > div { grid-template-columns: 1fr; }
    & figure { max-width: 22rem; }
    & figure img { aspect-ratio: 3 / 4; max-height: none; }
  }

  .night {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    grid-template-areas: "num body" ". meta";
    row-gap: 0.9rem;

    & > p:first-child { grid-area: num; }
    & > div { grid-area: body; }
    & > p:last-child {
      grid-area: meta;
      flex-direction: row; align-items: baseline; justify-content: space-between;
    }
  }

  .review {
    & > div { grid-template-columns: 1fr; }
    & figure { max-width: 15rem; }
    & blockquote + p { margin-top: 1.25rem; }
  }

  .mya {
    & > div { grid-template-columns: 1fr; }
    & figure { max-width: 20rem; }
  }

  .stub {
    grid-template-columns: 1.35rem 2.5rem minmax(0, 1fr);
    grid-template-areas: "box num name" ". . cost";
    row-gap: 0.35rem;

    & > span:nth-of-type(1) { grid-area: box; }
    & > span:nth-of-type(2) { grid-area: num; }
    & > span:nth-of-type(3) { grid-area: name; }
    & > span:nth-of-type(4) { grid-area: cost; }
  }

}

@media (max-width: 520px) {
  .head {
    align-items: flex-start; flex-direction: column;
    & > p { text-align: left; }
  }
  .btn { flex: 1 1 auto; justify-content: center; }
  .series > p { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, background-color, color, border-color, outline-color !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .curtain > div, .curtain > img { animation: none !important; transform: none !important; }
  .stub > span:nth-of-type(1)::after { transition: none; }
  .stub.is-on > span:nth-of-type(1)::after { transform: scale(1); }
  .submit > span:last-of-type { transform: none !important; }
}

@media print {
  .rail, .submit, .band { display: none; }
  .hero > div > div > p:last-child { display: none; }
  body, .hero, .mya, .foot, .review--ink { background: #fff !important; color: #000 !important; }
  .ticket, .series { box-shadow: none; }
  .rail > a:first-child img, .foot img { filter: none; }
}

/* ── Policies ─────────────────────────────────────────────────────────── */
.policies {
  border-top: 1px solid var(--line);
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);

  & > div {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.25rem, 3vw, 1.9rem) 0;
    border-bottom: 1px solid var(--line);
  }

  & dt {
    font-family: var(--arch);
    font-variation-settings: "wdth" 62, "wght" 900;
    font-size: clamp(1.35rem, 3.2vw, 1.95rem);
    line-height: 0.95; letter-spacing: -0.005em;
    text-transform: uppercase;
  }

  & dd { margin: 0; max-width: 54ch; line-height: 1.5; }

  /* The graphic sets the binding numbers in pink; same job here. */
  & dd em { font-style: normal; color: var(--rose-ink); font-weight: 600; }

  /* The global reset strips markers; this is a genuine bullet list, so
     they come back here rather than the items reading as loose lines. */
  & ul { margin: 0; padding-left: 1.05rem; list-style: disc; }
  & li { margin-bottom: 0.35rem; padding-left: 0.15rem; }
  & li:last-child { margin-bottom: 0; }
  & li::marker { color: var(--rose); }
}

.thanks {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1rem; align-items: start;
  max-width: 58ch; margin: 0;
  font-size: var(--lede); line-height: 1.45; color: var(--rose-ink);
}

.fine {
  font-size: 0.85rem;
  & a { color: inherit; }
}

@media (max-width: 640px) {
  .policies > div { grid-template-columns: 1fr; }
}

/* ── Chosen sessions ──────────────────────────────────────────────────── */
.chosen {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);

  & > .label { display: block; margin-bottom: 0.6rem; color: var(--rose-ink); }

  & ul { margin: 0; padding: 0; }

  & li {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.5rem 0.15rem 0.5rem 0.7rem;
    border-left: 2px solid var(--rose);
    background: var(--petal);
    margin-bottom: 0.3rem;
    font-family: var(--arch); font-variation-settings: "wdth" 92, "wght" 600;
    font-size: 0.92rem;
  }
}

.drop {
  flex: none; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 0;
  font-size: 1.15rem; line-height: 1; color: var(--rose-ink);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);

  &:hover { background: var(--rose-ink); color: var(--cream); }
  &:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 1px; }
}

.nudge {
  margin: 0.75rem 0 0; font-size: 0.88rem; color: var(--rose-ink);
  &:empty { display: none; }
}

/* A day holding a selection, so a basket spread across the week is visible
   without scrolling the strip back. */
.day.has-pick { border-color: var(--rose); }

.day.has-pick::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--rose); margin-top: 0.15rem;
}

.day[aria-pressed="true"].has-pick::after { background: var(--pink); }

/* ── Remaining seats ──────────────────────────────────────────────────── */
.left {
  margin-left: 0.55rem;
  color: var(--rose-ink);
  &.is-full { color: rgba(26, 23, 25, 0.45); }
}

.stub.is-full {
  opacity: 0.5;
  & input { cursor: not-allowed; }
  & em { color: rgba(26, 23, 25, 0.6); }
}

/* ── Prep Like An Angel ────────────────────────────────────────────────────
   The classes section, while a program is on sale. Same room, same rules:
   the plans borrow the reviews' three grounds so the tiers read apart at a
   glance rather than by price alone. */
/* The condensed cut all but closes its word spaces at these sizes, which
   turns "Prep Plus" into one word. Every display heading here gets a
   little of it back. */
.prep-h, .plan h4, .ribbon h2, .buy h2,
.nights--tight .night h3,
.stub > span:nth-of-type(3) { word-spacing: 0.12em; }

.prep-h {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--arch); font-variation-settings: "wdth" 62, "wght" 900;
  font-size: var(--d-m); line-height: 0.95;
  text-transform: uppercase; letter-spacing: -0.005em;
}

.plans {
  display: grid; gap: var(--gap); align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.plan {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--petal);
  box-shadow: 10px 10px 0 0 var(--cast);

  & h4 {
    font-family: var(--arch); font-variation-settings: "wdth" 62, "wght" 900;
    font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 0.9;
    text-transform: uppercase; letter-spacing: -0.005em;
  }

  & > .label { margin-top: 0.5rem; color: var(--rose-ink); }

  & ul { margin: 1.25rem 0 1.5rem; border-top: 1px solid var(--line); }

  & li {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding: 0.55rem 0; border-bottom: 1px solid var(--line);
    font-size: 1rem; line-height: 1.35;
  }

  & > .num { margin-top: auto; color: var(--rose-ink); line-height: 1.05; }
  & .btn { margin-top: 1.1rem; }

  &.plan--rose {
    background: var(--rose);
    & > .label, & > .num { color: var(--ink); }
    & .spark { color: var(--cream); }
  }

  &.plan--ink {
    background: var(--ink); color: var(--cream);
    & > .label, & > .num, & .spark { color: var(--pink); }
    & ul, & li { border-color: var(--line-rev); }
    & .btn--fill {
      background: var(--pink); border-color: var(--pink); color: var(--ink);
      &:hover { background: var(--cream); border-color: var(--cream); }
    }
    & .btn--line { border-color: var(--line-rev); color: var(--cream); }
  }

  /* Sold out, or a class in it is full: still legible, plainly not for sale. */
  &.is-off { opacity: 0.55; }
}

.btn.is-off { cursor: default; }

.included {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));

  & h4 {
    margin-bottom: 0.4rem;
    font-family: var(--arch); font-variation-settings: "wdth" 80, "wght" 750;
    font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.01em;
  }

  & .label { display: block; margin-bottom: 0.35rem; color: var(--rose-ink); }
  & p { color: rgba(26, 23, 25, 0.72); }
}

.prep-note { margin-bottom: 1rem; color: rgba(26, 23, 25, 0.72); }
.prep-cta { margin-top: clamp(2rem, 4vw, 3rem); }

/* The class picker inside the booking box, once a plan is chosen. */
.prep-pick { margin-top: 1.5rem; }
.prep-pick > .label { display: block; margin-bottom: 0.85rem; color: var(--rose-ink); }

/* ── Guides ────────────────────────────────────────────────────────────── */
.ribbon {
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--page);
  background: var(--greige);

  & > div {
    max-width: var(--max); margin: 0 auto;
    display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  }

  & h2 {
    margin-bottom: 0.5rem;
    font-family: var(--arch); font-variation-settings: "wdth" 62, "wght" 900;
    font-size: var(--d-m); line-height: 0.95;
    text-transform: uppercase; letter-spacing: -0.005em;
  }

  & > div > div > p { max-width: 38ch; color: rgba(26, 23, 25, 0.75); }
}

.guide-list { display: grid; gap: 0.75rem; }

.guide {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--cream);

  /* Big enough to read as a cover: at thumbnail size these are all pale
     paper and nothing else. */
  & img { width: 5rem; border: 1px solid var(--line); }

  & h3 {
    font-family: var(--arch); font-variation-settings: "wdth" 88, "wght" 650;
    font-size: 1.05rem; line-height: 1.15;
  }

  & .num { color: var(--rose-ink); }
  & .btn { padding: 0.7rem 1.2rem; }
  & > .label { color: rgba(26, 23, 25, 0.5); }
}

@media (max-width: 860px) {
  .ribbon > div { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .guide {
    grid-template-columns: auto minmax(0, 1fr);
    & .btn, & > .label { grid-column: 1 / -1; justify-content: center; text-align: center; }
  }
}

/* ── Buying a guide ──────────────────────────────────────────────────────
   A sheet rather than a page: name, email, pay. Everything else about the
   guide has already been said on the strip behind it. */
.buy {
  --pad: clamp(1.25rem, 4vw, 1.75rem);

  width: min(26rem, calc(100% - 2rem));
  padding: 0; border: 0; color: var(--ink);
  background: var(--cream);
  box-shadow: 12px 12px 0 0 var(--cast);

  &::backdrop { background: rgba(26, 23, 25, 0.62); }

  & form { position: relative; }
  & form > div { padding: var(--pad); }

  & h2 {
    margin-bottom: 0.3rem;
    font-family: var(--arch); font-variation-settings: "wdth" 62, "wght" 900;
    font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 0.9;
    text-transform: uppercase; letter-spacing: -0.005em;
  }

  & > form > div > .label { color: var(--rose-ink); }
  & .num { margin-bottom: 1.5rem; color: var(--rose-ink); line-height: 1.05; }
  & .field { margin-bottom: 1.5rem; }
  & .fine { margin: 0; padding: 0.9rem var(--pad); color: var(--rose-ink); }
}

.buy-x {
  position: absolute; top: 0.2rem; right: 0.2rem;
  width: 2.4rem; height: 2.4rem;
  background: none; border: 0; border-radius: 0;
  font-size: 1.5rem; line-height: 1; color: rgba(26, 23, 25, 0.5);
  cursor: pointer;

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

/* ── Downloads, on the thank-you page ──────────────────────────────────── */
.booked .downloads {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  max-width: none; margin-bottom: 1.75rem;

  & .btn.is-off { opacity: 0.55; }
}

/* ── Manage your booking ──────────────────────────────────────────────── */
.manage {
  min-height: 100svh;
  padding: clamp(2.5rem, 7vw, 5rem) var(--page);
  background: var(--cream);

  & > main { max-width: 34rem; margin: 0 auto; }

  & img { width: clamp(170px, 24vw, 230px); margin-bottom: clamp(2rem, 5vw, 3rem); }

  & h1 {
    font-family: var(--arch); font-variation-settings: "wdth" 62, "wght" 900;
    font-size: clamp(2rem, 6vw, 3rem); line-height: 0.95;
    text-transform: uppercase; letter-spacing: -0.005em;
    margin: 0 0 0.75rem;
  }

  & .lede { font-size: var(--lede); line-height: 1.45; margin: 0 0 2rem; max-width: 42ch; }
  & .note { margin: 0; font-size: 0.92rem; color: rgba(26, 23, 25, 0.62); }
}

.flash {
  margin: 0 0 1.75rem; padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--rose-ink); background: var(--petal);
  font-size: 0.95rem; line-height: 1.45;

  &.is-bad { border-left-color: #94413a; background: #f7ecea; }
}

.sess {
  padding: 1.35rem 0; border-top: 1px solid var(--line);

  &:last-of-type { border-bottom: 1px solid var(--line); }
  &.is-off { opacity: 0.5; }

  & > .label { display: block; color: var(--rose-ink); margin-bottom: 0.3rem; }

  & h2 {
    font-family: var(--arch); font-variation-settings: "wdth" 88, "wght" 650;
    font-size: 1.15rem; margin: 0 0 1rem;
  }

  & form + form { margin-top: 0.6rem; }
  & .btn { width: 100%; justify-content: center; }
}

.move {
  display: grid; gap: 0.4rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;

  & .label { grid-column: 1 / -1; color: var(--rose-ink); }

  & select {
    width: 100%; padding: 0.7rem 0.75rem;
    font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-radius: 0;
    -webkit-appearance: none; appearance: none;

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

  & .btn { width: auto; }
}

@media (max-width: 520px) {
  .move { grid-template-columns: 1fr; }
  .move .btn { width: 100%; }
}