/* ============================================================
   SOLE96
   ------------------------------------------------------------
   Direction: the call sheet. A dancer gets a sheet of paper that
   says where to be, when, and what is being taught. That document
   is the page.

   Colour comes from two places. Black and the sand of the studio
   cyc wall come from the poster and the logo. The one accent, --glow,
   is the hue of the neon the classes are actually lit by, sampled off
   a frame of the Body footage and lifted to work as an interface
   colour. It is spent only on live state: the next class, playback.
   ============================================================ */

:root {
  --ink: #12100E;
  --ink-raised: #1B1815;
  --sand: #E4DCD1;
  --bone: #F2EDE6;

  --on-ink: #EDE7DE;
  --on-ink-dim: rgba(237, 231, 222, 0.58);
  --on-ink-faint: rgba(237, 231, 222, 0.16);

  --glow: #E0405F;

  --on-sand: #12100E;
  --on-sand-dim: rgba(18, 16, 14, 0.62);
  --on-sand-faint: rgba(18, 16, 14, 0.16);

  /* Band-aware roles. Components name these, never the raw pairs, so a
     section can be moved between a dark and a light band without its
     text disappearing. Light bands redefine all three below. */
  --fg: var(--on-ink);
  --muted: var(--on-ink-dim);
  --line: var(--on-ink-faint);
  --err: #F08A72;

  --display: 'Special Gothic Expanded One', 'Arial Black', sans-serif;
  --body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* labels, dates and buttons share the body family and are separated by
     weight and size instead. A monospace interface voice with wide tracking
     is the house style of generated templates, and it reads as one. */
  --data: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --meaning: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --gutter: clamp(20px, 4.5vw, 56px);
  --maxw: 1280px;
  --rail: 148px;
  --header-h: 64px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--on-ink); color: var(--ink); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--on-ink);
  color: var(--ink);
  padding: 12px 20px;
  font-family: var(--data);
  font-size: 12px;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------
   Type roles
   Display is set in caps only — it is a wide gothic and it earns
   its keep at size, not in running text.
   ------------------------------------------------------------ */

.t-display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
  margin: 0;
}

.t-data {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Bands — every section is one band; the ground alternates so the
   page reads as a stack of sheets rather than one long scroll.
   ------------------------------------------------------------ */

.band {
  padding-block: clamp(56px, 8vw, 112px);
}

.band--sand {
  background: var(--sand);
  color: var(--on-sand);
}

.band--bone {
  background: var(--bone);
  color: var(--on-sand);
}

.band--sand,
.band--bone {
  --fg: var(--on-sand);
  --muted: var(--on-sand-dim);
  --line: var(--on-sand-faint);
  --err: #8C2F16;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* the rail: a margin column carrying the section label, like the
   left edge of a call sheet */
.rail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px clamp(24px, 4vw, 56px);
}

@media (min-width: 900px) {
  .rail-layout { grid-template-columns: var(--rail) 1fr; }
}

.rail {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 6px;
}

@media (min-width: 900px) {
  .rail {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
  }
}

.rail::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: currentColor;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  min-height: 44px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cta::after {
  content: '↗';
  font-size: 13px;
  line-height: 1;
}

.cta:hover { background: var(--on-ink); color: var(--ink); }

.band--sand .cta:hover,
.band--bone .cta:hover { background: var(--fg); color: var(--bone); }

.cta--solid {
  background: var(--on-ink);
  color: var(--ink);
  border-color: var(--on-ink);
}

.cta--solid:hover { background: transparent; color: var(--on-ink); }

.cta--bare { padding: 10px 0; border: 0; }
.cta--bare::after { content: '→'; }
.cta--bare:hover { background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 5px; }

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--on-ink);
  transition: background 0.3s ease, color 0.3s ease;
}

.header.is-stuck {
  background: rgba(18, 16, 14, 0.9);
  backdrop-filter: blur(10px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.header__logo img { height: 36px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
}

.nav a {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-ink-dim);
  padding-block: 6px;
  transition: color 0.2s ease;
}

.nav a:hover { color: var(--on-ink); }
.nav .cta { color: var(--on-ink); }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--on-ink-faint);
  background: transparent;
  cursor: pointer;
  position: relative;
}

.burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--on-ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 25px; }

.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    padding: 4px var(--gutter) 24px;
    transform: translateY(-115%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }

  .nav.is-open { transform: translateY(0); }

  .nav a {
    font-size: 13px;
    padding-block: 15px;
    border-bottom: 1px solid var(--on-ink-faint);
  }

  .nav .cta { margin-top: 18px; align-self: flex-start; border-bottom: 1px solid currentColor; }
}

/* ------------------------------------------------------------
   Hero — the next class, as a call sheet entry.
   The page opens with the thing it exists to sell, not a slogan.
   ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 32px);
  padding-bottom: clamp(32px, 5vw, 64px);
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  z-index: 0;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(18, 16, 14, 0.94) 0%, rgba(18, 16, 14, 0.58) 42%, rgba(18, 16, 14, 0.18) 72%),
    linear-gradient(to right, rgba(18, 16, 14, 0.8) 0%, rgba(18, 16, 14, 0.42) 32%, rgba(18, 16, 14, 0.06) 60%);
}

@media (max-width: 760px) {
  .hero__photo { object-position: 72% 42%; }
}

.hero .wrap { position: relative; z-index: 2; width: 100%; }

.hero__eyebrow {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero__eyebrow::after {
  content: '';
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: var(--on-ink-faint);
}

.hero__line {
  font-size: clamp(48px, 10.5vw, 148px);
  margin-block: clamp(14px, 2vw, 22px) clamp(22px, 3vw, 34px);
  max-width: 14ch;
}

/* the call sheet rows */
.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, max-content));
  gap: 16px clamp(26px, 5vw, 64px);
  border-top: 1px solid var(--on-ink-faint);
  padding-top: 18px;
}

.sheet__cell dt {
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  margin: 0 0 5px;
}

.sheet__cell dd {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(15px, 1.7vw, 19px);
  margin: 0;
  color: var(--on-ink);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3.5vw, 38px);
}

/* count-in: the hero reveals in sequence on load, the way a class
   starts. This is the page's only orchestrated motion. */
