/* =========================================================================
   You Danse — single stylesheet
   Palette taken from the site: white, blush pink, off-black
   Display: Fraunces (variable, WONK/SOFT axes)   Body: Jost (variable)
   ========================================================================= */

/* ---------- Self-hosted fonts (GDPR: no third-party CDN request) --------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces ships italics as a separate file: without these two faces the
   browser fakes them by slanting the roman, which a serif never survives. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ------------------------------------------------ */
:root {
  /* color — warm off-white, powder pink, warm off-black.
     The pink comes from the ballroom dresses in the photos; every neutral is
     warm, never a bluish grey. Two roses: --rose is decorative (hairlines,
     borders, surfaces on dark), --accent is the same hue darkened until it
     clears AA against the two page backgrounds, and is the only one allowed
     to carry text. */
  --white: #ffffff;
  --cream: #faf6f3;
  --blush: #f3eae5;
  --blush-line: #e2cfc9;
  --rose: #be7873;
  --rose-pale: #f0c9c4;
  --accent: #9c4a45;
  --accent-dark: #7e3a36;
  --accent-pale: #f6e9e6;
  --black: #26201e;
  --ink: #26201e;
  --text: #4a413e;
  --text-muted: #6f625e;
  --on-photo: rgba(250, 246, 243, 0.86);
  /* Photo scrims are neutral warm black: the picture keeps its own colours. */
  --plum: #7e4a46;
  --plum-deep: #4a2f2c;

  /* typography */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --wonk: 'SOFT' 20, 'WONK' 1;

  /* spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 7rem;
  --section-y: clamp(4rem, 2.4rem + 6vw, 8rem);

  /* strokes and motion */
  --rule: 1px solid #ecdcd7;
  --rule-blush: 1px solid #e2cfc9;
  --radius: 6px;
  --transition: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
}

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

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

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

body.is-locked {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* <picture> must not sit between grid/flex containers and their items */
picture {
  display: contents;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 96, var(--wonk);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
}

h2 {
  font-size: clamp(1.95rem, 1.45rem + 2.1vw, 2.9rem);
}

h3 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  line-height: 1.15;
}

h4 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 var(--s4);
  text-wrap: pretty;
}

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

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--white);
  padding: var(--s3) var(--s5);
  font-weight: 500;
}

.skip-link:focus {
  left: var(--s4);
  top: var(--s4);
}

/* ---------- Layout utilities --------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .wrap {
    width: min(100% - 5rem, 1200px);
  }
}

.narrow-column {
  max-width: 62ch;
}

.section {
  padding-block: var(--section-y);
}

.section--no-top {
  padding-top: 0;
}

.section--no-bottom {
  padding-bottom: 0;
}

/* Two blocks that belong together get less air between them than two blocks
   that argue different points. */
.section--tight-top {
  padding-top: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);
}

.section--tight-bottom {
  padding-bottom: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);
}

.section--blush {
  background: var(--blush);
  border-block: var(--rule-blush);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s5);
}

.eyebrow::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

/* Rose hairline opening a block, and the small caps label that follows it.
   The two are separate elements so the rule can sit alone above a heading. */
.hairline {
  width: 52px;
  height: 1px;
  background: var(--rose);
  border: 0;
  margin: 0 0 var(--s5);
}

.hairline--light {
  background: var(--rose-pale);
}

.label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s5);
}

.lead {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text);
}

.lead--spaced {
  margin-bottom: var(--s6);
}

.title--spaced {
  margin-bottom: var(--s5);
}

.spaced-top {
  margin-top: var(--s7);
}

.rule {
  border: 0;
  border-top: var(--rule);
  margin: 0;
}

.rule--section {
  margin-bottom: var(--section-y);
}

.measure {
  max-width: 64ch;
}

.center {
  text-align: center;
  margin-inline: auto;
}