.count-in > * {
  opacity: 0;
  animation: count-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.count-in > *:nth-child(1) { animation-delay: 0.05s; }
.count-in > *:nth-child(2) { animation-delay: 0.17s; }
.count-in > *:nth-child(3) { animation-delay: 0.29s; }
.count-in > *:nth-child(4) { animation-delay: 0.41s; }

@keyframes count-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .count-in > * { opacity: 1; animation: none; }
}

/* ------------------------------------------------------------
   About
   ------------------------------------------------------------ */

.about__body {
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.45;
  max-width: 26ch;
  margin: 0;
}

.about__body strong { font-weight: 600; }

.about__notes {
  display: grid;
  gap: 22px;
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

@media (min-width: 700px) { .about__notes { grid-template-columns: repeat(3, 1fr); gap: 34px; } }

.note p {
  margin: 8px 0 0;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.55;
}

.note .t-data { color: var(--fg); }

.about__figure { margin: clamp(32px, 5vw, 48px) 0 0; }
.about__figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 28%; }
.about__figure figcaption {
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}

/* ------------------------------------------------------------
   Schedule — the centre of the page. Set as a real sheet.
   ------------------------------------------------------------ */

.venue__title {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 42px);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.venue__when {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

.venue + .venue { margin-top: clamp(40px, 6vw, 64px); }

.slots {
  margin-top: 20px;
  border-top: 2px solid var(--fg);
}

.slot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  align-items: baseline;
  padding-block: 15px;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 720px) {
  .slot { grid-template-columns: 104px 136px 1fr auto; align-items: center; }
}

/* One-off night (the Halloween collab): marked so it does not read as
   another class in the series, and booked by request rather than card. */
.slot--feature {
  border-bottom-color: var(--glow);
  box-shadow: inset 3px 0 0 var(--glow);
  padding-left: 14px;
}
.slot--feature .slot__what { color: var(--glow); }
.slot--feature .slot__where { color: var(--muted); }

.slot__day,
.slot__time {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  letter-spacing: 0.04em;
}

.slot__time { color: var(--muted); }

.slot__what {
  font-family: var(--display);
  font-size: clamp(17px, 1.9vw, 22px);
  text-transform: uppercase;
  line-height: 1.1;
}

.slot__go { justify-self: end; }

.slot.is-next { background: var(--fg); color: var(--bone); margin-inline: -14px; padding-inline: 14px; }
.slot.is-next .slot__time { color: rgba(242, 237, 230, 0.65); }
.slot.is-next .cta--bare:hover { color: var(--bone); }

.footnote {
  margin-top: 22px;
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.7;
}

/* ------------------------------------------------------------
   Pricing
   ------------------------------------------------------------ */

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

.rate {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 32px;
  align-items: baseline;
  padding-block: clamp(20px, 2.6vw, 28px);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
  .rate { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto; align-items: center; }
}

.rate__what {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  text-transform: uppercase;
  line-height: 1;
}

.rate__note {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.rate__price {
  font-family: var(--data);
  font-size: clamp(22px, 2.8vw, 30px);
  white-space: nowrap;
  justify-self: end;
}

/* ------------------------------------------------------------
   Gallery
   ------------------------------------------------------------ */

.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

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

.shot { margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.shot:hover img { transform: scale(1.04); }

@media (min-width: 760px) {
  /* --a sets the height of the first row; --b stretches to match it
     so the two do not leave a step between the rows */
  .shot--a { grid-column: span 5; aspect-ratio: 4 / 5; }
  .shot--b { grid-column: span 7; }
  .shot--c { grid-column: span 4; aspect-ratio: 4 / 5; }
  .shot--d { grid-column: span 4; aspect-ratio: 4 / 5; }
  .shot--e { grid-column: span 4; aspect-ratio: 4 / 5; }
}

.shot img { aspect-ratio: 4 / 5; }
@media (min-width: 760px) { .shot img { aspect-ratio: auto; height: 100%; } }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 44px);
  background: rgba(18, 16, 14, 0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 88svh; object-fit: contain; }

.lightbox__close {
  position: absolute;
  top: clamp(10px, 3vw, 24px);
  right: clamp(10px, 3vw, 24px);
  width: 44px;
  height: 44px;
  border: 1px solid var(--on-ink-faint);
  background: transparent;
  color: var(--on-ink);
  font-size: 20px;
  cursor: pointer;
}

.lightbox__close:hover { background: var(--on-ink); color: var(--ink); }

/* ------------------------------------------------------------
   Booking
   ------------------------------------------------------------ */

.form { display: grid; gap: 20px; max-width: 620px; }

@media (min-width: 620px) {
  .form { grid-template-columns: 1fr 1fr; }
  .form__full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 16px;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0;
  min-height: 44px;
  appearance: none;
  transition: border-color 0.2s ease;
}

.field textarea { resize: vertical; min-height: 88px; }

.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--fg); }

.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 0.75; }

.field__err {
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--err);
  min-height: 1.2em;
}

.form .cta { justify-self: start; }

.form__status {
  grid-column: 1 / -1;
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  min-height: 1.4em;
}

.form__status.is-ok { color: var(--fg); }

/* ------------------------------------------------------------
   Contact + footer
   ------------------------------------------------------------ */

.contacts { display: grid; gap: 26px; }
@media (min-width: 700px) { .contacts { grid-template-columns: repeat(3, 1fr); } }

.contacts dt {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.contacts dd {
  margin: 0;
  font-family: var(--data);
  font-size: clamp(14px, 1.4vw, 16px);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.contacts dd a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contacts dd a:hover { border-color: currentColor; }

.footer {
  border-top: 1px solid var(--on-ink-faint);
  padding-block: 34px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer__inner img { height: 54px; width: auto; }

.footer__small {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--on-ink-dim);
}

/* ------------------------------------------------------------
   Scroll reveal — deliberately plain: a short fade, once.
   ------------------------------------------------------------ */

.rise { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   Hero video
   The cover clip is what a class actually looks like. The still
   stays as the poster so there is something to see before the
   video arrives, and on connections that never load it.
   ------------------------------------------------------------ */

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

@media (max-width: 760px) {
  .hero__video { object-position: center; }
}

/* ------------------------------------------------------------
   Repertoire — the pieces that actually get taught, each with a
   clip from the room it was taught in. The lighting differs per
   piece because the rooms differ; that is the point.
   ------------------------------------------------------------ */

.pieces {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
}

@media (min-width: 640px) { .pieces { grid-template-columns: repeat(2, 1fr); } }
/* four masterclasses: 2x2 on a tablet, one row on a desktop, never a hole */
@media (min-width: 1000px) { .pieces { grid-template-columns: repeat(4, 1fr); } }

.piece {
  position: relative;
  margin: 0;
  background: var(--ink-raised);
  overflow: hidden;
}

.piece__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ink-raised);
}

.piece__media img,
.piece__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.piece__media video { opacity: 0; transition: opacity 0.45s ease; }

/* the ones waiting their turn sit in black and white */
[data-piece] { filter: grayscale(1); transition: filter 0.55s ease; }
[data-piece].is-playing { filter: none; }

.piece__media img { transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.piece:hover .piece__media img { transform: scale(1.03); }

/* the playing state is keyed off [data-piece], not a class name, because
   three different tiles use this player: .piece, .dir and .style__shot */

/* the whole tile is the control */
.piece__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(16px, 2vw, 24px);
  border: 0;
  background: linear-gradient(to top, rgba(18, 16, 14, 0.82) 0%, rgba(18, 16, 14, 0.15) 52%, rgba(18, 16, 14, 0) 100%);
  color: var(--on-ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease;
}

[data-piece] .piece__name { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
[data-piece].is-playing .piece__name { transform: translateY(-2px); }

[data-piece].is-playing .piece__play {
  background: linear-gradient(to top, rgba(18, 16, 14, 0.7) 0%, rgba(18, 16, 14, 0) 42%);
}

.piece__name {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 32px);
  text-transform: uppercase;
  line-height: 1;
}

.piece__meta {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.piece__meta::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
  flex: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

[data-piece].is-playing .piece__meta::before { opacity: 1; }
[data-piece].is-playing .piece__meta { color: var(--on-ink); }

.pieces__note {
  margin-top: 24px;
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.7;
}

/* ------------------------------------------------------------
   Formats — short definitions, folded under the schedule where
   somebody reading a date needs them.
   ------------------------------------------------------------ */

.formats {
  display: grid;
  gap: 16px 34px;
  margin-top: clamp(34px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

@media (min-width: 700px) { .formats { grid-template-columns: repeat(2, 1fr); } }

.format dt {
  font-family: var(--display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.format dd {
  margin: 3px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ------------------------------------------------------------
   Merch
   ------------------------------------------------------------ */

.merch {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}

@media (min-width: 860px) { .merch { grid-template-columns: 1.1fr 1fr; align-items: end; } }

.merch__shot { margin: 0; }
.merch__shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.merch__name {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 52px);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0 0 14px;
}

.merch__text {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16.5px;
  max-width: 40ch;
}

/* ------------------------------------------------------------
   Hero headline — the brand line, with the turn of the sentence
   carried in the serif italic.
   ------------------------------------------------------------ */

/* the mark is a tall stacked lockup, so it is sized by height rather than
   width and the line beside it is set to its baseline */
.hero__mark {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  line-height: 0;
}

.hero__mark img {
  height: clamp(118px, 26vh, 268px);
  width: auto;
}

.hero__by {
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  margin: clamp(16px, 2.2vw, 22px) 0 clamp(24px, 3vw, 34px);
  color: var(--on-ink-dim);
}

.hero__line em {
  font-family: var(--meaning);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.02em;
}

.hero__next { border-top: 1px solid var(--on-ink-faint); padding-top: 16px; }

.hero__next-label {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  margin: 0 0 14px;
}

.hero__next .sheet { border-top: 0; padding-top: 0; }

/* ------------------------------------------------------------
   Points — the four things worth knowing, straight after the hero.
   ------------------------------------------------------------ */

.band--tight { padding-block: clamp(40px, 5vw, 64px); }

.points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--on-ink-faint);
  border-block: 1px solid var(--on-ink-faint);
}

@media (min-width: 640px) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .points { grid-template-columns: repeat(4, 1fr); } }

.point {
  background: var(--ink);
  padding: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
}

.point__k {
  display: block;
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 17px);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.point p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ------------------------------------------------------------
   Statement — the big sentence that opens a band.
   ------------------------------------------------------------ */

.statement {
  font-family: var(--display);
  font-size: clamp(26px, 3.8vw, 50px);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 20ch;
}

.statement em {
  font-family: var(--meaning);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.04em;
}

.statement--sm {
  font-size: clamp(22px, 2.8vw, 34px);
  max-width: 24ch;
  margin-bottom: clamp(26px, 3.5vw, 38px);
}

.statement__sub {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  font-size: clamp(16.5px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}

/* ------------------------------------------------------------
   Note card — where the name comes from. It sits off to the side
   and stays shut until somebody wonders. Explaining the name at
   full size made the section read like a dictionary entry.
   ------------------------------------------------------------ */

.note-card {
  margin-top: clamp(30px, 4vw, 44px);
  border: 1px solid var(--line);
  max-width: 46ch;
}

@media (min-width: 1080px) {
  .note-card { margin-left: auto; }
}

.note-card__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.note-card__tab::after {
  content: '+';
  font-size: 16px;
  line-height: 1;
  flex: none;
}

.note-card__tab[aria-expanded='true']::after { content: '–'; }
.note-card__tab:hover { color: var(--muted); }

.note-card__body { padding: 0 16px 16px; }

.note-card__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.note-card__body p + p { margin-top: 10px; }

.note-card__body b {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--fg);
  letter-spacing: 0.01em;
}

.note-card__body em {
  font-family: var(--meaning);
  font-style: italic;
  font-size: 1.16em;
  color: var(--fg);
}

/* ------------------------------------------------------------
   Classes band — formats sit above the rates
   ------------------------------------------------------------ */

#classes .formats {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#classes .rates { margin-top: clamp(38px, 5vw, 56px); }

/* ------------------------------------------------------------
   Community
   ------------------------------------------------------------ */

.community__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px clamp(28px, 4vw, 52px);
  margin-top: clamp(24px, 3vw, 34px);
  max-width: 74ch;
}

@media (min-width: 760px) { .community__cols { grid-template-columns: repeat(2, 1fr); } }

.community__cols p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}

#community .strip { margin-top: clamp(34px, 4.5vw, 52px); }
.community__cta { margin-top: clamp(28px, 3.5vw, 38px); }

/* ------------------------------------------------------------
   Founder
   ------------------------------------------------------------ */

.founder {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}

@media (min-width: 820px) { .founder { grid-template-columns: 0.8fr 1.2fr; } }

.founder__shot { margin: 0; }
.founder__shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.founder__name {
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 58px);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.founder__role {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 24px;
}

.founder__body p {
  margin: 0 0 1.1em;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 58ch;
}

.founder__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Reviews — messages from the class group chat, set as type
   rather than posted as screenshots. A column wall, because the
   messages are different lengths and a rigid grid would leave
   holes under the short ones.
   ------------------------------------------------------------ */

.quotes { margin-top: clamp(8px, 1.5vw, 16px); }

@media (min-width: 700px) { .quotes { column-count: 2; column-gap: clamp(14px, 2vw, 22px); } }
@media (min-width: 1060px) { .quotes { column-count: 3; } }

.quote {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--ink-raised);
  border-left: 2px solid var(--line);
}

.quote blockquote { margin: 0; }

.quote p {
  margin: 0;
  font-family: var(--meaning);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.35;
}

.quote figcaption {
  display: block;
  margin-top: 16px;
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* one message carries the section */
.quote--lead {
  border-left-color: var(--glow);
}

.quote--lead p { font-size: clamp(22px, 2.6vw, 30px); }

/* ------------------------------------------------------------
   FAQ — native disclosure, so it works without JavaScript.
   ------------------------------------------------------------ */

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

.qa { border-bottom: 1px solid var(--line); }

.qa summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 18px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(15px, 1.7vw, 19px);
  text-transform: uppercase;
  line-height: 1.25;
}

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

.qa summary::after {
  content: '+';
  font-family: var(--data);
  font-size: 18px;
  line-height: 1;
  flex: none;
  transition: transform 0.25s ease;
}

.qa[open] summary::after { content: '–'; }

.qa summary:hover { color: var(--muted); }

.qa p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

/* ------------------------------------------------------------
   Run sheet — the order a class actually happens in. Numbered
   because the order is the information: you cannot film before
   you warm up.
   ------------------------------------------------------------ */

.runsheet {
  list-style: none;
  counter-reset: step;
  margin: clamp(38px, 5vw, 56px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.runsheet li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 720px) {
  .runsheet li { grid-template-columns: 28px minmax(0, 6fr) minmax(0, 11fr); align-items: baseline; gap: 24px; }
}

.runsheet li::before {
  content: counter(step);
  font-family: var(--data);
  font-size: 12px;
  color: var(--muted);
  grid-row: 1;
}

.runsheet__k {
  font-family: var(--display);
  font-size: clamp(15px, 1.6vw, 18px);
  text-transform: uppercase;
  line-height: 1.2;
}

.runsheet li p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  grid-column: 2 / -1;
}

@media (min-width: 720px) { .runsheet li p { grid-column: 3; } }

/* ------------------------------------------------------------
   Pricing — three tiers, each with its own rows, because the
   system has three shapes rather than one list of numbers.
   ------------------------------------------------------------ */

.pricing { margin-top: clamp(40px, 5vw, 60px); }

.pricing__era {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}

.tier {
  padding-block: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
}

.tier:last-child { border-bottom: 1px solid var(--line); }

.tier__name {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 30px);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.tier__meta {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 8px 0 0;
}

.tier__rows {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 420px;
}

.tier__rows li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  font-size: 15.5px;
}