/* ---------- Inline text links -------------------------------------------- */
/* Internal-linking anchors read as plain text at rest — no colour, no
   underline. The only hint is a rose rule on hover, which costs nothing to a
   reader who is not looking for a link. Buttons inside .prose keep their own
   styling, and the keyboard focus ring is untouched (global :focus-visible). */
.prose a:not(.button),
.link {
  color: inherit;
  text-decoration: none;
  background-image: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.prose a:not(.button):hover,
.link:hover {
  color: inherit;
  text-decoration: none;
  background-image: none;
  border-bottom-color: var(--rose);
}

/* The one exception: the link a page is actually trying to get clicked. */
.prose a.link--accent,
a.link--accent {
  color: var(--accent);
  border-bottom: 1px solid var(--blush-line);
}

.prose a.link--accent:hover,
a.link--accent:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

/* ---------- Buttons ------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-decoration: none;
  padding: 0.95rem 1.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.button:active {
  transform: translateY(1px);
}

.button--solid,
.button--ink {
  background: var(--ink);
  color: var(--cream);
}

.button--solid:hover,
.button--ink:hover {
  background: #3a302d;
  color: var(--cream);
}

.button--outline,
.button--outline-ink {
  background: transparent;
  color: var(--accent);
  border-color: var(--blush-line);
}

.button--outline:hover,
.button--outline-ink:hover {
  background: var(--accent-pale);
  color: var(--accent-dark);
  border-color: var(--rose);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.button-group--spaced {
  margin-top: var(--s7);
}

/* ---------- Site header --------------------------------------------------- */
/* Sticky, not fixed: the header takes its own space in the flow, so no page
   has to reserve --header-h at the top of its hero. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(250, 246, 243, 0.88);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: var(--rule);
  transition: box-shadow var(--transition);
}

/* Backdrop blur is decorative; where it is unsupported the bar must still be
   opaque enough to read the navigation against a photo scrolling under it. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-header {
    background: var(--cream);
  }
}

.site-header.is-stuck {
  box-shadow: 0 1px 18px rgba(38, 32, 30, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  padding-block: var(--s4);
}

@media (min-width: 48rem) {
  .site-header__inner {
    width: min(100% - 5rem, 1200px);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.brand img {
  height: 34px;
  width: auto;
}

.nav {
  display: none;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
}

.nav a {
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-decoration: none;
  color: var(--ink);
  padding-block: var(--s1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}

.nav a:hover {
  border-bottom-color: var(--rose);
}

.nav a[aria-current='page'] {
  color: var(--accent);
  border-bottom-color: var(--rose);
}

/* The Contact link is the site's only destination that matters commercially:
   it is the one nav item allowed to look like a button. */
.nav a.nav__cta {
  color: var(--cream);
  background: var(--ink);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  border-bottom: 0;
  transition: background-color var(--transition);
}

.nav a.nav__cta:hover,
.nav a.nav__cta[aria-current='page'] {
  color: var(--cream);
  background: #3a302d;
  border-bottom-color: transparent;
}

@media (min-width: 62rem) {
  .nav {
    display: flex;
  }
}

/* Mobile menu toggle */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transition: transform var(--transition), opacity var(--transition);
}

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

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (min-width: 62rem) {
  .nav-toggle {
    display: none;
  }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--cream);
  padding: calc(var(--header-h) + var(--s7)) 0 var(--s7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer nav {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.drawer a {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, var(--wonk);
  font-size: clamp(2rem, 1.4rem + 3.4vw, 3rem);
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  border-bottom: var(--rule);
  padding-bottom: var(--s3);
}

.drawer a[aria-current='page'] {
  color: var(--accent);
}

@media (min-width: 62rem) {
  .drawer {
    display: none;
  }
}

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--black);
  color: var(--cream);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}

/* No top padding for the header: it is sticky, so it already occupies the
   space above the hero rather than floating over it. */