.tier__rows li::after {
  content: '';
  order: 1;
  flex: 1;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}

.tier__rows li span { order: 0; }
.tier__rows li b { order: 2; font-weight: 400; font-size: clamp(17px, 1.9vw, 20px); }

.tier__note {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
}

.tier__note a { color: inherit; }

.tier--feature .tier__name em,
.tier--feature .tier__name { color: inherit; }

.tier--feature .tier__meta { color: var(--glow); }

/* ------------------------------------------------------------
   Merch — three shots, then what it is
   ------------------------------------------------------------ */

.merch__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 1.2vw, 14px);
}

@media (min-width: 700px) { .merch__grid { grid-template-columns: repeat(2, 1fr); } }

.merch__grid .merch__shot { margin: 0; }
.merch__grid .merch__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.merch__say { margin-top: clamp(26px, 3.4vw, 40px); max-width: 52ch; }

/* ------------------------------------------------------------
   Community strip — group photographs, one wide and two beside it
   ------------------------------------------------------------ */

.shot--wide { grid-column: 1 / -1; }
.shot--wide img { aspect-ratio: 16 / 10; }

.shot--half { grid-column: span 1; }
.shot--half img { aspect-ratio: 4 / 3; }

@media (min-width: 760px) {
  #strip { grid-template-columns: repeat(2, 1fr); }
  .shot--wide img { aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------------
   Levels page
   ------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pagehead { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px)); }

.pagehead__back {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

.pagehead__back a { color: var(--muted); text-decoration: none; }
.pagehead__back a:hover { color: var(--fg); }

.pagehead__title {
  font-size: clamp(38px, 7vw, 96px);
  max-width: 15ch;
}

.pagehead__title em {
  font-family: var(--meaning);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.02em;
}

.pagehead__sub {
  margin: clamp(22px, 3vw, 32px) 0 0;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
}

.level {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.5vw, 48px);
  margin-top: clamp(26px, 3.5vw, 40px);
}

@media (min-width: 860px) { .level { grid-template-columns: 1.25fr 1fr; } }

.level__body p {
  margin: 0 0 1.1em;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--muted);
}

.level__body p:last-child { margin-bottom: 0; }

.level__facts {
  margin: 0;
  display: grid;
  gap: 14px;
  align-content: start;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.level__facts div { display: grid; gap: 4px; }

.level__facts dt {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.level__facts dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
}

.level + .runsheet { margin-top: clamp(34px, 4.5vw, 48px); }
.runsheet + .cta { margin-top: clamp(28px, 3.5vw, 38px); }
.level + .cta { margin-top: clamp(28px, 3.5vw, 38px); }

/* comparison table */
.compare { overflow-x: auto; }

.ctable {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  text-align: left;
}

.ctable th,
.ctable td {
  padding: 15px 16px 15px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 15.5px;
  line-height: 1.45;
}

.ctable thead th {
  font-family: var(--display);
  font-size: clamp(14px, 1.6vw, 17px);
  text-transform: uppercase;
  border-bottom: 2px solid var(--fg);
}

.ctable tbody th {
  font-family: var(--data);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  width: 30%;
}

/* ------------------------------------------------------------
   The cutout — a 3:1 panorama with a transparent background. It
   gets the full width of the page and a light ground to lie on,
   because the figure is dressed in black and would vanish into
   the dark band above it.
   ------------------------------------------------------------ */

/* the cutout has a transparent background and the figure is dressed in
   black, so it needs a light ground of its own inside the dark band */
.founder__lie {
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  background: var(--bone);
  padding: clamp(10px, 1.6vw, 22px) 0;
}

.founder__lie img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------
   Pictures between the text blocks
   ------------------------------------------------------------ */

.figpair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.4vw, 16px);
  margin-top: clamp(34px, 4.5vw, 52px);
}

.figpair figure { margin: 0; }
.figpair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (min-width: 760px) {
  .figpair figure:first-child { margin-top: clamp(20px, 3vw, 44px); }
}

/* full-bleed footage with one line over it */
.break {
  position: relative;
  min-height: clamp(320px, 54vh, 520px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}

.break__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  z-index: 0;
}

.break__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(18, 16, 14, 0.86) 0%, rgba(18, 16, 14, 0.45) 55%, rgba(18, 16, 14, 0.2) 100%);
}

.break__say { position: relative; z-index: 2; }

.break__say p {
  margin: 0;
  color: var(--on-ink);
  font-size: clamp(28px, 5vw, 66px);
}

.break__say em {
  font-family: var(--meaning);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.03em;
}

/* the four directions, as a door to the styles page */
.dirs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
  margin-top: clamp(34px, 4.5vw, 52px);
}

@media (min-width: 820px) { .dirs { grid-template-columns: repeat(4, 1fr); } }

.dir {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink-raised);
}

.dir .piece__media { aspect-ratio: 3 / 4; }
/* the style clips are shot vertically with the dancer high in frame, so a
   centred crop into a 3:4 tile takes her head off */
.dir .piece__media img,
.dir .piece__media video,
.style__shot .piece__media img,
.style__shot .piece__media video { object-position: center 22%; }
.dir .piece__name { font-size: clamp(14px, 1.4vw, 18px); }

/* past masterclasses sit inside the classes band */
.mclass { margin-top: clamp(40px, 5.5vw, 64px); }

.mclass__head {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

/* the founder has no portrait now — the cutout below carries the section */
.founder--wide { grid-template-columns: 1fr; }
.founder--wide .founder__body p { max-width: 62ch; }

/* ------------------------------------------------------------
   Instagram — local pictures linking out, not a live feed
   ------------------------------------------------------------ */

.feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(6px, 1vw, 12px);
  margin-top: clamp(26px, 3.4vw, 38px);
}

@media (min-width: 700px) { .feed { grid-template-columns: repeat(3, 1fr); } }

.feed__cell { display: block; overflow: hidden; background: var(--ink-raised); }

.feed__cell img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.feed__cell:hover img { transform: scale(1.05); opacity: 0.85; }

#instagram .cta { margin-top: clamp(24px, 3vw, 34px); }

/* ------------------------------------------------------------
   Styles page
   ------------------------------------------------------------ */

.style {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.5vw, 52px);
  align-items: center;
}

@media (min-width: 860px) {
  .style { grid-template-columns: 1fr 1fr; }
  .style--flip .style__shot { order: 2; }
}

.style__shot { margin: 0; }
.style__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.style__idx {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0 0 12px;
}

.style__name {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 62px);
  text-transform: uppercase;
  line-height: 0.96;
  margin: 0 0 20px;
}

.style__say p {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 18.5px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 48ch;
}

.style__facts {
  margin: clamp(24px, 3vw, 32px) 0 0;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.style__facts div { display: grid; gap: 3px; }

.style__facts dt {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.style__facts dd { margin: 0; font-size: 15.5px; }

/* ------------------------------------------------------------
   Levels page — the name of the level is the heading, and the
   explanation sits under it. Open group on the light ground,
   closed group on the dark one.
   ------------------------------------------------------------ */

.lvl__idx {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.lvl__name {
  font-family: var(--display);
  font-size: clamp(44px, 10vw, 132px);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(28px, 4vw, 46px);
}

.lvl__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.5vw, 52px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--line);
}

@media (min-width: 860px) { .lvl__grid { grid-template-columns: 1.15fr 1fr; } }

.lvl__body p {
  margin: 0 0 1.1em;
  font-size: clamp(16px, 1.8vw, 18.5px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}

.lvl__body p:last-child { margin-bottom: 0; }

.lvl__facts { margin: 0; display: grid; gap: 14px; align-content: start; }
.lvl__facts div { display: grid; gap: 4px; }

.lvl__facts dt {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.lvl__facts dd { margin: 0; font-size: 15.5px; line-height: 1.45; }

.lvl .runsheet { margin-top: clamp(34px, 4.5vw, 48px); }
.lvl .cta { margin-top: clamp(28px, 3.5vw, 38px); }

/* the styles page tiles are players too */
.style__shot { position: relative; overflow: hidden; background: var(--ink-raised); }
.style__shot .piece__media { aspect-ratio: 4 / 5; }

/* ------------------------------------------------------------
   Contact — one row along the foot of the page rather than a
   section of its own, which left a tall empty field.
   ------------------------------------------------------------ */

.contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px clamp(24px, 4vw, 56px);
}

@media (min-width: 900px) {
  .contact-row { grid-template-columns: var(--rail) 1fr; align-items: start; }
}

.contact-row__label { position: static; padding-top: 2px; }

#contact .contacts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px clamp(20px, 3vw, 40px);
}

@media (min-width: 760px) { #contact .contacts { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------
   Band edges — the page was a hard stack of black and paper, and
   every join read as a cut. A short wash at each seam lets one
   ground settle into the next.
   ------------------------------------------------------------ */

.band--sand,
.band--bone {
  position: relative;
}

.band--sand::before,
.band--bone::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(48px, 7vw, 96px);
  background: linear-gradient(to bottom, var(--ink), transparent);
  opacity: 0.13;
  pointer-events: none;
}

.band--sand::after,
.band--bone::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(48px, 7vw, 96px);
  background: linear-gradient(to top, var(--ink), transparent);
  opacity: 0.13;
  pointer-events: none;
}