.hero--tall {
  min-height: clamp(460px, 72vh, 720px);
  padding-block: var(--s8);
}

.hero--banner {
  min-height: clamp(300px, 44vh, 460px);
  padding-block: var(--s7) 3.5rem;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
}

/* Warm black, no tint: the veil darkens the photograph without colouring it. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(30, 24, 22, 0.36) 0%,
    rgba(30, 24, 22, 0.32) 38%,
    rgba(30, 24, 22, 0.78) 100%
  );
}

.hero__content {
  max-width: min(100%, 44rem);
}

.hero h1 {
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 0;
  font-weight: 400;
  font-size: clamp(2.15rem, 1.2rem + 4.4vw, 4.15rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 17ch;
}

.hero__lead {
  max-width: 46ch;
  margin-top: var(--s5);
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.28rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text);
}

.hero .button-group {
  margin-top: var(--s6);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s7);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: var(--rule-blush);
}

.hero__facts div {
  min-width: 8rem;
}

.hero__facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s1);
}

.hero__facts dd {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, var(--wonk);
  font-size: 1.45rem;
  line-height: 1.2;
}

.hero__facts small {
  display: block;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0;
}

.hero--banner .hero__content {
  max-width: min(100%, 36rem);
}

.hero--banner h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
}

.hero--plain {
  min-height: min(38vh, 360px);
  padding-block: var(--s8) var(--s7);
}

.hero--plain .hero__scrim {
  background: radial-gradient(
      120% 90% at 12% 100%,
      rgba(190, 120, 115, 0.16) 0%,
      rgba(38, 32, 30, 0) 60%
    ),
    var(--cream);
}

/* ---------- Editorial blocks --------------------------------------------- */
/* The opening statement of a page or a section: display serif, italic, one
   step below the h1 so the hero keeps the top of the hierarchy. */
.statement {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 0;
  font-style: italic;
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.15rem);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.006em;
  color: var(--ink);
  margin: 0;
}

/* Sentence introducing a section, under its heading. */
.section__lead {
  font-size: 1rem;
  color: var(--text);
  max-width: 60ch;
  margin: 0 0 var(--s6);
}

.section__title {
  margin-bottom: var(--s2);
}

/* Two columns that collapse to one when there is no room for two. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.split--wide-gap {
  gap: clamp(2.5rem, 7vw, 6.875rem);
}

.split h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  margin-bottom: var(--s3);
}

/* ---------- Photographs --------------------------------------------------- */
/* Photographs are placed, not stretched across the viewport: a rounded block
   in the column grid, cropped to a ratio rather than to a strip.
   Several of the source files are small (300–320px wide): --small caps them
   at their real width instead of blowing them up. */
.figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blush);
}

.figure img {
  width: 100%;
  height: clamp(220px, 30vw, 340px);
  object-fit: cover;
  object-position: center center;
}

.figure--tall img {
  height: clamp(300px, 40vw, 520px);
}

.figure--small {
  max-width: 340px;
}

.figure--small img {
  height: auto;
}

/* Side by side, photographs of different shapes must still line up: they are
   cropped to a common ratio rather than left to end wherever they end. */
.split .figure {
  margin-bottom: var(--s5);
}

.split .figure--small img {
  aspect-ratio: 4 / 3;
}

.figures .figure--small img {
  aspect-ratio: 5 / 4;
}

/* Group photos: anchor to the top so faces are never cropped. */
.figure--faces img {
  object-position: center top;
}

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s5);
  align-items: start;
}

/* ---------- Dark call-to-action panel ------------------------------------ */
.cta-panel {
  background: linear-gradient(150deg, var(--plum), var(--plum-deep));
  color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s6);
  flex-wrap: wrap;
}

.cta-panel__text {
  max-width: 52ch;
}

.cta-panel .label {
  color: var(--rose-pale);
  margin-bottom: var(--s3);
}

.cta-panel h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  margin-bottom: var(--s3);
}