/* the content has to sit above the wash */
.band--sand > *,
.band--bone > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   Legal pages — Terms, Privacy. A document, so it is set as one:
   a single measured column, generous leading, nothing decorative
   competing with the text.
   ------------------------------------------------------------ */

.legal { max-width: 74ch; }

.legal__meta {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: clamp(20px, 3vw, 28px) 0 0;
}

.legal__lede {
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.6;
  margin: 0 0 clamp(30px, 4vw, 44px);
  padding-bottom: clamp(26px, 3.4vw, 36px);
  border-bottom: 1px solid var(--line);
}

.legal h2 {
  font-family: var(--display);
  font-size: clamp(19px, 2.2vw, 25px);
  text-transform: uppercase;
  line-height: 1.1;
  margin: clamp(38px, 4.6vw, 56px) 0 14px;
}

.legal h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.3;
  margin: clamp(26px, 3vw, 34px) 0 12px;
}

.legal p {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.68;
  color: var(--muted);
}

.legal p strong { color: var(--fg); font-weight: 600; }

.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { text-decoration-thickness: 2px; }

.legal__sig {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--line);
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ---------- footer gets the legal links ---------- */

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
}

.footer__legal a {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  text-decoration: none;
}

.footer__legal a:hover { color: var(--on-ink); }

@media (max-width: 640px) {
  .footer__inner { gap: 18px; }
}

/* ------------------------------------------------------------
   Consent checkboxes — deliberately plain and readable. This is
   the one part of a form nobody should be able to tick without
   noticing what it says.
   ------------------------------------------------------------ */

.consents {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.6vw, 26px) 0 0;
  border-top: 1px solid var(--line);
}

.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 12px;
  align-items: start;
  cursor: pointer;
}

.consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--fg);
  cursor: pointer;
  flex: none;
}

.consent > span {
  grid-column: 2;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.consent b { color: var(--fg); font-weight: 600; }

.consent a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

.consent .field__err { font-size: 12px; margin-top: 2px; }

.consent--optional {
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.consents__minor {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------
   Age — two choices, and the parent block the second one opens.
   ------------------------------------------------------------ */

.agegroup {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.agegroup legend {
  padding: 0;
  margin-bottom: 10px;
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.agegroup__opt {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
}

.agegroup__opt input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--fg);
  cursor: pointer;
}

.agegroup__hint {
  margin: 2px 0 0 34px;
  font-size: 13px;
  color: var(--muted);
}

.guardian {
  margin: 0;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--line);
  min-width: 0;
}

.guardian legend {
  padding: 0 8px;
  font-family: var(--data);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.guardian__why {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.guardian__grid { display: grid; gap: 20px; }

@media (min-width: 620px) { .guardian__grid { grid-template-columns: 1fr 1fr; } }


/* the cancellation rule, set under the prices where the decision is made */
.pricing__policy {
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--line);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}
.pricing__policy b { color: var(--fg); font-weight: 600; }
.pricing__policy a { color: inherit; }


/* ------------------------------------------------------------
   Plans — the prices on levels.html, as cards. Open group gets
   three across, the closed group one wide card under it.
   ------------------------------------------------------------ */

/* a solid button on a light band has to go dark, or it vanishes */
.band--sand .cta--solid,
.band--bone .cta--solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.band--sand .cta--solid:hover,
.band--bone .cta--solid:hover { background: transparent; color: var(--ink); }

.plans__group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 16px;
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--line);
  font-family: var(--data);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.plans__group span { font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }

.plans + .plans__group { margin-top: clamp(40px, 5vw, 60px); }

.plans {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  min-width: 0;
}

.plan__name {
  margin: 0;
  font-family: var(--data);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.plan__price {
  margin: 10px 0 18px;
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.plan__rows {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}

.plan__rows li { padding-left: 16px; position: relative; }
.plan__rows li::before { content: '—'; position: absolute; left: 0; }

.plan__cta { margin-top: auto; align-self: flex-start; }

/* the closed group: dark card on the light band, laid out in a row */
.plan--wide {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
  --muted: var(--on-ink-dim);
  gap: 4px 40px;
}

.plan--wide .plan__rows { margin-bottom: 22px; }
.plan--wide .cta--solid { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.plan--wide .cta--solid:hover { background: transparent; color: var(--on-ink); }

@media (min-width: 860px) {
  .plan--wide {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 1.3fr auto;
    align-items: center;
  }
  .plan--wide .plan__price,
  .plan--wide .plan__rows { margin-bottom: 0; }
  .plan--wide .plan__cta { margin-top: 0; }
}

#plans .pricing__policy { margin-top: clamp(28px, 3.5vw, 36px); }

/* Telegram — class details go out there, so it has to be installed */
.tg {
  display: grid;
  gap: 22px;
  margin-top: clamp(36px, 4.5vw, 52px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--fg);
}

@media (min-width: 860px) {
  .tg { grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
}

/* Telegram's own mark, in its own blue — the plane is what people look for */
.tg__logo { display: block; width: 56px; height: 56px; }
@media (min-width: 860px) { .tg__logo { width: 72px; height: 72px; } }

.tg__label {
  margin: 0 0 8px;
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.tg__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 32px);
  text-transform: uppercase;
  line-height: 1;
}

.tg__text p:last-child {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 54ch;
}

.tg__stores { display: flex; flex-wrap: wrap; gap: 12px; }
.tg__stores a { display: block; line-height: 0; border-radius: 9px; }
.tg__stores a:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.tg__stores img { height: 50px; width: auto; }


/* ------------------------------------------------------------
   The open group cycle (four classes) and the closed group week,
   on levels.html. Both read as a strip of slots on a call sheet.
   ------------------------------------------------------------ */

.cycle,
.week { margin-top: clamp(40px, 5vw, 60px); }

/* Red rubber stamp over the open-group block: the first thing people need to
   know is that they are not signing up for a course and cannot fall behind. */
/* Closed group lives behind one click: the page is for people choosing their
   first open class, and a second level on top of that only crowds the choice. */
.fold { border-top: 1px solid var(--line); }
.fold__sum {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.fold__sum::-webkit-details-marker { display: none; }
.fold__idx {
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.fold__name {
  font-family: var(--display);
  font-size: clamp(30px, 7vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.fold__caret {
  width: 22px;
  height: 22px;
  margin-left: auto;
  align-self: center;
  flex: none;
  color: var(--muted);
  transition: transform 0.18s ease;
}
.fold[open] .fold__caret { transform: rotate(180deg); }
.fold__sum:hover .fold__caret { color: var(--fg); }
.fold__sum:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
.fold__body { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .fold__caret { transition: none; } }

.stamp {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 16px 6px;
  border: 2px solid var(--glow);
  outline: 1px solid var(--glow);
  outline-offset: 3px;
  border-radius: 3px;
  transform: rotate(-2.5deg);
  transform-origin: left center;
  font-family: var(--display);
  font-size: clamp(15px, 2.4vw, 21px);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--glow);
}

.cycle__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 16px;
  font-family: var(--data);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cycle__head span { font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }

/* Answers the question people actually ask before booking: is one class enough? */
.cycle__note {
  margin: -6px 0 18px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.cycle__steps,
.week__days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--fg);
}

.cycle__steps { grid-template-columns: 1fr; }
@media (min-width: 560px) { .cycle__steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .cycle__steps { grid-template-columns: repeat(4, 1fr); } }

.cycle__steps li,
.week__days li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px clamp(14px, 1.8vw, 22px) 22px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

@media (min-width: 560px) {
  .cycle__steps li + li,
  .week__days li + li { padding-left: clamp(14px, 1.8vw, 22px); border-left: 1px solid var(--line); }
  .cycle__steps li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (min-width: 960px) {
  .cycle__steps li:nth-child(3) { border-left: 1px solid var(--line); padding-left: clamp(14px, 1.8vw, 22px); }
}

.cycle__n {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the one class that is filmed carries the recording light */
.cycle__rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  color: var(--glow);
}
.cycle__rec::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
}

.cycle__k {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  line-height: 1.1;
}

.cycle__steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 34ch;
}

/* the closed group week: three slots, the fixed one filled in */
.week__days { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 559px) {
  .week__days li + li { padding-left: 12px; border-left: 1px solid var(--line); }
}

.week__days .cycle__k { font-size: clamp(14px, 1.8vw, 20px); }

.week__req {
  background: var(--fg);
  color: var(--ink);
  padding-left: clamp(12px, 1.8vw, 22px) !important;
}
.week__req .cycle__n { color: var(--ink); opacity: 0.6; }

.week__note {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.lvl .cycle + .cta { margin-top: clamp(28px, 3.5vw, 38px); }
.week + .runsheet { margin-top: clamp(40px, 5vw, 56px); }


/* ------------------------------------------------------------
   welcome.html — where Stripe sends people after paying.
   A short dark head with an arrow, then three numbered steps.
   ------------------------------------------------------------ */

.welcome__head { padding-bottom: clamp(36px, 5vw, 56px); }
.welcome__head .pagehead__title { font-size: clamp(38px, 6vw, 80px); max-width: none; }

.welcome__lede {
  margin: 16px 0 0;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.5;
  max-width: 40ch;
}

.welcome__down {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-family: var(--data);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}
.welcome__down svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .welcome__down svg { animation: none; } }

.welcome__body { padding-top: clamp(28px, 4vw, 56px); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  min-width: 0;
}

/* the step that does the work gets the heavier frame */
.step--main { border: 2px solid var(--fg); }

.step__n {
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  font-family: var(--data);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.step--main .step__n { background: var(--fg); color: var(--bone); }

.step__k {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 24px);
  text-transform: uppercase;
  line-height: 1.1;
}

.step__p {
  margin: 0 0 4px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
}
.step__p a { color: inherit; }

.welcome__receipt {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* the one button that matters on this page, in Telegram's blue */
.tgjoin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 22px 10px 12px;
  border-radius: 999px;
  background: #26A5E4;
  color: #fff;
  font-family: var(--data);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.tgjoin:hover { background: #1c8fc8; }
.tgjoin:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.tgjoin svg { width: 32px; height: 32px; flex: none; }


/* ------------------------------------------------------------
   private.html — one photo, a pinned note for the first lesson,
   then prices and what a lesson covers.
   ------------------------------------------------------------ */

.priv {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
}
@media (min-width: 900px) { .priv { grid-template-columns: 0.9fr 1fr; align-items: start; } }

.priv__photo { margin: 0; }
.priv__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 935 / 1400;
  object-fit: cover;
}
@media (min-width: 900px) { .priv__photo { position: sticky; top: calc(var(--header-h) + 24px); } }

.priv__body > p:not([class]) {
  margin: 0 0 16px;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}

/* a sheet of paper pinned to the wall — the one skeuomorphic touch
   on the site, borrowed from the reference Sofya sent */
.pin {
  position: relative;
  margin: 14px 0 clamp(36px, 5vw, 52px);
  padding: 34px clamp(22px, 3vw, 32px) 26px;
  background: #fff;
  color: var(--ink);
  max-width: 400px;
  transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(18, 16, 14, 0.12), 0 14px 30px -12px rgba(18, 16, 14, 0.35);
}
.pin::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7a92, var(--glow) 55%, #9c2037);
  box-shadow: 0 3px 5px rgba(18, 16, 14, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .pin { transition: transform 0.3s ease; }
  .pin:hover { transform: rotate(0deg); }
}

.pin__k {
  margin: 0;
  font-family: var(--data);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pin__price {
  margin: 8px 0 12px;
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 54px);
  line-height: 1;
}
.pin__price span {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 500;
  color: rgba(18, 16, 14, 0.62);
}
.pin p:last-child {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(18, 16, 14, 0.75);
}

.priv__rows { margin-top: 0; max-width: 420px; }

.priv__small {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.priv__h {
  margin: clamp(40px, 5vw, 56px) 0 14px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  text-transform: uppercase;
  line-height: 1.05;
}

.priv__em {
  font-family: var(--meaning);
  font-style: italic;
  font-size: 1.15em;
  color: var(--fg);
}

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  padding: 7px 14px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  font-size: 14.5px;
}

.priv__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

/* ------------------------------------------------------------
   private.html hero: the title on the left; on the right Sofya,
   cut out, pointing up at the first-lesson note pinned above her.
   ------------------------------------------------------------ */
.phero__grid {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 900px) { .phero__grid { grid-template-columns: 1fr 1fr; } }

/* left column: title, button, and Sofya under them */
.phero__words {
  position: relative;
  container-type: inline-size;
}
@media (min-width: 900px) { .phero__words { padding-top: 12px; } }

.phero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 13vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
@media (min-width: 900px) { .phero__title { font-size: min(7.2vw, 100px); } }

.phero__sub {
  margin: 18px 0 0;
  font-family: var(--data);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.phero__sub em {
  font-family: var(--meaning);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: 0;
  text-transform: none;
}
.phero__cta { margin-top: clamp(22px, 3vw, 32px); }

/* she points up and to the left: the fingertip lands just past the
   button's right edge, pointing at it */
.phero__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 104%;
  max-width: none;
  height: auto;
  margin: 0 0 0 -2%;
}

/* a soft floor under her */
.phero__words::after {
  content: '';
  position: absolute;
  left: 4%;
  right: -2%;
  bottom: -1.5%;
  height: 6%;
  background: radial-gradient(closest-side, rgba(18, 16, 14, 0.22), transparent);
  pointer-events: none;
}

/* right column: the note on top, then everything else */
.phero__side .pin { margin: 12px 0 clamp(40px, 5vw, 56px); }
.phero__side > p:not([class]) {
  margin: 0 0 16px;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}
.phero__side .priv__h:first-of-type { margin-top: clamp(40px, 5vw, 56px); }

@media (min-width: 900px) {
  .priv { grid-template-columns: 1fr 1fr; }
}
.priv__h--first { margin-top: 0; }
@media (max-width: 899px) { .priv__h--first { margin-top: clamp(24px, 4vw, 40px); } }

/* main.js drops the header's backing at the top of the page, which is
   fine over a dark page head — this one is light, so keep it dark */
body:has(.phero) .header { background: rgba(18, 16, 14, 0.94); backdrop-filter: blur(10px); }


/* the classes band has two labelled rows (in person, online); the
   videos and prices under them sit in the content column, no label */
@media (min-width: 900px) { .rail-layout__main { grid-column: 2; } }

/* a clip shot full length (Open Style2): the tile takes the video's own
   shape, 9:16 less a sliver, so nothing comes off the sides and only a
   little of the ceiling comes off the top */
.piece--low .piece__media { aspect-ratio: 9 / 15; }
.piece--low .piece__media img,
.piece--low .piece__media video { object-position: center 100%; }

/* on the home page the four directions sit in one row, so they share
   that shape — one tall tile among short ones would break the row */
.dir .piece__media { aspect-ratio: 9 / 15; }

/* a question that opens a direction — Hip-hop heels — set larger than
   the paragraph under it, its answer in the serif Sofya uses for meaning */
.style__say .style__ask {
  margin: 0 0 14px;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.35;
  color: var(--fg);
}
.style__ask em {
  font-family: var(--meaning);
  font-style: italic;
  font-size: 1.12em;
}

.tier__buy { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 12px 0 0; }

/* the studio, when a month's list mixes two */
.slot__where {
  margin-left: 6px;
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}
.slot.is-next .slot__where { color: rgba(242, 237, 230, 0.65); }

/* the classes band has two rails (in person, online); sticky, both would
   ride down the whole band and pile on top of each other */
#classes .rail { position: static; }

/* two studios, two chats: the buttons sit side by side and wrap on a phone */
.tgjoin__pair { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------
   videos.html — a plain gallery: poster, tap to play with sound,
   caption under each one. No rotation, no greyscale, no JS.
   ------------------------------------------------------------ */
.gal {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 28px);
}
@media (min-width: 620px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(3, 1fr); } }

.gal__item { margin: 0; }

.gal__video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--ink-raised);
}

.gal__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-top: 12px;
}

.gal__name {
  font-family: var(--display);
  font-size: clamp(16px, 1.8vw, 20px);
  text-transform: uppercase;
  line-height: 1.1;
}

.gal__meta {
  font-family: var(--data);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.gal__note {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  font-size: 14px;
  color: var(--muted);
}

.gal__head {
  margin: 0 0 clamp(20px, 2.6vw, 28px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  text-transform: uppercase;
  line-height: 1.05;
}

.gal__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--ink-raised);
}

/* a clip filmed landscape gets a wide tile instead of the 4:5 one */
@media (min-width: 620px) { .gal__item--wide { grid-column: span 2; } }
.gal__video--wide { aspect-ratio: 16 / 9; }

/* the studio name and weekly times under each month's heading */
.venue__studio {
  margin: 6px 0 0;
  font-family: var(--data);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.slot__time { white-space: nowrap; }

/* hero "Studio" cell: studio name, then the neighbourhood small under it */
.sheet__area {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}

/* October blocks: studio name at a modest size, the area beside it */
.venue__title--studio {
  font-size: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.venue__area {
  font-family: var(--data);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the month heading above the two October studios */
.venue__month { margin-top: clamp(48px, 6vw, 72px); }
.venue__month + .venue { margin-top: clamp(20px, 2.6vw, 28px); }