.cta-panel p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #f0dad6;
}

.button--light {
  background: var(--cream);
  color: var(--ink);
  flex-shrink: 0;
}

.button--light:hover {
  background: var(--rose-pale);
  color: var(--ink);
}

/* ---------- Closing line -------------------------------------------------- */
.closing {
  text-align: center;
}

.closing p {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 0;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.4;
  margin: 0 auto;
  max-width: 30ch;
  text-wrap: balance;
}

.closing .button {
  margin-top: var(--s6);
}

/* ---------- Figures in numbers -------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}

.stat {
  text-align: center;
}

.stat__value {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 0;
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  line-height: 1;
  color: var(--accent);
}

.stat__value small {
  font-size: 0.4em;
}

.stat p {
  margin: var(--s3) 0 0;
  font-size: 0.95rem;
  color: var(--text);
}

/* ---------- Labelled details --------------------------------------------- */
.details {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.details dt {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s1);
}

.details dd {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 40, 'WONK' 0;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--ink);
}

.details dd.details__plain {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

/* ---------- Contact form -------------------------------------------------- */
/* The form sits on the blush surface so it reads as the object of the page,
   with its fields knocked back out in cream. */
.form-panel {
  background: var(--blush);
  border: var(--rule-blush);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
}

.form {
  display: grid;
  gap: var(--s5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.field label {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.field label .required {
  color: var(--accent);
}

.field input,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--blush-line);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(190, 120, 115, 0.22);
}

.field textarea {
  resize: vertical;
  min-height: 10rem;
  line-height: 1.6;
}

.field--error input,
.field--error textarea {
  border-color: #a4243b;
}

.field__error {
  font-size: 0.85rem;
  color: #a4243b;
  min-height: 1.2em;
}

.field-pair {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 34rem) {
  .field-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__footer {
  display: grid;
  gap: var(--s4);
  justify-items: center;
}

.form__footer .button {
  width: 100%;
  justify-content: center;
}

.form__note {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.form-message {
  padding: var(--s4) var(--s5);
  border-left: 2px solid var(--accent);
  background: rgba(168, 90, 85, 0.1);
  font-size: 0.95rem;
}

.form-message[hidden] {
  display: none;
}

.form-message--error {
  border-left-color: #a4243b;
  background: rgba(164, 36, 59, 0.08);
}

.button[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

/* Side info column */
.info-card {
  background: var(--white);
  border: var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
}

.info-card dl {
  margin: 0;
}

.info-card dt {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s1);
}

.info-card dd {
  margin: 0 0 var(--s5);
  font-size: 1rem;
  color: var(--text);
}

.info-card dd:last-child {
  margin-bottom: 0;
}

.info-card dd strong {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, var(--wonk);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ---------- Legal pages --------------------------------------------------- */
.prose-legal {
  max-width: 70ch;
}

.prose-legal h2 {
  font-variation-settings: 'opsz' 32, 'SOFT' 40, 'WONK' 0;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  letter-spacing: -0.012em;
  margin-top: var(--s7);
  margin-bottom: var(--s3);
}

.prose-legal h2:first-of-type {
  margin-top: 0;
}

.prose-legal h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: var(--s5);
  margin-bottom: var(--s3);
}

.prose-legal p,
.prose-legal li {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.8;
}

.prose-legal ul {
  padding-left: 1.1rem;
  margin: 0 0 var(--s4);
}

.prose-legal li {
  margin-bottom: var(--s2);
}

.prose-legal address {
  font-style: normal;
  color: var(--text);
}

.prose-legal .legal-quote {
  border-left: 2px solid rgba(168, 90, 85, 0.5);
  padding-left: var(--s5);
  margin: 0 0 var(--s4);
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ---------- Site footer --------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #c9bdb8;
  padding-block: var(--s7) var(--s6);
  font-size: 0.88rem;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
}

.site-footer p {
  margin: 0;
  color: #9d918c;
  letter-spacing: 0.02em;
}

/* The logo is a single-colour drawing in #333: on the dark footer it is
   knocked out to the page cream rather than reproduced in a second file. */
.site-footer .brand {
  margin-bottom: var(--s4);
}

.site-footer .brand img {
  height: 30px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
}

.site-footer a {
  color: #c9bdb8;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}

.site-footer a:hover {
  color: var(--cream);
  border-bottom-color: #8a7d78;
}

/* ---------- Two-column intro (home page) --------------------------------- */
/* ---------- Running text -------------------------------------------------- */
.prose p {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.15rem);
  line-height: 1.85;
  color: var(--text);
  max-width: 60ch;
}

.prose p + p {
  margin-top: var(--s5);
}

/* Closing line — a page's single call to action, set in the display face so
   it reads as an address to the visitor rather than more body copy. */
.closing-line {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'SOFT' 40, 'WONK' 0;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.55;
}

.prose p.closing-line {
  color: var(--ink);
}

/* ---------- Dance list ---------------------------------------------------- */
/* The eleven dances appear twice on the site, at two different weights.
   On the home page they are a mention in passing — pills, one paragraph of
   height. On Les Cours they are the subject of the page and get the room to
   say so. Same list, two modifiers. */
.dances {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Home page: a set, read at a glance. */
.dances--pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.dances--pills li {
  font-family: var(--display);
  font-variation-settings: 'opsz' 32, 'SOFT' 40, 'WONK' 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
  letter-spacing: -0.008em;
  line-height: 1.3;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--blush-line);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
}

/* On the cream page background the pills need the darker surface instead. */
.section:not(.section--blush) .dances--pills li {
  background: var(--blush);
}

/* Les Cours: a repertoire. Ruled rows, display type, room to breathe. */
.dances--roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: var(--rule-blush);
}

.dances--roster li {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'SOFT' 40, 'WONK' 0;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
  padding: 1.35rem 0.5rem;
  border-bottom: var(--rule-blush);
}

/* ---------- Featured price ------------------------------------------------ */
/* The price is a sentence, not a badge: display type, in the flow of the
   column that explains what it buys. */
.price {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'SOFT' 40, 'WONK' 0;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.price strong {
  font-weight: 500;
}

/* ---------- Schedule cards ------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--s5);
  align-items: start;
}

.card {
  background: var(--cream);
  border: var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1.6vw, 1.9rem);
  height: 100%;
}

.card h3 {
  font-variation-settings: 'opsz' 32, 'SOFT' 40, 'WONK' 0;
  font-weight: 500;
  font-size: 1.3rem;
  margin-bottom: var(--s4);
}

.card p {
  margin-bottom: var(--s2);
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--text);
}

.card strong {
  font-weight: 500;
  color: var(--ink);
}

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

.notes {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--rule);
  color: var(--text);
}

.notes p {
  margin-bottom: var(--s3);
}

/* ---------- Signature ---------------------------------------------------- */
.signature {
  margin-top: var(--s6);
  font-family: var(--display);
  font-variation-settings: 'opsz' 60, 'SOFT' 40, 'WONK' 0;
  font-style: italic;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* ---------- One-off adjustments ------------------------------------------ */
.measure {
  max-width: 64ch;
}

.button-group--center {
  justify-content: center;
}

.button-group--spaced {
  margin-top: var(--s6);
}

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

/* ---------- Scroll reveals ------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal[data-delay='1'] {
  transition-delay: 90ms;
}

.reveal[data-delay='2'] {
  transition-delay: 180ms;
}

.reveal[data-delay='3'] {
  transition-delay: 270ms;
}

@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;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .dance__beat i.is-beat {
    transform: none;
  }
}

/* ---------- Print --------------------------------------------------------- */
@media print {
  .site-header,
  .drawer,
  .cta,
  .button {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}